@solidjs/start 0.4.1 → 0.4.3

package/config/index.d.ts

@@ -3,12 +3,17 @@ import { InlineConfig } from "vite";
 
 type SolidStartInlineConfig = Omit<InlineConfig, "router"> & {
     start?: {
+        /**
+         * true: streaming mode
+         * false: csr only
+         * async: ssr is in async mode
+         */
         ssr?: boolean | "async",
         extensions?: string[],
         server?: AppOptions['server'],
         appRoot?: string,
         middleware?: string,
-        //islands?: boolean TODO: Get PROD bugs working probably missing release
+        islands?: boolean
     }
 }
 

package/config/index.js

@@ -50,15 +50,15 @@ export function defineConfig(baseConfig = {}) {
   if (!start.ssr) {
     server = { ...server, prerender: { routes: ["/"] } };
   }
-  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
     },
@@ -78,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)))
           }),
@@ -119,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)))
           }),
@@ -159,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,8 +10,10 @@ 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 {
@@ -19,7 +21,7 @@ import {
   getHeader,
   getRequestURL,
   readBody,
-  readFormData,
+  readRawBody,
   setHeader
 } from "vinxi/server";
 import { getFetchEvent } from "../server/middleware";
@@ -39,10 +41,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() {
@@ -89,7 +91,15 @@ async function handleServerFunction(event) {
     contentType.startsWith("multipart/form-data") ||
     contentType.startsWith("application/x-www-form-urlencoded")
   ) {
-    parsed.push(await readFormData(event));
+    // Temporary workaround until https://github.com/unjs/nitro/issues/1721 is resolved
+    // parsed.push(await readFormData(event));
+
+    const request = new Request(getRequestURL(event), {
+      method: event.method,
+      headers: event.headers,
+      body: await readRawBody(event)
+    });
+    parsed.push(await request.formData());
   } else {
     parsed = fromJSON(await readBody(event), {
       plugins: [
@@ -102,12 +112,17 @@ async function handleServerFunction(event) {
         RequestPlugin,
         ResponsePlugin,
         URLSearchParamsPlugin,
-        URLPlugin,
-      ],
+        URLPlugin
+      ]
     });
   }
   try {
-    const result = await provideRequestEvent(getFetchEvent(event), () => action(...parsed));
+    const evt = getFetchEvent(event);
+    const result = await provideRequestEvent(evt, () => {
+      /* @ts-ignore */
+      sharedConfig.context = { event: evt };
+      return action(...parsed);
+    });
 
     // handle no JS success case
     if (!instance) {
@@ -117,16 +132,20 @@ async function handleServerFunction(event) {
         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;`
+              }
+            : {})
         }
       });
     }
-
+    if (typeof result === "string") return new Response(result);
     setHeader(event, "content-type", "text/javascript");
     return serializeToStream(instance, result);
   } catch (x) {
@@ -138,12 +157,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.1",
+  "version": "0.4.3",
   "type": "module",
   "author": "Ryan Carniato",
   "publishConfig": {
@@ -38,16 +38,21 @@
     }
   },
   "devDependencies": {
-    "solid-js": "^1.8.7",
-    "vinxi": "0.0.52"
+    "solid-js": "^1.8.8",
+    "vinxi": "0.1.1"
   },
   "dependencies": {
-    "@vinxi/plugin-directives": "0.0.44",
-    "@vinxi/server-components": "0.0.44",
-    "@vinxi/server-functions": "0.0.45",
+    "@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/StartServer.tsx

@@ -26,7 +26,8 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
         const match = context.routerMatches[0][i];
         if (match.metadata && match.metadata.filesystem) {
           const segment = current.find(r => r.path === match.path);
-          const part = import.meta.env.MANIFEST["client"].inputs[segment["$component"].src];
+          const part = import.meta.env.MANIFEST[import.meta.env.START_ISLANDS ? "ssr" : "client"]
+            .inputs[segment["$component"].src];
           const asset = await part.assets();
           assets.push.apply(assets, asset);
           current = segment.children;
@@ -34,26 +35,32 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
       }
     }
     // dedupe assets
-    assets = [...new Map(assets.map(item => [item.attrs.key, item])).values()].filter(
-      asset =>
-        asset.attrs.rel === "modulepreload" &&
-        !context.assets.find(a => a.attrs.key === asset.attrs.key)
+    assets = [...new Map(assets.map(item => [item.attrs.key, item])).values()].filter(asset =>
+      import.meta.env.START_ISLANDS
+        ? false
+        : asset.attrs.rel === "modulepreload" &&
+          !context.assets.find(a => a.attrs.key === asset.attrs.key)
     );
   });
 
-  useAssets(() => assets.length ? assets.map(m => renderAsset(m)) : undefined);
+  useAssets(() => (assets.length ? assets.map(m => renderAsset(m)) : undefined));
 
   return (
     <NoHydration>
       {docType as unknown as any}
       <props.document
-        assets={<>{context.assets.map(m => renderAsset(m))}</>}
-        scripts={
+        assets={
           <>
             <HydrationScript />
+            {context.assets.map(m => renderAsset(m))}
+          </>
+        }
+        scripts={
+          <>
             <script innerHTML={`window.manifest = ${JSON.stringify(context.manifest)}`} />
             <script
               type="module"
+              async
               src={
                 import.meta.env.MANIFEST["client"].inputs[
                   import.meta.env.MANIFEST["client"].handler

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/page-event.tsx

@@ -35,7 +35,9 @@ export async function createPageEvent(ctx: FetchEvent) {
     assets: [
       ...(await clientManifest.inputs[clientManifest.handler].assets()),
       ...(import.meta.env.START_ISLANDS
-        ? await serverManifest.inputs[serverManifest.handler].assets()
+        ? (await serverManifest.inputs[serverManifest.handler].assets()).filter(
+            s => (s as any).attrs.rel !== "modulepreload"
+          )
         : [])
     ],
     initialSubmission: initFromFlash(ctx),

package/server/spa/StartServer.tsx

@@ -10,11 +10,14 @@ export function StartServer(props) {
     <NoHydration>
       {docType as unknown as any}
       <props.document
-        assets={<>{context.assets.map(m => renderAsset(m))}</>}
+        assets={
+          <>
+            {context.assets.map(m => renderAsset(m))}
+          </>
+        }
         scripts={
           <>
             <script innerHTML={`window.manifest = ${JSON.stringify(context.manifest)}`} />
-            <script>$R = [];</script>
             <script
               type="module"
               src={

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/dev-overlay/CodeView.tsx

@@ -0,0 +1,74 @@
+import * as shikiji from 'shikiji';
+import { createEffect, createResource, type JSX } from 'solid-js';
+
+let HIGHLIGHTER: shikiji.Highlighter;
+
+async function loadHighlighter() {
+  if (!HIGHLIGHTER) {
+    HIGHLIGHTER = await shikiji.getHighlighter({
+      themes: ['dark-plus'],
+      langs: ['js', 'ts', 'jsx', 'tsx'],
+    });
+  }
+  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 shikiji.BuiltinLanguage;
+    await highlighter.loadLanguage(lang);
+    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,
+  }} />;
+}