Merge branch 'main' into next

.changeset/beige-points-search.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes an issue where component styles were not correctly included in rendered MDX

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"
   }
 }

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",

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

packages/astro/e2e/fixtures/view-transitions/astro.config.mjs

@@ -1,14 +1,19 @@
 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';
 
 // https://astro.build/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/',

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"
   }
 }

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 />

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);

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>
+		</>
+	);
+}

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>

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>

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>

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>

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>

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>

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'));

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);

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}`);
 				}
 			}
 

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,

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 },
 		});
 	});
 

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 />

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 };