@solidjs/start 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/config/fs-routes/tree-shake.js

@@ -0,0 +1,305 @@
+// 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 { basename } from "pathe";
+function treeShakeTransform({ types: t }) {
+    function getIdentifier(path) {
+        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) {
+        const b = 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, state) {
+        const ident = getIdentifier(path);
+        if (ident && ident.node && isIdentifierReferenced(ident)) {
+            state.refs.add(ident);
+        }
+    }
+    function markImport(path, state) {
+        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) {
+                            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");
+                                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");
+                                elements.forEach(e => {
+                                    let local;
+                                    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");
+                                    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) => {
+                        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) {
+                        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;
+                                        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() {
+    async function transform(id, code) {
+        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",
+        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;
+                return {
+                    code: transformed.code,
+                    map: transformed.map,
+                };
+            }
+        },
+    };
+}

package/dist/config/index.d.ts

@@ -0,0 +1,25 @@
+import type { PluginOption } from "vite";
+import { type Options as SolidOptions } from "vite-plugin-solid";
+import { type ServerFunctionsOptions } from "../directives/index.ts";
+import { type EnvPluginOptions } from "./env.ts";
+export interface SolidStartOptions {
+    solid?: Partial<SolidOptions>;
+    ssr?: boolean;
+    routeDir?: string;
+    extensions?: string[];
+    middleware?: string;
+    serialization?: {
+        /**
+         * The serialization mode to use for server functions/actions.
+         * The "js" mode uses a custom binary format that is more efficient than JSON, but requires a custom deserializer (with `eval()`) on the client.
+         * A strong CSP should block `eval()` executions, which would prevent the "js" mode from working.
+         * The "json" mode uses JSON for serialization, which is less efficient but can be deserialized with `JSON.parse` on the client.
+         *
+         * @default "json"
+         */
+        mode?: "js" | "json";
+    };
+    env?: EnvPluginOptions;
+    serverFunctions?: Pick<ServerFunctionsOptions, "filter">;
+}
+export declare function solidStart(options?: SolidStartOptions): Array<PluginOption>;

package/dist/config/index.js

@@ -0,0 +1,252 @@
+import { defu } from "defu";
+import { globSync } from "node:fs";
+import { basename, extname, isAbsolute, join } from "node:path";
+import solid from "vite-plugin-solid";
+import { serverFunctionsPlugin } from "../directives/index.js";
+import { boundaryModules } from "./boundary-modules.js";
+import { DEFAULT_EXTENSIONS, VIRTUAL_MODULES, VITE_ENVIRONMENTS } from "./constants.js";
+import { devServer } from "./dev-server.js";
+import { envPlugin } from "./env.js";
+import { SolidStartClientFileRouter, SolidStartServerFileRouter } from "./fs-router.js";
+import { fsRoutes } from "./fs-routes/index.js";
+import lazy from "./lazy.js";
+import { manifest } from "./manifest.js";
+import { parseIdQuery } from "./utils.js";
+const absolute = (path, root) => path ? (isAbsolute(path) ? path : join(root, path)) : path;
+export function solidStart(options) {
+    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 [
+        // TODO (Alexis): check if the comment below is still relevant
+        //
+        // Must be placed after fsRoutes, as treeShake will remove the
+        // server fn exports added in by this plugin
+        serverFunctionsPlugin({
+            manifest: VIRTUAL_MODULES.serverFnManifest,
+            runtime: {
+                server: "@solidjs/start/fns/server",
+                client: "@solidjs/start/fns/client",
+            },
+            filter: options?.serverFunctions?.filter,
+        }),
+        {
+            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(config, env) {
+                const clientInput = [handlers.client];
+                const clientEntryUrl = env.command === "serve" && config.experimental?.bundledDev
+                    ? `assets/${basename(handlers.client, entryExtension)}.js`
+                    : handlers.client;
+                if (env.command === "build") {
+                    const clientRouter = globalThis.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) {
+                                    return `${route.src}?${route.pick.map((p) => `pick=${p}`).join("&")}`;
+                                }
+                                clientInput.push(toRouteId(value));
+                            }
+                        }
+                    }
+                }
+                return {
+                    appType: "custom",
+                    build: { assetsDir: "_build/assets" },
+                    optimizeDeps: {
+                        // Suppress TS errors from Vite 7 types when configuring Vite 8's Rolldown
+                        ...{
+                            rolldownOptions: {
+                                transform: {
+                                    jsx: "react",
+                                },
+                            },
+                        },
+                    },
+                    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: handlers.server,
+                                },
+                                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",
+                                }
+                                : {}),
+                        },
+                        // Depending on the package manager and dependency structure Vite externalizes @solidjs/start
+                        // This makes sure that @solidjs/start goes through the Vite build process
+                        //
+                        // h3 and cookie-es must be bundled as well: if they stay external, the server build
+                        // emits bare imports that nitro later re-resolves from the project root, where package
+                        // managers like yarn may have hoisted the older major versions required by nitropack
+                        // and unstorage (h3 v1 / cookie-es v1) instead of the versions @solidjs/start needs
+                        // (see https://github.com/solidjs/solid-start/issues/2101
+                        // and https://github.com/solidjs/solid-start/issues/2178)
+                        noExternal: ["@solidjs/start", "h3", "cookie-es"],
+                    },
+                    define: {
+                        "import.meta.env.MANIFEST": `globalThis.MANIFEST`,
+                        "import.meta.env.START_SSR": JSON.stringify(start.ssr),
+                        // Use JSON.stringify so backslashes on Windows are escaped and
+                        // esbuild receives a valid JS string literal for the define value
+                        "import.meta.env.START_APP_ENTRY": JSON.stringify(appEntryPath),
+                        "import.meta.env.START_CLIENT_ENTRY": JSON.stringify(handlers.client),
+                        "import.meta.env.START_CLIENT_ENTRY_URL": JSON.stringify(clientEntryUrl),
+                        "import.meta.env.START_DEV_OVERLAY": JSON.stringify(start.devOverlay),
+                        "import.meta.env.SEROVAL_MODE": JSON.stringify(start.serialization?.mode || "json"),
+                    },
+                    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(),
+        envPlugin(options?.env),
+        boundaryModules(),
+        {
+            name: "solid-start:boundary-modules",
+            enforce: "pre",
+            resolveId(id, importer, { ssr }) {
+                if (id === "server-only") {
+                    if (!ssr)
+                        this.error(`Attempt to import 'server-only' in a client module: ${importer}`);
+                }
+                else if (id === "client-only") {
+                    if (ssr)
+                        this.error(`Attempt to import 'client-only' in a server module: ${importer}`);
+                }
+                else {
+                    return null;
+                }
+                return "\0solid-start:boundary-modules:id";
+            },
+            load(id) {
+                if (id === "\0solid-start:boundary-modules:id")
+                    return "export {}";
+            },
+        },
+        {
+            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;
+                globalThis.START_CLIENT_OUT_DIR = options.dir;
+            },
+        },
+        devServer(handlers.server),
+        solid({
+            ...start.solid,
+            ssr: true,
+            extensions: extensions.map(ext => `.${ext}`),
+        }),
+    ];
+}

package/dist/config/lazy.d.ts

@@ -0,0 +1,3 @@
+import type { PluginOption } from "vite";
+declare const lazy: () => PluginOption;
+export default lazy;