diff --git a/.changeset/good-bats-flash.md b/.changeset/good-bats-flash.md new file mode 100644 index 000000000..5330f58e2 --- /dev/null +++ b/.changeset/good-bats-flash.md @@ -0,0 +1,6 @@ +--- +'@web/rollup-plugin-polyfills-loader': patch +'@web/rollup-plugin-html': patch +--- + +fix: keep order of script tags diff --git a/.gitignore b/.gitignore index 1d8925996..9a441e2a5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ ## editors /.idea /.vscode +*~ # @11ty/eleventy-cache-assets .cache @@ -29,6 +30,7 @@ dist-types .wireit /dist /packages/*/dist +/packages/*/demo/dist tsconfig.tsbuildinfo _site _site-dev diff --git a/packages/rollup-plugin-html/demo/mpa/index.html b/packages/rollup-plugin-html/demo/mpa/index.html index b423b4535..8f7662add 100644 --- a/packages/rollup-plugin-html/demo/mpa/index.html +++ b/packages/rollup-plugin-html/demo/mpa/index.html @@ -9,10 +9,10 @@

Index

  • - B + B
  • - C + C
    • - \ No newline at end of file + diff --git a/packages/rollup-plugin-html/demo/mpa/pages/page-a.html b/packages/rollup-plugin-html/demo/mpa/pages/page-a.html index 730a6fd5f..5e16ae885 100644 --- a/packages/rollup-plugin-html/demo/mpa/pages/page-a.html +++ b/packages/rollup-plugin-html/demo/mpa/pages/page-a.html @@ -9,11 +9,11 @@

    Page A

  • - B + B
  • - C + C
    • diff --git a/packages/rollup-plugin-html/demo/mpa/pages/page-b.html b/packages/rollup-plugin-html/demo/mpa/pages/page-b.html index 2a2448cbb..8d713f380 100644 --- a/packages/rollup-plugin-html/demo/mpa/pages/page-b.html +++ b/packages/rollup-plugin-html/demo/mpa/pages/page-b.html @@ -9,11 +9,11 @@

    Page B

  • - B + B
  • - C + C
    • diff --git a/packages/rollup-plugin-html/demo/mpa/pages/page-c.html b/packages/rollup-plugin-html/demo/mpa/pages/page-c.html index 13ce6a160..1244cccb5 100644 --- a/packages/rollup-plugin-html/demo/mpa/pages/page-c.html +++ b/packages/rollup-plugin-html/demo/mpa/pages/page-c.html @@ -9,11 +9,11 @@

    Page C

  • - B + B
  • - C + C
    • diff --git a/packages/rollup-plugin-html/src/input/extract/extractModules.ts b/packages/rollup-plugin-html/src/input/extract/extractModules.ts index aec82e009..1c34f40ab 100644 --- a/packages/rollup-plugin-html/src/input/extract/extractModules.ts +++ b/packages/rollup-plugin-html/src/input/extract/extractModules.ts @@ -59,6 +59,10 @@ export function extractModules(params: ExtractModulesParams) { attributes, code, }); + moduleImports.push({ + importPath, + attributes, + }); } remove(scriptNode); } else { diff --git a/packages/rollup-plugin-html/src/input/getInputData.ts b/packages/rollup-plugin-html/src/input/getInputData.ts index 25d3a02e6..1371994e6 100644 --- a/packages/rollup-plugin-html/src/input/getInputData.ts +++ b/packages/rollup-plugin-html/src/input/getInputData.ts @@ -49,7 +49,7 @@ function createInputData(params: CreateInputDataParams): InputData { html: result.htmlWithoutModules, name, inlineModules: result.inlineModules, - moduleImports: [...result.moduleImports, ...result.inlineModules], + moduleImports: result.moduleImports, assets: result.assets, filePath, }; diff --git a/packages/rollup-plugin-html/src/output/getEntrypointBundles.ts b/packages/rollup-plugin-html/src/output/getEntrypointBundles.ts index 12c1bbb5c..1afd99241 100644 --- a/packages/rollup-plugin-html/src/output/getEntrypointBundles.ts +++ b/packages/rollup-plugin-html/src/output/getEntrypointBundles.ts @@ -53,6 +53,10 @@ interface Entrypoint { attributes?: Attribute[]; } +interface EntrypointsUnsorted { + [key: string]: Entrypoint; +} + export function getEntrypointBundles(params: GetEntrypointBundlesParams) { const { pluginOptions, generatedBundles, inputModuleIds, outputDir, htmlFileName } = params; const entrypointBundles: Record = {}; @@ -63,6 +67,7 @@ export function getEntrypointBundles(params: GetEntrypointBundlesParams) { } const entrypoints: Entrypoint[] = []; + const entrypointsUnsorted: EntrypointsUnsorted = {}; for (const chunkOrAsset of Object.values(bundle)) { if (chunkOrAsset.type === 'chunk') { const chunk = chunkOrAsset; @@ -76,11 +81,21 @@ export function getEntrypointBundles(params: GetEntrypointBundlesParams) { htmlFileName, fileName: chunkOrAsset.fileName, }); - entrypoints.push({ importPath, chunk: chunkOrAsset, attributes: found.attributes }); + entrypointsUnsorted[chunk.facadeModuleId] = { + importPath, + chunk: chunkOrAsset, + attributes: found.attributes, + }; } } } } + + for (const mod of inputModuleIds) { + if (!entrypointsUnsorted[mod.importPath]) continue; + entrypoints.push(entrypointsUnsorted[mod.importPath]); + } + entrypointBundles[name] = { name, options, bundle, entrypoints }; } 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 5a2250b62..f04993250 100644 --- a/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts +++ b/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts @@ -195,6 +195,36 @@ describe('rollup-plugin-html', () => { ); }); + it('resolves modules in original order', async () => { + const config = { + plugins: [ + rollupPluginHTML({ + rootDir, + input: { + name: 'index.html', + html: + '

    Hello world

    ' + + '' + + '', + }, + }), + ], + }; + + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + expect(output.length).to.equal(4); + const hash = '5ec680a4efbb48ae254268ab1defe610'; + const { code: appCode } = getChunk(output, `inline-module-${hash}.js`); + expect(appCode).to.include("console.log('entrypoint-a.js');"); + expect(stripNewlines(getAsset(output, 'index.html').source)).to.equal( + '

    Hello world

    ' + + `` + + '' + + '', + ); + }); + it('resolves inline module imports relative to the HTML file', async () => { const config = { plugins: [ 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 11fd545b5..76afe39f1 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 @@ -131,7 +131,7 @@ describe('extractModules()', () => { attributes: [], }, ]); - expect(moduleImports).to.eql([]); + expect(moduleImports.length).to.eql(2); expect(htmlWithoutModules).to.eql( '
    before
    after
    ', ); @@ -164,7 +164,7 @@ describe('extractModules()', () => { attributes: [], }, ]); - expect(moduleImports).to.eql([]); + expect(moduleImports.length).to.eql(2); expect(htmlWithoutModules).to.eql( '
    before
    after
    ', ); diff --git a/packages/rollup-plugin-polyfills-loader/test/snapshots/flattened.html b/packages/rollup-plugin-polyfills-loader/test/snapshots/flattened.html index d905e0568..4a6a9d1f0 100644 --- a/packages/rollup-plugin-polyfills-loader/test/snapshots/flattened.html +++ b/packages/rollup-plugin-polyfills-loader/test/snapshots/flattened.html @@ -1,7 +1,7 @@ - + + \ No newline at end of file diff --git a/packages/rollup-plugin-polyfills-loader/test/snapshots/no-polyfills.html b/packages/rollup-plugin-polyfills-loader/test/snapshots/no-polyfills.html index 509a80cca..301a09000 100644 --- a/packages/rollup-plugin-polyfills-loader/test/snapshots/no-polyfills.html +++ b/packages/rollup-plugin-polyfills-loader/test/snapshots/no-polyfills.html @@ -1,9 +1,9 @@ - + - + \ No newline at end of file diff --git a/packages/rollup-plugin-polyfills-loader/test/snapshots/non-flattened.html b/packages/rollup-plugin-polyfills-loader/test/snapshots/non-flattened.html index c98a6c868..4883fd602 100644 --- a/packages/rollup-plugin-polyfills-loader/test/snapshots/non-flattened.html +++ b/packages/rollup-plugin-polyfills-loader/test/snapshots/non-flattened.html @@ -1,7 +1,7 @@ - +