@typed-assistant/builder 0.0.68 → 0.0.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed-assistant/builder",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "exports": {
     "./appProcess": "./src/appProcess.tsx",
     "./bunInstall": "./src/bunInstall.tsx",
@@ -26,8 +26,8 @@
     "ts-toolbelt": "^9.6.0",
     "typescript": "^5.3.3",
     "@typed-assistant/eslint-config": "0.0.10",
-    "@typed-assistant/logger": "0.0.18",
     "@typed-assistant/typescript-config": "0.0.9",
+    "@typed-assistant/logger": "0.0.19",
     "@typed-assistant/utils": "0.0.16"
   },
   "peerDependencies": {

package/src/webserver/Logs.tsx

@@ -1,82 +1,66 @@
-import type { LogSchema } from "@typed-assistant/logger"
 import { levels } from "@typed-assistant/logger/levels"
 import { getPrettyTimestamp } from "@typed-assistant/utils/getPrettyTimestamp"
-import { useCallback, useState } from "react"
+import { useState } from "react"
 import { AppSection } from "./AppSection"
 import { WSIndicator } from "./WSIndicator"
-import { app } from "./api"
+import { useLogStore } from "./logStore"
 import { buttonStyle } from "./styles"
-import { useWS } from "./useWS"
 
 export const Logs = ({ basePath }: { basePath: string }) => {
-  const [limit, setLimit] = useState(200)
-  const [level, setLevel] = useState<
-    "trace" | "debug" | "info" | "warn" | "error" | "fatal"
-  >("info")
   const [dateTimeVisibility, setDateTimeVisibility] = useState<
     "hidden" | "timeOnly" | "visible"
   >("timeOnly")
-  const [logs, setLogs] = useState<LogSchema[]>([])
-
-  const ws = useWS({
-    subscribe: useCallback(
-      () =>
-        app.logsws.subscribe({ $query: { level, limit: limit.toString() } }),
-      [level, limit],
-    ),
-    onMessage: useCallback((event) => {
-      console.log("😅😅😅 ~ event:", event)
-      setLogs((JSON.parse(event.data) as { logs: LogSchema[] }).logs)
-    }, []),
-  })
+  const { level, setLevel, logs, ws } = useLogStore()
+  console.log("😅😅😅 ~ logs:", logs)
 
   return (
-    <AppSection
-      renderHeader={() => (
-        <>
-          <h2 className="mb-2 text-2xl flex items-baseline gap-3">
-            Logs <WSIndicator ws={ws.ws} />
-          </h2>
+    <>
+      <AppSection
+        renderHeader={() => (
+          <>
+            <h2 className="mb-2 text-2xl flex items-baseline gap-3">
+              Logs <WSIndicator ws={ws?.ws} />
+            </h2>
 
-          <a className={buttonStyle} href={`${basePath}/log.txt?limit=500`}>
-            View raw log.txt
-          </a>
+            <a className={buttonStyle} href={`${basePath}/log.txt?limit=500`}>
+              View raw log.txt
+            </a>
 
-          <div className="flex flex-wrap gap-2">
-            <div className="flex gap-2">
-              <label htmlFor="dateTimeVisibility">Date/Time</label>
-              <select
-                className="border border-gray-300 rounded-md text-slate-800 px-2"
-                id="dateTimeVisibility"
-                onChange={(e) =>
-                  setDateTimeVisibility(
-                    e.target.value as typeof dateTimeVisibility,
-                  )
-                }
-                value={dateTimeVisibility}
-              >
-                <option value="hidden">Hidden</option>
-                <option value="timeOnly">Time only</option>
-                <option value="visible">Visible</option>
-              </select>
-            </div>
-            <div className="flex gap-2">
-              <label htmlFor="dateTimeVisibility">Level</label>
-              <select
-                className="border border-gray-300 rounded-md text-slate-800 px-2"
-                id="level"
-                onChange={(e) => setLevel(e.target.value as typeof level)}
-                value={level}
-              >
-                <option value="trace">Trace</option>
-                <option value="debug">Debug</option>
-                <option value="info">Info</option>
-                <option value="warn">Warn</option>
-                <option value="error">Error</option>
-                <option value="fatal">Fatal</option>
-              </select>
-            </div>
-            {/* <div className="flex gap-2">
+            <div className="flex flex-wrap gap-2">
+              <div className="flex gap-2">
+                <label htmlFor="dateTimeVisibility">Date/Time</label>
+                <select
+                  className="border border-gray-300 rounded-md text-slate-800 px-2"
+                  id="dateTimeVisibility"
+                  onChange={(e) =>
+                    setDateTimeVisibility(
+                      e.target.value as typeof dateTimeVisibility,
+                    )
+                  }
+                  value={dateTimeVisibility}
+                >
+                  <option value="hidden">Hidden</option>
+                  <option value="timeOnly">Time only</option>
+                  <option value="visible">Visible</option>
+                </select>
+              </div>
+              <div className="flex gap-2">
+                <label htmlFor="dateTimeVisibility">Level</label>
+                <select
+                  className="border border-gray-300 rounded-md text-slate-800 px-2"
+                  id="level"
+                  onChange={(e) => setLevel(e.target.value as typeof level)}
+                  value={level}
+                >
+                  <option value="trace">Trace</option>
+                  <option value="debug">Debug</option>
+                  <option value="info">Info</option>
+                  <option value="warn">Warn</option>
+                  <option value="error">Error</option>
+                  <option value="fatal">Fatal</option>
+                </select>
+              </div>
+              {/* <div className="flex gap-2">
               <label htmlFor="limit">Limit</label>
               <input
                 className="border border-gray-300 rounded-md text-slate-800 px-2"
@@ -86,43 +70,45 @@ export const Logs = ({ basePath }: { basePath: string }) => {
                 value={limit}
               />
             </div> */}
-          </div>
-        </>
-      )}
-    >
-      <pre>
-        <ul>
-          {logs
-            .filter((log) => log.level >= (levels[level] ?? 0))
-            .sort(
-              (a, b) => new Date(b.time).getTime() - new Date(a.time).getTime(),
-            )
-            .map((log) => {
-              return (
-                <li key={log.id} className="flex gap-1">
-                  <span className="text-slate-400 mr-2">
-                    {dateTimeVisibility === "hidden"
-                      ? null
-                      : dateTimeVisibility === "timeOnly"
-                        ? new Date(log.time).toLocaleTimeString("en-GB")
-                        : getPrettyTimestamp(log.time)}
-                  </span>
-                  <div className="flex">
-                    {log.emoji}{" "}
-                    {log.additionalDetails ? (
-                      <details>
-                        <summary>{log.msg}</summary>
-                        <pre>{log.additionalDetails}</pre>
-                      </details>
-                    ) : (
-                      log.msg
-                    )}
-                  </div>
-                </li>
+            </div>
+          </>
+        )}
+      >
+        <pre>
+          <ul>
+            {logs
+              .filter((log) => log.level >= (levels[level] ?? 0))
+              .sort(
+                (a, b) =>
+                  new Date(b.time).getTime() - new Date(a.time).getTime(),
               )
-            })}
-        </ul>
-      </pre>
-    </AppSection>
+              .map((log) => {
+                return (
+                  <li key={log.id} className="flex gap-1">
+                    <span className="text-slate-400 mr-2">
+                      {dateTimeVisibility === "hidden"
+                        ? null
+                        : dateTimeVisibility === "timeOnly"
+                          ? new Date(log.time).toLocaleTimeString("en-GB")
+                          : getPrettyTimestamp(log.time)}
+                    </span>
+                    <div className="flex">
+                      {log.emoji}{" "}
+                      {log.additionalDetails ? (
+                        <details>
+                          <summary>{log.msg}</summary>
+                          <pre>{log.additionalDetails}</pre>
+                        </details>
+                      ) : (
+                        log.msg
+                      )}
+                    </div>
+                  </li>
+                )
+              })}
+          </ul>
+        </pre>
+      </AppSection>
+    </>
   )
 }

package/src/webserver/WSIndicator.tsx

@@ -1,5 +1,5 @@
-export function WSIndicator({ ws }: { ws: WebSocket }) {
-  return ws.readyState === WebSocket.OPEN ? (
+export function WSIndicator({ ws }: { ws?: WebSocket }) {
+  return ws?.readyState === WebSocket.OPEN ? (
     <div
       title="Connected"
       className="w-4 h-4 rounded-full bg-emerald-300 text-emerald-800 text-xs uppercase"

package/src/webserver/index.html

@@ -1,7 +1,14 @@
 <!doctype html>
 <html class="h-full">
   <head>
+    <meta charset="UTF-8"></head>
     <link rel="stylesheet" href="{{ STYLESHEET }}" />
+    <link
+      rel="shortcut icon"
+      href="data:image/svg+xml,<svg xmlns=%22https://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛠️</text></svg>"
+      type="image/svg+xml"
+      sizes="any"
+    />
   </head>
   <body class="bg-slate-950 text-white h-full max-h-dvh">
     <div id="root" class="h-full max-h-dvh"></div>

package/src/webserver/logStore.tsx

@@ -0,0 +1,86 @@
+// This is an example of a third-party store
+// that you might need to integrate with React.
+
+import type { LogSchema } from "@typed-assistant/logger"
+import type { levels } from "@typed-assistant/logger/levels"
+import { app } from "./api"
+import type { EdenTreaty } from "@elysiajs/eden/treaty"
+import { useMemo, useState, useSyncExternalStore } from "react"
+
+let listeners: (() => void)[] = []
+let logStore = {
+  logs: [] as LogSchema[],
+  ws: undefined as ReturnType<(typeof app.logsws)["subscribe"]> | undefined,
+}
+export const getLogStore = ({
+  level,
+  limit,
+}: {
+  level: keyof typeof levels
+  limit: string
+}) => ({
+  subscribe: (listener: () => void) => {
+    listeners = [...listeners, listener]
+    const ws = app.logsws.subscribe({
+      $query: { level, limit },
+    })
+    logStore = {
+      logs: [],
+      ws,
+    }
+    emitChange()
+
+    ws.on("open", (event) => {
+      logStore = {
+        logs: logStore.logs,
+        ws: logStore.ws,
+      }
+      emitChange()
+    })
+
+    ws.on("message", (event) => {
+      logStore = {
+        logs: (event as EdenTreaty.OnMessage<{ logs: LogSchema[] }>).data.logs,
+        ws,
+      }
+      emitChange()
+    })
+
+    return () => {
+      logStore.ws?.close()
+      listeners = listeners.filter((l) => l !== listener)
+    }
+  },
+
+  getSnapshot: () => logStore,
+})
+
+function emitChange() {
+  for (let listener of listeners) {
+    listener()
+  }
+}
+
+export const useLogStore = () => {
+  const [limit, setLimit] = useState(200)
+  const [level, setLevel] = useState<
+    "trace" | "debug" | "info" | "warn" | "error" | "fatal"
+  >("info")
+  const logStore = useMemo(
+    () => getLogStore({ level, limit: limit.toString() }),
+    [level, limit],
+  )
+  const { logs, ws } = useSyncExternalStore(
+    logStore.subscribe,
+    logStore.getSnapshot,
+  )
+
+  return {
+    limit,
+    setLimit,
+    level,
+    setLevel,
+    logs,
+    ws,
+  }
+}