@solidjs/start 0.4.8 → 0.4.10

package/config/server-handler.js

@@ -22,6 +22,13 @@ import {
 } from "vinxi/server";
 import { getFetchEvent } from "../server/middleware";
 
+function createChunk(data) {
+  const bytes = data.length;
+  const baseHex = bytes.toString(16);
+  const totalHex = '00000000'.substring(0, 8 - baseHex.length) + baseHex; // 32-bit
+  return new TextEncoder().encode(`;0x${totalHex};${data}`);
+}
+
 function serializeToStream(id, value) {
   return new ReadableStream({
     start(controller) {
@@ -40,15 +47,12 @@ function serializeToStream(id, value) {
           URLPlugin
         ],
         onSerialize(data, initial) {
-          const result = initial ? `(${getCrossReferenceHeader(id)},${data})` : data;
-          controller.enqueue(new TextEncoder().encode(`${result};\n`));
+          controller.enqueue(createChunk(initial ? `(${getCrossReferenceHeader(id)},${data})` : data));
         },
         onDone() {
-          // controller.enqueue(`delete $R["${id}"];\n`);
           controller.close();
         },
         onError(error) {
-          // controller.enqueue(`delete $R["${id}"];\n`);
           controller.error(error);
         }
       });

package/config/server-runtime.jsx

@@ -13,54 +13,94 @@ import {
 } from 'seroval-plugins/web';
 import { createIslandReference } from "../server/islands";
 
-async function deserializeStream(id, response) {
-  if (!response.body) {
-    throw new Error("missing body");
+class SerovalChunkReader {
+  constructor(stream) {
+    this.reader = stream.getReader();
+    this.buffer = '';
+    this.done = false;
   }
-  const reader = response.body.getReader();
 
-  async function pop() {
-    const result = await reader.read();
-    if (!result.done) {
-      const serialized = new TextDecoder().decode(result.value);
-      const splits = serialized.split("\n");
-      for (const split of splits) {
-        if (split !== "") {
-          deserialize(split);
-        }
-      }
-      await pop();
+  async readChunk() {
+    // if there's no chunk, read again
+    const chunk = await this.reader.read();
+    if (!chunk.done) {
+      // repopulate the buffer
+      this.buffer += new TextDecoder().decode(chunk.value);
+    } else {
+      this.done = true;
     }
   }
 
-  const result = await reader.read();
-  if (result.done) {
-    throw new Error("Unexpected end of body");
-  }
-  const serialized = new TextDecoder().decode(result.value);
-  let pending = true;
-  let revived;
-  const splits = serialized.split("\n");
-  for (const split of splits) {
-    if (split !== "") {
-      const current = deserialize(split);
-      if (pending) {
-        revived = current;
-        pending = false;
+  async next() {
+    // Check if the buffer is empty
+    if (this.buffer === '') {
+      // if we are already done...
+      if (this.done) {
+        return {
+          done: true,
+          value: undefined,
+        };
       }
+      // Otherwise, read a new chunk
+      await this.readChunk();
+      return await this.next();
     }
+    // Read the "byte header"
+    // The byte header tells us how big the expected data is
+    // so we know how much data we should wait before we
+    // deserialize the data
+    const bytes = Number.parseInt(this.buffer.substring(1, 11), 16); // ;0x00000000;
+    // Check if the buffer has enough bytes to be parsed
+    while (bytes > this.buffer.length - 12) {
+      // If it's not enough, and the reader is done
+      // then the chunk is invalid.
+      if (this.done) {
+        throw new Error('Malformed server function stream.')
+      }
+      // Otherwise, we read more chunks
+      await this.readChunk();
+    }
+    // Extract the exact chunk as defined by the byte header
+    const partial = this.buffer.substring(12, 12 + bytes);
+    // The rest goes to the buffer
+    this.buffer = this.buffer.substring(12 + bytes);
+    // Deserialize the chunk
+    return {
+      done: false,
+      value: deserialize(partial),
+    };
   }
 
-  pop().then(
-    () => {
-      delete $R[id];
-    },
-    () => {
-      // no-op
+  async drain() {
+    while (true) {
+      const result = await this.next();
+      if (result.done) {
+        break;
+      }
     }
-  );
+  }
+}
+
+async function deserializeStream(id, response) {
+  if (!response.body) {
+    throw new Error("missing body");
+  }
+  const reader = new SerovalChunkReader(response.body);
+
+  const result = await reader.next();
+
+  if (!result.done) {
+    reader.drain().then(
+      () => {
+        delete $R[id];
+      },
+      () => {
+        // no-op
+      }
+    );
+  }
 
-  return revived;
+  return result.value;
 }
 
 let INSTANCE = 0;
@@ -108,7 +148,7 @@ async function fetchServerFunction(base, id, args) {
   let result;
   if (contentType && contentType.startsWith("text/plain")) {
     result = await response.text();
-  } else if(contentType && contentType.startsWith("application/json")) {
+  } else if (contentType && contentType.startsWith("application/json")) {
     result = await response.json();
   } else {
     result = deserializeStream(instance, response);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "type": "module",
   "author": "Ryan Carniato",
   "publishConfig": {
@@ -43,13 +43,13 @@
     }
   },
   "devDependencies": {
-    "solid-js": "^1.8.10",
-    "vinxi": "0.1.1"
+    "solid-js": "^1.8.11",
+    "vinxi": "^0.1.4"
   },
   "dependencies": {
-    "@vinxi/plugin-directives": "^0.1.0",
-    "@vinxi/server-components": "^0.1.0",
-    "@vinxi/server-functions": "^0.1.0",
+    "@vinxi/plugin-directives": "^0.1.2",
+    "@vinxi/server-components": "^0.1.2",
+    "@vinxi/server-functions": "^0.1.2",
     "defu": "^6.1.2",
     "error-stack-parser": "^2.1.4",
     "html-to-image": "^1.11.11",

package/server/middleware.ts

@@ -1,8 +1,6 @@
 import {
   defineMiddleware,
-  EventHandlerRequest,
   getRequestIP,
-  getRequestURL,
   H3Event,
   sendWebResponse,
   toWebRequest
@@ -18,15 +16,11 @@ const eventTraps = {
   }
 };
 
-export function createFetchEvent(event: H3Event<EventHandlerRequest>): FetchEvent {
-  event.web ||
-    (event.web = {
-      url: getRequestURL(event),
-      request: toWebRequest(event)
-    });
+export function createFetchEvent(event: H3Event): FetchEvent {
+  const request = toWebRequest(event);
   return new Proxy(
     {
-      request: event.web.request,
+      request: request,
       clientAddress: getRequestIP(event),
       locals: {},
       // @ts-ignore

package/shared/dev-overlay/CodeView.tsx

@@ -1,8 +1,9 @@
 import type { BuiltinLanguage, Highlighter } from 'shikiji';
-import { getHighlighterCore } from 'shikiji/core';
-import { getWasmInlined } from 'shikiji/wasm';
+import { getHighlighterCore, loadWasm } from 'shikiji/core';
 import { createEffect, createResource, type JSX } from 'solid-js';
 
+import url from 'shikiji/onig.wasm?url';
+
 import langJS from 'shikiji/langs/javascript.mjs';
 import langJSX from 'shikiji/langs/jsx.mjs';
 import langTSX from 'shikiji/langs/tsx.mjs';
@@ -13,6 +14,7 @@ let HIGHLIGHTER: Highlighter;
 
 async function loadHighlighter() {
   if (!HIGHLIGHTER) {
+    await loadWasm(await fetch(url))
     HIGHLIGHTER = await getHighlighterCore({
       themes: [
         darkPlus,
@@ -23,7 +25,6 @@ async function loadHighlighter() {
         langTS,
         langTSX,
       ],
-      loadWasm: getWasmInlined,
     });
   }
   return HIGHLIGHTER;
@@ -77,7 +78,7 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
       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>`;
+          el.classList.add('dev-overlay-error-line');
         }
       }
     }

package/shared/dev-overlay/styles.css

@@ -281,4 +281,8 @@
   display: inline-block;
   text-align: right;
   color: rgba(115, 138, 148, .4)
+}
+
+.dev-overlay-error-line {
+  background-color: rgba(239, 68, 68, .4);
 }

package/shared/lazyRoute.tsx

@@ -1,60 +1,54 @@
 /// <reference types="vinxi/types/client" />
 import { createComponent, lazy, onCleanup } from "solid-js";
-import { appendStyles, cleanupStyles, updateStyles } from "vinxi/css";
+import { appendStyles, cleanupStyles, updateStyles, preloadStyles } from "vinxi/css";
 
 import { renderAsset } from "../server/renderAsset";
 
-export default function lazyRoute(
-	component,
-	clientManifest,
-	serverManifest,
-	exported = "default",
-) {
-	return lazy(async () => {
-		if (import.meta.env.DEV) {
-			let manifest = import.meta.env.SSR ? serverManifest : clientManifest;
+export default function lazyRoute(component, clientManifest, serverManifest, exported = "default") {
+  return lazy(async () => {
+    if (import.meta.env.DEV) {
+      let manifest = import.meta.env.SSR ? serverManifest : clientManifest;
 
-			const mod = await manifest.inputs[component.src].import();
-			if (!mod[exported]) console.error(`Module ${component.src} does not export ${exported}`)
-			const Component = mod[exported];
-			let assets = await clientManifest.inputs?.[component.src].assets();
-			const styles = assets.filter((asset) => asset.tag === "style");
+      const mod = await manifest.inputs[component.src].import();
+      if (!mod[exported]) console.error(`Module ${component.src} does not export ${exported}`);
+      const Component = mod[exported];
+      let assets = await clientManifest.inputs?.[component.src].assets();
+      const styles = assets.filter(asset => asset.tag === "style");
 
-			if (typeof window !== "undefined" && import.meta.hot) {
-				import.meta.hot.on("css-update", (data) => {
-					updateStyles(styles, data);
-				});
-			}
+      if (typeof window !== "undefined" && import.meta.hot) {
+        import.meta.hot.on("css-update", data => {
+          updateStyles(styles, data);
+        });
+      }
 
-			const Comp = (props) => {
-				if (typeof window !== "undefined") {
-					appendStyles(styles);
-				}
+      const Comp = props => {
+        if (typeof window !== "undefined") {
+          appendStyles(styles);
+        }
 
-				onCleanup(() => {
-					if (typeof window !== "undefined") {
-						// remove style tags added by vite when a CSS file is imported
-						cleanupStyles(styles);
-					}
-				});
-				return [
-					...assets.map((asset) => renderAsset(asset)),
-					createComponent(Component, props),
-				];
-			};
-			return { default: Comp };
-		} else {
-			const mod = await component.import();
-			const Component = mod[exported];
-			let assets = await clientManifest.inputs?.[component.src].assets();
-			const styles = assets.filter((asset) => asset.tag === "style" || asset.attrs.rel === "stylesheet");
-			const Comp = (props) => {
-				return [
-					...styles.map((asset) => renderAsset(asset)),
-					createComponent(Component, props),
-				];
-			};
-			return { default: Comp };
-		}
-	});
+        onCleanup(() => {
+          if (typeof window !== "undefined") {
+            // remove style tags added by vite when a CSS file is imported
+            cleanupStyles(styles);
+          }
+        });
+        return [...assets.map(asset => renderAsset(asset)), createComponent(Component, props)];
+      };
+      return { default: Comp };
+    } else {
+      const mod = await component.import();
+      const Component = mod[exported];
+      let assets = await clientManifest.inputs?.[component.src].assets();
+      const styles = assets.filter(
+        asset => asset.tag === "style" || asset.attrs.rel === "stylesheet"
+      );
+      if (typeof window !== "undefined") {
+        preloadStyles(styles);
+      }
+      const Comp = props => {
+        return [...styles.map(asset => renderAsset(asset)), createComponent(Component, props)];
+      };
+      return { default: Comp };
+    }
+  });
 }