@solidjs/start 1.2.1 → 2.0.0-alpha.1

package/src/config/fs-routes/tree-shake.ts

@@ -0,0 +1,371 @@
+// All credit for this work goes to the amazing Next.js team.
+// https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/plugins/next-ssg-transform.ts
+// This is adapted to work with routeData functions. It can be run in two modes, one which preserves the routeData and the Component in the same file, and one which creates a
+
+import type * as Babel from "@babel/core";
+import type { NodePath, PluginObj, PluginPass } from "@babel/core";
+import type { Binding } from "@babel/traverse";
+import { basename } from "pathe";
+import type { Plugin, ResolvedConfig, ViteDevServer } from "vite";
+
+type State = Omit<PluginPass, "opts"> & {
+  opts: { pick: string[] };
+  refs: Set<any>;
+  done: boolean;
+};
+
+function treeShakeTransform({ types: t }: typeof Babel): PluginObj<State> {
+  function getIdentifier(path: any) {
+    const parentPath = path.parentPath;
+    if (parentPath.type === "VariableDeclarator") {
+      const pp = parentPath;
+      const name = pp.get("id");
+      return name.node.type === "Identifier" ? name : null;
+    }
+    if (parentPath.type === "AssignmentExpression") {
+      const pp = parentPath;
+      const name = pp.get("left");
+      return name.node.type === "Identifier" ? name : null;
+    }
+    if (path.node.type === "ArrowFunctionExpression") {
+      return null;
+    }
+    return path.node.id && path.node.id.type === "Identifier" ? path.get("id") : null;
+  }
+
+  function isIdentifierReferenced(ident: any) {
+    const b: Binding | undefined = ident.scope.getBinding(ident.node.name);
+    if (b?.referenced) {
+      if (b.path.type === "FunctionDeclaration") {
+        return !b.constantViolations
+          .concat(b.referencePaths)
+          .every(ref => ref.findParent(p => p === b.path));
+      }
+      return true;
+    }
+    return false;
+  }
+  function markFunction(path: any, state: any) {
+    const ident = getIdentifier(path);
+    if (ident && ident.node && isIdentifierReferenced(ident)) {
+      state.refs.add(ident);
+    }
+  }
+  function markImport(path: any, state: any) {
+    const local = path.get("local");
+    if (isIdentifierReferenced(local)) {
+      state.refs.add(local);
+    }
+  }
+
+  return {
+    visitor: {
+      Program: {
+        enter(path, state) {
+          state.refs = new Set();
+          state.done = false;
+          path.traverse(
+            {
+              VariableDeclarator(variablePath, variableState: any) {
+                if (variablePath.node.id.type === "Identifier") {
+                  const local = variablePath.get("id");
+                  if (isIdentifierReferenced(local)) {
+                    variableState.refs.add(local);
+                  }
+                } else if (variablePath.node.id.type === "ObjectPattern") {
+                  const pattern = variablePath.get("id");
+                  const properties = pattern.get("properties") as Array<NodePath>;
+                  properties.forEach(p => {
+                    const local = p.get(
+                      p.node.type === "ObjectProperty"
+                        ? "value"
+                        : p.node.type === "RestElement"
+                          ? "argument"
+                          : (() => {
+                              throw new Error("invariant");
+                            })(),
+                    );
+                    if (isIdentifierReferenced(local)) {
+                      variableState.refs.add(local);
+                    }
+                  });
+                } else if (variablePath.node.id.type === "ArrayPattern") {
+                  const pattern = variablePath.get("id");
+                  const elements = pattern.get("elements") as Array<NodePath>;
+                  elements.forEach(e => {
+                    let local: NodePath<any>;
+                    if (e.node && e.node.type === "Identifier") {
+                      local = e;
+                    } else if (e.node && e.node.type === "RestElement") {
+                      local = e.get("argument");
+                    } else {
+                      return;
+                    }
+                    if (isIdentifierReferenced(local)) {
+                      variableState.refs.add(local);
+                    }
+                  });
+                }
+              },
+              ExportDefaultDeclaration(exportNamedPath) {
+                // if opts.keep is true, we don't remove the routeData export
+                if (state.opts.pick && !state.opts.pick.includes("default")) {
+                  exportNamedPath.remove();
+                }
+              },
+              ExportNamedDeclaration(exportNamedPath) {
+                // if opts.keep is false, we don't remove the routeData export
+                if (!state.opts.pick) {
+                  return;
+                }
+                const specifiers = exportNamedPath.get("specifiers");
+                if (specifiers.length) {
+                  specifiers.forEach(s => {
+                    if (
+                      t.isIdentifier(s.node.exported)
+                        ? s.node.exported.name
+                        : state.opts.pick.includes(s.node.exported.value)
+                    ) {
+                      s.remove();
+                    }
+                  });
+                  if (exportNamedPath.node.specifiers.length < 1) {
+                    exportNamedPath.remove();
+                  }
+                  return;
+                }
+                const decl = exportNamedPath.get("declaration");
+                if (decl == null || decl.node == null) {
+                  return;
+                }
+                switch (decl.node.type) {
+                  case "FunctionDeclaration": {
+                    const name = decl.node.id?.name;
+                    if (name && state.opts.pick && !state.opts.pick.includes(name)) {
+                      exportNamedPath.remove();
+                    }
+                    break;
+                  }
+                  case "VariableDeclaration": {
+                    const inner = decl.get("declarations") as Array<NodePath<any>>;
+                    inner.forEach(d => {
+                      if (d.node.id.type !== "Identifier") {
+                        return;
+                      }
+                      const name = d.node.id.name;
+                      if (state.opts.pick && !state.opts.pick.includes(name)) {
+                        d.remove();
+                      }
+                    });
+                    break;
+                  }
+                  default: {
+                    break;
+                  }
+                }
+              },
+              FunctionDeclaration: markFunction,
+              FunctionExpression: markFunction,
+              ArrowFunctionExpression: markFunction,
+              ImportSpecifier: markImport,
+              ImportDefaultSpecifier: markImport,
+              ImportNamespaceSpecifier: markImport,
+              ImportDeclaration: (path, state) => {
+                if (
+                  path.node.source.value.endsWith(".css") &&
+                  state.opts.pick &&
+                  !state.opts.pick.includes("$css")
+                ) {
+                  path.remove();
+                }
+              },
+            },
+            state,
+          );
+
+          const refs = state.refs;
+          let count = 0;
+          const sweepFunction = (sweepPath: any) => {
+            const ident = getIdentifier(sweepPath);
+            if (ident && ident.node && refs.has(ident) && !isIdentifierReferenced(ident)) {
+              ++count;
+              if (
+                t.isAssignmentExpression(sweepPath.parentPath) ||
+                t.isVariableDeclarator(sweepPath.parentPath)
+              ) {
+                sweepPath.parentPath.remove();
+              } else {
+                sweepPath.remove();
+              }
+            }
+          };
+          function sweepImport(sweepPath: any) {
+            const local = sweepPath.get("local");
+            if (refs.has(local) && !isIdentifierReferenced(local)) {
+              ++count;
+              sweepPath.remove();
+              if (sweepPath.parent.specifiers.length === 0) {
+                sweepPath.parentPath.remove();
+              }
+            }
+          }
+          do {
+            path.scope.crawl();
+            count = 0;
+            path.traverse({
+              VariableDeclarator(variablePath) {
+                if (variablePath.node.id.type === "Identifier") {
+                  const local = variablePath.get("id");
+                  if (refs.has(local) && !isIdentifierReferenced(local)) {
+                    ++count;
+                    variablePath.remove();
+                  }
+                } else if (variablePath.node.id.type === "ObjectPattern") {
+                  const pattern = variablePath.get("id");
+                  const beforeCount = count;
+                  const properties = pattern.get("properties");
+                  properties.forEach(p => {
+                    const local = p.get(
+                      p.node.type === "ObjectProperty"
+                        ? "value"
+                        : p.node.type === "RestElement"
+                          ? "argument"
+                          : (() => {
+                              throw new Error("invariant");
+                            })(),
+                    );
+                    if (refs.has(local) && !isIdentifierReferenced(local)) {
+                      ++count;
+                      p.remove();
+                    }
+                  });
+                  if (beforeCount !== count && pattern.get("properties").length < 1) {
+                    variablePath.remove();
+                  }
+                } else if (variablePath.node.id.type === "ArrayPattern") {
+                  const pattern = variablePath.get("id");
+                  const beforeCount = count;
+                  const elements = pattern.get("elements");
+                  elements.forEach(e => {
+                    let local: NodePath<any> | undefined;
+                    if (e.node && e.node.type === "Identifier") {
+                      local = e;
+                    } else if (e.node && e.node.type === "RestElement") {
+                      local = e.get("argument");
+                    } else {
+                      return;
+                    }
+                    if (refs.has(local) && !isIdentifierReferenced(local)) {
+                      ++count;
+                      e.remove();
+                    }
+                  });
+                  if (beforeCount !== count && pattern.get("elements").length < 1) {
+                    variablePath.remove();
+                  }
+                }
+              },
+              FunctionDeclaration: sweepFunction,
+              FunctionExpression: sweepFunction,
+              ArrowFunctionExpression: sweepFunction,
+              ImportSpecifier: sweepImport,
+              ImportDefaultSpecifier: sweepImport,
+              ImportNamespaceSpecifier: sweepImport,
+            });
+          } while (count);
+        },
+      },
+    },
+  };
+}
+
+export function treeShake(): Plugin {
+  let config: ResolvedConfig;
+  const cache: Record<string, any> = {};
+  let server: ViteDevServer;
+
+  async function transform(id: string, code: string) {
+    const [path, queryString] = id.split("?");
+    const query = new URLSearchParams(queryString);
+    if (query.has("pick")) {
+      const babel = await import("@babel/core");
+      const transformed = await babel.transformAsync(code, {
+        plugins: [[treeShakeTransform, { pick: query.getAll("pick") }]],
+        parserOpts: {
+          plugins: ["jsx", "typescript"],
+        },
+        filename: basename(id),
+        ast: false,
+        sourceMaps: true,
+        configFile: false,
+        babelrc: false,
+        sourceFileName: id,
+      });
+
+      return transformed;
+    }
+  }
+  return {
+    name: "tree-shake",
+    enforce: "pre",
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    configureServer(s) {
+      server = s;
+    },
+    async handleHotUpdate(ctx) {
+      if (cache[ctx.file]) {
+        const mods = [];
+        const newCode = await ctx.read();
+        for (const [id, code] of Object.entries(cache[ctx.file])) {
+          const transformed = await transform(id, newCode);
+          if (!transformed) continue;
+
+          const { code: transformedCode } = transformed;
+
+          if (transformedCode !== code) {
+            const mod = server.moduleGraph.getModuleById(id);
+            if (mod) mods.push(mod);
+          }
+
+          cache[ctx.file] ??= {};
+          cache[ctx.file][id] = transformedCode;
+          // server.moduleGraph.setModuleSource(id, code);
+        }
+
+        return mods;
+      }
+      // 	const mods = [];
+      // 	[...server.moduleGraph.urlToModuleMap.entries()].forEach(([url, m]) => {
+      // 		if (m.file === ctx.file && m.id.includes("pick=")) {
+      // 			if (!m.id.includes("pick=loader")) {
+      // 				mods.push(m);
+      // 			}
+      // 		}
+      // 	});
+      // 	return mods;
+      // 	// this.router.updateRoute(ctx.path);
+      // }
+    },
+    async transform(code, id) {
+      const [path, queryString] = id.split("?");
+      if (!path) return;
+      const query = new URLSearchParams(queryString);
+      const ext = path.split(".").pop();
+      if (!ext) return;
+      if (query.has("pick") && ["js", "jsx", "ts", "tsx"].includes(ext)) {
+        const transformed = await transform(id, code);
+        if (!transformed?.code) return;
+
+        cache[path] ??= {};
+        cache[path][id] = transformed.code;
+
+        return {
+          code: transformed.code,
+          map: transformed.map,
+        };
+      }
+    },
+  };
+}

