docs(changeset): make server functions worker work

nksaraf · Nov 17, 2023 · 4e4c047 · 4e4c047
1 parent 433c614
commit 4e4c047
Show file tree

Hide file tree

Showing 24 changed files with 212 additions and 222 deletions.
diff --git a/.changeset/friendly-monkeys-train.md b/.changeset/friendly-monkeys-train.md
@@ -0,0 +1,9 @@
+---
+"@vinxi/server-functions": patch
+"@vinxi/react-server": patch
+"@vinxi/plugin-directives": patch
+"@vinxi/doc": patch
+"vinxi": patch
+---
+
+make server functions worker work
diff --git a/examples/react/rsc/fw/app/Counter.tsx b/examples/react/rsc/fw/app/Counter.tsx
@@ -1,17 +1,11 @@
 "use client";
 
-import { fetchServerAction } from "@vinxi/react-server/client";
 import { useState } from "react";
 
-import { sayHello } from "./actions";
+import { getStore } from "./actions";
 
-document.addEventListener("click", async (e) => {
-	console.log(sayHello, "hello");
+console.log(await getStore());
 
-	const result = await fetchServerAction("/_server", sayHello["$$id"], []);
-	console.log(result);
-	// sayHello();
-});
 export function Counter({ onChange }) {
 	const [count, setCount] = useState(0);
 	return (

diff --git a/examples/react/rsc/fw/app/actions.tsx b/examples/react/rsc/fw/app/actions.tsx
@@ -2,7 +2,6 @@
 
 let store = { count: 0 };
 export function sayHello() {
-	console.log("Hello World");
 	store.count++;
 	return store.count;
 }

diff --git a/examples/react/rsc/fw/app/app.tsx b/examples/react/rsc/fw/app/app.tsx
@@ -6,6 +6,7 @@ export default function App({ assets }) {
 	return (
 		<html lang="en">
 			<head>
+				<title>Document 1</title>
 				<link rel="icon" href="/favicon.ico" />
 				{assets}
 			</head>

diff --git a/examples/react/rsc/fw/index.html b/examples/react/rsc/fw/index.html
diff --git a/packages/vinxi-directives/transform.js b/packages/vinxi-directives/transform.js
@@ -667,13 +667,14 @@ export function splitPlugin({ runtime, hash, pragma, apply, onModuleFound }) {
 							needsReference = true;
 							if (splits === options.split) {
 								pickedFn = types.builders.exportDefaultDeclaration(
-									types.builders.functionDeclaration(
-										name ? types.builders.identifier(name) : null,
-										path.node.declaration.params,
-										types.builders.blockStatement(
+									types.builders.functionDeclaration.from({
+										async: true,
+										id: name ? types.builders.identifier(name) : null,
+										params: path.node.declaration.params,
+										body: types.builders.blockStatement(
 											path.node.declaration.body.body.slice(1),
 										),
-									),
+									}),
 								);
 							}
 							splits++;
@@ -693,11 +694,14 @@ export function splitPlugin({ runtime, hash, pragma, apply, onModuleFound }) {
 						needsReference = true;
 						if (splits === options.split) {
 							pickedFn = types.builders.exportDefaultDeclaration(
-								types.builders.functionDeclaration(
-									name,
-									path.node.params,
-									types.builders.blockStatement(path.node.body.body.slice(1)),
-								),
+								types.builders.functionDeclaration.from({
+									async: true,
+									id: name,
+									params: path.node.params,
+									body: types.builders.blockStatement(
+										path.node.body.body.slice(1),
+									),
+								}),
 							);
 						}
 						splits++;

diff --git a/examples/react/rsc/fw/app/client.tsx → packages/vinxi-react-server/app/client.tsx b/examples/react/rsc/fw/app/client.tsx → packages/vinxi-react-server/app/client.tsx
@@ -1,5 +1,6 @@
 /// <reference types="vinxi/types/client" />
-import { ServerComponent } from "@vinxi/react-server/client";
 import { createRoot } from "react-dom/client";
 
+import { ServerComponent } from "../client";
+
 createRoot(document).render(<ServerComponent url={window.location.pathname} />);
diff --git a/packages/vinxi-react-server/client-runtime.js b/packages/vinxi-react-server/client-runtime.js
@@ -0,0 +1,13 @@
+import { createServerReference as cServerReference } from "@vinxi/react-server-dom/runtime";
+
+import { fetchServerAction } from "./fetch-server-action";
+
+export function createServerReference(fn, moduleId, name) {
+	return cServerReference(
+		async (...args) => {
+			return await fetchServerAction("/_server/", moduleId + "#" + name, args);
+		},
+		moduleId,
+		name,
+	);
+}
diff --git a/packages/vinxi-react-server/client.js b/packages/vinxi-react-server/client.js
@@ -7,9 +7,8 @@ export { fetchServerAction } from "./fetch-server-action";
 
 globalThis.__vite__ = createModuleLoader({
 	loadModule: async (id) => {
-		return import(
-			/* @vite-ignore */ import.meta.env.MANIFEST["client"].chunks[id].output
-				.path
-		);
+		return import.meta.env.MANIFEST[import.meta.env.ROUTER_NAME].chunks[
+			id
+		].import();
 	},
 });
diff --git a/packages/vinxi-react-server/html.ts b/packages/vinxi-react-server/html.ts
@@ -0,0 +1,22 @@
+import { fileURLToPath } from "url";
+import { eventHandler } from "vinxi/server";
+
+const path = fileURLToPath(new URL("./app/client.tsx", import.meta.url));
+
+export default eventHandler((event) => {
+	return `<!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Document</title>
+      <link rel="icon" href="/favicon.ico" />
+    </head>
+    <body>
+      <div id="root"></div>
+      <script src="/@fs${path}" type="module">
+      </script>
+    </body>
+  </html>
+  `;
+});
diff --git a/packages/vinxi-react-server/index.js b/packages/vinxi-react-server/index.js
@@ -1,20 +1,23 @@
-import { references } from "@vinxi/plugin-references";
+import { serverComponents } from "@vinxi/server-components/plugin";
+import { serverFunctions } from "@vinxi/server-functions/plugin";
 import reactRefresh from "@vitejs/plugin-react";
 import { fileURLToPath } from "url";
 import { createApp } from "vinxi";
 import { join } from "vinxi/lib/path";
 import { config } from "vinxi/plugins/config";
 
-export function defineConfig() {
-	return createApp({
-		server: {
-			plugins: [references.serverPlugin],
-			virtual: {
-				[references.serverPlugin]: references.serverPluginModule({
-					routers: ["server", "rsc"],
-				}),
+function appEntry() {
+	return config("alias", {
+		resolve: {
+			alias: {
+				"#vinxi/app": join(process.cwd(), "app", "app.tsx"),
 			},
 		},
+	});
+}
+
+export function defineConfig() {
+	return createApp({
 		routers: [
 			{
 				name: "public",
@@ -27,66 +30,65 @@ export function defineConfig() {
 				mode: "handler",
 				base: "/_rsc",
 				handler: fileURLToPath(new URL("./react-server.js", import.meta.url)),
-
-				build: {
-					target: "server",
-					plugins: () => [
-						config("alias", {
-							resolve: {
-								alias: {
-									"#vinxi/app": join(process.cwd(), "app", "app.tsx"),
-								},
-							},
-						}),
-						references.serverComponents({
-							runtime: `@vinxi/react-server-dom/runtime`,
-						}),
-						reactRefresh(),
-					],
-				},
+				target: "server",
+				plugins: () => [
+					appEntry(),
+					serverComponents.server({
+						runtime: `@vinxi/react-server-dom/runtime`,
+					}),
+					reactRefresh(),
+				],
 			},
+
 			{
 				name: "client",
 				mode: "spa",
-				handler: "./index.html",
-				build: {
-					target: "browser",
-					plugins: () => [
-						references.clientRouterPlugin({
-							runtime: `@vinxi/react-server-dom/runtime`,
-						}),
-						reactRefresh(),
-						references.clientComponents({
-							runtime: `@vinxi/react-server-dom/runtime`,
-						}),
-					],
-				},
+				handler: fileURLToPath(new URL("./html.ts", import.meta.url)),
+				plugins: () => [
+					config("other", {
+						resolve: {
+							alias: {
+								"#vinxi/app/client": fileURLToPath(
+									new URL("./app/client.ts", import.meta.url),
+								),
+							},
+						},
+						server: {
+							fs: {
+								allow: [fileURLToPath(new URL(".", import.meta.url))],
+							},
+						},
+					}),
+					serverFunctions.client({
+						runtime: fileURLToPath(
+							new URL("./client-runtime.js", import.meta.url),
+						),
+					}),
+					reactRefresh(),
+					serverComponents.client({
+						runtime: fileURLToPath(
+							new URL("./client-runtime.js", import.meta.url),
+						),
+					}),
+				],
 				base: "/",
 			},
 			{
-				name: "server",
+				name: "server-fns",
 				worker: true,
 				mode: "handler",
 				base: "/_server",
 				handler: fileURLToPath(new URL("./server-action.js", import.meta.url)),
-				build: {
-					target: "server",
-					plugins: () => [
-						config("alias", {
-							resolve: {
-								alias: {
-									"#vinxi/app": join(process.cwd(), "app", "app.tsx"),
-								},
-							},
-						}),
-						references.serverRouterPlugin({
-							resolve: {
-								conditions: ["react-server"],
-							},
-							runtime: `@vinxi/react-server-dom/runtime`,
-						}),
-					],
-				},
+				plugins: () => [
+					appEntry(),
+					serverFunctions.server({
+						resolve: {
+							conditions: ["react-server"],
+						},
+						runtime: `@vinxi/react-server-dom/runtime`,
+					}),
+					serverComponents.serverActions(),
+				],
 			},
 		],
 	});

diff --git a/packages/vinxi-react-server/package.json b/packages/vinxi-react-server/package.json
@@ -41,6 +41,8 @@
     "@vinxi/plugin-references": "0.0.29",
     "@vinxi/react": "0.0.12",
     "@vinxi/react-server-dom": "^0.0.3",
+    "@vinxi/server-components": "0.0.39",
+    "@vinxi/server-functions": "0.0.39",
     "@vitejs/plugin-react": "^4.0.4"
   }
 }
diff --git a/packages/vinxi-react-server/routers.js b/packages/vinxi-react-server/routers.js