diff --git a/.changeset/afraid-laws-speak.md b/.changeset/afraid-laws-speak.md new file mode 100644 index 000000000000..62e4a8bd6f04 --- /dev/null +++ b/.changeset/afraid-laws-speak.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Correctly sets `build.assets` directory during `vite` config setup diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts index cc32fb6f165d..a1771ad8cbce 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -208,6 +208,7 @@ export async function createVite( noExternal: [...ALWAYS_NOEXTERNAL, ...astroPkgsConfig.ssr.noExternal], external: [...(mode === 'dev' ? ONLY_DEV_EXTERNAL : []), ...astroPkgsConfig.ssr.external], }, + build: { assetsDir: settings.config.build.assets }, }; // If the user provides a custom assets prefix, make sure assets handled by Vite diff --git a/packages/astro/test/astro-assets-dir.test.js b/packages/astro/test/astro-assets-dir.test.js new file mode 100644 index 000000000000..453248987aab --- /dev/null +++ b/packages/astro/test/astro-assets-dir.test.js @@ -0,0 +1,36 @@ +import assert from 'node:assert/strict'; +import { before, describe, it } from 'node:test'; +import { loadFixture } from './test-utils.js'; + +describe('assets dir takes the URL path inside the output directory', () => { + /** @type {URL} */ + let checkDir; + before(async () => { + const fixture = await loadFixture({ + root: './fixtures/astro-assets-dir/', + build: { + assets: 'custom_dir_1', + }, + integrations: [ + { + name: '@astrojs/dir', + hooks: { + 'astro:build:done': ({ dir }) => { + checkDir = dir; + }, + }, + }, + ], + }); + await fixture.build(); + }); + it('generates the assets directory as per build.assets configuration', async () => { + const removeTrailingSlash = (str) => str.replace(/\/$/, ''); + assert.equal( + removeTrailingSlash(new URL('./custom_dir_1', checkDir).toString()), + removeTrailingSlash( + new URL('./fixtures/astro-assets-dir/dist/custom_dir_1', import.meta.url).toString() + ) + ); + }); +}); diff --git a/packages/astro/test/fixtures/astro-assets-dir/astro.config.mjs b/packages/astro/test/fixtures/astro-assets-dir/astro.config.mjs new file mode 100644 index 000000000000..e7ce274c003a --- /dev/null +++ b/packages/astro/test/fixtures/astro-assets-dir/astro.config.mjs @@ -0,0 +1,7 @@ +import react from '@astrojs/react'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [react()], +}); diff --git a/packages/astro/test/fixtures/astro-assets-dir/package.json b/packages/astro/test/fixtures/astro-assets-dir/package.json new file mode 100644 index 000000000000..e4c2518a59b6 --- /dev/null +++ b/packages/astro/test/fixtures/astro-assets-dir/package.json @@ -0,0 +1,11 @@ +{ + "name": "@test/astro-assets-dir", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/react": "workspace:*", + "astro": "workspace:*", + "react": "^18.2.0", + "react-dom": "^18.2.0" + } +} diff --git a/packages/astro/test/fixtures/astro-assets-dir/src/assets/penguin1.jpg b/packages/astro/test/fixtures/astro-assets-dir/src/assets/penguin1.jpg new file mode 100644 index 000000000000..1a8986ac5092 Binary files /dev/null and b/packages/astro/test/fixtures/astro-assets-dir/src/assets/penguin1.jpg differ diff --git "a/packages/astro/test/fixtures/astro-assets-dir/src/assets/\343\203\232\343\203\263\343\202\256\343\203\263.jpg" "b/packages/astro/test/fixtures/astro-assets-dir/src/assets/\343\203\232\343\203\263\343\202\256\343\203\263.jpg" new file mode 100644 index 000000000000..1a8986ac5092 Binary files /dev/null and "b/packages/astro/test/fixtures/astro-assets-dir/src/assets/\343\203\232\343\203\263\343\202\256\343\203\263.jpg" differ diff --git a/packages/astro/test/fixtures/astro-assets-dir/src/components/Counter.jsx b/packages/astro/test/fixtures/astro-assets-dir/src/components/Counter.jsx new file mode 100644 index 000000000000..56c220522605 --- /dev/null +++ b/packages/astro/test/fixtures/astro-assets-dir/src/components/Counter.jsx @@ -0,0 +1,11 @@ +import React, { useState } from 'react'; + +export default function Counter() { + const [count, setCount] = useState(0); + return ( +
+
Count: {count}
+ +
+ ); +} diff --git a/packages/astro/test/fixtures/astro-assets-dir/src/content/blog/my-post.md b/packages/astro/test/fixtures/astro-assets-dir/src/content/blog/my-post.md new file mode 100644 index 000000000000..82c1bbb8622b --- /dev/null +++ b/packages/astro/test/fixtures/astro-assets-dir/src/content/blog/my-post.md @@ -0,0 +1,6 @@ +--- +title: My Post +cover: ../../assets/penguin1.jpg +--- + +Hello world diff --git a/packages/astro/test/fixtures/astro-assets-dir/src/content/config.ts b/packages/astro/test/fixtures/astro-assets-dir/src/content/config.ts new file mode 100644 index 000000000000..185048665589 --- /dev/null +++ b/packages/astro/test/fixtures/astro-assets-dir/src/content/config.ts @@ -0,0 +1,12 @@ +import { defineCollection, z } from "astro:content"; + +const blogCollection = defineCollection({ + schema: ({image}) => z.object({ + title: z.string(), + cover: image(), + }), +}); + +export const collections = { + blog: blogCollection, +}; diff --git a/packages/astro/test/fixtures/astro-assets-dir/src/pages/blog.astro b/packages/astro/test/fixtures/astro-assets-dir/src/pages/blog.astro new file mode 100644 index 000000000000..13729ec0abbc --- /dev/null +++ b/packages/astro/test/fixtures/astro-assets-dir/src/pages/blog.astro @@ -0,0 +1,16 @@ +--- +import { Image } from "astro:assets"; +import { getCollection } from "astro:content"; +const allBlogPosts = await getCollection("blog"); +--- + +{ + allBlogPosts.map((post) => ( +
+ cover +

+ {post.data.title} +

+
+ )) +} diff --git a/packages/astro/test/fixtures/astro-assets-dir/src/pages/index.astro b/packages/astro/test/fixtures/astro-assets-dir/src/pages/index.astro new file mode 100644 index 000000000000..4158153205f4 --- /dev/null +++ b/packages/astro/test/fixtures/astro-assets-dir/src/pages/index.astro @@ -0,0 +1,23 @@ +--- +import { Image } from 'astro:assets' +import p1Image from '../assets/penguin1.jpg'; +import Counter from '../components/Counter.jsx'; +--- + + + + Assets Prefix + + +

