feat(html)!: support more asset sources

[bluwy]

Description

Support more tags to process as assets.

Close #7362 Close #5098

Supersedes and closes https://github.com/vitejs/vite/pull/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
• [x] New Feature
• [ ] Documentation update
• [ ] Other

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

• [x] Read the Contributing Guidelines.
• [x] Read the Pull Request Guidelines and follow the Commit Convention.
• [x] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• [x] Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• [x] 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: https://github.com/vitejs/vite/issues/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.

[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 (https://github.com/vitejs/vite/issues/6582) as a way to externalize things in dev and build. And ideally it would cover HTML too (similar PR: https://github.com/vitejs/vite/pull/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: https://github.com/vitejs/vite/pull/11854#issuecomment-1768841071

[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.