@solidjs/start 1.2.0 → 2.0.0-alpha.0

package/README.md

@@ -1,12 +1,92 @@
-# Solid Start
+<div align="center">
 
-This is the SolidStart framework and CLI.
+[![Banner](https://assets.solidjs.com/banner?project=Start&type=core)](https://github.com/solidjs)
 
-The quickest way to get started:
+[![Version](https://img.shields.io/npm/v/@solidjs/start.svg?style=for-the-badge&color=blue&logo=npm)](https://npmjs.com/package/@solidjs/start)
+[![Downloads](https://img.shields.io/npm/dm/@solidjs/start.svg?style=for-the-badge&color=green&logo=npm)](https://npmjs.com/package/@solidjs/start)
+[![Stars](https://img.shields.io/github/stars/solidjs/solid-start?style=for-the-badge&color=yellow&logo=github)](https://github.com/solidjs/solid-start)
+[![Discord](https://img.shields.io/discord/722131463138705510?label=join&style=for-the-badge&color=5865F2&logo=discord&logoColor=white)](https://discord.com/invite/solidjs)
+[![Reddit](https://img.shields.io/reddit/subreddit-subscribers/solidjs?label=join&style=for-the-badge&color=FF4500&logo=reddit&logoColor=white)](https://reddit.com/r/solidjs)
+
+</div>
+
+**SolidStart** brings fine-grained reactivity fullstack with full flexibility. Built with features like unified rendering and isomorphic code execution, SolidStart enables you to create highly performant and scalable web applications.
+
+Explore the official [documentation](https://docs.solidjs.com/solid-start) for detailed guides and examples.
+
+## Core Features
+
+- **All Rendering Modes**:
+  - Server-Side Rendering _(SSR)_ with sync, async, and stream [modes](https://docs.solidjs.com/solid-start/reference/server/create-handler)
+  - Client-Side Rendering _(CSR)_ with the possibility of being page/component [scoped](https://docs.solidjs.com/solid-start/reference/client/client-only)
+  - Static Site Generation _(SSG)_ with route [pre-rendering](https://docs.solidjs.com/solid-start/building-your-application/route-prerendering)
+- **TypeScript**: Full integration for robust, type-safe development
+- **File-Based Routing**: Intuitive routing based on your project’s file structure
+- **API Routes**: Dedicated server-side endpoints for seamless API development
+- **Streaming**: Efficient data rendering for faster page loads
+- **Build Optimizations**: Code splitting, tree shaking, and dead code elimination
+- **Deployment Adapters**: Easily deploy to platforms like Vercel, Netlify, Cloudflare, and more
+
+## Getting Started
+
+### Installation
+
+Create a SolidStart template project with your preferred package manager
+
+```bash
+# using npm
+npm create solid@latest -- -s
+```
 
 ```bash
-npm init solid@latest my-app
-cd my-app
-npm install
-npm run dev
-```
+# using pnpm
+pnpm create solid@latest -s
+```
+
+```bash
+# using bun
+bun create solid@latest --s
+```
+
+### Project Structure
+
+- `public/`: Static assets like icons, images, and fonts
+- `src/`: Core application (aliased to `~/`)
+  - `routes/`: File-based routing for pages and APIs
+  - `app.tsx`: Root component of your application
+  - `entry-client.tsx`: Handles client-side hydration
+  - `entry-server.tsx`: Manages server-side request handling
+- **Configuration Files**: `app.config.ts`, `package.json`, and more
+
+Learn more about [routing](https://docs.solidjs.com/solid-start/building-your-application/routing)
+
+## Adapters
+
+Configure adapters in `app.config.ts` to deploy to platforms like Vercel, Netlify, Cloudflare, and others
+
+```ts
+import { defineConfig } from "@solidjs/start/config";
+
+export default defineConfig({
+  ssr: true, // false for client-side rendering only
+  server: { preset: "netlify" },
+});
+```
+
+Presets also include runtimes like Node.js, Bun, or Deno. For example, a preset like `node-server` enables hosting on your server.  
+Learn more about [`defineConfig`](https://docs.solidjs.com/solid-start/reference/config/define-config)
+
+## Building
+
+Generate production-ready bundles
+
+```bash
+npm run build # or pnpm build or bun build
+```
+
+After the build completes, you’ll be guided through deployment for your specific preset.
+
+## Contributing
+
+- For contributing to the codebase, check [CONTRIBUTING.md](https://github.com/solidjs/solid-start/blob/main/CONTRIBUTING.md)
+- For creating a new template, please head over to [solidjs/templates](https://github.com/solidjs/templates)

package/dist/client/StartClient.d.ts

@@ -1,5 +1,4 @@
 import type { JSX } from "solid-js";
-import "./mount";
 /**
  *
  * Read more: https://docs.solidjs.com/solid-start/reference/client/start-client

package/dist/client/StartClient.jsx

@@ -1,8 +1,6 @@
 // @refresh skip
-// @ts-ignore
-import App from "#start/app";
-import { ErrorBoundary } from "../shared/ErrorBoundary";
-import "./mount";
+import App from "solid-start:app";
+import { ErrorBoundary } from "../shared/ErrorBoundary.jsx";
 function Dummy(props) {
     return props.children;
 }

package/dist/client/index.d.ts

@@ -1,3 +1,2 @@
-import "vinxi/client";
-export { StartClient, StartClientTanstack } from "./StartClient";
-export { mount } from "./mount";
+export { mount } from "./mount.ts";
+export { StartClient, StartClientTanstack } from "./StartClient.tsx";

package/dist/client/index.jsx

@@ -1,4 +1,2 @@
-// @refresh skip
-import "vinxi/client";
-export { StartClient, StartClientTanstack } from "./StartClient";
-export { mount } from "./mount";
+export { mount } from "./mount.js";
+export { StartClient, StartClientTanstack } from "./StartClient.jsx";

package/dist/client/mount.js

@@ -1,3 +1,11 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
 import { createStore } from "solid-js/store";
 import { createComponent, getHydrationKey, getOwner, hydrate } from "solid-js/web";
 /**
@@ -19,10 +27,10 @@ export function mount(fn, el) {
                     }
                 }
             }
-            let mod = await import(
+            let mod = await import(__rewriteRelativeImportExtension(
             /* @vite-ignore */
             import.meta.env.MANIFEST["client"].chunks[el.dataset.id.split("#")[0]].output
-                .path);
+                .path, true));
             if (!mod || !el.dataset.hk)
                 return;
             let Component = mod[el.dataset.id.split("#")[1]];

package/dist/client/spa/index.d.ts

@@ -1,5 +1,4 @@
 import type { JSX } from "solid-js";
 import { type MountableElement } from "solid-js/web";
-import "vinxi/client";
 export declare function mount(fn: () => JSX.Element, el: MountableElement): void;
-export { StartClient, StartClientTanstack } from "../StartClient";
+export { StartClient } from "../StartClient.tsx";

package/dist/client/spa/index.jsx

@@ -1,6 +1,5 @@
 import { render } from "solid-js/web";
-import "vinxi/client";
 export function mount(fn, el) {
     render(fn, el);
 }
-export { StartClient, StartClientTanstack } from "../StartClient";
+export { StartClient } from "../StartClient.jsx";

package/dist/config/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const DEFAULT_EXTENSIONS: string[];
+export declare const CLIENT_BASE_PATH = "_build";
+export declare const VIRTUAL_MODULES: {
+    readonly clientViteManifest: "solid-start:client-vite-manifest";
+    readonly getClientManifest: "solid-start:get-client-manifest";
+    readonly getManifest: "solid-start:get-manifest";
+    readonly middleware: "solid-start:middleware";
+    readonly serverFnManifest: "solidstart:server-fn-manifest";
+    readonly clientEntry: "solid-start:client-entry";
+    readonly serverEntry: "solid-start:server-entry";
+    readonly app: "solid-start:app";
+};
+export declare const VITE_ENVIRONMENTS: {
+    client: string;
+    server: string;
+};

package/dist/config/constants.js

@@ -0,0 +1,16 @@
+export const DEFAULT_EXTENSIONS = ["js", "jsx", "ts", "tsx"];
+export const CLIENT_BASE_PATH = "_build";
+export const VIRTUAL_MODULES = {
+    clientViteManifest: "solid-start:client-vite-manifest",
+    getClientManifest: "solid-start:get-client-manifest",
+    getManifest: "solid-start:get-manifest",
+    middleware: "solid-start:middleware",
+    serverFnManifest: "solidstart:server-fn-manifest",
+    clientEntry: "solid-start:client-entry",
+    serverEntry: "solid-start:server-entry",
+    app: "solid-start:app"
+};
+export const VITE_ENVIRONMENTS = {
+    client: "client",
+    server: "ssr"
+};

package/dist/config/dev-server.d.ts

@@ -0,0 +1,2 @@
+import { type PluginOption } from "vite";
+export declare function devServer(): Array<PluginOption>;

package/dist/config/dev-server.js

@@ -0,0 +1,108 @@
+import { NodeRequest, sendNodeResponse } from "srvx/node";
+import { isRunnableDevEnvironment, } from "vite";
+import { VITE_ENVIRONMENTS } from "./constants.js";
+export function devServer() {
+    return [
+        {
+            name: "solid-start-dev-server",
+            configureServer(viteDevServer) {
+                globalThis.VITE_DEV_SERVER = viteDevServer;
+                return async () => {
+                    if (viteDevServer.config.server.middlewareMode)
+                        return;
+                    const serverEnv = viteDevServer.environments[VITE_ENVIRONMENTS.server];
+                    if (!serverEnv)
+                        throw new Error("Server environment not found");
+                    if (
+                    // do not check via `isFetchableDevEnvironment` since nitro does implement the `FetchableDevEnvironment` interface but not via inheritance (which this helper checks)
+                    "dispatchFetch" in serverEnv)
+                        return;
+                    // another plugin is controlling the dev server
+                    if (!isRunnableDevEnvironment(serverEnv)) {
+                        return;
+                    }
+                    globalThis.USING_SOLID_START_DEV_SERVER = true;
+                    removeHtmlMiddlewares(viteDevServer);
+                    viteDevServer.middlewares.use(async (req, res) => {
+                        if (req.originalUrl) {
+                            req.url = req.originalUrl;
+                        }
+                        const webReq = new NodeRequest({ req, res });
+                        try {
+                            const serverEntry = await serverEnv.runner.import("./src/entry-server.tsx");
+                            const webRes = await serverEntry.default.fetch(webReq);
+                            return sendNodeResponse(res, webRes);
+                        }
+                        catch (e) {
+                            console.error(e);
+                            viteDevServer.ssrFixStacktrace(e);
+                            if (webReq.headers.get("content-type")?.includes("application/json")) {
+                                return sendNodeResponse(res, Response.json({
+                                    status: 500,
+                                    error: "Internal Server Error",
+                                    message: "An unexpected error occurred. Please try again later.",
+                                    timestamp: new Date().toISOString(),
+                                }, {
+                                    status: 500,
+                                    headers: {
+                                        "Content-Type": "application/json",
+                                    },
+                                }));
+                            }
+                            return sendNodeResponse(res, new Response(`
+                    <!DOCTYPE html>
+                    <html lang="en">
+                      <head>
+                        <meta charset="UTF-8" />
+                        <title>Error</title>
+                        <script type="module">
+                          import { ErrorOverlay } from '/@vite/client'
+                          document.body.appendChild(new ErrorOverlay(${JSON.stringify(prepareError(req, e)).replace(/</g, "\\u003c")}))
+                        </script>
+                      </head>
+                      <body>
+                      </body>
+                    </html>
+                  `, {
+                                status: 500,
+                                headers: { "Content-Type": "text/html" },
+                            }));
+                        }
+                    });
+                };
+            },
+        },
+    ];
+}
+/**
+ * Removes Vite internal middleware
+ *
+ * @param server
+ */
+function removeHtmlMiddlewares(server) {
+    const html_middlewares = [
+        "viteIndexHtmlMiddleware",
+        "vite404Middleware",
+        "viteSpaFallbackMiddleware",
+    ];
+    for (let i = server.middlewares.stack.length - 1; i > 0; i--) {
+        if (html_middlewares.includes(
+        // @ts-expect-error
+        server.middlewares.stack[i].handle.name)) {
+            server.middlewares.stack.splice(i, 1);
+        }
+    }
+}
+/**
+ * Formats error for SSR message in error overlay
+ * @param req
+ * @param error
+ * @returns
+ */
+function prepareError(req, error) {
+    const e = error;
+    return {
+        message: `An error occured while server rendering ${req.url}:\n\n\t${typeof e === "string" ? e : e.message} `,
+        stack: typeof e === "string" ? "" : e.stack,
+    };
+}

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

@@ -0,0 +1,37 @@
+import { BaseFileSystemRouter, type FileSystemRouterConfig } from "./fs-routes/router.ts";
+export declare class SolidStartClientFileRouter extends BaseFileSystemRouter {
+    toPath(src: string): string;
+    toRoute(src: string): {
+        page: boolean;
+        $component: {
+            src: string;
+            pick: string[];
+        };
+        $$route: {
+            src: string;
+            pick: string[];
+        } | undefined;
+        path: string;
+    } | undefined;
+}
+export declare class SolidStartServerFileRouter extends BaseFileSystemRouter {
+    config: FileSystemRouterConfig & {
+        dataOnly?: boolean;
+    };
+    constructor(config: FileSystemRouterConfig & {
+        dataOnly?: boolean;
+    });
+    toPath(src: string): string;
+    toRoute(src: string): {
+        path: string;
+        page: boolean;
+        $component: {
+            src: string;
+            pick: string[];
+        } | undefined;
+        $$route: {
+            src: string;
+            pick: string[];
+        } | undefined;
+    } | undefined;
+}

package/dist/config/fs-router.js

@@ -0,0 +1,153 @@
+import { analyzeModule, BaseFileSystemRouter, cleanPath, } from "./fs-routes/router.js";
+export class SolidStartClientFileRouter extends BaseFileSystemRouter {
+    toPath(src) {
+        const routePath = cleanPath(src, this.config)
+            // remove the initial slash
+            .slice(1)
+            .replace(/index$/, "")
+            .replace(/\[([^/]+)\]/g, (_, m) => {
+            if (m.length > 3 && m.startsWith("...")) {
+                return `*${m.slice(3)}`;
+            }
+            if (m.length > 2 && m.startsWith("[") && m.endsWith("]")) {
+                return `:${m.slice(1, -1)}?`;
+            }
+            return `:${m}`;
+        });
+        return routePath?.length > 0 ? `/${routePath}` : "/";
+    }
+    toRoute(src) {
+        const path = this.toPath(src);
+        if (src.endsWith(".md") || src.endsWith(".mdx")) {
+            return {
+                page: true,
+                $component: {
+                    src: src,
+                    pick: ["$css"],
+                },
+                $$route: undefined,
+                path,
+                // filePath: src
+            };
+        }
+        const [_, exports] = analyzeModule(src);
+        const hasDefault = !!exports.find((e) => e.n === "default");
+        const hasRouteConfig = !!exports.find((e) => e.n === "route");
+        if (hasDefault) {
+            return {
+                page: true,
+                $component: {
+                    src: src,
+                    pick: [
+                        ...exports
+                            .filter((e) => e.n === e.ln && e.n !== "route")
+                            .map((e) => e.n),
+                        "default",
+                        "$css",
+                    ],
+                },
+                $$route: hasRouteConfig
+                    ? {
+                        src: src,
+                        pick: ["route"],
+                    }
+                    : undefined,
+                path,
+                // filePath: src
+            };
+        }
+    }
+}
+const HTTP_METHODS = [
+    "HEAD",
+    "GET",
+    "POST",
+    "PUT",
+    "DELETE",
+    "PATCH",
+    "OPTIONS",
+];
+function createHTTPHandlers(src, exports) {
+    const handlers = {};
+    for (const exp of exports) {
+        if (HTTP_METHODS.includes(exp.n)) {
+            handlers[`$${exp.n}`] = {
+                src: src,
+                pick: [exp.n],
+            };
+            if (exp.n === "GET" && !exports.find((exp) => exp.n === "HEAD")) {
+                handlers.$HEAD = {
+                    src: src,
+                    pick: [exp.n],
+                };
+            }
+        }
+    }
+    return handlers;
+}
+export class SolidStartServerFileRouter extends BaseFileSystemRouter {
+    constructor(config) {
+        super(config);
+    }
+    toPath(src) {
+        const routePath = cleanPath(src, this.config)
+            // remove the initial slash
+            .slice(1)
+            .replace(/index$/, "")
+            .replace(/\[([^/]+)\]/g, (_, m) => {
+            if (m.length > 3 && m.startsWith("...")) {
+                return `*${m.slice(3)}`;
+            }
+            if (m.length > 2 && m.startsWith("[") && m.endsWith("]")) {
+                return `:${m.slice(1, -1)}?`;
+            }
+            return `:${m}`;
+        });
+        return routePath?.length > 0 ? `/${routePath}` : "/";
+    }
+    toRoute(src) {
+        const path = this.toPath(src);
+        if (src.endsWith(".md") || src.endsWith(".mdx")) {
+            return {
+                page: true,
+                $component: {
+                    src: src,
+                    pick: ["$css"],
+                },
+                $$route: undefined,
+                path,
+            };
+        }
+        const [_, exports] = analyzeModule(src);
+        const hasRouteConfig = exports.find((e) => e.n === "route");
+        const hasDefault = !!exports.find((e) => e.n === "default");
+        const hasAPIRoutes = !!exports.find((exp) => HTTP_METHODS.includes(exp.n));
+        if (hasDefault || hasAPIRoutes) {
+            return {
+                page: hasDefault,
+                $component: !this.config.dataOnly && hasDefault
+                    ? {
+                        src: src,
+                        pick: [
+                            ...exports
+                                .filter((e) => e.n === e.ln &&
+                                e.n !== "route" &&
+                                !HTTP_METHODS.includes(e.n))
+                                .map((e) => e.n),
+                            "default",
+                            "$css",
+                        ],
+                    }
+                    : undefined,
+                $$route: hasRouteConfig
+                    ? {
+                        src: src,
+                        pick: ["route"],
+                    }
+                    : undefined,
+                ...createHTTPHandlers(src, exports),
+                path,
+            };
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+import type { PluginOption } from "vite";
+import type { BaseFileSystemRouter } from "./router.ts";
+export declare const fileSystemWatcher: (routers: Record<"client" | "ssr", BaseFileSystemRouter>) => PluginOption;

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

@@ -0,0 +1,49 @@
+import { moduleId } from "./index.js";
+function setupWatcher(watcher, routes) {
+    watcher.on("unlink", (path) => routes.removeRoute(path));
+    watcher.on("add", (path) => routes.addRoute(path));
+    watcher.on("change", (path) => routes.updateRoute(path));
+}
+function createRoutesReloader(server, routes, environment) {
+    routes.addEventListener("reload", handleRoutesReload);
+    return () => routes.removeEventListener("reload", handleRoutesReload);
+    function handleRoutesReload() {
+        if (environment === "ssr") {
+            // Handle server environment HMR reload
+            const serverEnv = server.environments.server;
+            if (serverEnv && serverEnv.moduleGraph) {
+                const mod = serverEnv.moduleGraph.getModuleById(moduleId);
+                if (mod) {
+                    const seen = new Set();
+                    serverEnv.moduleGraph.invalidateModule(mod, seen);
+                }
+            }
+        }
+        else {
+            // Handle client environment HMR reload
+            const { moduleGraph } = server;
+            const mod = moduleGraph.getModuleById(moduleId);
+            if (mod) {
+                const seen = new Set();
+                moduleGraph.invalidateModule(mod, seen);
+                server.reloadModule(mod);
+            }
+        }
+        if (!server.hot) {
+            server.ws.send({ type: "full-reload" });
+        }
+    }
+}
+export const fileSystemWatcher = (routers) => {
+    const plugin = {
+        name: "fs-watcher",
+        async configureServer(server) {
+            Object.keys(routers).forEach((environment) => {
+                const router = globalThis.ROUTERS[environment];
+                setupWatcher(server.watcher, router);
+                createRoutesReloader(server, router, environment);
+            });
+        },
+    };
+    return plugin;
+};

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

@@ -0,0 +1,7 @@
+import { type PluginOption } from "vite";
+import type { BaseFileSystemRouter } from "./router.ts";
+export declare const moduleId = "solid-start:routes";
+export interface FsRoutesArgs {
+    routers: Record<"client" | "ssr", BaseFileSystemRouter>;
+}
+export declare function fsRoutes({ routers }: FsRoutesArgs): Array<PluginOption>;