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

package/src/server/server-runtime.ts

@@ -11,7 +11,7 @@ import {
   RequestPlugin,
   ResponsePlugin,
   URLPlugin,
-  URLSearchParamsPlugin
+  URLSearchParamsPlugin,
 } from "seroval-plugins/web";
 import { type Component } from "solid-js";
 
@@ -46,7 +46,7 @@ class SerovalChunkReader {
       if (this.done) {
         return {
           done: true,
-          value: undefined
+          value: undefined,
         };
       }
       // Otherwise, read a new chunk
@@ -77,7 +77,7 @@ class SerovalChunkReader {
     // Deserialize the chunk
     return {
       done: false,
-      value: deserialize(partial)
+      value: deserialize(partial),
     };
   }
 
@@ -107,7 +107,7 @@ async function deserializeStream(id: string, response: Response) {
       },
       () => {
         // no-op
-      }
+      },
     );
   }
 
@@ -123,8 +123,8 @@ function createRequest(base: string, id: string, instance: string, options: Requ
     headers: {
       ...options.headers,
       "X-Server-Id": id,
-      "X-Server-Instance": instance
-    }
+      "X-Server-Instance": instance,
+    },
   });
 }
 
@@ -138,14 +138,14 @@ const plugins = [
   RequestPlugin,
   ResponsePlugin,
   URLSearchParamsPlugin,
-  URLPlugin
+  URLPlugin,
 ];
 
 async function fetchServerFunction(
   base: string,
   id: string,
   options: Omit<RequestInit, "body">,
-  args: any[]
+  args: any[],
 ) {
   const instance = `server-fn:${INSTANCE++}`;
   const response = await (args.length === 0
@@ -156,12 +156,12 @@ async function fetchServerFunction(
         ? createRequest(base, id, instance, {
             ...options,
             body: args[0],
-            headers: { ...options.headers, "Content-Type": "application/x-www-form-urlencoded" }
+            headers: { ...options.headers, "Content-Type": "application/x-www-form-urlencoded" },
           })
         : createRequest(base, id, instance, {
             ...options,
             body: JSON.stringify(await Promise.resolve(toJSONAsync(args, { plugins }))),
-            headers: { ...options.headers, "Content-Type": "application/json" }
+            headers: { ...options.headers, "Content-Type": "application/json" },
           }));
 
   if (
@@ -195,7 +195,7 @@ async function fetchServerFunction(
 
 export function createServerReference(id: string) {
   let baseURL = import.meta.env.BASE_URL ?? "/";
-  if(!baseURL.endsWith("/")) baseURL += "/"
+  if (!baseURL.endsWith("/")) baseURL += "/";
 
   const fn = (...args: any[]) => fetchServerFunction(`${baseURL}_server`, id, {}, args);
 
@@ -217,13 +217,13 @@ export function createServerReference(id: string) {
                 ? url +
                     (args.length
                       ? `&args=${encodeURIComponent(
-                          JSON.stringify(await Promise.resolve(toJSONAsync(args, { plugins })))
+                          JSON.stringify(await Promise.resolve(toJSONAsync(args, { plugins }))),
                         )}`
                       : "")
                 : `${baseURL}_server`,
               id,
               options,
-              encodeArgs ? [] : args
+              encodeArgs ? [] : args,
             );
           };
           fn.url = url;

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/spa/handler.ts

@@ -9,21 +9,21 @@ import type { FetchEvent, HandlerOptions, PageEvent } from "../types.ts";
  * Read more: https://docs.solidjs.com/solid-start/reference/server/create-handler
  */
 export function createHandler(
-	fn: (context: PageEvent) => JSX.Element,
-	options?: HandlerOptions | ((context: PageEvent) => HandlerOptions),
+  fn: (context: PageEvent) => JSX.Element,
+  options?: HandlerOptions | ((context: PageEvent) => HandlerOptions),
 ) {
-	return createBaseHandler(createPageEvent, fn, options);
+  return createBaseHandler(createPageEvent, fn, options);
 }
 
 async function createPageEvent(ctx: FetchEvent) {
-	const manifest = getSsrManifest("ssr");
-	const pageEvent: PageEvent = Object.assign(ctx, {
-		manifest: "json" in manifest ? await manifest.json() : {},
-		assets: await manifest.getAssets(import.meta.env.START_CLIENT_ENTRY),
-		routes: [],
-		complete: false,
-		$islands: new Set<string>(),
-	});
+  const manifest = getSsrManifest("ssr");
+  const pageEvent: PageEvent = Object.assign(ctx, {
+    manifest: "json" in manifest ? await manifest.json() : {},
+    assets: await manifest.getAssets(import.meta.env.START_CLIENT_ENTRY),
+    routes: [],
+    complete: false,
+    $islands: new Set<string>(),
+  });
 
-	return pageEvent;
+  return pageEvent;
 }

package/src/server/types.ts

@@ -5,78 +5,78 @@ import type { RequestEvent } from "solid-js/web";
 // export const FETCH_EVENT = "$FETCH";
 
 export type DocumentComponentProps = {
-	assets?: JSX.Element;
-	scripts: JSX.Element;
-	children?: JSX.Element;
+  assets?: JSX.Element;
+  scripts: JSX.Element;
+  children?: JSX.Element;
 };
 
 export type Asset =
-	| {
-			tag: "style";
-			attrs: JSX.StyleHTMLAttributes<HTMLStyleElement> & { key?: string };
-			children?: JSX.Element;
-	  }
-	| {
-			tag: "script";
-			attrs: JSX.ScriptHTMLAttributes<HTMLScriptElement> & { key?: string };
-	  }
-	| {
-			tag: "link";
-			attrs: JSX.LinkHTMLAttributes<HTMLLinkElement> & { key?: string };
-	  };
+  | {
+      tag: "style";
+      attrs: JSX.StyleHTMLAttributes<HTMLStyleElement> & { key?: string };
+      children?: JSX.Element;
+    }
+  | {
+      tag: "script";
+      attrs: JSX.ScriptHTMLAttributes<HTMLScriptElement> & { key?: string };
+    }
+  | {
+      tag: "link";
+      attrs: JSX.LinkHTMLAttributes<HTMLLinkElement> & { key?: string };
+    };
 
 export type HandlerOptions = {
-	mode?: "sync" | "async" | "stream";
-	nonce?: string;
-	renderId?: string;
-	onCompleteAll?: (options: { write: (v: any) => void }) => void;
-	onCompleteShell?: (options: { write: (v: any) => void }) => void;
+  mode?: "sync" | "async" | "stream";
+  nonce?: string;
+  renderId?: string;
+  onCompleteAll?: (options: { write: (v: any) => void }) => void;
+  onCompleteShell?: (options: { write: (v: any) => void }) => void;
 };
 
 export type ContextMatches = {
-	originalPath: string;
-	pattern: string;
-	path: string;
-	params: unknown;
+  originalPath: string;
+  pattern: string;
+  path: string;
+  params: unknown;
 };
 
 export interface ResponseStub {
-	status?: number;
-	statusText?: string;
-	headers: Headers;
+  status?: number;
+  statusText?: string;
+  headers: Headers;
 }
 
 export interface FetchEvent {
-	request: Request;
-	response: ResponseStub;
-	clientAddress?: string;
-	locals: App.RequestEventLocals;
-	nativeEvent: H3Event;
+  request: Request;
+  response: ResponseStub;
+  clientAddress?: string;
+  locals: App.RequestEventLocals;
+  nativeEvent: H3Event;
 }
 
 export interface PageEvent extends RequestEvent {
-	assets: any[];
-	routes: any[];
-	// prevUrl: string | null;
-	// $type: typeof FETCH_EVENT;
-	$islands: Set<string>;
-	complete: boolean;
-	nonce?: string;
-	// mutation: boolean;
+  assets: any[];
+  routes: any[];
+  // prevUrl: string | null;
+  // $type: typeof FETCH_EVENT;
+  $islands: Set<string>;
+  complete: boolean;
+  nonce?: string;
+  // mutation: boolean;
 }
 
 export interface APIEvent extends FetchEvent {
-	params: { [key: string]: string };
+  params: { [key: string]: string };
 }
 
 export type APIHandler = (event: APIEvent) => Promise<any>;
 
 export interface ServerFunctionMeta {
-	id: string;
+  id: string;
 }
 
 declare module "solid-js/web" {
-	interface RequestEvent extends FetchEvent {
-		serverOnly?: boolean;
-	}
+  interface RequestEvent extends FetchEvent {
+    serverOnly?: boolean;
+  }
 }

package/src/server/util.ts

@@ -4,9 +4,9 @@ import type { ResponseStub } from "./types.ts";
 const validRedirectStatuses = new Set([301, 302, 303, 307, 308]);
 
 export function getExpectedRedirectStatus(response: ResponseStub): number {
-	if (response.status && validRedirectStatuses.has(response.status)) {
-		return response.status;
-	}
+  if (response.status && validRedirectStatuses.has(response.status)) {
+    return response.status;
+  }
 
-	return 302;
+  return 302;
 }

package/src/shared/ErrorBoundary.tsx

@@ -37,7 +37,7 @@ export const TopErrorBoundary = (props: ParentProps) => {
     err => {
       console.error(err);
       isError = !!err;
-    }
+    },
   );
   return isError ? (
     <>

package/src/shared/HttpHeader.tsx

@@ -17,26 +17,26 @@ export interface HttpHeaderProps {
  */
 export const HttpHeader = isServer
   ? (props: HttpHeaderProps) => {
-    const event = getRequestEvent() as PageEvent;
+      const event = getRequestEvent() as PageEvent;
 
-    if (props.append) appendHeader(props.name, props.value);
-    else setHeader(props.name, props.value);
+      if (props.append) appendHeader(props.name, props.value);
+      else setHeader(props.name, props.value);
 
-    onCleanup(() => {
-      // @ts-expect-error
-      if (event.nativeEvent.handled || event.complete) return;
-      const value = event.response.headers.get(props.name);
-      if (!value) return;
-      if (!value.includes(", ")) {
-        if (value === props.value) event.response.headers.delete(props.name);
-        return;
-      }
-      const values = value.split(", ");
-      const index = values.indexOf(props.value);
-      index !== -1 && values.splice(index, 1);
-      if (values.length) event.response.headers.set(props.name, values.join(","));
-      else event.response.headers.delete(props.name);
-    });
-    return null;
-  }
+      onCleanup(() => {
+        // @ts-expect-error
+        if (event.nativeEvent.handled || event.complete) return;
+        const value = event.response.headers.get(props.name);
+        if (!value) return;
+        if (!value.includes(", ")) {
+          if (value === props.value) event.response.headers.delete(props.name);
+          return;
+        }
+        const values = value.split(", ");
+        const index = values.indexOf(props.value);
+        index !== -1 && values.splice(index, 1);
+        if (values.length) event.response.headers.set(props.name, values.join(","));
+        else event.response.headers.delete(props.name);
+      });
+      return null;
+    }
   : (_props: HttpHeaderProps) => null;

package/src/shared/HttpStatusCode.ts

@@ -4,8 +4,8 @@ import { getRequestEvent, isServer } from "solid-js/web";
 import type { PageEvent } from "../server/types.ts";
 
 export interface HttpStatusCodeProps {
-	code: number;
-	text?: string;
+  code: number;
+  text?: string;
 }
 
 /**
@@ -13,15 +13,15 @@ export interface HttpStatusCodeProps {
  * Read more: https://docs.solidjs.com/solid-start/reference/server/http-status-code
  */
 export const HttpStatusCode = isServer
-	? (props: HttpStatusCodeProps) => {
-			const event = getRequestEvent() as PageEvent;
-			event.response.status = props.code;
-			event.response.statusText = props.text;
-			onCleanup(
-				() =>
-					// !event.nativeEvent.handled &&
-					!event.complete && (event.response.status = 200),
-			);
-			return null;
-		}
-	: (_props: HttpStatusCodeProps) => null;
+  ? (props: HttpStatusCodeProps) => {
+      const event = getRequestEvent() as PageEvent;
+      event.response.status = props.code;
+      event.response.statusText = props.text;
+      onCleanup(
+        () =>
+          // !event.nativeEvent.handled &&
+          !event.complete && (event.response.status = 200),
+      );
+      return null;
+    }
+  : (_props: HttpStatusCodeProps) => null;

package/src/shared/clientOnly.ts

@@ -12,7 +12,7 @@ export default function clientOnly<T extends Component<any>>(
   fn: () => Promise<{
     default: T;
   }>,
-  options: { lazy?: boolean } = {}
+  options: { lazy?: boolean } = {},
 ) {
   if (isServer) return (props: ComponentProps<T> & { fallback?: JSX.Element }) => props.fallback;
 
@@ -29,7 +29,7 @@ export default function clientOnly<T extends Component<any>>(
     return createMemo(
       () => (
         (Comp = comp()), (m = mounted()), untrack(() => (Comp && m ? Comp(rest) : props.fallback))
-      )
+      ),
     );
   };
 }
@@ -38,7 +38,7 @@ function load<T>(
   fn: () => Promise<{
     default: T;
   }>,
-  setComp: Setter<T>
+  setComp: Setter<T>,
 ) {
   fn().then(m => setComp(() => m.default));
 }

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

@@ -1,31 +1,24 @@
 // @refresh skip
-import { getSingletonHighlighter, type BuiltinLanguage, type Highlighter } from 'shiki';
-import { loadWasm } from 'shiki/engine/oniguruma';
-import { createEffect, createResource, type JSX } from 'solid-js';
+import { getSingletonHighlighter, type BuiltinLanguage, 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 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 darkPlus from 'shiki/themes/dark-plus.mjs';
+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 darkPlus from "shiki/themes/dark-plus.mjs";
 
 let HIGHLIGHTER: Highlighter;
 
 async function loadHighlighter() {
   if (!HIGHLIGHTER) {
-    await loadWasm(await fetch(url))
+    await loadWasm(await fetch(url));
     HIGHLIGHTER = await getSingletonHighlighter({
-      themes: [
-        darkPlus,
-      ],
-      langs: [
-        langJS,
-        langJSX,
-        langTS,
-        langTSX,
-      ],
+      themes: [darkPlus],
+      langs: [langJS, langJSX, langTS, langTSX],
     });
   }
   return HIGHLIGHTER;
@@ -41,7 +34,7 @@ const RANGE = 8;
 
 export function CodeView(props: CodeViewProps): JSX.Element | null {
   const lines = () =>
-    props.content.split('\n').map((item, index) => ({
+    props.content.split("\n").map((item, index) => ({
       index: index + 1,
       line: item,
     }));
@@ -51,27 +44,25 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
 
   let ref: HTMLDivElement | undefined;
 
-  const [data] = createResource(() => (
-    lines()
-    .slice(minLine(), maxLine())
-    .map(item => item.line)
-    .join('\n')
-  ) ,async (value) => {
-    const highlighter = await loadHighlighter();
-    const fileExtension = props.fileName
-      .split(/[#?]/)[0]!
-      .split('.')
-      .pop()
-      ?.trim();
-    let lang = fileExtension as BuiltinLanguage;
-    if (fileExtension === 'mjs' || fileExtension === 'cjs') {
-      lang = 'js';
-    }
-    return highlighter.codeToHtml(value, {
-      theme: 'dark-plus',
-      lang,
-    });
-  });
+  const [data] = createResource(
+    () =>
+      lines()
+        .slice(minLine(), maxLine())
+        .map(item => item.line)
+        .join("\n"),
+    async value => {
+      const highlighter = await loadHighlighter();
+      const fileExtension = props.fileName.split(/[#?]/)[0]!.split(".").pop()?.trim();
+      let lang = fileExtension as BuiltinLanguage;
+      if (fileExtension === "mjs" || fileExtension === "cjs") {
+        lang = "js";
+      }
+      return highlighter.codeToHtml(value, {
+        theme: "dark-plus",
+        lang,
+      });
+    },
+  );
 
   createEffect(() => {
     const result = data();
@@ -82,14 +73,20 @@ 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');
+        if (props.line - minLine() - 1 === i) {
+          el.classList.add("dev-overlay-error-line");
         }
       }
     }
   });
 
-  return <div ref={ref} class="dev-overlay-code-view" style={{
-    '--dev-overlay-code-view-start': minLine() + 1,
-  }} />;
+  return (
+    <div
+      ref={ref}
+      class="dev-overlay-code-view"
+      style={{
+        "--dev-overlay-code-view-start": minLine() + 1,
+      }}
+    />
+  );
 }

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

@@ -19,7 +19,7 @@ import {
   RefreshIcon,
   SolidStartIcon,
   ViewCompiledIcon,
-  ViewOriginalIcon
+  ViewOriginalIcon,
 } from "./icons.tsx";
 import "./styles.css";
 
@@ -134,7 +134,7 @@ function StackFramesContent(props: StackFramesContentProps) {
                       content: "",
                       line: current.getLineNumber()!,
                       column: current.getColumnNumber()!,
-                      name: current.getFunctionName()
+                      name: current.getFunctionName(),
                     })}
                   </span>
                 </div>
@@ -225,8 +225,8 @@ export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Elem
       htmlToImage
         .toPng(current, {
           style: {
-            transform: "scale(0.75)"
-          }
+            transform: "scale(0.75)",
+          },
         })
         .then(url => {
           download(url, "start-screenshot.png");