@ripple-ts/vite-plugin 0.3.64 → 0.3.66

package/src/routes.js

@@ -5,6 +5,56 @@
  * @typedef {import('@ripple-ts/vite-plugin').ServerRouteOptions} ServerRouteOptions
  */
 
+/**
+ * @typedef {string | readonly [string, string]} RenderRouteEntry
+ */
+
+/**
+ * @param {RenderRouteEntry | undefined} entry
+ * @returns {string | undefined}
+ */
+export function get_route_entry_path(entry) {
+	return typeof entry === 'string' ? entry : entry?.[1];
+}
+
+/**
+ * @param {RenderRouteEntry | undefined} entry
+ * @returns {string | undefined}
+ */
+export function get_route_entry_export_name(entry) {
+	return typeof entry === 'string' ? undefined : entry?.[0];
+}
+
+/**
+ * @param {RenderRouteEntry | undefined} entry
+ * @returns {string | undefined}
+ */
+export function get_route_entry_id(entry) {
+	const path = get_route_entry_path(entry);
+	const export_name = get_route_entry_export_name(entry);
+	return path && export_name ? `${path}#${export_name}` : path;
+}
+
+/**
+ * @param {Record<string, unknown>} module
+ * @param {string | undefined} export_name
+ * @returns {Function | null}
+ */
+export function get_component_export(module, export_name) {
+	if (export_name && typeof module[export_name] === 'function') {
+		return module[export_name];
+	}
+	if (typeof module.default === 'function') {
+		return module.default;
+	}
+	for (const [key, value] of Object.entries(module)) {
+		if (typeof value === 'function' && /^[A-Z]/.test(key)) {
+			return value;
+		}
+	}
+	return null;
+}
+
 /**
  * Route for rendering Ripple components with SSR
  */
