preloaded files are not rendered with renderBuiltUrl

[danielroe]

Describe the bug

I would expect that the preload links would also be processed with renderBuiltUrl. Instead, even if I wish to render a relative url, I have to set base: './' rather than { relative: true }.

vite/packages/vite/src/node/plugins/importAnalysisBuild.ts

Lines 113 to 121 in 905b8eb

	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 ${JSON.stringify(config.base)}+dep }`
	const preloadCode = `const scriptRel = ${scriptRel};const assetsURL = ${assetsURL};const seen = {};export const ${preloadMethod} = ${preload.toString()}`

Not entirely sure how to resolve. Possibly a new hostType, like preload, in which case filename would be the variable name itself (dep) rather than a string?

Reproduction

https://stackblitz.com/edit/vitejs-vite-n3egg4

1. npm run build
2. Look in dist/assets/index.1ebc8c94.js

const _sfc_main = {
  __name: "App",
  setup(__props) {
    const HelloWorld = defineAsyncComponent(
      () => __vitePreload(() => import("./HelloWorld.ce23a96f.js"), true ? ["assets/HelloWorld.ce23a96f.js","assets/HelloWorld.2fcbde52.css"] : void 0)
    );
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(HelloWorld), { msg: "Vite + Vue" });
    };
  }
};

System Info

Stackblitz

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[patak-dev]

Thanks for creating the issue @danielroe, at the end we didn't create one to track this missing feature.

Not entirely sure how to resolve. Possibly a new hostType, like preload, in which case filename would be the variable name itself (dep) rather than a string?

What we discussed in the context of:

• feat: experimental.renderBuiltUrl (revised build base options) #8762
  is that we could add support for modifying the preload URLs once we implement preload config options. We wanted to allow users to disable preload, filter, or modify URLs, and we could also support custom runtime URL modifications. Maybe something like:

build: {
	preload: boolean | { 
      processUrl: (url: string) => boolean | string | (variableName: string) => string,  
    }
}

The idea was that the context was different enough that was better to avoid overloading renderBuiltUrl. The only issue I see is that if we graduate renderBuiltUrl to a hook, then plugins are going to be able to collaborate constructing it, but they would not be able to do the same with preload URLs. Maybe instead of adding it to build.preload we could have an experimental.renderPreloadUrl and leave build.preload only for global disable/filtering. renderPreloadUrl can have most of the same params as renderBuiltUrl (except for hostType that is always JS, and filename is varName`).

I'll see if I can work on this feature later this week.