feat: add new directives plugin (#2070)

Co-authored-by: Atila Fassina <atila@fassina.eu>

Author: lxsmnsyc

.changeset/rare-canyons-travel.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/start": minor
+---
+
+Add new directives plugin with shorter function IDs and inner declaration support

apps/tests/src/e2e/server-function.test.ts

@@ -81,6 +81,10 @@ test.describe("server-function", () => {
     await page.goto("http://localhost:3000/server-function-blob");
     await expect(page.locator("#server-fn-test")).toContainText('{"result":true}');
   });
+  test("should remove exports for non-function values when top-level use server is used", async ({ page }) => {
+    await page.goto("http://localhost:3000/server-function-query-toplevel");
+    await expect(page.locator("#server-fn-test")).toContainText('false');
+  });
 
   // TODO not sure if this is the correct place
   test("should build with a env:server", async ({ page }) => {

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

@@ -0,0 +1,7 @@
+"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>
+  );
+}

apps/tests/test-results/.last-run.json

@@ -41,7 +41,6 @@
     "@babel/traverse": "^7.29.0",
     "@babel/types": "^7.29.0",
     "@solidjs/meta": "^0.29.4",
-    "@tanstack/server-functions-plugin": "1.134.5",
     "@types/babel__traverse": "^7.28.0",
     "@types/micromatch": "^4.0.10",
     "cookie-es": "^2.0.0",

packages/start/package.json

@@ -1,11 +1,10 @@
-import { TanStackServerFnPlugin } from "@tanstack/server-functions-plugin";
 import { defu } from "defu";
 import { globSync } from "node:fs";
 import { extname, isAbsolute, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { normalizePath, type PluginOption } from "vite";
 import solid, { type Options as SolidOptions } from "vite-plugin-solid";
-
+import { serverFunctionsPlugin } from "../directives/index.ts";
 import { DEFAULT_EXTENSIONS, VIRTUAL_MODULES, VITE_ENVIRONMENTS } from "./constants.ts";
 import { devServer } from "./dev-server.ts";
 import { type EnvPluginOptions, envPlugin } from "./env.ts";
@@ -180,38 +179,15 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
     envPlugin(options?.env),
     // Must be placed after fsRoutes, as treeShake will remove the
     // server fn exports added in by this plugin
-    TanStackServerFnPlugin({
-      // This is the ID that will be available to look up and import
-      // our server function manifest and resolve its module
-      manifestVirtualImportId: VIRTUAL_MODULES.serverFnManifest,
-      directive: "use server",
-      callers: [
-        {
-          envConsumer: "client",
-          envName: VITE_ENVIRONMENTS.client,
-          getRuntimeCode: () =>
-            `import { createServerReference } from "${normalizePath(
-              fileURLToPath(new URL("../server/server-runtime", import.meta.url)),
-            )}"`,
-          replacer: opts => `createServerReference('${opts.functionId}')`,
-        },
-        {
-          envConsumer: "server",
-          envName: VITE_ENVIRONMENTS.server,
-          getRuntimeCode: () =>
-            `import { createServerReference } from '${normalizePath(
-              fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url)),
-            )}'`,
-          replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`,
-        },
-      ],
-      provider: {
-        envName: VITE_ENVIRONMENTS.server,
-        getRuntimeCode: () =>
-          `import { createServerReference } from '${normalizePath(
-            fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url)),
-          )}'`,
-        replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`,
+    serverFunctionsPlugin({
+      manifest: VIRTUAL_MODULES.serverFnManifest,
+      runtime: {
+        server: normalizePath(
+          fileURLToPath(new URL("../server/server-fns-runtime.ts", import.meta.url)),
+        ),
+        client: normalizePath(
+          fileURLToPath(new URL("../server/server-runtime.ts", import.meta.url)),
+        ),
       },
     }),
     {

packages/start/src/config/index.ts

@@ -0,0 +1,33 @@
+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;
+  // Check if declaration is FunctionDeclaration
+  if (decl.id) {
+    const block = (path.findParent(current => current.isBlockStatement()) ||
+      path.scope.getProgramParent().path) as babel.NodePath<t.BlockStatement>;
+
+    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();
+    }
+
+    const [tmp] = block.unshiftContainer(
+      "body",
+      t.variableDeclaration("const", [
+        t.variableDeclarator(
+          decl.id,
+          t.functionExpression(decl.id, decl.params, decl.body, decl.generator, decl.async),
+        ),
+      ]),
+    );
+    block.scope.registerDeclaration(tmp);
+    tmp.skip();
+  }
+}

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

@@ -0,0 +1,54 @@
+import * as babel from "@babel/core";
+import path from "node:path";
+import { directivesPlugin, type StateContext } from "./plugin.ts";
+import xxHash32 from "./xxhash32.ts";
+
+export interface CompileResult {
+  valid: boolean;
+  code: string;
+  map: babel.BabelFileResult["map"];
+}
+
+export type CompileOptions = Omit<StateContext, "count" | "hash" | "imports" | "valid">;
+
+export async function compile(
+  id: string,
+  code: string,
+  options: CompileOptions,
+): Promise<CompileResult> {
+  const context: StateContext = {
+    ...options,
+    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/compile.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);
+}