feat: add new directives plugin

Author: lxsmnsyc

apps/tests/cypress/e2e/server-function.cy.ts

@@ -52,4 +52,8 @@ describe("server-function", () => {
     cy.visit("/generator-server-function");
     cy.get("#server-fn-test").contains('¡Hola, Mundo!');
   });
+  it("should remove non-function exports in a module-level use server file", () => {
+    cy.visit("/server-function-query-toplevel");
+    cy.get("#server-fn-test").contains("false");
+  });
 });

apps/tests/src/functions/solid-router-query.ts

@@ -0,0 +1,6 @@
+"use server";
+
+import { query } from "@solidjs/router";
+import { isServer } from "solid-js/web";
+
+export const testQuery = query(() => isServer, "testQuery");

apps/tests/src/routes/server-function-query-toplevel.tsx

@@ -0,0 +1,16 @@
+import { createEffect, createSignal } from "solid-js";
+import * as testModule from "~/functions/solid-router-query";
+
+export default function App() {
+  const [output, setOutput] = createSignal<boolean | null>();
+
+  createEffect(() => {
+    setOutput("testQuery" in testModule);
+  });
+
+  return (
+    <main>
+      <span id="server-fn-test">{JSON.stringify(output())}</span>
+    </main>
+  );
+}

packages/start/config/index.js

@@ -1,4 +1,3 @@
-import { createTanStackServerFnPlugin } from "@tanstack/server-functions-plugin";
 import defu from "defu";
 import { existsSync } from "node:fs";
 import { join } from "node:path";
@@ -7,6 +6,7 @@ import { createApp, resolve } from "vinxi";
 import { normalize } from "vinxi/lib/path";
 import { config } from "vinxi/plugins/config";
 import solid from "vite-plugin-solid";
+import { serverFunctionsPlugin } from "../dist/directives/index.js";
 import { SolidStartClientFileRouter, SolidStartServerFileRouter } from "./fs-router.js";
 import { serverComponents } from "./server-components.js";
 
@@ -37,36 +37,6 @@ function solidStartServerFsRouter(config) {
     );
 }
 
-const SolidStartServerFnsPlugin = createTanStackServerFnPlugin({
-  // This is the ID that will be available to look up and import
-  // our server function manifest and resolve its module
-  manifestVirtualImportId: "solidstart:server-fn-manifest",
-  client: {
-    getRuntimeCode: () =>
-      `import { createServerReference } from "${normalize(
-        fileURLToPath(new URL("../dist/runtime/server-runtime.js", import.meta.url))
-      )}"`,
-    replacer: opts =>
-      `createServerReference(${() => {}}, '${opts.functionId}', '${opts.extractedFilename}')`
-  },
-  ssr: {
-    getRuntimeCode: () =>
-      `import { createServerReference } from '${normalize(
-        fileURLToPath(new URL("../dist/runtime/server-fns-runtime.js", import.meta.url))
-      )}'`,
-    replacer: opts =>
-      `createServerReference(${opts.fn}, '${opts.functionId}', '${opts.extractedFilename}')`
-  },
-  server: {
-    getRuntimeCode: () =>
-      `import { createServerReference } from '${normalize(
-        fileURLToPath(new URL("../dist/runtime/server-fns-runtime.js", import.meta.url))
-      )}'`,
-    replacer: opts =>
-      `createServerReference(${opts.fn}, '${opts.functionId}', '${opts.extractedFilename}')`
-  }
-});
-
 export function defineConfig(baseConfig = {}) {
   let { vite = {}, ...start } = baseConfig;
   const extensions = [...DEFAULT_EXTENSIONS, ...(start.extensions || [])];
@@ -145,7 +115,9 @@ export function defineConfig(baseConfig = {}) {
               }
             }),
             ...plugins,
