summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Matt Kane <m@mk.gg> 2024-09-18 16:42:44 +0100
committerGravatar Matt Kane <m@mk.gg> 2024-09-18 16:43:14 +0100
commitb0827022afa52a13d49c37c6c549212aecd32cc5 (patch)
tree41e34f22f8fa388ca78e62a2ee802367d7e3cf42
parent837ee3a4aa6b33362bd680d4a7fc786ed8639444 (diff)
parent8d4eb95086ae79339764d02215f84f4f21b96edc (diff)
downloadastro-b0827022afa52a13d49c37c6c549212aecd32cc5.tar.gz
astro-b0827022afa52a13d49c37c6c549212aecd32cc5.tar.zst
astro-b0827022afa52a13d49c37c6c549212aecd32cc5.zip
Merge branch 'main' into next
-rw-r--r--.changeset/beige-points-search.md5
-rw-r--r--examples/component/package.json2
-rw-r--r--examples/server-islands/package.json2
-rw-r--r--packages/astro/CHANGELOG.md8
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/astro.config.mjs7
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/package.json4
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/src/components/SvelteCounter.svelte7
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/src/components/VueCounter.vue12
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/src/components/solid/Counter.jsx19
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-one.astro11
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-two.astro11
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-one.astro11
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-two.astro11
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-one.astro11
-rw-r--r--packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-two.astro11
-rw-r--r--packages/astro/e2e/view-transitions.test.js63
-rw-r--r--packages/astro/src/content/runtime.ts13
-rw-r--r--packages/astro/src/content/vite-plugin-content-virtual-mod.ts8
-rw-r--r--packages/astro/src/transitions/swap-functions.ts10
-rw-r--r--packages/integrations/mdx/test/css-head-mdx.test.js1
-rw-r--r--packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro6
-rw-r--r--packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts18
-rw-r--r--packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/_styles.css (renamed from packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/_styles.css)0
-rw-r--r--packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/using-mdx.mdx (renamed from packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/using-mdx.mdx)0
-rw-r--r--packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/test.mdx (renamed from packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/test.mdx)0
-rw-r--r--packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/using-component.mdx (renamed from packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx)0
-rw-r--r--packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro8
-rw-r--r--packages/integrations/solid/CHANGELOG.md6
-rw-r--r--packages/integrations/solid/package.json2
-rw-r--r--packages/integrations/solid/src/client.ts67
-rw-r--r--packages/integrations/svelte/CHANGELOG.md6
-rw-r--r--packages/integrations/svelte/client-v5.js22
-rw-r--r--packages/integrations/svelte/client.js29
-rw-r--r--packages/integrations/svelte/package.json2
-rw-r--r--packages/integrations/tailwind/CHANGELOG.md6
-rw-r--r--packages/integrations/tailwind/package.json4
-rw-r--r--packages/integrations/vue/CHANGELOG.md6
-rw-r--r--packages/integrations/vue/client.js46
-rw-r--r--packages/integrations/vue/package.json2
-rw-r--r--pnpm-lock.yaml8
40 files changed, 372 insertions, 93 deletions
diff --git a/.changeset/beige-points-search.md b/.changeset/beige-points-search.md
new file mode 100644
index 000000000..ed7909972
--- /dev/null
+++ b/.changeset/beige-points-search.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes an issue where component styles were not correctly included in rendered MDX
diff --git a/examples/component/package.json b/examples/component/package.json
index 26c15283b..660700e48 100644
--- a/examples/component/package.json
+++ b/examples/component/package.json
@@ -18,6 +18,6 @@
"astro": "^5.0.0-beta.1"
},
"peerDependencies": {
- "astro": "^4.0.0"
+ "astro": "^4.0.0 || ^5.0.0"
}
}
diff --git a/examples/server-islands/package.json b/examples/server-islands/package.json
index 4d63c25b4..6e1379256 100644
--- a/examples/server-islands/package.json
+++ b/examples/server-islands/package.json
@@ -12,7 +12,7 @@
"devDependencies": {
"@astrojs/node": "^9.0.0-alpha.1",
"@astrojs/react": "^3.6.2",
- "@astrojs/tailwind": "^5.1.0",
+ "@astrojs/tailwind": "^5.1.1",
"@fortawesome/fontawesome-free": "^6.6.0",
"@tailwindcss/forms": "^0.5.9",
"@types/react": "^18.3.5",
diff --git a/packages/astro/CHANGELOG.md b/packages/astro/CHANGELOG.md
index c507f841d..02ef40186 100644
--- a/packages/astro/CHANGELOG.md
+++ b/packages/astro/CHANGELOG.md
@@ -215,6 +215,14 @@
- [#11974](https://github.com/withastro/astro/pull/11974) [`60211de`](https://github.com/withastro/astro/commit/60211defbfb2992ba17d1369e71c146d8928b09a) Thanks [@ascorbic](https://github.com/ascorbic)! - Exports the `RenderResult` type
+## 4.15.7
+
+### Patch Changes
+
+- [#12000](https://github.com/withastro/astro/pull/12000) [`a2f8c5d`](https://github.com/withastro/astro/commit/a2f8c5d85ff15803f5cedf9148cd70ffc138ddef) Thanks [@ArmandPhilippot](https://github.com/ArmandPhilippot)! - Fixes an outdated link used to document Content Layer API
+
+- [#11915](https://github.com/withastro/astro/pull/11915) [`0b59fe7`](https://github.com/withastro/astro/commit/0b59fe74d5922c572007572ddca8d11482e2fb5c) Thanks [@azhirov](https://github.com/azhirov)! - Fix: prevent island from re-rendering when using transition:persist (#11854)
+
## 4.15.6
### Patch Changes
diff --git a/packages/astro/e2e/fixtures/view-transitions/astro.config.mjs b/packages/astro/e2e/fixtures/view-transitions/astro.config.mjs
index 4fdc70ff8..15487f1c4 100644
--- a/packages/astro/e2e/fixtures/view-transitions/astro.config.mjs
+++ b/packages/astro/e2e/fixtures/view-transitions/astro.config.mjs
@@ -1,6 +1,7 @@
import nodejs from '@astrojs/node';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
+import solidjs from '@astrojs/solid-js';
import vue from '@astrojs/vue';
import { defineConfig } from 'astro/config';
@@ -8,7 +9,11 @@ import { defineConfig } from 'astro/config';
export default defineConfig({
output: 'static',
adapter: nodejs({ mode: 'standalone' }),
- integrations: [react(),vue(),svelte()],
+ integrations: [react( {
+ exclude: ['**/solid/**'],
+ }),vue(),svelte(),solidjs({
+ include: ['**/solid/**'],
+ })],
redirects: {
'/redirect-two': '/two',
'/redirect-external': 'http://example.com/',
diff --git a/packages/astro/e2e/fixtures/view-transitions/package.json b/packages/astro/e2e/fixtures/view-transitions/package.json
index 48cf30a9a..08aae1afc 100644
--- a/packages/astro/e2e/fixtures/view-transitions/package.json
+++ b/packages/astro/e2e/fixtures/view-transitions/package.json
@@ -7,10 +7,12 @@
"@astrojs/react": "workspace:*",
"@astrojs/svelte": "workspace:*",
"@astrojs/vue": "workspace:*",
+ "@astrojs/solid-js": "workspace:*",
"astro": "workspace:*",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"svelte": "^4.2.19",
- "vue": "^3.5.3"
+ "vue": "^3.5.3",
+ "solid-js": "^1.8.0"
}
}
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/SvelteCounter.svelte b/packages/astro/e2e/fixtures/view-transitions/src/components/SvelteCounter.svelte
index 6647a19ce..669ee1a5a 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/components/SvelteCounter.svelte
+++ b/packages/astro/e2e/fixtures/view-transitions/src/components/SvelteCounter.svelte
@@ -1,5 +1,6 @@
<script lang="ts">
let count = 0;
+ export let prefix = "";
function add() {
count += 1;
@@ -11,9 +12,9 @@
</script>
<div class="counter">
- <button on:click={subtract}>-</button>
- <pre>{count}</pre>
- <button on:click={add}>+</button>
+ <button on:click={subtract} class="decrement">-</button>
+ <pre>{prefix}{count}</pre>
+ <button on:click={add} class="increment">+</button>
</div>
<div class="message">
<slot />
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/VueCounter.vue b/packages/astro/e2e/fixtures/view-transitions/src/components/VueCounter.vue
index e75620aff..e05cf6a14 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/components/VueCounter.vue
+++ b/packages/astro/e2e/fixtures/view-transitions/src/components/VueCounter.vue
@@ -1,8 +1,8 @@
<template>
<div class="counter">
- <button @click="subtract()">-</button>
- <pre>{{ count }}</pre>
- <button @click="add()">+</button>
+ <button @click="subtract()" class="decrement">-</button>
+ <pre>{{prefix}}{{ count }}</pre>
+ <button @click="add()" class="increment">+</button>
</div>
<div class="counter-message">
<slot />
@@ -12,6 +12,12 @@
<script lang="ts">
import { ref } from 'vue';
export default {
+ props: {
+ prefix: {
+ type: String,
+ default: '',
+ },
+ },
setup() {
const count = ref(0);
const add = () => (count.value = count.value + 1);
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/solid/Counter.jsx b/packages/astro/e2e/fixtures/view-transitions/src/components/solid/Counter.jsx
new file mode 100644
index 000000000..13c8dd193
--- /dev/null
+++ b/packages/astro/e2e/fixtures/view-transitions/src/components/solid/Counter.jsx
@@ -0,0 +1,19 @@
+import {createSignal} from "solid-js";
+
+export default function Counter(props) {
+ const [count, setCount] = createSignal(0);
+ const add = () => setCount(count() + 1);
+ const subtract = () => setCount(count() - 1);
+
+ return (
+ <>
+ <div class="counter">
+ <button onClick={subtract} class="decrement">-</button>
+
+ <pre>{props.prefix ?? ''}{count()}{props.postfix ?? ""}</pre>
+ <button onClick={add} class="increment">+</button>
+ </div>
+ <div class="counter-message">{props.children}</div>
+ </>
+ );
+}
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-one.astro
new file mode 100644
index 000000000..92a58eaa7
--- /dev/null
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-one.astro
@@ -0,0 +1,11 @@
+---
+import Layout from '../components/Layout.astro';
+import Counter from '../components/solid/Counter.jsx';
+export const prerender = false;
+
+---
+<Layout>
+ <p id="island-one">Page 1</p>
+ <a id="click-two" href="/island-solid-two">go to 2</a>
+ <Counter prefix="A" client:load transition:persist transition:name="counter" />
+</Layout>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-two.astro
new file mode 100644
index 000000000..3d17f32b3
--- /dev/null
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-two.astro
@@ -0,0 +1,11 @@
+---
+import Layout from '../components/Layout.astro';
+import Counter from '../components/solid/Counter.jsx';
+export const prerender = false;
+
+---
+<Layout>
+ <p id="island-two">Page 2</p>
+ <a id="click-one" href="/island-solid-one">go to 1</a>
+ <Counter prefix="B" postfix="!" client:load transition:persist transition:name="counter" />
+</Layout>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-one.astro
new file mode 100644
index 000000000..c60dfa9c9
--- /dev/null
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-one.astro
@@ -0,0 +1,11 @@
+---
+import Counter from '../components/SvelteCounter.svelte';
+import Layout from '../components/Layout.astro';
+export const prerender = false;
+
+---
+<Layout>
+ <p id="island-one">Page 1</p>
+ <a id="click-two" href="/island-svelte-two">go to 2</a>
+ <Counter prefix="A" client:load transition:persist transition:name="counter"/>
+</Layout>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-two.astro
new file mode 100644
index 000000000..63222bacb
--- /dev/null
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-two.astro
@@ -0,0 +1,11 @@
+---
+import Counter from '../components/SvelteCounter.svelte';
+import Layout from '../components/Layout.astro';
+export const prerender = false;
+
+---
+<Layout>
+ <p id="island-two">Page 2</p>
+ <a id="click-one" href="/island-svelte-one">go to 1</a>
+ <Counter prefix="B" client:load transition:persist transition:name="counter"/>
+</Layout>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-one.astro
new file mode 100644
index 000000000..b8ce5e48d
--- /dev/null
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-one.astro
@@ -0,0 +1,11 @@
+---
+import Layout from '../components/Layout.astro';
+import Counter from '../components/VueCounter.vue';
+export const prerender = false;
+
+---
+<Layout>
+ <p id="island-one">Page 1</p>
+ <a id="click-two" href="/island-vue-two">go to 2</a>
+ <Counter prefix="AA" client:load transition:persist transition:name="counter" />
+</Layout>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-two.astro
new file mode 100644
index 000000000..5c688be79
--- /dev/null
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-two.astro
@@ -0,0 +1,11 @@
+---
+import Layout from '../components/Layout.astro';
+import Counter from '../components/VueCounter.vue';
+export const prerender = false;
+
+---
+<Layout>
+ <p id="island-two">Page 2</p>
+ <a id="click-two" href="/island-vue-one">go to 1</a>
+ <Counter prefix="BB" client:load transition:persist transition:name="counter" />
+</Layout>
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index 878b9c5fe..042161219 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/packages/astro/e2e/view-transitions.test.js
@@ -522,7 +522,7 @@ test.describe('View Transitions', () => {
expect(secondTime).toBeGreaterThanOrEqual(firstTime);
});
- test('Islands can persist using transition:persist', async ({ page, astro }) => {
+ test('React Islands can persist using transition:persist', async ({ page, astro }) => {
// Go to page 1
await page.goto(astro.resolveUrl('/island-one'));
let cnt = page.locator('.counter pre');
@@ -544,6 +544,67 @@ test.describe('View Transitions', () => {
await expect(pageTitle).toHaveText('Island 2');
});
+ test('Solid Islands can persist using transition:persist', async ({ page, astro }) => {
+ // Go to page 1
+ await page.goto(astro.resolveUrl('/island-solid-one'));
+ let cnt = page.locator('.counter pre');
+ await expect(cnt).toHaveText('A0');
+
+ await page.click('.increment');
+ await expect(cnt).toHaveText('A1');
+
+ // Navigate to page 2
+ await page.click('#click-two');
+ let p = page.locator('#island-two');
+ await expect(p).toBeVisible();
+ cnt = page.locator('.counter pre');
+ // Count should remain, but the prefix should be updated
+ await expect(cnt).toHaveText('B1!');
+
+ await page.click('#click-one');
+ p = page.locator('#island-one');
+ await expect(p).toBeVisible();
+ cnt = page.locator('.counter pre');
+ // Count should remain, but the postfix should be removed again (to test unsetting props)
+ await expect(cnt).toHaveText('A1');
+ });
+
+ test('Svelte Islands can persist using transition:persist', async ({ page, astro }) => {
+ // Go to page 1
+ await page.goto(astro.resolveUrl('/island-svelte-one'));
+ let cnt = page.locator('.counter pre');
+ await expect(cnt).toHaveText('A0');
+
+ await page.click('.increment');
+ await expect(cnt).toHaveText('A1');
+
+ // Navigate to page 2
+ await page.click('#click-two');
+ let p = page.locator('#island-two');
+ await expect(p).toBeVisible();
+ cnt = page.locator('.counter pre');
+ // Count should remain, but the prefix should be updated
+ await expect(cnt).toHaveText('B1');
+ });
+
+ test('Vue Islands can persist using transition:persist', async ({ page, astro }) => {
+ // Go to page 1
+ await page.goto(astro.resolveUrl('/island-vue-one'));
+ let cnt = page.locator('.counter pre');
+ await expect(cnt).toHaveText('AA0');
+
+ await page.click('.increment');
+ await expect(cnt).toHaveText('AA1');
+
+ // Navigate to page 2
+ await page.click('#click-two');
+ const p = page.locator('#island-two');
+ await expect(p).toBeVisible();
+ cnt = page.locator('.counter pre');
+ // Count should remain, but the prefix should be updated
+ await expect(cnt).toHaveText('BB1');
+ });
+
test('transition:persist-props prevents props from changing', async ({ page, astro }) => {
// Go to page 1
await page.goto(astro.resolveUrl('/island-one?persist'));
diff --git a/packages/astro/src/content/runtime.ts b/packages/astro/src/content/runtime.ts
index 5f6cc938c..1acc33da0 100644
--- a/packages/astro/src/content/runtime.ts
+++ b/packages/astro/src/content/runtime.ts
@@ -444,13 +444,12 @@ export async function renderEntry(
try {
// @ts-expect-error virtual module
const { default: contentModules } = await import('astro:content-module-imports');
- const module = contentModules.get(entry.filePath);
- const deferredMod = await module();
- return {
- Content: deferredMod.Content,
- headings: deferredMod.getHeadings?.() ?? [],
- remarkPluginFrontmatter: deferredMod.frontmatter ?? {},
- };
+ const renderEntryImport = contentModules.get(entry.filePath);
+ return render({
+ collection: '',
+ id: entry.id,
+ renderEntryImport,
+ });
} catch (e) {
// eslint-disable-next-line
console.error(e);
diff --git a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts
index ca09d1c1e..0c2448493 100644
--- a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts
+++ b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts
@@ -81,12 +81,12 @@ export function astroContentVirtualModPlugin({
const [, query] = id.split('?');
const params = new URLSearchParams(query);
const fileName = params.get('fileName');
- let importerPath = undefined;
+ let importPath = undefined;
if (fileName && URL.canParse(fileName, settings.config.root.toString())) {
- importerPath = fileURLToPath(new URL(fileName, settings.config.root));
+ importPath = fileURLToPath(new URL(fileName, settings.config.root));
}
- if (importerPath) {
- return await this.resolve(importerPath);
+ if (importPath) {
+ return await this.resolve(`${importPath}?${CONTENT_RENDER_FLAG}`);
}
}
diff --git a/packages/astro/src/transitions/swap-functions.ts b/packages/astro/src/transitions/swap-functions.ts
index e2d8557f5..c99de8d3d 100644
--- a/packages/astro/src/transitions/swap-functions.ts
+++ b/packages/astro/src/transitions/swap-functions.ts
@@ -77,7 +77,11 @@ export function swapBodyElement(newElement: Element, oldElement: Element) {
// from the old page so that state is preserved.
newEl.replaceWith(el);
// For islands, copy over the props to allow them to re-render
- if (newEl.localName === 'astro-island' && shouldCopyProps(el as HTMLElement)) {
+ if (
+ newEl.localName === 'astro-island' &&
+ shouldCopyProps(el as HTMLElement) &&
+ !isSameProps(el, newEl)
+ ) {
el.setAttribute('ssr', '');
el.setAttribute('props', newEl.getAttribute('props')!);
}
@@ -133,6 +137,10 @@ const shouldCopyProps = (el: HTMLElement): boolean => {
return persistProps == null || persistProps === 'false';
};
+const isSameProps = (oldEl: Element, newEl: Element) => {
+ return oldEl.getAttribute('props') === newEl.getAttribute('props');
+};
+
export const swapFunctions = {
deselectScripts,
swapRootAttributes,
diff --git a/packages/integrations/mdx/test/css-head-mdx.test.js b/packages/integrations/mdx/test/css-head-mdx.test.js
index 96ee7c900..5565cde60 100644
--- a/packages/integrations/mdx/test/css-head-mdx.test.js
+++ b/packages/integrations/mdx/test/css-head-mdx.test.js
@@ -15,6 +15,7 @@ describe('Head injection w/ MDX', () => {
integrations: [mdx()],
// test suite was authored when inlineStylesheets defaulted to never
build: { inlineStylesheets: 'never' },
+ experimental: { contentLayer: true },
});
});
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro
index 1804388b0..3ef9d7639 100644
--- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro
+++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro
@@ -1,8 +1,8 @@
---
-import { getEntryBySlug } from 'astro:content';
+import { getEntry, render } from 'astro:content';
-const launchWeek = await getEntryBySlug('blog', 'using-mdx');
-const { Content } = await launchWeek.render();
+const launchWeek = await getEntry('blog', 'using-mdx');
+const { Content } = await render(launchWeek);
---
<Content />
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts
new file mode 100644
index 000000000..2c8944d51
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts
@@ -0,0 +1,18 @@
+import { defineCollection } from "astro:content";
+import { glob } from "astro/loaders"
+
+const posts = defineCollection({
+ loader: glob({
+ pattern: "*.mdx",
+ base: "src/data/posts",
+ })
+});
+
+const blog = defineCollection({
+ loader: glob({
+ pattern: "*.mdx",
+ base: "src/data/blog",
+ })
+});
+
+export const collections = { posts, blog };
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/_styles.css b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/_styles.css
index 1379b29c0..1379b29c0 100644
--- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/_styles.css
+++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/_styles.css
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/using-mdx.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/using-mdx.mdx
index 917fc3331..917fc3331 100644
--- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/using-mdx.mdx
+++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/using-mdx.mdx
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/test.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/test.mdx
index 0bb1153ca..0bb1153ca 100644
--- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/test.mdx
+++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/test.mdx
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/using-component.mdx
index fa550fb04..fa550fb04 100644
--- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx
+++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/using-component.mdx
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro
index 5afb5be92..13a9e56db 100644
--- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro
+++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro
@@ -1,17 +1,17 @@
---
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
import SmallCaps from '../../components/SmallCaps.astro';
import Layout from '../../layouts/ContentLayout.astro';
export async function getStaticPaths() {
const entries = await getCollection('posts');
return entries.map(entry => {
- return {params: { post: entry.slug }, props: { entry },
- }});
+ return { params: { post: entry.id }, props: { entry }};
+ });
}
const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
---
<Layout title="">
<Content components={{ SmallCaps }} />
diff --git a/packages/integrations/solid/CHANGELOG.md b/packages/integrations/solid/CHANGELOG.md
index bc1d135d0..9f69e7e2f 100644
--- a/packages/integrations/solid/CHANGELOG.md
+++ b/packages/integrations/solid/CHANGELOG.md
@@ -1,5 +1,11 @@
# @astrojs/solid-js
+## 4.4.2
+
+### Patch Changes
+
+- [#11998](https://github.com/withastro/astro/pull/11998) [`082f450`](https://github.com/withastro/astro/commit/082f45094471d52e55c55d3291f541306d9388b1) Thanks [@johannesspohr](https://github.com/johannesspohr)! - Fix view transition state persistence
+
## 4.4.1
### Patch Changes
diff --git a/packages/integrations/solid/package.json b/packages/integrations/solid/package.json
index 5320cc57e..7a3cb6e15 100644
--- a/packages/integrations/solid/package.json
+++ b/packages/integrations/solid/package.json
@@ -1,6 +1,6 @@
{
"name": "@astrojs/solid-js",
- "version": "4.4.1",
+ "version": "4.4.2",
"description": "Use Solid components within Astro",
"type": "module",
"types": "./dist/index.d.ts",
diff --git a/packages/integrations/solid/src/client.ts b/packages/integrations/solid/src/client.ts
index a47c5310d..f2020bb56 100644
--- a/packages/integrations/solid/src/client.ts
+++ b/packages/integrations/solid/src/client.ts
@@ -1,10 +1,12 @@
import { Suspense } from 'solid-js';
+import { createStore, reconcile } from 'solid-js/store';
import { createComponent, hydrate, render } from 'solid-js/web';
+const alreadyInitializedElements = new WeakMap<Element, any>();
+
export default (element: HTMLElement) =>
(Component: any, props: any, slotted: any, { client }: { client: string }) => {
if (!element.hasAttribute('ssr')) return;
-
const isHydrate = client !== 'only';
const bootstrap = isHydrate ? hydrate : render;
@@ -32,31 +34,44 @@ export default (element: HTMLElement) =>
const { default: children, ...slots } = _slots;
const renderId = element.dataset.solidRenderId;
+ if (alreadyInitializedElements.has(element)) {
+ // update the mounted component
+ alreadyInitializedElements.get(element)!(
+ // reconcile will make sure to apply as little updates as possible, and also remove missing values w/o breaking reactivity
+ reconcile({
+ ...props,
+ ...slots,
+ children,
+ }),
+ );
+ } else {
+ const [store, setStore] = createStore({
+ ...props,
+ ...slots,
+ children,
+ });
+ // store the function to update the current mounted component
+ alreadyInitializedElements.set(element, setStore);
- const dispose = bootstrap(
- () => {
- const inner = () =>
- createComponent(Component, {
- ...props,
- ...slots,
- children,
- });
+ const dispose = bootstrap(
+ () => {
+ const inner = () => createComponent(Component, store);
- if (isHydrate) {
- return createComponent(Suspense, {
- get children() {
- return inner();
- },
- });
- } else {
- return inner();
- }
- },
- element,
- {
- renderId,
- },
- );
-
- element.addEventListener('astro:unmount', () => dispose(), { once: true });
+ if (isHydrate) {
+ return createComponent(Suspense, {
+ get children() {
+ return inner();
+ },
+ });
+ } else {
+ return inner();
+ }
+ },
+ element,
+ {
+ renderId,
+ },
+ );
+ element.addEventListener('astro:unmount', () => dispose(), { once: true });
+ }
};
diff --git a/packages/integrations/svelte/CHANGELOG.md b/packages/integrations/svelte/CHANGELOG.md
index a498778af..528b7363c 100644
--- a/packages/integrations/svelte/CHANGELOG.md
+++ b/packages/integrations/svelte/CHANGELOG.md
@@ -7,6 +7,12 @@
- Updated dependencies [[`b6fbdaa`](https://github.com/withastro/astro/commit/b6fbdaa94a9ecec706a99e1938fbf5cd028c72e0), [`89bab1e`](https://github.com/withastro/astro/commit/89bab1e70786123fbe933a9d7a1b80c9334dcc5f), [`d74617c`](https://github.com/withastro/astro/commit/d74617cbd3278feba05909ec83db2d73d57a153e), [`e90f559`](https://github.com/withastro/astro/commit/e90f5593d23043579611452a84b9e18ad2407ef9), [`2df49a6`](https://github.com/withastro/astro/commit/2df49a6fb4f6d92fe45f7429430abe63defeacd6), [`8a53517`](https://github.com/withastro/astro/commit/8a5351737d6a14fc55f1dafad8f3b04079e81af6)]:
- astro@5.0.0-alpha.0
+## 5.7.1
+
+### Patch Changes
+
+- [#12006](https://github.com/withastro/astro/pull/12006) [`a582cb6`](https://github.com/withastro/astro/commit/a582cb61241b9c2a6f95900920145c055d5d6c12) Thanks [@johannesspohr](https://github.com/johannesspohr)! - Fix Svelte component view transition state persistence
+
## 5.7.0
### Minor Changes
diff --git a/packages/integrations/svelte/client-v5.js b/packages/integrations/svelte/client-v5.js
index fda68ee54..78bab3ea3 100644
--- a/packages/integrations/svelte/client-v5.js
+++ b/packages/integrations/svelte/client-v5.js
@@ -1,5 +1,7 @@
import { createRawSnippet, hydrate, mount, unmount } from 'svelte';
+const existingApplications = new WeakMap();
+
export default (element) => {
return async (Component, props, slotted, { client }) => {
if (!element.hasAttribute('ssr')) return;
@@ -21,15 +23,23 @@ export default (element) => {
}
const bootstrap = client !== 'only' ? hydrate : mount;
-
- const component = bootstrap(Component, {
- target: element,
- props: {
+ if (existingApplications.has(element)) {
+ existingApplications.get(element).$set({
...props,
children,
$$slots,
- },
- });
+ });
+ } else {
+ const component = bootstrap(Component, {
+ target: element,
+ props: {
+ ...props,
+ children,
+ $$slots,
+ },
+ });
+ existingApplications.set(element, component);
+ }
element.addEventListener('astro:unmount', () => unmount(component), { once: true });
};
diff --git a/packages/integrations/svelte/client.js b/packages/integrations/svelte/client.js
index 005bbe9da..288c7a661 100644
--- a/packages/integrations/svelte/client.js
+++ b/packages/integrations/svelte/client.js
@@ -3,6 +3,8 @@ const noop = () => {};
let originalConsoleWarning;
let consoleFilterRefs = 0;
+const existingApplications = new WeakMap();
+
export default (element) => {
return (Component, props, slotted, { client }) => {
if (!element.hasAttribute('ssr')) return;
@@ -14,18 +16,23 @@ export default (element) => {
try {
if (import.meta.env.DEV) useConsoleFilter();
- const component = new Component({
- target: element,
- props: {
- ...props,
- $$slots: slots,
- $$scope: { ctx: [] },
- },
- hydrate: client !== 'only',
- $$inline: true,
- });
+ if (existingApplications.has(element)) {
+ existingApplications.get(element).$set({ ...props, $$slots: slots, $$scope: { ctx: [] } });
+ } else {
+ const component = new Component({
+ target: element,
+ props: {
+ ...props,
+ $$slots: slots,
+ $$scope: { ctx: [] },
+ },
+ hydrate: client !== 'only',
+ $$inline: true,
+ });
+ existingApplications.set(element, component);
- element.addEventListener('astro:unmount', () => component.$destroy(), { once: true });
+ element.addEventListener('astro:unmount', () => component.$destroy(), { once: true });
+ }
} finally {
if (import.meta.env.DEV) finishUsingConsoleFilter();
}
diff --git a/packages/integrations/svelte/package.json b/packages/integrations/svelte/package.json
index 663309585..7241dbc6a 100644
--- a/packages/integrations/svelte/package.json
+++ b/packages/integrations/svelte/package.json
@@ -1,6 +1,6 @@
{
"name": "@astrojs/svelte",
- "version": "5.7.0",
+ "version": "5.7.1",
"description": "Use Svelte components within Astro",
"type": "module",
"types": "./dist/index.d.ts",
diff --git a/packages/integrations/tailwind/CHANGELOG.md b/packages/integrations/tailwind/CHANGELOG.md
index cc632bfc2..c2985edef 100644
--- a/packages/integrations/tailwind/CHANGELOG.md
+++ b/packages/integrations/tailwind/CHANGELOG.md
@@ -7,6 +7,12 @@
- Updated dependencies [[`b6fbdaa`](https://github.com/withastro/astro/commit/b6fbdaa94a9ecec706a99e1938fbf5cd028c72e0), [`89bab1e`](https://github.com/withastro/astro/commit/89bab1e70786123fbe933a9d7a1b80c9334dcc5f), [`d74617c`](https://github.com/withastro/astro/commit/d74617cbd3278feba05909ec83db2d73d57a153e), [`e90f559`](https://github.com/withastro/astro/commit/e90f5593d23043579611452a84b9e18ad2407ef9), [`2df49a6`](https://github.com/withastro/astro/commit/2df49a6fb4f6d92fe45f7429430abe63defeacd6), [`8a53517`](https://github.com/withastro/astro/commit/8a5351737d6a14fc55f1dafad8f3b04079e81af6)]:
- astro@5.0.0-alpha.0
+## 5.1.1
+
+### Patch Changes
+
+- [#12018](https://github.com/withastro/astro/pull/12018) [`dcd1158`](https://github.com/withastro/astro/commit/dcd115892a23b17309347c13ce4d82af73d204b2) Thanks [@matthewp](https://github.com/matthewp)! - Make @astrojs/tailwind compat with Astro 5
+
## 5.1.0
### Minor Changes
diff --git a/packages/integrations/tailwind/package.json b/packages/integrations/tailwind/package.json
index 65fd41b5b..3e383437c 100644
--- a/packages/integrations/tailwind/package.json
+++ b/packages/integrations/tailwind/package.json
@@ -1,7 +1,7 @@
{
"name": "@astrojs/tailwind",
"description": "Use Tailwind CSS to style your Astro site",
- "version": "5.1.0",
+ "version": "5.1.1",
"type": "module",
"types": "./dist/index.d.ts",
"author": "withastro",
@@ -44,7 +44,7 @@
"vite": "^5.4.3"
},
"peerDependencies": {
- "astro": "^5.0.0-alpha.0",
+ "astro": "^3.0.0 || ^4.0.0 || ^5.0.0-beta.0",
"tailwindcss": "^3.0.24"
},
"publishConfig": {
diff --git a/packages/integrations/vue/CHANGELOG.md b/packages/integrations/vue/CHANGELOG.md
index 88ff9204e..a6fbc1ca6 100644
--- a/packages/integrations/vue/CHANGELOG.md
+++ b/packages/integrations/vue/CHANGELOG.md
@@ -7,6 +7,12 @@
- Updated dependencies [[`b6fbdaa`](https://github.com/withastro/astro/commit/b6fbdaa94a9ecec706a99e1938fbf5cd028c72e0), [`89bab1e`](https://github.com/withastro/astro/commit/89bab1e70786123fbe933a9d7a1b80c9334dcc5f), [`d74617c`](https://github.com/withastro/astro/commit/d74617cbd3278feba05909ec83db2d73d57a153e), [`e90f559`](https://github.com/withastro/astro/commit/e90f5593d23043579611452a84b9e18ad2407ef9), [`2df49a6`](https://github.com/withastro/astro/commit/2df49a6fb4f6d92fe45f7429430abe63defeacd6), [`8a53517`](https://github.com/withastro/astro/commit/8a5351737d6a14fc55f1dafad8f3b04079e81af6)]:
- astro@5.0.0-alpha.0
+## 4.5.1
+
+### Patch Changes
+
+- [#11946](https://github.com/withastro/astro/pull/11946) [`b75bfc8`](https://github.com/withastro/astro/commit/b75bfc8cc41f5c631c10055b78670fdc26dff23a) Thanks [@johannesspohr](https://github.com/johannesspohr)! - Fix vue islands keeping their state when using view transition persistence
+
## 4.5.0
### Minor Changes
diff --git a/packages/integrations/vue/client.js b/packages/integrations/vue/client.js
index 807f843fc..58ee11d5c 100644
--- a/packages/integrations/vue/client.js
+++ b/packages/integrations/vue/client.js
@@ -2,6 +2,9 @@ import { setup } from 'virtual:@astrojs/vue/app';
import { Suspense, createApp, createSSRApp, h } from 'vue';
import StaticHtml from './static-html.js';
+// keep track of already initialized apps, so we don't hydrate again for view transitions
+let appMap = new WeakMap();
+
export default (element) =>
async (Component, props, slotted, { client }) => {
if (!element.hasAttribute('ssr')) return;
@@ -15,21 +18,36 @@ export default (element) =>
const isHydrate = client !== 'only';
const bootstrap = isHydrate ? createSSRApp : createApp;
- const app = bootstrap({
- name,
- render() {
- let content = h(Component, props, slots);
- // related to https://github.com/withastro/astro/issues/6549
- // if the component is async, wrap it in a Suspense component
- if (isAsync(Component.setup)) {
- content = h(Suspense, null, content);
- }
- return content;
- },
- });
- await setup(app);
- app.mount(element, isHydrate);
+ // keep a reference to the app, props and slots so we can update a running instance later
+ let appInstance = appMap.get(element);
+
+ if (!appInstance) {
+ appInstance = {
+ props,
+ slots,
+ };
+ const app = bootstrap({
+ name,
+ render() {
+ let content = h(Component, appInstance.props, appInstance.slots);
+ appInstance.component = this;
+ // related to https://github.com/withastro/astro/issues/6549
+ // if the component is async, wrap it in a Suspense component
+ if (isAsync(Component.setup)) {
+ content = h(Suspense, null, content);
+ }
+ return content;
+ },
+ });
+ await setup(app);
+ app.mount(element, isHydrate);
+ appMap.set(element, appInstance);
+ } else {
+ appInstance.props = props;
+ appInstance.slots = slots;
+ appInstance.component.$forceUpdate();
+ }
element.addEventListener('astro:unmount', () => app.unmount(), { once: true });
};
diff --git a/packages/integrations/vue/package.json b/packages/integrations/vue/package.json
index c11771173..eb723f8fb 100644
--- a/packages/integrations/vue/package.json
+++ b/packages/integrations/vue/package.json
@@ -1,6 +1,6 @@
{
"name": "@astrojs/vue",
- "version": "4.5.0",
+ "version": "4.5.1",
"description": "Use Vue components within Astro",
"type": "module",
"types": "./dist/index.d.ts",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cc5c68e15..39a5ebb0b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -355,7 +355,7 @@ importers:
specifier: ^3.6.2
version: link:../../packages/integrations/react
'@astrojs/tailwind':
- specifier: ^5.1.0
+ specifier: ^5.1.1
version: link:../../packages/integrations/tailwind
'@fortawesome/fontawesome-free':
specifier: ^6.6.0
@@ -1682,6 +1682,9 @@ importers:
'@astrojs/react':
specifier: workspace:*
version: link:../../../../integrations/react
+ '@astrojs/solid-js':
+ specifier: workspace:*
+ version: link:../../../../integrations/solid
'@astrojs/svelte':
specifier: workspace:*
version: link:../../../../integrations/svelte
@@ -1697,6 +1700,9 @@ importers:
react-dom:
specifier: ^18.3.1
version: 18.3.1(react@18.3.1)
+ solid-js:
+ specifier: ^1.8.0
+ version: 1.8.22
svelte:
specifier: ^4.2.19
version: 4.2.19