Rework @solidjs/start/env

.changeset/brave-baboons-talk.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/start": patch
+---
+
+Rework `@solidjs/start/env`

apps/fixtures/bare/tsconfig.json

@@ -11,8 +11,9 @@
     "strict": true,
     "noEmit": true,
     "isolatedModules": true,
+    "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"]
-    }
-  }
+      "~/*": ["./src/*"],
+    },
+  },
 }

apps/fixtures/basic/tsconfig.json

@@ -11,8 +11,9 @@
     "strict": true,
     "noEmit": true,
     "isolatedModules": true,
+    "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"]
-    }
-  }
+      "~/*": ["./src/*"],
+    },
+  },
 }

apps/fixtures/css/tsconfig.json

@@ -12,8 +12,8 @@
     "noEmit": true,
     "isolatedModules": true,
     "paths": {
-      "~/*": ["./src/*"]
+      "~/*": ["./src/*"],
     },
-    "types": ["vite/client"]
-  }
+    "types": ["@solidjs/start/env"],
+  },
 }

apps/fixtures/experiments/tsconfig.json

@@ -11,9 +11,9 @@
     "strict": true,
     "noEmit": true,
     "isolatedModules": true,
-    "types": ["vite/client"],
+    "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"]
-    }
-  }
+      "~/*": ["./src/*"],
+    },
+  },
 }

apps/fixtures/hackernews/tsconfig.json

@@ -11,8 +11,9 @@
     "strict": true,
     "noEmit": true,
     "isolatedModules": true,
+    "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"]
-    }
-  }
+      "~/*": ["./src/*"],
+    },
+  },
 }

apps/fixtures/nitro-3/tsconfig.json

@@ -11,8 +11,9 @@
     "strict": true,
     "noEmit": true,
     "isolatedModules": true,
+    "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"]
-    }
-  }
+      "~/*": ["./src/*"],
+    },
+  },
 }

apps/fixtures/notes/tsconfig.json

@@ -11,8 +11,9 @@
     "strict": true,
     "noEmit": true,
     "isolatedModules": true,
+    "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"]
-    }
-  }
+      "~/*": ["./src/*"],
+    },
+  },
 }

apps/fixtures/todomvc/tsconfig.json

@@ -11,8 +11,9 @@
     "strict": true,
     "noEmit": true,
     "isolatedModules": true,
+    "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"]
-    }
-  }
+      "~/*": ["./src/*"],
+    },
+  },
 }

apps/landing-page/src/global.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="@solidjs/start/env" />
-
 import { Session, User } from "lucia";
 import { lucia } from "./db/auth";
 

apps/landing-page/tsconfig.json

@@ -8,8 +8,9 @@
     "jsxImportSource": "solid-js",
     "jsx": "preserve",
     "baseUrl": "./",
+    "types": ["@solidjs/start/env"],
     "paths": {
-      "~/*": ["./src/*"]
-    }
-  }
+      "~/*": ["./src/*"],
+    },
+  },
 }

apps/tests/tsconfig.json

@@ -10,10 +10,10 @@
     "allowJs": true,
     "strict": true,
     "noEmit": true,
-    "types": ["vitest/globals", "@testing-library/jest-dom"],
+    "types": ["vitest/globals", "@testing-library/jest-dom", "@solidjs/start/env"],
     "isolatedModules": true,
     "paths": {
-      "~/*": ["./src/*"]
-    }
-  }
+      "~/*": ["./src/*"],
+    },
+  },
 }

packages/start-nitro-v2-vite-plugin/tsconfig.json

@@ -17,7 +17,7 @@
     "types": ["vite/client"],
     "allowImportingTsExtensions": true,
     "rewriteRelativeImportExtensions": true,
-    "rootDir": "./src"
+    "rootDir": "./src",
   },
-  "include": ["./src", "./src/env.d.ts"]
+  "include": ["./src", "./src/env.d.ts"],
 }

packages/start/env.d.ts

@@ -0,0 +1,9 @@
+// This file contains global type definitions that are exported as @solidjs/start/env
+
+/// <reference types="vite/client" />
+
+declare namespace App {
+  export interface RequestEventLocals {
+    [key: string | symbol]: any;
+  }
+}

packages/start/package.json

@@ -18,7 +18,8 @@
     "./server/spa": "./src/server/spa/index.tsx",
     "./client/spa": "./src/client/spa/index.tsx",
     "./middleware": "./src/middleware/index.ts",
