fix: use assetsDir in creating vite config (#10732)

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>
withastro · Apr 16, 2024 · a92e263 · a92e263
1 parent 9066947
commit a92e263
Show file tree

Hide file tree

Showing 14 changed files with 150 additions and 0 deletions.
diff --git a/.changeset/afraid-laws-speak.md 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/packages/astro/test/fixtures/astro-assets-dir/src/assets/ペンギン.jpg b/packages/astro/test/fixtures/astro-assets-dir/src/assets/ペンギン.jpg
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
@@ -0,0 +1,11 @@
+import React, { useState } from 'react';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <div>Count: {count}</div>
+      <button type="button" onClick={() => setCount(count+1)}>Increment</button>
+    </div>
+  );
+}
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
@@ -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
@@ -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
@@ -0,0 +1,16 @@
+---
+import { Image } from "astro:assets";
+import { getCollection } from "astro:content";
+const allBlogPosts = await getCollection("blog");
+---
+
+{
+  allBlogPosts.map((post) => (
+    <div>
+      <Image src={post.data.cover} alt="cover" width="100" height="100" />
+      <h2>
+        <a href={"/blog/" + post.slug}>{post.data.title}</a>
+      </h2>
+    </div>
+  ))
+}
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
@@ -0,0 +1,23 @@
+---
+import { Image } from 'astro:assets'
+import p1Image from '../assets/penguin1.jpg';
+import Counter from '../components/Counter.jsx';
+---
+
+<html lang="en">
+  <head>
+    <title>Assets Prefix</title>
+  </head>
+  <body>
+    <h1>I am red</h1>
+    <img id="image-asset" src={p1Image.src} width={p1Image.width} height={p1Image.height} alt="penguin" />
+    <Image src={p1Image} alt="penguin" />
+    <Counter client:load />
+    <p id="assets-prefix-env">{typeof import.meta.env.ASSETS_PREFIX === 'string' ? import.meta.env.ASSETS_PREFIX : JSON.stringify(import.meta.env.ASSETS_PREFIX)}</p>
+    <style>
+      h1 {
+        color: red;
+      }
+    </style>
+  </body>
+</html>
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
@@ -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