@typed-assistant/builder 0.0.18 → 0.0.20

package/.eslintrc.js

@@ -2,5 +2,6 @@
 module.exports = {
   root: true,
   extends: ["@typed-assistant/eslint-config/react-internal.js"],
+  plugins: ['html'],  
   parserOptions: {},
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed-assistant/builder",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "exports": {
     "./appProcess": "./src/appProcess.tsx",
     "./bunInstall": "./src/bunInstall.tsx",
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "ansi-to-html": "^0.7.2",
+    "@elysiajs/eden": "^0.8.1",
     "elysia": "^0.8.9",
     "@mdi/svg": "^7.3.67",
     "ignore": "^5.3.0",
@@ -18,12 +19,14 @@
   "devDependencies": {
     "@types/node": "^20.10.6",
     "@types/eslint": "^8.56.1",
+    "eslint-plugin-html": "^7.1.0",
     "eslint": "^8.56.0",
     "home-assistant-js-websocket": "^8.2.0",
+    "ts-toolbelt": "^9.6.0",
     "typescript": "^5.3.3",
     "@typed-assistant/eslint-config": "0.0.4",
-    "@typed-assistant/logger": "0.0.5",
     "@typed-assistant/typescript-config": "0.0.4",
+    "@typed-assistant/logger": "0.0.6",
     "@typed-assistant/utils": "0.0.7"
   },
   "peerDependencies": {

package/src/appProcess.tsx

@@ -46,16 +46,6 @@ async function killAndRestartApp(subprocesses: Processes) {
   return newSubprocesses
 }
 
-function setupWatcherInternal(...args: Parameters<typeof watch>) {
-  const [directory, callback] = args
-  if (typeof directory !== "string") throw new Error("Directory must be string")
-
-  log("👀 Watching directory:", directory)
-  const watcher = watch(directory, { recursive: true }, callback)
-
-  return watcher
-}
-
 export async function setupWatcher(
   ...args: Parameters<typeof buildAndStartAppProcess>
 ) {
@@ -63,14 +53,17 @@ export async function setupWatcher(
   if (addonInfoError) {
     log(`🚨 Failed to get addon info: ${addonInfoError}`)
   }
-  console.log("😅😅😅 ~ addonInfo:", Object.keys(addonInfo))
   await setupGitSync()
 
   let subprocesses = await buildAndStartAppProcess(...args)
 
-  setupWatcherInternal(
-    join(process.cwd(), "src"),
+  const directory = join(process.cwd(), "./src")
+  log("👀 Watching directory:", directory)
+  const watcher = watch(
+    directory,
+    { recursive: true },
     async function onFileChange(event, filename) {
+      console.log("😅😅😅 ~ filename:", filename)
       if (!filename) return
       if (shouldIgnoreFileOrFolder(filename)) return
       log(`⚠️ Change to ${filename} detected.`)
@@ -82,15 +75,16 @@ export async function setupWatcher(
     },
   )
 
-  console.log(
-    "😅😅😅 ~ addonInfo?.ingress_entry:",
-    addonInfo?.data.ingress_entry,
-  )
   startWebappServer({
     basePath: addonInfo?.data.ingress_entry ?? "",
     getSubprocesses: () => subprocesses,
   })
 
+  process.on("SIGINT", () => {
+    console.log("👋 Closing watcher...")
+    watcher.close()
+  })
+
   return subprocesses
 }
 
@@ -133,3 +127,10 @@ const getAddonInfo = async () => {
     data: { ingress_entry: string }
   }>("/addons/self/info")
 }
+
+process.on("SIGINT", () => {
+  setTimeout(() => {
+    console.log("👋 ...")
+    process.exit(0)
+  }, 0)
+})

package/src/setupWebserver.tsx

@@ -2,23 +2,24 @@ import { log } from "@typed-assistant/logger"
 import Convert from "ansi-to-html"
 import type { Subprocess } from "bun"
 import { $ } from "bun"
-import type { Context } from "elysia"
-import { Elysia } from "elysia"
+import { Elysia, t } from "elysia"
+import { watch } from "fs"
 import { basename, join } from "path"
+import type { List, String } from "ts-toolbelt"
 
-const indexHtmlFilePath = `${import.meta.dir}/webserver/index.html`
-const cssFile = `${import.meta.dir}/webserver/input.css`
-const terminalHtmlUrl = `${import.meta.dir}/webserver/terminal.html`
-const tsEntryPoint = `${import.meta.dir}/webserver/index.tsx`
-const tailwindConfig = `${import.meta.dir}/webserver/tailwind.config.js`
-const cssOutputFile = join(process.cwd(), `./build/output.css`)
+const indexHtmlFilePath = `${import.meta.dir}/webserver/index.html` as const
+const cssFile = `${import.meta.dir}/webserver/input.css` as const
+const tsEntryPoint = `${import.meta.dir}/webserver/index.tsx` as const
+const tailwindConfig =
+  `${import.meta.dir}/webserver/tailwind.config.js` as const
+const cssOutputFile = join(
+  process.cwd(),
+  `./build/output.css`,
+) as `${string}/output.css`
 
 const convert = new Convert()
 const decoder = new TextDecoder()
 
-const getIngressPath = (req: Context["request"]) =>
-  req.headers.get("x-ingress-path") ?? ""
-
 const readers = new Map<
   ReadableStream<Uint8Array>,
   ReadableStreamDefaultReader<Uint8Array>
@@ -37,6 +38,7 @@ const getReader = (stream: ReadableStream<Uint8Array>) => {
 }
 
 const subscribers = new Map<number, (message: string) => void>()
+const logSubscribers = new Map<number, () => void>()
 
 let lastMessage = ""
 
@@ -49,7 +51,6 @@ export const startWebappServer = async ({
     app: Subprocess<"ignore", "pipe", "pipe">
   }
 }) => {
-  console.log("😅😅😅 ~ basePath:", basePath)
   const buildResult = await Bun.build({
     entrypoints: [tsEntryPoint],
     outdir: "./build",
@@ -72,14 +73,14 @@ export const startWebappServer = async ({
   const indexHtml = (await Bun.file(indexHtmlFilePath).text())
     .replace(
       "{{ STYLESHEET }}",
-      `${basePath}/assets/${basename(cssOutputFile)}`,
+      `${basePath}/assets/${getBaseName(cssOutputFile)}`,
     )
     .replace(
       "{{ SCRIPTS }}",
       buildResult.outputs
         .map(
           (output) =>
-            `<script type="module" src="${basePath}/assets/${basename(output.path)}"></script>`,
+            `<script type="module" src="${basePath}/assets/${getBaseName(output.path)}"></script>`,
         )
         .join("\n"),
     )
@@ -92,9 +93,34 @@ export const startWebappServer = async ({
           headers: { "content-type": "text/html" },
         }),
     )
-    .get("/terminal", Bun.file(terminalHtmlUrl))
-    .get("/log.txt", Bun.file("./log.txt"))
+    .get(
+      "/log.txt",
+      async ({ query }) => {
+        return getLogsFromFile(query.limit)
+      },
+      {
+        query: t.Object({
+          limit: t.Optional(t.String()),
+        }),
+      },
+    )
+    .ws("/logsws", {
+      query: t.Object({
+        limit: t.Optional(t.String()),
+      }),
+      response: t.Object({ logs: t.Array(t.String()) }),
+      async open(ws) {
+        ws.send(await getLogsFromFile(ws.data.query.limit))
+        logSubscribers.set(ws.id, async () => {
+          ws.send(await getLogsFromFile(ws.data.query.limit))
+        })
+      },
+      close(ws) {
+        logSubscribers.delete(ws.id)
+      },
+    })
     .ws("/ws", {
+      response: t.String(),
       async open(ws) {
         ws.send("Connected successfully. Awaiting messages...")
         subscribers.set(ws.id, (message) => {
@@ -105,17 +131,16 @@ export const startWebappServer = async ({
         subscribers.delete(ws.id)
       },
     })
-
-  server.get(
-    `/assets/${basename(cssOutputFile)}`,
-    () =>
-      new Response(Bun.file(cssOutputFile), {
-        headers: { "content-type": "text/css" },
-      }),
-  )
+    .get(
+      `/assets/${getBaseName(cssOutputFile)}`,
+      () =>
+        new Response(Bun.file(cssOutputFile), {
+          headers: { "content-type": "text/css" },
+        }),
+    )
   buildResult.outputs.forEach((output) => {
     server.get(
-      `/assets/${basename(output.path)}`,
+      `/assets/${getBaseName(output.path)}`,
       () =>
         new Response(Bun.file(output.path), {
           headers: { "content-type": "text/javascript" },
@@ -126,6 +151,19 @@ export const startWebappServer = async ({
   server.listen(8099)
   log("🌐 Web server listening on port 8099")
 
+  const directory = join(process.cwd(), ".")
+  log("👀 Watching log.txt")
+  const watcher = watch(directory, function onFileChange(_event, filename) {
+    if (filename === "log.txt") {
+      logSubscribers.forEach((send) => send())
+    }
+  })
+
+  process.on("SIGINT", () => {
+    console.log("👋 Closing log watcher...")
+    watcher.close()
+  })
+
   // eslint-disable-next-line no-constant-condition
   while (true) {
     const stdoutReader = getReader(getSubprocesses().app.stdout)
@@ -147,4 +185,22 @@ export const startWebappServer = async ({
     }
     subscribers.forEach((send) => send(convertedMessage))
   }
+
+  return server
+}
+
+export type WebServer = Awaited<ReturnType<typeof startWebappServer>>
+
+const getLogsFromFile = async (limit?: string) => {
+  try {
+    const lines = (await Bun.file("./log.txt").text()).split("\n")
+    const logFile = limit ? lines.slice(0, Number(limit)) : lines
+    return { logs: logFile }
+  } catch (e) {
+    return { logs: ["Error reading log.txt file"] }
+  }
+}
+
+const getBaseName = <const TString extends string>(path: TString) => {
+  return basename(path) as List.Last<String.Split<TString, "/">>
 }

package/src/webserver/App.tsx

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from "react"
+import { Terminal } from "./Terminal"
+import { app } from "./api"
+import { useWS } from "./useWS"
+
+const basePath = process.env.BASE_PATH ?? ""
+
+const App = () => {
+  return (
+    <div className="grid grid-cols-3">
+      <div className="col-span-2">
+        <Terminal basePath={basePath} />
+      </div>
+      <div className="col-span-1">
+        <Logs />
+      </div>
+    </div>
+  )
+}
+
+const Logs = () => {
+  const [limit, setLimit] = useState(20)
+  const [logs, setLogs] = useState<string[]>([])
+
+  const ws = useWS({
+    subscribe: useCallback(
+      () => app.logsws.subscribe({ $query: { limit: limit.toString() } }),
+      [limit],
+    ),
+    onMessage: useCallback((event) => {
+      setLogs(JSON.parse(event.data).logs)
+    }, []),
+  })
+
+  return (
+    <div className="p-4 text-xs">
+      <div className="flex gap-4 mb-4 items-center justify-between">
+        <h2 className="mb-2 text-2xl">Logs</h2>
+        <div>
+          <div className="flex gap-2">
+            <label htmlFor="limit">Limit</label>
+            <input
+              className="border border-gray-300 rounded-md text-slate-800 px-2"
+              id="limit"
+              onChange={(e) => setLimit(Number(e.target.value))}
+              size={8}
+              value={limit}
+            />
+          </div>
+        </div>
+      </div>
+
+      <pre className="overflow-x-auto">
+        <ul>
+          {logs.map((log) => (
+            <li key={log}>{log}</li>
+          ))}
+        </ul>
+      </pre>
+    </div>
+  )
+}
+
+export default App

package/src/webserver/Terminal.tsx

@@ -1,43 +1,19 @@
-import { useEffect, useState } from "react"
+import { useCallback, useState } from "react"
+import { app } from "./api"
+import { useWS } from "./useWS"
 
-const getWS = () => {
-  const url = new URL(window.location.href)
-  url.pathname = `${process.env.BASE_PATH}/ws`
-  url.protocol = "ws:"
-  const ws = new WebSocket(url)
-
-  return ws
-}
-
-export function Terminal() {
+export function Terminal({ basePath }: { basePath: string }) {
   const [content, setContent] = useState("")
-  const [ws, setWS] = useState<WebSocket>(() => getWS())
-
-  useEffect(() => {
-    let timeout: NodeJS.Timeout
-
-    ws.onclose = function () {
-      timeout = setTimeout(() => {
-        if (ws.readyState === WebSocket.OPEN) return
-        setWS(getWS())
-      }, 1000)
-    }
-
-    ws.onmessage = function (event) {
-      setContent(event.data)
-    }
-
-    return () => {
-      clearTimeout(timeout)
-      ws.close()
-    }
-  }, [ws])
+  const ws = useWS({
+    subscribe: useCallback(() => app.ws.subscribe(), []),
+    onMessage: useCallback((event) => setContent(event.data), []),
+  })
 
   return (
     <>
       <h1 className="text-white text-2xl">
         Terminal{" "}
-        {ws.readyState === WebSocket.OPEN ? (
+        {ws.ws.readyState === WebSocket.OPEN ? (
           <span className="py-1 px-2 rounded-sm bg-emerald-300 text-emerald-800 text-xs uppercase">
             Connected
           </span>
@@ -48,7 +24,7 @@ export function Terminal() {
         )}
       </h1>
       <p>
-        Logs are also available at <a href="/log.txt">/log.txt</a>
+        <a href={`${basePath}/log.txt`}>View log.txt</a>
       </p>
 
       <pre className="" dangerouslySetInnerHTML={{ __html: content }} />

package/src/webserver/api.tsx

@@ -0,0 +1,7 @@
+import { edenTreaty } from "@elysiajs/eden"
+import type { WebServer } from "../setupWebserver"
+import type { EdenTreaty } from "@elysiajs/eden/treaty"
+
+export const app: EdenTreaty.Create<WebServer> = edenTreaty<WebServer>(
+  window.location.origin + process.env.BASE_PATH,
+)

package/src/webserver/index.tsx

@@ -1,7 +1,7 @@
 import * as ReactDOM from "react-dom/client"
-import { Terminal } from "./Terminal"
+import App from "./App"
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
-root.render(<Terminal />)
+root.render(<App />)
 
 export default {}

package/src/webserver/useWS.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react"
+import { app } from "./api"
+
+export function useWS({
+  onMessage,
+  subscribe,
+}: {
+  onMessage: (event: MessageEvent) => void
+  subscribe: () => ReturnType<(typeof app.ws | typeof app.logsws)["subscribe"]>
+}) {
+  const [ws, setWS] = useState(subscribe)
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout
+
+    ws.ws.onclose = function () {
+      timeout = setTimeout(() => {
+        if (ws.ws.readyState === WebSocket.OPEN) return
+        setWS(subscribe)
+      }, 1000)
+    }
+
+    ws.ws.onmessage = function (event) {
+      onMessage(event)
+    }
+
+    return () => {
+      clearTimeout(timeout)
+      ws.ws.close()
+    }
+  }, [ws, onMessage, subscribe])
+
+  return ws
+}

package/tsconfig.json

@@ -1,5 +1,10 @@
 {
   "extends": "@typed-assistant/typescript-config/react-app.json",
+  "compilerOptions": {
+    "paths": {
+      "@elysiajs/eden": ["./node_modules/@elysiajs/eden/"],
+    },
+  },
   "include": ["src"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist"],
 }

package/src/webserver/terminal.html

@@ -1,55 +0,0 @@
-<!doctype html>
-<h1>Terminal</h1>
-<pre id="log"></pre>
-<style>
-  html {
-    background: #000;
-    color: #fff;
-  }
-</style>
-<script>
-  function log(msg) {
-    document.getElementById("log").innerHTML = msg + "\n"
-  }
-
-  const getWS = () => {
-    const url = new URL(window.location.href)
-    url.pathname = url.pathname.replace("/terminal", "/ws")
-    url.protocol = "ws:"
-    return new WebSocket(
-      // "ws://192.168.86.11:8123/api/hassio_ingress/wmQTEkorulChwnbeWV1GvPSwBsEpGzYlyLR70rdHzH0/ws",
-      // "ws://localhost:8099/ws",
-      url,
-    )
-  }
-
-  const setupWs = (ws) => {
-    ws.onopen = function () {
-      console.log("CONNECT")
-    }
-    ws.onclose = function () {
-      console.log("DISCONNECT")
-      document.getElementById("log").innerHTML +=
-        "Disconnected. Retrying..." + "\n"
-      retry()
-    }
-    ws.onmessage = function (event) {
-      log(event.data)
-    }
-  }
-
-  var ws = getWS()
-  console.log("😅😅😅 ~ ws:", ws)
-  setupWs(ws)
-
-  const retry = () => {
-    console.log("Retrying in 1 second...")
-    setTimeout(() => {
-      if (ws.readyState === WebSocket.OPEN) {
-        return
-      }
-      ws = getWS()
-      setupWs(ws)
-    }, 1000)
-  }
-</script>