@solidjs/start 2.0.0-alpha.2 → 2.0.0-beta.0

package/src/directives/index.ts

@@ -0,0 +1,233 @@
+import {
+  createFilter,
+  type EnvironmentModuleGraph,
+  type FilterPattern,
+  type Plugin,
+  type ViteDevServer,
+} from "vite";
+import { compile, type CompileOptions } from "./compile.ts";
+
+export interface ServerFunctionsFilter {
+  include?: FilterPattern;
+  exclude?: FilterPattern;
+}
+
+export interface ServerFunctionsOptions {
+  manifest: string;
+  runtime: {
+    server: string;
+    client: string;
+  };
+  filter?: ServerFunctionsFilter;
+}
+
+const DEFAULT_INCLUDE = "src/**/*.{jsx,tsx,ts,js,mjs,cjs}";
+const DEFAULT_EXCLUDE = "node_modules/**/*.{jsx,tsx,ts,js,mjs,cjs}";
+const DIRECTIVE = "use server";
+
+type Manifest = Record<CompileOptions["mode"], Set<string>>;
+
+function createManifest(): Manifest {
+  return {
+    server: new Set(),
+    client: new Set(),
+  };
+}
+
+interface DeferredPromise<T> {
+  reference: Promise<T>;
+  resolve: (value: T) => void;
+  reject: (value: any) => void;
+}
+
+function createDeferredPromise<T>(): DeferredPromise<T> {
+  let resolve: DeferredPromise<T>["resolve"];
+  let reject: DeferredPromise<T>["reject"];
+
+  return {
+    reference: new Promise((res, rej) => {
+      resolve = res;
+      reject = rej;
+    }),
+    resolve(value) {
+      resolve(value);
+    },
+    reject(value) {
+      reject(value);
+    },
+  };
+}
+
+class Debouncer<T> {
+  promise: DeferredPromise<T>;
+
+  private timeout: ReturnType<typeof setTimeout> | undefined;
+
+  constructor(private source: () => T) {
+    this.promise = createDeferredPromise();
+    this.defer();
+  }
+
+  defer(): void {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+      this.timeout = undefined;
+    }
+    this.timeout = setTimeout(() => {
+      this.promise.resolve(this.source());
+    }, 1000);
+  }
+}
+
+function mergeManifestRecord(
+  source: Set<string>,
+  target: Set<string>,
+): { invalidPreload: boolean; invalidated: string[] } {
+  const current = source.size;
+  for (const entry of target) {
+    source.add(entry);
+  }
+  return {
+    invalidPreload: current !== source.size,
+    invalidated: [...source],
+  };
+}
+
+function invalidateModule(moduleGraph: EnvironmentModuleGraph, path: string) {
+  const target = moduleGraph.getModuleById(path);
+  if (target) {
+    moduleGraph.invalidateModule(target);
+  }
+}
+
+function invalidateModules(
+  server: ViteDevServer | undefined,
+  result: ReturnType<typeof mergeManifestRecord>,
+  manifest: string,
+): void {
+  if (server) {
+    if (result.invalidPreload) {
+      invalidateModule(server.environments.client.moduleGraph, manifest);
+      invalidateModule(server.environments.ssr.moduleGraph, manifest);
+    }
+  }
+}
+
+
+export function serverFunctionsPlugin(options: ServerFunctionsOptions): Plugin[] {
+  const filter = createFilter(
+    options.filter?.include || DEFAULT_INCLUDE,
+    options.filter?.exclude || DEFAULT_EXCLUDE,
+  );
+
+  let env: CompileOptions["env"];
+
+  const manifest = createManifest();
+
+  const preload: Record<CompileOptions["mode"], Debouncer<string> | undefined> = {
+    server: undefined,
+    client: undefined,
+  };
+  let currentServer: ViteDevServer;
+
+  const clientOptions: Pick<CompileOptions, "directive" | "definitions"> = {
+    directive: DIRECTIVE,
+    definitions: {
+      register: {
+        kind: "named",
+        name: "createServerReference",
+        source: options.runtime.client,
+      },
+      clone: {
+        kind: "named",
+        name: "cloneServerReference",
+        source: options.runtime.client,
+      },
+    },
+  };
+  const serverOptions: Pick<CompileOptions, "directive" | "definitions"> = {
+    directive: DIRECTIVE,
+    definitions: {
+      register: {
+        kind: "named",
+        name: "createServerReference",
+        source: options.runtime.server,
+      },
+      clone: {
+        kind: "named",
+        name: "cloneServerReference",
+        source: options.runtime.server,
+      },
+    },
+  };
+
+  return [
+    {
+      name: "solid-start:server-functions/setup",
+      enforce: "pre",
+      configResolved(config) {
+        env = config.mode !== "production" ? "development" : "production";
+      },
+      configureServer(server) {
+        currentServer = server;
+      },
+    },
+    {
+      name: "solid-start:server-functions/preload",
+      enforce: "pre",
+      resolveId(source) {
+        if (source === options.manifest) {
+          return { id: options.manifest, moduleSideEffects: true };
+        }
+        return null;
+      },
+      async load(id, opts) {
+        const mode = opts?.ssr ? "server" : "client";
+        if (id === options.manifest) {
+          const current = new Debouncer(() =>
+            [...manifest[mode]].map(entry => `import "${entry}";`).join("\n"),
+          );
+          preload[mode] = current;
+          const result = await current.promise.reference;
+          return result;
+        }
+        return null;
+      },
+    },
+    {
+      name: "solid-start:server-functions/compiler",
+      enforce: 'pre',
+      async transform(code, fileId, opts) {
+        const mode = opts?.ssr ? "server" : "client";
+        const [id] = fileId.split("?");
+        if (!filter(id)) {
+          return null;
+        }
+
+        const result = await compile(id!, code, {
+          ...(mode === "server" ? serverOptions : clientOptions),
+          mode,
+          env,
+        });
+
+        if (result.valid) {
+          const preloader = preload[mode];
+          if (preloader) {
+            preloader.defer();
+          }
+          invalidateModules(
+            currentServer,
+            mergeManifestRecord(manifest.server, new Set([id!])),
+            options.manifest,
+          );
+
+          return {
+            code: result.code || "",
+            map: result.map,
+          };
+        }
+        return null;
+      },
+    },
+  ];
+}

