diff options
8 files changed, 95 insertions, 13 deletions
diff --git a/.changeset/disable-asset-with-query.md b/.changeset/disable-asset-with-query.md new file mode 100644 index 000000000..3eca21a62 --- /dev/null +++ b/.changeset/disable-asset-with-query.md @@ -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> +``` + diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts index f194e5288..d91d0e492 100644 --- a/packages/astro/src/assets/vite-plugin-assets.ts +++ b/packages/astro/src/assets/vite-plugin-assets.ts @@ -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)}`; } diff --git a/packages/integrations/vue/test/app-entrypoint.test.js b/packages/integrations/vue/test/app-entrypoint.test.js index 5c9ea840c..4f4f389d1 100644 --- a/packages/integrations/vue/test/app-entrypoint.test.js +++ b/packages/integrations/vue/test/app-entrypoint.test.js @@ -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; + }); }); diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/astro.config.mjs b/packages/integrations/vue/test/fixtures/app-entrypoint/astro.config.mjs index 0bf5fd95d..fa04f9c8b 100644 --- a/packages/integrations/vue/test/fixtures/app-entrypoint/astro.config.mjs +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/astro.config.mjs @@ -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(), + ], + }, }) diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/package.json b/packages/integrations/vue/test/fixtures/app-entrypoint/package.json index 3cb7d419b..abdab9e4c 100644 --- a/packages/integrations/vue/test/fixtures/app-entrypoint/package.json +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "astro": "workspace:*", - "@astrojs/vue": "workspace:*" + "@astrojs/vue": "workspace:*", + "vite-svg-loader": "4.0.0" } -} +}
\ No newline at end of file diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Circle.svg b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Circle.svg new file mode 100644 index 000000000..1b207e41a --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Circle.svg @@ -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> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Foo.vue b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Foo.vue index 3e648808c..e07193d36 100644 --- a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Foo.vue +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Foo.vue @@ -1,5 +1,10 @@ +<script setup> +import Circle from './Circle.svg?component' +</script> + <template> <div id="foo"> <Bar /> + <Circle/> </div> </template> diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1ca06eef2..feec7faa1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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} |