-    "./http": "./src/http/index.ts"
+    "./http": "./src/http/index.ts",
+    "./env": "./env.d.ts"
   },
   "publishConfig": {
     "access": "public",
@@ -31,7 +32,8 @@
       "./server/spa": "./dist/server/spa/index.jsx",
       "./client/spa": "./dist/client/spa/index.jsx",
       "./middleware": "./dist/middleware/index.js",
-      "./http": "./dist/http/index.js"
+      "./http": "./dist/http/index.js",
+      "./env": "./env.d.ts"
     }
   },
   "dependencies": {

packages/start/src/client/mount.ts

@@ -1,114 +1 @@
-import type { JSX } from "solid-js";
-import { createStore } from "solid-js/store";
-import {
-  createComponent,
-  getHydrationKey,
-  getOwner,
-  hydrate,
-  type MountableElement,
-} from "solid-js/web";
-
-/**
- *
- * Read more: https://docs.solidjs.com/solid-start/reference/client/mount
- */
-export function mount(fn: () => JSX.Element, el: MountableElement) {
-  if (import.meta.env.START_ISLANDS) {
-    const map = new WeakMap();
-    async function mountIsland(el: HTMLElement) {
-      if (el.dataset.css) {
-        let css = JSON.parse(el.dataset.css);
-        for (let href of css) {
-          if (!document.querySelector(`link[href="${href}"]`)) {
-            let link = document.createElement("link");
-            link.rel = "stylesheet";
-            link.href = href;
-            document.head.appendChild(link);
-          }
-        }
-      }
-
-      let mod = await import(
-        /* @vite-ignore */
-        import.meta.env.MANIFEST["client"]!.chunks[el.dataset.id!.split("#")[0] as string]!.output
-          .path
-      );
-      if (!mod || !el.dataset.hk) return;
-
-      let Component = mod[el.dataset.id!.split("#")[1] as string];
-      let hk = el.dataset.hk;
-      // _$DEBUG("hydrating island", el.dataset.island, hk.slice(0, hk.length - 1) + `1-`, el);
-
-      let props = createStore({
-        ...JSON.parse(el.dataset.props!),
-        get children() {
-          const p = el.getElementsByTagName("solid-children");
-          getHydrationKey();
-          [...p].forEach(a => {
-            (a as any).__$owner = getOwner();
-          });
-          return;
-        },
-      });
-
-      map.set(el, props);
-
-      hydrate(() => createComponent(Component, props[0]), el, {
-        renderId: hk.slice(0, hk.length - 1) + `${1 + Number(el.dataset.offset)}-`,
-        owner: lookupOwner(el),
-      });
-
-      delete el.dataset.hk;
-      el.dataset.hkk = hk;
-    }
-
-    let queue: HTMLElement[] = [];
-    let queued = false;
-    function runTaskQueue(info: any) {
-      while (info.timeRemaining() > 0 && queue.length) {
-        mountIsland(queue.shift()!);
-      }
-      if (queue.length) {
-        requestIdleCallback(runTaskQueue);
-      } else queued = false;
-    }
-
-    const hydrateIslands = () => {
-      const islands: NodeListOf<HTMLElement> = document.querySelectorAll("solid-island[data-hk]");
-      const assets = new Set<string>();
-      islands.forEach((el: HTMLElement) => el.dataset.id && assets.add(el.dataset.id));
-      Promise.all(
-        [...assets].map(
-          asset =>
-            import(
-              /* @vite-ignore */ import.meta.env.MANIFEST["client"]!.chunks[
-                asset.split("#")[0] as string
-              ]!.output.path
-            ),
-        ),
-      )
-        .then(() => {
-          islands.forEach((el: HTMLElement) => {
-            if (el.dataset.when === "idle" && "requestIdleCallback" in window) {
-              if (!queued) {
-                queued = true;
-                requestIdleCallback(runTaskQueue);
-              }
-              queue.push(el);
-            } else mountIsland(el as HTMLElement);
-          });
-        })
-        .catch(e => console.error(e));
-    };
-
-    function lookupOwner(el: HTMLElement) {
-      const parent = el.closest("solid-children");
-      return parent && (parent as any).__$owner;
-    }
-
-    hydrateIslands();
-
-    return;
-  }
-  return hydrate(fn, el);
-}
+export { hydrate as mount } from "solid-js/web"

packages/start/src/config/index.ts

@@ -56,9 +56,6 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
       enforce: "pre",
       configEnvironment(name) {
         return {
-          define: {
-            "import.meta.env.SSR": JSON.stringify(name === VITE_ENVIRONMENTS.server),
-          },
           resolve: {
             // remove when https://github.com/solidjs/vite-plugin-solid/pull/228 is released
             externalConditions: ["solid", "node"],

packages/start/src/env.d.ts

@@ -1,33 +1,17 @@
-// This file is an augmentation to the built-in ImportMeta interface
-// Thus cannot contain any top-level imports
-// <https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation>
-
-/* eslint-disable @typescript-eslint/consistent-type-imports */
-
-declare namespace App {
-  export interface RequestEventLocals {
-    [key: string | symbol]: any;
-  }
-}
+// This file contains global type definitions that are internal to SolidStart and are not exported
 
 declare module "solidstart:server-fn-manifest" {
   type ServerFn = (...args: Array<any>) => Promise<any>;
   export function getServerFnById(id: string): Promise<ServerFn>;
 }
 
-interface ImportMetaEnv extends Record<`VITE_${string}`, any>, SolidStartMetaEnv {
-  BASE_URL: string;
-  MODE: string;
-  DEV: boolean;
-  PROD: boolean;
-  SSR: boolean;
-}
+interface ImportMetaEnv extends SolidStartMetaEnv {}
 
 interface SolidStartMetaEnv {
   START_SSR: boolean;
   START_APP_ENTRY: string;
   START_CLIENT_ENTRY: string;
-  // START_ISLANDS: boolean;
+  START_ISLANDS: boolean;
   // START_DEV_OVERLAY: boolean;
   // SERVER_BASE_URL: string;
 }

packages/start/src/server/handler.ts

@@ -71,7 +71,7 @@ export function createBaseHandler(
         const html = renderToString(() => {
           (sharedConfig.context as any).event = context;
           return fn(context);
-        });
+        }, resolvedOptions);
         context.complete = true;
 
         if (context.response && context.response.headers.get("Location")) {

packages/start/tsconfig.json

@@ -17,7 +17,7 @@
     "types": ["vite/client"],
     "allowImportingTsExtensions": true,
     "rewriteRelativeImportExtensions": true,
-    "rootDir": "./src"
+    "rootDir": "./src",
   },
-  "include": ["./src", "./src/env.d.ts"]
+  "include": ["env.d.ts", "./src", "./src/env.d.ts"],
 }