I am red

+ penguin + penguin + +

{typeof import.meta.env.ASSETS_PREFIX === 'string' ? import.meta.env.ASSETS_PREFIX : JSON.stringify(import.meta.env.ASSETS_PREFIX)}

+ + + diff --git a/packages/astro/test/fixtures/astro-assets-dir/src/pages/markdown.md b/packages/astro/test/fixtures/astro-assets-dir/src/pages/markdown.md new file mode 100644 index 000000000000..06c4f7fcfdbb --- /dev/null +++ b/packages/astro/test/fixtures/astro-assets-dir/src/pages/markdown.md @@ -0,0 +1,7 @@ +# Assets Prefix + +Relative image has assetsPrefix + +![Relative image](../assets/penguin1.jpg) + +![non-UTF-8 file name image](../assets/ペンギン.jpg) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f876f97ee6fc..f8cb84e92944 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1800,6 +1800,21 @@ importers: specifier: workspace:* version: link:../../.. + packages/astro/test/fixtures/astro-assets-dir: + dependencies: + '@astrojs/react': + specifier: workspace:* + version: link:../../../../integrations/react + astro: + specifier: workspace:* + version: link:../../.. + react: + specifier: ^18.2.0 + version: 18.2.0 + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) + packages/astro/test/fixtures/astro-assets-prefix: dependencies: '@astrojs/react':