.github/workflows/ci.yml

@@ -237,7 +237,7 @@ jobs:
 
       - name: Build autogenerated docs pages from current astro branch
         if: ${{ steps.changes.outputs.docs == 'true' }}
-        run: cd smoke/docs && pnpm docgen && pnpm docgen:errors && pnpm docgen:integrations
+        run: cd smoke/docs && pnpm docgen && pnpm docgen:errors
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SOURCE_REPO: ${{ github.event.pull_request.head.repo.full_name || github.event.repository.full_name }}

README.md

@@ -1,4 +1,4 @@
-![Build the web you want](.github/assets/banner.png 'Build the web you want')
+![Build the web you want](.github/assets/banner.jpg 'Build the web you want')
 
 <p align="center">
   <br/>

examples/basics/package.json

@@ -11,6 +11,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.0.7"
+    "astro": "^4.0.8"
   }
 }

examples/blog/package.json

@@ -11,9 +11,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^2.0.2",
+    "@astrojs/mdx": "^2.0.3",
     "@astrojs/rss": "^4.0.1",
-    "@astrojs/sitemap": "^3.0.3",
-    "astro": "^4.0.7"
+    "@astrojs/sitemap": "^3.0.4",
+    "astro": "^4.0.8"
   }
 }

examples/component/package.json

@@ -15,7 +15,7 @@
   ],
   "scripts": {},
   "devDependencies": {
-    "astro": "^4.0.7"
+    "astro": "^4.0.8"
   },
   "peerDependencies": {
     "astro": "^3.0.0"

examples/framework-alpine/package.json

@@ -11,9 +11,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/alpinejs": "^0.3.1",
+    "@astrojs/alpinejs": "^0.3.2",
     "@types/alpinejs": "^3.13.5",
     "alpinejs": "^3.13.3",
-    "astro": "^4.0.7"
+    "astro": "^4.0.8"
   }
 }

examples/framework-lit/package.json

@@ -11,9 +11,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/lit": "^4.0.0",
+    "@astrojs/lit": "^4.0.1",
     "@webcomponents/template-shadowroot": "^0.2.1",
-    "astro": "^4.0.7",
+    "astro": "^4.0.8",
     "lit": "^2.8.0"
   }
 }

examples/framework-multiple/package.json

@@ -11,12 +11,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/preact": "^3.0.1",
-    "@astrojs/react": "^3.0.8",
-    "@astrojs/solid-js": "^3.0.2",
-    "@astrojs/svelte": "^5.0.2",
-    "@astrojs/vue": "^4.0.5",
-    "astro": "^4.0.7",
+    "@astrojs/preact": "^3.0.2",
+    "@astrojs/react": "^3.0.9",
+    "@astrojs/solid-js": "^3.0.3",
+    "@astrojs/svelte": "^5.0.3",
+    "@astrojs/vue": "^4.0.6",
+    "astro": "^4.0.8",
     "preact": "^10.19.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/framework-preact/package.json

@@ -11,9 +11,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/preact": "^3.0.1",
+    "@astrojs/preact": "^3.0.2",
     "@preact/signals": "^1.2.1",
-    "astro": "^4.0.7",
+    "astro": "^4.0.8",
     "preact": "^10.19.2"
   }
 }

examples/framework-react/package.json

@@ -11,10 +11,10 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/react": "^3.0.8",
+    "@astrojs/react": "^3.0.9",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
-    "astro": "^4.0.7",
+    "astro": "^4.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

examples/framework-solid/package.json

@@ -11,8 +11,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/solid-js": "^3.0.2",
-    "astro": "^4.0.7",
+    "@astrojs/solid-js": "^3.0.3",
+    "astro": "^4.0.8",
     "solid-js": "^1.8.5"
   }
 }

examples/framework-svelte/package.json

@@ -11,8 +11,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/svelte": "^5.0.2",
-    "astro": "^4.0.7",
+    "@astrojs/svelte": "^5.0.3",
+    "astro": "^4.0.8",
     "svelte": "^4.2.5"
   }
 }

examples/framework-vue/package.json

@@ -11,8 +11,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/vue": "^4.0.5",
-    "astro": "^4.0.7",
+    "@astrojs/vue": "^4.0.6",
+    "astro": "^4.0.8",
     "vue": "^3.3.8"
   }
 }

examples/hackernews/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/node": "^7.0.2",
-    "astro": "^4.0.7"
+    "@astrojs/node": "^7.0.3",
+    "astro": "^4.0.8"
   }
 }

examples/integration/package.json

@@ -15,7 +15,7 @@
   ],
   "scripts": {},
   "devDependencies": {
-    "astro": "^4.0.7"
+    "astro": "^4.0.8"
   },
   "peerDependencies": {
     "astro": "^3.0.0"

examples/middleware/package.json

@@ -12,8 +12,8 @@
     "server": "node dist/server/entry.mjs"
   },
   "dependencies": {
-    "@astrojs/node": "^7.0.2",
-    "astro": "^4.0.7",
+    "@astrojs/node": "^7.0.3",
+    "astro": "^4.0.8",
     "html-minifier": "^4.0.0"
   }
 }

examples/minimal/package.json

@@ -11,6 +11,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.0.7"
+    "astro": "^4.0.8"
   }
 }

examples/non-html-pages/package.json

@@ -11,6 +11,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.0.7"
+    "astro": "^4.0.8"
   }
 }

examples/portfolio/package.json

@@ -11,6 +11,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.0.7"
+    "astro": "^4.0.8"
   }
 }

examples/ssr/package.json

@@ -12,9 +12,9 @@
     "server": "node dist/server/entry.mjs"
   },
   "dependencies": {
-    "@astrojs/node": "^7.0.2",
-    "@astrojs/svelte": "^5.0.2",
-    "astro": "^4.0.7",
+    "@astrojs/node": "^7.0.3",
+    "@astrojs/svelte": "^5.0.3",
+    "astro": "^4.0.8",
     "svelte": "^4.2.5"
   }
 }

examples/view-transitions/package.json

@@ -10,8 +10,8 @@
     "astro": "astro"
   },
   "devDependencies": {
-    "@astrojs/tailwind": "^5.0.4",
-    "@astrojs/node": "^7.0.2",
-    "astro": "^4.0.7"
+    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/node": "^7.0.3",
+    "astro": "^4.0.8"
   }
 }

examples/with-markdoc/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/markdoc": "^0.8.1",
-    "astro": "^4.0.7"
+    "@astrojs/markdoc": "^0.8.2",
+    "astro": "^4.0.8"
   }
 }

examples/with-markdown-plugins/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@astrojs/markdown-remark": "^4.0.1",
-    "astro": "^4.0.7",
+    "astro": "^4.0.8",
     "hast-util-select": "^6.0.2",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",

examples/with-markdown-shiki/package.json

@@ -11,6 +11,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.0.7"
+    "astro": "^4.0.8"
   }
 }

examples/with-mdx/package.json

@@ -11,9 +11,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^2.0.2",
-    "@astrojs/preact": "^3.0.1",
-    "astro": "^4.0.7",
+    "@astrojs/mdx": "^2.0.3",
+    "@astrojs/preact": "^3.0.2",
+    "astro": "^4.0.8",
     "preact": "^10.19.2"
   }
 }

examples/with-nanostores/package.json

@@ -11,9 +11,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/preact": "^3.0.1",
+    "@astrojs/preact": "^3.0.2",
     "@nanostores/preact": "^0.5.0",
-    "astro": "^4.0.7",
+    "astro": "^4.0.8",
     "nanostores": "^0.9.5",
     "preact": "^10.19.2"
   }

examples/with-tailwindcss/package.json

@@ -11,10 +11,10 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^2.0.2",
-    "@astrojs/tailwind": "^5.0.4",
+    "@astrojs/mdx": "^2.0.3",
+    "@astrojs/tailwind": "^5.1.0",
     "@types/canvas-confetti": "^1.6.3",
-    "astro": "^4.0.7",
+    "astro": "^4.0.8",
     "autoprefixer": "^10.4.15",
     "canvas-confetti": "^1.9.1",
     "postcss": "^8.4.28",

examples/with-vitest/package.json

@@ -12,7 +12,7 @@
     "test": "vitest"
   },
   "dependencies": {
-    "astro": "^4.0.7",
+    "astro": "^4.0.8",
     "vitest": "^0.34.2"
   }
 }

packages/astro/CHANGELOG.md

@@ -1,5 +1,27 @@
 # astro
 
