feat: glob patterns exclusion for external assets

Fixes #811

Author: JulianCataldo

packages/rollup-plugin-html/package.json

@@ -48,10 +48,12 @@
     "glob": "^10.0.0",
     "html-minifier-terser": "^7.1.0",
     "lightningcss": "^1.24.0",
-    "parse5": "^6.0.1"
+    "parse5": "^6.0.1",
+    "picomatch": "^4.0.1"
   },
   "devDependencies": {
     "@types/html-minifier-terser": "^7.0.0",
-    "rollup": "^4.4.0"
+    "rollup": "^4.4.0",
+    "@types/picomatch": "^2.3.3"
   }
 }

packages/rollup-plugin-html/src/RollupPluginHTMLOptions.ts

@@ -29,6 +29,8 @@ export interface RollupPluginHTMLOptions {
   transformHtml?: TransformHtmlFunction | TransformHtmlFunction[];
   /** Whether to extract and bundle assets referenced in HTML. Defaults to true. */
   extractAssets?: boolean;
+  /** Whether to ignore assets referenced in HTML with glob patterns. */
+  external?: string[];
   /** Define a full absolute url to your site (e.g. https://domain.com) */
   absoluteBaseUrl?: string;
   /** Whether to set full absolute urls for ['meta[property=og:image]', 'link[rel=canonical]', 'meta[property=og:url]'] or not. Requires a absoluteBaseUrl to be set. Default to true. */

packages/rollup-plugin-html/src/input/extract/extractAssets.ts

@@ -1,6 +1,7 @@
 import { Document, serialize } from 'parse5';
 import fs from 'fs';
 import path from 'path';
+import picomatch from 'picomatch';
 import { InputAsset } from '../InputData.js';
 import {
   findAssets,
@@ -15,6 +16,7 @@ export interface ExtractAssetsParams {
   htmlDir: string;
   rootDir: string;
   absolutePathPrefix?: string;
+  external: string[];
 }
 
 export function extractAssets(params: ExtractAssetsParams): InputAsset[] {
@@ -24,6 +26,9 @@ export function extractAssets(params: ExtractAssetsParams): InputAsset[] {
   for (const node of assetNodes) {
     const sourcePaths = getSourcePaths(node);
     for (const sourcePath of sourcePaths) {
+      const isExternal = picomatch(params.external);
+      if (isExternal(sourcePath)) continue;
+
       const filePath = resolveAssetFilePath(
         sourcePath,
         params.htmlDir,

packages/rollup-plugin-html/src/input/extract/extractModulesAndAssets.ts

@@ -8,11 +8,12 @@ export interface ExtractParams {
   htmlFilePath: string;
   rootDir: string;
   extractAssets: boolean;
+  external: string[];
   absolutePathPrefix?: string;
 }
 
 export function extractModulesAndAssets(params: ExtractParams) {
-  const { html, htmlFilePath, rootDir, absolutePathPrefix } = params;
+  const { html, htmlFilePath, rootDir, absolutePathPrefix, external } = params;
   const htmlDir = path.dirname(htmlFilePath);
   const document = parse(html);
 
@@ -24,7 +25,7 @@ export function extractModulesAndAssets(params: ExtractParams) {
     absolutePathPrefix,
   });
   const assets = params.extractAssets
-    ? extractAssets({ document, htmlDir, htmlFilePath, rootDir, absolutePathPrefix })
+    ? extractAssets({ document, htmlDir, htmlFilePath, rootDir, absolutePathPrefix, external })
     : [];
 
   // turn mutated AST back to a string

packages/rollup-plugin-html/src/input/getInputData.ts

@@ -31,18 +31,20 @@ export interface CreateInputDataParams {
   rootDir: string;
   filePath?: string;
   extractAssets: boolean;
+  external: string[];
   absolutePathPrefix?: string;
 }
 
 function createInputData(params: CreateInputDataParams): InputData {
-  const { name, html, rootDir, filePath, extractAssets, absolutePathPrefix } = params;
+  const { name, html, rootDir, filePath, extractAssets, absolutePathPrefix, external } = params;
   const htmlFilePath = filePath ? filePath : path.resolve(rootDir, name);
   const result = extractModulesAndAssets({
     html,
     htmlFilePath,
     rootDir,
     extractAssets,
     absolutePathPrefix,
+    external,
   });
 
   return {
@@ -65,6 +67,7 @@ export function getInputData(
     extractAssets = true,
     absolutePathPrefix,
     exclude: ignore,
+    external = [],
   } = pluginOptions;
   const allInputs = normalizeInputOptions(pluginOptions, rollupInput);
 
@@ -78,6 +81,7 @@ export function getInputData(
         rootDir,
         extractAssets,
         absolutePathPrefix,
+        external,
       });
       result.push(data);
     } else if (typeof input.path === 'string') {
@@ -98,6 +102,7 @@ export function getInputData(
           filePath,
           extractAssets,
           absolutePathPrefix,
+          external,
         });
         result.push(data);
       }

packages/rollup-plugin-html/src/output/getOutputHTML.ts

@@ -55,6 +55,7 @@ export async function getOutputHTML(params: GetOutputHTMLParams) {
       emittedAssets,
       absolutePathPrefix,
       publicPath: pluginOptions.publicPath,
+      external: pluginOptions.external,
     });
   }
   if (!defaultInjectDisabled) {

packages/rollup-plugin-html/src/output/injectedUpdatedAssetPaths.ts

@@ -1,6 +1,7 @@
 import { getAttribute, setAttribute } from '@web/parse5-utils';
 import { Document } from 'parse5';
 import path from 'path';
+import picomatch from 'picomatch';
 
 import {
   findAssets,
@@ -20,6 +21,7 @@ export interface InjectUpdatedAssetPathsArgs {
   outputDir: string;
   rootDir: string;
   emittedAssets: EmittedAssets;
+  external: string[];
   publicPath?: string;
   absolutePathPrefix?: string;
 }
@@ -44,12 +46,16 @@ export function injectedUpdatedAssetPaths(args: InjectUpdatedAssetPathsArgs) {
     emittedAssets,
     publicPath = './',
     absolutePathPrefix,
+    external,
   } = args;
   const assetNodes = findAssets(document);
 
   for (const node of assetNodes) {
     const sourcePaths = getSourcePaths(node);
     for (const sourcePath of sourcePaths) {
+      const isExternal = picomatch(external);
+      if (isExternal(sourcePath)) continue;
+
       const htmlFilePath = input.filePath ? input.filePath : path.join(rootDir, input.name);
       const htmlDir = path.dirname(htmlFilePath);
       const filePath = resolveAssetFilePath(sourcePath, htmlDir, rootDir, absolutePathPrefix);