fix: no asset plugin w/ img is imported with query (#8353)
* fix: no asset plugin w/ img is imported with query
* add changeset
* add test for the new feature
* remove exp
* use removeQueryString instead of `includes('?')`
it's more explicit
---------
Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
This commit is contained in:
Barthélémy Ledoux
GitHub
parent
48ff7855b2
commit
1947ef7a99
8 changed files with 95 additions and 13 deletions
13
.changeset/disable-asset-with-query.md
Normal file
13
.changeset/disable-asset-with-query.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Astro will now skip asset optimization when there is a query in the import. Instead, it will let vite deal with it using plugins.
|
||||
|
||||
```vue
|
||||
<script>
|
||||
// This will not return an optimized asset
|
||||
import Component from './Component.vue?component'
|
||||
</script>
|
||||
```
|
||||
|
||||
|
|
@ -14,9 +14,6 @@ import { hashTransform, propsToFilename } from './utils/transformToPath.js';
|
|||
|
||||
const resolvedVirtualModuleId = '\0' + VIRTUAL_MODULE_ID;
|
||||
|
||||
const rawRE = /(?:\?|&)raw(?:&|$)/;
|
||||
const urlRE = /(\?|&)url(?:&|$)/;
|
||||
|
||||
export default function assets({
|
||||
settings,
|
||||
mode,
|
||||
|
|
@ -119,13 +116,12 @@ export default function assets({
|
|||
resolvedConfig = viteConfig;
|
||||
},
|
||||
async load(id) {
|
||||
// If our import has the `?raw` or `?url` Vite query params, we'll let Vite handle it
|
||||
if (rawRE.test(id) || urlRE.test(id)) {
|
||||
// If our import has any query params, we'll let Vite handle it
|
||||
// See https://github.com/withastro/astro/issues/8333
|
||||
if (id !== removeQueryString(id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cleanedUrl = removeQueryString(id);
|
||||
if (/\.(jpeg|jpg|png|tiff|webp|gif|svg)$/.test(cleanedUrl)) {
|
||||
if (/\.(jpeg|jpg|png|tiff|webp|gif|svg)$/.test(id)) {
|
||||
const meta = await emitESMImage(id, this.meta.watchMode, this.emitFile);
|
||||
return `export default ${JSON.stringify(meta)}`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,4 +30,12 @@ describe('App Entrypoint', () => {
|
|||
const js = await fixture.readFile(client);
|
||||
expect(js).to.match(/\w+\.component\(\"Bar\"/gm);
|
||||
});
|
||||
|
||||
it('loads svg components without transforming them to assets', async () => {
|
||||
const data = await fixture.readFile('/index.html');
|
||||
const { document } = parseHTML(data);
|
||||
const client = document.querySelector('astro-island svg');
|
||||
|
||||
expect(client).not.to.be.undefined;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import vue from '@astrojs/vue';
|
||||
import ViteSvgLoader from 'vite-svg-loader'
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [vue({
|
||||
appEntrypoint: '/src/pages/_app'
|
||||
})]
|
||||
})],
|
||||
vite: {
|
||||
plugins: [
|
||||
ViteSvgLoader(),
|
||||
],
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"private": true,
|
||||
"dependencies": {
|
||||
"astro": "workspace:*",
|
||||
"@astrojs/vue": "workspace:*"
|
||||
"@astrojs/vue": "workspace:*",
|
||||
"vite-svg-loader": "4.0.0"
|
||||
}
|
||||
}
|
||||
3
packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Circle.svg
vendored
Normal file
3
packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Circle.svg
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 163 B |
|
|
@ -1,5 +1,10 @@
|
|||
<script setup>
|
||||
import Circle from './Circle.svg?component'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="foo">
|
||||
<Bar />
|
||||
<Circle/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4888,6 +4888,9 @@ importers:
|
|||
astro:
|
||||
specifier: workspace:*
|
||||
version: link:../../../../../astro
|
||||
vite-svg-loader:
|
||||
specifier: 4.0.0
|
||||
version: 4.0.0
|
||||
|
||||
packages/internal-helpers:
|
||||
devDependencies:
|
||||
|
|
@ -8589,6 +8592,11 @@ packages:
|
|||
engines: {node: '>= 10'}
|
||||
dev: true
|
||||
|
||||
/@trysound/sax@0.2.0:
|
||||
resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
|
||||
engines: {node: '>=10.13.0'}
|
||||
dev: false
|
||||
|
||||
/@ts-morph/common@0.20.0:
|
||||
resolution: {integrity: sha512-7uKjByfbPpwuzkstL3L5MQyuXPSKdoNG93Fmi2JoDcTf3pEP731JdRFAduRVkOs8oqxPsXKA+ScrWkdQ8t/I+Q==}
|
||||
dependencies:
|
||||
|
|
@ -10402,6 +10410,11 @@ packages:
|
|||
resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
|
||||
engines: {node: '>= 6'}
|
||||
|
||||
/commander@7.2.0:
|
||||
resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
|
||||
engines: {node: '>= 10'}
|
||||
dev: false
|
||||
|
||||
/commander@8.3.0:
|
||||
resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
|
||||
engines: {node: '>= 12'}
|
||||
|
|
@ -10541,7 +10554,6 @@ packages:
|
|||
domhandler: 5.0.3
|
||||
domutils: 3.1.0
|
||||
nth-check: 2.1.1
|
||||
dev: true
|
||||
|
||||
/css-selector-parser@1.4.1:
|
||||
resolution: {integrity: sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==}
|
||||
|
|
@ -10551,6 +10563,14 @@ packages:
|
|||
resolution: {integrity: sha512-JjnG6/pdLJh3iqipq7kteNVtbIczsU2A1cNxb+VAiniSuNmrB/NI3us4rSCfArvlwRXYly+jZhUUfEoInSH9Qg==}
|
||||
dev: false
|
||||
|
||||
/css-tree@2.2.1:
|
||||
resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
|
||||
engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
|
||||
dependencies:
|
||||
mdn-data: 2.0.28
|
||||
source-map-js: 1.0.2
|
||||
dev: false
|
||||
|
||||
/css-tree@2.3.1:
|
||||
resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
|
||||
engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
|
||||
|
|
@ -10561,7 +10581,6 @@ packages:
|
|||
/css-what@6.1.0:
|
||||
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
|
||||
engines: {node: '>= 6'}
|
||||
dev: true
|
||||
|
||||
/cssdb@7.7.1:
|
||||
resolution: {integrity: sha512-kM+Fs0BFyhJNeE6wbOrlnRsugRdL6vn7QcON0aBDZ7XRd7RI2pMlk+nxoHuTb4Et+aBobXgK0I+6NGLA0LLgTw==}
|
||||
|
|
@ -10572,6 +10591,13 @@ packages:
|
|||
engines: {node: '>=4'}
|
||||
hasBin: true
|
||||
|
||||
/csso@5.0.5:
|
||||
resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
|
||||
engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
|
||||
dependencies:
|
||||
css-tree: 2.2.1
|
||||
dev: false
|
||||
|
||||
/cssom@0.3.8:
|
||||
resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
|
||||
dev: true
|
||||
|
|
@ -13482,6 +13508,10 @@ packages:
|
|||
unist-util-visit: 4.1.2
|
||||
dev: true
|
||||
|
||||
/mdn-data@2.0.28:
|
||||
resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
|
||||
dev: false
|
||||
|
||||
/mdn-data@2.0.30:
|
||||
resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
|
||||
|
||||
|
|
@ -16617,6 +16647,19 @@ packages:
|
|||
resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
|
||||
dev: false
|
||||
|
||||
/svgo@3.0.2:
|
||||
resolution: {integrity: sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
'@trysound/sax': 0.2.0
|
||||
commander: 7.2.0
|
||||
css-select: 5.1.0
|
||||
css-tree: 2.3.1
|
||||
csso: 5.0.5
|
||||
picocolors: 1.0.0
|
||||
dev: false
|
||||
|
||||
/symbol-tree@3.2.4:
|
||||
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
|
||||
dev: true
|
||||
|
|
@ -17505,6 +17548,13 @@ packages:
|
|||
- supports-color
|
||||
dev: false
|
||||
|
||||
/vite-svg-loader@4.0.0:
|
||||
resolution: {integrity: sha512-0MMf1yzzSYlV4MGePsLVAOqXsbF5IVxbn4EEzqRnWxTQl8BJg/cfwIzfQNmNQxZp5XXwd4kyRKF1LytuHZTnqA==}
|
||||
dependencies:
|
||||
'@vue/compiler-sfc': 3.3.4
|
||||
svgo: 3.0.2
|
||||
dev: false
|
||||
|
||||
/vite@4.4.9(@types/node@18.17.8)(sass@1.66.1):
|
||||
resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
|
|
|
|||
Loading…
Reference in a new issue