Skip to content

Commit

Permalink
fix: use assetsDir in creating vite config (#10732)
Browse files Browse the repository at this point in the history
Co-authored-by: Emanuele Stoppa <[email protected]>
  • Loading branch information
Rishi Raj Jain and ematipico authored Apr 16, 2024
1 parent 9066947 commit a92e263
Show file tree
Hide file tree
Showing 14 changed files with 150 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/afraid-laws-speak.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"astro": patch
---

Correctly sets `build.assets` directory during `vite` config setup
1 change: 1 addition & 0 deletions packages/astro/src/core/create-vite.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
36 changes: 36 additions & 0 deletions packages/astro/test/astro-assets-dir.test.js
Original file line number Diff line number Diff line change
@@ -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()
)
);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import react from '@astrojs/react';
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
integrations: [react()],
});
11 changes: 11 additions & 0 deletions packages/astro/test/fixtures/astro-assets-dir/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
title: My Post
cover: ../../assets/penguin1.jpg
---

Hello world
Original file line number Diff line number Diff line change
@@ -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,
};
16 changes: 16 additions & 0 deletions packages/astro/test/fixtures/astro-assets-dir/src/pages/blog.astro
Original file line number Diff line number Diff line change
@@ -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>
))
}
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Assets Prefix

Relative image has assetsPrefix

![Relative image](../assets/penguin1.jpg)

![non-UTF-8 file name image](../assets/ペンギン.jpg)
15 changes: 15 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit a92e263

Please sign in to comment.