refactor!: move resource parsing -> manifest stage and expose /runtime export (#33)

Author: danielroe

README.md

@@ -22,19 +22,25 @@ pnpm add vue-bundle-renderer
 ### `createRenderer`
 
 ```ts
-import { createRenderer } from 'vue-bundle-renderer'
+import { createRenderer } from 'vue-bundle-renderer/runtime'
 
-declare function createRenderer(createApp:, renderOptions: RenderOptions)
+declare function createRenderer(createApp, renderOptions: RenderOptions)
 ```
 
-### `normalizeClientManifest`
+### `normalizeViteManifest`
 
-If using a webpack manifest, you should normalize it with this function before passing it to `createRenderer`.
+```ts
+import { normalizeViteManifest } from 'vue-bundle-renderer'
+
+declare function normalizeViteManifest(manifest: ViteManifest)
+```
+
+### `normalizeWebpackManifest`
 
 ```ts
-import { normalizeClientManifest } from 'vue-bundle-renderer/legacy'
+import { normalizeWebpackManifest } from 'vue-bundle-renderer'
 
-declare function normalizeClientManifest(manifest: ClientManifest | LegacyClientManifest)
+declare function normalizeWebpackManifest(manifest: ViteManifest)
 ```
 
 ## Credits

legacy.d.ts

@@ -9,25 +9,25 @@
       "require": "./dist/index.cjs",
       "import": "./dist/index.mjs"
     },