package/src/directives/is-statement-top-level.ts

@@ -0,0 +1,13 @@
+import type * as babel from "@babel/core";
+import type * as t from "@babel/types";
+
+export function isStatementTopLevel(path: babel.NodePath<t.Statement>): boolean {
+  let blockParent = path.scope.getBlockParent();
+  const programParent = path.scope.getProgramParent();
+  // a FunctionDeclaration binding refers to itself as the block parent
+  if (blockParent.path === path) {
+    blockParent = blockParent.parent;
+  }
+
+  return programParent === blockParent;
+}

package/src/directives/paths.ts

@@ -0,0 +1,63 @@
+import type * as t from "@babel/types";
+
+type TypeFilter<V extends t.Node> = (node: t.Node) => node is V;
+
+export function isPathValid<V extends t.Node>(
+  path: unknown,
+  key: TypeFilter<V>,
+): path is babel.NodePath<V> {
+  const node = (path as babel.NodePath).node;
+  return node ? key(node) : false;
+}
+
+export type NestedExpression =
+  | t.ParenthesizedExpression
+  | t.TypeCastExpression
+  | t.TSAsExpression
+  | t.TSSatisfiesExpression
+  | t.TSNonNullExpression
+  | t.TSInstantiationExpression
+  | t.TSTypeAssertion;
+
+export function isNestedExpression(node: t.Node): node is NestedExpression {
+  switch (node.type) {
+    case "ParenthesizedExpression":
+    case "TypeCastExpression":
+    case "TSAsExpression":
+    case "TSSatisfiesExpression":
+    case "TSNonNullExpression":
+    case "TSTypeAssertion":
+    case "TSInstantiationExpression":
+      return true;
+    default:
+      return false;
+  }
+}
+
+type TypeCheck<K> = K extends TypeFilter<infer U> ? U : never;
+
+export function unwrapNode<K extends (value: t.Node) => boolean>(
+  node: t.Node,
+  key: K,
+): TypeCheck<K> | undefined {
+  if (key(node)) {
+    return node as TypeCheck<K>;
+  }
+  if (isNestedExpression(node)) {
+    return unwrapNode(node.expression, key);
+  }
+  return undefined;
+}
+
+export function unwrapPath<V extends t.Node>(
+  path: unknown,
+  key: TypeFilter<V>,
+): babel.NodePath<V> | undefined {
+  if (isPathValid(path, key)) {
+    return path;
+  }
+  if (isPathValid(path, isNestedExpression)) {
+    return unwrapPath(path.get("expression"), key);
+  }
+  return undefined;
+}