+## 4.0.8
+
+### Patch Changes
+
+- [#9522](https://github.com/withastro/astro/pull/9522) [`bb1438d20d325acd15f3755c6e306e45a7c64bcd`](https://github.com/withastro/astro/commit/bb1438d20d325acd15f3755c6e306e45a7c64bcd) Thanks [@Zegnat](https://github.com/Zegnat)! - Add support for autocomplete attribute to the HTML button type.
+
+- [#9531](https://github.com/withastro/astro/pull/9531) [`662f06fd9fae377bed1aaa49adbba3542cced087`](https://github.com/withastro/astro/commit/662f06fd9fae377bed1aaa49adbba3542cced087) Thanks [@bluwy](https://github.com/bluwy)! - Fixes duplicated CSS modules content when it's imported by both Astro files and framework components
+
+- [#9501](https://github.com/withastro/astro/pull/9501) [`eb36e95596fcdb3db4a31744e910495e22e3af84`](https://github.com/withastro/astro/commit/eb36e95596fcdb3db4a31744e910495e22e3af84) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Export JSX namespace from `astro/jsx-runtime` for language tooling to consume
+
+- [#9492](https://github.com/withastro/astro/pull/9492) [`89a2a07c2e411cda32244b7b05d3c79e93f7dd84`](https://github.com/withastro/astro/commit/89a2a07c2e411cda32244b7b05d3c79e93f7dd84) Thanks [@lilnasy](https://github.com/lilnasy)! - Improves error message for the case where two similarly named files result in the same content entry.
+
+- [#9532](https://github.com/withastro/astro/pull/9532) [`7224809b73d2c3ec8e8aee2fa07463dc3b57a7a2`](https://github.com/withastro/astro/commit/7224809b73d2c3ec8e8aee2fa07463dc3b57a7a2) Thanks [@bluwy](https://github.com/bluwy)! - Prevents unnecessary URI decoding when rendering a route
+
+- [#9478](https://github.com/withastro/astro/pull/9478) [`dfef925e1fd07f3efb9fde6f4f23548f2af7dc75`](https://github.com/withastro/astro/commit/dfef925e1fd07f3efb9fde6f4f23548f2af7dc75) Thanks [@lilnasy](https://github.com/lilnasy)! - Improves errors in certain places to also report their causes.
+
+- [#9463](https://github.com/withastro/astro/pull/9463) [`3b0eaed3b544ef8c4ec1f7b0d5a8f475bcfeb25e`](https://github.com/withastro/astro/commit/3b0eaed3b544ef8c4ec1f7b0d5a8f475bcfeb25e) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Update Sharp version to ^0.33.1
+
+- [#9512](https://github.com/withastro/astro/pull/9512) [`1469e0e5a915e6b42b9953dbb48fe57a74518056`](https://github.com/withastro/astro/commit/1469e0e5a915e6b42b9953dbb48fe57a74518056) Thanks [@mingjunlu](https://github.com/mingjunlu)! - Prevents dev toolbar tooltip from overflowing outside of the screen
+
+- [#9497](https://github.com/withastro/astro/pull/9497) [`7f7a7f1aeaec6b327ae0e5e7470a4f46174bf8ae`](https://github.com/withastro/astro/commit/7f7a7f1aeaec6b327ae0e5e7470a4f46174bf8ae) Thanks [@lilnasy](https://github.com/lilnasy)! - Adds a helpful warning message for when an exported API Route is not uppercase.
+
 ## 4.0.7
 
 ### Patch Changes

packages/astro/README.md

@@ -1,6 +1,6 @@
 <br/>
 <p align="center">
-  <img src="../../.github/assets/banner.png" alt="Build the web you want">
+  <img src="../../.github/assets/banner.jpg" alt="Build the web you want">
   <br/><br/>
   <a href="https://astro.build">Astro</a> is the all-in-one web framework designed for speed.
   <br/>

packages/astro/astro-jsx.d.ts

@@ -627,6 +627,7 @@ declare namespace astroHTML.JSX {
 	}
 
 	interface ButtonHTMLAttributes extends HTMLAttributes {
+		autocomplete?: string | undefined | null;
 		disabled?: boolean | string | undefined | null;
 		form?: string | undefined | null;
 		formaction?: string | undefined | null;

packages/astro/content-types.template.d.ts

@@ -155,11 +155,11 @@ declare module 'astro:content' {
 			? {
 					collection: C;
 					slug: ValidContentEntrySlug<C>;
-			  }
+				}
 			: {
 					collection: C;
 					id: keyof DataEntryMap[C];
-			  }
+				}
 	>;
 	// Allow generic `string` to avoid excessive type errors in the config
 	// if `dev` is not running to update as you edit.

packages/astro/e2e/dev-overlay.test.js

@@ -139,6 +139,32 @@ test.describe('Dev Overlay', () => {
 		await expect(auditWindow.locator('astro-dev-toolbar-icon[icon=check-circle]')).toBeVisible();
 	});
 
+	test('adjusts tooltip position if off-screen', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/tooltip-position'));
+
+		const overlay = page.locator('astro-dev-toolbar');
+		const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]');
+		await pluginButton.click();
+
+		const auditCanvas = overlay.locator(
+			'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]'
+		);
+		const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight');
+		for (const highlight of await auditHighlights.all()) {
+			await expect(highlight).toBeVisible();
+			await highlight.hover();
+			const tooltip = highlight.locator('astro-dev-toolbar-tooltip');
+			await expect(tooltip).toBeVisible();
+			const tooltipBox = await tooltip.boundingBox();
+			const { clientWidth, clientHeight } = await page.evaluate(() => ({
+				clientWidth: document.documentElement.clientWidth,
+				clientHeight: document.documentElement.clientHeight,
+			}));
+			expect(tooltipBox.x + tooltipBox.width).toBeLessThan(clientWidth);
+			expect(tooltipBox.y + tooltipBox.height).toBeLessThan(clientHeight);
+		}
+	});
+
 	test('can open Settings plugin', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 

packages/astro/e2e/fixtures/dev-overlay/src/pages/tooltip-position.astro

@@ -0,0 +1,21 @@
+---
+
+---
+
+<div>
+  <button role="top-left">Top left</button>
+  <button role="top-right">Top right</button>
+  <button role="bottom-left">Bottom left</button>
+  <button role="bottom-right">Bottom right</button>
+</div>
+
+<style>
+  div {
+    display: grid;
+    grid-template-columns: auto auto;
+    justify-content: space-between;
+    align-content: space-between;
+    height: 92vh;
+    padding: 20px;
+  }
+</style>

packages/astro/jsx-runtime.d.ts

@@ -0,0 +1,6 @@
+// Q: Why this file?
+// A: Our language tooling needs to access the JSX types from `astro/jsx-runtime`, due to TS limitations, however we
+// can't import `astro-jsx` types inside the actual `jsx-runtime/index.js` file due to circular dependency issues.
+import './astro-jsx.js';
+export * from './dist/jsx-runtime/index.js';
+export import JSX = astroHTML.JSX;

packages/astro/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "4.0.7",
+  "version": "4.0.8",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",
@@ -34,12 +34,14 @@
     "./env": "./env.d.ts",
     "./types": "./types.d.ts",
     "./client": "./client.d.ts",
-    "./import-meta": "./import-meta.d.ts",
     "./astro-jsx": "./astro-jsx.d.ts",
     "./tsconfigs/*.json": "./tsconfigs/*",
     "./tsconfigs/*": "./tsconfigs/*.json",
     "./jsx/*": "./dist/jsx/*",
-    "./jsx-runtime": "./dist/jsx-runtime/index.js",
+    "./jsx-runtime": {
+      "types": "./jsx-runtime.d.ts",
+      "default": "./dist/jsx-runtime/index.js"
+    },
     "./compiler-runtime": "./dist/runtime/compiler/index.js",
     "./runtime/*": "./dist/runtime/*",
     "./config": {
@@ -90,9 +92,9 @@
     "zod.mjs",
     "env.d.ts",
     "client.d.ts",
+    "jsx-runtime.d.ts",
     "content-types.template.d.ts",
     "content-module.template.mjs",
-    "import-meta.d.ts",
     "astro-jsx.d.ts",
     "types.d.ts",
     "README.md",
@@ -175,7 +177,7 @@
     "zod": "^3.22.4"
   },
   "optionalDependencies": {
-    "sharp": "^0.32.5"
+    "sharp": "^0.33.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.3.1",

packages/astro/performance/content-benchmark.mjs

@@ -44,14 +44,14 @@ async function benchmark({ fixtures, templates, numPosts }) {
 		const test = Array.isArray(flags.test)
 			? flags.test
 			: typeof flags.test === 'string'
-			  ? [flags.test]
-			  : ['simple', 'with-astro-components', 'with-react-components'];
+				? [flags.test]
+				: ['simple', 'with-astro-components', 'with-react-components'];
 
 		const formats = Array.isArray(flags.format)
 			? flags.format
 			: typeof flags.format === 'string'
-			  ? [flags.format]
-			  : ['md', 'mdx', 'mdoc'];
+				? [flags.format]
+				: ['md', 'mdx', 'mdoc'];
 
 		const numPosts = flags.numPosts || 1000;
 

packages/astro/src/@types/astro.ts

@@ -722,7 +722,7 @@ export interface AstroUserConfig {
 		 * @typeraw {('file' | 'directory')}
 		 * @default `'directory'`
 		 * @description
-		 * Control the output file format of each page.
+		 * Control the output file format of each page. This value may be set by an adapter for you.
 		 *   - If `'file'`, Astro will generate an HTML file (ex: "/foo.html") for each page.
 		 *   - If `'directory'`, Astro will generate a directory with a nested `index.html` file (ex: "/foo/index.html") for each page.
 		 *
@@ -735,6 +735,8 @@ export interface AstroUserConfig {
 		 * }
 		 * ```
 		 *
+		 *
+		 *
 		 * #### Effect on Astro.url
 		 * Setting `build.format` controls what `Astro.url` is set to during the build. When it is:
 		 * - `directory` - The `Astro.url.pathname` will include a trailing slash to mimic folder behavior; ie `/foo/`.
@@ -2235,7 +2237,7 @@ export type APIRoute<Props extends Record<string, any> = Record<string, any>> =
 ) => Response | Promise<Response>;
 
 export interface EndpointHandler {
-	[method: string]: APIRoute | ((params: Params, request: Request) => Response);
+	[method: string]: APIRoute;
 }
 
 export type Props = Record<string, unknown>;

packages/astro/src/assets/build/generate.ts

@@ -226,7 +226,6 @@ export async function generateImagesForPath(
 					...AstroErrorData.CouldNotTransformImage,
 					message: AstroErrorData.CouldNotTransformImage.message(originalFilePath),
 				},
-				undefined,
 				{ cause: e }
 			);
 

packages/astro/src/assets/internal.ts

@@ -65,7 +65,7 @@ export async function getImage(
 	// Causing our generate step to think the image is used outside of the image optimization pipeline
 	const clonedSrc = isESMImportedImage(resolvedOptions.src)
 		? // @ts-expect-error - clone is a private, hidden prop
-		  resolvedOptions.src.clone ?? resolvedOptions.src
+			resolvedOptions.src.clone ?? resolvedOptions.src
 		: resolvedOptions.src;
 
 	resolvedOptions.src = clonedSrc;

packages/astro/src/content/error-map.ts

@@ -45,7 +45,7 @@ export const errorMap: ZodErrorMap = (baseError, ctx) => {
 						.map(([key, error]) =>
 							key === baseErrorPath
 								? // Avoid printing the key again if it's a base error
-								  `> ${getTypeOrLiteralMsg(error)}`
+									`> ${getTypeOrLiteralMsg(error)}`
 								: `> ${prefix(key, getTypeOrLiteralMsg(error))}`
 						)
 				)

packages/astro/src/content/runtime.ts

@@ -95,12 +95,12 @@ export function createGetCollection({
 										renderEntryImport: await getRenderEntryImport(collection, entry.slug),
 									});
 								},
-						  }
+							}
 						: {
 								id: entry.id,
 								collection: entry.collection,
 								data: entry.data,
-						  };
+							};
 				})
 			);
 			cacheEntriesByCollection.set(collection, entries);

packages/astro/src/content/types-generator.ts

@@ -410,8 +410,8 @@ async function writeContentFiles({
 		const resolvedType: 'content' | 'data' =
 			collection.type === 'unknown'
 				? // Add empty / unknown collections to the data type map by default
-				  // This ensures `getCollection('empty-collection')` doesn't raise a type error
-				  collectionConfig?.type ?? 'data'
+					// This ensures `getCollection('empty-collection')` doesn't raise a type error
+					collectionConfig?.type ?? 'data'
 				: collection.type;
 
 		switch (resolvedType) {

packages/astro/src/content/utils.ts

@@ -504,6 +504,6 @@ export async function getEntrySlug({
 export function getExtGlob(exts: string[]) {
 	return exts.length === 1
 		? // Wrapping {...} breaks when there is only one extension
-		  exts[0]
+			exts[0]
 		: `{${exts.join(',')}}`;
 }

packages/astro/src/content/vite-plugin-content-assets.ts

@@ -64,11 +64,7 @@ export function astroContentAssetPropagationPlugin({
 					if (!devModuleLoader.getModuleById(basePath)?.ssrModule) {
 						await devModuleLoader.import(basePath);
 					}
-					const { styles, urls } = await getStylesForURL(
-						pathToFileURL(basePath),
-						devModuleLoader,
-						'development'
-					);
+					const { styles, urls } = await getStylesForURL(pathToFileURL(basePath), devModuleLoader);
 
 					const hoistedScripts = await getScriptsForURL(
 						pathToFileURL(basePath),

packages/astro/src/content/vite-plugin-content-imports.ts

@@ -224,7 +224,7 @@ async function getContentEntryModule(
 				{ id, collection, _internal, unvalidatedData },
 				collectionConfig,
 				pluginContext
-		  )
+			)
 		: unvalidatedData;
 
 	const contentEntryModule: ContentEntryModule = {
@@ -258,7 +258,7 @@ async function getDataEntryModule(
 				{ id, collection, _internal, unvalidatedData },
 				collectionConfig,
 				pluginContext
-		  )
+			)
 		: unvalidatedData;
 
 	const dataEntryModule: DataEntryModule = {

packages/astro/src/content/vite-plugin-content-virtual-mod.ts

@@ -261,7 +261,12 @@ export async function generateLookupMap({
 					if (lookupMap[collection]?.entries?.[slug]) {
 						throw new AstroError({
 							...AstroErrorData.DuplicateContentEntrySlugError,
-							message: AstroErrorData.DuplicateContentEntrySlugError.message(collection, slug),
+							message: AstroErrorData.DuplicateContentEntrySlugError.message(
+								collection,
+								slug,
+								lookupMap[collection]!.entries[slug],
+								rootRelativePath(root, filePath)
+							),
 							hint:
 								slug !== generatedSlug
 									? `Check the \`slug\` frontmatter property in **${id}**.`

packages/astro/src/core/app/index.ts

@@ -409,8 +409,8 @@ export class App {
 		const status = override?.status
 			? override.status
 			: originalResponse.status === 200
-			  ? newResponse.status
-			  : originalResponse.status;
+				? newResponse.status
+				: originalResponse.status;
 
 		try {
 			// this function could throw an error...

packages/astro/src/core/build/generate.ts

@@ -420,7 +420,7 @@ function getInvalidRouteSegmentError(
 					route.route,
 					JSON.stringify(invalidParam),
 					JSON.stringify(received)
-			  )
+				)
 			: `Generated path for ${route.route} is invalid.`,
 		hint,
 	});

packages/astro/src/core/build/plugins/plugin-css.ts

@@ -223,8 +223,8 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 					inlineConfig === 'always'
 						? true
 						: inlineConfig === 'never'
-						  ? false
-						  : assetSize <= assetsInlineLimit;
+							? false
+							: assetSize <= assetsInlineLimit;
 
 				// there should be a single js object for each stylesheet,
 				// allowing the single reference to be shared and checked for duplicates

packages/astro/src/core/config/tsconfig.ts

@@ -162,14 +162,14 @@ export type StripEnums<T extends Record<string, any>> = {
 	[K in keyof T]: T[K] extends boolean
 		? T[K]
 		: T[K] extends string
-		  ? T[K]
-		  : T[K] extends object
-		    ? T[K]
-		    : T[K] extends Array<any>
-		      ? T[K]
-		      : T[K] extends undefined
-		        ? undefined
-		        : any;
+			? T[K]
+			: T[K] extends object
+				? T[K]
+				: T[K] extends Array<any>
+					? T[K]
+					: T[K] extends undefined
+						? undefined
+						: any;
 };
 
 export interface TSConfig {

packages/astro/src/core/errors/dev/vite.ts

@@ -153,7 +153,7 @@ export async function getViteErrorPayload(err: ErrorWithMetadata): Promise<Astro
 				lang: highlighterLang,
 				theme: 'css-variables',
 				lineOptions: err.loc?.line ? [{ line: err.loc.line, classes: ['error-line'] }] : undefined,
-		  })
+			})
 		: undefined;
 
 	if (highlightedCode) {

packages/astro/src/core/errors/errors-data.ts

@@ -169,13 +169,13 @@ ${
 	validRenderersCount > 0
 		? `There ${plural ? 'are' : 'is'} ${validRenderersCount} renderer${
 				plural ? 's' : ''
-		  } configured in your \`astro.config.mjs\` file,
+			} configured in your \`astro.config.mjs\` file,
 but ${plural ? 'none were' : 'it was not'} able to server-side render \`${componentName}\`.`
 		: `No valid renderer was found ${
 				componentExtension
 					? `for the \`.${componentExtension}\` file extension.`
 					: `for this file extension.`
-		  }`
+			}`
 }`,
 	hint: (probableRenderers: string) =>
 		`Did you mean to enable the ${probableRenderers} integration?\n\nSee https://docs.astro.build/en/core-concepts/framework-components/ for more information on how to install and configure integrations.`,
@@ -1292,8 +1292,14 @@ export const DataCollectionEntryParseError = {
 export const DuplicateContentEntrySlugError = {
 	name: 'DuplicateContentEntrySlugError',
 	title: 'Duplicate content entry slug.',
-	message: (collection: string, slug: string) => {
-		return `**${collection}** contains multiple entries with the same slug: \`${slug}\`. Slugs must be unique.`;
+	message: (collection: string, slug: string, preExisting: string, alsoFound: string) => {
+		return (
+			`**${collection}** contains multiple entries with the same slug: \`${slug}\`. ` +
+			`Slugs must be unique.\n\n` +
+			`Entries: \n` +
+			`- ${preExisting}\n` +
+			`- ${alsoFound}`
+		);
 	},
 } satisfies ErrorData;
 

packages/astro/src/core/errors/errors.ts

@@ -38,10 +38,10 @@ export class AstroError extends Error {
 
 	type: ErrorTypes = 'AstroError';
 
-	constructor(props: ErrorProperties, ...params: any) {
-		super(...params);
-
+	constructor(props: ErrorProperties, options?: ErrorOptions) {
 		const { name, title, message, stack, location, hint, frame } = props;
+		super(message, options);
+
 		this.title = title;
 		this.name = name;
 
@@ -81,8 +81,8 @@ export class AstroError extends Error {
 export class CompilerError extends AstroError {
 	type: ErrorTypes = 'CompilerError';
 
-	constructor(props: ErrorProperties, ...params: any) {
-		super(props, ...params);
+	constructor(props: ErrorProperties, options?: ErrorOptions) {
+		super(props, options);
 	}
 
 	static is(err: unknown): err is CompilerError {
@@ -120,8 +120,8 @@ export class AggregateError extends AstroError {
 
 	// Despite being a collection of errors, AggregateError still needs to have a main error attached to it
 	// This is because Vite expects every thrown errors handled during HMR to be, well, Error and have a message
-	constructor(props: ErrorProperties & { errors: AstroError[] }, ...params: any) {
-		super(props, ...params);
+	constructor(props: ErrorProperties & { errors: AstroError[] }, options?: ErrorOptions) {
+		super(props, options);
 
 		this.errors = props.errors;
 	}

packages/astro/src/core/middleware/loadMiddleware.ts

@@ -12,7 +12,7 @@ export async function loadMiddleware(moduleLoader: ModuleLoader) {
 	try {
 		return await moduleLoader.import(MIDDLEWARE_MODULE_ID);
 	} catch (error: any) {
-		const astroError = new AstroError(MiddlewareCantBeLoaded, undefined, { cause: error });
+		const astroError = new AstroError(MiddlewareCantBeLoaded, { cause: error });
 		throw astroError;
 	}
 }

packages/astro/src/core/render/paginate.ts

@@ -55,7 +55,7 @@ export function generatePaginateFunction(
 								page:
 									!includesFirstPageNumber && pageNum - 1 === 1 ? undefined : String(pageNum - 1),
 							})
-					  );
+						);
 			return {
 				params,
 				props: {

packages/astro/src/core/routing/params.ts

@@ -12,9 +12,9 @@ export function getParams(array: string[]) {
 		const params: Params = {};
 		array.forEach((key, i) => {
 			if (key.startsWith('...')) {
-				params[key.slice(3)] = match[i + 1] ? decodeURIComponent(match[i + 1]) : undefined;
+				params[key.slice(3)] = match[i + 1] ? match[i + 1] : undefined;
 			} else {
-				params[key] = decodeURIComponent(match[i + 1]);
+				params[key] = match[i + 1];
 			}
 		});
 		return params;

packages/astro/src/preferences/index.ts

@@ -14,7 +14,7 @@ type DotKeys<T> = T extends object
 			[K in keyof T]: `${Exclude<K, symbol>}${DotKeys<T[K]> extends never
 				? ''
 				: `.${DotKeys<T[K]>}`}`;
-	  }[keyof T]
+		}[keyof T]
 	: never;
 
 export type GetDotKey<
@@ -30,7 +30,7 @@ export interface PreferenceOptions {
 type DeepPartial<T> = T extends object
 	? {
 			[P in keyof T]?: DeepPartial<T[P]>;
-	  }
+		}
 	: T;
 
 export type PreferenceKey = DotKeys<Preferences>;

packages/astro/src/runtime/client/dev-overlay/overlay.ts

@@ -253,7 +253,7 @@ export class AstroDevOverlay extends HTMLElement {
 						this.plugins.filter((plugin) => !plugin.builtIn).length > this.customPluginsToShow
 							? this.getPluginTemplate(
 									this.plugins.find((plugin) => plugin.builtIn && plugin.id === 'astro:more')!
-							  )
+								)
 							: ''
 					}
 					<div class="separator"></div>

packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts

@@ -57,13 +57,17 @@ export function attachTooltipToHighlight(
 			const originalRect = originalElement.getBoundingClientRect();
 			const dialogRect = tooltip.getBoundingClientRect();
 
-			// If the tooltip is going to be off the screen, show it above the element instead
+			// Prevent the tooltip from being off the screen
 			if (originalRect.top < dialogRect.height) {
 				// Not enough space above, show below
 				tooltip.style.top = `${originalRect.height + 15}px`;
 			} else {
 				tooltip.style.top = `-${tooltip.offsetHeight}px`;
 			}
+			if (dialogRect.right > document.documentElement.clientWidth) {
+				// Not enough space on the right, align to the right
+				tooltip.style.right = '0px';
+			}
 		});
 	});
 

packages/astro/src/runtime/server/endpoint.ts

@@ -2,18 +2,6 @@ import { bold } from 'kleur/colors';
 import type { APIContext, EndpointHandler, Params } from '../../@types/astro.js';
 import type { Logger } from '../../core/logger/core.js';
 
-function getHandlerFromModule(mod: EndpointHandler, method: string) {
-	// If there was an exact match on `method`, return that function.
-	if (mod[method]) {
-		return mod[method];
-	}
-	if (mod['ALL']) {
-		return mod['ALL'];
-	}
-	// Otherwise, no handler found.
-	return undefined;
-}
-
 /** Renders an endpoint request to completion, returning the body. */
 export async function renderEndpoint(
 	mod: EndpointHandler,
@@ -23,38 +11,38 @@ export async function renderEndpoint(
 ) {
 	const { request, url } = context;
 
-	const chosenMethod = request.method?.toUpperCase();
-	const handler = getHandlerFromModule(mod, chosenMethod);
-	if (!ssr && ssr === false && chosenMethod && chosenMethod !== 'GET') {
+	const method = request.method.toUpperCase();
+	// use the exact match on `method`, fallback to ALL
+	const handler = mod[method] ?? mod['ALL'];
+	if (!ssr && ssr === false && method !== 'GET') {
 		logger.warn(
-			null,
+			'router',
 			`${url.pathname} ${bold(
-				chosenMethod
+				method
 			)} requests are not available for a static site. Update your config to \`output: 'server'\` or \`output: 'hybrid'\` to enable.`
 		);
 	}
-	if (!handler || typeof handler !== 'function') {
+	if (typeof handler !== 'function') {
+		logger.warn(
+			'router',
+			`No API Route handler exists for the method "${method}" for the route ${url.pathname}.\n` +
+				`Found handlers: ${Object.keys(mod)
+					.map((exp) => JSON.stringify(exp))
+					.join(', ')}\n` +
+				('all' in mod
+					? `One of the exported handlers is "all" (lowercase), did you mean to export 'ALL'?\n`
+					: '')
+		);
 		// No handler found, so this should be a 404. Using a custom header
 		// to signal to the renderer that this is an internal 404 that should
 		// be handled by a custom 404 route if possible.
-		let response = new Response(null, {
+		return new Response(null, {
 			status: 404,
 			headers: {
 				'X-Astro-Response': 'Not-Found',
 			},
 		});
-		return response;
 	}
 
-	const proxy = new Proxy(context, {
-		get(target, prop) {
-			if (prop in target) {
-				return Reflect.get(target, prop);
-			} else {
-				return undefined;
-			}
-		},
-	}) as APIContext & Params;
-
-	return handler.call(mod, proxy, request);
+	return handler.call(mod, context);
 }

packages/astro/src/runtime/server/jsx.ts

@@ -211,7 +211,7 @@ async function renderElement(
 				? `/>`
 				: `>${
 						children == null ? '' : await renderJSX(result, prerenderElementChildren(tag, children))
-				  }</${tag}>`
+					}</${tag}>`
 		)}`
 	);
 }

packages/astro/src/runtime/server/render/common.ts

@@ -68,8 +68,8 @@ function stringifyChunk(
 				let prescriptType: PrescriptType = needsHydrationScript
 					? 'both'
 					: needsDirectiveScript
-					  ? 'directive'
-					  : null;
+						? 'directive'
+						: null;
 				if (prescriptType) {
 					let prescripts = getPrescripts(result, prescriptType, hydration.directive);
 					return markHTMLString(prescripts);

packages/astro/src/runtime/server/transition.ts

@@ -145,8 +145,8 @@ class ViewTransitionStyleSheet {
 			direction === 'backwards'
 				? `[data-astro-transition=back]`
 				: direction === 'forwards'
-				  ? ''
-				  : `[data-astro-transition=${direction}]`;
+					? ''
+					: `[data-astro-transition=${direction}]`;
 		this.addRule('modern', `${prefix}::view-transition-${image}(${name}) { ${animation} }`);
 		this.addRule(
 			'fallback',

packages/astro/src/transitions/router.ts

@@ -432,8 +432,8 @@ async function transition(
 	const navigationType = historyState
 		? 'traverse'
 		: options.history === 'replace'
-		  ? 'replace'
-		  : 'push';
+			? 'replace'
+			: 'push';
 
 	if (navigationType !== 'traverse') {
 		updateScrollPosition({ scrollX, scrollY });
@@ -467,9 +467,9 @@ async function transition(
 				preparationEvent.sourceElement instanceof HTMLFormElement
 					? preparationEvent.sourceElement
 					: preparationEvent.sourceElement instanceof HTMLElement &&
-					    'form' in preparationEvent.sourceElement
-					  ? (preparationEvent.sourceElement.form as HTMLFormElement)
-					  : preparationEvent.sourceElement?.closest('form');
+						  'form' in preparationEvent.sourceElement
+						? (preparationEvent.sourceElement.form as HTMLFormElement)
+						: preparationEvent.sourceElement?.closest('form');
 			// Form elements without enctype explicitly set default to application/x-www-form-urlencoded.
 			// In order to maintain compatibility with Astro 4.x, we need to check the value of enctype
 			// on the attributes property rather than accessing .enctype directly. Astro 5.x may

packages/astro/src/type-utils.ts

@@ -37,6 +37,6 @@ export type DeepPartial<T> = {
 	[P in keyof T]?: T[P] extends (infer U)[]
 		? DeepPartial<U>[]
 		: T[P] extends object | undefined
-		  ? DeepPartial<T[P]>
-		  : T[P];
+			? DeepPartial<T[P]>
+			: T[P];
 };

packages/astro/src/vite-plugin-astro-server/css.ts

@@ -1,4 +1,3 @@
-import type { RuntimeMode } from '../@types/astro.js';
 import type { ModuleLoader } from '../core/module-loader/index.js';
 import { viteID } from '../core/util.js';
 import { isBuildableCSSRequest } from './util.js';
@@ -13,37 +12,48 @@ interface ImportedStyle {
 /** Given a filePath URL, crawl Vite’s module graph to find all style imports. */
 export async function getStylesForURL(
 	filePath: URL,
-	loader: ModuleLoader,
-	mode: RuntimeMode
+	loader: ModuleLoader
 ): Promise<{ urls: Set<string>; styles: ImportedStyle[] }> {
 	const importedCssUrls = new Set<string>();
 	// Map of url to injected style object. Use a `url` key to deduplicate styles
 	const importedStylesMap = new Map<string, ImportedStyle>();
 
 	for await (const importedModule of crawlGraph(loader, viteID(filePath), true)) {
 		if (isBuildableCSSRequest(importedModule.url)) {
-			let ssrModule: Record<string, any>;
-			try {
-				// The SSR module is possibly not loaded. Load it if it's null.
-				ssrModule = importedModule.ssrModule ?? (await loader.import(importedModule.url));
-			} catch {
-				// The module may not be inline-able, e.g. SCSS partials. Skip it as it may already
-				// be inlined into other modules if it happens to be in the graph.
-				continue;
+			// In dev, we inline all styles if possible
+			let css = '';
+			// If this is a plain CSS module, the default export should be a string
+			if (typeof importedModule.ssrModule?.default === 'string') {
+				css = importedModule.ssrModule.default;
 			}
-			if (
-				mode === 'development' && // only inline in development
-				typeof ssrModule?.default === 'string' // ignore JS module styles
-			) {
-				importedStylesMap.set(importedModule.url, {
-					id: importedModule.id ?? importedModule.url,
-					url: importedModule.url,
-					content: ssrModule.default,
-				});
-			} else {
-				// NOTE: We use the `url` property here. `id` would break Windows.
-				importedCssUrls.add(importedModule.url);
+			// Else try to load it
+			else {
+				const url = new URL(importedModule.url, 'http://localhost');
+				// Mark url with ?inline so Vite will return the CSS as plain string, even for CSS modules
+				url.searchParams.set('inline', '');
+				const modId = `${decodeURI(url.pathname)}${url.search}`;
+
+				try {
+					// The SSR module is possibly not loaded. Load it if it's null.
+					const ssrModule = await loader.import(modId);
+					css = ssrModule.default;
+				} catch {
+					// Some CSS modules, e.g. from Vue files, may not work with the ?inline query.
+					// If so, we fallback to a url instead
+					if (modId.includes('.module.')) {
+						importedCssUrls.add(importedModule.url);
+					}
+					// The module may not be inline-able, e.g. SCSS partials. Skip it as it may already
+					// be inlined into other modules if it happens to be in the graph.
+					continue;
+				}
 			}
+
+			importedStylesMap.set(importedModule.url, {
+				id: importedModule.id ?? importedModule.url,
+				url: importedModule.url,
+				content: css,
+			});
 		}
 	}
 

packages/astro/src/vite-plugin-astro-server/request.ts

@@ -37,7 +37,7 @@ export async function handleRequest({
 	if (config.trailingSlash === 'never' && !incomingRequest.url) {
 		pathname = '';
 	} else {
-		pathname = decodeURI(url.pathname);
+		pathname = url.pathname;
 	}
 
 	// Add config.base back to url before passing it to SSR

packages/astro/src/vite-plugin-astro-server/route.ts

@@ -436,11 +436,7 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
 	}
 
 	// Pass framework CSS in as style tags to be appended to the page.
-	const { urls: styleUrls, styles: importedStyles } = await getStylesForURL(
-		filePath,
-		moduleLoader,
-		mode
-	);
+	const { urls: styleUrls, styles: importedStyles } = await getStylesForURL(filePath, moduleLoader);
 	let links = new Set<SSRElement>();
 	[...styleUrls].forEach((href) => {
 		links.add({

packages/astro/src/vite-plugin-astro-server/vite.ts

@@ -25,12 +25,12 @@ export async function* crawlGraph(
 
 	const moduleEntriesForId = isRootFile
 		? // "getModulesByFile" pulls from a delayed module cache (fun implementation detail),
-		  // So we can get up-to-date info on initial server load.
-		  // Needed for slower CSS preprocessing like Tailwind
-		  loader.getModulesByFile(id) ?? new Set()
+			// So we can get up-to-date info on initial server load.
+			// Needed for slower CSS preprocessing like Tailwind
+			loader.getModulesByFile(id) ?? new Set()
 		: // For non-root files, we're safe to pull from "getModuleById" based on testing.
-		  // TODO: Find better invalidation strat to use "getModuleById" in all cases!
-		  new Set([loader.getModuleById(id)]);
+			// TODO: Find better invalidation strat to use "getModuleById" in all cases!
+			new Set([loader.getModuleById(id)]);
 
 	// Collect all imported modules for the module(s).
 	for (const entry of moduleEntriesForId) {

packages/astro/test/0-css.test.js

@@ -367,7 +367,7 @@ describe('CSS', function () {
 				'ReactModules.module.sass',
 			];
 			for (const style of styles) {
-				const href = $(`link[href$="${style}"]`).attr('href');
+				const href = $(`style[data-vite-dev-id$="${style}"]`).attr('data-vite-dev-id');
 				expect((await fixture.fetch(href)).status, style).to.equal(200);
 			}
 
@@ -423,7 +423,7 @@ describe('CSS', function () {
 
 		it('.module.css ordering', () => {
 			const globalStyleTag = $('style[data-vite-dev-id$="default.css"]');
-			const moduleStyleTag = $('link[href$="ModuleOrdering.module.css"]');
+			const moduleStyleTag = $('style[data-vite-dev-id$="ModuleOrdering.module.css"]');
 			const globalStyleClassIndex = globalStyleTag.index();
 			const moduleStyleClassIndex = moduleStyleTag.index();
 			// css module has higher priority than global style

packages/astro/test/astro-client-only.test.js

@@ -37,8 +37,9 @@ describe('Client only components', () => {
 		);
 		const css = stylesheets.join('');
 
-		expect(css).to.match(/yellowgreen/, 'Svelte styles are added');
-		expect(css).to.match(/Courier New/, 'Global styles are added');
+		// yellowgreen minified
+		expect(css).to.contain('#9acd32', 'Svelte styles are added');
+		expect(css).to.include('Courier New', 'Global styles are added');
 	});
 
 	it('Adds the CSS to the page - standalone svelte component', async () => {
@@ -102,8 +103,9 @@ describe('Client only components subpath', () => {
 		);
 		const css = stylesheets.join('');
 
-		expect(css).to.match(/yellowgreen/, 'Svelte styles are added');
-		expect(css).to.match(/Courier New/, 'Global styles are added');
+		// yellowgreen minified
+		expect(css).to.contain('#9acd32', 'Svelte styles are added');
+		expect(css).to.include('Courier New', 'Global styles are added');
 	});
 
 	it('Adds the CSS to the page for TSX components', async () => {

packages/astro/test/css-order-import.test.js

@@ -101,9 +101,9 @@ describe('CSS ordering - import order', () => {
 			const content = await Promise.all(getLinks(html).map((href) => getLinkContent(href)));
 
 			const [{ css }] = content;
-			let idx1 = css.indexOf('whitesmoke');
-			let idx2 = css.indexOf('aliceblue');
-			let idx3 = css.indexOf('burlywood');
+			let idx1 = css.indexOf('#f5f5f5'); // whitesmoke minified
+			let idx2 = css.indexOf('#f0f8ff'); // aliceblue minified
+			let idx3 = css.indexOf('#deb887'); // burlywoord minified
 
 			expect(idx1).to.be.greaterThan(idx2);
 			expect(idx2).to.be.greaterThan(idx3);
@@ -147,8 +147,8 @@ describe('CSS ordering - import order', () => {
 				getLinks(html).map((href) => getLinkContent(href, fixture))
 			);
 			let [link1, link2] = content;
-			expect(link1.css).to.contain('aliceblue');
-			expect(link2.css).to.contain('yellow');
+			expect(link1.css).to.contain('f0f8ff'); // aliceblue minified
+			expect(link2.css).to.contain('#ff0'); // yellow minified
 		});
 	});
 });

packages/astro/test/fixtures/vue-component/astro.config.mjs

@@ -3,11 +3,17 @@ import vue from '@astrojs/vue';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [vue({
-        template: {
-			compilerOptions: {
-				isCustomElement: tag => tag.includes('my-button')
-			}
-        }
-	})],
-});
+	integrations: [
+		vue({
+			template: {
+				compilerOptions: {
+					isCustomElement: (tag) => tag.includes('my-button'),
+				},
+				// Don't transform img src to imports
+				transformAssetUrls: {
+					includeAbsolute: false,
+				},
+			},
+		}),
+	],
+});

packages/astro/test/ssr-params.test.js

@@ -38,4 +38,14 @@ describe('Astro.params in SSR', () => {
 			expect($('.category').text()).to.equal('food');
 		});
 	});
+
+	it('No double URL decoding', async () => {
+		const app = await fixture.loadTestAdapterApp();
+		const request = new Request('http://example.com/users/houston/%25');
+		const response = await app.render(request);
+		expect(response.status).to.equal(200);
+		const html = await response.text();
+		const $ = cheerio.load(html);
+		expect($('.category').text()).to.equal('%');
+	});
 });

packages/astro/test/units/dev/styles.test.js

@@ -15,6 +15,17 @@ class TestLoader {
 	getModulesByFile(id) {
 		return this.modules.has(id) ? [this.modules.get(id)] : [];
 	}
+	import(id) {
+		// try to normalize inline CSS requests so we can map to the existing modules value
+		id = id.replace(/(\?|&)inline=?(&|$)/, (_, start, end) => (end ? start : '')).replace(/=$/, '');
+		for (const mod of this.modules.values()) {
+			for (const importedMod of mod.importedModules) {
+				if (importedMod.id === id) {
+					return importedMod.ssrModule;
+				}
+			}
+		}
+	}
 }
 
 describe('Crawling graph for CSS', () => {
@@ -35,7 +46,7 @@ describe('Crawling graph for CSS', () => {
 						id: indexId + '?astro&style.css',
 						url: indexId + '?astro&style.css',
 						importers: new Set([{ id: indexId }]),
-						ssrModule: {},
+						ssrModule: { default: '.index {}' },
 					},
 				],
 				importers: new Set(),
@@ -50,7 +61,7 @@ describe('Crawling graph for CSS', () => {
 						id: aboutId + '?astro&style.css',
 						url: aboutId + '?astro&style.css',
 						importers: new Set([{ id: aboutId }]),
-						ssrModule: {},
+						ssrModule: { default: '.about {}' },
 					},
 				],
 				importers: new Set(),
@@ -64,11 +75,7 @@ describe('Crawling graph for CSS', () => {
 	it("importedModules is checked against the child's importers", async () => {
 		// In dev mode, HMR modules tracked are added to importedModules. We use `importers`
 		// to verify that they are true importers.
-		const res = await getStylesForURL(
-			new URL('./src/pages/index.astro', root),
-			loader,
-			'development'
-		);
-		expect(res.urls.size).to.equal(1);
+		const res = await getStylesForURL(new URL('./src/pages/index.astro', root), loader);
+		expect(res.styles.length).to.equal(1);
 	});
 });

packages/integrations/alpinejs/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @astrojs/alpinejs
 
+## 0.3.2
+
+### Patch Changes
+
+- [#9479](https://github.com/withastro/astro/pull/9479) [`1baf0b0d3cbd0564954c2366a7278794fad6726e`](https://github.com/withastro/astro/commit/1baf0b0d3cbd0564954c2366a7278794fad6726e) Thanks [@sarah11918](https://github.com/sarah11918)! - Updates README
+
 ## 0.3.1
 
 ### Patch Changes

packages/integrations/alpinejs/README.md

@@ -2,109 +2,37 @@
 
 This **[Astro integration][astro-integration]** adds [Alpine.js](https://alpinejs.dev/) to your project so that you can use Alpine.js anywhere on your page.
 
-- <strong>[Installation](#installation)</strong>
-- <strong>[Usage](#usage)</strong>
-- <strong>[Configuration](#configuration)</strong>
-- <strong>[Examples](#examples)</strong>
-- <strong>[Troubleshooting](#troubleshooting)</strong>
-- <strong>[Contributing](#contributing)</strong>
-- <strong>[Changelog](#changelog)</strong>
+## Documentation
 
-## Installation
+Read the [`@astrojs/alpinejs` docs][docs]
 
-### Quick Install
+## Support
 
-The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
+- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more!
 
-```sh
-# Using NPM
-npx astro add alpinejs
-# Using Yarn
-yarn astro add alpinejs
-# Using PNPM
-pnpm astro add alpinejs
-```
+- Check our [Astro Integration Documentation][astro-integration] for more on integrations.
 
-If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
+- Submit bug reports and feature requests as [GitHub issues][issues].
 
-### Manual Install
-
-First, install the `@astrojs/alpinejs` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
-
-```sh
-npm install @astrojs/alpinejs
-```
-
-Most package managers will install associated peer dependencies as well. However, if you see a "Cannot find package 'alpinejs'" (or similar) warning when you start up Astro, you'll need to manually install Alpine.js yourself:
-
-```sh
-npm install alpinejs @types/alpinejs
-```
-
-Then, apply this integration to your `astro.config.*` file using the `integrations` property:
-
-```diff lang="js" "alpine()"
-  // astro.config.mjs
-  import { defineConfig } from 'astro/config';
-+ import alpine from '@astrojs/alpinejs';
-
-  export default defineConfig({
-    // ...
-    integrations: [alpine()],
-    //             ^^^^^^^^
-  });
-```
-
-## Usage
-
-Once the integration is installed, you can use [Alpine.js](https://alpinejs.dev/) directives and syntax inside any Astro component. The Alpine.js script is automatically added and enabled on every page of your website.
-
-Check our [Astro Integration Documentation][astro-integration] for more on integrations.
-
-## Limitations
-
-The Alpine.js integration does not give you control over how the script is loaded or initialized. If you require this control, consider [installing and using Alpine.js manually](https://alpinejs.dev/essentials/installation). Astro supports all officially documented Alpine.js manual setup instructions, using `<script>` tags inside of an Astro component.
-
-**It is not currently possible to [extend Alpine.js](https://alpinejs.dev/advanced/extending) when using this component.** If you need this feature, consider following [the manual Alpine.js setup](https://alpinejs.dev/essentials/installation) instead using an Astro script tag:
-
-```astro
----
-// src/pages/index.astro
----
-
-<!-- Example: Load AlpineJS on a single page. -->
-<script>
-  import Alpine from 'alpinejs';
-
-  // Optional: Extend Alpine.js
-  // Alpine.directive('foo', ...)
-
-  window.Alpine = Alpine;
-  Alpine.start();
-</script>
-```
-
-## Configuration
-
-The Alpine.js integration does not support any custom configuration at this time.
-
-## Examples
-
-- The [Astro Alpine.js example](https://github.com/withastro/astro/tree/latest/examples/framework-alpine) shows how to use Alpine.js in an Astro project.
-
-## Troubleshooting
-
-For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
+## Contributing
 
-You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
+This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started:
 
-## Contributing
+- [Contributor Manual][contributing]
+- [Code of Conduct][coc]
+- [Community Guide][community]
 
-This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
+## License
 
-## Changelog
+MIT
 
-See [CHANGELOG.md](CHANGELOG.md) for a history of changes to this integration.
+Copyright (c) 2023–present [Astro][astro]
 
+[astro]: https://astro.build/
+[docs]: https://docs.astro.build/en/guides/integrations-guide/alpinejs/
+[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md
+[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
+[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
+[discord]: https://astro.build/chat/
+[issues]: https://github.com/withastro/astro/issues
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
-[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

packages/integrations/alpinejs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/alpinejs",
   "description": "Use Alpine within Astro",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",

packages/integrations/lit/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @astrojs/lit
 
+## 4.0.1
+
+### Patch Changes
+
+- [#9479](https://github.com/withastro/astro/pull/9479) [`1baf0b0d3cbd0564954c2366a7278794fad6726e`](https://github.com/withastro/astro/commit/1baf0b0d3cbd0564954c2366a7278794fad6726e) Thanks [@sarah11918](https://github.com/sarah11918)! - Updates README
+
 ## 4.0.0
 
 ### Major Changes

packages/integrations/lit/README.md

@@ -2,156 +2,37 @@
 
 This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [Lit](https://lit.dev/) custom elements.
 
-## Installation
+## Documentation
 
-There are two ways to add integrations to your project. Let's try the most convenient option first!
+Read the [`@astrojs/lit` docs][docs]
 
-### `astro add` command
+## Support
 
-Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
+- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more!
 
-1. (Optionally) Install all necessary dependencies and peer dependencies
-2. (Also optionally) Update your `astro.config.*` file to apply this integration
+- Check our [Astro Integration Documentation][astro-integration] for more on integrations.
 
-To install `@astrojs/lit`, run the following from your project directory and follow the prompts:
+- Submit bug reports and feature requests as [GitHub issues][issues].
 
-```sh
-# Using NPM
-npx astro add lit
-# Using Yarn
-yarn astro add lit
-# Using PNPM
-pnpm astro add lit
-```
-
-If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
-
-### Install dependencies manually
-
-First, install the `@astrojs/lit` integration like so:
-
-```sh
-npm install @astrojs/lit
-```
-
-Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'lit'" (or similar) warning when you start up Astro, you'll need to install `lit` and `@webcomponents/template-shadowroot`:
-
-```sh
-npm install lit @webcomponents/template-shadowroot
-```
-
-Now, apply this integration to your `astro.config.*` file using the `integrations` property:
-
-```diff lang="js" "lit()"
-  // astro.config.mjs
-  import { defineConfig } from 'astro/config';
-+ import lit from '@astrojs/lit';
-
-  export default defineConfig({
-    // ...
-    integrations: [lit()],
-    //             ^^^^^
-  });
-```
-
-## Getting started
-
-To use your first Lit component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. This explains:
-
-- 📦 how framework components are loaded,
-- 💧 client-side hydration options, and
-- 🤝 opportunities to mix and nest frameworks together
-
-Writing and importing a Lit component in Astro looks like this:
-
-```js
-// src/components/my-element.js
-import { LitElement, html } from 'lit';
-
-export class MyElement extends LitElement {
-  render() {
-    return html` <p>Hello world! From my-element</p> `;
-  }
-}
-
-customElements.define('my-element', MyElement);
-```
-
-Now, the component is ready to be imported via the Astro frontmatter:
-
-```astro
----
-// src/pages/index.astro
-import { MyElement } from '../components/my-element.js';
----
-
-<MyElement />
-```
-
-> Note that Lit requires browser globals such as `HTMLElement` and `customElements` to be present. For this reason the Lit renderer shims the server with these globals so Lit can run. You _might_ run into libraries that work incorrectly because of this.
-
-### Polyfills & Hydration
-
-The renderer automatically handles adding appropriate polyfills for support in browsers that don't have Declarative Shadow DOM. The polyfill is about _1.5kB_. If the browser does support Declarative Shadow DOM then less than 250 bytes are loaded (to feature detect support).
-
-Hydration is also handled automatically. You can use the same hydration directives such as `client:load`, `client:idle` and `client:visible` as you can with other libraries that Astro supports.
-
-```astro
----
-import { MyElement } from '../components/my-element.js';
----
-
-<MyElement client:visible />
-```
-
-The above will only load the element's JavaScript when the user has scrolled it into view. Since it is server rendered they will not see any jank; it will load and hydrate transparently.
-
-## Troubleshooting
-
-For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
-
-You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
-
-Common issues are listed below:
-
-### Browser globals
-
-The Lit integration's SSR works by adding a few browser global properties to the global environment. Some of the properties it adds includes `window`, `document`, and `location`.
-
-These globals _can_ interfere with other libraries that might use the existence of these variables to detect that they are running in the browser, when they are actually running in the server. This can cause bugs with these libraries.
-
-Because of this, the Lit integration might not be compatible with these types of libraries. One thing that can help is changing the order of integrations when Lit is interfering with other integrations:
-
-```diff lang="js"
-  // astro.config.mjs
-  import { defineConfig } from 'astro/config';
-  import vue from '@astrojs/vue';
-  import lit from '@astrojs/lit';
-
-  export default defineConfig({
--   integrations: [vue(), lit()]
-+   integrations: [lit(), vue()]
-  });
-```
-
-The correct order might be different depending on the underlying cause of the problem. This is not guaranteed to fix every issue however, and some libraries cannot be used if you are using the Lit integration because of this.
-
-### Strict package managers
-
-When using a [strict package manager](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) like `pnpm`, you may get an error such as `ReferenceError: module is not defined` when running your site. To fix this, hoist Lit dependencies with an `.npmrc` file:
+## Contributing
 
-```ini
-# .npmrc
-public-hoist-pattern[]=*lit*
-```
+This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started:
 
-### Limitations
+- [Contributor Manual][contributing]
+- [Code of Conduct][coc]
+- [Community Guide][community]
 
-The Lit integration is powered by `@lit-labs/ssr` which has some limitations. See their [limitations documentation](https://www.npmjs.com/package/@lit-labs/ssr#user-content-notes-and-limitations) to learn more.
+## License
 
-## Contributing
+MIT
 
-This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
+Copyright (c) 2023–present [Astro][astro]
 
+[astro]: https://astro.build/
+[docs]: https://docs.astro.build/en/guides/integrations-guide/lit/
+[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md
+[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
+[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
+[discord]: https://astro.build/chat/
+[issues]: https://github.com/withastro/astro/issues
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
-[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

packages/integrations/lit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/lit",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Use Lit components within Astro",
   "type": "module",
   "types": "./dist/index.d.ts",

packages/integrations/markdoc/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @astrojs/markdoc
 
+## 0.8.2
+
+### Patch Changes
+
+- [#9479](https://github.com/withastro/astro/pull/9479) [`1baf0b0d3cbd0564954c2366a7278794fad6726e`](https://github.com/withastro/astro/commit/1baf0b0d3cbd0564954c2366a7278794fad6726e) Thanks [@sarah11918](https://github.com/sarah11918)! - Updates README
+
 ## 0.8.1
 
 ### Patch Changes

packages/integrations/markdoc/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/markdoc",
   "description": "Add support for Markdoc in your Astro site",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",

packages/integrations/mdx/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @astrojs/mdx
 
+## 2.0.3
+
+### Patch Changes
+
+- [#9479](https://github.com/withastro/astro/pull/9479) [`1baf0b0d3cbd0564954c2366a7278794fad6726e`](https://github.com/withastro/astro/commit/1baf0b0d3cbd0564954c2366a7278794fad6726e) Thanks [@sarah11918](https://github.com/sarah11918)! - Updates README
+
 ## 2.0.2
 
 ### Patch Changes

packages/integrations/mdx/README.md

@@ -2,257 +2,37 @@
 
 This **[Astro integration][astro-integration]** enables the usage of [MDX](https://mdxjs.com/) components and allows you to create pages as `.mdx` files.
 
-- <strong>[Why MDX?](#why-mdx)</strong>
-- <strong>[Installation](#installation)</strong>
-- <strong>[Usage](#usage)</strong>
-- <strong>[Configuration](#configuration)</strong>
-- <strong>[Examples](#examples)</strong>
-- <strong>[Troubleshooting](#troubleshooting)</strong>
-- <strong>[Contributing](#contributing)</strong>
-- <strong>[Changelog](#changelog)</strong>
+## Documentation
 
-## Why MDX?
+Read the [`@astrojs/mdx` docs][docs]
 
-MDX allows you to [use variables, JSX expressions and components within Markdown content](https://docs.astro.build/en/guides/markdown-content/#mdx-only-features) in Astro. If you have existing content authored in MDX, this integration allows you to bring those files to your Astro project.
+## Support
 
-## Installation
+- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more!
 
-### Quick Install
+- Check our [Astro Integration Documentation][astro-integration] for more on integrations.
 
-The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
+- Submit bug reports and feature requests as [GitHub issues][issues].
 
-```sh
-# Using NPM
-npx astro add mdx
-# Using Yarn
-yarn astro add mdx
-# Using PNPM
-pnpm astro add mdx
-```
-
-If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
-
-### Manual Install
-
-First, install the `@astrojs/mdx` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
-
-```sh
-npm install @astrojs/mdx
-```
-
-Then, apply this integration to your `astro.config.*` file using the `integrations` property:
-
-```diff lang="js" "mdx()"
-  // astro.config.mjs
-  import { defineConfig } from 'astro/config';
-+ import mdx from '@astrojs/mdx';
-
-  export default defineConfig({
-    // ...
-    integrations: [mdx()],
-    //             ^^^^^
-  });
-```
-
-### Editor Integration
-
-For editor support in [VS Code](https://code.visualstudio.com/), install the [official MDX extension](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx).
-
-For other editors, use the [MDX language server](https://github.com/mdx-js/mdx-analyzer/tree/main/packages/language-server).
-
-## Usage
-
-With the Astro MDX integration, you can [add MDX pages to your project](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) by adding `.mdx` files within your `src/pages/` directory. You can also [import `.mdx` files](https://docs.astro.build/en/guides/markdown-content/#importing-markdown) into `.astro` files.
-
-Astro's MDX integration adds extra features to standard MDX, including Markdown-style frontmatter. This allows you to use most of Astro's built-in Markdown features like a [special frontmatter `layout` property](https://docs.astro.build/en/guides/markdown-content/#frontmatter-layout).
-
-See how MDX works in Astro with examples in our [Markdown & MDX guide](https://docs.astro.build/en/guides/markdown-content/).
-
-Visit the [MDX docs](https://mdxjs.com/docs/what-is-mdx/) to learn about using standard MDX features.
-
-## Configuration
-
-Once the MDX integration is installed, no configuration is necessary to use `.mdx` files in your Astro project.
-
-You can configure how your MDX is rendered with the following options:
-
-- [Options inherited from Markdown config](#options-inherited-from-markdown-config)
-- [`extendMarkdownConfig`](#extendmarkdownconfig)
-- [`recmaPlugins`](#recmaplugins)
-- [`optimize`](#optimize)
-
-### Options inherited from Markdown config
-
-All [`markdown` configuration options](https://docs.astro.build/en/reference/configuration-reference/#markdown-options) can be configured separately in the MDX integration. This includes remark and rehype plugins, syntax highlighting, and more. Options will default to those in your Markdown config ([see the `extendMarkdownConfig` option](#extendmarkdownconfig) to modify this).
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import remarkToc from 'remark-toc';
-import rehypeMinifyHtml from 'rehype-minify-html';
-
-export default defineConfig({
-  integrations: [
-    mdx({
-      syntaxHighlight: 'shiki',
-      shikiConfig: { theme: 'dracula' },
-      remarkPlugins: [remarkToc],
-      rehypePlugins: [rehypeMinifyHtml],
-      remarkRehype: { footnoteLabel: 'Footnotes' },
-      gfm: false,
-    }),
-  ],
-});
-```
-
-:::caution
-MDX does not support passing remark and rehype plugins as a string. You should install, import, and apply the plugin function instead.
-:::
-
-📚 See the [Markdown Options reference](https://docs.astro.build/en/reference/configuration-reference/#markdown-options) for a complete list of options.
-
-### `extendMarkdownConfig`
-
-- **Type:** `boolean`
-- **Default:** `true`
-
-MDX will extend [your project's existing Markdown configuration](https://docs.astro.build/en/reference/configuration-reference/#markdown-options) by default. To override individual options, you can specify their equivalent in your MDX configuration.
-
-For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-
-export default defineConfig({
-  markdown: {
-    syntaxHighlight: 'prism',
-    remarkPlugins: [remarkPlugin1],
-    gfm: true,
-  },
-  integrations: [
-    mdx({
-      // `syntaxHighlight` inherited from Markdown
-
-      // Markdown `remarkPlugins` ignored,
-      // only `remarkPlugin2` applied.
-      remarkPlugins: [remarkPlugin2],
-      // `gfm` overridden to `false`
-      gfm: false,
-    }),
-  ],
-});
-```
-
-You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-
-export default defineConfig({
-  markdown: {
-    remarkPlugins: [remarkPlugin1],
-  },
-  integrations: [
-    mdx({
-      // Markdown config now ignored
-      extendMarkdownConfig: false,
-      // No `remarkPlugins` applied
-    }),
-  ],
-});
-```
-
-### `recmaPlugins`
-
-These are plugins that modify the output [estree](https://github.com/estree/estree) directly. This is useful for modifying or injecting JavaScript variables in your MDX files.
-
-We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes.
-
-### `optimize`
-
-- **Type:** `boolean | { customComponentNames?: string[] }`
-
-This is an optional configuration setting to optimize the MDX output for faster builds and rendering via an internal rehype plugin. This may be useful if you have many MDX files and notice slow builds. However, this option may generate some unescaped HTML, so make sure your site's interactive parts still work correctly after enabling it.
-
-This is disabled by default. To enable MDX optimization, add the following to your MDX integration configuration:
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-
-export default defineConfig({
-  integrations: [
-    mdx({
-      optimize: true,
-    }),
-  ],
-});
-```
-
-#### `customComponentNames`
-
-- **Type:** `string[]`
-
-An optional property of `optimize` to prevent the MDX optimizer from handling any [custom components passed to imported MDX content via the components prop](https://docs.astro.build/en/guides/markdown-content/#custom-components-with-imported-mdx).
-
-You will need to exclude these components from optimization as the optimizer eagerly converts content into a static string, which will break custom components that needs to be dynamically rendered.
-
-For example, the intended MDX output of the following is `<Heading>...</Heading>` in place of every `"<h1>...</h1>"`:
-
-```astro
----
-import { Content, components } from '../content.mdx';
-import Heading from '../Heading.astro';
----
-
-<Content components={{ ...components, h1: Heading }} />
-```
-
-To configure optimization for this using the `customComponentNames` property, specify an array of HTML element names that should be treated as custom components:
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-
-export default defineConfig({
-  integrations: [
-    mdx({
-      optimize: {
-        // Prevent the optimizer from handling `h1` elements
-        // These will be treated as custom components
-        customComponentNames: ['h1'],
-      },
-    }),
-  ],
-});
-```
-
-Note that if your MDX file [configures custom components using `export const components = { ... }`](https://docs.astro.build/en/guides/markdown-content/#assigning-custom-components-to-html-elements), then you do not need to manually configure this option. The optimizer will automatically detect them.
-
-## Examples
-
-- The [Astro MDX starter template](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project.
-
-## Troubleshooting
-
-For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
+## Contributing
 
-You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
+This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started:
 
-## Contributing
+- [Contributor Manual][contributing]
+- [Code of Conduct][coc]
+- [Community Guide][community]
 
-This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
+## License
 
-## Changelog
+MIT
 
-See [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/mdx/CHANGELOG.md) for a history of changes to this integration.
+Copyright (c) 2023–present [Astro][astro]
 
+[astro]: https://astro.build/
+[docs]: https://docs.astro.build/en/guides/integrations-guide/mdx/
+[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md
+[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
+[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
+[discord]: https://astro.build/chat/
+[issues]: https://github.com/withastro/astro/issues
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
-[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

packages/integrations/mdx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Add support for MDX pages in your Astro site",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",

packages/integrations/node/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @astrojs/node
 
+## 7.0.3
+
+### Patch Changes
+
+- [#9479](https://github.com/withastro/astro/pull/9479) [`1baf0b0d3cbd0564954c2366a7278794fad6726e`](https://github.com/withastro/astro/commit/1baf0b0d3cbd0564954c2366a7278794fad6726e) Thanks [@sarah11918](https://github.com/sarah11918)! - Updates README
+
 ## 7.0.2
 
 ### Patch Changes

packages/integrations/node/README.md

@@ -2,236 +2,37 @@
 
 This adapter allows Astro to deploy your SSR site to Node targets.
 
-- <strong>[Why Astro Node.js](#why-astro-nodejs)</strong>
-- <strong>[Installation](#installation)</strong>
-- <strong>[Configuration](#configuration)</strong>
-- <strong>[Usage](#usage)</strong>
-- <strong>[Troubleshooting](#troubleshooting)</strong>
-- <strong>[Contributing](#contributing)</strong>
-- <strong>[Changelog](#changelog)</strong>
+## Documentation
 
-## Why Astro Node.js
+Read the [`@astrojs/node` docs][docs]
 
-If you're using Astro as a static site builder—its behavior out of the box—you don't need an adapter.
+## Support
 
-If you wish to [use server-side rendering (SSR)](https://docs.astro.build/en/guides/server-side-rendering/), Astro requires an adapter that matches your deployment runtime.
+- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more!
 
-[Node.js](https://nodejs.org/en/) is a JavaScript runtime for server-side code. @astrojs/node can be used either in standalone mode or as middleware for other http servers, such as [Express](https://expressjs.com/).
+- Check our [Astro Integration Documentation][astro-integration] for more on integrations.
 
-## Installation
+- Submit bug reports and feature requests as [GitHub issues][issues].
 
-Add the Node adapter to enable SSR in your Astro project with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.
-
-```sh
-# Using NPM
-npx astro add node
-# Using Yarn
-yarn astro add node
-# Using PNPM
-pnpm astro add node
-```
-
-### Add dependencies manually
-
-If you prefer to install the adapter manually instead, complete the following two steps:
-
-1. Install the Node adapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:
-
-   ```bash
-     npm install @astrojs/node
-   ```
-
-1. Add two new lines to your `astro.config.mjs` project configuration file.
-
-   ```diff lang="js"
-     // astro.config.mjs
-     import { defineConfig } from 'astro/config';
-   + import node from '@astrojs/node';
-
-      export default defineConfig({
-   +   output: 'server',
-   +   adapter: node({
-   +     mode: 'standalone',
-   +   }),
-     });
-   ```
-
-## Configuration
-
-@astrojs/node can be configured by passing options into the adapter function. The following options are available:
-
-### Mode
-
-Controls whether the adapter builds to `middleware` or `standalone` mode.
-
-- `middleware` mode allows the built output to be used as middleware for another Node.js server, like Express.js or Fastify.
-
-  ```js
-  // astro.config.mjs
-  import { defineConfig } from 'astro/config';
-  import node from '@astrojs/node';
-
-  export default defineConfig({
-    output: 'server',
-    adapter: node({
-      mode: 'middleware',
-    }),
-  });
-  ```
-
-- `standalone` mode builds to server that automatically starts with the entry module is run. This allows you to more easily deploy your build to a host without any additional code.
-
-## Usage
-
-First, [performing a build](https://docs.astro.build/en/guides/deploy/#building-your-site-locally). Depending on which `mode` selected (see above) follow the appropriate steps below:
-
-### Middleware
-
-The server entrypoint is built to `./dist/server/entry.mjs` by default. This module exports a `handler` function that can be used with any framework that supports the Node `request` and `response` objects.
-
-For example, with Express:
-
-```js
-// run-server.mjs
-import express from 'express';
-import { handler as ssrHandler } from './dist/server/entry.mjs';
-
-const app = express();
-// Change this based on your astro.config.mjs, `base` option.
-// They should match. The default value is "/".
-const base = '/';
-app.use(base, express.static('dist/client/'));
-app.use(ssrHandler);
-
-app.listen(8080);
-```
-
-Or, with Fastify (>4):
-
-```js
-// run-server.mjs
-import Fastify from 'fastify';
-import fastifyMiddie from '@fastify/middie';
-import fastifyStatic from '@fastify/static';
-import { fileURLToPath } from 'node:url';
-import { handler as ssrHandler } from './dist/server/entry.mjs';
-
-const app = Fastify({ logger: true });
-
-await app
-  .register(fastifyStatic, {
-    root: fileURLToPath(new URL('./dist/client', import.meta.url)),
-  })
-  .register(fastifyMiddie);
-app.use(ssrHandler);
-
-app.listen({ port: 8080 });
-```
-
-Additionally, you can also pass in an object to be accessed with `Astro.locals` or in Astro middleware:
-
-```js
-// run-server.mjs
-import express from 'express';
-import { handler as ssrHandler } from './dist/server/entry.mjs';
-
-const app = express();
-app.use(express.static('dist/client/'));
-app.use((req, res, next) => {
-  const locals = {
-    title: 'New title',
-  };
-
-  ssrHandler(req, res, next, locals);
-});
-
-app.listen(8080);
-```
-
-Note that middleware mode does not do file serving. You'll need to configure your HTTP framework to do that for you. By default the client assets are written to `./dist/client/`.
-
-### Standalone
-
-In standalone mode a server starts when the server entrypoint is run. By default it is built to `./dist/server/entry.mjs`. You can run it with:
-
-```shell
-node ./dist/server/entry.mjs
-```
-
-For standalone mode the server handles file serving in addition to the page and API routes.
-
-#### Custom host and port
-
-You can override the host and port the standalone server runs on by passing them as environment variables at runtime:
-
-```shell
-HOST=0.0.0.0 PORT=4321 node ./dist/server/entry.mjs
-```
-
-#### HTTPS
-
-By default the standalone server uses HTTP. This works well if you have a proxy server in front of it that does HTTPS. If you need the standalone server to run HTTPS itself you need to provide your SSL key and certificate.
-
-You can pass the path to your key and certification via the environment variables `SERVER_CERT_PATH` and `SERVER_KEY_PATH`. This is how you might pass them in bash:
-
-```bash
-SERVER_KEY_PATH=./private/key.pem SERVER_CERT_PATH=./private/cert.pem node ./dist/server/entry.mjs
-```
-
-#### Runtime environment variables
-
-If an `.env` file containing environment variables is present when the build process is run, these values will be hard-coded in the output, just as when generating a static website.
-
-During the build, the runtime variables must be absent from the `.env` file, and you must provide Astro with every environment variable to expect at run-time: `VARIABLE_1=placeholder astro build`. This signals to Astro that the actual value will be available when the built application is run. The placeholder value will be ignored by the build process, and Astro will use the value provided at run-time.
-
-In the case of multiple run-time variables, store them in a seperate file (e.g. `.env.runtime`) from `.env`. Start the build with the following command:
-
-```sh
-export $(cat .env.runtime) && astro build
-```
-
-#### Assets
-
-In standalone mode, assets in your `dist/client/` folder are served via the standalone server. You might be deploying these assets to a CDN, in which case the server will never actually be serving them. But in some cases, such as intranet sites, it's fine to serve static assets directly from the application server.
-
-Assets in the `dist/client/_astro/` folder are the ones that Astro has built. These assets are all named with a hash and therefore can be given long cache headers. Internally the adapter adds this header for these assets:
-
-```
-Cache-Control: public, max-age=31536000, immutable
-```
-
-## Troubleshooting
-
-### SyntaxError: Named export 'compile' not found
-
-You may see this when running the entry script if it was built with npm or Yarn. This is a known issue that may be fixed in a future release. As a workaround, add `"path-to-regexp"` to the `noExternal` array:
-
-```diff lang="js"
-  // astro.config.mjs
-  import { defineConfig } from 'astro/config';
-  import node from '@astrojs/node';
-
-  export default defineConfig({
-    output: 'server',
-    adapter: node(),
-+   vite: {
-+     ssr: {
-+       noExternal: ['path-to-regexp'],
-+     },
-+   },
-  });
-```
-
-For more help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
+## Contributing
 
-You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
+This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started:
 
-## Contributing
+- [Contributor Manual][contributing]
+- [Code of Conduct][coc]
+- [Community Guide][community]
 
-This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
+## License
 
-## Changelog
+MIT
 
-See [CHANGELOG.md](CHANGELOG.md) for a history of changes to this integration.
+Copyright (c) 2023–present [Astro][astro]
 
+[astro]: https://astro.build/
+[docs]: https://docs.astro.build/en/guides/integrations-guide/node/
+[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md
+[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
+[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
+[discord]: https://astro.build/chat/
+[issues]: https://github.com/withastro/astro/issues
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/

packages/integrations/node/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/node",
   "description": "Deploy your site to a Node.js server",
-  "version": "7.0.2",
+  "version": "7.0.3",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",

packages/integrations/partytown/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @astrojs/partytown
 
+## 2.0.3
+
+### Patch Changes
+
+- [#9479](https://github.com/withastro/astro/pull/9479) [`1baf0b0d3cbd0564954c2366a7278794fad6726e`](https://github.com/withastro/astro/commit/1baf0b0d3cbd0564954c2366a7278794fad6726e) Thanks [@sarah11918](https://github.com/sarah11918)! - Updates README
+
 ## 2.0.2
 
 ### Patch Changes

packages/integrations/partytown/README.md

@@ -2,151 +2,37 @@
 
 This **[Astro integration][astro-integration]** enables [Partytown](https://partytown.builder.io/) in your Astro project.
 
-- <strong>[Why Astro Partytown](#why-astro-partytown)</strong>
-- <strong>[Installation](#installation)</strong>
-- <strong>[Usage](#usage)</strong>
-- <strong>[Configuration](#configuration)</strong>
-- <strong>[Examples](#examples)</strong>
-- <strong>[Troubleshooting](#troubleshooting)</strong>
-- <strong>[Contributing](#contributing)</strong>
-- <strong>[Changelog](#changelog)</strong>
+## Documentation
 
-## Why Astro Partytown
+Read the [`@astrojs/partytown` docs][docs]
 
-Partytown is a lazy-loaded library to help relocate resource intensive scripts into a [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API), and off of the [main thread](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread).
+## Support
 
-If you're using third-party scripts for things like analytics or ads, Partytown is a great way to make sure that they don't slow down your site.
+- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more!
 
-The Astro Partytown integration installs Partytown for you and makes sure it's enabled on all of your pages.
+- Check our [Astro Integration Documentation][astro-integration] for more on integrations.
 
-## Installation
+- Submit bug reports and feature requests as [GitHub issues][issues].
 
-### Quick Install
-
-The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
-
-```sh
-# Using NPM
-npx astro add partytown
-# Using Yarn
-yarn astro add partytown
-# Using PNPM
-pnpm astro add partytown
-```
-
-If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
-
-### Manual Install
-
-First, install the `@astrojs/partytown` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
-
-```sh
-npm install @astrojs/partytown
-```
-
-Then, apply this integration to your `astro.config.*` file using the `integrations` property:
-
-```diff lang="js" "partytown()"
-  // astro.config.mjs
-  import { defineConfig } from 'astro/config';
-+ import partytown from '@astrojs/partytown';
-
-  export default defineConfig({
-    // ...
-    integrations: [partytown()],
-    //             ^^^^^^^^^^^
-  });
-```
-
-## Usage
-
-Partytown should be ready to go with zero config. If you have an existing 3rd party script on your site, try adding the `type="text/partytown"` attribute:
-
-```diff lang="html"
--  <script src="fancy-analytics.js"></script>
-+  <script type="text/partytown" src="fancy-analytics.js"></script>
-```
-
-If you open the "Network" tab from [your browser's dev tools](https://developer.chrome.com/docs/devtools/open/), you should see the `partytown` proxy intercepting this request.
-
-## Configuration
-
-To configure this integration, pass a 'config' object to the `partytown()` function call in `astro.config.mjs`.
-
-```js
-// astro.config.mjs
-// ...
-export default defineConfig({
-  integrations: [
-    partytown({
-      config: {
-        // options go here
-      },
-    }),
-  ],
-});
-```
-
-This mirrors the [Partytown config object](https://partytown.builder.io/configuration).
-
-### config.debug
-
-Partytown ships with a `debug` mode; enable or disable it by passing `true` or `false` to `config.debug`. If [`debug` mode](https://partytown.builder.io/debugging) is enabled, it will output detailed logs to the browser console.
-
-If this option isn't set, `debug` mode will be on by default in [dev](https://docs.astro.build/en/reference/cli-reference/#astro-dev) or [preview](https://docs.astro.build/en/reference/cli-reference/#astro-preview) mode.
-
-```js
-// astro.config.mjs
-export default defineConfig({
-  integrations: [
-    partytown({
-      // Example: Disable debug mode.
-      config: { debug: false },
-    }),
-  ],
-});
-```
-
-### config.forward
-
-Third-party scripts typically add variables to the `window` object so that you can communicate with them throughout your site. But when a script is loaded in a web-worker, it doesn't have access to that global `window` object.
-
-To solve this, Partytown can "patch" variables to the global window object and forward them to the appropriate script.
-
-You can specify which variables to forward with the `config.forward` option. [Read more in Partytown's documentation.](https://partytown.builder.io/forwarding-events)
-
-```js
-// astro.config.mjs
-export default defineConfig({
-  integrations: [
-    partytown({
-      // Example: Add dataLayer.push as a forwarding-event.
-      config: {
-        forward: ['dataLayer.push'],
-      },
-    }),
-  ],
-});
-```
-
-## Examples
-
-- [Browse projects with Astro Partytown on GitHub](https://github.com/search?q=%22%40astrojs%2Fpartytown%22+path%3A**%2Fpackage.json&type=code) for more examples!
-
-## Troubleshooting
-
-- If you're getting a `Failed to fetch` error, make sure you're not using any browser extensions that are blocking the script.
-
-For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
+## Contributing
 
-You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
+This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started:
 
-## Contributing
+- [Contributor Manual][contributing]
+- [Code of Conduct][coc]
+- [Community Guide][community]
 
-This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
+## License
 
-## Changelog
+MIT
 
-See [CHANGELOG.md](CHANGELOG.md) for a history of changes to this integration.
+Copyright (c) 2023–present [Astro][astro]
 
+[astro]: https://astro.build/
+[docs]: https://docs.astro.build/en/guides/integrations-guide/partytown/
+[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md
+[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
+[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
+[discord]: https://astro.build/chat/
+[issues]: https://github.com/withastro/astro/issues
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/

packages/integrations/partytown/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/partytown",
   "description": "Use Partytown to move scripts into a web worker in your Astro project",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",

packages/integrations/preact/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @astrojs/preact
 
+## 3.0.2
+
+### Patch Changes
+
+- [#9482](https://github.com/withastro/astro/pull/9482) [`72b26daf694b213918f02d0fcbf90ab5b7ebc31f`](https://github.com/withastro/astro/commit/72b26daf694b213918f02d0fcbf90ab5b7ebc31f) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Improves compatability with the [Qwik adapter](https://github.com/QwikDev/astro)
+
+- [#9479](https://github.com/withastro/astro/pull/9479) [`1baf0b0d3cbd0564954c2366a7278794fad6726e`](https://github.com/withastro/astro/commit/1baf0b0d3cbd0564954c2366a7278794fad6726e) Thanks [@sarah11918](https://github.com/sarah11918)! - Updates README
+
 ## 3.0.1
 
 ### Patch Changes

packages/integrations/preact/README.md

@@ -2,174 +2,37 @@
 
 This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [Preact](https://preactjs.com/) components.
 
-- <strong>[Why Preact?](#why-preact)</strong>
-- <strong>[Installation](#installation)</strong>
-- <strong>[Usage](#usage)</strong>
-- <strong>[Configuration](#configuration)</strong>
-- <strong>[Examples](#examples)</strong>
-- <strong>[Troubleshooting](#troubleshooting)</strong>
-- <strong>[Contributing](#contributing)</strong>
-- <strong>[Changelog](#changelog)</strong>
+## Documentation
 
-## Why Preact?
+Read the [`@astrojs/preact` docs][docs]
 
-Preact is a library that lets you build interactive UI components for the web. If you want to build interactive features on your site using JavaScript, you may prefer using its component format instead of using browser APIs directly.
+## Support
 
-Preact is also a great choice if you have previously used React. Preact provides the same API as React, but in a much smaller 3kB package. It even supports rendering many React components using the `compat` configuration option (see below).
+- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more!
 
-**Want to learn more about Preact before using this integration?**  
-Check out [“Learn Preact in 10 minutes”](https://preactjs.com/tutorial), an interactive tutorial on their website.
+- Check our [Astro Integration Documentation][astro-integration] for more on integrations.
 
-## Installation
+- Submit bug reports and feature requests as [GitHub issues][issues].
 
-### Quick Install
-
-The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
-
-```sh
-# Using NPM
-npx astro add preact
-# Using Yarn
-yarn astro add preact
-# Using PNPM
-pnpm astro add preact
-```
-
-If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
-
-### Manual Install
-
-First, install the `@astrojs/preact` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
-
-```sh
-npm install @astrojs/preact
-```
-
-Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'preact'" (or similar) warning when you start up Astro, you'll need to install Preact:
-
-```sh
-npm install preact
-```
-
-Then, apply this integration to your `astro.config.*` file using the `integrations` property:
-
-```diff lang="js" "preact()"
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-+ import preact from '@astrojs/preact';
-
-export default defineConfig({
-  // ...
-  integrations: [preact()],
-  //             ^^^^^^^^
-});
-```
-
-## Usage
-
-To use your first Preact component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
-
-- 📦 how framework components are loaded,
-- 💧 client-side hydration options, and
-- 🤝 opportunities to mix and nest frameworks together
-
-Also check our [Astro Integration Documentation][astro-integration] for more on integrations.
-
-## Configuration
-
-The Astro Preact integration handles how Preact components are rendered and it has its own options. Change these in the `astro.config.mjs` file which is where your project's integration settings live.
-
-For basic usage, you do not need to configure the Preact integration.
-
-### compat
-
-You can enable `preact/compat`, Preact’s compatibility layer for rendering React components without needing to install or ship React’s larger libraries to your users’ web browsers.
-
-To do so, pass an object to the Preact integration and set `compat: true`.
-
-```js "compat: true"
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import preact from '@astrojs/preact';
-
-export default defineConfig({
-  integrations: [preact({ compat: true })],
-  //                      ^^^^^^^^^^^^
-});
-```
-
-With the `compat` option enabled, the Preact integration will render React components as well as Preact components in your project and also allow you to import React components inside Preact components. Read more in [“Switching to Preact (from React)”](https://preactjs.com/guide/v10/switching-to-preact) on the Preact website.
-
-When importing React component libraries, in order to swap out the `react` and `react-dom` dependencies as `preact/compat`, you can use [`overrides`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) to do so.
-
-```json title="package.json"
-{
-  "overrides": {
-    "react": "npm:@preact/compat@latest",
-    "react-dom": "npm:@preact/compat@latest"
-  }
-}
-```
-
-Check out the [`pnpm` overrides](https://pnpm.io/package_json#pnpmoverrides) and [`yarn` resolutions](https://yarnpkg.com/configuration/manifest#resolutions) docs for their respective overrides features.
-
-> **Note**
-> Currently, the `compat` option only works for React libraries that export code as ESM. If an error happens during build-time, try adding the library to `vite.ssr.noExternal: ['the-react-library']` in your `astro.config.mjs` file.
-
-## Options
-
-### Combining multiple JSX frameworks
-
-When you are using multiple JSX frameworks (React, Preact, Solid) in the same project, Astro needs to determine which JSX framework-specific transformations should be used for each of your components. If you have only added one JSX framework integration to your project, no extra configuration is needed.
-
-Use the `include` (required) and `exclude` (optional) configuration options to specify which files belong to which framework. Provide an array of files and/or folders to `include` for each framework you are using. Wildcards may be used to include multiple file paths.
-
-We recommend placing common framework components in the same folder (e.g. `/components/react/` and `/components/solid/`) to make specifying your includes easier, but this is not required:
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import preact from '@astrojs/preact';
-import react from '@astrojs/react';
-import svelte from '@astrojs/svelte';
-import vue from '@astrojs/vue';
-import solid from '@astrojs/solid-js';
-
-export default defineConfig({
-  // Enable many frameworks to support all different kinds of components.
-  // No `include` is needed if you are only using a single JSX framework!
-  integrations: [
-    preact({
-      include: ['**/preact/*'],
-    }),
-    react({
-      include: ['**/react/*'],
-    }),
-    solid({
-      include: ['**/solid/*'],
-    }),
-  ],
-});
-```
-
-## Examples
-
-- The [Astro Preact example](https://github.com/withastro/astro/tree/latest/examples/framework-preact) shows how to use an interactive Preact component in an Astro project.
-- The [Astro Nanostores example](https://github.com/withastro/astro/tree/latest/examples/with-nanostores) shows how to share state between different components — and even different frameworks! — in an Astro project.
-
-## Troubleshooting
-
-For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
+## Contributing
 
-You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
+This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started:
 
-## Contributing
+- [Contributor Manual][contributing]
+- [Code of Conduct][coc]
+- [Community Guide][community]
 
-This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
+## License
 
-## Changelog
+MIT
 
-See [CHANGELOG.md](CHANGELOG.md) for a history of changes to this integration.
+Copyright (c) 2023–present [Astro][astro]
 
+[astro]: https://astro.build/
+[docs]: https://docs.astro.build/en/guides/integrations-guide/preact/
+[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md
+[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
+[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
+[discord]: https://astro.build/chat/
+[issues]: https://github.com/withastro/astro/issues
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
-[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

packages/integrations/preact/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/preact",
   "description": "Use Preact components within Astro",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",

packages/integrations/preact/src/server.ts

@@ -13,6 +13,7 @@ let consoleFilterRefs = 0;
 
 function check(this: RendererContext, Component: any, props: Record<string, any>, children: any) {
 	if (typeof Component !== 'function') return false;
+	if (Component.name === 'QwikComponent') return false;
 
 	if (Component.prototype != null && typeof Component.prototype.render === 'function') {
 		return BaseComponent.isPrototypeOf(Component);
@@ -79,7 +80,7 @@ function renderToStaticMarkup(
 				? h(StaticHtml, {
 						hydrate: shouldHydrate(metadata),
 						value: children,
-				  })
+					})
 				: children
 		) as VNode<any>
 	);

packages/integrations/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @astrojs/react
 
+## 3.0.9
+
+### Patch Changes
+
+- [#9482](https://github.com/withastro/astro/pull/9482) [`72b26daf694b213918f02d0fcbf90ab5b7ebc31f`](https://github.com/withastro/astro/commit/72b26daf694b213918f02d0fcbf90ab5b7ebc31f) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Improves compatability with the [Qwik adapter](https://github.com/QwikDev/astro)
+
+- [#9479](https://github.com/withastro/astro/pull/9479) [`1baf0b0d3cbd0564954c2366a7278794fad6726e`](https://github.com/withastro/astro/commit/1baf0b0d3cbd0564954c2366a7278794fad6726e) Thanks [@sarah11918](https://github.com/sarah11918)! - Updates README
+
 ## 3.0.8
 
 ### Patch Changes

packages/integrations/react/README.md

@@ -2,149 +2,37 @@
 
 This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [React](https://react.dev/) components.
 
-## Installation
+## Documentation
 
-There are two ways to add integrations to your project. Let's try the most convenient option first!
+Read the [`@astrojs/react` docs][docs]
 
-### `astro add` command
+## Support
 
-Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
+- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more!
 
-1. (Optionally) Install all necessary dependencies and peer dependencies
-2. (Also optionally) Update your `astro.config.*` file to apply this integration
+- Check our [Astro Integration Documentation][astro-integration] for more on integrations.
 
-To install `@astrojs/react`, run the following from your project directory and follow the prompts:
+- Submit bug reports and feature requests as [GitHub issues][issues].
 
-```sh
-# Using NPM
-npx astro add react
-# Using Yarn
-yarn astro add react
-# Using PNPM
-pnpm astro add react
-```
-
-If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
-
-### Install dependencies manually
-
-First, install the `@astrojs/react` integration like so:
-
-```sh
-npm install @astrojs/react
-```
-
-Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'react'" (or similar) warning when you start up Astro, you'll need to install `react` and `react-dom`:
-
-```sh
-npm install react react-dom
-```
-
-Now, apply this integration to your `astro.config.*` file using the `integrations` property:
-
-```diff lang="js" "react()"
-  // astro.config.mjs
-  import { defineConfig } from 'astro/config';
-+ import react from '@astrojs/react';
-
-  export default defineConfig({
-    // ...
-    integrations: [react()],
-    //             ^^^^^^^
-  });
-```
-
-## Getting started
-
-To use your first React component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
-
-- 📦 how framework components are loaded,
-- 💧 client-side hydration options, and
-- 🤝 opportunities to mix and nest frameworks together
-
-## Options
-
-### Combining multiple JSX frameworks
-
-When you are using multiple JSX frameworks (React, Preact, Solid) in the same project, Astro needs to determine which JSX framework-specific transformations should be used for each of your components. If you have only added one JSX framework integration to your project, no extra configuration is needed.
-
-Use the `include` (required) and `exclude` (optional) configuration options to specify which files belong to which framework. Provide an array of files and/or folders to `include` for each framework you are using. Wildcards may be used to include multiple file paths.
-
-We recommend placing common framework components in the same folder (e.g. `/components/react/` and `/components/solid/`) to make specifying your includes easier, but this is not required:
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import preact from '@astrojs/preact';
-import react from '@astrojs/react';
-import svelte from '@astrojs/svelte';
-import vue from '@astrojs/vue';
-import solid from '@astrojs/solid-js';
-
-export default defineConfig({
-  // Enable many frameworks to support all different kinds of components.
-  // No `include` is needed if you are only using a single JSX framework!
-  integrations: [
-    preact({
-      include: ['**/preact/*'],
-    }),
-    react({
-      include: ['**/react/*'],
-    }),
-    solid({
-      include: ['**/solid/*'],
-    }),
-  ],
-});
-```
-
-### Children parsing
-
-Children passed into a React component from an Astro component are parsed as plain strings, not React nodes.
-
-For example, the `<ReactComponent />` below will only receive a single child element:
-
-```astro
----
-import ReactComponent from './ReactComponent';
----
-
-<ReactComponent>
-  <div>one</div>
-  <div>two</div>
-</ReactComponent>
-```
-
-If you are using a library that _expects_ more than one child element to be passed, for example so that it can slot certain elements in different places, you might find this to be a blocker.
-
-You can set the experimental flag `experimentalReactChildren` to tell Astro to always pass children to React as React vnodes. There is some runtime cost to this, but it can help with compatibility.
-
-You can enable this option in the configuration for the React integration:
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import react from '@astrojs/react';
-
-export default defineConfig({
-  // ...
-  integrations: [
-    react({
-      experimentalReactChildren: true,
-    }),
-  ],
-});
-```
+## Contributing
 
-## Troubleshooting
+This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started:
 
-For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
+- [Contributor Manual][contributing]
+- [Code of Conduct][coc]
+- [Community Guide][community]
 
-You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
+## License
 
-## Contributing
+MIT
 
-This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
+Copyright (c) 2023–present [Astro][astro]
 
+[astro]: https://astro.build/
+[docs]: https://docs.astro.build/en/guides/integrations-guide/react/
+[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md
+[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
+[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
+[discord]: https://astro.build/chat/
+[issues]: https://github.com/withastro/astro/issues
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
-[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

packages/integrations/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/react",
   "description": "Use React components within Astro",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",

packages/integrations/react/server-v17.js

@@ -20,6 +20,7 @@ function check(Component, props, children) {
 		return Component['$$typeof']?.toString().slice('Symbol('.length).startsWith('react');
 	}
 	if (typeof Component !== 'function') return false;
+	if (Component.name === 'QwikComponent') return false;
 
 	if (Component.prototype != null && typeof Component.prototype.render === 'function') {
 		return React.Component.isPrototypeOf(Component) || React.PureComponent.isPrototypeOf(Component);

packages/integrations/react/server.js

@@ -22,6 +22,7 @@ async function check(Component, props, children) {
 		return Component['$$typeof'].toString().slice('Symbol('.length).startsWith('react');
 	}
 	if (typeof Component !== 'function') return false;
+	if (Component.name === 'QwikComponent') return false;
 
 	// Preact forwarded-ref components can be functions, which React does not support
 	if (typeof Component === 'function' && Component['$$typeof'] === Symbol.for('react.forward_ref'))

packages/integrations/sitemap/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @astrojs/sitemap
 
+## 3.0.4
+
+### Patch Changes
+
+- [#9479](https://github.com/withastro/astro/pull/9479) [`1baf0b0d3cbd0564954c2366a7278794fad6726e`](https://github.com/withastro/astro/commit/1baf0b0d3cbd0564954c2366a7278794fad6726e) Thanks [@sarah11918](https://github.com/sarah11918)! - Updates README
+
 ## 3.0.3
 
 ### Patch Changes