Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Next Next commit
feat(rollup-plugin-html): glob patterns exclusion for external assets
Fixes #811
JulianCataldo authored and bashmish committed Mar 19, 2024
commit 49a40076067d715a7272c1b288d125031c17bde5
6 changes: 4 additions & 2 deletions packages/rollup-plugin-html/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
2 changes: 2 additions & 0 deletions packages/rollup-plugin-html/src/RollupPluginHTMLOptions.ts
Original file line number Diff line number Diff line change
@@ -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. */
Original file line number Diff line number Diff line change
@@ -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,
Original file line number Diff line number Diff line change
@@ -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
8 changes: 7 additions & 1 deletion packages/rollup-plugin-html/src/input/getInputData.ts
Original file line number Diff line number Diff line change
@@ -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);
1 change: 1 addition & 0 deletions packages/rollup-plugin-html/src/output/getOutputHTML.ts
Original file line number Diff line number Diff line change
@@ -53,6 +53,7 @@ export async function getOutputHTML(params: GetOutputHTMLParams) {
outputDir,
rootDir,
emittedAssets,
externalAssets: pluginOptions.externalAssets,
absolutePathPrefix,
publicPath: pluginOptions.publicPath,
});
Original file line number Diff line number Diff line change
@@ -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);