@solidjs/start 1.2.0 → 2.0.0-alpha.0

package/dist/config/fs-routes/index.js

@@ -0,0 +1,109 @@
+import { relative } from "node:path";
+import { fileSystemWatcher } from "./fs-watcher.js";
+import { treeShake } from "./tree-shake.js";
+export const moduleId = "solid-start:routes";
+export function fsRoutes({ routers }) {
+    globalThis.ROUTERS = routers;
+    return [
+        {
+            name: "solid-start-fs-routes",
+            enforce: "pre",
+            resolveId(id) {
+                if (id === moduleId)
+                    return id;
+            },
+            async load(id) {
+                const root = this.environment.config.root;
+                const isBuild = this.environment.mode === "build";
+                if (id !== moduleId)
+                    return;
+                const js = jsCode();
+                const router = globalThis.ROUTERS[this.environment.name];
+                const routes = await router.getRoutes();
+                let routesCode = JSON.stringify(routes ?? [], (k, v) => {
+                    if (v === undefined)
+                        return undefined;
+                    if (k.startsWith("$$")) {
+                        const buildId = `${v.src}?${v.pick.map((p) => `pick=${p}`).join("&")}`;
+                        /**
+                         * @type {{ [key: string]: string }}
+                         */
+                        const refs = {};
+                        for (var pick of v.pick) {
+                            refs[pick] = js.addNamedImport(pick, buildId);
+                        }
+                        return {
+                            require: `_$() => ({ ${Object.entries(refs)
+                                .map(([pick, namedImport]) => `'${pick}': ${namedImport}`)
+                                .join(", ")} })$_`,
+                            // src: isBuild ? relative(root, buildId) : buildId
+                        };
+                    }
+                    else if (k.startsWith("$")) {
+                        const buildId = `${v.src}?${v.pick.map((p) => `pick=${p}`).join("&")}`;
+                        return {
+                            src: relative(root, buildId),
+                            build: isBuild
+                                ? `_$() => import(/* @vite-ignore */ '${buildId}')$_`
+                                : undefined,
+                            import: `_$() => import(/* @vite-ignore */ '${buildId}')$_`
+                        };
+                    }
+                    return v;
+                });
+                routesCode = routesCode.replaceAll('"_$(', "(").replaceAll(')$_"', ")");
+                const code = `
+${js.getImportStatements()}
+export default ${routesCode}`;
+                return code;
+            },
+        },
+        treeShake(),
+        fileSystemWatcher(routers),
+    ];
+}
+function jsCode() {
+    const imports = new Map();
+    let vars = 0;
+    function addImport(p) {
+        let id = imports.get(p);
+        if (!id) {
+            id = {};
+            imports.set(p, id);
+        }
+        const d = "routeData" + vars++;
+        id["default"] = d;
+        return d;
+    }
+    function addNamedImport(name, p) {
+        let id = imports.get(p);
+        if (!id) {
+            id = {};
+            imports.set(p, id);
+        }
+        const d = "routeData" + vars++;
+        id[name] = d;
+        return d;
+    }
+    const getNamedExport = (p) => {
+        const id = imports.get(p);
+        delete id["default"];
+        return Object.keys(id).length > 0
+            ? `{ ${Object.keys(id)
+                .map((k) => `${k} as ${id[k]}`)
+                .join(", ")} }`
+            : "";
+    };
+    const getImportStatements = () => {
+        return `${[...imports.keys()]
+            .map((i) => `import ${imports.get(i).default
+            ? `${imports.get(i).default}${Object.keys(imports.get(i)).length > 1 ? ", " : ""}`
+            : ""} ${getNamedExport(i)} from '${i}';`)
+            .join("\n")}`;
+    };
+    return {
+        addImport,
+        addNamedImport,
+        getImportStatements,
+    };
+}

package/dist/config/fs-routes/router.d.ts

@@ -0,0 +1,37 @@
+import { pathToRegexp } from "path-to-regexp";
+export { pathToRegexp };
+export declare const glob: (path: string) => string[];
+export type FileSystemRouterConfig = {
+    dir: string;
+    extensions: string[];
+};
+type Route = {
+    path: string;
+} & Record<string, any>;
+export declare function cleanPath(src: string, config: FileSystemRouterConfig): string;
+export declare function analyzeModule(src: string): readonly [imports: readonly import("es-module-lexer").ImportSpecifier[], exports: readonly import("es-module-lexer").ExportSpecifier[], facade: boolean, hasModuleSyntax: boolean];
+export declare class BaseFileSystemRouter extends EventTarget {
+    routes: Route[];
+    config: FileSystemRouterConfig;
+    /**
+     *
+     * @param {} config
+     */
+    constructor(config: FileSystemRouterConfig);
+    glob(): string;
+    buildRoutes(): Promise<any[]>;
+    isRoute(src: string): boolean;
+    toPath(src: string): void;
+    toRoute(src: string): Route | undefined;
+    /**
+     * To be attached by vite plugin to the vite dev server
+     */
+    update: undefined;
+    _addRoute(route: Route): void;
+    addRoute(src: string): Promise<void>;
+    reload(route: string): void;
+    updateRoute(src: string): Promise<void>;
+    removeRoute(src: string): void;
+    buildRoutesPromise?: Promise<any[]>;
+    getRoutes(): Promise<Route[]>;
+}

