@solidjs/start 0.4.2 → 0.4.4

package/config/index.d.ts

@@ -1,9 +1,17 @@
 import { AppOptions } from "vinxi";
 import { InlineConfig } from "vite";
+import type { Options } from "vite-plugin-solid";
+
 
 type SolidStartInlineConfig = Omit<InlineConfig, "router"> & {
     start?: {
+        /**
+         * true: streaming mode
+         * false: csr only
+         * async: ssr is in async mode
+         */
         ssr?: boolean | "async",
+        solid: Options,
         extensions?: string[],
         server?: AppOptions['server'],
         appRoot?: string,

package/config/index.js

@@ -38,29 +38,27 @@ function solidStartServerFsRouter(config) {
 }
 
 export function defineConfig(baseConfig = {}) {
-  let { plugins = [], start = {}, base, ...userConfig } = baseConfig;
+  let { plugins = [], start = {}, ...userConfig } = baseConfig;
   const extensions = [...DEFAULT_EXTENSIONS, ...(start.extensions || [])];
   start = defu(start, {
     appRoot: "./src",
     ssr: true,
     islands: false,
-    server: { base },
     solid: {}
   });
   let server = start.server;
   if (!start.ssr) {
     server = { ...server, prerender: { routes: ["/"] } };
   }
-  console.log("start", start)
-  let entryExtension = ".tsx"
+  let entryExtension = ".tsx";
   if (existsSync(join(process.cwd(), start.appRoot, "app.jsx"))) {
-    entryExtension = ".jsx"
+    entryExtension = ".jsx";
   }
 
   return createApp({
     server: {
       compressPublicAssets: {
-        brotli: true
+        brotli: process.versions.bun ? false : true
       },
       ...server
     },
@@ -80,9 +78,10 @@ export function defineConfig(baseConfig = {}) {
         routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
         extensions,
         target: "server",
-        plugins: () => [
+        plugins: async () => [
           config("user", userConfig),
-          ...plugins,
+          ...(typeof plugins === "function" ? [...(await plugins())] : plugins),
+
           serverTransform({
             runtime: normalize(fileURLToPath(new URL("./server-fns-runtime.jsx", import.meta.url)))
           }),
@@ -121,9 +120,9 @@ export function defineConfig(baseConfig = {}) {
             }),
         extensions,
         target: "browser",
-        plugins: () => [
+        plugins: async () => [
           config("user", userConfig),
-          ...plugins,
+          ...(typeof plugins === "function" ? [...(await plugins())] : plugins),
           serverFunctions.client({
             runtime: normalize(fileURLToPath(new URL("./server-runtime.jsx", import.meta.url)))
           }),
@@ -161,9 +160,10 @@ export function defineConfig(baseConfig = {}) {
         handler: normalize(fileURLToPath(new URL("./server-handler.js", import.meta.url))),
         runtime: normalize(fileURLToPath(new URL("./server-fns-runtime.jsx", import.meta.url))),
         // routes: solidStartServerFsRouter({ dir: `${start.appRoot}/routes`, extensions }),
-        plugins: () => [
+        plugins: async () => [
           config("user", userConfig),
-          ...plugins,
+          ...(typeof plugins === "function" ? [...(await plugins())] : plugins),
+
           solid({ ...start.solid, ssr: true, extensions: extensions.map(ext => `.${ext}`) }),
           config("app-server", {
             resolve: {

package/config/server-fns-runtime.jsx

@@ -1,6 +1,6 @@
 import { getRequestEvent } from "solid-js/web";
 import { provideRequestEvent } from "solid-js/web/storage";
-import { cloneEvent } from "../server";
+import { cloneEvent } from "../server/middleware";
 
 export function createServerReference(fn, id, name) {
   return new Proxy(fn, {

package/config/server-handler.js

@@ -1,5 +1,5 @@
 /// <reference types="vinxi/types/server" />
-import { crossSerializeStream, fromJSON } from "seroval";
+import { crossSerializeStream, fromJSON, getCrossReferenceHeader } from "seroval";
 import {
   CustomEventPlugin,
   DOMExceptionPlugin,
@@ -10,16 +10,14 @@ import {
   RequestPlugin,
   ResponsePlugin,
   URLPlugin,
-  URLSearchParamsPlugin,
-} from 'seroval-plugins/web';
+  URLSearchParamsPlugin
+} from "seroval-plugins/web";
+import { sharedConfig } from "solid-js";
+/* @ts-ignore */
 import { provideRequestEvent } from "solid-js/web/storage";
 import invariant from "vinxi/lib/invariant";
 import {
   eventHandler,
-  getHeader,
-  getRequestURL,
-  readBody,
-  readFormData,
   setHeader
 } from "vinxi/server";
 import { getFetchEvent } from "../server/middleware";
@@ -39,10 +37,10 @@ function serializeToStream(id, value) {
           RequestPlugin,
           ResponsePlugin,
           URLSearchParamsPlugin,
-          URLPlugin,
+          URLPlugin
         ],
         onSerialize(data, initial) {
-          const result = initial ? `($R["${id}"]=[],${data})` : data;
+          const result = initial ? `(${getCrossReferenceHeader(id)},${data})` : data;
           controller.enqueue(new TextEncoder().encode(`${result};\n`));
         },
         onDone() {
@@ -58,12 +56,14 @@ function serializeToStream(id, value) {
   });
 }
 
-async function handleServerFunction(event) {
-  invariant(event.method === "POST", `Invalid method ${event.method}. Expected POST.`);
+async function handleServerFunction(h3Event) {
+  invariant(h3Event.method === "POST", `Invalid method ${h3Event.method}. Expected POST.`);
+  const event = getFetchEvent(h3Event);
+  const request = event.request;
 
-  const serverReference = getHeader(event, "x-server-id");
-  const instance = getHeader(event, "x-server-instance");
-  const url = getRequestURL(event);
+  const serverReference = request.headers.get("x-server-id");
+  const instance = request.headers.get("x-server-instance");
+  const url = new URL(request.url);
   let filepath, name;
   if (serverReference) {
     invariant(typeof serverReference === "string", "Invalid server function");
@@ -84,14 +84,14 @@ async function handleServerFunction(event) {
     const args = url.searchParams.get("args");
     if (args) JSON.parse(args).forEach(arg => parsed.push(arg));
   }
-  const contentType = getHeader(event, "content-type");
+  const contentType = request.headers.get("content-type");
   if (
     contentType.startsWith("multipart/form-data") ||
     contentType.startsWith("application/x-www-form-urlencoded")
   ) {
-    parsed.push(await readFormData(event));
+    parsed.push(await request.formData());
   } else {
-    parsed = fromJSON(await readBody(event), {
+    parsed = fromJSON(await request.json(), {
       plugins: [
         CustomEventPlugin,
         DOMExceptionPlugin,
@@ -102,32 +102,40 @@ async function handleServerFunction(event) {
         RequestPlugin,
         ResponsePlugin,
         URLSearchParamsPlugin,
-        URLPlugin,
-      ],
+        URLPlugin
+      ]
     });
   }
   try {
-    const result = await provideRequestEvent(getFetchEvent(event), () => action(...parsed));
+    const result = await provideRequestEvent(event, () => {
+      /* @ts-ignore */
+      sharedConfig.context = { event };
+      return action(...parsed);
+    });
 
     // handle no JS success case
     if (!instance) {
       const isError = result instanceof Error;
-      const refererUrl = new URL(getHeader(event, "referer"));
+      const refererUrl = new URL(request.headers.get("referer"));
       return new Response(null, {
         status: 302,
         headers: {
           Location: refererUrl.toString(),
-          ...(result ? { "Set-Cookie": `flash=${JSON.stringify({
-            url: url.pathname + encodeURIComponent(url.search),
-            result: isError ? result.message : result,
-            error: isError,
-            input: [...parsed.slice(0, -1), [...parsed[parsed.length-1].entries()]]
-          })}; Secure; HttpOnly;`} : {})
+          ...(result
+            ? {
+                "Set-Cookie": `flash=${JSON.stringify({
+                  url: url.pathname + encodeURIComponent(url.search),
+                  result: isError ? result.message : result,
+                  error: isError,
+                  input: [...parsed.slice(0, -1), [...parsed[parsed.length - 1].entries()]]
+                })}; Secure; HttpOnly;`
+              }
+            : {})
         }
       });
     }
-
-    setHeader(event, "content-type", "text/javascript");
+    if (typeof result === "string") return new Response(result);
+    setHeader(h3Event, "content-type", "text/javascript");
     return serializeToStream(instance, result);
   } catch (x) {
     if (x instanceof Response && x.status === 302) {
@@ -138,12 +146,7 @@ async function handleServerFunction(event) {
         }
       });
     }
-    return new Response(serializeToStream(instance, x), {
-      status: 500,
-      headers: {
-        "Content-Type": "text/javascript"
-      }
-    });
+    return x;
   }
 }
 

package/config/server-runtime.jsx

@@ -104,7 +104,15 @@ async function fetchServerFunction(base, id, args) {
     }
     throw response;
   }
-  const result = deserializeStream(instance, response);
+  const contentType = response.headers.get("Content-Type");
+  let result;
+  if (contentType && contentType.startsWith("text/plain")) {
+    result = await response.text();
+  } else if(contentType && contentType.startsWith("application/json")) {
+    result = await response.json();
+  } else {
+    result = deserializeStream(instance, response);
+  }
   if (response.ok) {
     return result;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "type": "module",
   "author": "Ryan Carniato",
   "publishConfig": {
@@ -38,16 +38,21 @@
     }
   },
   "devDependencies": {
-    "solid-js": "^1.8.7",
-    "vinxi": "0.0.54"
+    "solid-js": "^1.8.8",
+    "vinxi": "0.1.1"
   },
   "dependencies": {
-    "@vinxi/plugin-directives": "0.0.50",
-    "@vinxi/server-components": "0.0.50",
-    "@vinxi/server-functions": "0.0.51",
+    "@vinxi/plugin-directives": "^0.1.0",
+    "@vinxi/server-components": "^0.1.0",
+    "@vinxi/server-functions": "^0.1.0",
     "defu": "^6.1.2",
-    "seroval": "^1.0.0",
-    "seroval-plugins": "^1.0.1",
+    "error-stack-parser": "^2.1.4",
+    "html-to-image": "^1.11.11",
+    "seroval": "^1.0.2",
+    "seroval-plugins": "^1.0.2",
+    "shikiji": "^0.9.12",
+    "source-map-js": "^1.0.2",
+    "terracotta": "^1.0.4",
     "vite-plugin-inspect": "^0.7.33",
     "vite-plugin-solid": "^2.8.0"
   },

package/server/handler.tsx

@@ -1,3 +1,4 @@
+import { sharedConfig } from "solid-js";
 import { renderToStream } from "solid-js/web";
 /* @ts-ignore */
 import { provideRequestEvent } from "solid-js/web/storage";
@@ -42,6 +43,7 @@ export function createHandler(
           const mod = await match.handler.import();
           const fn = mod[event.request.method];
           (event as APIEvent).params = match.params;
+          sharedConfig.context = { event } as any;
           return await fn(event);
         }
 
@@ -63,7 +65,10 @@ export function createHandler(
             og(options);
           };
         } else cloned.onCompleteShell = handleShellCompleteRedirect(context, e);
-        const stream = renderToStream(() => fn(context), cloned);
+        const stream = renderToStream(() => {
+          (sharedConfig.context as any).event = context;
+          return fn(context)
+        }, cloned);
         if (context.response && context.response.headers.get("Location")) {
           return sendRedirect(event, context.response.headers.get("Location"));
         }

package/server/spa/StartServer.tsx

@@ -12,7 +12,6 @@ export function StartServer(props) {
       <props.document
         assets={
           <>
-            <script>$R = [];</script>
             {context.assets.map(m => renderAsset(m))}
           </>
         }

package/server/types.ts

@@ -1,5 +1,5 @@
-import { JSX } from "solid-js";
-import { EventHandlerRequest, H3Event } from "vinxi/server";
+import type { JSX } from "solid-js";
+import type { EventHandlerRequest, H3Event } from "vinxi/server";
 
 // export const FETCH_EVENT = "$FETCH";
 

package/shared/ErrorBoundary.tsx

@@ -1,48 +1,25 @@
 import {
-  createEffect,
-  ErrorBoundary as ErrorBoundaryBase,
+  ErrorBoundary as DefaultErrorBoundary,
   ParentProps,
-  resetErrorBoundaries
 } from "solid-js";
+import { HttpStatusCode } from "./HttpStatusCode";
+import { DevOverlay } from "./dev-overlay";
 
 export function ErrorBoundary(props: ParentProps) {
+  if (import.meta.env.DEV) {
+    return (
+      <DevOverlay>
+        {props.children}
+      </DevOverlay>
+    );
+  }
   return (
-    <ErrorBoundaryBase fallback={e => <ErrorMessage error={e} />}>
+    <DefaultErrorBoundary
+      fallback={(
+        <HttpStatusCode code={500} />
+      )}
+    >
       {props.children}
-    </ErrorBoundaryBase>
-  );
-}
-
-function ErrorMessage(props: { error: any }) {
-  createEffect(() => console.error(props.error));
-
-  return (
-    <div style="padding: 16px">
-      <div
-        style={`
-          background-color: rgba(252, 165, 165);
-          color: rgb(153, 27, 27);
-          border-radius": 5px;
-          overflow: scroll;
-          padding: 16px;
-          margin-bottom: 8px;
-        `}
-      >
-        <p style="font-weight: bold" id="error-message">
-          {props.error.message}
-        </p>
-        <button
-          id="reset-errors"
-          onClick={resetErrorBoundaries}
-          style={`color: rgba(252, 165, 165);
-            background-color: rgb(153, 27, 27);
-            border-radius: 5px;
-            padding: 4px 8px`}
-        >
-          Clear errors and retry
-        </button>
-        <pre style={"margin-top: 8px;width:100%"}>{props.error.stack}</pre>
-      </div>
-    </div>
+    </DefaultErrorBoundary>
   );
 }

package/shared/FileRoutes.tsx

@@ -2,7 +2,7 @@
 import { getRequestEvent, isServer } from "solid-js/web";
 import lazyRoute from "./lazyRoute";
 
-import { PageEvent } from "../server";
+import type { PageEvent } from "../server/types";
 import { pageRoutes as routeConfigs } from "./routes";
 
 export function createRoutes() {
@@ -10,7 +10,10 @@ export function createRoutes() {
     return {
       ...route,
       ...(route.$$route ? route.$$route.require().route : undefined),
-      metadata: { ...(route.$$route ? route.$$route.require().route.metadata : {}), filesystem: true },
+      metadata: {
+        ...(route.$$route ? route.$$route.require().route.metadata : {}),
+        filesystem: true
+      },
       component: lazyRoute(
         route.$component,
         import.meta.env.START_ISLANDS

package/shared/dev-overlay/CodeView.tsx

@@ -0,0 +1,89 @@
+import type { BuiltinLanguage, Highlighter } from 'shikiji';
+import { getHighlighterCore } from 'shikiji/core';
+import { getWasmInlined } from 'shikiji/wasm';
+import { createEffect, createResource, type JSX } from 'solid-js';
+
+import langJS from 'shikiji/langs/javascript.mjs';
+import langJSX from 'shikiji/langs/jsx.mjs';
+import langTSX from 'shikiji/langs/tsx.mjs';
+import langTS from 'shikiji/langs/typescript.mjs';
+import darkPlus from 'shikiji/themes/dark-plus.mjs';
+
+let HIGHLIGHTER: Highlighter;
+
+async function loadHighlighter() {
+  if (!HIGHLIGHTER) {
+    HIGHLIGHTER = await getHighlighterCore({
+      themes: [
+        darkPlus,
+      ],
+      langs: [
+        langJS,
+        langJSX,
+        langTS,
+        langTSX,
+      ],
+      loadWasm: getWasmInlined,
+    });
+  }
+  return HIGHLIGHTER;
+}
+
+export interface CodeViewProps {
+  fileName: string;
+  content: string;
+  line: number;
+}
+
+const RANGE = 8;
+
+export function CodeView(props: CodeViewProps): JSX.Element | null {
+  const lines = () =>
+    props.content.split('\n').map((item, index) => ({
+      index: index + 1,
+      line: item,
+    }));
+
+  const minLine = () => Math.max(props.line - (1 + RANGE), 0);
+  const maxLine = () => Math.min(props.line + RANGE, lines().length - 1);
+
+  let ref: HTMLDivElement | undefined;
+
+  const [data] = createResource(() => (
+    lines()
+    .slice(minLine(), maxLine())
+    .map(item => item.line)
+    .join('\n')
+  ) ,async (value) => {
+    const highlighter = await loadHighlighter();
+    const lang = props.fileName
+      .split(/[#?]/)[0]
+      .split('.')
+      .pop()
+      ?.trim() as BuiltinLanguage;
+    return highlighter.codeToHtml(value, {
+      theme: 'dark-plus',
+      lang,
+    });
+  });
+
+  createEffect(() => {
+    const result = data();
+    if (ref && result) {
+      ref.innerHTML = result;
+
+      const lines = ref.querySelectorAll('span[class="line"]');
+
+      for (let i = 0, len = lines.length; i < len; i++) {
+        const el = lines[i];
+        if ((props.line - minLine() - 1) === i) {
+          el.innerHTML = `<mark style="background-color:#aaaaaa80">${el.innerHTML}</mark>`;
+        }
+      }
+    }
+  });
+
+  return <div ref={ref} class="dev-overlay-code-view" style={{
+    '--dev-overlay-code-view-start': minLine() + 1,
+  }} />;
+}