feat(rollup-plugin-html): glob patterns exclusion for external assets

Fixes #811

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 and CSS with glob patterns. */
+  externalAssets?: string | 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,
@@ -14,6 +15,7 @@ export interface ExtractAssetsParams {
   htmlFilePath: string;
   htmlDir: string;
   rootDir: string;
+  externalAssets?: string | string[];
   absolutePathPrefix?: string;
 }
 
@@ -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.externalAssets || []);
+      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;
+  externalAssets?: string | string[];
   absolutePathPrefix?: string;
 }
 
 export function extractModulesAndAssets(params: ExtractParams) {
-  const { html, htmlFilePath, rootDir, absolutePathPrefix } = params;
+  const { html, htmlFilePath, rootDir, externalAssets, absolutePathPrefix } = params;
   const htmlDir = path.dirname(htmlFilePath);
   const document = parse(html);
 
@@ -24,7 +25,14 @@ export function extractModulesAndAssets(params: ExtractParams) {
     absolutePathPrefix,
   });
   const assets = params.extractAssets
-    ? extractAssets({ document, htmlDir, htmlFilePath, rootDir, absolutePathPrefix })
+    ? extractAssets({
+        document,
+        htmlDir,
+        htmlFilePath,
+        rootDir,
+        externalAssets,
+        absolutePathPrefix,
+      })
     : [];
 
   // turn mutated AST back to a string

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

@@ -31,17 +31,20 @@ export interface CreateInputDataParams {
   rootDir: string;
   filePath?: string;
   extractAssets: boolean;
+  externalAssets?: string | string[];
   absolutePathPrefix?: string;
 }
 
 function createInputData(params: CreateInputDataParams): InputData {
-  const { name, html, rootDir, filePath, extractAssets, absolutePathPrefix } = params;
+  const { name, html, rootDir, filePath, extractAssets, externalAssets, absolutePathPrefix } =
+    params;
   const htmlFilePath = filePath ? filePath : path.resolve(rootDir, name);
   const result = extractModulesAndAssets({
     html,
     htmlFilePath,
     rootDir,
     extractAssets,
+    externalAssets,
     absolutePathPrefix,
   });
 
@@ -63,6 +66,7 @@ export function getInputData(
     rootDir = process.cwd(),
     flattenOutput,
     extractAssets = true,
+    externalAssets,
     absolutePathPrefix,
     exclude: ignore,
   } = pluginOptions;
@@ -77,6 +81,7 @@ export function getInputData(
         html: input.html,
         rootDir,
         extractAssets,
+        externalAssets,
         absolutePathPrefix,
       });
       result.push(data);
@@ -97,6 +102,7 @@ export function getInputData(
           rootDir,
           filePath,
           extractAssets,
+          externalAssets,
           absolutePathPrefix,
         });
         result.push(data);

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

@@ -53,6 +53,7 @@ export async function getOutputHTML(params: GetOutputHTMLParams) {
       outputDir,
       rootDir,
       emittedAssets,
+      externalAssets: pluginOptions.externalAssets,
       absolutePathPrefix,
       publicPath: pluginOptions.publicPath,
     });

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;
+  externalAssets?: string | string[];
   publicPath?: string;
   absolutePathPrefix?: string;
 }
@@ -42,6 +44,7 @@ export function injectedUpdatedAssetPaths(args: InjectUpdatedAssetPathsArgs) {
     outputDir,
     rootDir,
     emittedAssets,
+    externalAssets,
     publicPath = './',
     absolutePathPrefix,
   } = args;
@@ -50,6 +53,9 @@ export function injectedUpdatedAssetPaths(args: InjectUpdatedAssetPathsArgs) {
   for (const node of assetNodes) {
     const sourcePaths = getSourcePaths(node);
     for (const sourcePath of sourcePaths) {
+      const isExternal = picomatch(externalAssets || []);
+      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);