fix: only inject entry scripts as <script> (#46)

Author: danielroe

.github/workflows/ci.yml

@@ -22,4 +22,5 @@ jobs:
       - run: pnpm lint
       - run: pnpm build
       - run: pnpm vitest --coverage
+      - run: pnpm tsc --noEmit
       - uses: codecov/codecov-action@v3

src/runtime.ts

@@ -94,7 +94,10 @@ export function getModuleDependencies (id: string, rendererContext: RendererCont
 
   // Add to scripts + preload
   if (meta.file) {
-    dependencies.scripts[id] = dependencies.preload[id] = rendererContext.manifest[id]
+    dependencies.preload[id] = meta
+    if (meta.isEntry || meta.sideEffects) {
+      dependencies.scripts[id] = meta
+    }
   }
 
   // Add styles + preload

src/types.ts

@@ -6,6 +6,7 @@ export interface ResourceMeta {
   assets?: string[]
   isEntry?: boolean
   isDynamicEntry?: boolean
+  sideEffects?: boolean
   imports?: string[]
   dynamicImports?: string[]
   // Augmentation for vue-bundle-renderer

src/webpack.ts

@@ -64,6 +64,7 @@ export function normalizeWebpackManifest (manifest: WebpackClientManifest): Mani
         throw new Error(`Invalid manifest - async module not in \`all\`: ${outfile}`)
       }
       clientManifest[identifier].isDynamicEntry = true
+      clientManifest[identifier].sideEffects = true
       clientManifest[first].dynamicImports!.push(identifier)
     } else if (first) {
       // Add assets (CSS/JS) as dynamic imports to first entrypoints

test/compat.test.ts

@@ -9,7 +9,7 @@ import webpackManifest from './fixtures/webpack-manifest.json'
 
 describe('renderer with vite manifest', () => {
   const getRenderer = async () => {
-    const renderer = createRenderer(() => { }, { manifest: normalizeViteManifest(viteManifest), renderToString: () => '' })
+    const renderer = createRenderer(() => {}, { manifest: normalizeViteManifest(viteManifest), renderToString: () => '' })
     return await renderer.renderToString({
       modules: new Set([
         'app.vue',
@@ -23,8 +23,7 @@ describe('renderer with vite manifest', () => {
     const { renderScripts } = await getRenderer()
     const result = renderScripts().split('</script>').slice(0, -1).map(s => `${s}</script>`).sort()
     expect(result).to.deep.equal([
-      '<script type="module" src="/entry.mjs" crossorigin></script>',
-      '<script type="module" src="/index.mjs" crossorigin></script>'
+      '<script type="module" src="/entry.mjs" crossorigin></script>'
     ])
   })
   it('renders styles correctly', async () => {
@@ -55,7 +54,7 @@ describe('renderer with webpack manifest', () => {
     for (const entry in manifest) {
       manifest[entry].module = false
     }
-    const renderer = createRenderer(() => { }, { manifest, buildAssetsURL: r => joinURL(webpackManifest.publicPath, r), renderToString: () => '' })
+    const renderer = createRenderer(() => {}, { manifest, buildAssetsURL: r => joinURL(webpackManifest.publicPath, r), renderToString: () => '' })
     return await renderer.renderToString({
       _registeredComponents: new Set([
         '4d87aad8',

test/dependencies.test.ts

@@ -19,8 +19,8 @@ describe('dependencies', () => {
     expect(Object.values(prefetch).map(i => i.file)).toMatchInlineSnapshot(`
       [
         "entry.png",
-        "index.mjs",
         "index.css",
+        "index.mjs",
       ]
     `)
     expect(Object.values(preload).map(i => i.file)).toMatchInlineSnapshot(`
@@ -50,10 +50,10 @@ describe('dependencies', () => {
     expect(Object.values(prefetch).map(i => i.file)).toMatchInlineSnapshot(`
       [
         "entry.png",
-        "index.mjs",
         "index.css",
-        "lazy-component.mjs",
+        "index.mjs",
         "lazy-component.css",
+        "lazy-component.mjs",
       ]
     `)
     expect(Object.values(preload).map(i => i.file)).toMatchInlineSnapshot(`
@@ -68,7 +68,6 @@ describe('dependencies', () => {
     expect(Object.values(scripts).map(i => i.file)).toMatchInlineSnapshot(`
       [
         "entry.mjs",
-        "about.mjs",
       ]
     `)
     expect(Object.values(styles).map(i => i.file)).toMatchInlineSnapshot(`

test/manifest.test.ts

@@ -64,12 +64,14 @@ describe('webpack manifest', () => {
         resourceType: 'script',
         file: 'pages/another.js',
         isDynamicEntry: true,
+        sideEffects: true,
         module: true
       },
       '_pages/index.js': {
         resourceType: 'script',
         file: 'pages/index.js',
         isDynamicEntry: true,
+        sideEffects: true,
         module: true
       },
       '_runtime.js': {

test/renderer.test.ts

@@ -27,7 +27,6 @@ describe('renderer', () => {
     expect(result).toMatchInlineSnapshot(`
       [
         "<script type=\\"module\\" src=\\"/assets/entry.mjs\\" crossorigin></script>",
-        "<script type=\\"module\\" src=\\"/assets/index.mjs\\" crossorigin></script>",
       ]
     `)
   })

test/types.test.ts

@@ -7,6 +7,6 @@ import type { Manifest, ResourceMeta } from '../src/types'
 describe('manifest', () => {
   it('matches vite types', () => {
     expectTypeOf<ViteManifest>().toMatchTypeOf<Manifest>()
-    expectTypeOf<ViteManifest>().toEqualTypeOf<Record<string, Omit<ResourceMeta, 'resourceType' | 'module' | 'mimeType'>>>()
+    expectTypeOf<ViteManifest>().toEqualTypeOf<Record<string, Omit<ResourceMeta, 'resourceType' | 'module' | 'mimeType' | 'sideEffects'>>>()
   })
 })