feat(asset): add ?inline and ?no-inline queries to control inlining

[hugoattal]

Fix #15453

Description

Adding ?url when importing a file disable inline

Additional context

Recently, browsers disabled data URL in SVG elements (https://developer.chrome.com/blog/migrate-way-from-data-urls-in-svg-use?hl=en)

Since we can't know if a file will be used in an IMG or a USE tag, this option allow users to mark file as non-inlining.

cf this issue #15453

---

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.

[hugoattal]

Sorry, for the force-push, I wanted to retrigger the CI / Build&Test: node-20, macos-latest (pull_request) that seems to fail randomly.

By the way, the fact that fixture.spec.ts fails on adding a new test file is a bit weird 😅...

[piotr-cz]

I wonder why you didn't reuse the ?url suffix used for Explicit URL Imports?

[hugoattal]

Sorry for the mess, I'm not used to syncing a fork...

I removed the test file since it seems pretty difficult to isolate the test with the new "shouldInline" function that requires the PluginContext.

I also updated the ?file to ?url as suggested.

This ended up in just a single-line update.

[sapphi-red]

In the last team meeting, we discussed about this PR. We are open to have this feature as long as the following points are resolved.

• update the document to reflect this feature
• add a test
• add a declare module "*?name" type definition
• a better naming for the query
  • ?url has a different meaning than non inlining
  • the ideas brought up in the meeting
    • ?inline=true/?inline=false
    • ?no-inline
    • ?separate
• deduping inlined assets with different queries: If we choose ?inline=true for the query name, then we will have duplicate inlined assets in the output bundle when a user imports an asset that is inlined by default with both ?inline=true and without a query.

[hugoattal]

@sapphi-red I just updated the PR with your recommendations.

I chose the ?no-inline approach, I think it was the most straightforward to understand (and ?inline already exists, so I didn't want to change the way it worked)

I don't think I need to take a special look at deduping since I went with this solution, unless I overlooked something?

Let me know if anything needs to change, thanks again for discussing it!

[codethief]

@sapphi-red

?url has a different meaning than non inlining

What other meaning does it have then? The docs explicitly state that a ?url import should yield a URL, nothing else. The current behavior of inlining ?url imports opportunistically violates this contract, though. A data URL is not a regular URL. I can't use it in an anchor tag, for instance. I also cannot fire asynchronous requests against it or use it in a <link> tag.

If you want ?url to mean "regular URL or data URL" then I think the docs need to be updated. (And IMO ?url should be renamed to ?url-or-data-url or something.) The current behavior, though, is very surprising.

[bluwy]

This LGTM now. I think the query name looks fine compared to other alternatives.

[patak-dev]

/ecosystem-ci run

[vite-ecosystem-ci]

📝 Ran ecosystem CI on 8cda9f9: Open

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

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

[sapphi-red]

A data URL is not a regular URL. I can't use it in an anchor tag, for instance. I also cannot fire asynchronous requests against it or use it in a <link> tag.

?url only means it's a URL, it does not say it's a URL with http / https protocol. FYI top-level navigation does not work with data URLs for security reasons, but you can still download a data URL file by adding a download attribute. Also fetch supports data URLs (e.g. fetch('data:,Hello%2C%20World%21')).