docs(changeset): make server functions worker work

russelgal · 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