@ripple-ts/vite-plugin 0.3.35 → 0.3.37

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @ripple-ts/vite-plugin
 
+## 0.3.37
+
+### Patch Changes
+
+- Updated dependencies
+  [[`c631ab0`](https://github.com/Ripple-TS/ripple/commit/c631ab0076b7e2cb30f4998101b54c3a86e78c61)]:
+  - @tsrx/ripple@0.0.19
+  - @ripple-ts/adapter@0.3.37
+
+## 0.3.36
+
+### Patch Changes
+
+- [#999](https://github.com/Ripple-TS/ripple/pull/999)
+  [`aa6628b`](https://github.com/Ripple-TS/ripple/commit/aa6628b3318f1bdad6a6e12286d3002f8d591e2e)
+  Thanks [@trueadm](https://github.com/trueadm)! - Pass RenderRoute params to
+  SSR-compiled page components.
+
+- Updated dependencies []:
+  - @tsrx/ripple@0.0.18
+  - @ripple-ts/adapter@0.3.36
+
 ## 0.3.35
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Vite plugin for Ripple",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.35",
+  "version": "0.3.37",
   "type": "module",
   "module": "src/index.js",
   "main": "src/index.js",
@@ -32,14 +32,14 @@
     "url": "https://github.com/Ripple-TS/ripple/issues"
   },
   "dependencies": {
-    "@ripple-ts/adapter": "0.3.35",
-    "@tsrx/ripple": "0.0.17"
+    "@tsrx/ripple": "0.0.19",
+    "@ripple-ts/adapter": "0.3.37"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
     "type-fest": "^5.6.0",
     "vite": "^8.0.0",
-    "ripple": "0.3.35"
+    "ripple": "0.3.37"
   },
   "publishConfig": {
     "access": "public"

package/src/server/component-wrappers.js

@@ -0,0 +1,51 @@
+const TSRX_ELEMENT = Symbol.for('ripple.element');
+
+/**
+ * Create a server TSRX element for layout children.
+ *
+ * @param {Function} render
+ * @returns {{ render: Function, [TSRX_ELEMENT]: true }}
+ */
+function createServerTsrxElement(render) {
+	return {
+		render,
+		[TSRX_ELEMENT]: true,
+	};
+}
+
+/**
+ * Create a wrapper component that injects props into an SSR component.
+ *
+ * @param {Function} Component
+ * @param {Record<string, unknown>} props
+ * @returns {Function}
+ */
+export function createPropsWrapper(Component, props) {
+	/**
+	 * @param {Record<string, unknown>} additionalProps
+	 */
+	return function WrappedComponent(additionalProps = {}) {
+		return Component({ ...additionalProps, ...props });
+	};
+}
+
+/**
+ * Create a wrapper that composes a layout with a page component.
+ *
+ * @param {Function} Layout
+ * @param {Function} Page
+ * @param {Record<string, unknown>} pageProps
+ * @returns {Function}
+ */
+export function createLayoutWrapper(Layout, Page, pageProps) {
+	/**
+	 * @param {Record<string, unknown>} additionalProps
+	 */
+	return function LayoutWrapper(additionalProps = {}) {
+		const children = createServerTsrxElement((childProps = {}) => {
+			return Page({ ...additionalProps, ...childProps, ...pageProps });
+		});
+
+		return Layout({ ...additionalProps, children });
+	};
+}

package/src/server/production.js

@@ -11,6 +11,7 @@
 
 import { createRouter } from './router.js';
 import { createContext, runMiddlewareChain } from './middleware.js';
+import { createLayoutWrapper, createPropsWrapper } from './component-wrappers.js';
 import {
 	patch_global_fetch,
 	build_rpc_lookup,
@@ -253,38 +254,6 @@ async function handleServerRoute(route, context, globalMiddlewares) {
 	);
 }
 
-// ============================================================================
-// Component wrappers
-// ============================================================================
-
-/**
- * Create a wrapper component that injects props
- * @param {Function} Component
- * @param {Record<string, unknown>} props
- * @returns {Function}
- */
-function createPropsWrapper(Component, props) {
-	return function WrappedComponent(/** @type {unknown} */ output, additionalProps = {}) {
-		return Component(output, { ...additionalProps, ...props });
-	};
-}
-
-/**
- * Create a wrapper that composes a layout with a page component
- * @param {Function} Layout
- * @param {Function} Page
- * @param {Record<string, unknown>} pageProps
- * @returns {Function}
- */
-function createLayoutWrapper(Layout, Page, pageProps) {
-	return function LayoutWrapper(/** @type {unknown} */ output, additionalProps = {}) {
-		const children = (/** @type {unknown} */ childOutput) => {
-			return Page(childOutput, { ...additionalProps, ...pageProps });
-		};
-		return Layout(output, { ...additionalProps, children });
-	};
-}
-
 // ============================================================================
 // Utilities
 // ============================================================================

package/src/server/render-route.js

@@ -1,6 +1,7 @@
 /// <reference types="@tsrx/ripple/types/rpc" />
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
+import { createLayoutWrapper, createPropsWrapper } from './component-wrappers.js';
 
 /**
  * @typedef {import('@ripple-ts/vite-plugin').Context} Context
@@ -142,47 +143,6 @@ function getDefaultExport(module) {
 	return null;
 }
 
-/**
- * Create a wrapper component that injects props
- *
- * @param {Function} Component
- * @param {Record<string, unknown>} props
- * @returns {Function}
- */
-function createPropsWrapper(Component, props) {
-	/**
-	 * @param {unknown} output
-	 * @param {Record<string, unknown>} additionalProps
-	 */
-	return function WrappedComponent(output, additionalProps = {}) {
-		return Component(output, { ...additionalProps, ...props });
-	};
-}
-
-/**
- * Create a wrapper that composes a layout with a page component
- * The layout receives the page as its children prop
- *
- * @param {Function} Layout
- * @param {Function} Page
- * @param {Record<string, unknown>} pageProps
- * @returns {Function}
- */
-function createLayoutWrapper(Layout, Page, pageProps) {
-	/**
-	 * @param {unknown} output
-	 * @param {Record<string, unknown>} additionalProps
-	 */
-	return function LayoutWrapper(output, additionalProps = {}) {
-		// Children is a component function that renders the page
-		const children = (/** @type {unknown} */ childOutput) => {
-			return Page(childOutput, { ...additionalProps, ...pageProps });
-		};
-
-		return Layout(output, { ...additionalProps, children });
-	};
-}
-
 /**
  * Escape script content to prevent XSS
  * @param {string} str

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

@@ -0,0 +1,163 @@
+import { describe, it, expect, vi } from 'vitest';
+import fs from 'node:fs';
+import os from 'node:os';
+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';
+
+function createRuntime() {
+	return {
+		hash: () => '00000000',
+		createAsyncContext: () => ({
+			run: (_store, fn) => fn(),
+			getStore: () => undefined,
+		}),
+	};
+}
+
+function createHandlerOptions() {
+	return {
+		render: async (Component) => {
+			Component({ fromRender: true });
+			return { head: '', body: '<div>ok</div>', css: new Set() };
+		},
+		getCss: () => '',
+		htmlTemplate: '<html><head><!--ssr-head--></head><body><!--ssr-body--></body></html>',
+		executeServerFunction: async () => '',
+	};
+}
+
+describe('render route SSR props', () => {
+	it('passes injected props as the first SSR component argument', () => {
+		const Component = vi.fn();
+		const Wrapped = createPropsWrapper(Component, {
+			params: { slug: 'echo-api' },
+		});
+
+		Wrapped({ fromRender: true, params: { slug: 'ignored' } });
+
+		expect(Component.mock.calls).toEqual([
+			[
+				{
+					fromRender: true,
+					params: { slug: 'echo-api' },
+				},
+			],
+		]);
+	});
+
+	it('passes route params to production render route components', async () => {
+		let pageProps;
+		function Page(props) {
+			pageProps = props;
+		}
+
+		const handler = createHandler(
+			{
+				routes: [
+					{
+						type: 'render',
+						path: '/tool/:slug',
+						entry: '/src/ToolPage.tsrx',
+						before: [],
+					},
+				],
+				components: { '/src/ToolPage.tsrx': Page },
+				layouts: {},
+				middlewares: [],
+				runtime: createRuntime(),
+			},
+			createHandlerOptions(),
+		);
+
+		await handler(new Request('https://example.test/tool/echo-api'));
+
+		expect(pageProps).toEqual({
+			fromRender: true,
+			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(
+			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;
+		}
+
+		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: Page };
+				}
+				throw new Error(`Unexpected module: ${id}`);
+			}),
+		};
+
+		try {
+			const response = await handleRenderRoute(
+				{
+					type: 'render',
+					path: '/tool/:slug',
+					entry: '/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' },
+			});
+		} 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 }) => {
+			children.render({ fromChild: true });
+		});
+		const Wrapped = createLayoutWrapper(Layout, Page, {
+			params: { slug: 'echo-api' },
+		});
+
+		Wrapped({ fromRender: true });
+
+		const layoutProps = Layout.mock.calls[0][0];
+		expect(layoutProps.fromRender).toBe(true);
+		expect(layoutProps.children[Symbol.for('ripple.element')]).toBe(true);
+		expect(Page.mock.calls).toEqual([
+			[
+				{
+					fromRender: true,
+					fromChild: true,
+					params: { slug: 'echo-api' },
+				},
+			],
+		]);
+	});
+});