@solidjs/start 2.0.0-alpha.2 → 2.0.0-alpha.3

package/dist/shared/dev-overlay/DevOverlayDialog.jsx

@@ -1,7 +1,7 @@
 // @refresh skip
 import ErrorStackParser from "error-stack-parser";
 import * as htmlToImage from "html-to-image";
-import { ErrorBoundary, For, Show, Suspense, createMemo, createSignal } from "solid-js";
+import { createMemo, createSignal, ErrorBoundary, For, Show, Suspense } from "solid-js";
 import { Portal } from "solid-js/web";
 // @ts-ignore - terracotta module resolution issue with NodeNext
 import { Dialog, DialogOverlay, DialogPanel, Select, SelectOption } from "terracotta";
@@ -25,9 +25,9 @@ function ErrorInfo(props) {
         }
         return { message: e.toString() };
     });
-    return (<span class="dev-overlay-error-info">
-      <span class="dev-overlay-error-info-name">{error().name}</span>
-      <span class="dev-overlay-error-info-message">{error().message}</span>
+    return (<span data-start-dev-overlay-error-info>
+      <span data-start-dev-overlay-error-info-name>{error().name}</span>
+      <span data-start-dev-overlay-error-info-message>{error().message}</span>
     </span>);
 }
 function getFileName(source) {
@@ -46,23 +46,23 @@ function getFilePath(source) {
     return `${getFileName(source.source)}${line}${column}`;
 }
 function CodeFallback() {
-    return (<div class="dev-overlay-stack-frames-code-fallback">
+    return (<div data-start-dev-overlay-stack-frames-code-fallback>
       <span>Source not available.</span>
     </div>);
 }
 function StackFramesContent(props) {
     const stackframes = ErrorStackParser.parse(props.error);
     const [selectedFrame, setSelectedFrame] = createSignal(stackframes[0]);
-    return (<div class="dev-overlay-stack-frames-content">
-      <div class="dev-overlay-stack-frames-code">
+    return (<div data-start-dev-overlay-stack-frames-content>
+      <div data-start-dev-overlay-stack-frames-code>
         <ErrorBoundary fallback={null}>
           {(() => {
             const data = createStackFrame(selectedFrame(), () => props.isCompiled);
             return (<Suspense fallback={<CodeFallback />}>
                 <Show when={data()} keyed fallback={<CodeFallback />}>
                   {source => (<>
-                      <span class="dev-overlay-stack-frames-code-source">{source.source}</span>
-                      <div class="dev-overlay-stack-frames-code-container">
+                      <span data-start-dev-overlay-stack-frames-code-source>{source.source}</span>
+                      <div data-start-dev-overlay-stack-frames-code-container>
                         <CodeView fileName={source.source} line={source.line} content={source.content}/>
                       </div>
                     </>)}
@@ -71,13 +71,13 @@ function StackFramesContent(props) {
         })()}
         </ErrorBoundary>
       </div>
-      <Select class="dev-overlay-stack-frames" value={selectedFrame()} onChange={setSelectedFrame}>
+      <Select data-start-dev-overlay-stack-frames value={selectedFrame()} onChange={setSelectedFrame}>
         <For each={stackframes}>
-          {current => (<ErrorBoundary fallback={<div class="dev-overlay-stack-frame">
-                  <span class="dev-overlay-stack-frame-function">
+          {current => (<ErrorBoundary fallback={<div data-start-dev-overlay-stack-frame>
+                  <span data-start-dev-overlay-stack-frame-function>
                     {current.functionName ?? "<anonymous>"}
                   </span>
-                  <span class="dev-overlay-stack-frame-file">
+                  <span data-start-dev-overlay-stack-frame-file>
                     {getFilePath({
                     source: current.getFileName(),
                     content: "",
@@ -91,11 +91,11 @@ function StackFramesContent(props) {
                 const data = createStackFrame(current, () => props.isCompiled);
                 return (<Suspense>
                     <Show when={data()} keyed>
-                      {source => (<SelectOption class="dev-overlay-stack-frame" value={current}>
-                          <span class="dev-overlay-stack-frame-function">
+                      {source => (<SelectOption data-start-dev-overlay-stack-frame value={current}>
+                          <span data-start-dev-overlay-stack-frame-function>
                             {source.name ?? "<anonymous>"}
                           </span>
-                          <span class="dev-overlay-stack-frame-file">{getFilePath(source)}</span>
+                          <span data-start-dev-overlay-stack-frame-file>{getFilePath(source)}</span>
                         </SelectOption>)}
                     </Show>
                   </Suspense>);
@@ -165,55 +165,55 @@ export default function DevOverlayDialog(props) {
         window.open(DISCORD_INVITE, "_blank").focus();
     }
     return (<Portal>
-      <Dialog class="dev-overlay" isOpen>
+      <Dialog data-start-dev-overlay isOpen>
         <div>
-          <DialogOverlay class="dev-overlay-background"/>
-          <DialogPanel ref={setPanel} class="dev-overlay-panel-container">
-            <div class="dev-overlay-panel">
-              <div class="dev-overlay-navbar">
-                <div class="dev-overlay-navbar-left">
-                  <div class="dev-overlay-version">
+          <DialogOverlay data-start-dev-overlay-background/>
+          <DialogPanel ref={setPanel} data-start-dev-overlay-panel-container>
+            <div data-start-dev-overlay-panel>
+              <div data-start-dev-overlay-navbar>
+                <div data-start-dev-overlay-navbar-left>
+                  <div data-start-dev-overlay-version>
                     <div>
                       <SolidStartIcon title="Solid Start Version"/>
                     </div>
                     <span>{info.version}</span>
                   </div>
                   <Show when={props.errors.length > 1}>
-                    <div class="dev-overlay-pagination">
-                      <button class="dev-overlay-button" onClick={goPrev} type="button">
+                    <div data-start-dev-overlay-pagination>
+                      <button data-start-dev-overlay-button onClick={goPrev} type="button">
                         <ArrowLeftIcon title="Go Previous"/>
                       </button>
-                      <div class="dev-overlay-page-counter">
+                      <div data-start-dev-overlay-page-counter>
                         {`${truncated()} of ${props.errors.length}`}
                       </div>
-                      <button class="dev-overlay-button" onClick={goNext} type="button">
+                      <button data-start-dev-overlay-button onClick={goNext} type="button">
                         <ArrowRightIcon title="Go Next"/>
                       </button>
                     </div>
                   </Show>
                 </div>
-                <div class="dev-overlay-controls">
-                  <button class="dev-overlay-button" onClick={redirectToGithub} type="button">
+                <div data-start-dev-overlay-controls>
+                  <button data-start-dev-overlay-button onClick={redirectToGithub} type="button">
                     <GithubIcon title="Create an issue thread on Github"/>
                   </button>
-                  <button class="dev-overlay-button" onClick={redirectToDiscord} type="button">
+                  <button data-start-dev-overlay-button onClick={redirectToDiscord} type="button">
                     <DiscordIcon title="Join our Discord Channel"/>
                   </button>
-                  <button class="dev-overlay-button" onClick={downloadScreenshot} type="button">
+                  <button data-start-dev-overlay-button onClick={downloadScreenshot} type="button">
                     <CameraIcon title="Capture Error Overlay"/>
                   </button>
-                  <button class="dev-overlay-button" onClick={toggleIsCompiled} type="button">
+                  <button data-start-dev-overlay-button onClick={toggleIsCompiled} type="button">
                     <Show when={isCompiled()} fallback={<ViewOriginalIcon title="View Original Source"/>}>
                       <ViewCompiledIcon title="View Compiled Source"/>
                     </Show>
                   </button>
-                  <button class="dev-overlay-button" onClick={props.resetError} type="button">
+                  <button data-start-dev-overlay-button onClick={props.resetError} type="button">
                     <RefreshIcon title="Reset Error"/>
                   </button>
                 </div>
               </div>
               <Show when={props.errors[truncated() - 1]} keyed>
-                {current => (<div class="dev-overlay-content">
+                {current => (<div data-start-dev-overlay-content>
                     <ErrorInfo error={current}/>
                     <StackFrames error={current} isCompiled={isCompiled()}/>
                   </div>)}

package/dist/shared/dev-overlay/index.jsx

@@ -1,7 +1,7 @@
 // @refresh skip
-import { ErrorBoundary, Show, createEffect, createSignal, onCleanup, resetErrorBoundaries, } from "solid-js";
-import { HttpStatusCode } from "../HttpStatusCode.js";
+import { createEffect, createSignal, ErrorBoundary, onCleanup, resetErrorBoundaries, Show, } from "solid-js";
 import clientOnly from "../clientOnly.js";
+import { HttpStatusCode } from "../HttpStatusCode.js";
 const DevOverlayDialog = import.meta.env.PROD
     ? () => <></>
     : clientOnly(() => import("./DevOverlayDialog"), { lazy: true });

package/dist/shared/dev-overlay/styles.css

@@ -1,11 +1,11 @@
-.dev-overlay {
+[data-start-dev-overlay] {
   position: fixed;
   inset: 0px;
   z-index: 50;
   overflow-y: auto;
 }
 
-.dev-overlay>div {
+[data-start-dev-overlay]>div {
   position: relative;
   display: flex;
   align-items: center;
@@ -13,13 +13,13 @@
   min-height: 100vh;
 }
 
-.dev-overlay-background {
+[data-start-dev-overlay-background] {
   position: absolute;
   inset: 0px;
   background-color: rgb(17 24 39 / 0.5);
 }
 
-.dev-overlay-panel {
+[data-start-dev-overlay-panel] {
   display: flex;
   flex-direction: column;
   width: 75vw;
@@ -30,12 +30,12 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-.dev-overlay-panel-container {
+[data-start-dev-overlay-panel-container] {
   margin: 2rem;
   z-index: 10;
 }
 
-.dev-overlay-navbar {
+[data-start-dev-overlay-navbar] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -43,7 +43,7 @@
   gap: 0.5rem;
 }
 
-.dev-overlay-pagination {
+[data-start-dev-overlay-pagination] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -54,7 +54,7 @@
   padding: 0.25rem;
 }
 
-.dev-overlay-button {
+[data-start-dev-overlay-button] {
   display: flex;
   padding: 0.125rem;
   border-radius: 9999px;
@@ -68,44 +68,44 @@
   transition-duration: 150ms;
 }
 
-.dev-overlay-button:hover {
+[data-start-dev-overlay-button]:hover {
   background-color: rgb(229 231 235);
   color: rgb(55 65 81);
 }
 
-.dev-overlay-button:focus {
+[data-start-dev-overlay-button]:focus {
   outline: 2px solid transparent;
   outline-offset: 2px
 }
 
-.dev-overlay-button:focus-visible {
+[data-start-dev-overlay-button]:focus-visible {
   box-shadow: 0 0 0 calc(3px) rgb(17 24 39 / 0.75);
 }
 
-.dev-overlay-button:active {
+[data-start-dev-overlay-button]:active {
   background-color: rgb(243 244 246);
   color: rgb(31 41 55);
 }
 
-.dev-overlay-button>svg {
+[data-start-dev-overlay-button]>svg {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.dev-overlay-page-counter {
+[data-start-dev-overlay-page-counter] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 600;
 }
 
-.dev-overlay-navbar-left {
+[data-start-dev-overlay-navbar-left] {
   display: flex;
   flex-direction: row;
   gap: 0.5rem;
 }
 
 
-.dev-overlay-controls {
+[data-start-dev-overlay-controls] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -116,7 +116,7 @@
   padding: 0.25rem;
 }
 
-.dev-overlay-version {
+[data-start-dev-overlay-version] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -130,17 +130,17 @@
   font-weight: 600;
 }
 
-.dev-overlay-version>div {
+[data-start-dev-overlay-version]>div {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.dev-overlay-version>div>svg {
+[data-start-dev-overlay-version]>div>svg {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.dev-overlay-content {
+[data-start-dev-overlay-content] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -149,30 +149,30 @@
   padding: 1rem;
 }
 
-.dev-overlay-error-info {
+[data-start-dev-overlay-error-info] {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
 
-.dev-overlay-error-info-name {
+[data-start-dev-overlay-error-info-name] {
   font-weight: 700;
 }
 
-.dev-overlay-error-info-message {
+[data-start-dev-overlay-error-info-message] {
   font-size: 1.5rem;
   line-height: 2rem;
   color: rgb(239 68 68);
   font-weight: 700;
 }
 
-.dev-overlay-stack-frames-content {
+[data-start-dev-overlay-stack-frames-content] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 
-.dev-overlay-stack-frames {
+[data-start-dev-overlay-stack-frames] {
   flex: 1 1 0%;
   display: flex;
   flex-direction: column;
@@ -185,7 +185,7 @@
   border-radius: 0.5rem;
 }
 
-.dev-overlay-stack-frame {
+[data-start-dev-overlay-stack-frame] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -203,18 +203,18 @@
   outline: none;
 }
 
-.dev-overlay-stack-frame[tc-active],
-.dev-overlay-stack-frame[tc-selected],
-.dev-overlay-stack-frame:focus {
+[data-start-dev-overlay-stack-frame][tc-active],
+[data-start-dev-overlay-stack-frame][tc-selected],
+[data-start-dev-overlay-stack-frame]:focus {
   background-color: rgb(219 234 254);
   color: rgb(30 58 138);
 }
 
-.dev-overlay-stack-frame-function {
+[data-start-dev-overlay-stack-frame-function] {
   font-weight: 700;
 }
 
-.dev-overlay-stack-frame-file {
+[data-start-dev-overlay-stack-frame-file] {
   white-space: nowrap;
   font-size: 0.75rem;
   /* 12px */
@@ -222,7 +222,7 @@
   /* 16px */
 }
 
-.dev-overlay-stack-frames-code {
+[data-start-dev-overlay-stack-frames-code] {
   padding: 0.5rem 1rem;
   gap: 0.25rem;
   flex: 1 1 0%;
@@ -234,7 +234,7 @@
   background-color: rgb(17 24 39);
 }
 
-.dev-overlay-stack-frames-code-fallback {
+[data-start-dev-overlay-stack-frames-code-fallback] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -244,13 +244,13 @@
   line-height: 1.25rem;
 }
 
-.dev-overlay-stack-frames-code-source {
+[data-start-dev-overlay-stack-frames-code-source] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: rgb(249 250 251);
 }
 
-.dev-overlay-stack-frames-code-container {
+[data-start-dev-overlay-stack-frames-code-container] {
   width: 100%;
   overflow: hidden;
   min-width: 100%;
@@ -260,13 +260,13 @@
   border-top-color: rgb(249 250 251);
 }
 
-.dev-overlay-code-view {
+[data-start-dev-overlay-code-view] {
   overflow: auto;
   min-width: 100%;
   min-height: 16rem;
 }
 
-.dev-overlay-code-view>.shiki {
+[data-start-dev-overlay-code-view]>.shiki {
   float: left;
   min-width: 100%;
   overflow-x: auto;
@@ -277,7 +277,7 @@
   background-color: transparent !important;
 }
 
-.dev-overlay-code-view>.shiki .line::before {
+[data-start-dev-overlay-code-view]>.shiki .line::before {
   content: counter(step);
   counter-increment: step;
   width: 1rem;
@@ -287,6 +287,6 @@
   color: rgba(115, 138, 148, .4)
 }
 
-.dev-overlay-error-line {
+[data-start-dev-overlay-error-line] {
   background-color: rgba(239, 68, 68, .4);
-}
+}

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@solidjs/start",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/solidjs/solid-start.git",
+    "directory": "packages/start"
+  },
   "exports": {
     ".": "./dist/index.jsx",
     "./config": "./dist/config/index.js",
@@ -12,47 +17,49 @@
     "./client/spa": "./dist/client/spa/index.jsx",
     "./middleware": "./dist/middleware/index.js",
     "./http": "./dist/http/index.js",
-    "./env": "./env.d.ts"
+    "./env": "./env.d.ts",
+    "./fns/server": "./dist/fns/server.js",
+    "./fns/client": "./dist/fns/client.js"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@babel/core": "^7.28.3",
-    "@babel/traverse": "^7.28.3",
-    "@babel/types": "^7.28.5",
+    "@babel/core": "^7.29.0",
+    "@babel/traverse": "^7.29.0",
+    "@babel/types": "^7.29.0",
     "@solidjs/meta": "^0.29.4",
-    "@tanstack/server-functions-plugin": "1.134.5",
     "@types/babel__traverse": "^7.28.0",
-    "@types/micromatch": "^4.0.9",
+    "@types/micromatch": "^4.0.10",
     "cookie-es": "^2.0.0",
     "defu": "^6.1.4",
     "error-stack-parser": "^2.1.4",
-    "es-module-lexer": "^1.7.0",
-    "esbuild": "^0.25.3",
+    "es-module-lexer": "^2.0.0",
+    "esbuild": "^0.27.4",
     "fast-glob": "^3.3.3",
-    "h3": "npm:h3@2.0.1-rc.4",
+    "h3": "2.0.1-rc.16",
     "html-to-image": "^1.11.13",
     "micromatch": "^4.0.8",
-    "path-to-regexp": "^8.2.0",
+    "path-to-regexp": "^8.3.0",
     "pathe": "^2.0.3",
     "radix3": "^1.1.2",
-    "seroval": "^1.4.1",
-    "seroval-plugins": "^1.4.0",
-    "shiki": "^1.26.1",
-    "solid-js": "^1.9.9",
+    "seroval": "^1.5.4",
+    "seroval-plugins": "^1.5.1",
+    "shiki": "^1.29.2",
+    "solid-js": "^1.9.11",
     "source-map-js": "^1.2.1",
-    "srvx": "^0.9.1",
-    "terracotta": "^1.0.6",
-    "vite-plugin-solid": "^2.11.9"
+    "srvx": "^0.11.9",
+    "terracotta": "^1.1.0",
+    "vite-plugin-solid": "^2.11.11"
   },
   "engines": {
     "node": ">=22"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
-    "vite": "^7.1.10",
-    "vitest": "^4.0.10"
+    "@types/node": "^25.5.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.1.0"
   },
   "peerDependencies": {
     "vite": "^7"

package/src/config/constants.ts

@@ -7,7 +7,7 @@ export const VIRTUAL_MODULES = {
   getClientManifest: "solid-start:get-client-manifest",
   getManifest: "solid-start:get-manifest",
   middleware: "solid-start:middleware",
-  serverFnManifest: "solidstart:server-fn-manifest",
+  serverFnManifest: "solid-start:server-fn-manifest",
   clientEntry: "solid-start:client-entry",
   serverEntry: "solid-start:server-entry",
   app: "solid-start:app",

package/src/config/env.ts

@@ -0,0 +1,105 @@
+import { loadEnv, type Plugin } from "vite";
+
+const LOADERS = {
+  node: `export default key => process.env[key];`,
+  "cloudflare-workers": `import { env } from 'cloudflare:workers';export default key => env[key];`,
+  "netlify-edge": `export default key => Netlify.env.get(key);`,
+};
+
+export interface EnvPluginOptions {
+  server?: {
+    runtime?: keyof typeof LOADERS | (string & {});
+    load?: (mode: string) => Record<string, string>;
+    prefix?: string;
+  };
+  client?: {
+    load?: (mode: string) => Record<string, string>;
+    prefix?: string;
+  };
+}
+
+const SERVER_ENV = "env:server";
+const CLIENT_ENV = "env:client";
+
+const SERVER_RUNTIME_ENV = `${SERVER_ENV}/runtime`;
+
+const SERVER_RUNTIME_LOADER = `${SERVER_RUNTIME_ENV}/loader`;
+
+const DEFAULT_SERVER_PREFIX = "SERVER_";
+const DEFAULT_CLIENT_PREFIX = "CLIENT_";
+
+const SERVER_ONLY_MODULE = `throw new Error('Attempt to load server-only environment variables in client runtime.');`;
+
+const SERVER_RUNTIME_CODE = `import load from '${SERVER_RUNTIME_LOADER}';
+
+export default new Proxy({}, {
+  get(_, key) {
+    return load(key);
+  },
+})`;
+
+function convertObjectToModule(object: Record<string, string>): string {
+  let result = "";
+  for (const key in object) {
+    result += `export const ${key} = ${JSON.stringify(object[key])};`;
+  }
+  return result;
+}
+
+export function envPlugin(options?: EnvPluginOptions): Plugin {
+  const currentOptions = options ?? {};
+  let env: string;
+  const serverPrefix = currentOptions.server?.prefix ?? DEFAULT_SERVER_PREFIX;
+  const clientPrefix = currentOptions.client?.prefix ?? DEFAULT_CLIENT_PREFIX;
+  const runtime = options?.server?.runtime ?? "node";
+  const runtimeCode = runtime in LOADERS ? LOADERS[runtime as keyof typeof LOADERS] : runtime;
+
+  return {
+    name: "solid-start:env",
+    enforce: "pre",
+    configResolved(config) {
+      env = config.mode !== "production" ? "development" : "production";
+    },
+    resolveId(id) {
+      if (
+        id === SERVER_ENV ||
+        id === CLIENT_ENV ||
+        id === SERVER_RUNTIME_ENV ||
+        id === SERVER_RUNTIME_LOADER
+      ) {
+        return id;
+      }
+      return undefined;
+    },
+    load(id, opts) {
+      if (id === SERVER_ENV) {
+        if (!opts?.ssr) {
+          return SERVER_ONLY_MODULE;
+        }
+        const vars = currentOptions.server?.load
+          ? currentOptions.server.load(env)
+          : loadEnv(env, '.', serverPrefix);
+        return convertObjectToModule(vars);
+      }
+      if (id === CLIENT_ENV) {
+        const vars = currentOptions.client?.load
+          ? currentOptions.client.load(env)
+          : loadEnv(env, '.', clientPrefix);
+        return convertObjectToModule(vars);
+      }
+      if (id === SERVER_RUNTIME_LOADER) {
+        if (!opts?.ssr) {
+          return SERVER_ONLY_MODULE;
+        }
+        return runtimeCode;
+      }
+      if (id === SERVER_RUNTIME_ENV) {
+        if (!opts?.ssr) {
+          return SERVER_ONLY_MODULE;
+        }
+        return SERVER_RUNTIME_CODE;
+      }
+      return undefined;
+    },
+  };
+}