feat: added dumb implementation of tanstack server components because why not

Author: roerohan

packages/web/src/lib/jsx-deserializer.ts

@@ -0,0 +1,37 @@
+import React, { ReactNode } from 'react';
+
+/**
+ * Serializable representation of a React element (matches worker definition)
+ */
+export interface SerializableElement {
+	type: string;
+	props: Record<string, any>;
+	children?: SerializableNode[];
+}
+
+export type SerializableNode = SerializableElement | string | number | boolean | null | undefined;
+
+/**
+ * Converts a serializable element back to a React element
+ */
+export function deserializeJSX(node: SerializableNode): ReactNode {
+	// Handle primitives
+	if (node === null || node === undefined || typeof node === 'string' || typeof node === 'number' || typeof node === 'boolean') {
+		return node;
+	}
+
+	// Handle arrays
+	if (Array.isArray(node)) {
+		return node.map((child, index) => React.createElement(React.Fragment, { key: index }, deserializeJSX(child)));
+	}
+
+	// Handle serialized elements
+	if (typeof node === 'object' && 'type' in node) {
+		const element = node as SerializableElement;
+		const children = element.children ? element.children.map((child) => deserializeJSX(child)) : [];
+
+		return React.createElement(element.type as string, element.props, ...children);
+	}
+
+	return null;
+}

packages/web/src/routeTree.gen.ts

@@ -14,6 +14,7 @@ import { Route as RpcIndexRouteImport } from './routes/rpc/index'
 import { Route as RpcSayHelloRouteImport } from './routes/rpc/say-hello'
 import { Route as RpcProcessBatchRouteImport } from './routes/rpc/process-batch'
 import { Route as RpcGetDataRouteImport } from './routes/rpc/get-data'
+import { Route as RpcGetComponentRouteImport } from './routes/rpc/get-component'
 import { Route as RpcCalculateRouteImport } from './routes/rpc/calculate'
 import { Route as DemoStartServerFuncsRouteImport } from './routes/demo/start.server-funcs'
 import { Route as DemoStartApiRequestRouteImport } from './routes/demo/start.api-request'
@@ -48,6 +49,11 @@ const RpcGetDataRoute = RpcGetDataRouteImport.update({
   path: '/rpc/get-data',
   getParentRoute: () => rootRouteImport,
 } as any)