package/dist/config/fs-routes/router.js

@@ -0,0 +1,136 @@
+import { init } from "es-module-lexer";
+import { parse } from "es-module-lexer";
+import esbuild from "esbuild";
+import fg from "fast-glob";
+import fs from "fs";
+import micromatch from "micromatch";
+import { posix } from "path";
+import { pathToRegexp } from "path-to-regexp";
+import { normalize } from "node:path";
+export { pathToRegexp };
+export const glob = (path) => fg.sync(path, { absolute: true });
+export function cleanPath(src, config) {
+    return src
+        .slice(config.dir.length)
+        .replace(new RegExp(`\.(${(config.extensions ?? []).join("|")})$`), "");
+}
+export function analyzeModule(src) {
+    return parse(esbuild.transformSync(fs.readFileSync(src, "utf-8"), {
+        jsx: "transform",
+        format: "esm",
+        loader: "tsx"
+    }).code, src);
+}
+export class BaseFileSystemRouter extends EventTarget {
+    routes;
+    config;
+    /**
+     *
+     * @param {} config
+     */
+    constructor(config) {
+        super();
+        this.routes = [];
+        this.config = config;
+    }
+    glob() {
+        return (posix.join(fg.convertPathToPattern(this.config.dir), "**/*") +
+            `.{${this.config.extensions.join(",")}}`);
+    }
+    async buildRoutes() {
+        await init;
+        for (var src of glob(this.glob())) {
+            await this.addRoute(src);
+        }
+        return this.routes;
+    }
+    isRoute(src) {
+        return Boolean(micromatch(src, this.glob())?.length);
+    }
+    toPath(src) {
+        throw new Error("Not implemented");
+    }
+    toRoute(src) {
+        let path = this.toPath(src);
+        if (path === undefined)
+            return;
+        const [_, exports] = analyzeModule(src);
+        if (!exports.find(e => e.n === "default")) {
+            console.warn("No default export", src);
+        }
+        return {
+            $component: {
+                src: src,
+                pick: ["default", "$css"]
+            },
+            path
+            // filePath: src
+        };
+    }
+    /**
+     * To be attached by vite plugin to the vite dev server
+     */
+    update = undefined;
+    _addRoute(route) {
+        this.routes = this.routes.filter(r => r.path !== route.path);
+        this.routes.push(route);
+    }
+    async addRoute(src) {
+        src = normalize(src);
+        if (this.isRoute(src)) {
+            try {
+                const route = this.toRoute(src);
+                if (route) {
+                    this._addRoute(route);
+                    this.reload(route.path);
+                }
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+    }
+    reload(route) {
+        this.dispatchEvent(new Event("reload", {
+            // @ts-ignore
+            detail: {
+                route
+            }
+        }));
+    }
+    async updateRoute(src) {
+        src = normalize(src);
+        if (this.isRoute(src)) {
+            try {
+                const route = this.toRoute(src);
+                if (route) {
+                    this._addRoute(route);
+                    this.reload(route.path);
+                }
+            }
+            catch (e) {
+                console.error(e);
+            }
+            // this.update?.();
+        }
+    }
+    removeRoute(src) {
+        src = normalize(src);
+        if (this.isRoute(src)) {
+            const path = this.toPath(src);
+            if (path === undefined) {
+                return;
+            }
+            this.routes = this.routes.filter(r => r.path !== path);
+            this.dispatchEvent(new Event("reload", {}));
+        }
+    }
+    buildRoutesPromise;
+    async getRoutes() {
+        if (!this.buildRoutesPromise) {
+            this.buildRoutesPromise = this.buildRoutes();
+        }
+        await this.buildRoutesPromise;
+        return this.routes;
+    }
+}

package/dist/config/fs-routes/tree-shake.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from "vite";
+export declare function treeShake(): Plugin;

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

@@ -0,0 +1,357 @@
+// 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() {
+    let config;
+    const cache = {};
+    let server;
+    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",
+        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/dist/config/index.d.ts

@@ -0,0 +1,10 @@
+import { type PluginOption } from "vite";
+import { type Options as SolidOptions } from "vite-plugin-solid";
+export interface SolidStartOptions {
+    solid?: Partial<SolidOptions>;
+    ssr?: boolean;
+    routeDir?: string;
+    extensions?: string[];
+    middleware?: string;
+}
+export declare function solidStart(options?: SolidStartOptions): Array<PluginOption>;