add references plugin

examples/react/spa/tanstack-router/app.config.js

@@ -1,8 +1,8 @@
+import { references } from "@vinxi/plugin-references";
 import reactRefresh from "@vitejs/plugin-react";
 import { createApp } from "vinxi";
 
 import { TanstackFileRouter } from "./lib/file-router.js";
-import { references } from "./lib/references-plugin.js";
 
 export default createApp({
 	server: {
@@ -25,7 +25,7 @@ export default createApp({
 			style: TanstackFileRouter,
 			build: {
 				target: "browser",
-				plugins: () => [references.clientRouter(), reactRefresh()],
+				plugins: () => [references.clientRouterPlugin(), reactRefresh()],
 			},
 			base: "/",
 		},
@@ -36,7 +36,7 @@ export default createApp({
 			handler: "./app/entry-server.tsx",
 			build: {
 				target: "node",
-				plugins: () => [references.serverRouter()],
+				plugins: () => [references.serverRouterPlugin()],
 			},
 		},
 	],

examples/react/spa/tanstack-router/app/entry-server.tsx

@@ -1,5 +1,4 @@
+import handleServerAction from "@vinxi/plugin-references/server";
 import { eventHandler } from "vinxi/runtime/server";
 
-import { handleServerAction } from "../lib/server-action";
-
 export default eventHandler(handleServerAction);

examples/react/spa/tanstack-router/package.json

@@ -10,6 +10,7 @@
     "@tanstack/react-loaders": "0.0.1-beta.109",
     "@tanstack/router": "0.0.1-beta.111",
     "@tanstack/router-devtools": "0.0.1-beta.111",
+    "@vinxi/plugin-references": "workspace:^",
     "@vinxi/react": "workspace:^",
     "@vitejs/plugin-react": "^4.0.1",
     "acorn-loose": "^8.3.0",

examples/vanilla/spa/app.config.js

@@ -1,7 +1,14 @@
+import { references } from "@vinxi/plugin-references";
 import reactRefresh from "@vitejs/plugin-react";
 import { createApp } from "vinxi";
 
 export default createApp({
+	server: {
+		plugins: [references.serverPlugin],
+		virtual: {
+			[references.serverPlugin]: references.serverPluginModule,
+		},
+	},
 	routers: [
 		{
 			name: "public",
@@ -14,8 +21,9 @@ export default createApp({
 			handler: "./index.html",
 			build: {
 				target: "browser",
-				plugins: () => [reactRefresh()],
+				plugins: () => [references.clientRouterPlugin(), reactRefresh()],
 			},
 		},
+		references.serverRouter(),
 	],
 });

examples/vanilla/spa/app/actions.tsx

@@ -0,0 +1,12 @@
+"use server";
+
+let store = { count: 0 };
+export function sayHello() {
+	console.log("Hello World");
+	store.count++;
+	return store.count;
+}
+
+export function getStore() {
+	return store.count;
+}

examples/vanilla/spa/app/client.tsx

@@ -1,4 +1,6 @@
 /// <reference types="vinxi/client" />
+import { sayHello } from "./actions";
 import "./style.css";
 
+console.log(await sayHello());
 alert("Hello world!");

examples/vanilla/spa/package.json

@@ -7,9 +7,9 @@
   },
   "dependencies": {
     "@picocss/pico": "^1.5.7",
+    "@vinxi/plugin-references": "workspace:^",
     "autoprefixer": "^10.4.14",
     "tailwindcss": "^3.3.2",
     "vinxi": "workspace:^"
-  },
-  "devDependencies": {}
+  }
 }

examples/react/spa/tanstack-router/lib/references-plugin.js → packages/vinxi-references/index.js

@@ -153,6 +153,16 @@ export const references = {
 	serverPlugin,
 	serverPluginModule,
 	transformReferences,
-	clientRouter: client,
-	serverRouter: server,
+	clientRouterPlugin: client,
+	serverRouterPlugin: server,
+	serverRouter: () => ({
+		name: "server",
+		mode: "handler",
+		base: "/_server",
+		handler: fileURLToPath(new URL("./server.js", import.meta.url)),
+		build: {
+			target: "node",
+			plugins: () => [references.serverRouterPlugin()],
+		},
+	}),
 };

packages/vinxi-references/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@vinxi/plugin-references",
+  "version": "0.0.5",
+  "type": "module",
+  "author": "Nikhil Saraf <nsaraf98@gmail.com>",
+  "files": [
+    "*.js",
+    "*.d.ts"
+  ],
+  "types": "./index.d.ts",
+  "exports": {
+    ".": "./index.js",
+    "./*": "./*.js"
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./index.d.ts"
+      ]
+    }
+  },
+  "devDependencies": {
+    "vinxi": "workspace:*"
+  },
+  "peerDependencies": {
+    "vinxi": "^0.0.1"
+  }
+}

examples/react/spa/tanstack-router/lib/server-action.js → packages/vinxi-references/server.js

@@ -1,4 +1,5 @@
 import invariant from "vinxi/lib/invariant";
+import { eventHandler } from "vinxi/runtime/server";
 
 async function loadModule(id) {
 	if (import.meta.env.DEV) {
@@ -16,7 +17,7 @@ async function loadModule(id) {
 	);
 }
 
-export async function handleServerAction(event) {
+export default eventHandler(async function handleServerAction(event) {
 	invariant(event.request.method === "POST", "Invalid method");
 
 	const serverReference = event.node.req.headers["server-action"];
@@ -54,4 +55,4 @@ export async function handleServerAction(event) {
 	} else {
 		throw new Error("Invalid request");
 	}
-}
+});

packages/vinxi-references/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleResolution": "node",
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": true,
+		"allowJs": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
+		"isolatedModules": true
+	}
+}