-    "./legacy": {
-      "require": "./dist/legacy.cjs",
-      "import": "./dist/legacy.mjs"
+    "./runtime": {
+      "require": "./dist/runtime.cjs",
+      "import": "./dist/runtime.mjs"
     }
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "legacy.d.ts"
+    "runtime.d.ts"
   ],
   "scripts": {
     "build": "unbuild",
     "dev": "vitest",
     "lint": "eslint --ext .ts src",
     "prerelease": "pnpm test && pnpm build && standard-version -p && git push --follow-tags && pnpm publish --tag prerelease",
     "release": "pnpm test && pnpm build && standard-version && git push --follow-tags && pnpm publish",
-    "test": "pnpm lint && pnpm vitest run --coverage"
+    "test": "pnpm lint && pnpm vitest run --coverage && tsc --noEmit"
   },
   "dependencies": {
     "ufo": "^0.8.3"
@@ -36,6 +36,7 @@
     "@nuxtjs/eslint-config-typescript": "latest",
     "c8": "^7.12.0",
     "eslint": "latest",
+    "expect-type": "^0.13.0",
     "standard-version": "latest",
     "typescript": "latest",
     "unbuild": "latest",

package.json

@@ -0,0 +1 @@
+export * from './dist/runtime'

pnpm-lock.yaml

@@ -1 +1,9 @@
-export * from './renderer'
+import { Manifest } from './manifest'
+
+export { normalizeViteManifest } from './vite'
+export { normalizeWebpackManifest } from './webpack'
+export type { Manifest, ResourceMeta } from './manifest'
+
+export function defineManifest (manifest: Manifest): Manifest {
+  return manifest
+}

runtime.d.ts

@@ -0,0 +1,20 @@
+export interface ResourceMeta {
+  // https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/manifest.ts#L8-L19
+  src?: string
+  file: string
+  css?: string[]
+  assets?: string[]
+  isEntry?: boolean
+  isDynamicEntry?: boolean
+  imports?: string[]
+  dynamicImports?: string[]
+  // Augmentation for vue-bundle-renderer
+  module?: boolean
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#what_types_of_content_can_be_preloaded
+  resourceType?: 'audio' | 'document' | 'embed' | 'fetch' | 'font' | 'image' | 'object' | 'script' | 'style' | 'track' | 'worker' | 'video'
+  mimeType?: string
+}
+
+export interface Manifest {
+  [key: string]: ResourceMeta
+}

src/index.ts

@@ -1,13 +1,12 @@
-import type { Manifest, ManifestChunk } from 'vite'
 import { withLeadingSlash } from 'ufo'
-import { renderLinkToString, renderLinkToHeader, renderScriptToString, parseResource } from './utils'
-import type { LinkAttributes, ParsedResource } from './utils'
+import type { Manifest, ResourceMeta } from './manifest'
+import { LinkAttributes, renderLinkToHeader, renderLinkToString, renderScriptToString } from './runtime/utils'
 
 export interface ModuleDependencies {
-  scripts: Record<string, ParsedResource>
-  styles: Record<string, ParsedResource>
-  preload: Record<string, ParsedResource>
-  prefetch: Record<string, ParsedResource>
+  scripts: Record<string, ResourceMeta>
+  styles: Record<string, ResourceMeta>
+  preload: Record<string, ResourceMeta>
+  prefetch: Record<string, ResourceMeta>
 }
 
 export interface SSRContext {
@@ -24,22 +23,21 @@ export interface SSRContext {
 }
 
 export interface RenderOptions {
-  shouldPrefetch?: (resource: ParsedResource) => boolean
-  shouldPreload?: (resource: ParsedResource) => boolean
+  shouldPrefetch?: (resource: ResourceMeta) => boolean
+  shouldPreload?: (resource: ResourceMeta) => boolean
   buildAssetsURL?: (id: string) => string
   manifest: Manifest
 }
 
 export interface RendererContext extends Required<RenderOptions> {
   _dependencies: Record<string, ModuleDependencies>
   _dependencySets: Record<string, ModuleDependencies>
-  _parsedResources: Record<string, ParsedResource>
   _entrypoints: string[]
   updateManifest: (manifest: Manifest) => void
 }
 
 const defaultShouldPrefetch = () => true
-const defaultShouldPreload = (resource: ParsedResource) => ['module', 'script', 'style'].includes(resource.asType || '')
+const defaultShouldPreload = (resource: ResourceMeta) => ['module', 'script', 'style'].includes(resource.resourceType || '')
 
 export function createRendererContext ({ manifest, buildAssetsURL, shouldPrefetch, shouldPreload }: RenderOptions): RendererContext {
   const ctx: RendererContext = {
@@ -53,16 +51,14 @@ export function createRendererContext ({ manifest, buildAssetsURL, shouldPrefetc
     // Internal cache
     _dependencies: undefined!,
     _dependencySets: undefined!,
-    _parsedResources: undefined!,
     _entrypoints: undefined!
   }
 
   function updateManifest (manifest: Manifest) {
-    const manifestEntries = Object.entries(manifest) as [string, ManifestChunk][]
+    const manifestEntries = Object.entries(manifest) as [string, ResourceMeta][]
     ctx.manifest = manifest
     ctx._dependencies = {}
     ctx._dependencySets = {}
-    ctx._parsedResources = {}
     ctx._entrypoints = manifestEntries.filter(e => e[1].isEntry).map(([module]) => module)
   }
 
@@ -92,16 +88,16 @@ export function getModuleDependencies (id: string, rendererContext: RendererCont
 
   // Add to scripts + preload
   if (meta.file) {
-    dependencies.scripts[id] = dependencies.preload[id] = rendererContext._parsedResources[meta.file] || parseResource(meta.file)
+    dependencies.scripts[id] = dependencies.preload[id] = rendererContext.manifest[id]
   }
 
   // Add styles + preload
   for (const css of meta.css || []) {
-    dependencies.styles[css] = dependencies.preload[css] = dependencies.prefetch[css] = rendererContext._parsedResources[css] || parseResource(css)
+    dependencies.styles[css] = dependencies.preload[css] = dependencies.prefetch[css] = rendererContext.manifest[css]
   }
   // Add assets as preload
   for (const asset of meta.assets || []) {
-    dependencies.preload[asset] = dependencies.prefetch[asset] = rendererContext._parsedResources[asset] || parseResource(asset)
+    dependencies.preload[asset] = dependencies.prefetch[asset] = rendererContext.manifest[asset]
   }
   // Resolve nested dependencies and merge
   for (const depId of meta.imports || []) {
@@ -194,7 +190,7 @@ export function getRequestDependencies (ssrContext: SSRContext, rendererContext:
 export function renderStyles (ssrContext: SSRContext, rendererContext: RendererContext): string {
   const { styles } = getRequestDependencies(ssrContext, rendererContext)
   return Object.values(styles).map(resource =>
-    renderLinkToString({ rel: 'stylesheet', href: rendererContext.buildAssetsURL(resource.path) })
+    renderLinkToString({ rel: 'stylesheet', href: rendererContext.buildAssetsURL(resource.file) })
   ).join('')
 }
 
@@ -216,31 +212,31 @@ export function getPreloadLinks (ssrContext: SSRContext, rendererContext: Render
   const { preload } = getRequestDependencies(ssrContext, rendererContext)
   return Object.values(preload)
     .map(resource => ({
-      rel: resource.isModule ? 'modulepreload' : 'preload',
-      as: resource.asType,
-      type: resource.contentType,
-      crossorigin: resource.asType === 'font' || resource.isModule ? '' : null,
-      href: rendererContext.buildAssetsURL(resource.path)
+      rel: resource.module ? 'modulepreload' : 'preload',
+      as: resource.resourceType,
+      type: resource.mimeType ?? null,
+      crossorigin: resource.resourceType === 'font' || resource.module ? '' : null,
+      href: rendererContext.buildAssetsURL(resource.file)
     }))
 }
 
 export function getPrefetchLinks (ssrContext: SSRContext, rendererContext: RendererContext): LinkAttributes[] {
   const { prefetch } = getRequestDependencies(ssrContext, rendererContext)
   return Object.values(prefetch).map(resource => ({
-    rel: 'prefetch' + (resource.asType === 'style' ? ' stylesheet' : ''),
-    as: resource.asType !== 'style' ? resource.asType : null,
-    type: resource.contentType,
-    crossorigin: resource.asType === 'font' || resource.isModule ? '' : null,
-    href: rendererContext.buildAssetsURL(resource.path)
+    rel: 'prefetch' + (resource.resourceType === 'style' ? ' stylesheet' : ''),
+    as: resource.resourceType !== 'style' ? resource.resourceType : null,
+    type: resource.mimeType ?? null,
+    crossorigin: resource.resourceType === 'font' || resource.module ? '' : null,
+    href: rendererContext.buildAssetsURL(resource.file)
   }))
 }
 
 export function renderScripts (ssrContext: SSRContext, rendererContext: RendererContext): string {
   const { scripts } = getRequestDependencies(ssrContext, rendererContext)
   return Object.values(scripts).map(resource => renderScriptToString({
-    type: resource.isModule ? 'module' : null,
-    src: rendererContext.buildAssetsURL(resource.path),
-    defer: resource.isModule ? null : '',
+    type: resource.module ? 'module' : null,
+    src: rendererContext.buildAssetsURL(resource.file),
+    defer: resource.module ? null : '',
     crossorigin: ''
   })).join('')
 }

src/manifest.ts

@@ -0,0 +1,17 @@
+// Utilities to render script and link tags, and link headers
+export const renderScriptToString = (attrs: Record<string, string | null>) =>
+  `<script${Object.entries(attrs).map(([key, value]) => value === null ? '' : value ? ` ${key}="${value}"` : ' ' + key).join('')}></script>`
+
+export type LinkAttributes = {
+  rel: string | null
+  href: string
+  as?: string | null
+  type?: string | null
+  crossorigin?: '' | null
+}
+
+export const renderLinkToString = (attrs: LinkAttributes) =>
+  `<link${Object.entries(attrs).map(([key, value]) => value === null ? '' : value ? ` ${key}="${value}"` : ' ' + key).join('')}>`
+
+export const renderLinkToHeader = (attrs: LinkAttributes) =>
+  `<${attrs.href}>${Object.entries(attrs).map(([key, value]) => key === 'href' || value === null ? '' : value ? `; ${key}="${value}"` : `; ${key}`).join('')}`

src/renderer.ts renamed to src/runtime.ts

@@ -1,3 +1,5 @@
+import type { ResourceMeta } from './manifest'
+
 const IS_JS_RE = /\.[cm]?js(\?[^.]+)?$/
 const HAS_EXT_RE = /[^./]+\.[^./]+$/
 const IS_CSS_RE = /\.(css|postcss|sass|scss|less|stylus|styl)(\?[^.]+)?$/
@@ -15,21 +17,13 @@ const FONT_RE = /^woff2?|ttf|otf|eot$/
 const AUDIO_RE = /^mp3|wav|ogg|flac|aac|m4a|wma|aiff|aif|au|raw|vox|opus$/
 const VIDEO_RE = /^mp4|webm|ogv|mkv|avi|mov|flv|wmv|mpg|mpeg|m4v|3gp|3g2|mxf|rm|rmvb|asf|asx|m3u8|m3u|pls|cue|m3u8$/
 
-export interface ParsedResource {
-  path: string
-  isModule: boolean
-  // https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#what_types_of_content_can_be_preloaded
-  asType: 'audio' | 'document' | 'embed' | 'fetch' | 'font' | 'image' | 'object' | 'script' | 'style' | 'track' | 'worker' | 'video' | null
-  contentType: string | null
-}
-
 const contentTypeMap: Record<string, string> = {
   ico: 'image/x-icon',
   jpg: 'image/jpeg',
   svg: 'image/svg+xml'
 }
 
-export function getContentType (asType: ParsedResource['asType'], extension: string) {
+export function getContentType (asType: ResourceMeta['resourceType'], extension: string) {
   if (asType === 'font') {
     return `font/${extension}`
   }
@@ -38,7 +32,7 @@ export function getContentType (asType: ParsedResource['asType'], extension: str
   }
 }
 
-export function getAsType (ext: string): ParsedResource['asType'] {
+export function getAsType (ext: string): ResourceMeta['resourceType'] {
   if (ext === 'js' || ext === 'cjs' || ext === 'mjs') {
     return 'script'
   } else if (ext === 'css') {
@@ -51,37 +45,28 @@ export function getAsType (ext: string): ParsedResource['asType'] {
     return 'audio'
   } else if (VIDEO_RE.test(ext)) {
     return 'video'
-  } else {
-    // not exhausting all possibilities here, but above covers common cases
-    return null
   }
+  // not exhausting all possibilities here, but above covers common cases
 }
 
-// Utilities to render script and link tags, and link headers
-export const renderScriptToString = (attrs: Record<string, string | null>) =>
-  `<script${Object.entries(attrs).map(([key, value]) => value === null ? '' : value ? ` ${key}="${value}"` : ' ' + key).join('')}></script>`
+export const parseResource = (path: string) => {
+  const chunk: Omit<ResourceMeta, 'file'> = {}
 
-export type LinkAttributes = {
-  rel: string | null
-  href: string
-  as?: string | null
-  type?: string | null
-  crossorigin?: '' | null
-}
+  const extension = path.replace(/\?.*/, '').split('.').pop() || ''
 
-export const renderLinkToString = (attrs: LinkAttributes) =>
-  `<link${Object.entries(attrs).map(([key, value]) => value === null ? '' : value ? ` ${key}="${value}"` : ' ' + key).join('')}>`
+  const asType = getAsType(extension)
+  if (asType) {
+    chunk.resourceType = asType
 
-export const renderLinkToHeader = (attrs: LinkAttributes) =>
-  `<${attrs.href}>${Object.entries(attrs).map(([key, value]) => key === 'href' || value === null ? '' : value ? `; ${key}="${value}"` : `; ${key}`).join('')}`
+    if (asType === 'script') {
+      chunk.module = true
+    }
+  }
 
-export const parseResource = (path: string): ParsedResource => {
-  const extension = path.replace(/\?.*/, '').split('.').pop() || ''
-  const asType = getAsType(extension)
-  return {
-    path,
-    asType,
-    isModule: extension === 'mjs',
-    contentType: getContentType(asType, extension) || null
+  const contentType = getContentType(asType, extension)
+  if (contentType) {
+    chunk.mimeType = contentType
   }
+
+  return chunk
 }