package/src/directives/plugin.ts

@@ -0,0 +1,389 @@
+import type * as babel from "@babel/core";
+import type { Binding } from "@babel/traverse";
+import * as t from "@babel/types";
+import { bubbleFunctionDeclaration } from "./bubble-function-declaration.ts";
+import { generateUniqueName } from "./generate-unique-name.ts";
+import { getDescriptiveName } from "./get-descriptive-name.ts";
+import { getImportIdentifier } from "./get-import-identifier.ts";
+import { getRootStatementPath } from "./get-root-statement-path.ts";
+import { isStatementTopLevel } from "./is-statement-top-level.ts";
+import { isPathValid, unwrapPath } from "./paths.ts";
+import { removeUnusedVariables } from "./remove-unused-variables.ts";
+import type { ImportDefinition } from "./types.ts";
+
+export interface StateContext {
+  env: "production" | "development";
+  mode: "server" | "client";
+  directive: string;
+  hash: string;
+  count: number;
+  imports: Map<string, t.Identifier>;
+  valid: boolean;
+
+  definitions: {
+    register: ImportDefinition;
+    clone: ImportDefinition;
+  };
+}
+
+type ValidFunction = t.ArrowFunctionExpression | t.FunctionExpression;
+
+function isValidFunction(node: t.Node): node is ValidFunction {
+  return t.isArrowFunctionExpression(node) || t.isFunctionExpression(node);
+}
+
+function isDirectiveValid(ctx: StateContext, directives: t.Directive[]) {
+  for (let i = 0, len = directives.length; i < len; i++) {
+    if (directives[i]!.value.value === ctx.directive) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function cleanDirectives(path: babel.NodePath<t.BlockStatement | t.Program>, target: string): void {
+  const newDirectives: t.Directive[] = [];
+  for (let i = 0, len = path.node.directives.length; i < len; i++) {
+    const current = path.node.directives[i]!;
+    if (current.value.value !== target) {
+      newDirectives.push(current);
+    }
+  }
+  path.node.directives = newDirectives;
+}
+
+function cleanFunctionDirectives(
+  ctx: StateContext,
+  path: babel.NodePath<t.FunctionDeclaration | ValidFunction>,
+) {
+  const body = path.get("body");
+
+  if (isPathValid(body, t.isBlockStatement)) {
+    cleanDirectives(body, ctx.directive);
+  }
+}
+
+function isFunctionDirectiveValid(
+  ctx: StateContext,
+  path: babel.NodePath<t.FunctionDeclaration | ValidFunction>,
+) {
+  const body = path.get("body");
+
+  if (isPathValid(body, t.isBlockStatement)) {
+    return isDirectiveValid(ctx, body.node.directives);
+  }
+
+  return false;
+}
+
+function createID(ctx: StateContext, name: string) {
+  const base = `${ctx.hash}-${ctx.count++}`;
+  if (ctx.env === "development") {
+    return `${base}-${name}`;
+  }
+  return base;
+}
+
+function transformFunction(
+  ctx: StateContext,
+  path: babel.NodePath<ValidFunction>,
+  direct: boolean,
+) {
+  if (!direct) {
+    if (!isFunctionDirectiveValid(ctx, path)) {
+      return;
+    }
+    cleanFunctionDirectives(ctx, path);
+  }
+  // First, get root statement
+  const rootStatement = getRootStatementPath(path);
+
+  // Create a unique ID for the function
+  const fnID = createID(ctx, getDescriptiveName(path, "anonymous"));
+
+  if (ctx.mode === "server") {
+    // Create a "source" function on the root-level
+    const sourceReference = t.callExpression(
+      getImportIdentifier(ctx.imports, path, ctx.definitions.register),
+      [t.stringLiteral(fnID), path.node],
+    );
+
+    const sourceID = generateUniqueName(path, "serverFn");
+
+    rootStatement.insertBefore(
+      t.variableDeclaration("const", [t.variableDeclarator(sourceID, sourceReference)]),
+    );
+
+    // Clone the source function to replace the server function
+    path.replaceWith(
+      t.callExpression(getImportIdentifier(ctx.imports, path, ctx.definitions.clone), [sourceID]),
+    );
+  } else {
+    // Otherwise, clone the function based on its ID
+    path.replaceWith(
+      t.callExpression(getImportIdentifier(ctx.imports, path, ctx.definitions.clone), [
+        t.stringLiteral(fnID),
+      ]),
+    );
+  }
+
+  path.scope.crawl();
+}
+
+function traceBinding(path: babel.NodePath, name: string): Binding | undefined {
+  const current = path.scope.getBinding(name);
+  if (!current) {
+    return undefined;
+  }
+  switch (current.kind) {
+    case "const":
+    case "let":
+    case "var": {
+      if (isPathValid(current.path, t.isVariableDeclarator)) {
+        // Check if left is identifier
+        const left = unwrapPath(current.path.get("id"), t.isIdentifier);
+        if (left) {
+          const right = unwrapPath(current.path.get("init"), t.isIdentifier);
+          if (right) {
+            return traceBinding(path, right.node.name);
+          }
+
+          // Only valid for functions
+          const func = unwrapPath(current.path.get("init"), isValidFunction);
+          if (func) {
+            return current;
+          }
+        }
+      }
+      return undefined;
+    }
+    case "hoisted":
+    case "local":
+    case "module":
+    case "param":
+    case "unknown":
+      return undefined;
+  }
+}
+
+function transformBindingForServer(ctx: StateContext, binding: Binding) {
+  if (isPathValid(binding.path, t.isVariableDeclarator)) {
+    const right = unwrapPath(binding.path.get("init"), isValidFunction);
+    if (right) {
+      transformFunction(ctx, right, true);
+    }
+  }
+}
+
+interface State extends babel.PluginPass {
+  opts: StateContext;
+}
+
+function transformModuleLevelDirective(ctx: StateContext, program: babel.NodePath<t.Program>) {
+  cleanDirectives(program, ctx.directive);
+  program.traverse({
+    FunctionDeclaration(child) {
+      // We only need to move top-level functions
+      if (isStatementTopLevel(child)) {
+        bubbleFunctionDeclaration(child);
+      }
+    },
+  });
+  program.scope.crawl();
+  if (ctx.mode === "server") {
+    // Trace bindings
+    const bindings = new Set<Binding>();
+
+    program.traverse({
+      ExportDefaultDeclaration(path) {
+        const id = unwrapPath(path.get("declaration"), t.isIdentifier);
+        if (id) {
+          const binding = traceBinding(path, id.node.name);
+          if (binding) {
+            bindings.add(binding);
+          }
+        }
+      },
+      ExportNamedDeclaration(path) {
+        if (path.node.source || path.node.exportKind === "type") {
+          return;
+        }
+        for (const specifier of path.get("specifiers")) {
+          if (isPathValid(specifier, t.isExportSpecifier)) {
+            const binding = traceBinding(specifier, specifier.node.local.name);
+
+            if (binding) {
+              bindings.add(binding);
+            }
+          }
+        }
+        const declarations = path.get("declaration");
+
+        if (isPathValid(declarations, t.isVariableDeclaration)) {
+          for (const declaration of declarations.get("declarations")) {
+            // Check if left is identifier
+            const left = unwrapPath(declaration.get("id"), t.isIdentifier);
+            if (left) {
+              const binding = traceBinding(left, left.node.name);
+              if (binding) {
+                bindings.add(binding);
+              }
+            }
+          }
+        }
+      },
+    });
+
+    for (const binding of bindings) {
+      transformBindingForServer(ctx, binding);
+    }
+  } else {
+    // Trace bindings
+    const uniqueBindings = new Set<Binding>();
+    const exportedBindings = new Map<string, Binding>();
+
+    program.traverse({
+      ExportDefaultDeclaration(path) {
+        const id = unwrapPath(path.get("declaration"), t.isIdentifier);
+        if (id) {
+          const binding = traceBinding(path, id.node.name);
+          if (binding) {
+            uniqueBindings.add(binding);
+            exportedBindings.set("default", binding);
+          }
+        }
+      },
+      ExportNamedDeclaration(path) {
+        if (path.node.source || path.node.exportKind === "type") {
+          return;
+        }
+        for (const specifier of path.get("specifiers")) {
+          if (isPathValid(specifier, t.isExportSpecifier)) {
+            const binding = traceBinding(specifier, specifier.node.local.name);
+
+            if (binding) {
+              const key = t.isIdentifier(specifier.node.exported)
+                ? specifier.node.exported.name
+                : specifier.node.exported.value;
+              uniqueBindings.add(binding);
+              exportedBindings.set(key, binding);
+            }
+          }
+        }
+
+        const declarations = path.get("declaration");
+
+        if (isPathValid(declarations, t.isVariableDeclaration)) {
+          for (const declaration of declarations.get("declarations")) {
+            // Check if left is identifier
+            const left = unwrapPath(declaration.get("id"), t.isIdentifier);
+            if (left) {
+              const binding = traceBinding(left, left.node.name);
+              if (binding) {
+                uniqueBindings.add(binding);
+                exportedBindings.set(left.node.name, binding);
+              }
+            }
+          }
+        }
+      },
+    });
+
+    // generate ids for each unique binding
+    const sourceIDs = new Map<Binding, string>();
+    for (const binding of uniqueBindings) {
+      if (isPathValid(binding.path, t.isVariableDeclarator)) {
+        const init = unwrapPath(binding.path.get("init"), isValidFunction);
+        if (init) {
+          sourceIDs.set(binding, createID(ctx, getDescriptiveName(init, "anonymous")));
+        }
+      }
+    }
+
+    // clear body
+    program.node.body = [];
+
+    const declarations: t.VariableDeclarator[] = [];
+    const specifiers: t.ExportSpecifier[] = [];
+
+    const declarationMap = new Map<Binding, t.Identifier>();
+
+    // Declare all client functions
+    for (const [exported, binding] of exportedBindings) {
+      let currentIdentifier = declarationMap.get(binding);
+      if (!currentIdentifier) {
+        currentIdentifier = generateUniqueName(program, "fn");
+
+        const fnID = sourceIDs.get(binding);
+
+        if (fnID) {
+          declarations.push(
+            t.variableDeclarator(
+              currentIdentifier,
+              t.callExpression(getImportIdentifier(ctx.imports, program, ctx.definitions.clone), [
+                t.stringLiteral(fnID),
+              ]),
+            ),
+          );
+
+          declarationMap.set(binding, currentIdentifier);
+        }
+      }
+
+      if (currentIdentifier) {
+        specifiers.push(t.exportSpecifier(currentIdentifier, t.stringLiteral(exported)));
+      }
+    }
+
+    const body: t.Statement[] = [];
+
+    if (declarations.length > 0) {
+      body.push(t.variableDeclaration("const", declarations));
+    }
+    if (specifiers.length > 0) {
+      body.push(t.exportNamedDeclaration(null, specifiers, null));
+    }
+
+    program.pushContainer("body", body);
+  }
+}
+
+export function directivesPlugin(): babel.PluginObj<State> {
+  return {
+    name: "solid-start:directives",
+    visitor: {
+      Program(program, ctx) {
+        const isModuleLevel = isDirectiveValid(ctx.opts, program.node.directives);
+        if (isModuleLevel) {
+          transformModuleLevelDirective(ctx.opts, program);
+          ctx.opts.valid = true;
+        } else {
+          // First, bubble up function declarations
+          program.traverse({
+            FunctionDeclaration(child) {
+              // if (isFunctionDirectiveValid(ctx.opts, child)) {
+              bubbleFunctionDeclaration(child);
+              // }
+            },
+          });
+          program.scope.crawl();
+          // Now we transform each function
+          program.traverse({
+            ArrowFunctionExpression(path) {
+              transformFunction(ctx.opts, path, false);
+            },
+            FunctionExpression(path) {
+              transformFunction(ctx.opts, path, false);
+            },
+          });
+          program.scope.crawl();
+
+          if (ctx.opts.count > 0) {
+            ctx.opts.valid = true;
+            removeUnusedVariables(program);
+          }
+        }
+      },
+    },
+  };
+}