feat(html)!: support more asset sources

[bluwy]

Description

Support more tags to process as assets.

Close #7362
Close #5098

Supersedes and closes #7643 (There was a lot of conflicts that it's easier to start from scratch)

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.
• Read the Pull Request Guidelines and follow the Commit Convention.
• 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).
• Ideally, include relevant tests that fail without this PR but pass with it.

[bluwy]

Moving to the 5.0 milestone as we don't have a way to opt-out of this feature if someone needs to. Either a dedicated API, sharing with build.rollupOptions.external, <!-- @vite-ignore -->, etc which needs some discussion.

[septatrix]

Moving to the 5.0 milestone as we don't have a way to opt-out of this feature if someone needs to. Either a dedicated API, sharing with build.rollupOptions.external, <!-- @vite-ignore -->, etc which needs some discussion.

Would ?url not work as a opt-out on a per-URL basis?

I am really eager to have this feature as early as possible as it just makes Vite so much more suited for SSG. Not only image transformation as I brought up a few days ago (#11099) but also CSP hashes. Both of which are recommended for modern websites and currently missing in Vite whereas other SSG solutions support them like this eleventy blog theme.

[bluwy]

Would ?url not work as a opt-out on a per-URL basis?

We can't ask the user to update their links to opt-out. The links should stay as is.

We'd need some time to discuss the API before we can move forward with this. (Related discussion: #3533)

[ntarbie]

What about making it opt in? Similar to assetsInclude, an optional config for the attribute strings you need to locate and parse assets in?

[riw]

+1
Would be nice to have this option not only for assets but for js files, too (we use a library that lazy loads a js file from a data attribute when the element enters the viewport)

[Maytha8]

Moving to the 5.0 milestone as we don't have a way to opt-out of this feature if someone needs to. Either a dedicated API, sharing with build.rollupOptions.external, <!-- @vite-ignore -->, etc which needs some discussion.

Would making a new configuration option for the Vite config file fix this issue?

export interface UserConfig {
  // ...
  /**
   * Configure which HTML tags and attributes to use as asset sources.
   */
  assetSources?: AssetSourcesOptions
  // ...
}
export interface AssetSourcesOptions {
  [tag: string]: {
    [attribute: string]: boolean
  }
}

Default configuration would be: (this matches what is currently present in the code)

// ...
assetSources: {
  audio: {src: false},
  embed: {src: false},
  img: {src: true, srcset: true},
  input: {src: false},
  object: {src: false},
  source: {src: true, srcset: true},
  track: {src: false},
  video: {poster: true, src: true},
  image: {href: true, 'xlink:href': true},
  use: {href: true, 'xlink:href': true},
  link: {href: true, imagesrcset: false},
  meta: {content: false},
}
// ...

I'm new to contributing to pull requests, so forgive me if I do/say something dumb.

[Maytha8]

I think it's a much cleaner implementation of finding asset sources in HTML than what is currently in the codebase.

[bluwy]

Would making a new configuration option for the Vite config file fix this issue?

Sorry for not getting back, this slipped through my notifications 😅 This would indeed be a solution too but ideally we want to keep the configuration internally until needed.

---

In different news, in the last meeting we discussed that we would introduce resolve.external (#6582) as a way to externalize things in dev and build. And ideally it would cover HTML too (similar PR: #11854).

I'm still (secretly) hoping we would support <!-- @vite-ignore --> because it feels convenient in HTML files, but we can improve this later in a non-breaking way.

[bluwy]

Dropping this off the milestone for now. We can revisit this in the next minor. Further context: #11854 (comment)

[rotu]

Would love to see this landed. #7062 is very unexpected and feels like a bug. I can see how there's space for adding more build options. But treating <img href="foo.svg"> so differently from <object data="foo.svg"> for bundling with Vite is very confusing.

[bluwy]

Will need to wait for #18494 before I can properly rebase the code. Not sure if this will get into the next major though, but it's close to done

[bluwy]

I realized the script tag src is never going to be a srcset, so this can be false

[bluwy]

This is now done. Compared to the initial implementation, I shrunk down the complexity of handled HTML elements list quite a lot. I realized we don't have to completely follow what html-loader has:

• If the link tag has a href, it's always safe to assume that's being used as a URL, so we always process it (same as previous behaviour). html-loader added rel and itemprop checks which I don't think is needed.
• link with imagesrcset if used is almost always guaranteed a srcset that can be safe to process, we don't have to check other attributes.
• meta with itemprop also shouldn't change the meaning of content being a URL or not. From what I can tell, itemprop is merely additional property information and doesn't change the meta tag intent.

There may be actual reasons these were implemented in html-loader that I missed. I tried searching for links or comments for where these behaviour can be found, but I couldn't find any.

[sapphi-red]

LGTM 👍

[sapphi-red]

It would be nice to mention it in the migration guide. That more attributes are now transformed and it can be excluded by vite-ignore attribute.

[sapphi-red]

/ecosystem-ci run

[vite-ecosystem-ci]

📝 Ran ecosystem CI on 1625d98: Open

suite	result	latest scheduled
analogjs	❌ failure	✅ success
astro	❌ failure	✅ success
histoire	❌ failure	✅ success
redwoodjs	❌ failure	❌ failure
remix	❌ failure	❌ failure
storybook	❌ failure	✅ success
sveltekit	❌ failure	❌ failure
unocss	❌ failure	✅ success
vike	❌ failure	❌ failure
vite-plugin-vue	❌ failure	✅ success
vitest	❌ failure	❌ failure

✅ ladle, laravel, marko, nuxt, previewjs, quasar, qwik, rakkas, vite-environment-examples, vite-plugin-pwa, vite-plugin-react, vite-plugin-react-swc, vite-plugin-svelte, vite-setup-catalogue, vitepress, vuepress

[patak-dev]

awesome work