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

package/src/server/StartServer.tsx

@@ -5,6 +5,7 @@ import App from "solid-start:app";
 
 import { ErrorBoundary, TopErrorBoundary } from "../shared/ErrorBoundary.tsx";
 import { useAssets } from "./assets/index.ts";
+import PatchVirtualDevStyles from "./assets/PatchVirtualDevStyles.tsx";
 import { getSsrManifest } from "./manifest/ssr-manifest.ts";
 import type { DocumentComponentProps, PageEvent } from "./types.ts";
 
@@ -29,6 +30,7 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
           assets={<HydrationScript />}
           scripts={
             <>
+              <PatchVirtualDevStyles nonce={nonce} />
               <script
                 type="module"
                 nonce={nonce}

package/src/server/assets/PatchVirtualDevStyles.tsx

@@ -0,0 +1,31 @@
+/**
+ * Patches the data-vite-dev-id attribute for style tags of virtual modules
+ *
+ * Per Vite's convention, virtual module ids are prefixed with \0 (null byte):
+ * https://vite.dev/guide/api-plugin#virtual-modules-convention
+ *
+ * However this null byte cannot be server rendered properly.
+ * Vite client runtime then fails to find style's with wrong null bytes,
+ * and instead inserts duplicate style's.
+ *
+ * This patch replaces the serializable /@id/__x00__ with the proper null byte,
+ * and has to run before Vite's client runtime:
+ * https://github.com/vitejs/vite/blob/130e7181a55c524383c63bbfb1749d0ff7185cad/packages/vite/src/client/client.ts#L529
+ *
+ * TODO: This should be solved in Vite directly!
+ */
+const patch = function () {
+  document.querySelectorAll<HTMLElement>("style[data-vite-dev-id]").forEach(function (el) {
+    el.setAttribute("data-vite-dev-id", el.dataset.viteDevId!.replace("/@id/__x00__", "\0"));
+  });
+};
+
+const serializedPatch = `(${patch.toString()})();`;
+
+const PatchVirtualDevStyles = (props: { nonce?: string }) => {
+  if (!import.meta.env.PROD) {
+    return <script nonce={props.nonce} innerHTML={serializedPatch} />;
+  }
+};
+
+export default PatchVirtualDevStyles;

package/src/server/collect-styles.ts

@@ -1,30 +1,12 @@
 import path from "node:path";
-import { resolve } from "pathe";
 import type { DevEnvironment, EnvironmentModuleNode } from "vite";
 
-async function getViteModuleNode(vite: DevEnvironment, file: string) {
-  let nodePath = file;
-  let node = vite.moduleGraph.getModuleById(file);
-
-  if (!node) {
-    const resolvedId = await vite.pluginContainer.resolveId(file, undefined);
-    if (!resolvedId) return;
-
-    nodePath = resolvedId.id;
-    node = vite.moduleGraph.getModuleById(file);
-  }
-
-  if (!node) {
-    nodePath = resolve(nodePath);
-    node = await vite.moduleGraph.getModuleByUrl(file);
-  }
-
-  if (!node) {
-    await vite.moduleGraph.ensureEntryFromUrl(nodePath, false);
-    node = vite.moduleGraph.getModuleById(nodePath);
-  }
-
-  return node;
+async function getViteModuleNode(vite: DevEnvironment, file: string, importer?: string) {
+  try {
+    const res = await vite.fetchModule(file, importer);
+    if (!("id" in res)) return;
+    return vite.moduleGraph.getModuleById(res.id);
+  } catch (err) {}
 }
 
 async function findModuleDependencies(
@@ -32,9 +14,10 @@ async function findModuleDependencies(
   file: string,
   deps: Set<EnvironmentModuleNode>,
   crawledFiles = new Set<string>(),
+  importer?: string,
 ) {
   crawledFiles.add(file);
-  const module = await getViteModuleNode(vite, file);
+  const module = await getViteModuleNode(vite, file, importer);
   if (!module?.id || deps.has(module)) return;
 
   deps.add(module);
@@ -53,7 +36,7 @@ async function findModuleDependencies(
     if (crawledFiles.has(dep)) {
       continue;
     }
-    await findModuleDependencies(vite, dep, deps, crawledFiles);
+    await findModuleDependencies(vite, dep, deps, crawledFiles, module.id);
   }
 }
 

package/src/server/handler.ts

@@ -9,7 +9,7 @@ import { createRoutes } from "../router.tsx";
 import { decorateHandler, decorateMiddleware } from "./fetchEvent.ts";
 import { getSsrManifest } from "./manifest/ssr-manifest.ts";
 import { matchAPIRoute } from "./routes.ts";
-import { handleServerFunction } from "./server-functions-handler.ts";
+import { handleServerFunction } from "../fns/handler.ts";
 import type { APIEvent, FetchEvent, HandlerOptions, PageEvent } from "./types.ts";
 import { getExpectedRedirectStatus } from "./util.ts";
 
@@ -43,21 +43,23 @@ export function createBaseHandler(
         const mod = await match.handler.import();
         const fn =
           event.request.method === "HEAD" ? mod["HEAD"] || mod["GET"] : mod[event.request.method];
-        (event as APIEvent).params = match.params || {};
-        // @ts-expect-error
-        sharedConfig.context = { event };
-        const res = await fn!(event);
-        if (res !== undefined) {
-          if (res instanceof Response) return produceResponseWithEventHeaders(res);
-
-          return res;
+        if (typeof fn === "function") {
+          (event as APIEvent).params = match.params || {};
+          // @ts-expect-error
+          sharedConfig.context = { event };
+          const res = await fn(event);
+          if (res !== undefined) {
+            if (res instanceof Response) return produceResponseWithEventHeaders(res);
+
+            return res;
+          }
+          if (event.request.method !== "GET") {
+            throw new Error(
+              `API handler for ${event.request.method} "${event.request.url}" did not return a response.`,
+            );
+          }
+          if (!match.isPage) return;
         }
-        if (event.request.method !== "GET") {
-          throw new Error(
-            `API handler for ${event.request.method} "${event.request.url}" did not return a response.`,
-          );
-        }
-        if (!match.isPage) return;
       }
 
       const context = await createPageEvent(event);
@@ -79,6 +81,8 @@ export function createBaseHandler(
           return redirect(context.response.headers.get("Location")!, status);
         }
 
+        event.response.headers.set("content-type", "text/html");
+
         return html;
       }
 
@@ -209,7 +213,7 @@ function handleStreamCompleteRedirect(context: PageEvent) {
   return ({ write }: { write: (html: string) => void }) => {
     context.complete = true;
     const to = context.response && context.response.headers.get("Location");
-    to && write(`<script>window.location="${to}"</script>`);
+    to && write(`<script>window.location=${JSON.stringify(to).replace(/</g, "\\u003c")}</script>`);
   };
 }
 

package/src/server/spa/StartServer.tsx

@@ -6,6 +6,7 @@ import { getSsrManifest } from "../manifest/ssr-manifest.ts";
 
 import { TopErrorBoundary } from "../../shared/ErrorBoundary.tsx";
 import { useAssets } from "../assets/index.ts";
+import PatchVirtualDevStyles from "../assets/PatchVirtualDevStyles.tsx";
 import type { DocumentComponentProps, PageEvent } from "../types.ts";
 
 const docType = ssr("<!DOCTYPE html>");
@@ -27,6 +28,7 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
         <props.document
           scripts={
             <>
+              <PatchVirtualDevStyles nonce={nonce} />
               <script
                 type="module"
                 src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY)}

package/src/server/types.ts

@@ -69,7 +69,7 @@ export interface APIEvent extends FetchEvent {
   params: { [key: string]: string };
 }
 
-export type APIHandler = (event: APIEvent) => Promise<any>;
+export type APIHandler = (event: APIEvent) => any;
 
 export interface ServerFunctionMeta {
   id: string;

package/src/shared/dev-overlay/CodeView.tsx

@@ -1,15 +1,13 @@
 // @refresh skip
-import { getSingletonHighlighter, type BuiltinLanguage, type Highlighter } from "shiki";
+import { type BuiltinLanguage, getSingletonHighlighter, type Highlighter } from "shiki";
 import { loadWasm } from "shiki/engine/oniguruma";
-import { createEffect, createResource, type JSX } from "solid-js";
-
-import url from "shiki/onig.wasm?url";
-
 import langJS from "shiki/langs/javascript.mjs";
 import langJSX from "shiki/langs/jsx.mjs";
 import langTSX from "shiki/langs/tsx.mjs";
 import langTS from "shiki/langs/typescript.mjs";
+import url from "shiki/onig.wasm?url";
 import darkPlus from "shiki/themes/dark-plus.mjs";
+import { createEffect, createResource, type JSX } from "solid-js";
 
 let HIGHLIGHTER: Highlighter;
 
@@ -74,7 +72,7 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
       for (let i = 0, len = lines.length; i < len; i++) {
         const el = lines[i] as HTMLElement;
         if (props.line - minLine() - 1 === i) {
-          el.classList.add("dev-overlay-error-line");
+          el.dataset.startDevOverlayErrorLine = '';
         }
       }
     }
@@ -83,7 +81,7 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
   return (
     <div
       ref={ref}
-      class="dev-overlay-code-view"
+      data-start-dev-overlay-code-view
       style={{
         "--dev-overlay-code-view-start": minLine() + 1,
       }}

package/src/shared/dev-overlay/DevOverlayDialog.tsx

@@ -2,7 +2,7 @@
 import ErrorStackParser from "error-stack-parser";
 import * as htmlToImage from "html-to-image";
 import type { JSX } from "solid-js";
-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";
@@ -47,9 +47,9 @@ function ErrorInfo(props: ErrorInfoProps): JSX.Element {
   });
 
   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>
+    <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>
   );
 }
