fix: resolve relative URL generated by renderBuiltUrl passed to module preload

[sapphi-red]

Description

Built on top of #16083

When renderBuiltUrl returned a relative URL (e.g. /foo or foo), assetsURL function returned a relative URL. The preload function expects an absolute URL and inserted a duplicate CSS link tag.

This PR fixes that by changing the assetsURL function from function(dep, importerUrl) { return dep[0] === '.' ? new URL(dep, importerUrl).href : dep } to function(dep, importerUrl) { return new URL(dep, importerUrl).href }. This modification changes the behavior when a relative path that doesn't start with . is passed. If we want to keep the previous behavior, the function needs to be function(dep, importerUrl) { return dep[0] === '.' ? new URL(dep, importerUrl).href : new URL(dep, document.baseURI) }. But I think that behavior is confusing.

fixes #14463

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines, especially the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Update the corresponding documentation if needed.
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[bluwy]

The change seems fair to me. Maybe we should run ecosystem-ci to double check if this affects downstream

[bluwy]

/ecosystem-ci run

[vite-ecosystem-ci]

📝 Ran ecosystem CI on ec82e19: Open

suite	result	latest scheduled
astro	❌ failure	❌ failure
nuxt	❌ failure	❌ failure
qwik	❌ failure	❌ failure
vitest	❌ failure	❌ failure

✅ analogjs, histoire, ladle, laravel, marko, previewjs, quasar, rakkas, remix, sveltekit, unocss, vike, vite-plugin-pwa, vite-plugin-react, vite-plugin-react-swc, vite-plugin-svelte, vite-plugin-vue, vite-setup-catalogue, vitepress

[rxgx]

Given the previous behavior, with the following function:

    experimental: {
      renderBuiltUrl(filename, { hostId, hostType, type }) {
        if (filename.includes('.worker.') && hostType === 'js') {
          return '/' + filename;
        }
        return `https://cdn.domain.tld/path/to/asset/${filename}`
      }
    },

After this change, how would I set my workers to be requested as /name.worker.js instead of now always being a fully qualified URL? I've tried to return as / and ./ but neither work as before. Would I now have to find a way to inject a document.location.origin into the URL constructor at runtime?

[sapphi-red]

@rxgx To get the previous behavior, the config below would work:

    experimental: {
      renderBuiltUrl(filename, { hostId, hostType, type }) {
        if (filename.includes('.worker.') && hostType === 'js') {
          return { runtime: `new URL(${JSON.stringify('/' + filename)}, document.baseURI).href` }
        }
        return `https://cdn.domain.tld/path/to/asset/${filename}`
      }
    },

[rxgx]

Thanks, @sapphi-red! That worked.