From 51b476de86dc98870ecb5ef9acda845b86badde9 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Fri, 24 Jun 2022 14:21:23 +0200
Subject: [PATCH 01/10] feat: experimental.renderBuiltAssetUrl (revised
 advanced build base options)

---
 docs/guide/build.md                           |  49 ++---
 packages/plugin-legacy/src/index.ts           |  72 +++++---
 packages/vite/src/node/build.ts               | 172 ++++++++----------
 packages/vite/src/node/config.ts              |  57 ++----
 packages/vite/src/node/index.ts               |   6 +-
 packages/vite/src/node/plugins/asset.ts       |  46 +++--
 packages/vite/src/node/plugins/css.ts         |  47 +++--
 packages/vite/src/node/plugins/html.ts        | 111 ++++++-----
 .../src/node/plugins/importAnalysisBuild.ts   |   9 +-
 packages/vite/src/node/plugins/worker.ts      |  56 +++---
 playground/assets/package.json                |   6 +-
 playground/assets/vite.config-runtime-base.js |  30 +--
 12 files changed, 318 insertions(+), 343 deletions(-)

diff --git a/docs/guide/build.md b/docs/guide/build.md
index abf852479b6321..9813bbbd7011a6 100644
--- a/docs/guide/build.md
+++ b/docs/guide/build.md
@@ -197,45 +197,34 @@ A user may choose to deploy in three different paths:
 - The generated hashed assets (JS, CSS, and other file types like images)
 - The copied [public files](assets.md#the-public-directory)
 
-A single static [base](#public-base-path) isn't enough in these scenarios. Vite provides experimental support for advanced base options during build, using `experimental.buildAdvancedBaseOptions`.
+A single static [base](#public-base-path) isn't enough in these scenarios. Vite provides experimental support for advanced base options during build, using `experimental.renderBuiltAssetUrl`.
 
 ```js
-  experimental: {
-    buildAdvancedBaseOptions: {
-      // Same as base: './'
-      // type: boolean, default: false
-      relative: true
-      // Static base
-      // type: string, default: undefined
-      url: 'https://cdn.domain.com/'
-      // Dynamic base to be used for paths inside JS
-      // type: (url: string) => string, default: undefined
-      runtime: (url: string) => `window.__toCdnUrl(${url})`
-    },
+experimental: {
+  renderBuiltAssetUrl: (filename: string, importer: string) => {
+    if (path.extname(importer) === '.js') {
+      return { runtime: `window.__toCdnUrl(${JSON.stringify(filename)})` }
+    } else {
+      return { relative: true }
+    }
   }
+}
 ```
 
-When `runtime` is defined, it will be used for hashed assets and public files paths inside JS assets. Inside CSS and HTML generated files, paths will use `url` if defined or fallback to `config.base`.
-
-If `relative` is true and `url` is defined, relative paths will be prefered for assets inside the same group (for example a hashed image referenced from a JS file). And `url` will be used for the paths in HTML entries and for paths between different groups (a public file referenced from a CSS file).
-
-If the hashed assets and public files aren't deployed together, options for each group can be defined independently:
+If the hashed assets and public files aren't deployed together, options for each group can be defined independently using asset `type` included in the third `context` param given to the function.
 
 ```js
   experimental: {
-    buildAdvancedBaseOptions: {
-      assets: {
-        relative: true
-        url: 'https://cdn.domain.com/assets',
-        runtime: (url: string) => `window.__assetsPath(${url})`
-      },
-      public: {
-        relative: false
-        url: 'https://www.domain.com/',
-        runtime: (url: string) => `window.__publicPath + ${url}`
+    renderBuiltAssetUrl(filename: string, importer: string, { type: 'public' | 'asset' }) {
+      if (type === 'public') {
+        return 'https://www.domain.com/' + filename
+      }
+      else if (path.extname(importer) === '.js') {
+        return { runtime: `window.__assetsPath(${JSON.stringify(filename)})` }
+      }
+      else {
+        return 'https://cdn.domain.com/assets/' + filename
       }
     }
   }
 ```
-
-Any option that isn't defined in the `public` or `assets` entry will be inherited from the main `buildAdvancedBaseOptions` config.
diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts
index 0f0fa668c8a502..05c49ce2dc773a 100644
--- a/packages/plugin-legacy/src/index.ts
+++ b/packages/plugin-legacy/src/index.ts
@@ -6,7 +6,6 @@ import { fileURLToPath } from 'node:url'
 import { build, normalizePath } from 'vite'
 import MagicString from 'magic-string'
 import type {
-  BuildAdvancedBaseOptions,
   BuildOptions,
   HtmlTagDescriptor,
   Plugin,
@@ -32,38 +31,65 @@ async function loadBabel() {
   return babel
 }
 
-function getBaseInHTML(
-  urlRelativePath: string,
-  baseOptions: BuildAdvancedBaseOptions,
-  config: ResolvedConfig
-) {
+// Duplicated from build.ts in Vite Core, at least while the feature is experimental
+// We should later expose this helper for other plugins to use
+export function toOutputFilePathInHtml(
+  filename: string,
+  type: 'asset' | 'public',
+  importer: string,
+  config: ResolvedConfig,
+  toRelative: (filename: string, importer: string) => string
+): string {
+  const { renderBuiltAssetUrl } = config.experimental
+  let relative = config.base === '' || config.base === './'
+  if (renderBuiltAssetUrl) {
+    const result = renderBuiltAssetUrl(filename, importer, {
+      type,
+      ssr: !!config.build.ssr
+    })
+    if (typeof result === 'object') {
+      if (result.runtime) {
+        throw new Error(
+          `{ runtime: ${
+            result.runtime
+          } } is not supported for assets in ${path.extname(
+            importer
+          )} files: ${filename}`
+        )
+      }
+      if (typeof result.relative === 'boolean') {
+        relative = true
+      }
+    } else if (result) {
+      return result
+    }
+  }
+  if (relative && !config.build.ssr) {
+    return toRelative(filename, importer)
+  } else {
+    return config.base + filename
+  }
+}
+function getBaseInHTML(urlRelativePath: string, config: ResolvedConfig) {
   // Prefer explicit URL if defined for linking to assets and public files from HTML,
   // even when base relative is specified
-  return (
-    baseOptions.url ??
-    (baseOptions.relative
-      ? path.posix.join(
-          path.posix.relative(urlRelativePath, '').slice(0, -2),
-          './'
-        )
-      : config.base)
-  )
+  return config.base === './' || config.base === ''
+    ? path.posix.join(
+        path.posix.relative(urlRelativePath, '').slice(0, -2),
+        './'
+      )
+    : config.base
 }
 
-function getAssetsBase(urlRelativePath: string, config: ResolvedConfig) {
-  return getBaseInHTML(
-    urlRelativePath,
-    config.experimental.buildAdvancedBaseOptions.assets,
-    config
-  )
-}
 function toAssetPathFromHtml(
   filename: string,
   htmlPath: string,
   config: ResolvedConfig
 ): string {
   const relativeUrlPath = normalizePath(path.relative(config.root, htmlPath))
-  return getAssetsBase(relativeUrlPath, config) + filename
+  const toRelative = (filename: string, importer: string) =>
+    getBaseInHTML(relativeUrlPath, config) + filename
+  return toOutputFilePathInHtml(filename, 'asset', htmlPath, config, toRelative)
 }
 
 // https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index 52096a476f7391..98e9bb82347fd9 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -22,7 +22,7 @@ import type { RollupCommonJSOptions } from 'types/commonjs'
 import type { RollupDynamicImportVarsOptions } from 'types/dynamicImportVars'
 import type { TransformOptions } from 'esbuild'
 import type { InlineConfig, ResolvedConfig } from './config'
-import { isDepsOptimizerEnabled, resolveBaseUrl, resolveConfig } from './config'
+import { isDepsOptimizerEnabled, resolveConfig } from './config'
 import { buildReporterPlugin } from './plugins/reporter'
 import { buildEsbuildPlugin } from './plugins/esbuild'
 import { terserPlugin } from './plugins/terser'
@@ -831,109 +831,83 @@ function injectSsrFlag<T extends Record<string, any>>(
   return { ...(options ?? {}), ssr: true } as T & { ssr: boolean }
 }
 
-/*
- * If defined, these functions will be called for assets and public files
- * paths which are generated in JS assets. Examples:
- *
- *   assets: { runtime: (url: string) => `window.__assetsPath(${url})` }
- *   public: { runtime: (url: string) => `window.__publicPath + ${url}` }
- *
- * For assets and public files paths in CSS or HTML, the corresponding
- * `assets.url` and `public.url` base urls or global base will be used.
- *
- * When using relative base, the assets.runtime function isn't needed as
- * all the asset paths will be computed using import.meta.url
- * The public.runtime function is still useful if the public files aren't
- * deployed in the same base as the hashed assets
- */
+export type RenderBuiltAssetUrl = (
+  filename: string,
+  importer: string,
+  type: { type: 'asset' | 'public'; ssr: boolean }
+) => string | { relative?: boolean; runtime?: string } | undefined
 
-export interface BuildAdvancedBaseOptions {
-  /**
-   * Relative base. If true, every generated URL is relative and the dist folder
-   * can be deployed to any base or subdomain. Use this option when the base
-   * is unkown at build time
-   * @default false
-   */
-  relative?: boolean
-  url?: string
-  runtime?: (filename: string) => string
-}
-
-export type BuildAdvancedBaseConfig = BuildAdvancedBaseOptions & {
-  /**
-   * Base for assets and public files in case they should be different
-   */
-  assets?: string | BuildAdvancedBaseOptions
-  public?: string | BuildAdvancedBaseOptions
-}
-
-export type ResolvedBuildAdvancedBaseConfig = BuildAdvancedBaseOptions & {
-  assets: BuildAdvancedBaseOptions
-  public: BuildAdvancedBaseOptions
-}
-
-/**
- * Resolve base. Note that some users use Vite to build for non-web targets like
- * electron or expects to deploy
- */
-export function resolveBuildAdvancedBaseConfig(
-  baseConfig: BuildAdvancedBaseConfig | undefined,
-  resolvedBase: string,
-  isBuild: boolean,
-  logger: Logger
-): ResolvedBuildAdvancedBaseConfig {
-  baseConfig ??= {}
-
-  const relativeBaseShortcut = resolvedBase === '' || resolvedBase === './'
-
-  const resolved = {
-    relative: baseConfig?.relative ?? relativeBaseShortcut,
-    url: baseConfig?.url
-      ? resolveBaseUrl(
-          baseConfig?.url,
-          isBuild,
-          logger,
-          'experimental.buildAdvancedBaseOptions.url'
-        )
-      : undefined,
-    runtime: baseConfig?.runtime
+export function toOutputFilePathInString(
+  filename: string,
+  type: 'asset' | 'public',
+  importer: string,
+  config: ResolvedConfig,
+  toRelative: (
+    filename: string,
+    importer: string
+  ) => string | { runtime: string }
+): string | { runtime: string } {
+  const { renderBuiltAssetUrl } = config.experimental
+  let relative = config.base === '' || config.base === './'
+  if (renderBuiltAssetUrl) {
+    const result = renderBuiltAssetUrl(filename, importer, {
+      type,
+      ssr: !!config.build.ssr
+    })
+    if (typeof result === 'object') {
+      if (result.runtime) {
+        return { runtime: result.runtime }
+      }
+      if (typeof result.relative === 'boolean') {
+        relative = true
+      }
+    } else if (result) {
+      return result
+    }
   }
-
-  return {
-    ...resolved,
-    assets: resolveBuildBaseSpecificOptions(
-      baseConfig?.assets,
-      resolved,
-      isBuild,
-      logger,
-      'assets'
-    ),
-    public: resolveBuildBaseSpecificOptions(
-      baseConfig?.public,
-      resolved,
-      isBuild,
-      logger,
-      'public'
-    )
+  if (relative && !config.build.ssr) {
+    return toRelative(filename, importer)
   }
+  return config.base + filename
 }
 
-function resolveBuildBaseSpecificOptions(
-  options: BuildAdvancedBaseOptions | string | undefined,
-  parent: BuildAdvancedBaseOptions,
-  isBuild: boolean,
-  logger: Logger,
-  optionName: string
-): BuildAdvancedBaseOptions {
-  const urlConfigPath = `experimental.buildAdvancedBaseOptions.${optionName}.url`
-  if (typeof options === 'string') {
-    options = { url: options }
+export function toOutputFilePathWithoutRuntime(
+  filename: string,
+  type: 'asset' | 'public',
+  importer: string,
+  config: ResolvedConfig,
+  toRelative: (filename: string, importer: string) => string
+): string {
+  const { renderBuiltAssetUrl } = config.experimental
+  let relative = config.base === '' || config.base === './'
+  if (renderBuiltAssetUrl) {
+    const result = renderBuiltAssetUrl(filename, importer, {
+      type,
+      ssr: !!config.build.ssr
+    })
+    if (typeof result === 'object') {
+      if (result.runtime) {
+        throw new Error(
+          `{ runtime: ${
+            result.runtime
+          } } is not supported for assets in ${path.extname(
+            importer
+          )} files: ${filename}`
+        )
+      }
+      if (typeof result.relative === 'boolean') {
+        relative = true
+      }
+    } else if (result) {
+      return result
+    }
   }
-  return {
-    relative: options?.relative ?? parent.relative,
-    url: options?.url
-      ? resolveBaseUrl(options?.url, isBuild, logger, urlConfigPath)
-      : parent.url,
-    runtime: options?.runtime ?? parent.runtime
+  if (relative && !config.build.ssr) {
+    return toRelative(filename, importer)
+  } else {
+    return config.base + filename
   }
 }
+
+export const toOutputFilePathInCss = toOutputFilePathWithoutRuntime
+export const toOutputFilePathInHtml = toOutputFilePathWithoutRuntime
diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
index 06b222736667c8..dfd43aa5c9f010 100644
--- a/packages/vite/src/node/config.ts
+++ b/packages/vite/src/node/config.ts
@@ -11,12 +11,11 @@ import type { Plugin as ESBuildPlugin } from 'esbuild'
 import type { RollupOptions } from 'rollup'
 import type { Plugin } from './plugin'
 import type {
-  BuildAdvancedBaseConfig,
+  RenderBuiltAssetUrl,
   BuildOptions,
-  ResolvedBuildAdvancedBaseConfig,
   ResolvedBuildOptions
 } from './build'
-import { resolveBuildAdvancedBaseConfig, resolveBuildOptions } from './build'
+import { resolveBuildOptions } from './build'
 import type { ResolvedServerOptions, ServerOptions } from './server'
 import { resolveServerOptions } from './server'
 import type { PreviewOptions, ResolvedPreviewOptions } from './preview'
@@ -53,7 +52,7 @@ import { resolveSSROptions } from './ssr'
 
 const debug = createDebugger('vite:config')
 
-export type { BuildAdvancedBaseOptions, BuildAdvancedBaseConfig } from './build'
+export type { RenderBuiltAssetUrl } from './build'
 
 // NOTE: every export in this file is re-exported from ./index.ts so it will
 // be part of the public API.
@@ -256,11 +255,11 @@ export interface ExperimentalOptions {
    */
   importGlobRestoreExtension?: boolean
   /**
-   * Build advanced base options. Allow finegrain contol over assets and public files base
+   * Allow finegrain contol over assets and public files paths
    *
    * @experimental
    */
-  buildAdvancedBaseOptions?: BuildAdvancedBaseConfig
+  renderBuiltAssetUrl?: RenderBuiltAssetUrl
   /**
    * Enables support of HMR partial accept via `import.meta.hot.acceptExports`.
    *
@@ -270,10 +269,6 @@ export interface ExperimentalOptions {
   hmrPartialAccept?: boolean
 }
 
-export type ResolvedExperimentalOptions = Required<ExperimentalOptions> & {
-  buildAdvancedBaseOptions: ResolvedBuildAdvancedBaseConfig
-}
-
 export interface LegacyOptions {
   /**
    * Revert vite dev to the v2.9 strategy. Enable esbuild based deps scanner.
@@ -345,7 +340,7 @@ export type ResolvedConfig = Readonly<
     packageCache: PackageCache
     worker: ResolveWorkerOptions
     appType: AppType
-    experimental: ResolvedExperimentalOptions
+    experimental: ExperimentalOptions
   }
 >
 
@@ -487,28 +482,12 @@ export async function resolveConfig(
 
   // During dev, we ignore relative base and fallback to '/'
   // For the SSR build, relative base isn't possible by means
-  // of import.meta.url. The user will be able to work out a setup
-  // using experimental.buildAdvancedBaseOptions
-  const base =
-    relativeBaseShortcut && (!isBuild || config.build?.ssr)
+  // of import.meta.url.
+  const resolvedBase = relativeBaseShortcut
+    ? !isBuild || config.build?.ssr
       ? '/'
-      : config.base ?? '/'
-  let resolvedBase = relativeBaseShortcut
-    ? base
-    : resolveBaseUrl(base, isBuild, logger, 'base')
-  if (
-    config.experimental?.buildAdvancedBaseOptions?.relative &&
-    config.base === undefined
-  ) {
-    resolvedBase = './'
-  }
-
-  const resolvedBuildAdvancedBaseOptions = resolveBuildAdvancedBaseConfig(
-    config.experimental?.buildAdvancedBaseOptions,
-    resolvedBase,
-    isBuild,
-    logger
-  )
+      : './'
+    : resolveBaseUrl(config.base, isBuild, logger) ?? '/'
 
   const resolvedBuildOptions = resolveBuildOptions(
     config.build,
@@ -637,8 +616,7 @@ export async function resolveConfig(
     experimental: {
       importGlobRestoreExtension: false,
       hmrPartialAccept: false,
-      ...config.experimental,
-      buildAdvancedBaseOptions: resolvedBuildAdvancedBaseOptions
+      ...config.experimental
     }
   }
 
@@ -746,14 +724,13 @@ assetFileNames isn't equal for every build.rollupOptions.output. A single patter
 export function resolveBaseUrl(
   base: UserConfig['base'] = '/',
   isBuild: boolean,
-  logger: Logger,
-  optionName: string
+  logger: Logger
 ): string {
   if (base.startsWith('.')) {
     logger.warn(
       colors.yellow(
         colors.bold(
-          `(!) invalid "${optionName}" option: ${base}. The value can only be an absolute ` +
+          `(!) invalid "base" option: ${base}. The value can only be an absolute ` +
             `URL, ./, or an empty string.`
         )
       )
@@ -773,7 +750,7 @@ export function resolveBaseUrl(
     if (!base.startsWith('/')) {
       logger.warn(
         colors.yellow(
-          colors.bold(`(!) "${optionName}" option should start with a slash.`)
+          colors.bold(`(!) "base" option should start with a slash.`)
         )
       )
       base = '/' + base
@@ -783,9 +760,7 @@ export function resolveBaseUrl(
   // ensure ending slash
   if (!base.endsWith('/')) {
     logger.warn(
-      colors.yellow(
-        colors.bold(`(!) "${optionName}" option should end with a slash.`)
-      )
+      colors.yellow(colors.bold(`(!) "base" option should end with a slash.`))
     )
     base += '/'
   }
diff --git a/packages/vite/src/node/index.ts b/packages/vite/src/node/index.ts
index 4655b4881b7650..e1a9de026ffc1e 100644
--- a/packages/vite/src/node/index.ts
+++ b/packages/vite/src/node/index.ts
@@ -23,10 +23,8 @@ export type {
   BuildOptions,
   LibraryOptions,
   LibraryFormats,
-  ResolvedBuildOptions,
-  BuildAdvancedBaseConfig,
-  ResolvedBuildAdvancedBaseConfig,
-  BuildAdvancedBaseOptions
+  RenderBuiltAssetUrl,
+  ResolvedBuildOptions
 } from './build'
 export type {
   PreviewOptions,
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index cab050cbdfa652..68ef4a2d8da13a 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -4,7 +4,7 @@ import fs, { promises as fsp } from 'node:fs'
 import * as mrmime from 'mrmime'
 import type { OutputOptions, PluginContext, PreRenderedAsset } from 'rollup'
 import MagicString from 'magic-string'
-import type { BuildAdvancedBaseOptions } from '../build'
+import { toOutputFilePathInString } from '../build'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
 import { cleanUrl, getHash, normalizePath } from '../utils'
@@ -94,20 +94,12 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       let match: RegExpExecArray | null
       let s: MagicString | undefined
 
-      const absoluteUrlPathInterpolation = (filename: string) =>
-        `"+new URL(${JSON.stringify(
-          path.posix.relative(path.dirname(chunk.fileName), filename)
-        )},import.meta.url).href+"`
-
-      const toOutputFilePathInString = (
-        filename: string,
-        base: BuildAdvancedBaseOptions
-      ) => {
-        return base.runtime
-          ? `"+${base.runtime(JSON.stringify(filename))}+"`
-          : base.relative && !config.build.ssr
-          ? absoluteUrlPathInterpolation(filename)
-          : JSON.stringify((base.url ?? config.base) + filename).slice(1, -1)
+      const toRelative = (filename: string, importer: string) => {
+        return {
+          runtime: `new URL(${JSON.stringify(
+            path.posix.relative(path.dirname(importer), filename)
+          )},import.meta.url).href`
+        }
       }
 
       // Urls added with JS using e.g.
@@ -128,9 +120,16 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
         const filename = file + postfix
         const replacement = toOutputFilePathInString(
           filename,
-          config.experimental.buildAdvancedBaseOptions.assets
+          'asset',
+          chunk.fileName,
+          config,
+          toRelative
         )
-        s.overwrite(match.index, match.index + full.length, replacement, {
+        const replacementString =
+          typeof replacement === 'string'
+            ? JSON.stringify(replacement).slice(1, -1)
+            : `"+${replacement.runtime}+"`
+        s.overwrite(match.index, match.index + full.length, replacementString, {
           contentOnly: true
         })
       }
@@ -144,9 +143,16 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
         const publicUrl = publicAssetUrlMap.get(hash)!.slice(1)
         const replacement = toOutputFilePathInString(
           publicUrl,
-          config.experimental.buildAdvancedBaseOptions.public
+          'public',
+          chunk.fileName,
+          config,
+          toRelative
         )
-        s.overwrite(match.index, match.index + full.length, replacement, {
+        const replacementString =
+          typeof replacement === 'string'
+            ? JSON.stringify(replacement).slice(1, -1)
+            : `"+${replacement.runtime}+"`
+        s.overwrite(match.index, match.index + full.length, replacementString, {
           contentOnly: true
         })
       }
@@ -341,7 +347,7 @@ export function publicFileToBuiltUrl(
   config: ResolvedConfig
 ): string {
   if (config.command !== 'build') {
-    // We don't need relative base or buildAdvancedBaseOptions support during dev
+    // We don't need relative base or renderBuiltAssetUrl support during dev
     return config.base + url.slice(1)
   }
   const hash = getHash(url)
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index a362fc124c4150..acaf59789b7725 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -24,6 +24,7 @@ import type { RawSourceMap } from '@ampproject/remapping'
 import { getCodeWithSourcemap, injectSourcesContent } from '../server/sourcemap'
 import type { ModuleNode } from '../server/moduleGraph'
 import type { ResolveFn, ViteDevServer } from '../'
+import { toOutputFilePathInCss } from '../build'
 import { CLIENT_PUBLIC_PATH, SPECIAL_QUERY_RE } from '../constants'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
@@ -458,27 +459,32 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       // resolve asset URL placeholders to their built file URLs
       function resolveAssetUrlsInCss(chunkCSS: string, cssAssetName: string) {
         const encodedPublicUrls = encodePublicUrlsInCSS(config)
-        const { assets: assetsBase, public: publicBase } =
-          config.experimental.buildAdvancedBaseOptions
+
+        const relative = config.base === './' || config.base === ''
         const cssAssetDirname =
-          encodedPublicUrls || assetsBase.relative
+          encodedPublicUrls || relative
             ? getCssAssetDirname(cssAssetName)
             : undefined
 
+        const toRelative = (filename: string, importer: string) => {
+          // relative base + extracted CSS
+          const relativePath = path.posix.relative(cssAssetDirname!, filename)
+          return relativePath.startsWith('.')
+            ? relativePath
+            : './' + relativePath
+        }
+
         // replace asset url references with resolved url.
         chunkCSS = chunkCSS.replace(assetUrlRE, (_, fileHash, postfix = '') => {
           const filename = getAssetFilename(fileHash, config) + postfix
           chunk.viteMetadata.importedAssets.add(cleanUrl(filename))
-          if (assetsBase.relative && !config.build.ssr) {
-            // relative base + extracted CSS
-            const relativePath = path.posix.relative(cssAssetDirname!, filename)
-            return relativePath.startsWith('.')
-              ? relativePath
-              : './' + relativePath
-          } else {
-            // assetsBase.runtime has no effect for assets in CSS
-            return (assetsBase.url ?? config.base) + filename
-          }
+          return toOutputFilePathInCss(
+            filename,
+            'asset',
+            cssAssetName,
+            config,
+            toRelative
+          )
         })
         // resolve public URL from CSS paths
         if (encodedPublicUrls) {
@@ -487,13 +493,14 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             ''
           )
           chunkCSS = chunkCSS.replace(publicAssetUrlRE, (_, hash) => {
-            const publicUrl = publicAssetUrlMap.get(hash)!
-            if (publicBase.relative && !config.build.ssr) {
-              return relativePathToPublicFromCSS + publicUrl
-            } else {
-              // publicBase.runtime has no effect for assets in CSS
-              return (publicBase.url ?? config.base) + publicUrl.slice(1)
-            }
+            const publicUrl = publicAssetUrlMap.get(hash)!.slice(1)
+            return toOutputFilePathInCss(
+              publicUrl,
+              'public',
+              cssAssetName,
+              config,
+              () => `${relativePathToPublicFromCSS}/${publicUrl}`
+            )
           })
         }
         return chunkCSS
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 9473afc19bff8e..bc5d4d0117b4b4 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -29,7 +29,7 @@ import {
   slash
 } from '../utils'
 import type { ResolvedConfig } from '../config'
-import type { BuildAdvancedBaseOptions } from '../build'
+import { toOutputFilePathInHtml } from '../build'
 import {
   assetUrlRE,
   checkPublicFile,
@@ -239,7 +239,18 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
       if (id.endsWith('.html')) {
         const relativeUrlPath = slash(path.relative(config.root, id))
         const publicPath = `/${relativeUrlPath}`
-        const publicBase = getPublicBase(relativeUrlPath, config)
+        const publicBase = getBaseInHTML(relativeUrlPath, config)
+
+        const publicToRelative = (filename: string, importer: string) =>
+          publicBase + filename
+        const toOutputPublicFilePath = (url: string) =>
+          toOutputFilePathInHtml(
+            url.slice(1),
+            'public',
+            relativeUrlPath,
+            config,
+            publicToRelative
+          )
 
         // pre-transform
         html = await applyHtmlTransforms(html, preHooks, {
@@ -276,7 +287,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               s.overwrite(
                 src!.value!.loc.start.offset,
                 src!.value!.loc.end.offset,
-                `"${normalizePublicPath(url, publicBase)}"`,
+                `"${toOutputPublicFilePath(url)}"`,
                 { contentOnly: true }
               )
             }
@@ -358,7 +369,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
                   s.overwrite(
                     p.value.loc.start.offset,
                     p.value.loc.end.offset,
-                    `"${normalizePublicPath(url, publicBase)}"`,
+                    `"${toOutputPublicFilePath(url)}"`,
                     { contentOnly: true }
                   )
                 }
@@ -474,7 +485,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               { contentOnly: true }
             )
           } else if (checkPublicFile(url, config)) {
-            s.overwrite(start, end, normalizePublicPath(url, publicBase), {
+            s.overwrite(start, end, toOutputPublicFilePath(url), {
               contentOnly: true
             })
           }
@@ -535,7 +546,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
       const toScriptTag = (
         chunk: OutputChunk,
-        assetsBase: string,
+        toOutputPath: (filename: string) => string,
         isAsync: boolean
       ): HtmlTagDescriptor => ({
         tag: 'script',
@@ -543,25 +554,25 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           ...(isAsync ? { async: true } : {}),
           type: 'module',
           crossorigin: true,
-          src: toPublicPath(chunk.fileName, assetsBase)
+          src: toOutputPath(chunk.fileName)
         }
       })
 
       const toPreloadTag = (
         chunk: OutputChunk,
-        assetsBase: string
+        toOutputPath: (filename: string) => string
       ): HtmlTagDescriptor => ({
         tag: 'link',
         attrs: {
           rel: 'modulepreload',
           crossorigin: true,
-          href: toPublicPath(chunk.fileName, assetsBase)
+          href: toOutputPath(chunk.fileName)
         }
       })
 
       const getCssTagsForChunk = (
         chunk: OutputChunk,
-        assetsBase: string,
+        toOutputPath: (filename: string) => string,
         seen: Set<string> = new Set()
       ): HtmlTagDescriptor[] => {
         const tags: HtmlTagDescriptor[] = []
@@ -570,7 +581,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           chunk.imports.forEach((file) => {
             const importee = bundle[file]
             if (importee?.type === 'chunk') {
-              tags.push(...getCssTagsForChunk(importee, assetsBase, seen))
+              tags.push(...getCssTagsForChunk(importee, toOutputPath, seen))
             }
           })
         }
@@ -582,7 +593,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               tag: 'link',
               attrs: {
                 rel: 'stylesheet',
-                href: toPublicPath(file, assetsBase)
+                href: toOutputPath(file)
               }
             })
           }
@@ -593,7 +604,20 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
       for (const [id, html] of processedHtml) {
         const relativeUrlPath = path.posix.relative(config.root, id)
-        const assetsBase = getAssetsBase(relativeUrlPath, config)
+        const assetsBase = getBaseInHTML(relativeUrlPath, config)
+        const toOutputAssetFilePath = (filename: string) => {
+          if (isExternalUrl(filename)) {
+            return filename
+          } else {
+            return toOutputFilePathInHtml(
+              filename,
+              'asset',
+              relativeUrlPath,
+              config,
+              (filename: string, importer: string) => assetsBase + filename
+            )
+          }
+        }
 
         const isAsync = isAsyncScriptMap.get(config)!.get(id)!
 
@@ -622,13 +646,15 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           // when inlined, discard entry chunk and inject <script> for everything in post-order
           const imports = getImportedChunks(chunk)
           const assetTags = canInlineEntry
-            ? imports.map((chunk) => toScriptTag(chunk, assetsBase, isAsync))
+            ? imports.map((chunk) =>
+                toScriptTag(chunk, toOutputAssetFilePath, isAsync)
+              )
             : [
-                toScriptTag(chunk, assetsBase, isAsync),
-                ...imports.map((i) => toPreloadTag(i, assetsBase))
+                toScriptTag(chunk, toOutputAssetFilePath, isAsync),
+                ...imports.map((i) => toPreloadTag(i, toOutputAssetFilePath))
               ]
 
-          assetTags.push(...getCssTagsForChunk(chunk, assetsBase))
+          assetTags.push(...getCssTagsForChunk(chunk, toOutputAssetFilePath))
 
           result = injectToHead(result, assetTags)
         }
@@ -644,7 +670,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
                 tag: 'link',
                 attrs: {
                   rel: 'stylesheet',
-                  href: toPublicPath(cssChunk.fileName, assetsBase)
+                  href: toOutputAssetFilePath(cssChunk.fileName)
                 }
               }
             ])
@@ -676,7 +702,9 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         })
         // resolve asset url references
         result = result.replace(assetUrlRE, (_, fileHash, postfix = '') => {
-          return assetsBase + getAssetFilename(fileHash, config) + postfix
+          return (
+            toOutputAssetFilePath(getAssetFilename(fileHash, config)!) + postfix
+          )
         })
 
         if (chunk && canInlineEntry) {
@@ -818,46 +846,15 @@ function isEntirelyImport(code: string) {
   return !code.replace(importRE, '').replace(commentRE, '').trim().length
 }
 
-function getBaseInHTML(
-  urlRelativePath: string,
-  baseOptions: BuildAdvancedBaseOptions,
-  config: ResolvedConfig
-) {
+function getBaseInHTML(urlRelativePath: string, config: ResolvedConfig) {
   // Prefer explicit URL if defined for linking to assets and public files from HTML,
   // even when base relative is specified
-  return (
-    baseOptions.url ??
-    (baseOptions.relative
-      ? path.posix.join(
-          path.posix.relative(urlRelativePath, '').slice(0, -2),
-          './'
-        )
-      : config.base)
-  )
-}
-
-function getPublicBase(urlRelativePath: string, config: ResolvedConfig) {
-  return getBaseInHTML(
-    urlRelativePath,
-    config.experimental.buildAdvancedBaseOptions.public,
-    config
-  )
-}
-
-function getAssetsBase(urlRelativePath: string, config: ResolvedConfig) {
-  return getBaseInHTML(
-    urlRelativePath,
-    config.experimental.buildAdvancedBaseOptions.assets,
-    config
-  )
-}
-
-function toPublicPath(filename: string, publicBase: string) {
-  return isExternalUrl(filename) ? filename : publicBase + filename
-}
-
-function normalizePublicPath(publicPath: string, publicBase: string) {
-  return publicBase + publicPath.slice(1)
+  return config.base === './' || config.base === ''
+    ? path.posix.join(
+        path.posix.relative(urlRelativePath, '').slice(0, -2),
+        './'
+      )
+    : config.base
 }
 
 const headInjectRE = /([ \t]*)<\/head>/i
diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index f29316459a22d3..331a4d2eaa7ac2 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -108,19 +108,14 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
   const isWorker = config.isWorker
   const insertPreload = !(ssr || !!config.build.lib || isWorker)
 
-  const assetsBase = config.experimental.buildAdvancedBaseOptions.assets
-  const relativePreloadUrls = !(assetsBase.url || assetsBase.runtime)
+  const relativePreloadUrls = config.base === './' || config.base === ''
 
   const scriptRel = config.build.polyfillModulePreload
     ? `'modulepreload'`
     : `(${detectScriptRel.toString()})()`
   const assetsURL = relativePreloadUrls
     ? `function(dep,importerUrl) { return new URL(dep, importerUrl).href }`
-    : `function(dep) { return ${
-        assetsBase.runtime
-          ? assetsBase.runtime('dep')
-          : `${JSON.stringify(assetsBase.url ?? config.base)}+dep`
-      }}`
+    : `function(dep) { return ${JSON.stringify(config.base)}+dep }`
   const preloadCode = `const scriptRel = ${scriptRel};const assetsURL = ${assetsURL};const seen = {};export const ${preloadMethod} = ${preload.toString()}`
 
   return {
diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 89eb18d51da0e3..3d4f1d94dafc6b 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -6,7 +6,7 @@ import type { Plugin } from '../plugin'
 import type { ViteDevServer } from '../server'
 import { ENV_ENTRY, ENV_PUBLIC_PATH } from '../constants'
 import { cleanUrl, getHash, injectQuery, parseRequest } from '../utils'
-import { onRollupWarning } from '../build'
+import { onRollupWarning, toOutputFilePathInString } from '../build'
 import { getDepsOptimizer } from '../optimizer'
 import { fileToUrl } from './asset'
 
@@ -144,6 +144,15 @@ function emitSourcemapForWorkerEntry(
   return chunk
 }
 
+// TODO:base review why we aren't using import.meta.url here
+function toStaticRelativePath(filename: string, importer: string) {
+  let outputFilepath = path.posix.relative(path.dirname(importer), filename)
+  if (!outputFilepath.startsWith('.')) {
+    outputFilepath = './' + outputFilepath
+  }
+  return outputFilepath
+}
+
 export const workerAssetUrlRE = /__VITE_WORKER_ASSET__([a-z\d]{8})__/g
 
 function encodeWorkerAssetFileName(
@@ -175,10 +184,7 @@ export async function workerFileToUrl(
     })
     workerMap.bundle.set(id, fileName)
   }
-  const assetsBase = config.experimental.buildAdvancedBaseOptions.assets
-  return assetsBase.relative || assetsBase.runtime
-    ? encodeWorkerAssetFileName(fileName, workerMap)
-    : (assetsBase.url ?? config.base) + fileName
+  return encodeWorkerAssetFileName(fileName, workerMap)
 }
 
 export function webWorkerPlugin(config: ResolvedConfig): Plugin {
@@ -327,33 +333,29 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
         // Replace "__VITE_WORKER_ASSET__5aa0ddc0__" using relative paths
         const workerMap = workerCache.get(config.mainConfig || config)!
         const { fileNameHash } = workerMap
-        const assetsBase = config.experimental.buildAdvancedBaseOptions.assets
 
         while ((match = workerAssetUrlRE.exec(code))) {
           const [full, hash] = match
           const filename = fileNameHash.get(hash)!
-          let replacement: string
-          if (assetsBase.runtime) {
-            replacement = `"+${assetsBase.runtime(JSON.stringify(filename))}+"`
-          } else {
-            // Relative base
-            let outputFilepath: string
-            if (assetsBase.relative && !config.build.ssr) {
-              outputFilepath = path.posix.relative(
-                path.dirname(chunk.fileName),
-                filename
-              )
-              if (!outputFilepath.startsWith('.')) {
-                outputFilepath = './' + outputFilepath
-              }
-            } else {
-              outputFilepath = (assetsBase.url ?? config.base) + filename
+          const replacement = toOutputFilePathInString(
+            filename,
+            'asset',
+            chunk.fileName,
+            config,
+            toStaticRelativePath
+          )
+          const replacementString =
+            typeof replacement === 'string'
+              ? JSON.stringify(replacement).slice(1, -1)
+              : `"+${replacement.runtime}+"`
+          s.overwrite(
+            match.index,
+            match.index + full.length,
+            replacementString,
+            {
+              contentOnly: true
             }
-            replacement = JSON.stringify(outputFilepath).slice(1, -1)
-          }
-          s.overwrite(match.index, match.index + full.length, replacement, {
-            contentOnly: true
-          })
+          )
         }
 
         // TODO: check if this should be removed
diff --git a/playground/assets/package.json b/playground/assets/package.json
index 71dafed5f6dfb1..d3b685dbed678b 100644
--- a/playground/assets/package.json
+++ b/playground/assets/package.json
@@ -10,8 +10,8 @@
     "dev:relative-base": "vite --config ./vite.config-relative-base.js dev",
     "build:relative-base": "vite --config ./vite.config-relative-base.js build",
     "preview:relative-base": "vite --config ./vite.config-relative-base.js preview",
-    "dev:dynamic-base": "vite --config ./vite.config-dynamic-base.js dev",
-    "build:dynamic-base": "vite --config ./vite.config-dynamic-base.js build",
-    "preview:dynamic-base": "vite --config ./vite.config-dynamic-base.js preview"
+    "dev:runtime-base": "vite --config ./vite.config-runtime-base.js dev",
+    "build:runtime-base": "vite --config ./vite.config-runtime-base.js build",
+    "preview:runtime-base": "vite --config ./vite.config-runtime-base.js preview"
   }
 }
diff --git a/playground/assets/vite.config-runtime-base.js b/playground/assets/vite.config-runtime-base.js
index 03b374a5a48a20..a9b66e3e181e2e 100644
--- a/playground/assets/vite.config-runtime-base.js
+++ b/playground/assets/vite.config-runtime-base.js
@@ -1,6 +1,4 @@
-/**
- * @type {import('vite').UserConfig}
- */
+const path = require('path')
 
 const dynamicBaseAssetsCode = `
 globalThis.__toAssetUrl = url => '/' + url
@@ -8,6 +6,10 @@ globalThis.__publicBase = '/'
 `
 
 const baseConfig = require('./vite.config.js')
+
+/**
+ * @type {import('vite').UserConfig}
+ */
 module.exports = {
   ...baseConfig,
   base: './', // overwrite the original base: '/foo/'
@@ -43,15 +45,19 @@ module.exports = {
     }
   ],
   experimental: {
-    buildAdvancedBaseOptions: {
-      relative: true,
-      assets: {
-        url: '/',
-        runtime: (url) => `globalThis.__toAssetUrl(${url})`
-      },
-      public: {
-        url: '/',
-        runtime: (url) => `globalThis.__publicBase+${url}`
+    renderBuiltAssetUrl(filename, importer, { type }) {
+      if (type === 'asset') {
+        if (path.extname(importer) === '.js') {
+          return {
+            runtime: `globalThis.__toAssetUrl(${JSON.stringify(filename)})`
+          }
+        }
+      } else if (type === 'public') {
+        if (path.extname(importer) === '.js') {
+          return {
+            runtime: `globalThis.__publicBase+${JSON.stringify(filename)}`
+          }
+        }
       }
     }
   }

From 91fac85001de3e8ae5a294baf31d7289f48247dc Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Fri, 24 Jun 2022 14:57:58 +0200
Subject: [PATCH 02/10] chore: sort import

---
 packages/vite/src/node/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
index dfd43aa5c9f010..91be93cb539da7 100644
--- a/packages/vite/src/node/config.ts
+++ b/packages/vite/src/node/config.ts
@@ -11,8 +11,8 @@ import type { Plugin as ESBuildPlugin } from 'esbuild'
 import type { RollupOptions } from 'rollup'
 import type { Plugin } from './plugin'
 import type {
-  RenderBuiltAssetUrl,
   BuildOptions,
+  RenderBuiltAssetUrl,
   ResolvedBuildOptions
 } from './build'
 import { resolveBuildOptions } from './build'

From eb6eb613ef92281beba2fe10f05b4c48bd3584cc Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Fri, 24 Jun 2022 15:50:43 +0200
Subject: [PATCH 03/10] chore: update with blu corrections

---
 packages/plugin-legacy/src/index.ts | 2 +-
 packages/vite/src/node/build.ts     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts
index 05c49ce2dc773a..50fc7d0d5d054c 100644
--- a/packages/plugin-legacy/src/index.ts
+++ b/packages/plugin-legacy/src/index.ts
@@ -33,7 +33,7 @@ async function loadBabel() {
 
 // Duplicated from build.ts in Vite Core, at least while the feature is experimental
 // We should later expose this helper for other plugins to use
-export function toOutputFilePathInHtml(
+function toOutputFilePathInHtml(
   filename: string,
   type: 'asset' | 'public',
   importer: string,
diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index 98e9bb82347fd9..61cace4c6d2642 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -859,7 +859,7 @@ export function toOutputFilePathInString(
         return { runtime: result.runtime }
       }
       if (typeof result.relative === 'boolean') {
-        relative = true
+        relative = result.relative
       }
     } else if (result) {
       return result
@@ -896,7 +896,7 @@ export function toOutputFilePathWithoutRuntime(
         )
       }
       if (typeof result.relative === 'boolean') {
-        relative = true
+        relative = result.relative
       }
     } else if (result) {
       return result

From b02ad7ada8f8a7c4e02e54f61b7cec23daf33fc8 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Mon, 27 Jun 2022 14:02:17 +0200
Subject: [PATCH 04/10] refactor: rename to renderBuiltUrl

---
 docs/guide/build.md                           |  6 +++---
 packages/plugin-legacy/src/index.ts           |  6 +++---
 packages/vite/src/node/build.ts               | 12 ++++++------
 packages/vite/src/node/config.ts              |  2 +-
 packages/vite/src/node/plugins/asset.ts       |  4 ++--
 playground/assets/vite.config-runtime-base.js |  2 +-
 6 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/guide/build.md b/docs/guide/build.md
index 9813bbbd7011a6..4df81b56fe34fa 100644
--- a/docs/guide/build.md
+++ b/docs/guide/build.md
@@ -197,11 +197,11 @@ A user may choose to deploy in three different paths:
 - The generated hashed assets (JS, CSS, and other file types like images)
 - The copied [public files](assets.md#the-public-directory)
 
-A single static [base](#public-base-path) isn't enough in these scenarios. Vite provides experimental support for advanced base options during build, using `experimental.renderBuiltAssetUrl`.
+A single static [base](#public-base-path) isn't enough in these scenarios. Vite provides experimental support for advanced base options during build, using `experimental.renderBuiltUrl`.
 
 ```js
 experimental: {
-  renderBuiltAssetUrl: (filename: string, importer: string) => {
+  renderBuiltUrl: (filename: string, importer: string) => {
     if (path.extname(importer) === '.js') {
       return { runtime: `window.__toCdnUrl(${JSON.stringify(filename)})` }
     } else {
@@ -215,7 +215,7 @@ If the hashed assets and public files aren't deployed together, options for each
 
 ```js
   experimental: {
-    renderBuiltAssetUrl(filename: string, importer: string, { type: 'public' | 'asset' }) {
+    renderBuiltUrl(filename: string, importer: string, { type: 'public' | 'asset' }) {
       if (type === 'public') {
         return 'https://www.domain.com/' + filename
       }
diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts
index 50fc7d0d5d054c..a4aa34a2fc0672 100644
--- a/packages/plugin-legacy/src/index.ts
+++ b/packages/plugin-legacy/src/index.ts
@@ -40,10 +40,10 @@ function toOutputFilePathInHtml(
   config: ResolvedConfig,
   toRelative: (filename: string, importer: string) => string
 ): string {
-  const { renderBuiltAssetUrl } = config.experimental
+  const { renderBuiltUrl } = config.experimental
   let relative = config.base === '' || config.base === './'
-  if (renderBuiltAssetUrl) {
-    const result = renderBuiltAssetUrl(filename, importer, {
+  if (renderBuiltUrl) {
+    const result = renderBuiltUrl(filename, importer, {
       type,
       ssr: !!config.build.ssr
     })
diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index 61cace4c6d2642..80c925b991e5a4 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -847,10 +847,10 @@ export function toOutputFilePathInString(
     importer: string
   ) => string | { runtime: string }
 ): string | { runtime: string } {
-  const { renderBuiltAssetUrl } = config.experimental
+  const { renderBuiltUrl } = config.experimental
   let relative = config.base === '' || config.base === './'
-  if (renderBuiltAssetUrl) {
-    const result = renderBuiltAssetUrl(filename, importer, {
+  if (renderBuiltUrl) {
+    const result = renderBuiltUrl(filename, importer, {
       type,
       ssr: !!config.build.ssr
     })
@@ -878,10 +878,10 @@ export function toOutputFilePathWithoutRuntime(
   config: ResolvedConfig,
   toRelative: (filename: string, importer: string) => string
 ): string {
-  const { renderBuiltAssetUrl } = config.experimental
+  const { renderBuiltUrl } = config.experimental
   let relative = config.base === '' || config.base === './'
-  if (renderBuiltAssetUrl) {
-    const result = renderBuiltAssetUrl(filename, importer, {
+  if (renderBuiltUrl) {
+    const result = renderBuiltUrl(filename, importer, {
       type,
       ssr: !!config.build.ssr
     })
diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
index 91be93cb539da7..242cd3fb580d37 100644
--- a/packages/vite/src/node/config.ts
+++ b/packages/vite/src/node/config.ts
@@ -259,7 +259,7 @@ export interface ExperimentalOptions {
    *
    * @experimental
    */
-  renderBuiltAssetUrl?: RenderBuiltAssetUrl
+  renderBuiltUrl?: RenderBuiltAssetUrl
   /**
    * Enables support of HMR partial accept via `import.meta.hot.acceptExports`.
    *
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 68ef4a2d8da13a..ae8ee18103d98a 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -347,7 +347,7 @@ export function publicFileToBuiltUrl(
   config: ResolvedConfig
 ): string {
   if (config.command !== 'build') {
-    // We don't need relative base or renderBuiltAssetUrl support during dev
+    // We don't need relative base or renderBuiltUrl support during dev
     return config.base + url.slice(1)
   }
   const hash = getHash(url)
@@ -428,7 +428,7 @@ async function fileToBuiltUrl(
       emittedSet.add(contentHash)
     }
 
-    url = `__VITE_ASSET__${contentHash}__${postfix ? `$_${postfix}__` : ``}`
+    url = `__VITE_ASSET__${contentHash}__${postfix ? `$_${postfix}__` : ``}` // TODO_BASE
   }
 
   cache.set(id, url)
diff --git a/playground/assets/vite.config-runtime-base.js b/playground/assets/vite.config-runtime-base.js
index a9b66e3e181e2e..f9033dc70cc2ee 100644
--- a/playground/assets/vite.config-runtime-base.js
+++ b/playground/assets/vite.config-runtime-base.js
@@ -45,7 +45,7 @@ module.exports = {
     }
   ],
   experimental: {
-    renderBuiltAssetUrl(filename, importer, { type }) {
+    renderBuiltUrl(filename, importer, { type }) {
       if (type === 'asset') {
         if (path.extname(importer) === '.js') {
           return {

From 7b7f0b76575730cfb27d04b978fe4fc4f3a7116b Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Mon, 27 Jun 2022 14:03:49 +0200
Subject: [PATCH 05/10] chore: example of helper from virtual module

---
 playground/ssr-vue/vite.config.js | 78 ++++++++++++++++++++++++++++++-
 1 file changed, 76 insertions(+), 2 deletions(-)

diff --git a/playground/ssr-vue/vite.config.js b/playground/ssr-vue/vite.config.js
index d57a11972d449e..1ec2ee61ec42f9 100644
--- a/playground/ssr-vue/vite.config.js
+++ b/playground/ssr-vue/vite.config.js
@@ -1,13 +1,17 @@
+import path from 'path'
 import { defineConfig } from 'vite'
 import vuePlugin from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+
 const virtualFile = '@virtual-file'
 const virtualId = '\0' + virtualFile
 const nestedVirtualFile = '@nested-virtual-file'
 const nestedVirtualId = '\0' + nestedVirtualFile
 
+const base = '/test/'
+
 export default defineConfig({
-  base: '/test/',
+  base,
   plugins: [
     vuePlugin(),
     vueJsx(),
@@ -40,8 +44,78 @@ export default defineConfig({
           return `export const msg = "[success] from conventional virtual file"`
         }
       }
-    }
+    },
+    {
+      name: 'virtual-module',
+      resolveId(id) {
+        if (id === virtualFile) {
+          return virtualId
+        } else if (id === nestedVirtualFile) {
+          return nestedVirtualId
+        }
+      },
+      load(id) {
+        if (id === virtualId) {
+          return `export { msg } from "@nested-virtual-file";`
+        } else if (id === nestedVirtualId) {
+          return `export const msg = "[success] from conventional virtual file"`
+        }
+      }
+    },
+    // Example of a plugin that injects a helper from a virtual module that can
+    // be used in renderBuiltUrl
+    (function () {
+      const queryRE = /\?.*$/s
+      const hashRE = /#.*$/s
+      const cleanUrl = (url) => url.replace(hashRE, '').replace(queryRE, '')
+      let config
+
+      const virtualId = '\0virtual:ssr-vue-built-url'
+      return {
+        name: 'built-url',
+        enforce: 'post',
+        configResolved(_config) {
+          config = _config
+        },
+        resolveId(id) {
+          if (id === virtualId) {
+            return id
+          }
+        },
+        load(id) {
+          if (id === virtualId) {
+            return {
+              code: `export const __ssr_vue_processAssetPath = (url) => '${base}' + url`,
+              moduleSideEffects: 'no-treeshake'
+            }
+          }
+        },
+        transform(code, id) {
+          if (
+            config.build.ssr &&
+            cleanUrl(id).endsWith('.js') &&
+            !code.includes('__ssr_vue_processAssetPath')
+          ) {
+            return {
+              code:
+                `import { __ssr_vue_processAssetPath } from '${virtualId}';` +
+                code,
+              sourcemap: null // no sourcemap support to speed up CI
+            }
+          }
+        }
+      }
+    })()
   ],
+  experimental: {
+    renderBuiltUrl(filename, importer, { type, ssr }) {
+      if (type === 'asset' && ssr && path.extname(importer) === '.js') {
+        return {
+          runtime: `__ssr_vue_processAssetPath(${JSON.stringify(filename)})`
+        }
+      }
+    }
+  },
   build: {
     minify: false
   },

From 4262e870a3ed93e081debc3c84a9dca2f6422653 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Mon, 27 Jun 2022 14:38:38 +0200
Subject: [PATCH 06/10] chore: error message

---
 packages/plugin-legacy/src/index.ts | 4 ++--
 packages/vite/src/node/build.ts     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts
index a4aa34a2fc0672..1006f905e40ea1 100644
--- a/packages/plugin-legacy/src/index.ts
+++ b/packages/plugin-legacy/src/index.ts
@@ -50,9 +50,9 @@ function toOutputFilePathInHtml(
     if (typeof result === 'object') {
       if (result.runtime) {
         throw new Error(
-          `{ runtime: ${
+          `{ runtime: "${
             result.runtime
-          } } is not supported for assets in ${path.extname(
+          }" } is not supported for assets in ${path.extname(
             importer
           )} files: ${filename}`
         )
diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index 80c925b991e5a4..0ab1d234b2dde8 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -888,9 +888,9 @@ export function toOutputFilePathWithoutRuntime(
     if (typeof result === 'object') {
       if (result.runtime) {
         throw new Error(
-          `{ runtime: ${
+          `{ runtime: "${
             result.runtime
-          } } is not supported for assets in ${path.extname(
+          } }" is not supported for assets in ${path.extname(
             importer
           )} files: ${filename}`
         )

From 99b578be39be1553bb64dea20161a9cfba6f4e98 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Mon, 27 Jun 2022 15:07:22 +0200
Subject: [PATCH 07/10] refactor: add hostType

---
 docs/guide/build.md                           |  6 ++--
 packages/plugin-legacy/src/index.ts           | 17 +++++-----
 packages/vite/src/node/build.ts               | 34 ++++++++++++-------
 packages/vite/src/node/plugins/asset.ts       |  2 ++
 packages/vite/src/node/plugins/css.ts         |  2 ++
 packages/vite/src/node/plugins/html.ts        |  2 ++
 packages/vite/src/node/plugins/worker.ts      |  1 +
 playground/assets/vite.config-runtime-base.js |  6 ++--
 playground/ssr-vue/vite.config.js             |  7 ++--
 9 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/docs/guide/build.md b/docs/guide/build.md
index 4df81b56fe34fa..48d2f5a14ccf9c 100644
--- a/docs/guide/build.md
+++ b/docs/guide/build.md
@@ -201,8 +201,8 @@ A single static [base](#public-base-path) isn't enough in these scenarios. Vite
 
 ```js
 experimental: {
-  renderBuiltUrl: (filename: string, importer: string) => {
-    if (path.extname(importer) === '.js') {
+  renderBuiltUrl: (filename: string, { hostType: 'js' | 'css' | 'html' }) => {
+    if (hostType === 'js') {
       return { runtime: `window.__toCdnUrl(${JSON.stringify(filename)})` }
     } else {
       return { relative: true }
@@ -215,7 +215,7 @@ If the hashed assets and public files aren't deployed together, options for each
 
 ```js
   experimental: {
-    renderBuiltUrl(filename: string, importer: string, { type: 'public' | 'asset' }) {
+    renderBuiltUrl(filename: string, { hostType: 'js' | 'css' | 'html', type: 'public' | 'asset' }) {
       if (type === 'public') {
         return 'https://www.domain.com/' + filename
       }
diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts
index 1006f905e40ea1..f1f5c9b193b2ff 100644
--- a/packages/plugin-legacy/src/index.ts
+++ b/packages/plugin-legacy/src/index.ts
@@ -36,14 +36,17 @@ async function loadBabel() {
 function toOutputFilePathInHtml(
   filename: string,
   type: 'asset' | 'public',
-  importer: string,
+  hostId: string,
+  hostType: 'js' | 'css' | 'html',
   config: ResolvedConfig,
   toRelative: (filename: string, importer: string) => string
 ): string {
   const { renderBuiltUrl } = config.experimental
   let relative = config.base === '' || config.base === './'
   if (renderBuiltUrl) {
-    const result = renderBuiltUrl(filename, importer, {
+    const result = renderBuiltUrl(filename, { 
+      hostId, 
+      hostType,
       type,
       ssr: !!config.build.ssr
     })
@@ -52,9 +55,7 @@ function toOutputFilePathInHtml(
         throw new Error(
           `{ runtime: "${
             result.runtime
-          }" } is not supported for assets in ${path.extname(
-            importer
-          )} files: ${filename}`
+          }" } is not supported for assets in ${hostType} files: ${filename}`
         )
       }
       if (typeof result.relative === 'boolean') {
@@ -65,7 +66,7 @@ function toOutputFilePathInHtml(
     }
   }
   if (relative && !config.build.ssr) {
-    return toRelative(filename, importer)
+    return toRelative(filename, hostId)
   } else {
     return config.base + filename
   }
@@ -87,9 +88,9 @@ function toAssetPathFromHtml(
   config: ResolvedConfig
 ): string {
   const relativeUrlPath = normalizePath(path.relative(config.root, htmlPath))
-  const toRelative = (filename: string, importer: string) =>
+  const toRelative = (filename: string, hostId: string) =>
     getBaseInHTML(relativeUrlPath, config) + filename
-  return toOutputFilePathInHtml(filename, 'asset', htmlPath, config, toRelative)
+  return toOutputFilePathInHtml(filename, 'asset', htmlPath, 'html', config, toRelative)
 }
 
 // https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index 0ab1d234b2dde8..3d8e34d6611ee0 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -833,24 +833,31 @@ function injectSsrFlag<T extends Record<string, any>>(
 
 export type RenderBuiltAssetUrl = (
   filename: string,
-  importer: string,
-  type: { type: 'asset' | 'public'; ssr: boolean }
+  type: { 
+    type: 'asset' | 'public'
+    hostId: string,
+    hostType: 'js' | 'css' | 'html'
+    ssr: boolean 
+  }
 ) => string | { relative?: boolean; runtime?: string } | undefined
 
 export function toOutputFilePathInString(
   filename: string,
   type: 'asset' | 'public',
-  importer: string,
+  hostId: string,
+  hostType: 'js' | 'css' | 'html',
   config: ResolvedConfig,
   toRelative: (
     filename: string,
-    importer: string
+    hostType: string
   ) => string | { runtime: string }
 ): string | { runtime: string } {
   const { renderBuiltUrl } = config.experimental
   let relative = config.base === '' || config.base === './'
   if (renderBuiltUrl) {
-    const result = renderBuiltUrl(filename, importer, {
+    const result = renderBuiltUrl(filename, {
+      hostId,
+      hostType,
       type,
       ssr: !!config.build.ssr
     })
@@ -866,7 +873,7 @@ export function toOutputFilePathInString(
     }
   }
   if (relative && !config.build.ssr) {
-    return toRelative(filename, importer)
+    return toRelative(filename, hostId)
   }
   return config.base + filename
 }
@@ -874,14 +881,17 @@ export function toOutputFilePathInString(
 export function toOutputFilePathWithoutRuntime(
   filename: string,
   type: 'asset' | 'public',
-  importer: string,
+  hostId: string,
+  hostType: 'js' | 'css' | 'html',
   config: ResolvedConfig,
-  toRelative: (filename: string, importer: string) => string
+  toRelative: (filename: string, hostId: string) => string
 ): string {
   const { renderBuiltUrl } = config.experimental
   let relative = config.base === '' || config.base === './'
   if (renderBuiltUrl) {
-    const result = renderBuiltUrl(filename, importer, {
+    const result = renderBuiltUrl(filename, {
+      hostId,
+      hostType,
       type,
       ssr: !!config.build.ssr
     })
@@ -890,9 +900,7 @@ export function toOutputFilePathWithoutRuntime(
         throw new Error(
           `{ runtime: "${
             result.runtime
-          } }" is not supported for assets in ${path.extname(
-            importer
-          )} files: ${filename}`
+          } }" is not supported for assets in ${hostType} files: ${filename}`
         )
       }
       if (typeof result.relative === 'boolean') {
@@ -903,7 +911,7 @@ export function toOutputFilePathWithoutRuntime(
     }
   }
   if (relative && !config.build.ssr) {
-    return toRelative(filename, importer)
+    return toRelative(filename, hostId)
   } else {
     return config.base + filename
   }
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index ae8ee18103d98a..283f3eef0d203c 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -122,6 +122,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
           filename,
           'asset',
           chunk.fileName,
+          'js',
           config,
           toRelative
         )
@@ -145,6 +146,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
           publicUrl,
           'public',
           chunk.fileName,
+          'js',
           config,
           toRelative
         )
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index acaf59789b7725..02fe6c5113e6a4 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -482,6 +482,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             filename,
             'asset',
             cssAssetName,
+            'css',
             config,
             toRelative
           )
@@ -498,6 +499,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
               publicUrl,
               'public',
               cssAssetName,
+              'css',
               config,
               () => `${relativePathToPublicFromCSS}/${publicUrl}`
             )
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index bc5d4d0117b4b4..5287e6e5208ab5 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -248,6 +248,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             url.slice(1),
             'public',
             relativeUrlPath,
+            'html',
             config,
             publicToRelative
           )
@@ -613,6 +614,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               filename,
               'asset',
               relativeUrlPath,
+              'html',
               config,
               (filename: string, importer: string) => assetsBase + filename
             )
diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 3d4f1d94dafc6b..e3f630a60740aa 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -341,6 +341,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
             filename,
             'asset',
             chunk.fileName,
+            'js',
             config,
             toStaticRelativePath
           )
diff --git a/playground/assets/vite.config-runtime-base.js b/playground/assets/vite.config-runtime-base.js
index f9033dc70cc2ee..0d643a6cf6058a 100644
--- a/playground/assets/vite.config-runtime-base.js
+++ b/playground/assets/vite.config-runtime-base.js
@@ -45,15 +45,15 @@ module.exports = {
     }
   ],
   experimental: {
-    renderBuiltUrl(filename, importer, { type }) {
+    renderBuiltUrl(filename, { hostType, type }) {
       if (type === 'asset') {
-        if (path.extname(importer) === '.js') {
+        if (hostType === 'js') {
           return {
             runtime: `globalThis.__toAssetUrl(${JSON.stringify(filename)})`
           }
         }
       } else if (type === 'public') {
-        if (path.extname(importer) === '.js') {
+        if (hostType === 'js') {
           return {
             runtime: `globalThis.__publicBase+${JSON.stringify(filename)}`
           }
diff --git a/playground/ssr-vue/vite.config.js b/playground/ssr-vue/vite.config.js
index 1ec2ee61ec42f9..ea90c1f0a4bde7 100644
--- a/playground/ssr-vue/vite.config.js
+++ b/playground/ssr-vue/vite.config.js
@@ -65,9 +65,6 @@ export default defineConfig({
     // Example of a plugin that injects a helper from a virtual module that can
     // be used in renderBuiltUrl
     (function () {
-      const queryRE = /\?.*$/s
-      const hashRE = /#.*$/s
-      const cleanUrl = (url) => url.replace(hashRE, '').replace(queryRE, '')
       let config
 
       const virtualId = '\0virtual:ssr-vue-built-url'
@@ -108,8 +105,8 @@ export default defineConfig({
     })()
   ],
   experimental: {
-    renderBuiltUrl(filename, importer, { type, ssr }) {
-      if (type === 'asset' && ssr && path.extname(importer) === '.js') {
+    renderBuiltUrl(filename, { hostType, type, ssr }) {
+      if (ssr && type === 'asset' && hostType === 'js') {
         return {
           runtime: `__ssr_vue_processAssetPath(${JSON.stringify(filename)})`
         }

From 5588a6dbda51f71ff17cbbd8d0361c503dfeb818 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Mon, 27 Jun 2022 15:13:33 +0200
Subject: [PATCH 08/10] chore: format

---
 packages/plugin-legacy/src/index.ts | 17 +++++++++++------
 packages/vite/src/node/build.ts     | 10 ++++------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts
index f1f5c9b193b2ff..3c933555d6afab 100644
--- a/packages/plugin-legacy/src/index.ts
+++ b/packages/plugin-legacy/src/index.ts
@@ -44,8 +44,8 @@ function toOutputFilePathInHtml(
   const { renderBuiltUrl } = config.experimental
   let relative = config.base === '' || config.base === './'
   if (renderBuiltUrl) {
-    const result = renderBuiltUrl(filename, { 
-      hostId, 
+    const result = renderBuiltUrl(filename, {
+      hostId,
       hostType,
       type,
       ssr: !!config.build.ssr
@@ -53,9 +53,7 @@ function toOutputFilePathInHtml(
     if (typeof result === 'object') {
       if (result.runtime) {
         throw new Error(
-          `{ runtime: "${
-            result.runtime
-          }" } is not supported for assets in ${hostType} files: ${filename}`
+          `{ runtime: "${result.runtime}" } is not supported for assets in ${hostType} files: ${filename}`
         )
       }
       if (typeof result.relative === 'boolean') {
@@ -90,7 +88,14 @@ function toAssetPathFromHtml(
   const relativeUrlPath = normalizePath(path.relative(config.root, htmlPath))
   const toRelative = (filename: string, hostId: string) =>
     getBaseInHTML(relativeUrlPath, config) + filename
-  return toOutputFilePathInHtml(filename, 'asset', htmlPath, 'html', config, toRelative)
+  return toOutputFilePathInHtml(
+    filename,
+    'asset',
+    htmlPath,
+    'html',
+    config,
+    toRelative
+  )
 }
 
 // https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index 3d8e34d6611ee0..2ae5c81dff0fd1 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -833,11 +833,11 @@ function injectSsrFlag<T extends Record<string, any>>(
 
 export type RenderBuiltAssetUrl = (
   filename: string,
-  type: { 
+  type: {
     type: 'asset' | 'public'
-    hostId: string,
+    hostId: string
     hostType: 'js' | 'css' | 'html'
-    ssr: boolean 
+    ssr: boolean
   }
 ) => string | { relative?: boolean; runtime?: string } | undefined
 
@@ -898,9 +898,7 @@ export function toOutputFilePathWithoutRuntime(
     if (typeof result === 'object') {
       if (result.runtime) {
         throw new Error(
-          `{ runtime: "${
-            result.runtime
-          } }" is not supported for assets in ${hostType} files: ${filename}`
+          `{ runtime: "${result.runtime} }" is not supported for assets in ${hostType} files: ${filename}`
         )
       }
       if (typeof result.relative === 'boolean') {

From df9a2c2be2d67e3de58ba103d96d9a42728fcb31 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Mon, 27 Jun 2022 15:26:22 +0200
Subject: [PATCH 09/10] chore: missing function

---
 playground/ssr-vue/vite.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/playground/ssr-vue/vite.config.js b/playground/ssr-vue/vite.config.js
index ea90c1f0a4bde7..df509f63268a47 100644
--- a/playground/ssr-vue/vite.config.js
+++ b/playground/ssr-vue/vite.config.js
@@ -65,6 +65,9 @@ export default defineConfig({
     // Example of a plugin that injects a helper from a virtual module that can
     // be used in renderBuiltUrl
     (function () {
+      const queryRE = /\?.*$/s
+      const hashRE = /#.*$/s
+      const cleanUrl = (url) => url.replace(hashRE, '').replace(queryRE, '')
       let config
 
       const virtualId = '\0virtual:ssr-vue-built-url'

From 1f900857930b0facc5fe16d9db6c28d463dd7516 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Mon, 27 Jun 2022 18:55:20 +0200
Subject: [PATCH 10/10] chore: update, thanks Blu

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
---
 packages/plugin-legacy/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts
index 3c933555d6afab..ca79a56f160146 100644
--- a/packages/plugin-legacy/src/index.ts
+++ b/packages/plugin-legacy/src/index.ts
@@ -57,7 +57,7 @@ function toOutputFilePathInHtml(
         )
       }
       if (typeof result.relative === 'boolean') {
-        relative = true
+        relative = result.relative
       }
     } else if (result) {
       return result