@@ -15,7 +65,7 @@ export class RenderRoute {
 	/** @type {string} */
 	path;
 
-	/** @type {string} */
+	/** @type {RenderRouteEntry | undefined} */
 	entry;
 
 	/** @type {string | undefined} */
@@ -28,6 +78,10 @@ export class RenderRoute {
 	 * @param {RenderRouteOptions} options
 	 */
 	constructor(options) {
+		if (!options.entry) {
+			throw new Error('RenderRoute requires an `entry`.');
+		}
+
 		this.path = options.path;
 		this.entry = options.entry;
 		this.layout = options.layout;

package/src/server/production.js

@@ -12,6 +12,7 @@
 import { createRouter } from './router.js';
 import { createContext, runMiddlewareChain } from './middleware.js';
 import { createLayoutWrapper, createPropsWrapper } from './component-wrappers.js';
+import { get_route_entry_id, get_route_entry_path } from '../routes.js';
 import {
 	patch_global_fetch,
 	build_rpc_lookup,
@@ -135,7 +136,7 @@ export function createHandler(manifest, options) {
  * @param {import('@ripple-ts/vite-plugin').Context} context
  * @param {ServerManifest} manifest
  * @param {Middleware[]} globalMiddlewares
- * @param {(component: Function) => Promise<RenderResult>} render
+ * @param {(component: Function, options?: { rootBoundary?: import('@ripple-ts/vite-plugin').RootBoundaryOptions }) => Promise<RenderResult>} render
  * @param {(css: Set<string>) => string} getCss
  * @param {string} htmlTemplate
  * @param {Record<string, ClientAssetEntry>} clientAssets
@@ -153,9 +154,11 @@ async function handleRenderRoute(
 ) {
 	const renderHandler = async () => {
 		// Get the page component
-		const PageComponent = manifest.components[route.entry];
+		const entryId = get_route_entry_id(route.entry);
+		const entryPath = get_route_entry_path(route.entry);
+		const PageComponent = entryId ? manifest.components[entryId] : null;
 		if (!PageComponent) {
-			throw new Error(`Component not found: ${route.entry}`);
+			throw new Error(`Component not found for route ${route.path}`);
 		}
 
 		// Get layout if specified
@@ -170,7 +173,9 @@ async function handleRenderRoute(
 		}
 
 		// Render to HTML
-		const { head, body, css } = await render(RootComponent);
+		const { head, body, css } = await render(RootComponent, {
+			rootBoundary: manifest.rootBoundary,
+		});
 
 		// Generate inline scoped CSS (from SSR-rendered component hashes)
 		let cssContent = '';
@@ -186,7 +191,7 @@ async function handleRenderRoute(
 		// immediately, before the hydration script executes.
 		/** @type {string[]} */
 		const preloadTags = [];
-		const entryAssets = clientAssets[route.entry];
+		const entryAssets = entryPath ? clientAssets[entryPath] : undefined;
 
 		if (entryAssets?.css) {
 			for (const cssFile of entryAssets.css) {
@@ -205,7 +210,8 @@ async function handleRenderRoute(
 
 		// Build head content with hydration data
 		const routeData = JSON.stringify({
-			entry: route.entry,
+			entry: entryPath,
+			routeIndex: getRenderRouteIndex(manifest.routes, route),
 			params: context.params,
 		});
 		const headContent = [
@@ -231,6 +237,17 @@ async function handleRenderRoute(
 	return runMiddlewareChain(context, globalMiddlewares, route.before || [], renderHandler, []);
 }
 
+/**
+ * @param {Route[]} routes
+ * @param {RenderRoute} route
+ * @returns {number | undefined}
+ */
+function getRenderRouteIndex(routes, route) {
+	const renderRoutes = routes.filter((r) => r.type === 'render');
+	const index = renderRoutes.indexOf(route);
+	return index === -1 ? undefined : index;
+}
+
 // ============================================================================
 // Server routes
 // ============================================================================

package/src/server/render-route.js

@@ -2,10 +2,16 @@
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 import { createLayoutWrapper, createPropsWrapper } from './component-wrappers.js';
+import {
+	get_component_export,
+	get_route_entry_export_name,
+	get_route_entry_path,
+} from '../routes.js';
 
 /**
  * @typedef {import('@ripple-ts/vite-plugin').Context} Context
  * @typedef {import('@ripple-ts/vite-plugin').RenderRoute} RenderRoute
+ * @typedef {import('@ripple-ts/vite-plugin').ResolvedRippleConfig} ResolvedRippleConfig
  * @typedef {import('vite').ViteDevServer} ViteDevServer
  */
 
@@ -22,9 +28,10 @@ import { createLayoutWrapper, createPropsWrapper } from './component-wrappers.js
  * @param {RenderRoute} route
  * @param {Context} context
  * @param {ViteDevServer} vite
+ * @param {ResolvedRippleConfig} [rippleConfig]
  * @returns {Promise<Response>}
  */
-export async function handleRenderRoute(route, context, vite) {
+export async function handleRenderRoute(route, context, vite, rippleConfig) {
 	try {
 		// Initialize so the server can register
 		// RPC functions from `module server` declarations during SSR module loading
@@ -36,11 +43,15 @@ export async function handleRenderRoute(route, context, vite) {
 		const { render, get_css_for_hashes } = await vite.ssrLoadModule('ripple/server');
 
 		// Load the page component
-		const pageModule = await vite.ssrLoadModule(route.entry);
-		const PageComponent = getDefaultExport(pageModule);
+		const entryPath = get_route_entry_path(route.entry);
+		const pageModule = await vite.ssrLoadModule(/** @type {string} */ (entryPath));
+		const PageComponent = get_component_export(
+			pageModule,
+			get_route_entry_export_name(route.entry),
+		);
 
 		if (!PageComponent) {
-			throw new Error(`No default export found in ${route.entry}`);
+			throw new Error(`No component found for route ${route.path}`);
 		}
 
 		// Build the component tree (with optional layout)
@@ -50,7 +61,7 @@ export async function handleRenderRoute(route, context, vite) {
 		if (route.layout) {
 			// Load layout component
 			const layoutModule = await vite.ssrLoadModule(route.layout);
-			const LayoutComponent = getDefaultExport(layoutModule);
+			const LayoutComponent = get_component_export(layoutModule, undefined);
 
 			if (!LayoutComponent) {
 				throw new Error(`No default export found in ${route.layout}`);
@@ -66,7 +77,9 @@ export async function handleRenderRoute(route, context, vite) {
 
 		// Render to HTML
 		/** @type {RenderResult} */
-		const { head, body, css } = await render(RootComponent);
+		const { head, body, css } = await render(RootComponent, {
+			rootBoundary: rippleConfig?.rootBoundary,
+		});
 
 		// Generate CSS tags
 		let cssContent = '';
@@ -79,7 +92,8 @@ export async function handleRenderRoute(route, context, vite) {
 
 		// Build head content with hydration data
 		const routeData = JSON.stringify({
-			entry: route.entry,
+			entry: entryPath,
+			routeIndex: getRenderRouteIndex(rippleConfig, route),
 			params: context.params,
 		});
 		const headContent = [
@@ -124,23 +138,17 @@ export async function handleRenderRoute(route, context, vite) {
 }
 
 /**
- * Get the default export from a module
- * Handles both `export default` and `export { X as default }`
- *
- * @param {Record<string, unknown>} module
- * @returns {Function | null}
+ * @param {ResolvedRippleConfig | undefined} config
+ * @param {RenderRoute} route
+ * @returns {number | undefined}
  */
-function getDefaultExport(module) {
-	if (typeof module.default === 'function') {
-		return module.default;
-	}
-	// Look for a component-like export (capitalized function)
-	for (const [key, value] of Object.entries(module)) {
-		if (typeof value === 'function' && /^[A-Z]/.test(key)) {
-			return value;
-		}
+function getRenderRouteIndex(config, route) {
+	if (!config) {
+		return undefined;
 	}
-	return null;
+	var renderRoutes = config.router.routes.filter((r) => r.type === 'render');
+	var index = renderRoutes.indexOf(route);
+	return index === -1 ? undefined : index;
 }
 
 /**

package/src/server/virtual-entry.js

@@ -10,6 +10,12 @@
 
 /** @import { Route } from '@ripple-ts/vite-plugin' */
 
+import {
+	get_route_entry_export_name,
+	get_route_entry_id,
+	get_route_entry_path,
+} from '../routes.js';
+
 /**
  * @typedef {Object} ClientAssetEntry
  * @property {string} js - Path to the built JS file
@@ -63,10 +69,11 @@ export function generateServerEntry(options) {
 
 	for (const route of routes) {
 		if (route.type === 'render') {
-			if (!component_imports.has(route.entry)) {
-				component_imports.set(route.entry, `_page_${component_index++}`);
+			const entryPath = get_route_entry_path(route.entry);
+			if (entryPath && !component_imports.has(entryPath)) {
+				component_imports.set(entryPath, `_page_${component_index++}`);
 			}
-			if (route.layout && !layout_imports.has(route.layout)) {
+			if (typeof route.layout === 'string' && !layout_imports.has(route.layout)) {
 				layout_imports.set(route.layout, `_layout_${layout_index++}`);
 			}
 		}
@@ -95,12 +102,25 @@ export function generateServerEntry(options) {
 
 	// --- Dynamic map entries ---
 
-	const component_entries = [...component_imports]
-		.map(([entry, varName]) => `  ${JSON.stringify(entry)}: getDefaultExport(${varName}),`)
+	const component_entries = routes
+		.filter((route) => route.type === 'render')
+		.map((route) => {
+			const entryId = get_route_entry_id(route.entry);
+			const entryPath = get_route_entry_path(route.entry);
+			const exportName = get_route_entry_export_name(route.entry);
+			const varName = entryPath ? component_imports.get(entryPath) : undefined;
+
+			if (!entryId || !varName) {
+				return null;
+			}
+
+			return `  ${JSON.stringify(entryId)}: getComponentExport(${varName}, ${JSON.stringify(exportName)}),`;
+		})
+		.filter(Boolean)
 		.join('\n');
 
 	const layout_entries = [...layout_imports]
-		.map(([layout, varName]) => `  ${JSON.stringify(layout)}: getDefaultExport(${varName}),`)
+		.map(([layout, varName]) => `  ${JSON.stringify(layout)}: getComponentExport(${varName}),`)
 		.join('\n');
 
 	// Only check _$_server_$_ on modules known to have `module server` declarations.
@@ -142,7 +162,8 @@ try {
   process.exit(1);
 }
 
-function getDefaultExport(mod) {
+function getComponentExport(mod, exportName) {
+  if (exportName && typeof mod[exportName] === 'function') return mod[exportName];
   if (typeof mod.default === 'function') return mod.default;
   for (const [key, value] of Object.entries(mod)) {
     if (typeof value === 'function' && /^[A-Z]/.test(key)) return value;
@@ -178,6 +199,7 @@ const handler = createHandler(
     middlewares: rippleConfig.middlewares,
     rpcModules,
     trustProxy: rippleConfig.server.trustProxy,
+    rootBoundary: rippleConfig.rootBoundary,
     runtime: rippleConfig.adapter.runtime,
     clientAssets,
   },

package/tests/project-codegen.test.js

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest';
+import { create_client_entry_source } from '../src/project-codegen.js';
+import { generateServerEntry } from '../src/server/virtual-entry.js';
+
+describe('project codegen', () => {
+	it('generates a client entry that resolves route entries from ripple.config.ts', () => {
+		const source = create_client_entry_source({
+			configPath: '/project/ripple.config.ts',
+			staticEntries: ['/src/pages/index.tsrx'],
+		});
+
+		expect(source).toContain('import rippleConfig from "/project/ripple.config.ts";');
+		expect(source).toContain('"/src/pages/index.tsrx": () => import("/src/pages/index.tsrx")');
+		expect(source).not.toContain('route?.component');
+		expect(source).toContain('function getRouteEntryPath(entry)');
+		expect(source).toContain('return Array.isArray(entry) ? entry[1] : entry;');
+		expect(source).toContain('function getRouteEntryExportName(entry)');
+		expect(source).toContain('return Array.isArray(entry) ? entry[0] : undefined;');
+		expect(source).toContain('const rootBoundary = rippleConfig.rootBoundary;');
+		expect(source).toContain('rootBoundary,');
+	});
+
+	it('generates server components from named entry tuples', () => {
+		const source = generateServerEntry({
+			routes: [
+				{
+					type: 'render',
+					path: '/docs/guide/dom-refs',
+					entry: ['DomRefsPage', '/src/pages/docs/guide/dom-refs.tsrx'],
+					before: [],
+				},
+			],
+			rippleConfigPath: '/project/ripple.config.ts',
+			htmlTemplatePath: './index.html',
+		});
+
+		expect(source).toContain('import * as _page_0 from "/src/pages/docs/guide/dom-refs.tsrx";');
+		expect(source).toContain(
+			'"/src/pages/docs/guide/dom-refs.tsrx#DomRefsPage": getComponentExport(_page_0, "DomRefsPage"),',
+		);
+	});
+});

package/tests/render-route-props.test.js

@@ -5,6 +5,19 @@ import path from 'node:path';
 import { createHandler } from '../src/server/production.js';
 import { handleRenderRoute } from '../src/server/render-route.js';
 import { createLayoutWrapper, createPropsWrapper } from '../src/server/component-wrappers.js';
+import { RenderRoute } from '../src/routes.js';
+
+/**
+ * @param {string} html
+ * @returns {any}
+ */
+function parseRippleData(html) {
+	const match = html.match(/<script id="__ripple_data" type="application\/json">([^<]+)<\/script>/);
+	if (!match) {
+		throw new Error('Missing __ripple_data script');
+	}
+	return JSON.parse(match[1]);
+}
 
 function createRuntime() {
 	return {
@@ -29,6 +42,17 @@ function createHandlerOptions() {
 }
 
 describe('render route SSR props', () => {
+	it('allows render routes to prefer a named component export from an entry tuple', () => {
+		const route = new RenderRoute({
+			path: '/docs/guide/dom-refs',
+			entry: ['DomRefsPage', '/src/pages/docs/guide/dom-refs.tsrx'],
+		});
+
+		expect(route.entry).toEqual(['DomRefsPage', '/src/pages/docs/guide/dom-refs.tsrx']);
+		expect(route.before).toEqual([]);
+		expect(() => new RenderRoute({ path: '/missing' })).toThrow('RenderRoute requires an `entry`.');
+	});
+
 	it('passes injected props as the first SSR component argument', () => {
 		const Component = vi.fn();
 		const Wrapped = createPropsWrapper(Component, {
@@ -79,6 +103,97 @@ describe('render route SSR props', () => {
 		});
 	});
 
+	it('passes route params to production render route components from named entry tuples', async () => {
+		let pageProps;
+		function Page(props) {
+			pageProps = props;
+		}
+
+		const handler = createHandler(
+			{
+				routes: [
+					{
+						type: 'render',
+						path: '/tool/:slug',
+						entry: ['NamedToolPage', '/src/ToolPage.tsrx'],
+						before: [],
+					},
+				],
+				components: { '/src/ToolPage.tsrx#NamedToolPage': Page },
+				layouts: {},
+				middlewares: [],
+				runtime: createRuntime(),
+			},
+			createHandlerOptions(),
+		);
+
+		const response = await handler(new Request('https://example.test/tool/echo-api'));
+		const html = await response.text();
+
+		expect(response.status).toBe(200);
+		expect(pageProps).toEqual({
+			fromRender: true,
+			params: { slug: 'echo-api' },
+		});
+		expect(parseRippleData(html)).toEqual({
+			entry: '/src/ToolPage.tsrx',
+			routeIndex: 0,
+			params: { slug: 'echo-api' },
+		});
+	});
+
+	it('passes route params and root boundary to production render route components', async () => {
+		let pageProps;
+		let renderOptions;
+		function Page(props) {
+			pageProps = props;
+		}
+		const rootBoundary = {
+			pending() {},
+			catch() {},
+		};
+		const route = {
+			type: 'render',
+			path: '/tool/:slug',
+			entry: '/src/ToolPage.tsrx',
+			before: [],
+		};
+
+		const handler = createHandler(
+			{
+				routes: [route],
+				components: { '/src/ToolPage.tsrx': Page },
+				layouts: {},
+				middlewares: [],
+				runtime: createRuntime(),
+				rootBoundary,
+			},
+			{
+				...createHandlerOptions(),
+				render: async (Component, options) => {
+					renderOptions = options;
+					Component({ fromRender: true });
+					return { head: '', body: '<div>ok</div>', css: new Set() };
+				},
+			},
+		);
+
+		const response = await handler(new Request('https://example.test/tool/echo-api'));
+		const html = await response.text();
+
+		expect(response.status).toBe(200);
+		expect(pageProps).toEqual({
+			fromRender: true,
+			params: { slug: 'echo-api' },
+		});
+		expect(renderOptions).toEqual({ rootBoundary });
+		expect(parseRippleData(html)).toEqual({
+			entry: '/src/ToolPage.tsrx',
+			routeIndex: 0,
+			params: { slug: 'echo-api' },
+		});
+	});
+
 	it('passes route params to dev render route components', async () => {
 		const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'ripple-render-route-'));
 		fs.writeFileSync(
@@ -136,6 +251,147 @@ describe('render route SSR props', () => {
 		}
 	});
 
+	it('uses the named export from a dev render route entry tuple', async () => {
+		const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'ripple-render-route-'));
+		fs.writeFileSync(
+			path.join(tmpDir, 'index.html'),
+			'<html><head><!--ssr-head--></head><body><div id="root"><!--ssr-body--></div></body></html>',
+		);
+
+		let pageProps;
+		function Page(props) {
+			pageProps = props;
+		}
+		function WrongPage() {
+			throw new Error('default export should not be used');
+		}
+
+		const vite = {
+			config: { root: tmpDir },
+			transformIndexHtml: vi.fn(async (_pathname, html) => html),
+			ssrLoadModule: vi.fn(async (id) => {
+				if (id === 'ripple/server') {
+					const { render } = createHandlerOptions();
+					return {
+						render,
+						get_css_for_hashes: () => '',
+					};
+				}
+				if (id === '/src/ToolPage.tsrx') {
+					return { default: WrongPage, NamedToolPage: Page };
+				}
+				throw new Error(`Unexpected module: ${id}`);
+			}),
+		};
+
+		try {
+			const response = await handleRenderRoute(
+				{
+					type: 'render',
+					path: '/tool/:slug',
+					entry: ['NamedToolPage', '/src/ToolPage.tsrx'],
+					before: [],
+				},
+				{
+					request: new Request('https://example.test/tool/echo-api'),
+					params: { slug: 'echo-api' },
+					url: new URL('https://example.test/tool/echo-api'),
+					state: new Map(),
+				},
+				vite,
+			);
+
+			expect(response.status).toBe(200);
+			expect(pageProps).toEqual({
+				fromRender: true,
+				params: { slug: 'echo-api' },
+			});
+			expect(vite.ssrLoadModule).toHaveBeenCalledWith('/src/ToolPage.tsrx');
+		} finally {
+			fs.rmSync(tmpDir, { recursive: true, force: true });
+		}
+	});
+
+	it('passes route params and root boundary to dev render route components', async () => {
+		const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'ripple-render-route-'));
+		fs.writeFileSync(
+			path.join(tmpDir, 'index.html'),
+			'<html><head><!--ssr-head--></head><body><div id="root"><!--ssr-body--></div></body></html>',
+		);
+
+		let pageProps;
+		let renderOptions;
+		function Page(props) {
+			pageProps = props;
+		}
+		const rootBoundary = {
+			pending() {},
+			catch() {},
+		};
+		const route = {
+			type: 'render',
+			path: '/tool/:slug',
+			entry: '/src/ToolPage.tsrx',
+			before: [],
+		};
+
+		const vite = {
+			config: { root: tmpDir },
+			transformIndexHtml: vi.fn(async (_pathname, html) => html),
+			ssrLoadModule: vi.fn(async (id) => {
+				if (id === 'ripple/server') {
+					return {
+						render: async (Component, options) => {
+							renderOptions = options;
+							Component({ fromRender: true });
+							return { head: '', body: '<div>ok</div>', css: new Set() };
+						},
+						get_css_for_hashes: () => '',
+					};
+				}
+				if (id === '/src/ToolPage.tsrx') {
+					return { default: Page };
+				}
+				throw new Error(`Unexpected module: ${id}`);
+			}),
+		};
+
+		try {
+			const response = await handleRenderRoute(
+				route,
+				{
+					request: new Request('https://example.test/tool/echo-api'),
+					params: { slug: 'echo-api' },
+					url: new URL('https://example.test/tool/echo-api'),
+					state: new Map(),
+				},
+				vite,
+				{
+					router: { routes: [route] },
+					rootBoundary,
+				},
+			);
+			const html = await response.text();
+
+			expect(response.status).toBe(200);
+			expect(pageProps).toEqual({
+				fromRender: true,
+				params: { slug: 'echo-api' },
+			});
+			expect(renderOptions).toEqual({ rootBoundary });
+			expect(parseRippleData(html)).toEqual({
+				entry: '/src/ToolPage.tsrx',
+				routeIndex: 0,
+				params: { slug: 'echo-api' },
+			});
+			expect(vite.ssrLoadModule).toHaveBeenCalledTimes(2);
+			expect(vite.ssrLoadModule).toHaveBeenCalledWith('ripple/server');
+			expect(vite.ssrLoadModule).toHaveBeenCalledWith('/src/ToolPage.tsrx');
+		} finally {
+			fs.rmSync(tmpDir, { recursive: true, force: true });
+		}
+	});
+
 	it('wraps layout children as a server TSRX element and passes page params through', () => {
 		const Page = vi.fn();
 		const Layout = vi.fn(({ children }) => {