diff --git a/docs/docs/building/rollup-plugin-import-meta-assets.md b/docs/docs/building/rollup-plugin-import-meta-assets.md index 3272a7be37..80a12d81f2 100644 --- a/docs/docs/building/rollup-plugin-import-meta-assets.md +++ b/docs/docs/building/rollup-plugin-import-meta-assets.md @@ -121,6 +121,52 @@ export default { }; ``` +### `preserveDynamicStructure` + +Type: `Boolean`
+Default: `false` + +When enabled, dynamic asset URLs (using template literals) are emitted to the Rollup pipeline and the URL pattern is rewritten to resolve relative to the first emitted asset. + +**Requirements:** The output must preserve both filenames (no hashing) and the directory structure from the dynamic expression onwards. +If filenames are hashed or the directory structure changes, the runtime URL resolution will fail. + +This is useful when your application or CDN already has versioned URLs, so you don't need filename hashing. +It also avoids generating a large switch statement in the output when you have many dynamic assets (e.g. an icon library). + +```js +import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets'; + +const projectRoot = process.cwd(); + +export default { + input: 'src/index.js', + output: { + dir: 'output', + format: 'es', + // preserve original file paths, relative to the project root + assetFileNames: asset => + path.relative(projectRoot, asset.originalFileNames[0]).split(path.sep).join('/'), + }, + plugins: [ + importMetaAssets({ + preserveDynamicStructure: true, + }), + ], +}; +``` + +Given this source code: + +```js +const icon = new URL(`./assets/icons/${category}/${name}.svg`, import.meta.url); +``` + +The plugin will: + +1. Emit all matching assets (e.g. `./assets/icons/outline/arrow.svg`, `./assets/icons/solid/check.svg`, etc..) +2. Rewrite the URL to resolve relative to the first emitted asset + ## Examples Source directory: diff --git a/packages/rollup-plugin-html/src/RollupPluginHTMLOptions.ts b/packages/rollup-plugin-html/src/RollupPluginHTMLOptions.ts index 884f669fb5..48e6fe977f 100644 --- a/packages/rollup-plugin-html/src/RollupPluginHTMLOptions.ts +++ b/packages/rollup-plugin-html/src/RollupPluginHTMLOptions.ts @@ -31,7 +31,7 @@ export interface RollupPluginHTMLOptions { extractAssets?: boolean | 'legacy-html' | 'legacy-html-and-css'; /** Whether to bundle extracted CSS assets. Bundling is done via Lightning CSS. Defaults to true. */ bundleCss?: boolean; - /** Whether to minify extracted CSS assets. Minificaiton is done via Lightning CSS. Defaults to false. */ + /** Whether to minify extracted CSS assets. Minification is done via Lightning CSS. Defaults to false. */ minifyCss?: boolean; /** Whether to ignore assets referenced in HTML and CSS with glob patterns. */ externalAssets?: string | string[]; diff --git a/packages/rollup-plugin-html/src/output/css.ts b/packages/rollup-plugin-html/src/output/css.ts new file mode 100644 index 0000000000..80a65f74ec --- /dev/null +++ b/packages/rollup-plugin-html/src/output/css.ts @@ -0,0 +1,95 @@ +import path from 'path'; +import { OutputBundle, PluginContext } from 'rollup'; +import { toBrowserPath } from './utils.js'; + +/** + * Regular expression to match asset URL placeholders in CSS content. + * Captures the reference ID like "abc123" from placeholders like "__ROLLUP_ASSET_URL_abc123__". + * Note: Rollup reference IDs can contain alphanumeric characters, underscores, and $ (base-64-like encoding). + */ +const ASSET_URL_PLACEHOLDER_REGEX = /__ROLLUP_ASSET_URL_([a-zA-Z0-9_$]+)__/g; + +/** + * Creates a placeholder string for the given reference ID. + * @param refId - The Rollup file reference ID + * @returns Placeholder string like "__ROLLUP_ASSET_URL_abc123__" + */ +export function createAssetPlaceholder(refId: string): string { + return `__ROLLUP_ASSET_URL_${refId}__`; +} + +/** + * Replaces all asset URL placeholders in CSS content with resolved paths. + * Anything after the placeholder (#id, ?queryString) is preserved naturally. + * + * @param cssContent - The CSS content with placeholders + * @param resolver - Function that resolves a reference ID to the final path + * @returns CSS content with placeholders replaced + */ +export function replacePlaceholders( + cssContent: string, + resolver: (refId: string) => string | undefined, +): string { + return cssContent.replace(ASSET_URL_PLACEHOLDER_REGEX, (match, refId) => { + const resolvedPath = resolver(refId); + return resolvedPath ?? match; + }); +} + +/** + * Calculates the path from a CSS file to a referenced asset. + * If publicPath is provided, returns an absolute path. Otherwise returns a relative path. + * + * @param cssFilePath - The CSS file's path in the bundle (e.g. 'styles/main.css') + * @param assetFilePath - The asset's path in the bundle (e.g. 'assets/image.png') + * @param publicPath - Optional public path prefix (e.g. '/static/') + * @returns Absolute path if publicPath provided, otherwise relative path from CSS to asset + */ +export function calculateRelativePath( + cssFilePath: string, + assetFilePath: string, + publicPath?: string, +): string { + // If publicPath is provided, return an absolute path + if (publicPath) { + return toBrowserPath(`${publicPath}${assetFilePath}`); + } + + // Otherwise, calculate relative path + const cssDir = path.dirname(cssFilePath); + const relativePath = path.relative(cssDir, assetFilePath); + + // Convert to browser-style forward slashes + return toBrowserPath(relativePath); +} + +/** + * Processes all CSS files in the bundle, replacing placeholders with resolved paths. + * + * @param {PluginContext} pluginContext - the Rollup plugin context + * @param {OutputBundle} bundle - the Rollup output bundle + * @param {string} [publicPath] - Optional public path prefix for absolute URLs (e.g. '/static/') + */ +export function processCssAssets( + pluginContext: PluginContext, + bundle: OutputBundle, + publicPath?: string, +): void { + for (const [fileName, asset] of Object.entries(bundle)) { + if (asset.type !== 'asset' || !fileName.endsWith('.css')) continue; + + const content = + typeof asset.source === 'string' ? asset.source : Buffer.from(asset.source).toString('utf-8'); + + const resolvedContent = replacePlaceholders(content, (refId: string) => { + try { + const assetFileName = pluginContext.getFileName(refId); + return calculateRelativePath(fileName, assetFileName, publicPath); + } catch { + pluginContext.error(`Could not resolve CSS asset reference '${refId}' in ${fileName}`); + } + }); + + asset.source = resolvedContent; + } +} diff --git a/packages/rollup-plugin-html/src/output/emitAssets.ts b/packages/rollup-plugin-html/src/output/emitAssets.ts index 377db1f25a..bc6c499fa7 100644 --- a/packages/rollup-plugin-html/src/output/emitAssets.ts +++ b/packages/rollup-plugin-html/src/output/emitAssets.ts @@ -4,9 +4,9 @@ import { bundleAsync, transform } from 'lightningcss'; import fs from 'fs'; import { InputAsset, InputData } from '../input/InputData'; -import { toBrowserPath } from './utils.js'; import { createAssetPicomatchMatcher } from '../assets/utils.js'; import { RollupPluginHTMLOptions, TransformAssetFunction } from '../RollupPluginHTMLOptions'; +import { createAssetPlaceholder } from './css.js'; export interface EmittedAssets { static: Map; @@ -88,7 +88,7 @@ export async function emitAssets( let ref: string; let basename = path.basename(asset.filePath); const isExternal = createAssetPicomatchMatcher(options.externalAssets); - const emittedExternalAssets = new Map(); + const emittedAssets = new Map(); if (asset.hashed) { if (basename.endsWith('.css') && extractAssets) { const { code } = await (bundleCss ? bundleAsync : transform)({ @@ -106,49 +106,34 @@ export async function emitAssets( const assetLocation = path.resolve(path.dirname(asset.filePath), filePath); const assetContent = fs.readFileSync(assetLocation); - // Avoid duplicates - if (!emittedExternalAssets.has(assetLocation)) { + let emittedAsset = emittedAssets.get(assetLocation); + + if (!emittedAsset) { + // Avoid duplicates const basename = path.basename(filePath); const fileRef = this.emitFile({ type: 'asset', name: extractAssetsLegacyCss ? `assets/${basename}` : basename, + originalFileName: assetLocation, source: assetContent, }); const emittedAssetFilepath = this.getFileName(fileRef); - const emittedAssetBasename = path.basename(emittedAssetFilepath); - emittedExternalAssets.set(assetLocation, emittedAssetFilepath); - // Update the URL in the original CSS file to point to the emitted asset file - if (extractAssetsLegacyCss) { - url.url = `assets/${emittedAssetBasename}`; - } else { - if (options.publicPath) { - url.url = toBrowserPath( - path.join(options.publicPath, emittedAssetFilepath), - ); - } else { - url.url = emittedAssetBasename; - } - } - if (idRef) { - url.url = `${url.url}#${idRef}`; - } + emittedAsset = { + filePath: emittedAssetFilepath, + refId: fileRef, + }; + emittedAssets.set(assetLocation, emittedAsset); + } + + if (extractAssetsLegacyCss) { + const emittedAssetBasename = path.basename(emittedAsset.filePath); + url.url = `assets/${emittedAssetBasename}`; } else { - const emittedAssetFilepath = emittedExternalAssets.get(assetLocation); - const emittedAssetBasename = path.basename(emittedAssetFilepath); - if (extractAssetsLegacyCss) { - url.url = `assets/${emittedAssetBasename}`; - } else { - if (options.publicPath) { - url.url = toBrowserPath( - path.join(options.publicPath, emittedAssetFilepath), - ); - } else { - url.url = emittedAssetBasename; - } - } - if (idRef) { - url.url = `${url.url}#${idRef}`; - } + url.url = createAssetPlaceholder(emittedAsset.refId); + } + + if (idRef) { + url.url = `${url.url}#${idRef}`; } } return url; @@ -161,7 +146,12 @@ export async function emitAssets( } } - ref = this.emitFile({ type: 'asset', name: basename, source }); + ref = this.emitFile({ + type: 'asset', + name: basename, + originalFileName: asset.filePath, + source, + }); } else { // ensure the output filename is unique let i = 1; diff --git a/packages/rollup-plugin-html/src/output/getEntrypointBundles.ts b/packages/rollup-plugin-html/src/output/getEntrypointBundles.ts index 12c1bbb5ca..871f009de3 100644 --- a/packages/rollup-plugin-html/src/output/getEntrypointBundles.ts +++ b/packages/rollup-plugin-html/src/output/getEntrypointBundles.ts @@ -74,9 +74,9 @@ export function getEntrypointBundles(params: GetEntrypointBundlesParams) { outputDir, fileOutputDir: options.dir ?? '', htmlFileName, - fileName: chunkOrAsset.fileName, + fileName: chunk.fileName, }); - entrypoints.push({ importPath, chunk: chunkOrAsset, attributes: found.attributes }); + entrypoints.push({ importPath, chunk, attributes: found.attributes }); } } } diff --git a/packages/rollup-plugin-html/src/rollupPluginHTML.ts b/packages/rollup-plugin-html/src/rollupPluginHTML.ts index 388c329675..135468b614 100644 --- a/packages/rollup-plugin-html/src/rollupPluginHTML.ts +++ b/packages/rollup-plugin-html/src/rollupPluginHTML.ts @@ -14,6 +14,7 @@ import { } from './RollupPluginHTMLOptions.js'; import { createError, NOOP_IMPORT } from './utils.js'; import { emitAssets } from './output/emitAssets.js'; +import { processCssAssets } from './output/css.js'; export interface RollupPluginHtml extends Plugin { api: { @@ -140,6 +141,9 @@ export function rollupPluginHTML(pluginOptions: RollupPluginHTMLOptions = {}): R generatedBundles.push({ name: 'default', options, bundle }); const emittedAssets = await emitAssets.call(this, inputs, pluginOptions); + + processCssAssets(this, bundle, pluginOptions.publicPath); + const outputs = await createHTMLOutput({ outputDir: path.resolve(options.dir), inputs, @@ -199,6 +203,9 @@ export function rollupPluginHTML(pluginOptions: RollupPluginHTMLOptions = {}): R } const emittedAssets = await emitAssets.call(this, inputs, pluginOptions); + + processCssAssets(this, bundle, pluginOptions.publicPath); + const outputs = await createHTMLOutput({ outputDir: path.resolve(options.dir), inputs, diff --git a/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts b/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts index 564cb96c28..feae3bf8b0 100644 --- a/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts +++ b/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts @@ -2,7 +2,15 @@ import { rollup, OutputChunk, OutputOptions, Plugin } from 'rollup'; import { expect } from 'chai'; import path from 'path'; import { rollupPluginHTML } from '../src/index.js'; -import { html, css, js, svg, generateTestBundle, createApp, cleanApp } from './utils.js'; +import { + html, + css, + js, + svg, + generateTestBundle, + createApp, + cleanApp, +} from '../../../test-utils/rollup-test-utils.js'; const outputConfig: OutputOptions = { format: 'es', @@ -2115,20 +2123,20 @@ describe('rollup-plugin-html', () => { expect(assets).to.have.keys([ 'assets/font-normal-Cht9ZB76.woff2', 'assets/font-bold-eQjSonqH.woff2', - 'assets/styles-Dhs3ufep.css', + 'assets/styles-CJ7-ESJg.css', 'index.html', ]); expect(assets['index.html']).to.equal(html` - + `); - expect(assets['assets/styles-Dhs3ufep.css']).to.equal(css` + expect(assets['assets/styles-CJ7-ESJg.css']).to.equal(css` @font-face { font-family: Font; src: url('font-normal-Cht9ZB76.woff2') format('woff2'); @@ -2280,20 +2288,20 @@ describe('rollup-plugin-html', () => { expect(assets).to.have.keys([ 'assets/font-normal-Cht9ZB76.woff2', 'assets/font-bold-eQjSonqH.woff2', - 'assets/styles-Dhs3ufep.css', + 'assets/styles-CJ7-ESJg.css', 'index.html', ]); expect(assets['index.html']).to.equal(html` - + `); - expect(assets['assets/styles-Dhs3ufep.css']).to.equal(css` + expect(assets['assets/styles-CJ7-ESJg.css']).to.equal(css` @font-face { font-family: Font; src: url('font-normal-Cht9ZB76.woff2') format('woff2'); @@ -2445,22 +2453,22 @@ describe('rollup-plugin-html', () => { expect(assets).to.have.keys([ 'assets/font-normal-Cht9ZB76.woff2', - 'assets/styles-a-jFIfrzm8.css', - 'assets/styles-b-B-8m1N7T.css', + 'assets/styles-a-Dhot3uqa.css', + 'assets/styles-b-BRueNdBl.css', 'index.html', ]); expect(assets['index.html']).to.equal(html` - - + + `); - expect(assets['assets/styles-a-jFIfrzm8.css']).to.equal(css` + expect(assets['assets/styles-a-Dhot3uqa.css']).to.equal(css` @font-face { font-family: Font; src: url('font-normal-Cht9ZB76.woff2') format('woff2'); @@ -2470,7 +2478,7 @@ describe('rollup-plugin-html', () => { } `); - expect(assets['assets/styles-b-B-8m1N7T.css']).to.equal(css` + expect(assets['assets/styles-b-BRueNdBl.css']).to.equal(css` @font-face { font-family: Font2; src: url('font-normal-Cht9ZB76.woff2') format('woff2'); @@ -2557,20 +2565,20 @@ describe('rollup-plugin-html', () => { 'assets/star-CXig10q7.png', 'assets/star-CwhgM_z4.svg', 'assets/star-CKbh5mKn.webp', - 'assets/styles-mywkihBc.css', + 'assets/styles-Ee2nhCU_.css', 'index.html', ]); expect(assets['index.html']).to.equal(html` - + `); - expect(assets['assets/styles-mywkihBc.css']).to.equal(css` + expect(assets['assets/styles-Ee2nhCU_.css']).to.equal(css` #a { background-image: url('star-D_LO5feX.avif'); } @@ -2806,7 +2814,7 @@ describe('rollup-plugin-html', () => { expect(assets).to.have.keys([ 'assets/image-a-XOCPHCrV.png', 'assets/image-b-BgQHKcRn.png', - 'assets/styles-Bv-4gk2N.css', + 'assets/styles-CxU15QYj.css', 'assets/webmanifest-BkrOR1WG.json', 'index.html', ]); @@ -2819,7 +2827,7 @@ describe('rollup-plugin-html', () => { - + @@ -2832,7 +2840,7 @@ describe('rollup-plugin-html', () => { `); - expect(assets['assets/styles-Bv-4gk2N.css']).to.equal(css` + expect(assets['assets/styles-CxU15QYj.css']).to.equal(css` #a1 { background-image: url('image-a-XOCPHCrV.png'); } @@ -3036,17 +3044,17 @@ describe('rollup-plugin-html', () => { expect(assets).to.have.keys([ 'static/font.immutable.C5MNjX-h.woff2', - 'static/global.immutable.DB0fKkjs.css', + 'static/global.immutable.tvdj3JiE.css', 'static/image.immutable.7xJLr_7N.png', - 'static/styles.immutable.D4tZXVv0.css', + 'static/styles.immutable.DlXCehN4.css', 'index.html', ]); expect(assets['index.html']).to.equal(html` - - + + { `); - expect(assets['static/global.immutable.DB0fKkjs.css']).to.equal(css` + expect(assets['static/global.immutable.tvdj3JiE.css']).to.equal(css` @font-face { font-family: Font; src: url('font.immutable.C5MNjX-h.woff2') format('woff2'); @@ -3070,7 +3078,7 @@ describe('rollup-plugin-html', () => { } `); - expect(assets['static/styles.immutable.D4tZXVv0.css']).to.equal(css` + expect(assets['static/styles.immutable.DlXCehN4.css']).to.equal(css` #a { background-image: url('image.immutable.7xJLr_7N.png'); } @@ -3149,17 +3157,17 @@ describe('rollup-plugin-html', () => { expect(assets).to.have.keys([ 'fonts/font.immutable.C5MNjX-h.woff2', - 'styles/global.immutable.B3Q0ucg4.css', + 'styles/global.immutable.tvdj3JiE.css', 'images/image.immutable.7xJLr_7N.png', - 'styles/styles.immutable.C3Z0Fs2-.css', + 'styles/styles.immutable.DlXCehN4.css', 'index.html', ]); expect(assets['index.html']).to.equal(html` - - + + { `); - expect(assets['styles/global.immutable.B3Q0ucg4.css']).to.equal(css` + expect(assets['styles/global.immutable.tvdj3JiE.css']).to.equal(css` @font-face { font-family: Font; src: url('/static/fonts/font.immutable.C5MNjX-h.woff2') format('woff2'); @@ -3183,7 +3191,7 @@ describe('rollup-plugin-html', () => { } `); - expect(assets['styles/styles.immutable.C3Z0Fs2-.css']).to.equal(css` + expect(assets['styles/styles.immutable.DlXCehN4.css']).to.equal(css` #a { background-image: url('/static/images/image.immutable.7xJLr_7N.png'); } @@ -3306,4 +3314,167 @@ describe('rollup-plugin-html', () => { } `); }); + + describe('preserved output paths', () => { + it('resolves relative paths', async () => { + const rootDir = createApp({ + 'assets/icons/arrow.svg': '', + 'fonts/font.woff2': 'font-data', + 'styles/main.css': css` + @font-face { + font-family: Font; + src: url('../fonts/font.woff2') format('woff2'); + } + + .arrow { + background: url('../assets/icons/arrow.svg'); + } + `, + 'styles/components/button.css': css` + .button { + background: url('../../assets/icons/arrow.svg'); + } + `, + }); + + const config = { + plugins: [ + rollupPluginHTML({ + rootDir, + input: { + html: html` + + + + + + + + `, + }, + }), + ], + }; + + const build = await rollup(config); + const { assets } = await generateTestBundle(build, { + ...outputConfig, + assetFileNames: (asset: { originalFileNames: string[] }) => + path.relative(rootDir, asset.originalFileNames[0]).split(path.sep).join('/'), + }); + + expect(assets['styles/main.css']).to.equal(css` + @font-face { + font-family: Font; + src: url('../fonts/font.woff2') format('woff2'); + } + + .arrow { + background: url('../assets/icons/arrow.svg'); + } + `); + + expect(assets['styles/components/button.css']).to.equal(css` + .button { + background: url('../../assets/icons/arrow.svg'); + } + `); + }); + + it('handles CSS files with SVG fragments (#icon)', async () => { + const rootDir = createApp({ + 'assets/sprite.svg': '', + 'styles.css': css` + .icon { + background: url('assets/sprite.svg#icon'); + } + `, + }); + + const config = { + plugins: [ + rollupPluginHTML({ + rootDir, + input: { + html: html` + + + + + + + `, + }, + }), + ], + }; + + const build = await rollup(config); + const { assets } = await generateTestBundle(build, { + ...outputConfig, + assetFileNames: (asset: { originalFileNames: string[] }) => + path.relative(rootDir, asset.originalFileNames[0]).split(path.sep).join('/'), + }); + + expect(assets['styles.css']).to.equal(css` + .icon { + background: url('assets/sprite.svg#icon'); + } + `); + }); + + it('handles multiple CSS files referencing the same asset', async () => { + const rootDir = createApp({ + 'shared/image.png': 'image-data', + 'styles/a.css': css` + .a { + background: url('../shared/image.png'); + } + `, + 'styles/nested/b.css': css` + .b { + background: url('../../shared/image.png'); + } + `, + }); + + const config = { + plugins: [ + rollupPluginHTML({ + rootDir, + input: { + html: html` + + + + + + + + `, + }, + }), + ], + }; + + const build = await rollup(config); + const { assets } = await generateTestBundle(build, { + ...outputConfig, + assetFileNames: (asset: { originalFileNames: string[] }) => + path.relative(rootDir, asset.originalFileNames[0]).split(path.sep).join('/'), + }); + + expect(assets['styles/a.css']).to.equal(css` + .a { + background: url('../shared/image.png'); + } + `); + + expect(assets['styles/nested/b.css']).to.equal(css` + .b { + background: url('../../shared/image.png'); + } + `); + }); + }); }); diff --git a/packages/rollup-plugin-html/test/src/input/InputData.test.ts b/packages/rollup-plugin-html/test/src/input/InputData.test.ts index f1fab22f99..9810a5dfa6 100644 --- a/packages/rollup-plugin-html/test/src/input/InputData.test.ts +++ b/packages/rollup-plugin-html/test/src/input/InputData.test.ts @@ -1,6 +1,6 @@ import { expect } from 'chai'; import path from 'path'; -import { cleanApp, createApp, html, js } from '../../utils.js'; +import { cleanApp, createApp, html, js } from '../../../../../test-utils/rollup-test-utils.js'; import { getInputData } from '../../../src/input/getInputData.js'; import { InputData } from '../../../src/input/InputData.js'; diff --git a/packages/rollup-plugin-html/test/src/input/extract/extractAssets.test.ts b/packages/rollup-plugin-html/test/src/input/extract/extractAssets.test.ts index 24a8dbd2bb..e4abcf640c 100644 --- a/packages/rollup-plugin-html/test/src/input/extract/extractAssets.test.ts +++ b/packages/rollup-plugin-html/test/src/input/extract/extractAssets.test.ts @@ -2,7 +2,14 @@ import { expect } from 'chai'; import { parse } from 'parse5'; import path from 'path'; import { extractAssets } from '../../../../src/input/extract/extractAssets.js'; -import { html, css, js, svg, createApp, cleanApp } from '../../../utils.js'; +import { + html, + css, + js, + svg, + createApp, + cleanApp, +} from '../../../../../../test-utils/rollup-test-utils.js'; describe('extractAssets', () => { afterEach(() => { diff --git a/packages/rollup-plugin-html/test/src/input/extract/extractModules.test.ts b/packages/rollup-plugin-html/test/src/input/extract/extractModules.test.ts index f560f339ee..1ce06c93ee 100644 --- a/packages/rollup-plugin-html/test/src/input/extract/extractModules.test.ts +++ b/packages/rollup-plugin-html/test/src/input/extract/extractModules.test.ts @@ -1,7 +1,7 @@ import path from 'path'; import { parse, serialize } from 'parse5'; import { expect } from 'chai'; -import { html, js } from '../../../utils.js'; +import { html, js } from '../../../../../../test-utils/rollup-test-utils.js'; import { extractModules } from '../../../../src/input/extract/extractModules.js'; import { ScriptModuleTag } from '../../../../src/RollupPluginHTMLOptions.js'; diff --git a/packages/rollup-plugin-html/test/src/output/css.test.ts b/packages/rollup-plugin-html/test/src/output/css.test.ts new file mode 100644 index 0000000000..a8e2d2f349 --- /dev/null +++ b/packages/rollup-plugin-html/test/src/output/css.test.ts @@ -0,0 +1,91 @@ +import { expect } from 'chai'; +import { + createAssetPlaceholder, + replacePlaceholders, + calculateRelativePath, +} from '../../../src/output/css.js'; + +describe('cssAssetPlaceholders', () => { + describe('createAssetPlaceholder', () => { + it('creates a placeholder with the given reference ID', () => { + expect(createAssetPlaceholder('abc123')).to.equal('__ROLLUP_ASSET_URL_abc123__'); + }); + }); + + describe('replacePlaceholders', () => { + it('replaces placeholders with resolved paths', () => { + const css = `.foo { background: url('__ROLLUP_ASSET_URL_abc123__'); }`; + const resolver = (refId: string) => (refId === 'abc123' ? '../assets/image.png' : undefined); + const result = replacePlaceholders(css, resolver); + expect(result).to.equal(`.foo { background: url('../assets/image.png'); }`); + }); + + it('preserves fragments after placeholder', () => { + const css = `.foo { background: url('__ROLLUP_ASSET_URL_abc123__#icon'); }`; + const resolver = () => '../assets/sprite.svg'; + const result = replacePlaceholders(css, resolver); + expect(result).to.equal(`.foo { background: url('../assets/sprite.svg#icon'); }`); + }); + + it('preserves query strings after placeholder', () => { + const css = `.foo { src: url('__ROLLUP_ASSET_URL_abc123__?v=1.0'); }`; + const resolver = () => '../fonts/font.woff2'; + const result = replacePlaceholders(css, resolver); + expect(result).to.equal(`.foo { src: url('../fonts/font.woff2?v=1.0'); }`); + }); + + it('keeps placeholder when resolver returns undefined', () => { + const css = `.foo { background: url('__ROLLUP_ASSET_URL_unknown__'); }`; + const resolver = () => undefined; + const result = replacePlaceholders(css, resolver); + expect(result).to.equal(css); + }); + + it('replaces multiple placeholders', () => { + const css = ` + .a { background: url('__ROLLUP_ASSET_URL_img1__'); } + .b { background: url('__ROLLUP_ASSET_URL_img2__'); } + `; + const resolver = (refId: string) => { + if (refId === 'img1') return 'assets/image1.png'; + if (refId === 'img2') return 'assets/image2.png'; + return undefined; + }; + const result = replacePlaceholders(css, resolver); + expect(result).to.include("url('assets/image1.png')"); + expect(result).to.include("url('assets/image2.png')"); + }); + }); + + describe('calculateRelativePath', () => { + it('calculates relative path for same directory', () => { + expect(calculateRelativePath('styles/main.css', 'styles/image.png')).to.equal('image.png'); + }); + + it('calculates relative path for parent directory', () => { + expect(calculateRelativePath('styles/main.css', 'image.png')).to.equal('../image.png'); + }); + + it('calculates relative path for sibling directory', () => { + expect(calculateRelativePath('styles/main.css', 'assets/image.png')).to.equal( + '../assets/image.png', + ); + }); + + it('calculates relative path for deeply nested CSS', () => { + expect( + calculateRelativePath('styles/components/button.css', 'assets/icons/arrow.svg'), + ).to.equal('../../assets/icons/arrow.svg'); + }); + + it('calculates relative path when CSS is at root', () => { + expect(calculateRelativePath('main.css', 'assets/image.png')).to.equal('assets/image.png'); + }); + + it('calculates relative path when both are deeply nested', () => { + expect(calculateRelativePath('a/b/c/style.css', 'x/y/z/image.png')).to.equal( + '../../../x/y/z/image.png', + ); + }); + }); +}); diff --git a/packages/rollup-plugin-html/test/src/output/getOutputHTML.test.ts b/packages/rollup-plugin-html/test/src/output/getOutputHTML.test.ts index 024635e434..114ed9f1e1 100644 --- a/packages/rollup-plugin-html/test/src/output/getOutputHTML.test.ts +++ b/packages/rollup-plugin-html/test/src/output/getOutputHTML.test.ts @@ -2,7 +2,7 @@ import { expect } from 'chai'; import path from 'path'; import { getOutputHTML, GetOutputHTMLParams } from '../../../src/output/getOutputHTML.js'; import { EntrypointBundle } from '../../../src/RollupPluginHTMLOptions.js'; -import { html } from '../../utils.js'; +import { html } from '../../../../../test-utils/rollup-test-utils.js'; describe('getOutputHTML()', () => { const defaultEntrypointBundles: Record = { diff --git a/packages/rollup-plugin-html/test/src/output/injectBundles.test.ts b/packages/rollup-plugin-html/test/src/output/injectBundles.test.ts index fb52cda0cf..6625159778 100644 --- a/packages/rollup-plugin-html/test/src/output/injectBundles.test.ts +++ b/packages/rollup-plugin-html/test/src/output/injectBundles.test.ts @@ -1,7 +1,7 @@ import { getTextContent } from '@web/parse5-utils'; import { expect } from 'chai'; import { parse, serialize } from 'parse5'; -import { html } from '../../utils.js'; +import { html } from '../../../../../test-utils/rollup-test-utils.js'; import { injectBundles, createLoadScript } from '../../../src/output/injectBundles.js'; diff --git a/packages/rollup-plugin-html/test/src/output/injectedUpdatedAssetPaths.test.ts b/packages/rollup-plugin-html/test/src/output/injectedUpdatedAssetPaths.test.ts index 9e720b1577..af07a155f9 100644 --- a/packages/rollup-plugin-html/test/src/output/injectedUpdatedAssetPaths.test.ts +++ b/packages/rollup-plugin-html/test/src/output/injectedUpdatedAssetPaths.test.ts @@ -1,7 +1,7 @@ import { expect } from 'chai'; import path from 'path'; import { parse, serialize } from 'parse5'; -import { html } from '../../utils.js'; +import { html } from '../../../../../test-utils/rollup-test-utils.js'; import { InputData } from '../../../src/input/InputData.js'; import { injectedUpdatedAssetPaths } from '../../../src/output/injectedUpdatedAssetPaths.js'; diff --git a/packages/rollup-plugin-html/test/utils.ts b/packages/rollup-plugin-html/test/utils.ts deleted file mode 100644 index 14c060c5da..0000000000 --- a/packages/rollup-plugin-html/test/utils.ts +++ /dev/null @@ -1,106 +0,0 @@ -import synchronizedPrettier from '@prettier/sync'; -import fs from 'fs'; -import path from 'path'; -import * as prettier from 'prettier'; -import { OutputOptions, RollupBuild } from 'rollup'; - -function collapseWhitespaceAll(str: string) { - return ( - str && - str.replace(/[ \n\r\t\f\xA0]+/g, spaces => { - return spaces === '\t' ? '\t' : spaces.replace(/(^|\xA0+)[^\xA0]+/g, '$1 '); - }) - ); -} - -function format(str: string, parser: prettier.BuiltInParserName) { - return synchronizedPrettier.format(str, { parser, semi: true, singleQuote: true }); -} - -function merge(strings: TemplateStringsArray, ...values: string[]): string { - return strings.reduce((acc, str, i) => acc + str + (values[i] || ''), ''); -} - -const extnameToFormatter: Record string> = { - '.html': (str: string) => format(collapseWhitespaceAll(str), 'html'), - '.css': (str: string) => format(str, 'css'), - '.js': (str: string) => format(str, 'typescript'), - '.json': (str: string) => format(str, 'json'), - '.svg': (str: string) => format(collapseWhitespaceAll(str), 'html'), -}; - -function getFormatterFromFilename(name: string): undefined | ((str: string) => string) { - return extnameToFormatter[path.extname(name)]; -} - -export const html = (strings: TemplateStringsArray, ...values: string[]) => - extnameToFormatter['.html'](merge(strings, ...values)); - -export const css = (strings: TemplateStringsArray, ...values: string[]) => - extnameToFormatter['.css'](merge(strings, ...values)); - -export const js = (strings: TemplateStringsArray, ...values: string[]) => - extnameToFormatter['.js'](merge(strings, ...values)); - -export const svg = (strings: TemplateStringsArray, ...values: string[]) => - extnameToFormatter['.svg'](merge(strings, ...values)); - -export async function generateTestBundle(build: RollupBuild, outputConfig: OutputOptions) { - const { output } = await build.generate(outputConfig); - const chunks: Record = {}; - const assets: Record = {}; - const assetsUnformatted: Record = {}; - - for (const file of output) { - const filename = file.fileName; - const formatter = getFormatterFromFilename(filename); - if (file.type === 'chunk') { - chunks[filename] = formatter ? formatter(file.code) : file.code; - } else if (file.type === 'asset') { - let code = file.source; - let codeUnformatted = file.source; - if (typeof code !== 'string' && filename.endsWith('.css')) { - code = Buffer.from(code).toString('utf8'); - codeUnformatted = Buffer.from(codeUnformatted).toString('utf8'); - } - if (typeof code === 'string' && formatter) { - code = formatter(code); - } - assets[filename] = code; - assetsUnformatted[filename] = codeUnformatted; - } - } - - return { output, chunks, assets, assetsUnformatted }; -} - -export function createApp(structure: Record) { - const timestamp = Date.now(); - const rootDir = path.join(__dirname, `./.tmp/app-${timestamp}`); - if (!fs.existsSync(rootDir)) { - fs.mkdirSync(rootDir, { recursive: true }); - } - Object.keys(structure).forEach(filePath => { - const fullPath = path.join(rootDir, filePath); - const dir = path.dirname(fullPath); - if (!fs.existsSync(dir)) { - fs.mkdirSync(dir, { recursive: true }); - } - if (!fs.existsSync(fullPath)) { - const content = structure[filePath]; - const contentForWrite = - typeof content === 'object' && !(content instanceof Buffer) - ? JSON.stringify(content) - : content; - fs.writeFileSync(fullPath, contentForWrite); - } - }); - return rootDir; -} - -export function cleanApp() { - const tmpDir = path.join(__dirname, './.tmp'); - if (fs.existsSync(tmpDir)) { - fs.rmSync(tmpDir, { recursive: true }); - } -} diff --git a/packages/rollup-plugin-import-meta-assets/src/rollup-plugin-import-meta-assets.js b/packages/rollup-plugin-import-meta-assets/src/rollup-plugin-import-meta-assets.js index bd24c07eac..cef9ea126c 100644 --- a/packages/rollup-plugin-import-meta-assets/src/rollup-plugin-import-meta-assets.js +++ b/packages/rollup-plugin-import-meta-assets/src/rollup-plugin-import-meta-assets.js @@ -66,13 +66,50 @@ function getImportMetaUrlType(node) { * @param {string|string[]} [options.exclude] A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should _ignore_. By default no files are ignored. * @param {boolean} [options.warnOnError] By default, the plugin quits the build process when it encounters an error. If you set this option to true, it will throw a warning instead and leave the code untouched. * @param {function} [options.transform] A function to transform assets. + * @param {boolean} [options.preserveDynamicStructure] When enabled, emits dynamic assets and rewrites the URL pattern to resolve the original dynamic path relative to the first emitted asset. Requires that the output preserves both filenames (no hashing) and directory structure from the dynamic expression onwards. * @return {import('rollup').Plugin} A Rollup Plugin */ -function importMetaAssets({ include, exclude, warnOnError, transform } = {}) { +function importMetaAssets({ + include, + exclude, + warnOnError, + transform, + preserveDynamicStructure, +} = {}) { const filter = createFilter(include, exclude); - return { + /** + * Read and optionally transform an asset file. + * Returns null if the path should be skipped. + * + * @param {object} context - Rollup plugin context (for warn/error) + * @param {string} absoluteAssetPath - Absolute path to the asset + * @param {number} errorPosition - Position in source for error reporting + * @returns {Promise} The asset contents, or null to skip + */ + async function readAndTransformAsset(context, absoluteAssetPath, errorPosition) { + try { + const assetContents = await fs.promises.readFile(absoluteAssetPath); + if (transform != null) { + return transform(assetContents, absoluteAssetPath); + } + return assetContents; + } catch (error) { + // Do not process directories, just skip + if (error.code !== 'EISDIR') { + if (warnOnError) { + context.warn(error, errorPosition); + } else { + context.error(error, errorPosition); + } + } + return null; + } + } + + return /* @type {import('rollup').Plugin} */ { name: 'rollup-plugin-import-meta-assets', + async transform(code, id) { if (!filter(id)) { return null; @@ -114,12 +151,105 @@ function importMetaAssets({ include, exclude, warnOnError, transform } = {}) { .sort() .map(r => (r.startsWith('./') || r.startsWith('../') ? r : `./${r}`)); - // create magic string if it wasn't created already - ms1 = ms1 || new MagicString(newCode); - // unpack variable dynamic url into a function with url statements per file, rollup - // will turn these into chunks automatically - ms1.prepend( - `function __variableDynamicURLRuntime${dynamicURLIndex}__(path) { + if (preserveDynamicStructure) { + // Rewrite the template literal to use relative path from first asset + // Algorithm: + // 1. Get static prefix from template + // 2. Strip static prefix from first matched file to get "variable part" + // 3. Count directory levels in variable part (excluding filename) + // 4. Prepend that many "../" to navigate from first asset to siblings + // + // Example: `./dynamic-assets/icons-${iconCategory}/${iconName}.svg` + // - Static prefix: `./dynamic-assets/icons-` + // - First matched file: `./dynamic-assets/icons-solid/alarm.svg` (defines relative path from the output chunk perspective automatically by rollup) + // - Variable part: `icons-solid/alarm.svg` + // - Directory levels: 1 (icons-solid/) + // - Output: `../icons-${iconCategory}/${iconName}.svg` (defines relative path from the first asset) + + const absoluteScriptDir = path.dirname(id); + let firstRef = null; + + for (const p of paths) { + const absoluteAssetPath = path.resolve(absoluteScriptDir, p); + const assetContents = await readAndTransformAsset( + this, + absoluteAssetPath, + node.arguments[0].start, + ); + if (assetContents === null) { + continue; + } + const ref = this.emitFile({ + type: 'asset', + name: path.basename(absoluteAssetPath), + originalFileName: absoluteAssetPath, + source: assetContents, + }); + if (firstRef === null) { + firstRef = ref; + } + } + + if (firstRef !== null && paths.length > 0) { + ms1 = ms1 || new MagicString(newCode); + + const templateLiteral = node.arguments[0]; + const quasis = templateLiteral.quasis; + const expressions = templateLiteral.expressions; + + // Get static prefix (everything before first expression) + const staticPrefix = quasis[0].value.cooked; + + // Split static prefix into directory and filename prefix at last slash + // e.g. "./dynamic-assets/icons-" -> dir: "./dynamic-assets/", filename prefix: "icons-" + const lastSlashInPrefix = staticPrefix.lastIndexOf('/'); + const staticDirPrefix = + lastSlashInPrefix >= 0 ? staticPrefix.substring(0, lastSlashInPrefix + 1) : ''; + const staticFilenamePrefix = + lastSlashInPrefix >= 0 + ? staticPrefix.substring(lastSlashInPrefix + 1) + : staticPrefix; + + // Get first matched file and strip the static directory prefix + const firstFile = paths[0]; + const variablePart = firstFile.startsWith(staticDirPrefix) + ? firstFile.slice(staticDirPrefix.length) + : firstFile; + + // Count directory levels in variable part (excluding filename) + const variableDir = variablePart.substring(0, variablePart.lastIndexOf('/') + 1); + const dirLevels = variableDir ? variableDir.split('/').filter(Boolean).length : 0; + + // Build prefix: "../" repeated dirLevels times, or "./" if no levels + // Then append any filename prefix from the original static portion + const relativePrefix = + (dirLevels > 0 ? '../'.repeat(dirLevels) : './') + staticFilenamePrefix; + + // Build the new template literal + let newTemplateParts = [relativePrefix]; + for (let i = 0; i < expressions.length; i++) { + const exprCode = newCode.substring(expressions[i].start, expressions[i].end); + newTemplateParts.push('${' + exprCode + '}'); + newTemplateParts.push(quasis[i + 1].value.raw); + } + const newTemplate = '`' + newTemplateParts.join('') + '`'; + + ms1.overwrite(templateLiteral.start, templateLiteral.end, newTemplate); + + ms1.overwrite( + node.arguments[1].start, + node.arguments[1].end, + `import.meta.ROLLUP_FILE_URL_${firstRef}`, + ); + } + } else { + // default behavior + // create magic string if it wasn't created already + ms1 = ms1 || new MagicString(newCode); + // unpack variable dynamic url into a function with url statements per file, rollup + // will turn these into chunks automatically + ms1.prepend( + `function __variableDynamicURLRuntime${dynamicURLIndex}__(path) { switch (path) { ${paths.map(p => ` case '${p}': return new URL('${p}', import.meta.url);`).join('\n')} ${` default: return new Promise(function(resolve, reject) { @@ -128,14 +258,15 @@ ${` default: return new Promise(function(resolve, reject) { ); })\n`} } }\n\n`, - ); - // call the runtime function instead of doing a dynamic url, the url specifier will - // be evaluated at runtime and the correct url will be returned by the injected function - ms1.overwrite( - node.start, - node.start + 7, - `__variableDynamicURLRuntime${dynamicURLIndex}__`, - ); + ); + // call the runtime function instead of doing a dynamic url, the url specifier will + // be evaluated at runtime and the correct url will be returned by the injected function + ms1.overwrite( + node.start, + node.start + 7, + `__variableDynamicURLRuntime${dynamicURLIndex}__`, + ); + } } catch (error) { if (error instanceof VariableURLError && warnOnError) { this.warn(error); @@ -167,37 +298,27 @@ ${` default: return new Promise(function(resolve, reject) { const absoluteAssetPath = path.resolve(absoluteScriptDir, relativeAssetPath); const assetName = path.basename(absoluteAssetPath); - try { - const assetContents = await fs.promises.readFile(absoluteAssetPath); - const transformedAssetContents = - transform != null - ? await transform(assetContents, absoluteAssetPath) - : assetContents; - if (transformedAssetContents === null) { - return; - } - const ref = this.emitFile({ - type: 'asset', - name: assetName, - originalFileName: absoluteAssetPath, - source: transformedAssetContents, - }); - ms2 = ms2 || new MagicString(newCode); - ms2.overwrite( - node.arguments[0].start, - node.arguments[1].end, - `import.meta.ROLLUP_FILE_URL_${ref}`, - ); - } catch (error) { - // Do not process directories, just skip - if (error.code !== 'EISDIR') { - if (warnOnError) { - this.warn(error, node.arguments[0].start); - } else { - this.error(error, node.arguments[0].start); - } - } + const assetContents = await readAndTransformAsset( + this, + absoluteAssetPath, + node.arguments[0].start, + ); + if (assetContents === null) { + return; } + + const ref = this.emitFile({ + type: 'asset', + name: assetName, + originalFileName: absoluteAssetPath, + source: assetContents, + }); + ms2 = ms2 || new MagicString(newCode); + ms2.overwrite( + node.arguments[0].start, + node.arguments[1].end, + `import.meta.ROLLUP_FILE_URL_${ref}`, + ); } }, }); diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/bad-url-entrypoint.js b/packages/rollup-plugin-import-meta-assets/test/fixtures/bad-url-entrypoint.js deleted file mode 100644 index 065d65d6d1..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/bad-url-entrypoint.js +++ /dev/null @@ -1,3 +0,0 @@ -const badImage1 = new URL('/absolute-path.svg', import.meta.url).href; -const badImage2 = new URL('../../missing-relative-path.svg', import.meta.url).href; -console.log(badImage1, badImage2); diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/directories-and-simple-entrypoint.js b/packages/rollup-plugin-import-meta-assets/test/fixtures/directories-and-simple-entrypoint.js deleted file mode 100644 index e7a18e1ea6..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/directories-and-simple-entrypoint.js +++ /dev/null @@ -1,20 +0,0 @@ -const justUrlObject = new URL('./one.svg', import.meta.url); -const href = new URL('./two.svg', import.meta.url).href; -const pathname = new URL('./three.svg', import.meta.url).pathname; -const searchParams = new URL('./four.svg', import.meta.url).searchParams; - -const directories = [ - new URL('./', import.meta.url), - new URL('./one', import.meta.url), - new URL('./one/', import.meta.url), - new URL('./one/two', import.meta.url), - new URL('./one/two/', import.meta.url), -]; - -console.log({ - justUrlObject, - href, - pathname, - searchParams, - directories, -}); diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/dynamic-assets/one.svg b/packages/rollup-plugin-import-meta-assets/test/fixtures/dynamic-assets/one.svg deleted file mode 100644 index dfe13a152f..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/dynamic-assets/one.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/dynamic-assets/three.svg b/packages/rollup-plugin-import-meta-assets/test/fixtures/dynamic-assets/three.svg deleted file mode 100644 index 9ebc1e4895..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/dynamic-assets/three.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/dynamic-assets/two.svg b/packages/rollup-plugin-import-meta-assets/test/fixtures/dynamic-assets/two.svg deleted file mode 100644 index 071582b8ff..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/dynamic-assets/two.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/dynamic-vars.js b/packages/rollup-plugin-import-meta-assets/test/fixtures/dynamic-vars.js deleted file mode 100644 index 4ccfdced0e..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/dynamic-vars.js +++ /dev/null @@ -1,8 +0,0 @@ -const names = ['one', 'two']; -// value of one could also be "two" or "three", bundler does not analyze the value itself -// Therefore, we expect both one.svg, two.svg and three.svg to be bundled, and this to turn into a switch statement -// with 3 cases (for all 3 assets in the dynamic-assets folder) -const dynamicImgs = names.map(n => new URL(`./dynamic-assets/${n}.svg`,import.meta.url)); -const backticksImg = new URL(`./dynamic-assets/three.svg`, import.meta.url); - -console.log(dynamicImgs, backticksImg); diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/five b/packages/rollup-plugin-import-meta-assets/test/fixtures/five deleted file mode 100644 index 6434d8dc54..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/five +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/four.svg b/packages/rollup-plugin-import-meta-assets/test/fixtures/four.svg deleted file mode 100644 index 86eb06cfd2..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/four.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/image.jpg b/packages/rollup-plugin-import-meta-assets/test/fixtures/image.jpg deleted file mode 100644 index b0f2052e04..0000000000 Binary files a/packages/rollup-plugin-import-meta-assets/test/fixtures/image.jpg and /dev/null differ diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/multi-level-entrypoint.js b/packages/rollup-plugin-import-meta-assets/test/fixtures/multi-level-entrypoint.js deleted file mode 100644 index bf15f8c132..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/multi-level-entrypoint.js +++ /dev/null @@ -1,11 +0,0 @@ -import { imageOne, nameOne } from './one/one.js'; -import { imageTwo, nameTwo } from './one/two/two.js'; -import { imageThree, nameThree } from './one/two/three/three.js'; -import { imageFour, nameFour } from './one/two/three/four/four.js'; - -console.log({ - [nameOne]: imageOne, - [nameTwo]: imageTwo, - [nameThree]: imageThree, - [nameFour]: imageFour, -}); diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/one.svg b/packages/rollup-plugin-import-meta-assets/test/fixtures/one.svg deleted file mode 100644 index dfe13a152f..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/one.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/one-deep.svg b/packages/rollup-plugin-import-meta-assets/test/fixtures/one/one-deep.svg deleted file mode 100644 index dfe13a152f..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/one-deep.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/one.js b/packages/rollup-plugin-import-meta-assets/test/fixtures/one/one.js deleted file mode 100644 index 4688ba51fa..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/one.js +++ /dev/null @@ -1,2 +0,0 @@ -export const nameOne = 'one-name'; -export const imageOne = new URL('../one.svg', import.meta.url).href; diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/different-asset-levels-entrypoint.js b/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/different-asset-levels-entrypoint.js deleted file mode 100644 index 81dacfe5dc..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/different-asset-levels-entrypoint.js +++ /dev/null @@ -1,18 +0,0 @@ -const nameOne = 'one-name'; -const imageOne = new URL('../one-deep.svg', import.meta.url).href; - -const nameTwo = 'two-name'; -const imageTwo = new URL('./two-deep.svg', import.meta.url).href; - -const nameThree = 'three-name'; -const imageThree = new URL('./three/three-deep.svg', import.meta.url).href; - -const nameFour = 'four-name'; -const imageFour = new URL('./three/four/four-deep.svg', import.meta.url).href; - -console.log({ - [nameOne]: imageOne, - [nameTwo]: imageTwo, - [nameThree]: imageThree, - [nameFour]: imageFour, -}); diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/four/four-deep.svg b/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/four/four-deep.svg deleted file mode 100644 index 86eb06cfd2..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/four/four-deep.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/four/four.js b/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/four/four.js deleted file mode 100644 index 56c5feb192..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/four/four.js +++ /dev/null @@ -1,2 +0,0 @@ -export const nameFour = 'four-name'; -export const imageFour = new URL('../../../../four.svg', import.meta.url).href; diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/four/multi-level-entrypoint-deep.js b/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/four/multi-level-entrypoint-deep.js deleted file mode 100644 index a5cdec821c..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/four/multi-level-entrypoint-deep.js +++ /dev/null @@ -1,11 +0,0 @@ -import { imageOne, nameOne } from '../../../one.js'; -import { imageTwo, nameTwo } from '../../two.js'; -import { imageThree, nameThree } from '../three.js'; -import { imageFour, nameFour } from './four.js'; - -console.log({ - [nameOne]: imageOne, - [nameTwo]: imageTwo, - [nameThree]: imageThree, - [nameFour]: imageFour, -}); diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/three-deep.svg b/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/three-deep.svg deleted file mode 100644 index 9ebc1e4895..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/three-deep.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/three.js b/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/three.js deleted file mode 100644 index fa3ec8b3c4..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/three/three.js +++ /dev/null @@ -1,2 +0,0 @@ -export const nameThree = 'three-name'; -export const imageThree = new URL('../../../three.svg', import.meta.url).href; diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/two-deep.svg b/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/two-deep.svg deleted file mode 100644 index 071582b8ff..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/two-deep.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/two.js b/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/two.js deleted file mode 100644 index 11f10a4b41..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/one/two/two.js +++ /dev/null @@ -1,2 +0,0 @@ -export const nameTwo = 'two-name'; -export const imageTwo = new URL('../../two.svg', import.meta.url).href; diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/simple-entrypoint.js b/packages/rollup-plugin-import-meta-assets/test/fixtures/simple-entrypoint.js deleted file mode 100644 index 55dba4b26b..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/simple-entrypoint.js +++ /dev/null @@ -1,13 +0,0 @@ -const justUrlObject = new URL('./one.svg', import.meta.url); -const href = new URL('./two.svg', import.meta.url).href; -const pathname = new URL('./three.svg', import.meta.url).pathname; -const searchParams = new URL('./four.svg', import.meta.url).searchParams; -const noExtension = new URL('./five', import.meta.url); - -console.log({ - justUrlObject, - href, - pathname, - searchParams, - noExtension, -}); diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/three.svg b/packages/rollup-plugin-import-meta-assets/test/fixtures/three.svg deleted file mode 100644 index 9ebc1e4895..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/three.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/transform-entrypoint.js b/packages/rollup-plugin-import-meta-assets/test/fixtures/transform-entrypoint.js deleted file mode 100644 index 313e3f8f9d..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/transform-entrypoint.js +++ /dev/null @@ -1,13 +0,0 @@ -const justUrlObject = new URL('./one.svg', import.meta.url); -const href = new URL('./two.svg', import.meta.url).href; -const pathname = new URL('./three.svg', import.meta.url).pathname; -const searchParams = new URL('./four.svg', import.meta.url).searchParams; -const someJpg = new URL('./image.jpg', import.meta.url); - -console.log({ - justUrlObject, - href, - pathname, - searchParams, - someJpg, -}); diff --git a/packages/rollup-plugin-import-meta-assets/test/fixtures/two.svg b/packages/rollup-plugin-import-meta-assets/test/fixtures/two.svg deleted file mode 100644 index 071582b8ff..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/fixtures/two.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/integration.test.js b/packages/rollup-plugin-import-meta-assets/test/integration.test.js index 88eb78b67e..f41023a1e2 100644 --- a/packages/rollup-plugin-import-meta-assets/test/integration.test.js +++ b/packages/rollup-plugin-import-meta-assets/test/integration.test.js @@ -1,34 +1,22 @@ -const fs = require('fs'); const path = require('path'); -const rollup = require('rollup'); +const { rollup } = require('rollup'); const { expect } = require('chai'); const hanbi = require('hanbi'); const { importMetaAssets } = require('../src/rollup-plugin-import-meta-assets.js'); +const { + js, + svg, + generateTestBundle, + createApp, + cleanApp, +} = require('../../../test-utils/rollup-test-utils.js'); const outputConfig = { format: 'es', dir: 'dist', }; -function expectChunk(output, shapshotUrl, chunkName, referencedFiles) { - const bundleJsSource = fs.readFileSync(path.join(__dirname, shapshotUrl)); - const bundleJs = output.find(({ fileName }) => fileName === chunkName); - expect(bundleJs.type).to.equal('chunk'); - expect(bundleJs.code).to.deep.equal(bundleJsSource.toString()); - expect(bundleJs.referencedFiles).to.deep.equal(referencedFiles); -} - -function expectAsset(output, snapshotUrl, assetName, distName) { - const snapshotSource = fs.readFileSync(path.join(__dirname, snapshotUrl)); - const asset = output.find(({ name }) => name === assetName); - expect(typeof asset).to.equal('object'); - expect(asset.type).to.equal('asset'); - expect(asset.source.toString()).to.equal(snapshotSource.toString()); - expect(asset.fileName).to.equal(distName); - return distName; -} - describe('rollup-plugin-import-meta-assets', () => { let consoleStub; @@ -38,30 +26,119 @@ describe('rollup-plugin-import-meta-assets', () => { afterEach(() => { hanbi.restore(); + cleanApp(); }); it("simple bundle with different new URL('', import.meta.url)", async () => { + const rootDir = createApp({ + 'app.js': js` + const justUrlObject = new URL('./one.svg', import.meta.url); + const href = new URL('./two.svg', import.meta.url).href; + const pathname = new URL('./three.svg', import.meta.url).pathname; + const searchParams = new URL('./four.svg', import.meta.url).searchParams; + const noExtension = new URL('./five', import.meta.url); + + console.log({ + justUrlObject, + href, + pathname, + searchParams, + noExtension, + }); + `, + 'one.svg': svg``, + 'two.svg': svg``, + 'three.svg': svg``, + 'four.svg': svg``, + five: 'five', + }); + const config = { - input: { 'simple-bundle': require.resolve('./fixtures/simple-entrypoint.js') }, + input: { app: path.join(rootDir, 'app.js') }, plugins: [importMetaAssets()], }; - const bundle = await rollup.rollup(config); - const { output } = await bundle.generate(outputConfig); + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, outputConfig); + + expect(Object.keys(chunks)).to.have.lengthOf(1); + expect(Object.keys(assets)).to.have.lengthOf(5); + + expect(chunks['app.js']).to.equal(js` + const justUrlObject = new URL( + new URL('assets/one-BCCvKrTe.svg', import.meta.url).href + ); + const href = new URL(new URL('assets/two-C4stzVZW.svg', import.meta.url).href) + .href; + const pathname = new URL( + new URL('assets/three-DPeYetg3.svg', import.meta.url).href + ).pathname; + const searchParams = new URL( + new URL('assets/four-2QgOKKkO.svg', import.meta.url).href + ).searchParams; + const noExtension = new URL( + new URL('assets/five-DeBsXz7d', import.meta.url).href + ); + + console.log({ + justUrlObject, + href, + pathname, + searchParams, + noExtension, + }); + `); - expect(output.length).to.equal(6); - expectChunk(output, 'snapshots/simple-bundle.js', 'simple-bundle.js', [ - expectAsset(output, 'snapshots/one.svg', 'one.svg', 'assets/one-Bkie7h0E.svg'), - expectAsset(output, 'snapshots/two.svg', 'two.svg', 'assets/two-D7JyS-th.svg'), - expectAsset(output, 'snapshots/three.svg', 'three.svg', 'assets/three-IN2CmsMK.svg'), - expectAsset(output, 'snapshots/four.svg', 'four.svg', 'assets/four-CUlW6cvD.svg'), - expectAsset(output, 'snapshots/five', 'five', 'assets/five-Bnvj_R70'), + const appChunk = output.find(({ fileName }) => fileName === 'app.js'); + expect(appChunk.referencedFiles).to.deep.equal([ + 'assets/one-BCCvKrTe.svg', + 'assets/two-C4stzVZW.svg', + 'assets/three-DPeYetg3.svg', + 'assets/four-2QgOKKkO.svg', + 'assets/five-DeBsXz7d', ]); + + expect(assets['assets/one-BCCvKrTe.svg']).to.equal( + svg``, + ); + expect(assets['assets/two-C4stzVZW.svg']).to.equal( + svg``, + ); + expect(assets['assets/three-DPeYetg3.svg']).to.equal( + svg``, + ); + expect(assets['assets/four-2QgOKKkO.svg']).to.equal( + svg``, + ); + expect(assets['assets/five-DeBsXz7d']).to.equal('five'); }); it('simple bundle with transform assets', async () => { + const rootDir = createApp({ + 'app.js': js` + const justUrlObject = new URL('./one.svg', import.meta.url); + const href = new URL('./two.svg', import.meta.url).href; + const pathname = new URL('./three.svg', import.meta.url).pathname; + const searchParams = new URL('./four.svg', import.meta.url).searchParams; + const someJpg = new URL('./image.jpg', import.meta.url); + + console.log({ + justUrlObject, + href, + pathname, + searchParams, + someJpg, + }); + `, + 'one.svg': svg``, + 'two.svg': svg``, + 'three.svg': svg``, + 'four.svg': svg``, + 'image.jpg': 'image.jpg', + }); + const config = { - input: { 'transform-bundle': require.resolve('./fixtures/transform-entrypoint.js') }, + input: { app: path.join(rootDir, 'app.js') }, plugins: [ importMetaAssets({ transform: async (assetBuffer, assetPath) => { @@ -75,22 +152,87 @@ describe('rollup-plugin-import-meta-assets', () => { ], }; - const bundle = await rollup.rollup(config); - const { output } = await bundle.generate(outputConfig); + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, outputConfig); + + expect(Object.keys(chunks)).to.have.lengthOf(1); + expect(Object.keys(assets)).to.have.lengthOf(5); + + expect(chunks['app.js']).to.equal(js` + const justUrlObject = new URL( + new URL('assets/one-QPKGlwhS.svg', import.meta.url).href + ); + const href = new URL(new URL('assets/two-T4ecKj7d.svg', import.meta.url).href) + .href; + const pathname = new URL( + new URL('assets/three-LuNZrcLX.svg', import.meta.url).href + ).pathname; + const searchParams = new URL( + new URL('assets/four-Cf59sBI1.svg', import.meta.url).href + ).searchParams; + const someJpg = new URL( + new URL('assets/image-B360jR14.jpg', import.meta.url).href + ); - expect(output.length).to.equal(6); - expectChunk(output, 'snapshots/transform-bundle.js', 'transform-bundle.js', [ - expectAsset(output, 'snapshots/one.min.svg', 'one.svg', 'assets/one--RhQWA3U.svg'), - expectAsset(output, 'snapshots/two.min.svg', 'two.svg', 'assets/two-CZdxIUwi.svg'), - expectAsset(output, 'snapshots/three.min.svg', 'three.svg', 'assets/three-tFhyRH_R.svg'), - expectAsset(output, 'snapshots/four.min.svg', 'four.svg', 'assets/four-Cs1OId-q.svg'), - expectAsset(output, 'snapshots/image.jpg', 'image.jpg', 'assets/image-C92N8yPj.jpg'), + console.log({ + justUrlObject, + href, + pathname, + searchParams, + someJpg, + }); + `); + + const appChunk = output.find(({ fileName }) => fileName === 'app.js'); + expect(appChunk.referencedFiles).to.deep.equal([ + 'assets/one-QPKGlwhS.svg', + 'assets/two-T4ecKj7d.svg', + 'assets/three-LuNZrcLX.svg', + 'assets/four-Cf59sBI1.svg', + 'assets/image-B360jR14.jpg', ]); + + expect(assets['assets/one-QPKGlwhS.svg']).to.equal( + svg`${svg``}`, + ); + expect(assets['assets/two-T4ecKj7d.svg']).to.equal( + svg`${svg``}`, + ); + expect(assets['assets/three-LuNZrcLX.svg']).to.equal( + svg`${svg``}`, + ); + expect(assets['assets/four-Cf59sBI1.svg']).to.equal( + svg`${svg``}`, + ); + expect(assets['assets/image-B360jR14.jpg']).to.equal('image.jpg'); }); it('simple bundle with ignored assets', async () => { + const rootDir = createApp({ + 'app.js': js` + const justUrlObject = new URL('./one.svg', import.meta.url); + const href = new URL('./two.svg', import.meta.url).href; + const pathname = new URL('./three.svg', import.meta.url).pathname; + const searchParams = new URL('./four.svg', import.meta.url).searchParams; + const someJpg = new URL('./image.jpg', import.meta.url); + + console.log({ + justUrlObject, + href, + pathname, + searchParams, + someJpg, + }); + `, + 'one.svg': svg``, + 'two.svg': svg``, + 'three.svg': svg``, + 'four.svg': svg``, + 'image.jpg': 'image.jpg', + }); + const config = { - input: { 'transform-bundle-ignored': require.resolve('./fixtures/transform-entrypoint.js') }, + input: { app: path.join(rootDir, 'app.js') }, plugins: [ importMetaAssets({ transform: async (assetBuffer, assetPath) => { @@ -104,97 +246,479 @@ describe('rollup-plugin-import-meta-assets', () => { ], }; - const bundle = await rollup.rollup(config); - const { output } = await bundle.generate(outputConfig); + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, outputConfig); + + expect(Object.keys(chunks)).to.have.lengthOf(1); + expect(Object.keys(assets)).to.have.lengthOf(4); - expect(output.length).to.equal(5); - expectChunk(output, 'snapshots/transform-bundle-ignored.js', 'transform-bundle-ignored.js', [ - expectAsset(output, 'snapshots/one.min.svg', 'one.svg', 'assets/one--RhQWA3U.svg'), - expectAsset(output, 'snapshots/two.min.svg', 'two.svg', 'assets/two-CZdxIUwi.svg'), - expectAsset(output, 'snapshots/three.min.svg', 'three.svg', 'assets/three-tFhyRH_R.svg'), - expectAsset(output, 'snapshots/four.min.svg', 'four.svg', 'assets/four-Cs1OId-q.svg'), + // image.jpg is NOT transformed, so it keeps original URL + expect(chunks['app.js']).to.equal(js` + const justUrlObject = new URL( + new URL('assets/one-QPKGlwhS.svg', import.meta.url).href + ); + const href = new URL(new URL('assets/two-T4ecKj7d.svg', import.meta.url).href) + .href; + const pathname = new URL( + new URL('assets/three-LuNZrcLX.svg', import.meta.url).href + ).pathname; + const searchParams = new URL( + new URL('assets/four-Cf59sBI1.svg', import.meta.url).href + ).searchParams; + const someJpg = new URL('./image.jpg', import.meta.url); + + console.log({ + justUrlObject, + href, + pathname, + searchParams, + someJpg, + }); + `); + + const appChunk = output.find(({ fileName }) => fileName === 'app.js'); + expect(appChunk.referencedFiles).to.deep.equal([ + 'assets/one-QPKGlwhS.svg', + 'assets/two-T4ecKj7d.svg', + 'assets/three-LuNZrcLX.svg', + 'assets/four-Cf59sBI1.svg', ]); + + expect(assets['assets/one-QPKGlwhS.svg']).to.equal( + svg`${svg``}`, + ); + expect(assets['assets/two-T4ecKj7d.svg']).to.equal( + svg`${svg``}`, + ); + expect(assets['assets/three-LuNZrcLX.svg']).to.equal( + svg`${svg``}`, + ); + expect(assets['assets/four-Cf59sBI1.svg']).to.equal( + svg`${svg``}`, + ); }); it('multiple level bundle (downward modules)', async () => { + const rootDir = createApp({ + 'app.js': js` + import { imageOne, nameOne } from './one/one.js'; + import { imageTwo, nameTwo } from './one/two/two.js'; + import { imageThree, nameThree } from './one/two/three/three.js'; + import { imageFour, nameFour } from './one/two/three/four/four.js'; + + console.log({ + [nameOne]: imageOne, + [nameTwo]: imageTwo, + [nameThree]: imageThree, + [nameFour]: imageFour, + }); + `, + 'one/one.js': js` + export const nameOne = 'one-name'; + export const imageOne = new URL('../one.svg', import.meta.url).href; + `, + 'one/two/two.js': js` + export const nameTwo = 'two-name'; + export const imageTwo = new URL('../../two.svg', import.meta.url).href; + `, + 'one/two/three/three.js': js` + export const nameThree = 'three-name'; + export const imageThree = new URL('../../../three.svg', import.meta.url).href; + `, + 'one/two/three/four/four.js': js` + export const nameFour = 'four-name'; + export const imageFour = new URL('../../../../four.svg', import.meta.url).href; + `, + 'one.svg': svg``, + 'two.svg': svg``, + 'three.svg': svg``, + 'four.svg': svg``, + }); + const config = { - input: { 'multi-level-bundle': require.resolve('./fixtures/multi-level-entrypoint.js') }, + input: { app: path.join(rootDir, 'app.js') }, plugins: [importMetaAssets()], }; - const bundle = await rollup.rollup(config); - const { output } = await bundle.generate(outputConfig); + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, outputConfig); + + expect(Object.keys(chunks)).to.have.lengthOf(1); + expect(Object.keys(assets)).to.have.lengthOf(4); + + expect(chunks['app.js']).to.equal(js` + const nameOne = 'one-name'; + const imageOne = new URL( + new URL('assets/one-BCCvKrTe.svg', import.meta.url).href + ).href; + + const nameTwo = 'two-name'; + const imageTwo = new URL( + new URL('assets/two-C4stzVZW.svg', import.meta.url).href + ).href; - expect(output.length).to.equal(5); - expectChunk(output, 'snapshots/multi-level-bundle.js', 'multi-level-bundle.js', [ - expectAsset(output, 'snapshots/one.svg', 'one.svg', 'assets/one-Bkie7h0E.svg'), - expectAsset(output, 'snapshots/two.svg', 'two.svg', 'assets/two-D7JyS-th.svg'), - expectAsset(output, 'snapshots/three.svg', 'three.svg', 'assets/three-IN2CmsMK.svg'), - expectAsset(output, 'snapshots/four.svg', 'four.svg', 'assets/four-CUlW6cvD.svg'), + const nameThree = 'three-name'; + const imageThree = new URL( + new URL('assets/three-DPeYetg3.svg', import.meta.url).href + ).href; + + const nameFour = 'four-name'; + const imageFour = new URL( + new URL('assets/four-2QgOKKkO.svg', import.meta.url).href + ).href; + + console.log({ + [nameOne]: imageOne, + [nameTwo]: imageTwo, + [nameThree]: imageThree, + [nameFour]: imageFour, + }); + `); + + const appChunk = output.find(({ fileName }) => fileName === 'app.js'); + expect(appChunk.referencedFiles).to.deep.equal([ + 'assets/one-BCCvKrTe.svg', + 'assets/two-C4stzVZW.svg', + 'assets/three-DPeYetg3.svg', + 'assets/four-2QgOKKkO.svg', ]); + + expect(assets['assets/one-BCCvKrTe.svg']).to.equal( + svg``, + ); + expect(assets['assets/two-C4stzVZW.svg']).to.equal( + svg``, + ); + expect(assets['assets/three-DPeYetg3.svg']).to.equal( + svg``, + ); + expect(assets['assets/four-2QgOKKkO.svg']).to.equal( + svg``, + ); }); it('multiple level bundle (upward modules)', async () => { + const rootDir = createApp({ + 'one/two/three/four/app.js': js` + import { imageOne, nameOne } from '../../../one.js'; + import { imageTwo, nameTwo } from '../../two.js'; + import { imageThree, nameThree } from '../three.js'; + import { imageFour, nameFour } from './four.js'; + + console.log({ + [nameOne]: imageOne, + [nameTwo]: imageTwo, + [nameThree]: imageThree, + [nameFour]: imageFour, + }); + `, + 'one/one.js': js` + export const nameOne = 'one-name'; + export const imageOne = new URL('../one.svg', import.meta.url).href; + `, + 'one/two/two.js': js` + export const nameTwo = 'two-name'; + export const imageTwo = new URL('../../two.svg', import.meta.url).href; + `, + 'one/two/three/three.js': js` + export const nameThree = 'three-name'; + export const imageThree = new URL('../../../three.svg', import.meta.url).href; + `, + 'one/two/three/four/four.js': js` + export const nameFour = 'four-name'; + export const imageFour = new URL('../../../../four.svg', import.meta.url).href; + `, + 'one.svg': svg``, + 'two.svg': svg``, + 'three.svg': svg``, + 'four.svg': svg``, + }); + const config = { input: { - 'multi-level-bundle': require.resolve( - './fixtures/one/two/three/four/multi-level-entrypoint-deep.js', - ), + app: path.join(rootDir, 'one/two/three/four/app.js'), }, plugins: [importMetaAssets()], }; - const bundle = await rollup.rollup(config); - const { output } = await bundle.generate(outputConfig); + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, outputConfig); + + expect(Object.keys(chunks)).to.have.lengthOf(1); + expect(Object.keys(assets)).to.have.lengthOf(4); - expect(output.length).to.equal(5); - expectChunk(output, 'snapshots/multi-level-bundle.js', 'multi-level-bundle.js', [ - expectAsset(output, 'snapshots/one.svg', 'one.svg', 'assets/one-Bkie7h0E.svg'), - expectAsset(output, 'snapshots/two.svg', 'two.svg', 'assets/two-D7JyS-th.svg'), - expectAsset(output, 'snapshots/three.svg', 'three.svg', 'assets/three-IN2CmsMK.svg'), - expectAsset(output, 'snapshots/four.svg', 'four.svg', 'assets/four-CUlW6cvD.svg'), + expect(chunks['app.js']).to.equal(js` + const nameOne = 'one-name'; + const imageOne = new URL( + new URL('assets/one-BCCvKrTe.svg', import.meta.url).href + ).href; + + const nameTwo = 'two-name'; + const imageTwo = new URL( + new URL('assets/two-C4stzVZW.svg', import.meta.url).href + ).href; + + const nameThree = 'three-name'; + const imageThree = new URL( + new URL('assets/three-DPeYetg3.svg', import.meta.url).href + ).href; + + const nameFour = 'four-name'; + const imageFour = new URL( + new URL('assets/four-2QgOKKkO.svg', import.meta.url).href + ).href; + + console.log({ + [nameOne]: imageOne, + [nameTwo]: imageTwo, + [nameThree]: imageThree, + [nameFour]: imageFour, + }); + `); + + const appChunk = output.find(({ fileName }) => fileName === 'app.js'); + expect(appChunk.referencedFiles).to.deep.equal([ + 'assets/one-BCCvKrTe.svg', + 'assets/two-C4stzVZW.svg', + 'assets/three-DPeYetg3.svg', + 'assets/four-2QgOKKkO.svg', ]); + + expect(assets['assets/one-BCCvKrTe.svg']).to.equal( + svg``, + ); + expect(assets['assets/two-C4stzVZW.svg']).to.equal( + svg``, + ); + expect(assets['assets/three-DPeYetg3.svg']).to.equal( + svg``, + ); + expect(assets['assets/four-2QgOKKkO.svg']).to.equal( + svg``, + ); }); it('different asset levels', async () => { + const rootDir = createApp({ + 'one/two/app.js': js` + const nameOne = 'one-name'; + const imageOne = new URL('../one-deep.svg', import.meta.url).href; + + const nameTwo = 'two-name'; + const imageTwo = new URL('./two-deep.svg', import.meta.url).href; + + const nameThree = 'three-name'; + const imageThree = new URL('./three/three-deep.svg', import.meta.url).href; + + const nameFour = 'four-name'; + const imageFour = new URL('./three/four/four-deep.svg', import.meta.url).href; + + console.log({ + [nameOne]: imageOne, + [nameTwo]: imageTwo, + [nameThree]: imageThree, + [nameFour]: imageFour, + }); + `, + 'one/one-deep.svg': svg``, + 'one/two/two-deep.svg': svg``, + 'one/two/three/three-deep.svg': svg``, + 'one/two/three/four/four-deep.svg': svg``, + }); + const config = { input: { - 'different-asset-levels-bundle': require.resolve( - './fixtures/one/two/different-asset-levels-entrypoint.js', - ), + app: path.join(rootDir, 'one/two/app.js'), }, plugins: [importMetaAssets()], }; - const bundle = await rollup.rollup(config); - const { output } = await bundle.generate(outputConfig); - - expect(output.length).to.equal(5); - expectChunk( - output, - 'snapshots/different-asset-levels-bundle.js', - 'different-asset-levels-bundle.js', - [ - expectAsset(output, 'snapshots/one.svg', 'one-deep.svg', 'assets/one-deep-Bkie7h0E.svg'), - expectAsset(output, 'snapshots/two.svg', 'two-deep.svg', 'assets/two-deep-D7JyS-th.svg'), - expectAsset( - output, - 'snapshots/three.svg', - 'three-deep.svg', - 'assets/three-deep-IN2CmsMK.svg', - ), - expectAsset(output, 'snapshots/four.svg', 'four-deep.svg', 'assets/four-deep-CUlW6cvD.svg'), - ], + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, outputConfig); + + expect(Object.keys(chunks)).to.have.lengthOf(1); + expect(Object.keys(assets)).to.have.lengthOf(4); + + expect(chunks['app.js']).to.equal(js` + const nameOne = 'one-name'; + const imageOne = new URL( + new URL('assets/one-deep-BCCvKrTe.svg', import.meta.url).href + ).href; + + const nameTwo = 'two-name'; + const imageTwo = new URL( + new URL('assets/two-deep-C4stzVZW.svg', import.meta.url).href + ).href; + + const nameThree = 'three-name'; + const imageThree = new URL( + new URL('assets/three-deep-DPeYetg3.svg', import.meta.url).href + ).href; + + const nameFour = 'four-name'; + const imageFour = new URL( + new URL('assets/four-deep-2QgOKKkO.svg', import.meta.url).href + ).href; + + console.log({ + [nameOne]: imageOne, + [nameTwo]: imageTwo, + [nameThree]: imageThree, + [nameFour]: imageFour, + }); + `); + + const appChunk = output.find(({ fileName }) => fileName === 'app.js'); + expect(appChunk.referencedFiles).to.deep.equal([ + 'assets/one-deep-BCCvKrTe.svg', + 'assets/two-deep-C4stzVZW.svg', + 'assets/three-deep-DPeYetg3.svg', + 'assets/four-deep-2QgOKKkO.svg', + ]); + + expect(assets['assets/one-deep-BCCvKrTe.svg']).to.equal( + svg``, + ); + expect(assets['assets/two-deep-C4stzVZW.svg']).to.equal( + svg``, + ); + expect(assets['assets/three-deep-DPeYetg3.svg']).to.equal( + svg``, + ); + expect(assets['assets/four-deep-2QgOKKkO.svg']).to.equal( + svg``, + ); + }); + + it('different asset levels with static paths and preserved output structure', async () => { + const rootDir = createApp({ + 'one/two/app.js': js` + const nameOne = 'one-name'; + const imageOne = new URL('../one-deep.svg', import.meta.url).href; + + const nameTwo = 'two-name'; + const imageTwo = new URL('./two-deep.svg', import.meta.url).href; + + const nameThree = 'three-name'; + const imageThree = new URL('./three/three-deep.svg', import.meta.url).href; + + const nameFour = 'four-name'; + const imageFour = new URL('./three/four/four-deep.svg', import.meta.url).href; + + console.log({ + [nameOne]: imageOne, + [nameTwo]: imageTwo, + [nameThree]: imageThree, + [nameFour]: imageFour, + }); + `, + 'one/one-deep.svg': svg``, + 'one/two/two-deep.svg': svg``, + 'one/two/three/three-deep.svg': svg``, + 'one/two/three/four/four-deep.svg': svg``, + }); + + const config = { + input: { + app: path.join(rootDir, 'one/two/app.js'), + }, + plugins: [importMetaAssets()], + }; + + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, { + ...outputConfig, + assetFileNames: asset => + path.relative(rootDir, asset.originalFileNames[0]).split(path.sep).join('/'), + }); + + expect(Object.keys(chunks)).to.have.lengthOf(1); + expect(Object.keys(assets)).to.have.lengthOf(4); + + expect(chunks['app.js']).to.equal(js` + const nameOne = 'one-name'; + const imageOne = new URL( + new URL('one/one-deep.svg', import.meta.url).href + ).href; + + const nameTwo = 'two-name'; + const imageTwo = new URL( + new URL('one/two/two-deep.svg', import.meta.url).href + ).href; + + const nameThree = 'three-name'; + const imageThree = new URL( + new URL('one/two/three/three-deep.svg', import.meta.url).href + ).href; + + const nameFour = 'four-name'; + const imageFour = new URL( + new URL( + 'one/two/three/four/four-deep.svg', + import.meta.url + ).href + ).href; + + console.log({ + [nameOne]: imageOne, + [nameTwo]: imageTwo, + [nameThree]: imageThree, + [nameFour]: imageFour, + }); + `); + + const appChunk = output.find(({ fileName }) => fileName === 'app.js'); + expect(appChunk.referencedFiles).to.deep.equal([ + 'one/one-deep.svg', + 'one/two/two-deep.svg', + 'one/two/three/three-deep.svg', + 'one/two/three/four/four-deep.svg', + ]); + + expect(assets['one/one-deep.svg']).to.equal( + svg``, + ); + expect(assets['one/two/two-deep.svg']).to.equal( + svg``, + ); + expect(assets['one/two/three/three-deep.svg']).to.equal( + svg``, + ); + expect(assets['one/two/three/four/four-deep.svg']).to.equal( + svg``, ); }); it('include/exclude options', async () => { + const rootDir = createApp({ + 'one/one.js': js` + export const nameOne = 'one-name'; + export const imageOne = new URL('../one.svg', import.meta.url).href; + `, + 'one/two/two.js': js` + export const nameTwo = 'two-name'; + export const imageTwo = new URL('../../two.svg', import.meta.url).href; + `, + 'one/two/three/three.js': js` + export const nameThree = 'three-name'; + export const imageThree = new URL('../../../three.svg', import.meta.url).href; + `, + 'one/two/three/four/four.js': js` + export const nameFour = 'four-name'; + export const imageFour = new URL('../../../../four.svg', import.meta.url).href; + `, + 'one.svg': svg``, + 'two.svg': svg``, + 'three.svg': svg``, + 'four.svg': svg``, + }); + const config = { input: { - 'one-bundle': require.resolve('./fixtures/one/one.js'), - 'two-bundle': require.resolve('./fixtures/one/two/two.js'), - 'three-bundle': require.resolve('./fixtures/one/two/three/three.js'), - 'four-bundle': require.resolve('./fixtures/one/two/three/four/four.js'), + one: path.join(rootDir, 'one/one.js'), + two: path.join(rootDir, 'one/two/two.js'), + three: path.join(rootDir, 'one/two/three/three.js'), + four: path.join(rootDir, 'one/two/three/four/four.js'), }, plugins: [ importMetaAssets({ @@ -207,32 +731,81 @@ describe('rollup-plugin-import-meta-assets', () => { ], }; - const bundle = await rollup.rollup(config); - const { output } = await bundle.generate(outputConfig); + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, outputConfig); - // 4 ES modules + 2 assets - expect(output.length).to.equal(6); - expectChunk(output, 'snapshots/one-bundle.js', 'one-bundle.js', []); - expectChunk(output, 'snapshots/two-bundle.js', 'two-bundle.js', []); - expectChunk(output, 'snapshots/three-bundle.js', 'three-bundle.js', [ - expectAsset(output, 'snapshots/three.svg', 'three.svg', 'assets/three-IN2CmsMK.svg'), - ]); - expectChunk(output, 'snapshots/four-bundle.js', 'four-bundle.js', [ - expectAsset(output, 'snapshots/four.svg', 'four.svg', 'assets/four-CUlW6cvD.svg'), - ]); + expect(Object.keys(chunks)).to.have.lengthOf(4); + expect(Object.keys(assets)).to.have.lengthOf(2); + + // one and two keep original URLs (excluded) + expect(chunks['one.js']).to.equal(js` + const nameOne = 'one-name'; + const imageOne = new URL('../one.svg', import.meta.url).href; + + export { imageOne, nameOne }; + `); + expect(chunks['two.js']).to.equal(js` + const nameTwo = 'two-name'; + const imageTwo = new URL('../../two.svg', import.meta.url).href; + + export { imageTwo, nameTwo }; + `); + + // three and four have transformed URLs (included) + expect(chunks['three.js']).to.equal(js` + const nameThree = 'three-name'; + const imageThree = new URL( + new URL('assets/three-DPeYetg3.svg', import.meta.url).href + ).href; + + export { imageThree, nameThree }; + `); + expect(chunks['four.js']).to.equal(js` + const nameFour = 'four-name'; + const imageFour = new URL( + new URL('assets/four-2QgOKKkO.svg', import.meta.url).href + ).href; + + export { imageFour, nameFour }; + `); + + expect(assets['assets/three-DPeYetg3.svg']).to.equal( + svg``, + ); + expect(assets['assets/four-2QgOKKkO.svg']).to.equal( + svg``, + ); + + const oneChunk = output.find(({ fileName }) => fileName === 'one.js'); + const twoChunk = output.find(({ fileName }) => fileName === 'two.js'); + const threeChunk = output.find(({ fileName }) => fileName === 'three.js'); + const fourChunk = output.find(({ fileName }) => fileName === 'four.js'); + + expect(oneChunk.referencedFiles).to.deep.equal([]); + expect(twoChunk.referencedFiles).to.deep.equal([]); + expect(threeChunk.referencedFiles).to.deep.equal(['assets/three-DPeYetg3.svg']); + expect(fourChunk.referencedFiles).to.deep.equal(['assets/four-2QgOKKkO.svg']); }); it('bad URL example', async () => { + const rootDir = createApp({ + 'app.js': js` + const badImage1 = new URL('/absolute-path.svg', import.meta.url).href; + const badImage2 = new URL('../../missing-relative-path.svg', import.meta.url).href; + console.log(badImage1, badImage2); + `, + }); + const config = { - input: { 'bad-url-bundle': require.resolve('./fixtures/bad-url-entrypoint.js') }, + input: { app: path.join(rootDir, 'app.js') }, plugins: [importMetaAssets()], }; let error; try { - const bundle = await rollup.rollup(config); - await bundle.generate(outputConfig); + const build = await rollup(config); + await build.generate(outputConfig); } catch (e) { error = e; } @@ -241,13 +814,21 @@ describe('rollup-plugin-import-meta-assets', () => { }); it('bad URL example with warnOnError: true', async () => { + const rootDir = createApp({ + 'app.js': js` + const badImage1 = new URL('/absolute-path.svg', import.meta.url).href; + const badImage2 = new URL('../../missing-relative-path.svg', import.meta.url).href; + console.log(badImage1, badImage2); + `, + }); + const config = { - input: { 'bad-url-bundle': require.resolve('./fixtures/bad-url-entrypoint.js') }, + input: { app: path.join(rootDir, 'app.js') }, plugins: [importMetaAssets({ warnOnError: true })], }; - const bundle = await rollup.rollup(config); - await bundle.generate(outputConfig); + const build = await rollup(config); + await build.generate(outputConfig); expect(consoleStub.callCount).to.equal(2); expect(consoleStub.getCall(0).args[0]).to.match( @@ -258,40 +839,407 @@ describe('rollup-plugin-import-meta-assets', () => { ); }); - it('allows backtics and dynamic vars in path', async () => { + it('allows backtics in path', async () => { + const rootDir = createApp({ + 'app.js': + 'const backticksImg = new URL(`./one/one-deep.svg`, import.meta.url);\n\nconsole.log(backticksImg);\n', + 'one/one-deep.svg': svg``, + }); + const config = { - input: { 'dynamic-vars': require.resolve('./fixtures/dynamic-vars.js') }, + input: { app: path.join(rootDir, 'app.js') }, plugins: [importMetaAssets({ warnOnError: true })], }; - const bundle = await rollup.rollup(config); - const { output } = await bundle.generate(outputConfig); + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, outputConfig); - expect(output.length).to.equal(4); - expectChunk(output, 'snapshots/dynamic-vars.js', 'dynamic-vars.js', [ - expectAsset(output, 'snapshots/three.svg', 'three.svg', 'assets/three-IN2CmsMK.svg'), - expectAsset(output, 'snapshots/two.svg', 'two.svg', 'assets/two-D7JyS-th.svg'), - expectAsset(output, 'snapshots/one.svg', 'one.svg', 'assets/one-Bkie7h0E.svg'), + expect(Object.keys(chunks)).to.have.lengthOf(1); + expect(Object.keys(assets)).to.have.lengthOf(1); + + expect(chunks['app.js']).to.equal(js` + const backticksImg = new URL( + new URL('assets/one-deep-BCCvKrTe.svg', import.meta.url).href + ); + + console.log(backticksImg); + `); + + const appChunk = output.find(({ fileName }) => fileName === 'app.js'); + expect(appChunk.referencedFiles).to.deep.equal(['assets/one-deep-BCCvKrTe.svg']); + + expect(assets['assets/one-deep-BCCvKrTe.svg']).to.equal( + svg``, + ); + }); + + it('allows dynamic vars with a concatenated file name', async () => { + const rootDir = createApp({ + // actual names don't matter, we glob and include everything always + 'app.js': js` + const images = ['one', 'two']; + + const paths = images.map((name) => + new URL(\`./assets/images/image-\${name}.svg\`, import.meta.url), + ); + + console.log(paths); + `, + 'assets/images/image-one.svg': svg``, + 'assets/images/image-two.svg': svg``, + 'assets/images/image-three.svg': svg``, + }); + + const config = { + input: { app: path.join(rootDir, 'app.js') }, + plugins: [importMetaAssets({ warnOnError: true })], + }; + + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, outputConfig); + + expect(Object.keys(chunks)).to.have.lengthOf(1); + expect(Object.keys(assets)).to.have.lengthOf(3); + + expect(chunks['app.js']).to.equal(js` + function __variableDynamicURLRuntime0__(path) { + switch (path) { + case './assets/images/image-one.svg': + return new URL( + new URL('assets/image-one-BCCvKrTe.svg', import.meta.url).href + ); + case './assets/images/image-three.svg': + return new URL( + new URL('assets/image-three-DPeYetg3.svg', import.meta.url).href + ); + case './assets/images/image-two.svg': + return new URL( + new URL('assets/image-two-C4stzVZW.svg', import.meta.url).href + ); + default: + return new Promise(function (resolve, reject) { + (typeof queueMicrotask === 'function' + ? queueMicrotask + : setTimeout)(reject.bind(null, new Error('Unknown variable dynamic new URL statement: ' + path))); + }); + } + } + + const images = ['one', 'two']; + + const paths = images.map((name) => __variableDynamicURLRuntime0__(\`./assets/images/image-\${name}.svg\`)); + + console.log(paths); + `); + + const appChunk = output.find(({ fileName }) => fileName === 'app.js'); + expect(appChunk.referencedFiles).to.deep.equal([ + 'assets/image-two-C4stzVZW.svg', + 'assets/image-three-DPeYetg3.svg', + 'assets/image-one-BCCvKrTe.svg', ]); + + expect(assets['assets/image-one-BCCvKrTe.svg']).to.equal( + svg``, + ); + expect(assets['assets/image-two-C4stzVZW.svg']).to.equal( + svg``, + ); + expect(assets['assets/image-three-DPeYetg3.svg']).to.equal( + svg``, + ); }); it('ignores patterns that reference a directory', async () => { + const rootDir = createApp({ + 'app.js': js` + const justUrlObject = new URL('./one.svg', import.meta.url); + const href = new URL('./two.svg', import.meta.url).href; + const pathname = new URL('./three.svg', import.meta.url).pathname; + const searchParams = new URL('./four.svg', import.meta.url).searchParams; + + const directories = [ + new URL('./', import.meta.url), + new URL('./one', import.meta.url), + new URL('./one/', import.meta.url), + new URL('./one/two', import.meta.url), + new URL('./one/two/', import.meta.url), + ]; + + console.log({ + justUrlObject, + href, + pathname, + searchParams, + directories, + }); + `, + 'one.svg': svg``, + 'two.svg': svg``, + 'three.svg': svg``, + 'four.svg': svg``, + 'one/': '', // create directory + 'one/two/': '', // create directory + }); + const config = { input: { - 'directories-ignored': require.resolve('./fixtures/directories-and-simple-entrypoint.js'), + app: path.join(rootDir, 'app.js'), }, plugins: [importMetaAssets()], }; - const bundle = await rollup.rollup(config); - const { output } = await bundle.generate(outputConfig); + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, outputConfig); + + expect(Object.keys(chunks)).to.have.lengthOf(1); + expect(Object.keys(assets)).to.have.lengthOf(4); + + expect(chunks['app.js']).to.equal(js` + const justUrlObject = new URL( + new URL('assets/one-BCCvKrTe.svg', import.meta.url).href + ); + const href = new URL(new URL('assets/two-C4stzVZW.svg', import.meta.url).href) + .href; + const pathname = new URL( + new URL('assets/three-DPeYetg3.svg', import.meta.url).href + ).pathname; + const searchParams = new URL( + new URL('assets/four-2QgOKKkO.svg', import.meta.url).href + ).searchParams; - expect(output.length).to.equal(5); - expectChunk(output, 'snapshots/directories-ignored.js', 'directories-ignored.js', [ - expectAsset(output, 'snapshots/one.svg', 'one.svg', 'assets/one-Bkie7h0E.svg'), - expectAsset(output, 'snapshots/two.svg', 'two.svg', 'assets/two-D7JyS-th.svg'), - expectAsset(output, 'snapshots/three.svg', 'three.svg', 'assets/three-IN2CmsMK.svg'), - expectAsset(output, 'snapshots/four.svg', 'four.svg', 'assets/four-CUlW6cvD.svg'), + const directories = [ + new URL('./', import.meta.url), + new URL('./one', import.meta.url), + new URL('./one/', import.meta.url), + new URL('./one/two', import.meta.url), + new URL('./one/two/', import.meta.url), + ]; + + console.log({ + justUrlObject, + href, + pathname, + searchParams, + directories, + }); + `); + + const appChunk = output.find(({ fileName }) => fileName === 'app.js'); + expect(appChunk.referencedFiles).to.deep.equal([ + 'assets/one-BCCvKrTe.svg', + 'assets/two-C4stzVZW.svg', + 'assets/three-DPeYetg3.svg', + 'assets/four-2QgOKKkO.svg', ]); + + expect(assets['assets/one-BCCvKrTe.svg']).to.equal( + svg``, + ); + expect(assets['assets/two-C4stzVZW.svg']).to.equal( + svg``, + ); + expect(assets['assets/three-DPeYetg3.svg']).to.equal( + svg``, + ); + expect(assets['assets/four-2QgOKKkO.svg']).to.equal( + svg``, + ); + }); + + describe('preserveDynamicStructure', () => { + it('allows dynamic vars with a concatenated file name with a preserved output path', async () => { + const rootDir = createApp({ + // actual names don't matter, we glob and include everything always + 'app.js': js` + const images = ['one', 'two']; + + const paths = images.map((name) => + new URL(\`./assets/images/image-\${name}.svg\`, import.meta.url), + ); + + console.log(paths); + `, + 'assets/images/image-one.svg': svg``, + 'assets/images/image-two.svg': svg``, + 'assets/images/image-three.svg': svg``, + }); + + const config = { + input: { app: path.join(rootDir, 'app.js') }, + plugins: [importMetaAssets({ preserveDynamicStructure: true })], + }; + + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, { + ...outputConfig, + assetFileNames: asset => + path.relative(rootDir, asset.originalFileNames[0]).split(path.sep).join('/'), + }); + + expect(Object.keys(chunks)).to.have.lengthOf(1); + expect(Object.keys(assets)).to.have.lengthOf(3); + + expect(chunks['app.js']).to.equal(js` + const images = ['one', 'two']; + + const paths = images.map((name) => + new URL(\`./image-\${name}.svg\`, new URL('assets/images/image-one.svg', import.meta.url).href), + ); + + console.log(paths); + `); + + const appChunk = output.find(({ fileName }) => fileName === 'app.js'); + expect(appChunk.referencedFiles).to.deep.equal(['assets/images/image-one.svg']); + + expect(assets['assets/images/image-one.svg']).to.equal( + svg``, + ); + expect(assets['assets/images/image-two.svg']).to.equal( + svg``, + ); + expect(assets['assets/images/image-three.svg']).to.equal( + svg``, + ); + }); + + it('allows dynamic vars in deep paths with a preserved output path', async () => { + const rootDir = createApp({ + // actual names don't matter, we glob and include everything always + 'app.js': js` + const images = { + 'category-name': ['image-name'], + }; + + const paths = Object.entries(images).flatMap(([category, names]) => + names.map((name) => + new URL(\`./assets/images/\${category}/\${name}.svg\`, import.meta.url), + ), + ); + + console.log(paths); + `, + 'assets/images/category-one/image-one.svg': svg``, + 'assets/images/category-one/image-two.svg': svg``, + 'assets/images/category-two/image-three.svg': svg``, + 'assets/images/category-two/image-four.svg': svg``, + }); + + const config = { + input: { app: path.join(rootDir, 'app.js') }, + plugins: [importMetaAssets({ preserveDynamicStructure: true })], + }; + + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, { + ...outputConfig, + assetFileNames: asset => + path.relative(rootDir, asset.originalFileNames[0]).split(path.sep).join('/'), + }); + + expect(Object.keys(chunks)).to.have.lengthOf(1); + expect(Object.keys(assets)).to.have.lengthOf(4); + + expect(chunks['app.js']).to.equal(js` + const images = { + 'category-name': ['image-name'], + }; + + const paths = Object.entries(images).flatMap(([category, names]) => + names.map((name) => + new URL(\`../\${category}/\${name}.svg\`, new URL('assets/images/category-one/image-one.svg', import.meta.url).href), + ), + ); + + console.log(paths); + `); + + const appChunk = output.find(({ fileName }) => fileName === 'app.js'); + expect(appChunk.referencedFiles).to.deep.equal(['assets/images/category-one/image-one.svg']); + + expect(assets['assets/images/category-one/image-one.svg']).to.equal( + svg``, + ); + expect(assets['assets/images/category-one/image-two.svg']).to.equal( + svg``, + ); + expect(assets['assets/images/category-two/image-three.svg']).to.equal( + svg``, + ); + expect(assets['assets/images/category-two/image-four.svg']).to.equal( + svg``, + ); + }); + + it('allows dynamic vars in deep paths with a static path in the middle with a preserved output path', async () => { + const rootDir = createApp({ + // actual names don't matter, we glob and include everything always + 'app.js': js` + const images = { + 'category-name': ['image-name'], + }; + + const paths = Object.entries(images).flatMap(([category, names]) => + names.map((name) => + new URL(\`./assets/images/\${category}/static/\${name}.svg\`, import.meta.url), + ), + ); + + console.log(paths); + `, + 'assets/images/category-one/static/image-one.svg': svg``, + 'assets/images/category-one/static/image-two.svg': svg``, + 'assets/images/category-two/static/image-three.svg': svg``, + 'assets/images/category-two/static/image-four.svg': svg``, + }); + + const config = { + input: { app: path.join(rootDir, 'app.js') }, + plugins: [importMetaAssets({ preserveDynamicStructure: true })], + }; + + const build = await rollup(config); + const { output, chunks, assets } = await generateTestBundle(build, { + ...outputConfig, + assetFileNames: asset => + path.relative(rootDir, asset.originalFileNames[0]).split(path.sep).join('/'), + }); + + expect(Object.keys(chunks)).to.have.lengthOf(1); + expect(Object.keys(assets)).to.have.lengthOf(4); + + expect(chunks['app.js']).to.equal(js` + const images = { + 'category-name': ['image-name'], + }; + + const paths = Object.entries(images).flatMap(([category, names]) => + names.map((name) => + new URL(\`../../\${category}/static/\${name}.svg\`, new URL('assets/images/category-one/static/image-one.svg', import.meta.url).href), + ), + ); + + console.log(paths); + `); + + const appChunk = output.find(({ fileName }) => fileName === 'app.js'); + expect(appChunk.referencedFiles).to.deep.equal([ + 'assets/images/category-one/static/image-one.svg', + ]); + + expect(assets['assets/images/category-one/static/image-one.svg']).to.equal( + svg``, + ); + expect(assets['assets/images/category-one/static/image-two.svg']).to.equal( + svg``, + ); + expect(assets['assets/images/category-two/static/image-three.svg']).to.equal( + svg``, + ); + expect(assets['assets/images/category-two/static/image-four.svg']).to.equal( + svg``, + ); + }); }); }); diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/different-asset-levels-bundle.js b/packages/rollup-plugin-import-meta-assets/test/snapshots/different-asset-levels-bundle.js deleted file mode 100644 index 7933fcf0e1..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/different-asset-levels-bundle.js +++ /dev/null @@ -1,18 +0,0 @@ -const nameOne = 'one-name'; -const imageOne = new URL(new URL('assets/one-deep-Bkie7h0E.svg', import.meta.url).href).href; - -const nameTwo = 'two-name'; -const imageTwo = new URL(new URL('assets/two-deep-D7JyS-th.svg', import.meta.url).href).href; - -const nameThree = 'three-name'; -const imageThree = new URL(new URL('assets/three-deep-IN2CmsMK.svg', import.meta.url).href).href; - -const nameFour = 'four-name'; -const imageFour = new URL(new URL('assets/four-deep-CUlW6cvD.svg', import.meta.url).href).href; - -console.log({ - [nameOne]: imageOne, - [nameTwo]: imageTwo, - [nameThree]: imageThree, - [nameFour]: imageFour, -}); diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/directories-ignored.js b/packages/rollup-plugin-import-meta-assets/test/snapshots/directories-ignored.js deleted file mode 100644 index 035e1ce550..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/directories-ignored.js +++ /dev/null @@ -1,20 +0,0 @@ -const justUrlObject = new URL(new URL('assets/one-Bkie7h0E.svg', import.meta.url).href); -const href = new URL(new URL('assets/two-D7JyS-th.svg', import.meta.url).href).href; -const pathname = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href).pathname; -const searchParams = new URL(new URL('assets/four-CUlW6cvD.svg', import.meta.url).href).searchParams; - -const directories = [ - new URL('./', import.meta.url), - new URL('./one', import.meta.url), - new URL('./one/', import.meta.url), - new URL('./one/two', import.meta.url), - new URL('./one/two/', import.meta.url), -]; - -console.log({ - justUrlObject, - href, - pathname, - searchParams, - directories, -}); diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/dynamic-vars.js b/packages/rollup-plugin-import-meta-assets/test/snapshots/dynamic-vars.js deleted file mode 100644 index 982ad452ff..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/dynamic-vars.js +++ /dev/null @@ -1,21 +0,0 @@ -function __variableDynamicURLRuntime0__(path) { - switch (path) { - case './dynamic-assets/one.svg': return new URL(new URL('assets/one-Bkie7h0E.svg', import.meta.url).href); - case './dynamic-assets/three.svg': return new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href); - case './dynamic-assets/two.svg': return new URL(new URL('assets/two-D7JyS-th.svg', import.meta.url).href); - default: return new Promise(function(resolve, reject) { - (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)( - reject.bind(null, new Error("Unknown variable dynamic new URL statement: " + path)) - ); - }) - } - } - -const names = ['one', 'two']; -// value of one could also be "two" or "three", bundler does not analyze the value itself -// Therefore, we expect both one.svg, two.svg and three.svg to be bundled, and this to turn into a switch statement -// with 3 cases (for all 3 assets in the dynamic-assets folder) -const dynamicImgs = names.map(n => __variableDynamicURLRuntime0__(`./dynamic-assets/${n}.svg`)); -const backticksImg = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href); - -console.log(dynamicImgs, backticksImg); diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/five b/packages/rollup-plugin-import-meta-assets/test/snapshots/five deleted file mode 100644 index 6434d8dc54..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/five +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/four-bundle.js b/packages/rollup-plugin-import-meta-assets/test/snapshots/four-bundle.js deleted file mode 100644 index 6dd1345d77..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/four-bundle.js +++ /dev/null @@ -1,4 +0,0 @@ -const nameFour = 'four-name'; -const imageFour = new URL(new URL('assets/four-CUlW6cvD.svg', import.meta.url).href).href; - -export { imageFour, nameFour }; diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/four.min.svg b/packages/rollup-plugin-import-meta-assets/test/snapshots/four.min.svg deleted file mode 100644 index 2a566f1737..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/four.min.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/four.svg b/packages/rollup-plugin-import-meta-assets/test/snapshots/four.svg deleted file mode 100644 index 86eb06cfd2..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/four.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/image.jpg b/packages/rollup-plugin-import-meta-assets/test/snapshots/image.jpg deleted file mode 100644 index b0f2052e04..0000000000 Binary files a/packages/rollup-plugin-import-meta-assets/test/snapshots/image.jpg and /dev/null differ diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/multi-level-bundle.js b/packages/rollup-plugin-import-meta-assets/test/snapshots/multi-level-bundle.js deleted file mode 100644 index 7ea7d4c17b..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/multi-level-bundle.js +++ /dev/null @@ -1,18 +0,0 @@ -const nameOne = 'one-name'; -const imageOne = new URL(new URL('assets/one-Bkie7h0E.svg', import.meta.url).href).href; - -const nameTwo = 'two-name'; -const imageTwo = new URL(new URL('assets/two-D7JyS-th.svg', import.meta.url).href).href; - -const nameThree = 'three-name'; -const imageThree = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href).href; - -const nameFour = 'four-name'; -const imageFour = new URL(new URL('assets/four-CUlW6cvD.svg', import.meta.url).href).href; - -console.log({ - [nameOne]: imageOne, - [nameTwo]: imageTwo, - [nameThree]: imageThree, - [nameFour]: imageFour, -}); diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/one-bundle.js b/packages/rollup-plugin-import-meta-assets/test/snapshots/one-bundle.js deleted file mode 100644 index ad74d524a2..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/one-bundle.js +++ /dev/null @@ -1,4 +0,0 @@ -const nameOne = 'one-name'; -const imageOne = new URL('../one.svg', import.meta.url).href; - -export { imageOne, nameOne }; diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/one.min.svg b/packages/rollup-plugin-import-meta-assets/test/snapshots/one.min.svg deleted file mode 100644 index 01f16c2852..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/one.min.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/one.svg b/packages/rollup-plugin-import-meta-assets/test/snapshots/one.svg deleted file mode 100644 index dfe13a152f..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/one.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/simple-bundle.js b/packages/rollup-plugin-import-meta-assets/test/snapshots/simple-bundle.js deleted file mode 100644 index 0c2e6a0a73..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/simple-bundle.js +++ /dev/null @@ -1,13 +0,0 @@ -const justUrlObject = new URL(new URL('assets/one-Bkie7h0E.svg', import.meta.url).href); -const href = new URL(new URL('assets/two-D7JyS-th.svg', import.meta.url).href).href; -const pathname = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href).pathname; -const searchParams = new URL(new URL('assets/four-CUlW6cvD.svg', import.meta.url).href).searchParams; -const noExtension = new URL(new URL('assets/five-Bnvj_R70', import.meta.url).href); - -console.log({ - justUrlObject, - href, - pathname, - searchParams, - noExtension, -}); diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/three-bundle.js b/packages/rollup-plugin-import-meta-assets/test/snapshots/three-bundle.js deleted file mode 100644 index a033b7db26..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/three-bundle.js +++ /dev/null @@ -1,4 +0,0 @@ -const nameThree = 'three-name'; -const imageThree = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href).href; - -export { imageThree, nameThree }; diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/three.min.svg b/packages/rollup-plugin-import-meta-assets/test/snapshots/three.min.svg deleted file mode 100644 index 342277191b..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/three.min.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/three.svg b/packages/rollup-plugin-import-meta-assets/test/snapshots/three.svg deleted file mode 100644 index 9ebc1e4895..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/three.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/transform-bundle-ignored.js b/packages/rollup-plugin-import-meta-assets/test/snapshots/transform-bundle-ignored.js deleted file mode 100644 index cc18a7ddd7..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/transform-bundle-ignored.js +++ /dev/null @@ -1,13 +0,0 @@ -const justUrlObject = new URL(new URL('assets/one--RhQWA3U.svg', import.meta.url).href); -const href = new URL(new URL('assets/two-CZdxIUwi.svg', import.meta.url).href).href; -const pathname = new URL(new URL('assets/three-tFhyRH_R.svg', import.meta.url).href).pathname; -const searchParams = new URL(new URL('assets/four-Cs1OId-q.svg', import.meta.url).href).searchParams; -const someJpg = new URL('./image.jpg', import.meta.url); - -console.log({ - justUrlObject, - href, - pathname, - searchParams, - someJpg, -}); diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/transform-bundle.js b/packages/rollup-plugin-import-meta-assets/test/snapshots/transform-bundle.js deleted file mode 100644 index 71c9bf205f..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/transform-bundle.js +++ /dev/null @@ -1,13 +0,0 @@ -const justUrlObject = new URL(new URL('assets/one--RhQWA3U.svg', import.meta.url).href); -const href = new URL(new URL('assets/two-CZdxIUwi.svg', import.meta.url).href).href; -const pathname = new URL(new URL('assets/three-tFhyRH_R.svg', import.meta.url).href).pathname; -const searchParams = new URL(new URL('assets/four-Cs1OId-q.svg', import.meta.url).href).searchParams; -const someJpg = new URL(new URL('assets/image-C92N8yPj.jpg', import.meta.url).href); - -console.log({ - justUrlObject, - href, - pathname, - searchParams, - someJpg, -}); diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/two-bundle.js b/packages/rollup-plugin-import-meta-assets/test/snapshots/two-bundle.js deleted file mode 100644 index 0b472bb93a..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/two-bundle.js +++ /dev/null @@ -1,4 +0,0 @@ -const nameTwo = 'two-name'; -const imageTwo = new URL('../../two.svg', import.meta.url).href; - -export { imageTwo, nameTwo }; diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/two.min.svg b/packages/rollup-plugin-import-meta-assets/test/snapshots/two.min.svg deleted file mode 100644 index f37fafe51a..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/two.min.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/packages/rollup-plugin-import-meta-assets/test/snapshots/two.svg b/packages/rollup-plugin-import-meta-assets/test/snapshots/two.svg deleted file mode 100644 index 071582b8ff..0000000000 --- a/packages/rollup-plugin-import-meta-assets/test/snapshots/two.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/test-utils/rollup-test-utils.d.ts b/test-utils/rollup-test-utils.d.ts new file mode 100644 index 0000000000..0685122184 --- /dev/null +++ b/test-utils/rollup-test-utils.d.ts @@ -0,0 +1,19 @@ +import type { OutputOptions, RollupBuild, OutputChunk, OutputAsset } from 'rollup'; + +export function html(strings: TemplateStringsArray, ...values: string[]): string; +export function css(strings: TemplateStringsArray, ...values: string[]): string; +export function js(strings: TemplateStringsArray, ...values: string[]): string; +export function svg(strings: TemplateStringsArray, ...values: string[]): string; + +export function generateTestBundle( + build: RollupBuild, + outputConfig: OutputOptions, +): Promise<{ + output: (OutputChunk | OutputAsset)[]; + chunks: Record; + assets: Record; + assetsUnformatted: Record; +}>; + +export function createApp(structure: Record): string; +export function cleanApp(): void; diff --git a/test-utils/rollup-test-utils.js b/test-utils/rollup-test-utils.js new file mode 100644 index 0000000000..c0fc874db8 --- /dev/null +++ b/test-utils/rollup-test-utils.js @@ -0,0 +1,118 @@ +const synchronizedPrettier = require('@prettier/sync'); +const fs = require('fs'); +const path = require('path'); + +function collapseWhitespaceAll(str) { + return ( + str && + str.replace(/[ \n\r\t\f\xA0]+/g, spaces => { + return spaces === '\t' ? '\t' : spaces.replace(/(^|\xA0+)[^\xA0]+/g, '$1 '); + }) + ); +} + +function format(str, parser) { + return synchronizedPrettier.format(str, { parser, semi: true, singleQuote: true }); +} + +function merge(strings, ...values) { + return strings.reduce((acc, str, i) => acc + str + (values[i] || ''), ''); +} + +const extnameToFormatter = { + '.html': str => format(collapseWhitespaceAll(str), 'html'), + '.css': str => format(str, 'css'), + '.js': str => format(str, 'typescript'), + '.json': str => format(str, 'json'), + '.svg': str => format(collapseWhitespaceAll(str), 'html'), +}; + +function getFormatterFromFilename(name) { + return extnameToFormatter[path.extname(name)]; +} + +const html = (strings, ...values) => extnameToFormatter['.html'](merge(strings, ...values)); + +const css = (strings, ...values) => extnameToFormatter['.css'](merge(strings, ...values)); + +const js = (strings, ...values) => extnameToFormatter['.js'](merge(strings, ...values)); + +const svg = (strings, ...values) => extnameToFormatter['.svg'](merge(strings, ...values)); + +async function generateTestBundle(build, outputConfig) { + const { output } = await build.generate(outputConfig); + const chunks = {}; + const assets = {}; + const assetsUnformatted = {}; + + for (const file of output) { + const filename = file.fileName; + const formatter = getFormatterFromFilename(filename); + if (file.type === 'chunk') { + chunks[filename] = formatter ? formatter(file.code) : file.code; + } else if (file.type === 'asset') { + let code = file.source; + let codeUnformatted = file.source; + if (Buffer.isBuffer(code)) { + code = code.toString('utf8'); + codeUnformatted = codeUnformatted.toString('utf8'); + } + if (typeof code === 'string' && formatter) { + code = formatter(code); + } + assets[filename] = code; + assetsUnformatted[filename] = codeUnformatted; + } + } + + return { output, chunks, assets, assetsUnformatted }; +} + +let tmpDirs = []; + +function createApp(structure) { + const timestamp = Date.now(); + const randomId = Math.random().toString(36).substring(2, 8); + const rootDir = path.join(process.cwd(), `.tmp/app-${timestamp}-${randomId}`); + if (!fs.existsSync(rootDir)) { + fs.mkdirSync(rootDir, { recursive: true }); + } + tmpDirs.push(rootDir); + + Object.keys(structure).forEach(filePath => { + const fullPath = path.join(rootDir, filePath); + const isDir = fullPath.endsWith(path.sep); + const dir = isDir ? fullPath.slice(0, -1) : path.dirname(fullPath); + if (!fs.existsSync(dir)) { + fs.mkdirSync(dir, { recursive: true }); + } + if (!isDir && !fs.existsSync(fullPath)) { + const content = structure[filePath]; + const contentForWrite = + typeof content === 'object' && !(content instanceof Buffer) + ? JSON.stringify(content) + : content; + fs.writeFileSync(fullPath, contentForWrite); + } + }); + return rootDir; +} + +function cleanApp() { + for (const dir of tmpDirs) { + if (fs.existsSync(dir)) { + fs.rmSync(dir, { recursive: true }); + } + } + tmpDirs = []; +} + +module.exports = { + html, + css, + js, + svg, + generateTestBundle, + createApp, + cleanApp, +};