Support framework components

packages/astro/src/core/app/dev/pipeline.ts

@@ -7,7 +7,6 @@ import type {
 } from '../../../types/public/index.js';
 import { Pipeline, type TryRewriteResult } from '../../base-pipeline.js';
 import {
-	createAssetLink,
 	createModuleScriptElement,
 	createStylesheetElementSet,
 } from '../../render/ssr-element.js';
@@ -20,14 +19,10 @@ export class DevPipeline extends Pipeline {
 		streaming,
 	}: Pick<DevPipeline, 'logger' | 'manifest' | 'streaming'>) {
 		const resolve = async function resolve(specifier: string) {
-			if (!(specifier in manifest.entryModules)) {
-				throw new Error(`Unable to resolve [${specifier}]`);
-			}
-			const bundlePath = manifest.entryModules[specifier];
-			if (bundlePath.startsWith('data:') || bundlePath.length === 0) {
-				return bundlePath;
+			if(specifier.startsWith('/')) {
+				return specifier;
 			} else {
-				return createAssetLink(bundlePath, manifest.base, manifest.assetsPrefix);
+				return '/@id/' + specifier;
 			}
 		};
 		const pipeline = new DevPipeline(
@@ -75,6 +70,14 @@ export class DevPipeline extends Pipeline {
 	componentMetadata() {}
 
 	async getComponentByRoute(routeData: RouteData): Promise<ComponentInstance> {
+		try {
+			const module = await this.getModuleForRoute(routeData);
+			return module.page();
+		}
+		catch {
+			// could not find, ignore	
+		}
+
 		const url = new URL(routeData.component, this.manifest.rootDir);
 		const module = await import(url.toString());
 		return module;

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

@@ -47,7 +47,7 @@ function vitePluginPages(opts: StaticBuildOptions, internals: BuildInternals): V
 						imports.push(`import * as _page from ${JSON.stringify(pageData.moduleSpecifier)};`);
 						exports.push(`export const page = () => _page`);
 
-						imports.push(`import { renderers } from "${RENDERERS_MODULE_ID}";`);
+						imports.push(`import { renderers } from "astro:renderers";`);
 						exports.push(`export { renderers };`);
 
 						return { code: `${imports.join('\n')}${exports.join('\n')}` };

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

@@ -1,47 +1,21 @@
 import type { Plugin as VitePlugin } from 'vite';
+import vitePluginRenderers, { ASTRO_RENDERERS_MODULE_ID } from '../../../vite-plugin-renderers/index.js';
 import { addRollupInput } from '../add-rollup-input.js';
 import type { AstroBuildPlugin } from '../plugin.js';
 import type { StaticBuildOptions } from '../types.js';
 
-export const RENDERERS_MODULE_ID = '@astro-renderers';
+// Keep the old export for backwards compatibility, but it now points to the new module ID
+export const RENDERERS_MODULE_ID = ASTRO_RENDERERS_MODULE_ID;
 export const RESOLVED_RENDERERS_MODULE_ID = `\0${RENDERERS_MODULE_ID}`;
 
-function vitePluginRenderers(opts: StaticBuildOptions): VitePlugin {
+function vitePluginRenderersForBuild(opts: StaticBuildOptions): VitePlugin {
+	const basePlugin = vitePluginRenderers({ settings: opts.settings });
+
+	// Add the rollup input option for build
 	return {
-		name: '@astro/plugin-renderers',
-
+		...basePlugin,
 		options(options) {
-			return addRollupInput(options, [RENDERERS_MODULE_ID]);
-		},
-
-		resolveId(id) {
-			if (id === RENDERERS_MODULE_ID) {
-				return RESOLVED_RENDERERS_MODULE_ID;
-			}
-		},
-
-		async load(id) {
-			if (id === RESOLVED_RENDERERS_MODULE_ID) {
-				if (opts.settings.renderers.length > 0) {
-					const imports: string[] = [];
-					const exports: string[] = [];
-					let i = 0;
-					let rendererItems = '';
-
-					for (const renderer of opts.settings.renderers) {
-						const variable = `_renderer${i}`;
-						imports.push(`import ${variable} from ${JSON.stringify(renderer.serverEntrypoint)};`);
-						rendererItems += `Object.assign(${JSON.stringify(renderer)}, { ssr: ${variable} }),`;
-						i++;
-					}
-
-					exports.push(`export const renderers = [${rendererItems}];`);
-
-					return { code: `${imports.join('\n')}\n${exports.join('\n')}` };
-				} else {
-					return { code: `export const renderers = [];` };
-				}
-			}
+			return addRollupInput(options, [ASTRO_RENDERERS_MODULE_ID]);
 		},
 	};
 }
@@ -52,7 +26,7 @@ export function pluginRenderers(opts: StaticBuildOptions): AstroBuildPlugin {
 		hooks: {
 			'build:before': () => {
 				return {
-					vitePlugin: vitePluginRenderers(opts),
+					vitePlugin: vitePluginRenderersForBuild(opts),
 				};
 			},
 		},

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

@@ -166,7 +166,7 @@ function generateSSRCode(adapter: AstroAdapter, middlewareId: string) {
 	const edgeMiddleware = adapter?.adapterFeatures?.edgeMiddleware ?? false;
 
 	const imports = [
-		`import { renderers } from '${RENDERERS_MODULE_ID}';`,
+		`import { renderers } from 'astro:renderers';`,
 		`import * as serverEntrypointModule from '${ADAPTER_VIRTUAL_MODULE_ID}';`,
 		`import { manifest as defaultManifest } from '${SSR_MANIFEST_VIRTUAL_MODULE_ID}';`,
 		`import { serverIslandMap } from '${VIRTUAL_ISLAND_MAP_ID}';`,

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

@@ -34,6 +34,7 @@ import htmlVitePlugin from '../vite-plugin-html/index.js';
 import astroIntegrationsContainerPlugin from '../vite-plugin-integrations-container/index.js';
 import astroLoadFallbackPlugin from '../vite-plugin-load-fallback/index.js';
 import markdownVitePlugin from '../vite-plugin-markdown/index.js';
+import vitePluginRenderers from '../vite-plugin-renderers/index.js';
 import astroPluginRoutes from '../vite-plugin-routes/index.js';
 import astroScriptsPlugin from '../vite-plugin-scripts/index.js';
 import astroScriptsPageSSRPlugin from '../vite-plugin-scripts/page-ssr.js';
@@ -144,6 +145,7 @@ export async function createVite(
 		},
 		plugins: [
 			await serializedManifestPlugin({ settings }),
+			vitePluginRenderers({ settings }),
 			await astroPluginRoutes({ settings, logger, fsMod: fs, command }),
 			astroVirtualManifestPlugin(),
 			configAliasVitePlugin({ settings }),

packages/astro/src/manifest/serialized.ts

@@ -23,8 +23,6 @@ export async function serializedManifestPlugin({
 }: {
 	settings: AstroSettings;
 }): Promise<Plugin> {
-	const serialized = await createSerializedManifest(settings);
-
 	return {
 		name: 'astro:serialized-manifest',
 		enforce: 'pre',
@@ -36,6 +34,7 @@ export async function serializedManifestPlugin({
 
 		async load(id) {
 			if (id === SERIALIZED_MANIFEST_RESOLVED_ID) {
+				const serialized = await createSerializedManifest(settings);
 				const code = `
 					import { deserializeManifest as _deserializeManifest } from 'astro/app';
 					export const manifest = _deserializeManifest((${JSON.stringify(serialized)}));

packages/astro/src/vite-plugin-app/createExports.ts

@@ -2,6 +2,8 @@
 import { routes } from 'astro:routes';
 // @ts-expect-error This is a virtual module
 import { manifest as serializedManifest } from 'astro:serialized-manifest';
+// @ts-expect-error This is a virtual module
+import { renderers } from 'astro:renderers';
 
 import type http from 'node:http';
 import type { RouteInfo } from '../core/app/types.js';
@@ -23,7 +25,10 @@ export default async function createExports(
 	});
 	const routesList: RoutesList = { routes: routes.map((r: RouteInfo) => r.routeData) };
 
-	const app = await AstroServerApp.create(serializedManifest, routesList, logger, loader, settings);
+	// Merge renderers into the serialized manifest
+	const manifest = Object.assign(serializedManifest, { renderers });
+
+	const app = await AstroServerApp.create(manifest, routesList, logger, loader, settings);
 	return {
 		handler(incomingRequest: http.IncomingMessage, incomingResponse: http.ServerResponse) {
 			app.handleRequest({

packages/astro/src/vite-plugin-renderers/index.ts

@@ -0,0 +1,48 @@
+import type { Plugin as VitePlugin } from 'vite';
+import type { AstroSettings } from '../types/astro.js';
+
+export const ASTRO_RENDERERS_MODULE_ID = 'astro:renderers';
+export const RESOLVED_ASTRO_RENDERERS_MODULE_ID = `\0${ASTRO_RENDERERS_MODULE_ID}`;
+
+interface PluginOptions {
+	settings: AstroSettings;
+}
+
+export default function vitePluginRenderers(options: PluginOptions): VitePlugin {
+	const renderers = options.settings.renderers;
+
+	return {
+		name: 'astro:plugin-renderers',
+		enforce: 'pre',
+
+		resolveId(id) {
+			if (id === ASTRO_RENDERERS_MODULE_ID) {
+				return RESOLVED_ASTRO_RENDERERS_MODULE_ID;
+			}
+		},
+
+		async load(id) {
+			if (id === RESOLVED_ASTRO_RENDERERS_MODULE_ID) {
+				if (renderers.length > 0) {
+					const imports: string[] = [];
+					const exports: string[] = [];
+					let i = 0;
+					let rendererItems = '';
+
+					for (const renderer of renderers) {
+						const variable = `_renderer${i}`;
+						imports.push(`import ${variable} from ${JSON.stringify(renderer.serverEntrypoint)};`);
+						rendererItems += `Object.assign(${JSON.stringify(renderer)}, { ssr: ${variable} }),`;
+						i++;
+					}
+
+					exports.push(`export const renderers = [${rendererItems}];`);
+
+					return { code: `${imports.join('\n')}\n${exports.join('\n')}` };
+				} else {
+					return { code: `export const renderers = [];` };
+				}
+			}
+		},
+	};
+}

packages/integrations/cloudflare/test/fixtures/vite-plugin/astro.config.mjs

@@ -4,6 +4,7 @@ import { defineConfig } from 'astro/config';
 
 import mdx from '@astrojs/mdx';
 import { fileURLToPath } from 'node:url';
+import react from '@astrojs/react';
 
 export default defineConfig({
 	adapter: cloudflare({
@@ -16,5 +17,5 @@ export default defineConfig({
 			},
 		},
 	},
-	integrations: [mdx()],
+	integrations: [mdx(), react()],
 });

packages/integrations/cloudflare/test/fixtures/vite-plugin/package.json

@@ -2,9 +2,17 @@
 	"name": "@test/astro-cloudflare-vite-plugin",
 	"version": "0.0.0",
 	"private": true,
+	"scripts": {
+	  "dev": "astro dev"
+	},
 	"dependencies": {
 		"@astrojs/cloudflare": "workspace:*",
 		"@astrojs/mdx": "^4.3.5",
-		"astro": "workspace:*"
+		"@astrojs/react": "workspace:*",
+		"astro": "workspace:*",
+    "@types/react": "^18.3.24",
+    "@types/react-dom": "^18.3.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
 	}
 }

packages/integrations/cloudflare/test/fixtures/vite-plugin/src/components/Hello.tsx

@@ -0,0 +1,6 @@
+
+export default function() {
+	return (
+		<div>Hello world</div>
+	);
+}

packages/integrations/cloudflare/test/fixtures/vite-plugin/src/dev.ts

@@ -1,5 +1,8 @@
-import { manifest } from "astro:serialized-manifest";
+import { manifest as serializedManifest } from "astro:serialized-manifest";
+import { renderers } from "astro:renderers";
 import { routes } from "astro:routes"
 import { createExports } from "@astrojs/cloudflare/entrypoints/server.js";
 
+const manifest = Object.assign(serializedManifest, { renderers });
+
 export default createExports(manifest, routes).default

packages/integrations/cloudflare/test/fixtures/vite-plugin/src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
-export const prerender = false
+export const prerender = false;
 import { getCollection, getEntry, render } from 'astro:content';
+import Hello from '../components/Hello.tsx';
 
 const workerRuntime = globalThis.navigator?.userAgent
 const blog = await getCollection('blog');
@@ -35,6 +36,10 @@ const { Content } = await render(increment);
 		))}
 	</ul>
 
+	<div id="framework">
+		<Hello client:load />
+	</div>
+
 
 </body>
 </html>