package/src/config/index.ts

@@ -0,0 +1,233 @@
+import { TanStackServerFnPlugin } from "@tanstack/server-functions-plugin";
+import { defu } from "defu";
+import { globSync } from "node:fs";
+import { extname, isAbsolute, join, normalize } from "node:path";
+import { fileURLToPath } from "node:url";
+import { type PluginOption } from "vite";
+import solid, { type Options as SolidOptions } from "vite-plugin-solid";
+
+import { DEFAULT_EXTENSIONS, VIRTUAL_MODULES, VITE_ENVIRONMENTS } from "./constants.ts";
+import { devServer } from "./dev-server.ts";
+import { SolidStartClientFileRouter, SolidStartServerFileRouter } from "./fs-router.ts";
+import { fsRoutes } from "./fs-routes/index.ts";
+import type { BaseFileSystemRouter } from "./fs-routes/router.ts";
+import lazy from "./lazy.ts";
+import { manifest } from "./manifest.ts";
+import { parseIdQuery } from "./utils.ts";
+
+export interface SolidStartOptions {
+  solid?: Partial<SolidOptions>;
+  ssr?: boolean;
+  routeDir?: string;
+  extensions?: string[];
+  middleware?: string;
+}
+
+const absolute = (path: string, root: string) =>
+  path ? (isAbsolute(path) ? path : join(root, path)) : path;
+
+export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
+  const start = defu(options ?? {}, {
+    appRoot: "./src",
+    routeDir: "./routes",
+    ssr: true,
+    devOverlay: true,
+    experimental: {
+      islands: false,
+    },
+    solid: {},
+    extensions: [],
+  });
+  const extensions = [...DEFAULT_EXTENSIONS, ...(start.extensions || [])];
+  const routeDir = join(start.appRoot, start.routeDir);
+  const root = process.cwd();
+  const appEntryPath = globSync(join(root, start.appRoot, "app.{j,t}sx"))[0];
+  if (!appEntryPath) {
+    throw new Error(`Could not find an app jsx/tsx entry in ${start.appRoot}.`);
+  }
+  const entryExtension = extname(appEntryPath);
+  const handlers = {
+    client: `${start.appRoot}/entry-client${entryExtension}`,
+    server: `${start.appRoot}/entry-server${entryExtension}`,
+  };
+  return [
+    {
+      name: "solid-start:config",
+      enforce: "pre",
+      configEnvironment(name) {
+        return {
+          resolve: {
+            // remove when https://github.com/solidjs/vite-plugin-solid/pull/228 is released
+            externalConditions: ["solid", "node"],
+          },
+        };
+      },
+      async config(_, env) {
+        const clientInput = [handlers.client];
+        if (env.command === "build") {
+          const clientRouter: BaseFileSystemRouter = (globalThis as any).ROUTERS.client;
+          for (const route of await clientRouter.getRoutes()) {
+            for (const [key, value] of Object.entries(route)) {
+              if (value && key.startsWith("$") && !key.startsWith("$$")) {
+                function toRouteId(route: any) {
+                  return `${route.src}?${route.pick.map((p: string) => `pick=${p}`).join("&")}`;
+                }
+                clientInput.push(toRouteId(value));
+              }
+            }
+          }
+        }
+        return {
+          appType: "custom",
+          build: { assetsDir: "_build/assets" },
+          environments: {
+            [VITE_ENVIRONMENTS.client]: {
+              consumer: "client",
+              build: {
+                write: true,
+                manifest: true,
+                outDir: "dist/client",
+                rollupOptions: {
+                  input: clientInput,
+                  treeshake: true,
+                  preserveEntrySignatures: "exports-only",
+                },
+              },
+            },
+            [VITE_ENVIRONMENTS.server]: {
+              consumer: "server",
+              build: {
+                ssr: true,
+                write: true,
+                manifest: true,
+                copyPublicDir: false,
+                rollupOptions: {
+                  input: "~/entry-server.tsx",
+                },
+                outDir: "dist/server",
+                commonjsOptions: {
+                  include: [/node_modules/],
+                },
+              },
+            },
+          },
+          resolve: {
+            alias: {
+              "@solidjs/start/server/entry": handlers.server,
+              "~": join(process.cwd(), start.appRoot),
+              ...(!start.ssr
+                ? {
+                    "@solidjs/start/server": "@solidjs/start/server/spa",
+                    "@solidjs/start/client": "@solidjs/start/client/spa",
+                  }
+                : {}),
+            },
+          },
+          define: {
+            "import.meta.env.MANIFEST": `globalThis.MANIFEST`,
+            "import.meta.env.START_SSR": JSON.stringify(start.ssr),
+            "import.meta.env.START_APP_ENTRY": `"${appEntryPath}"`,
+            "import.meta.env.START_CLIENT_ENTRY": `"${handlers.client}"`,
+            "import.meta.env.START_DEV_OVERLAY": JSON.stringify(start.devOverlay),
+          },
+          builder: {
+            sharedPlugins: true,
+            async buildApp(builder) {
+              const client = builder.environments[VITE_ENVIRONMENTS.client];
+              const server = builder.environments[VITE_ENVIRONMENTS.server];
+
+              if (!client) throw new Error("Client environment not found");
+              if (!server) throw new Error("SSR environment not found");
+
+              if (!client.isBuilt) await builder.build(client);
+              if (!server.isBuilt) await builder.build(server);
+            },
+          },
+        };
+      },
+    },
+    manifest(start),
+    fsRoutes({
+      routers: {
+        client: new SolidStartClientFileRouter({
+          dir: absolute(routeDir, root),
+          extensions,
+        }),
+        ssr: new SolidStartServerFileRouter({
+          dir: absolute(routeDir, root),
+          extensions,
+          dataOnly: !start.ssr,
+        }),
+      },
+    }),
+    lazy(),
+    // 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 "${normalize(
+              fileURLToPath(new URL("../server/server-runtime", import.meta.url)),
+            )}"`,
+          replacer: opts => `createServerReference('${opts.functionId}')`,
+        },
+        {
+          envConsumer: "server",
+          envName: VITE_ENVIRONMENTS.server,
+          getRuntimeCode: () =>
+            `import { createServerReference } from '${normalize(
+              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 '${normalize(
+            fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url)),
+          )}'`,
+        replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`,
+      },
+    }),
+    {
+      name: "solid-start:virtual-modules",
+      async resolveId(id) {
+        const { filename, query } = parseIdQuery(id);
+
+        let base;
+        if (filename === VIRTUAL_MODULES.clientEntry) base = handlers.client;
+        if (filename === VIRTUAL_MODULES.serverEntry) base = handlers.server;
+        if (filename === VIRTUAL_MODULES.app) base = appEntryPath;
+
+        if (base) {
+          let id = (await this.resolve(base))?.id;
+          if (!id) return;
+
+          if (query.size > 0) id += `?${query.toString()}`;
+          return id;
+        }
+      },
+    },
+    {
+      name: "solid-start:capture-client-bundle",
+      enforce: "post",
+      generateBundle(_options, bundle) {
+        globalThis.START_CLIENT_BUNDLE = bundle;
+      },
+    },
+    devServer(),
+    solid({
+      ...start.solid,
+      ssr: true,
+      extensions: extensions.map(ext => `.${ext}`),
+    }),
+  ];
+}

package/src/config/lazy.ts

@@ -0,0 +1,100 @@
+import type { PluginItem } from "@babel/core";
+import babel from "@babel/core";
+import * as t from "@babel/types";
+import { sep as osSep } from "path";
+import { basename, relative, sep } from "path/posix";
+import type { PluginOption } from "vite";
+import { VITE_ENVIRONMENTS } from "./constants.ts";
+
+const idTransform = (id: string): PluginItem => {
+  return {
+    visitor: {
+      Program(path) {
+        path.node.body.unshift(
+          t.exportNamedDeclaration(
+            t.variableDeclaration("const", [
+              t.variableDeclarator(t.identifier("id$$"), t.stringLiteral(id)),
+            ]),
+          ),
+        );
+      },
+    },
+  };
+};
+
+const importTransform = (): PluginItem => {
+  return {
+    visitor: {
+      ImportDeclaration(path) {
+        if (path.node.source.value !== "solid-js") return;
+        path.traverse({
+          ImportSpecifier(subPath) {
+            if (subPath.node.local.name !== "lazy") return;
+            subPath.remove();
+            path.insertAfter(
+              t.importDeclaration(
+                [t.importSpecifier(t.identifier("lazy"), t.identifier("lazy"))],
+                t.stringLiteral("@solidjs/start/server"),
+              ),
+            );
+          },
+        });
+      },
+    },
+  };
+};
+
+const fileEndingRegex = /(ts|js)x(\?.*)?$/;
+
+const lazy = (): PluginOption => {
+  const cwd = process.cwd().replaceAll(osSep, sep);
+  return {
+    name: "solid-lazy-css",
+    enforce: "pre",
+    applyToEnvironment(env) {
+      return env.name === VITE_ENVIRONMENTS.server;
+    },
+    async transform(src, id) {
+      if (!id.match(fileEndingRegex)) return;
+
+      // The transformed files either import "lazy" or css files
+      // Therefore we skip, if the src doesn't have any import
+      if (src.indexOf("import") === -1) return;
+
+      const plugins: PluginItem[] = [];
+
+      const hasDefaultExport = src.indexOf("export default") !== -1;
+      if (hasDefaultExport) {
+        const localId = relative(cwd, id);
+        plugins.push(idTransform(localId));
+      }
+
+      const hasLazy = src.indexOf("lazy(") !== -1;
+      if (hasLazy) plugins.push(importTransform());
+
+      if (!plugins.length) {
+        return;
+      }
+
+      const transformed = await babel.transformAsync(src, {
+        plugins,
+        parserOpts: {
+          plugins: ["jsx", "typescript"],
+        },
+        filename: basename(id),
+        ast: false,
+        sourceMaps: true,
+        configFile: false,
+        babelrc: false,
+        sourceFileName: id,
+      });
+
+      if (!transformed?.code) return;
+
+      const { code, map } = transformed;
+      return { code, map };
+    },
+  };
+};
+
+export default lazy;