+const RpcGetComponentRoute = RpcGetComponentRouteImport.update({
+  id: '/rpc/get-component',
+  path: '/rpc/get-component',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const RpcCalculateRoute = RpcCalculateRouteImport.update({
   id: '/rpc/calculate',
   path: '/rpc/calculate',
@@ -92,6 +98,7 @@ const DemoStartSsrDataOnlyRoute = DemoStartSsrDataOnlyRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/rpc/calculate': typeof RpcCalculateRoute
+  '/rpc/get-component': typeof RpcGetComponentRoute
   '/rpc/get-data': typeof RpcGetDataRoute
   '/rpc/process-batch': typeof RpcProcessBatchRoute
   '/rpc/say-hello': typeof RpcSayHelloRoute
@@ -107,6 +114,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/rpc/calculate': typeof RpcCalculateRoute
+  '/rpc/get-component': typeof RpcGetComponentRoute
   '/rpc/get-data': typeof RpcGetDataRoute
   '/rpc/process-batch': typeof RpcProcessBatchRoute
   '/rpc/say-hello': typeof RpcSayHelloRoute
@@ -123,6 +131,7 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/rpc/calculate': typeof RpcCalculateRoute
+  '/rpc/get-component': typeof RpcGetComponentRoute
   '/rpc/get-data': typeof RpcGetDataRoute
   '/rpc/process-batch': typeof RpcProcessBatchRoute
   '/rpc/say-hello': typeof RpcSayHelloRoute
@@ -140,6 +149,7 @@ export interface FileRouteTypes {
   fullPaths:
     | '/'
     | '/rpc/calculate'
+    | '/rpc/get-component'
     | '/rpc/get-data'
     | '/rpc/process-batch'
     | '/rpc/say-hello'
@@ -155,6 +165,7 @@ export interface FileRouteTypes {
   to:
     | '/'
     | '/rpc/calculate'
+    | '/rpc/get-component'
     | '/rpc/get-data'
     | '/rpc/process-batch'
     | '/rpc/say-hello'
@@ -170,6 +181,7 @@ export interface FileRouteTypes {
     | '__root__'
     | '/'
     | '/rpc/calculate'
+    | '/rpc/get-component'
     | '/rpc/get-data'
     | '/rpc/process-batch'
     | '/rpc/say-hello'
@@ -186,6 +198,7 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   RpcCalculateRoute: typeof RpcCalculateRoute
+  RpcGetComponentRoute: typeof RpcGetComponentRoute
   RpcGetDataRoute: typeof RpcGetDataRoute
   RpcProcessBatchRoute: typeof RpcProcessBatchRoute
   RpcSayHelloRoute: typeof RpcSayHelloRoute
@@ -236,6 +249,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof RpcGetDataRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/rpc/get-component': {
+      id: '/rpc/get-component'
+      path: '/rpc/get-component'
+      fullPath: '/rpc/get-component'
+      preLoaderRoute: typeof RpcGetComponentRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/rpc/calculate': {
       id: '/rpc/calculate'
       path: '/rpc/calculate'
@@ -298,6 +318,7 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   RpcCalculateRoute: RpcCalculateRoute,
+  RpcGetComponentRoute: RpcGetComponentRoute,
   RpcGetDataRoute: RpcGetDataRoute,
   RpcProcessBatchRoute: RpcProcessBatchRoute,
   RpcSayHelloRoute: RpcSayHelloRoute,

packages/web/src/routes/rpc/get-component.tsx

@@ -0,0 +1,77 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { createServerFn } from '@tanstack/react-start';
+import { getWorkerRpc } from '@/lib/rpc';
+import { deserializeJSX, type SerializableNode } from '@/lib/jsx-deserializer';
+
+export const getComponent = createServerFn({ method: 'GET' }).handler(async () => {
+  const workerRpc = getWorkerRpc();
+
+  // Get the serialized JSX payload from the worker
+  const serializedPayload = await workerRpc.getComponent();
+
+  // Return it to the client
+  return serializedPayload;
+});
+
+export const Route = createFileRoute('/rpc/get-component')({
+  loader: async () => getComponent(),
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const serializedPayload = Route.useLoaderData() as SerializableNode;
+
+  // Deserialize the JSX - reconstructs the React element from the serialized format
+  const component = deserializeJSX(serializedPayload);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-8">
+          <h1 className="text-4xl font-bold text-white mb-4">Get Component RPC Method</h1>
+          <p className="text-gray-400 mb-6">Returns JSX from the Worker with server-side fetched data (like React Server Components)</p>
+
+          <div className="bg-slate-900/50 rounded-lg p-6 mb-6">
+            <h2 className="text-xl font-semibold text-cyan-400 mb-3">Rendered Component</h2>
+            <div className="text-gray-300">
+              {component}
+            </div>
+          </div>
+
+          <div className="bg-slate-900/50 rounded-lg p-6 mb-6">
+            <h2 className="text-xl font-semibold text-cyan-400 mb-3">How It Works</h2>
+            <div className="space-y-3 text-gray-300">
+              <p>
+                ✨ The component above was returned as <strong className="text-white">pure JSX</strong> from the Cloudflare Worker with <strong className="text-white">server-side data</strong>!
+              </p>
+              <p>
+                The worker fetches data from external APIs (ipify.org) <strong className="text-white">server-side</strong> and reads environment variables — the browser never makes these requests! This demonstrates true worker-only functionality that cannot happen in the client.
+              </p>
+              <div className="mt-4 space-y-2">
+                <p className="font-semibold text-white">Worker-Only Features Demonstrated:</p>
+                <ul className="list-disc list-inside space-y-1 pl-4">
+                  <li>Server-side fetch() calls without CORS restrictions</li>
+                  <li>Access to environment variables (worker context only)</li>
+                  <li>Worker execution context and metadata</li>
+                  <li>JSX serialization & deserialization</li>
+                </ul>
+              </div>
+              <div className="mt-4 p-3 bg-orange-500/10 border border-orange-500/30 rounded">
+                <p className="text-sm text-orange-200">
+                  <strong>🔥 Pro Tip:</strong> Open your browser's Network tab and refresh. You won't see any requests to ipify.org — it happens entirely in the worker!
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <a
+            href="/rpc"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-slate-700 hover:bg-slate-600 text-white font-semibold rounded-lg transition-colors"
+          >
+            ← Back to RPC Methods
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/web/src/routes/rpc/index.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, Link } from '@tanstack/react-router';
-import { Network, Calculator, Database, Package2, ArrowRight } from 'lucide-react';
+import { Network, Calculator, Database, Package2, ArrowRight, Component } from 'lucide-react';
 
 export const Route = createFileRoute('/rpc/')({
 	component: RouteComponent,
@@ -39,6 +39,14 @@ function RouteComponent() {
 			signature: 'processBatch(items: string[]): Promise<{ processed: number; items: string[] }>',
 			example: '/rpc/process-batch',
 		},
+		{
+			name: 'getComponent',
+			path: '/rpc/get-component',
+			icon: <Component className="w-8 h-8 text-orange-400" />,
+			description: 'Returns JSX with server-side fetched data (external APIs, env vars) - browser never sees these requests!',
+			signature: 'getComponent(): Promise<SerializableNode>',
+			example: '/rpc/get-component',
+		},
 	];
 
 	return (
@@ -55,7 +63,7 @@ function RouteComponent() {
 					</p>
 					<p className="text-gray-500">
 						All methods are defined in{' '}
-						<code className="px-2 py-1 bg-slate-700 rounded text-orange-400">packages/worker/src/rpc.ts</code>
+						<code className="px-2 py-1 bg-slate-700 rounded text-orange-400">packages/worker/src/rpc.tsx</code>
 					</p>
 				</div>
 
@@ -92,7 +100,7 @@ function RouteComponent() {
 					<ol className="list-decimal list-inside space-y-2 text-gray-400">
 						<li>
 							Add your method to the <code className="text-orange-400">WorkerRpc</code> class in{' '}
-							<code className="text-orange-400">packages/worker/src/rpc.ts</code>
+							<code className="text-orange-400">packages/worker/src/rpc.tsx</code>
 						</li>
 						<li>
 							TypeScript will automatically provide types in the web package via{' '}

packages/worker/package.json

@@ -9,11 +9,13 @@
 		"@cloudflare/vitest-pool-workers": "^0.10.3",
 		"@cloudflare/workers-types": "^4.20250922.0",
 		"@types/node": "^18.0.0",
+		"@types/react": "^19.2.2",
 		"vitest": "~3.0.9",
 		"wrangler": "^4.45.3"
 	},
 	"dependencies": {
-		"hono": "^4.10.4"
+		"hono": "^4.10.4",
+		"react": "^19.2.0"
 	},
 	"scripts": {
 		"dev": "wrangler dev",

packages/worker/src/jsx-serializer.ts

@@ -0,0 +1,78 @@
+import type { ReactElement, ReactNode } from 'react';
+
+/**
+ * Serializable representation of a React element
+ */
+export interface SerializableElement {
+	type: string;
+	props: Record<string, any>;
+	children?: SerializableNode[];
+}
+
+export type SerializableNode = SerializableElement | string | number | boolean | null | undefined;
+
+/**
+ * Converts a React element to a serializable format
+ */
+export function serializeJSX(node: ReactNode): SerializableNode {
+	// Handle primitives
+	if (
+		node === null ||
+		node === undefined ||
+		typeof node === 'string' ||
+		typeof node === 'number' ||
+		typeof node === 'boolean'
+	) {
+		return node;
+	}
+
+	// Handle arrays - flatten them (React handles this the same way)
+	if (Array.isArray(node)) {
+		// For arrays, we serialize each child and return the first element if single, or null
+		// In practice, React fragments are rendered as arrays, so we handle the children individually
+		const serialized = node.map(serializeJSX).filter((child): child is NonNullable<SerializableNode> =>
+			child !== null && child !== undefined
+		);
+		// If there's only one element, return it directly
+		if (serialized.length === 1) {
+			return serialized[0];
+		}
+		// For multiple children, wrap in a fragment-like div
+		if (serialized.length > 1) {
+			return {
+				type: 'div',
+				props: {},
+				children: serialized,
+			};
+		}
+		return null;
+	}
+
+	// Handle React elements
+	if (typeof node === 'object' && 'type' in node && 'props' in node) {
+		const element = node as ReactElement;
+		const { children, ...restProps } = element.props as { children?: ReactNode; [key: string]: any };
+
+		const serialized: SerializableElement = {
+			type: typeof element.type === 'string' ? element.type : 'div', // Only support HTML elements for now
+			props: restProps || {},
+		};
+
+		// Serialize children
+		if (children !== undefined && children !== null) {
+			const childArray = Array.isArray(children) ? children : [children];
+			const serializedChildren = childArray
+				.map(serializeJSX)
+				.filter((child): child is NonNullable<SerializableNode> => child !== null && child !== undefined);
+
+			if (serializedChildren.length > 0) {
+				serialized.children = serializedChildren;
+			}
+		}
+
+		return serialized;
+	}
+
+	// Fallback
+	return null;
+}