Add server function inspector

Author: lxsmnsyc

apps/tests/src/routes/server-function-ping.tsx

@@ -1,18 +1,38 @@
 import { createEffect, createSignal } from "solid-js";
 
-async function ping(value: string) {
+async function sleep(value: unknown, ms: number) {
+  return new Promise((res) => {
+    setTimeout(res, ms, value);
+  })
+}
+
+async function ping(value: Date) {
   "use server";
 
-  return await Promise.resolve(value);
+  const current = [
+    value,
+    {
+      name: 'example',
+      async *[Symbol.asyncIterator]() {
+        yield sleep('foo', 5000);
+        yield sleep('bar', 5000);
+        yield sleep('baz', 5000);
+      }
+    }
+  ];
+
+  return current;
 }
 
 export default function App() {
   const [output, setOutput] = createSignal<{ result?: boolean }>({});
 
   createEffect(async () => {
-    const value = `${Math.random() * 1000}`;
+    const value = new Date();
     const result = await ping(value);
-    setOutput(prev => ({ ...prev, result: value === result }));
+    await ping(value);
+    console.log(result);
+    setOutput((prev) => ({ ...prev, result: value.toString() === result[0].toString() }));
   });
 
   return (

apps/tests/test-results/.last-run.json

@@ -56,13 +56,13 @@
     "path-to-regexp": "^8.2.0",
     "pathe": "^2.0.3",
     "radix3": "^1.1.2",
-    "seroval": "^1.4.1",
+    "seroval": "^1.4.2",
     "seroval-plugins": "^1.4.0",
     "shiki": "^1.26.1",
     "solid-js": "^1.9.9",
     "source-map-js": "^1.2.1",
     "srvx": "^0.9.1",
-    "terracotta": "^1.0.6",
+    "terracotta": "^1.1.0",
     "vite-plugin-solid": "^2.11.9"
   },
   "engines": {

packages/start/package.json

@@ -111,7 +111,7 @@ export function serializeToJSONStream(value: any) {
   });
 }
 
-class SerovalChunkReader {
+export class SerovalChunkReader {
   reader: ReadableStreamDefaultReader<Uint8Array>;
   buffer: Uint8Array;
   done: boolean;

packages/start/src/server/serialization.ts

@@ -1,5 +1,8 @@
-
 import { type Component } from "solid-js";
+import {
+  pushRequest,
+  pushResponse,
+} from "../shared/server-function-inspector/server-function-tracker";
 import {
   deserializeJSONStream,
   deserializeJSStream,
@@ -9,13 +12,13 @@ import {
 
 let INSTANCE = 0;
 
-function createRequest(
+async function createRequest(
   base: string,
   id: string,
   instance: string,
   options: RequestInit,
 ) {
-  return fetch(base, {
+  const request = new Request(base, {
     method: "POST",
     ...options,
     headers: {
@@ -24,6 +27,14 @@ function createRequest(
       "X-Server-Instance": instance,
     },
   });
+  if (import.meta.env.DEV) {
+    pushRequest(id, instance, request.clone());
+  }
+  const response = await fetch(request);
+  if (import.meta.env.DEV) {
+    pushResponse(id, instance, response.clone());
+  }
+  return response;
 }
 async function fetchServerFunction(
   base: string,
@@ -54,7 +65,7 @@ async function fetchServerFunction(
           headers: {
             ...options.headers,
             "x-serialized": "true",
-            "Content-Type": "text/plain"
+            "Content-Type": "text/plain",
           },
         }));
 
@@ -82,7 +93,7 @@ async function fetchServerFunction(
     result = await clone.text();
   } else if (contentType?.startsWith("application/json")) {
     result = await clone.json();
-  } else if (response.headers.get('x-serialized')) {
+  } else if (response.headers.get("x-serialized")) {
     if (import.meta.env.SEROVAL_MODE === "js") {
       result = await deserializeJSStream(instance, clone);
     } else {

packages/start/src/server/server-runtime.ts

@@ -1,40 +1,50 @@
 // @refresh skip
-import { ErrorBoundary as DefaultErrorBoundary, catchError, type ParentProps } from "solid-js";
+import {
+  catchError,
+  ErrorBoundary as DefaultErrorBoundary,
+  type ParentProps,
+} from "solid-js";
 import { isServer } from "solid-js/web";
-import { HttpStatusCode } from "./HttpStatusCode.ts";
 import { DevOverlay } from "./dev-overlay/index.tsx";
+import { HttpStatusCode } from "./HttpStatusCode.ts";
+import { ServerFunctionInspector } from "./server-function-inspector/index.tsx";
 
 export const ErrorBoundary =
   import.meta.env.DEV && import.meta.env.START_DEV_OVERLAY
-    ? (props: ParentProps) => <DevOverlay>{props.children}</DevOverlay>
+    ? (props: ParentProps) => (
+      <DevOverlay>
+        <ServerFunctionInspector />
+        {props.children}
+      </DevOverlay>
+    )
     : (props: ParentProps) => {
-        const message = isServer
-          ? "500 | Internal Server Error"
-          : "Error | Uncaught Client Exception";
-        return (
-          <DefaultErrorBoundary
-            fallback={error => {
-              console.error(error);
-              return (
-                <>
-                  <span style="font-size:1.5em;text-align:center;position:fixed;left:0px;bottom:55%;width:100%;">
-                    {message}
-                  </span>
-                  <HttpStatusCode code={500} />
-                </>
-              );
-            }}
-          >
-            {props.children}
-          </DefaultErrorBoundary>
-        );
-      };
+      const message = isServer
+        ? "500 | Internal Server Error"
+        : "Error | Uncaught Client Exception";
+      return (
+        <DefaultErrorBoundary
+          fallback={(error) => {
+            console.error(error);
+            return (
+              <>
+                <span style="font-size:1.5em;text-align:center;position:fixed;left:0px;bottom:55%;width:100%;">
+                  {message}
+                </span>
+                <HttpStatusCode code={500} />
+              </>
+            );
+          }}
+        >
+          {props.children}
+        </DefaultErrorBoundary>
+      );
+    };
 
 export const TopErrorBoundary = (props: ParentProps) => {
   let isError = false;
   const res = catchError(
     () => props.children,
-    err => {
+    (err) => {
       console.error(err);
       isError = !!err;
     },