-            SolidStartServerFnsPlugin.ssr,
+            ...serverFunctionsPlugin({
+              manifest: "solidstart:server-fn-manifest"
+            }),
             start.experimental.islands ? serverComponents.server() : null,
             solid({ ...start.solid, ssr: true, extensions: extensions.map(ext => `.${ext}`) }),
             config("app-server", {
@@ -207,7 +179,9 @@ export function defineConfig(baseConfig = {}) {
               }
             }),
             ...plugins,
-            SolidStartServerFnsPlugin.client,
+            ...serverFunctionsPlugin({
+              manifest: "solidstart:server-fn-manifest"
+            }),
             start.experimental.islands ? serverComponents.client() : null,
             solid({ ...start.solid, ssr: start.ssr, extensions: extensions.map(ext => `.${ext}`) }),
             config("app-client", {
@@ -274,7 +248,9 @@ export function defineConfig(baseConfig = {}) {
               cacheDir: "node_modules/.vinxi/server-fns"
             }),
             ...plugins,
-            SolidStartServerFnsPlugin.server,
+            ...serverFunctionsPlugin({
+              manifest: "solidstart:server-fn-manifest"
+            }),
             start.experimental.islands ? serverComponents.server() : null,
             solid({ ...start.solid, ssr: true, extensions: extensions.map(ext => `.${ext}`) }),
             config("app-server", {

packages/start/package.json

@@ -61,12 +61,17 @@
     }
   },
   "devDependencies": {
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__traverse": "^7.28.0",
     "solid-js": "^1.9.11",
+    "vite": "^6.3.6",
     "vinxi": "^0.5.7",
     "vitest": "3.0.5"
   },
   "dependencies": {
-    "@tanstack/server-functions-plugin": "1.121.21",
+    "@babel/core": "^7.28.3",
+    "@babel/traverse": "^7.28.3",
+    "@babel/types": "^7.28.5",
     "@vinxi/plugin-directives": "^0.5.0",
     "@vinxi/server-components": "^0.5.0",
     "cookie-es": "^2.0.0",

packages/start/src/directives/bubble-function-declaration.ts

@@ -0,0 +1,30 @@
+import type * as babel from "@babel/core";
+import * as t from "@babel/types";
+
+export function bubbleFunctionDeclaration(path: babel.NodePath<t.FunctionDeclaration>): void {
+  const decl = path.node;
+  if (decl.id) {
+    const block = (path.findParent(current => current.isBlockStatement()) ||
+      path.scope.getProgramParent().path) as babel.NodePath<t.BlockStatement>;
+
+    const [tmp] = block.unshiftContainer(
+      "body",
+      t.variableDeclaration("const", [
+        t.variableDeclarator(
+          decl.id,
+          t.functionExpression(decl.id, decl.params, decl.body, decl.generator, decl.async),
+        ),
+      ]),
+    );
+    path.scope.registerDeclaration(tmp);
+    if (path.parentPath.isExportNamedDeclaration()) {
+      path.parentPath.replaceWith(
+        t.exportNamedDeclaration(undefined, [t.exportSpecifier(decl.id, decl.id)]),
+      );
+    } else if (path.parentPath.isExportDefaultDeclaration()) {
+      path.replaceWith(decl.id);
+    } else {
+      path.remove();
+    }
+  }
+}

packages/start/src/directives/compile.ts

@@ -0,0 +1,55 @@
+import * as babel from "@babel/core";
+import path from "node:path";
+import { directivesPlugin, type StateContext } from "./plugin.js";
+import xxHash32 from "./xxhash32.js";
+
+export interface CompileResult {
+  valid: boolean;
+  code: string;
+  map: babel.BabelFileResult["map"];
+}
+
+export type CompileOptions = Omit<StateContext, "count" | "file" | "hash" | "imports" | "valid">;
+
+export async function compile(
+  id: string,
+  code: string,
+  options: CompileOptions,
+): Promise<CompileResult> {
+  const context: StateContext = {
+    ...options,
+    file: id,
+    valid: false,
+    hash: xxHash32(id).toString(16),
+    count: 0,
+    imports: new Map(),
+  };
+  const pluginOption = [directivesPlugin, context];
+  const plugins: NonNullable<NonNullable<babel.TransformOptions["parserOpts"]>["plugins"]> = [
+    "jsx",
+  ];
+  if (/\.[mc]?tsx?$/i.test(id)) {
+    plugins.push("typescript");
+  }
+  const result = await babel.transformAsync(code, {
+    plugins: [pluginOption],
+    parserOpts: {
+      plugins,
+    },
+    filename: path.basename(id),
+    ast: false,
+    sourceMaps: true,
+    configFile: false,
+    babelrc: false,
+    sourceFileName: id,
+  });
+
+  if (result) {
+    return {
+      valid: context.valid,
+      code: result.code || "",
+      map: result.map,
+    };
+  }
+  throw new Error("invariant");
+}

packages/start/src/directives/generate-unique-name.ts

@@ -0,0 +1,22 @@
+import type * as babel from "@babel/core";
+import * as t from "@babel/types";
+
+export function generateUniqueName(path: babel.NodePath, name: string): t.Identifier {
+  let uid: string;
+  let i = 1;
+  do {
+    uid = name + "_" + i;
+    i++;
+  } while (
+    path.scope.hasLabel(uid) ||
+    path.scope.hasBinding(uid) ||
+    path.scope.hasGlobal(uid) ||
+    path.scope.hasReference(uid)
+  );
+
+  const program = path.scope.getProgramParent();
+  program.references[uid] = true;
+  program.uids[uid] = true;
+
+  return t.identifier(uid);
+}

packages/start/src/directives/get-descriptive-name.ts

@@ -0,0 +1,39 @@
+import type { NodePath } from "@babel/core";
+
+export function getDescriptiveName(path: NodePath, defaultName: string): string {
+  let current: NodePath | null = path;
+  while (current) {
+    switch (current.node.type) {
+      case "FunctionDeclaration":
+      case "FunctionExpression": {
+        if (current.node.id) {
+          return current.node.id.name;
+        }
+        break;
+      }
+      case "VariableDeclarator": {
+        if (current.node.id.type === "Identifier") {
+          return current.node.id.name;
+        }
+        break;
+      }
+      case "ClassPrivateMethod":
+      case "ClassMethod":
+      case "ObjectMethod": {
+        switch (current.node.key.type) {
+          case "Identifier":
+            return current.node.key.name;
+          case "PrivateName":
+            return current.node.key.id.name;
+          default:
+            break;
+        }
+        break;
+      }
+      default:
+        break;
+    }
+    current = current.parentPath;
+  }
+  return defaultName;
+}

packages/start/src/directives/get-import-identifier.ts

@@ -0,0 +1,34 @@
+import type * as babel from "@babel/core";
+import * as t from "@babel/types";
+import { generateUniqueName } from "./generate-unique-name.js";
+import type { ImportDefinition } from "./types.js";
+
+export function getImportIdentifier(
+  imports: Map<string, t.Identifier>,
+  path: babel.NodePath,
+  registration: ImportDefinition,
+): t.Identifier {
+  const name = registration.kind === "named" ? registration.name : "default";
+  const target = `${registration.source}[${name}]`;
+  const current = imports.get(target);
+  if (current) {
+    return current;
+  }
+  const programParent = path.scope.getProgramParent();
+  const uid = generateUniqueName(programParent.path, name);
+  programParent.registerDeclaration(
+    (programParent.path as babel.NodePath<t.Program>).unshiftContainer(
+      "body",
+      t.importDeclaration(
+        [
+          registration.kind === "named"
+            ? t.importSpecifier(uid, t.identifier(registration.name))
+            : t.importDefaultSpecifier(uid),
+        ],
+        t.stringLiteral(registration.source),
+      ),
+    )[0],
+  );
+  imports.set(target, uid);
+  return uid;
+}