@@ -77,7 +77,7 @@ function getFilePath(source: StackFrameSource) {
 
 function CodeFallback(): JSX.Element {
   return (
-    <div class="dev-overlay-stack-frames-code-fallback">
+    <div data-start-dev-overlay-stack-frames-code-fallback>
       <span>Source not available.</span>
     </div>
   );
@@ -89,8 +89,8 @@ function StackFramesContent(props: StackFramesContentProps) {
   const [selectedFrame, setSelectedFrame] = createSignal(stackframes[0]!);
 
   return (
-    <div class="dev-overlay-stack-frames-content">
-      <div class="dev-overlay-stack-frames-code">
+    <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);
@@ -99,8 +99,8 @@ function StackFramesContent(props: StackFramesContentProps) {
                 <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}
@@ -116,7 +116,7 @@ function StackFramesContent(props: StackFramesContentProps) {
         </ErrorBoundary>
       </div>
       <Select<ErrorStackParser.StackFrame>
-        class="dev-overlay-stack-frames"
+        data-start-dev-overlay-stack-frames
         value={selectedFrame()}
         onChange={setSelectedFrame}
       >
@@ -124,11 +124,11 @@ function StackFramesContent(props: StackFramesContentProps) {
           {current => (
             <ErrorBoundary
               fallback={
-                <div class="dev-overlay-stack-frame">
-                  <span class="dev-overlay-stack-frame-function">
+                <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: "",
@@ -146,11 +146,11 @@ function StackFramesContent(props: StackFramesContentProps) {
                   <Suspense>
                     <Show when={data()} keyed>
                       {source => (
-                        <SelectOption class="dev-overlay-stack-frame" value={current}>
-                          <span class="dev-overlay-stack-frame-function">
+                        <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>
@@ -249,44 +249,44 @@ export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Elem
 
   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 as string}</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" />}
@@ -294,14 +294,14 @@ export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Elem
                       <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">
+                  <div data-start-dev-overlay-content>
                     <ErrorInfo error={current} />
                     <StackFrames error={current} isCompiled={isCompiled()} />
                   </div>

package/src/shared/dev-overlay/get-source-map.ts

@@ -1,4 +1,4 @@
-import { RawSourceMap, SourceMapConsumer } from "source-map-js";
+import { type RawSourceMap, SourceMapConsumer } from "source-map-js";
 
 const INLINE_SOURCEMAP_REGEX = /^data:application\/json[^,]+base64,/;
 const SOURCEMAP_REGEX =

package/src/shared/dev-overlay/index.tsx

@@ -1,15 +1,15 @@
 // @refresh skip
 import {
-  ErrorBoundary,
-  Show,
   createEffect,
   createSignal,
+  ErrorBoundary,
+  type JSX,
   onCleanup,
   resetErrorBoundaries,
-  type JSX,
+  Show,
 } from "solid-js";
-import { HttpStatusCode } from "../HttpStatusCode.ts";
 import clientOnly from "../clientOnly.ts";
+import { HttpStatusCode } from "../HttpStatusCode.ts";
 
 export interface DevOverlayProps {
   children?: JSX.Element;