From 31777cf3a6f995d84ca540199601514f52794f2d Mon Sep 17 00:00:00 2001 From: Nikhil Saraf Date: Thu, 10 Aug 2023 01:47:38 +0530 Subject: [PATCH] add references plugin --- .../react/spa/tanstack-router/app.config.js | 6 ++-- .../spa/tanstack-router/app/entry-server.tsx | 3 +- .../react/spa/tanstack-router/package.json | 1 + examples/vanilla/spa/app.config.js | 10 ++++++- examples/vanilla/spa/app/actions.tsx | 12 ++++++++ examples/vanilla/spa/app/client.tsx | 2 ++ examples/vanilla/spa/package.json | 4 +-- .../vinxi-references/index.js | 14 ++++++++-- packages/vinxi-references/package.json | 28 +++++++++++++++++++ .../vinxi-references}/references-runtime.js | 0 .../vinxi-references/server.js | 5 ++-- .../vinxi-references}/transform-references.js | 0 packages/vinxi-references/tsconfig.json | 13 +++++++++ pnpm-lock.yaml | 12 ++++++++ 14 files changed, 98 insertions(+), 12 deletions(-) create mode 100644 examples/vanilla/spa/app/actions.tsx rename examples/react/spa/tanstack-router/lib/references-plugin.js => packages/vinxi-references/index.js (91%) create mode 100644 packages/vinxi-references/package.json rename {examples/react/spa/tanstack-router/lib => packages/vinxi-references}/references-runtime.js (100%) rename examples/react/spa/tanstack-router/lib/server-action.js => packages/vinxi-references/server.js (93%) rename {examples/react/spa/tanstack-router/lib => packages/vinxi-references}/transform-references.js (100%) create mode 100644 packages/vinxi-references/tsconfig.json diff --git a/examples/react/spa/tanstack-router/app.config.js b/examples/react/spa/tanstack-router/app.config.js index 5caf3a41..672e4dcc 100644 --- a/examples/react/spa/tanstack-router/app.config.js +++ b/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()], }, }, ], diff --git a/examples/react/spa/tanstack-router/app/entry-server.tsx b/examples/react/spa/tanstack-router/app/entry-server.tsx index 722e17b4..7e06757f 100644 --- a/examples/react/spa/tanstack-router/app/entry-server.tsx +++ b/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); diff --git a/examples/react/spa/tanstack-router/package.json b/examples/react/spa/tanstack-router/package.json index f72e0cd0..62d25e9b 100644 --- a/examples/react/spa/tanstack-router/package.json +++ b/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", diff --git a/examples/vanilla/spa/app.config.js b/examples/vanilla/spa/app.config.js index 985afa9b..1bdc0039 100644 --- a/examples/vanilla/spa/app.config.js +++ b/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(), ], }); diff --git a/examples/vanilla/spa/app/actions.tsx b/examples/vanilla/spa/app/actions.tsx new file mode 100644 index 00000000..a843ead4 --- /dev/null +++ b/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; +} diff --git a/examples/vanilla/spa/app/client.tsx b/examples/vanilla/spa/app/client.tsx index 97c33a34..d2c9b686 100644 --- a/examples/vanilla/spa/app/client.tsx +++ b/examples/vanilla/spa/app/client.tsx @@ -1,4 +1,6 @@ /// +import { sayHello } from "./actions"; import "./style.css"; +console.log(await sayHello()); alert("Hello world!"); diff --git a/examples/vanilla/spa/package.json b/examples/vanilla/spa/package.json index f6f676d7..a33c6b80 100644 --- a/examples/vanilla/spa/package.json +++ b/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": {} + } } diff --git a/examples/react/spa/tanstack-router/lib/references-plugin.js b/packages/vinxi-references/index.js similarity index 91% rename from examples/react/spa/tanstack-router/lib/references-plugin.js rename to packages/vinxi-references/index.js index 8813d2b1..be3d0996 100644 --- a/examples/react/spa/tanstack-router/lib/references-plugin.js +++ b/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()], + }, + }), }; diff --git a/packages/vinxi-references/package.json b/packages/vinxi-references/package.json new file mode 100644 index 00000000..b421510b --- /dev/null +++ b/packages/vinxi-references/package.json @@ -0,0 +1,28 @@ +{ + "name": "@vinxi/plugin-references", + "version": "0.0.5", + "type": "module", + "author": "Nikhil Saraf ", + "files": [ + "*.js", + "*.d.ts" + ], + "types": "./index.d.ts", + "exports": { + ".": "./index.js", + "./*": "./*.js" + }, + "typesVersions": { + "*": { + ".": [ + "./index.d.ts" + ] + } + }, + "devDependencies": { + "vinxi": "workspace:*" + }, + "peerDependencies": { + "vinxi": "^0.0.1" + } +} diff --git a/examples/react/spa/tanstack-router/lib/references-runtime.js b/packages/vinxi-references/references-runtime.js similarity index 100% rename from examples/react/spa/tanstack-router/lib/references-runtime.js rename to packages/vinxi-references/references-runtime.js diff --git a/examples/react/spa/tanstack-router/lib/server-action.js b/packages/vinxi-references/server.js similarity index 93% rename from examples/react/spa/tanstack-router/lib/server-action.js rename to packages/vinxi-references/server.js index 9b56069a..9b5366dd 100644 --- a/examples/react/spa/tanstack-router/lib/server-action.js +++ b/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"); } -} +}); diff --git a/examples/react/spa/tanstack-router/lib/transform-references.js b/packages/vinxi-references/transform-references.js similarity index 100% rename from examples/react/spa/tanstack-router/lib/transform-references.js rename to packages/vinxi-references/transform-references.js diff --git a/packages/vinxi-references/tsconfig.json b/packages/vinxi-references/tsconfig.json new file mode 100644 index 00000000..49c19bf6 --- /dev/null +++ b/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 + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5c87ad41..21150ce6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -204,6 +204,9 @@ importers: '@tanstack/router-devtools': specifier: 0.0.1-beta.111 version: 0.0.1-beta.111(react-dom@0.0.0-experimental-035a41c4e-20230704)(react@0.0.0-experimental-035a41c4e-20230704) + '@vinxi/plugin-references': + specifier: workspace:^ + version: link:../../../../packages/vinxi-references '@vinxi/react': specifier: workspace:^ version: link:../../../../packages/vinxi-react @@ -633,6 +636,9 @@ importers: '@picocss/pico': specifier: ^1.5.7 version: 1.5.7 + '@vinxi/plugin-references': + specifier: workspace:^ + version: link:../../../packages/vinxi-references autoprefixer: specifier: ^10.4.14 version: 10.4.14(postcss@8.4.27) @@ -774,6 +780,12 @@ importers: specifier: workspace:^ version: link:../vinxi + packages/vinxi-references: + devDependencies: + vinxi: + specifier: workspace:* + version: link:../vinxi + packages/vinxi-solid: devDependencies: '@solidjs/meta':