Skip to content

Commit a92e263

Browse files
Rishi Raj Jainematipico
Rishi Raj Jain
and
ematipico
authored
fix: use assetsDir in creating vite config (#10732)
Co-authored-by: Emanuele Stoppa <[email protected]>
1 parent 9066947 commit a92e263

File tree

14 files changed

+150
-0
lines changed

14 files changed

+150
-0
lines changed

‎.changeset/afraid-laws-speak.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"astro": patch
3+
---
4+
5+
Correctly sets `build.assets` directory during `vite` config setup

‎packages/astro/src/core/create-vite.ts

+1
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,7 @@ export async function createVite(
208208
noExternal: [...ALWAYS_NOEXTERNAL, ...astroPkgsConfig.ssr.noExternal],
209209
external: [...(mode === 'dev' ? ONLY_DEV_EXTERNAL : []), ...astroPkgsConfig.ssr.external],
210210
},
211+
build: { assetsDir: settings.config.build.assets },
211212
};
212213

213214
// If the user provides a custom assets prefix, make sure assets handled by Vite

‎packages/astro/test/astro-assets-dir.test.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import assert from 'node:assert/strict';
2+
import { before, describe, it } from 'node:test';
3+
import { loadFixture } from './test-utils.js';
4+
5+
describe('assets dir takes the URL path inside the output directory', () => {
6+
/** @type {URL} */
7+
let checkDir;
8+
before(async () => {
9+
const fixture = await loadFixture({
10+
root: './fixtures/astro-assets-dir/',
11+
build: {
12+
assets: 'custom_dir_1',
13+
},
14+
integrations: [
15+
{
16+
name: '@astrojs/dir',
17+
hooks: {
18+
'astro:build:done': ({ dir }) => {
19+
checkDir = dir;
20+
},
21+
},
22+
},
23+
],
24+
});
25+
await fixture.build();
26+
});
27+
it('generates the assets directory as per build.assets configuration', async () => {
28+
const removeTrailingSlash = (str) => str.replace(/\/$/, '');
29+
assert.equal(
30+
removeTrailingSlash(new URL('./custom_dir_1', checkDir).toString()),
31+
removeTrailingSlash(
32+
new URL('./fixtures/astro-assets-dir/dist/custom_dir_1', import.meta.url).toString()
33+
)
34+
);
35+
});
36+
});

‎packages/astro/test/fixtures/astro-assets-dir/astro.config.mjs

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import react from '@astrojs/react';
2+
import { defineConfig } from 'astro/config';
3+
4+
// https://astro.build/config
5+
export default defineConfig({
6+
integrations: [react()],
7+
});

‎packages/astro/test/fixtures/astro-assets-dir/package.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "@test/astro-assets-dir",
3+
"version": "0.0.0",
4+
"private": true,
5+
"dependencies": {
6+
"@astrojs/react": "workspace:*",
7+
"astro": "workspace:*",
8+
"react": "^18.2.0",
9+
"react-dom": "^18.2.0"
10+
}
11+
}

‎packages/astro/test/fixtures/astro-assets-dir/src/assets/penguin1.jpg

11.3 KB
Loading

‎packages/astro/test/fixtures/astro-assets-dir/src/assets/ペンギン.jpg

11.3 KB
Loading

‎packages/astro/test/fixtures/astro-assets-dir/src/components/Counter.jsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React, { useState } from 'react';
2+
3+
export default function Counter() {
4+
const [count, setCount] = useState(0);
5+
return (
6+
<div>
7+
<div>Count: {count}</div>
8+
<button type="button" onClick={() => setCount(count+1)}>Increment</button>
9+
</div>
10+
);
11+
}

‎packages/astro/test/fixtures/astro-assets-dir/src/content/blog/my-post.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: My Post
3+
cover: ../../assets/penguin1.jpg
4+
---
5+
6+
Hello world

‎packages/astro/test/fixtures/astro-assets-dir/src/content/config.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineCollection, z } from "astro:content";
2+
3+
const blogCollection = defineCollection({
4+
schema: ({image}) => z.object({
5+
title: z.string(),
6+
cover: image(),
7+
}),
8+
});
9+
10+
export const collections = {
11+
blog: blogCollection,
12+
};

‎packages/astro/test/fixtures/astro-assets-dir/src/pages/blog.astro

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
import { Image } from "astro:assets";
3+
import { getCollection } from "astro:content";
4+
const allBlogPosts = await getCollection("blog");
5+
---
6+
7+
{
8+
allBlogPosts.map((post) => (
9+
<div>
10+
<Image src={post.data.cover} alt="cover" width="100" height="100" />
11+
<h2>
12+
<a href={"/blog/" + post.slug}>{post.data.title}</a>
13+
</h2>
14+
</div>
15+
))
16+
}

‎packages/astro/test/fixtures/astro-assets-dir/src/pages/index.astro

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
import { Image } from 'astro:assets'
3+
import p1Image from '../assets/penguin1.jpg';
4+
import Counter from '../components/Counter.jsx';
5+
---
6+
7+
<html lang="en">
8+
<head>
9+
<title>Assets Prefix</title>
10+
</head>
11+
<body>
12+
<h1>I am red</h1>
13+
<img id="image-asset" src={p1Image.src} width={p1Image.width} height={p1Image.height} alt="penguin" />
14+
<Image src={p1Image} alt="penguin" />
15+
<Counter client:load />
16+
<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>
17+
<style>
18+
h1 {
19+
color: red;
20+
}
21+
</style>
22+
</body>
23+
</html>

‎packages/astro/test/fixtures/astro-assets-dir/src/pages/markdown.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Assets Prefix
2+
3+
Relative image has assetsPrefix
4+
5+
![Relative image](../assets/penguin1.jpg)
6+
7+
![non-UTF-8 file name image](../assets/ペンギン.jpg)

‎pnpm-lock.yaml

+15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)