@typed-assistant/builder 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed-assistant/builder",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "exports": {
     "./appProcess": "./src/appProcess.tsx",
     "./bunInstall": "./src/bunInstall.tsx",
@@ -8,6 +8,8 @@
     "./pullChanges": "./src/pullChanges.tsx"
   },
   "dependencies": {
+    "ansi-to-html": "^0.7.2",
+    "elysia": "^0.8.9",
     "@mdi/svg": "^7.3.67",
     "ignore": "^5.3.0"
   },
@@ -18,8 +20,8 @@
     "home-assistant-js-websocket": "^8.2.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.5",
     "@typed-assistant/utils": "0.0.7"
   },
   "peerDependencies": {

package/src/appProcess.tsx

@@ -8,6 +8,7 @@ import { ONE_SECOND } from "@typed-assistant/utils/durations"
 import { getHassAPI, getSupervisorAPI } from "@typed-assistant/utils/getHassAPI"
 import { pullChanges } from "./pullChanges"
 import { withErrorHandling } from "@typed-assistant/utils/withErrorHandling"
+import { startWebappServer } from "./setupWebserver"
 
 type Processes = Awaited<ReturnType<typeof buildAndStartAppProcess>>
 
@@ -22,7 +23,10 @@ async function buildAndStartAppProcess(
 async function startApp(appSourceFile: string = "src/entry.tsx") {
   log("🚀 Starting app...")
   const path = join(process.cwd(), appSourceFile)
-  return Bun.spawn(["bun", path], { env: { ...process.env, FORCE_COLOR: "1" } })
+  return Bun.spawn(["bun", path], {
+    stderr: "pipe",
+    env: { ...process.env, FORCE_COLOR: "1" },
+  })
 }
 
 async function kill(process: Subprocess) {
@@ -56,10 +60,10 @@ export async function setupWatcher(
   ...args: Parameters<typeof buildAndStartAppProcess>
 ) {
   const { data: addonInfo, error: addonInfoError } = await getAddonInfo()
+  console.log("😅😅😅 ~ addonInfo:", addonInfo)
   if (addonInfoError) {
     log(`🚨 Failed to get addon info: ${addonInfoError}`)
   }
-  console.log("ℹ️ ~ addonInfo:", addonInfo)
   await setupGitSync()
 
   let subprocesses = await buildAndStartAppProcess(...args)
@@ -78,6 +82,8 @@ export async function setupWatcher(
     },
   )
 
+  startWebappServer({ getSubprocesses: () => subprocesses })
+
   return subprocesses
 }
 
@@ -104,6 +110,11 @@ const shouldIgnoreFileOrFolder = (filename: string) =>
   ig.ignores(relative(process.cwd(), filename))
 
 const restartAddon = async () => {
+  if (!process.env.SUPERVISOR_TOKEN) {
+    log("♻️ Can't restart addon. Exiting...")
+    process.exit(0)
+    return
+  }
   log("♻️ Restarting addon...")
   await getHassAPI(`http://supervisor/addons/self/restart`, { method: "POST" })
 }

package/src/setupWebserver.tsx

@@ -0,0 +1,146 @@
+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 { basename, join } from "path"
+
+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 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>
+>()
+
+const getReader = (stream: ReadableStream<Uint8Array>) => {
+  const cachedReader = readers.get(stream)
+  if (!cachedReader) {
+    readers.forEach((_reader, cachedStream) => {
+      readers.delete(cachedStream)
+    })
+  }
+  const reader = cachedReader ?? stream.getReader()
+  readers.set(stream, reader)
+  return reader
+}
+
+const subscribers = new Map<number, (message: string) => void>()
+
+let lastMessage = ""
+
+export const startWebappServer = async ({
+  getSubprocesses,
+}: {
+  getSubprocesses: () => {
+    app: Subprocess<"ignore", "pipe", "pipe">
+  }
+}) => {
+  const buildResult = await Bun.build({
+    entrypoints: [tsEntryPoint],
+    outdir: "./build",
+    define: {
+      "process.env.BASE_PATH": "'lmao'",
+    },
+  })
+  if (!buildResult.success) {
+    for (const message of buildResult.logs) {
+      // Bun will pretty print the message object
+      console.error(message)
+    }
+    throw new Error("Build failed")
+  }
+  log("🛠️ Web server built successfully")
+
+  await $`bunx tailwindcss -c ${tailwindConfig} -i ${cssFile} -o ${cssOutputFile}`.quiet()
+  log("💄 Tailwind built successfully")
+
+  const indexHtml = (await Bun.file(indexHtmlFilePath).text())
+    .replace("{{ STYLESHEET }}", `/assets/${basename(cssOutputFile)}`)
+    .replace(
+      "{{ SCRIPTS }}",
+      buildResult.outputs
+        .map(
+          (output) =>
+            `<script type="module" src="/assets/${basename(output.path)}"></script>`,
+        )
+        .join("\n"),
+    )
+
+  const server = new Elysia()
+    .get("/", ({ request }) => {
+      getIngressPath(request)
+      return new Response(
+        `
+    <html>
+      <meta charset="UTF-8">
+      <body>
+        <a href="${getIngressPath(request)}/log.txt">Logs</a>
+        <a href="${getIngressPath(request)}/terminal">Terminal</a>
+      </body>
+    </html>
+  `,
+        { headers: { "content-type": "text/html" } },
+      )
+    })
+    .get("/terminal", Bun.file(terminalHtmlUrl))
+    .get(
+      "/terminal2",
+      () =>
+        new Response(indexHtml, {
+          headers: { "content-type": "text/html" },
+        }),
+    )
+    .get("/log.txt", Bun.file("./log.txt"))
+    .ws("/ws", {
+      async open(ws) {
+        ws.send("Connected successfully. Awaiting messages...")
+        subscribers.set(ws.id, (message) => {
+          ws.send(message)
+        })
+      },
+      close(ws) {
+        subscribers.delete(ws.id)
+      },
+    })
+
+  server.get(`/assets/${basename(cssOutputFile)}`, Bun.file(cssOutputFile))
+  buildResult.outputs.forEach((output) => {
+    server.get(`/assets/${basename(output.path)}`, Bun.file(output.path))
+  })
+
+  server.listen(8099)
+
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    const stdoutReader = getReader(getSubprocesses().app.stdout)
+    const { value } = await stdoutReader.read()
+
+    const convertedMessage = convert.toHtml(decoder.decode(value))
+    if (convertedMessage !== "") {
+      lastMessage = convertedMessage
+    }
+    if (convertedMessage === "") {
+      subscribers.forEach((send) =>
+        send(
+          "Process is returning an empty string. This was the last non-empty message:\n\n" +
+            lastMessage,
+        ),
+      )
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      continue
+    }
+    subscribers.forEach((send) => send(convertedMessage))
+  }
+}

package/src/webserver/Terminal.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react"
+
+const basePath = process.env.BASE_PATH
+console.log("😅😅😅 ~ basePath:", basePath)
+
+const getWS = () => {
+  const url = new URL(window.location.href)
+  const endPathname = url.pathname.split("/")
+  url.pathname = url.pathname.replace(
+    `/${endPathname[endPathname.length - 1]}`,
+    "/ws",
+  )
+  url.protocol = "ws:"
+  const ws = new WebSocket(url)
+
+  return ws
+}
+
+export function Terminal() {
+  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])
+
+  return (
+    <>
+      <h1 className="text-white text-2xl">
+        Terminal{" "}
+        {ws.readyState === WebSocket.OPEN ? (
+          <span className="py-1 px-2 rounded-sm bg-emerald-300 text-emerald-800 text-xs uppercase">
+            Connected
+          </span>
+        ) : (
+          <span className="py-1 px-2 rounded-sm bg-rose-300 text-rose-800 text-xs uppercase">
+            Disconnected
+          </span>
+        )}
+      </h1>
+      <p>
+        Logs are also available at <a href="/log.txt">/log.txt</a>
+      </p>
+
+      <pre className="" dangerouslySetInnerHTML={{ __html: content }} />
+    </>
+  )
+}

package/src/webserver/index.html

@@ -0,0 +1,9 @@
+<html class="h-full">
+  <head>
+    <link rel="stylesheet" href="{{ STYLESHEET }}" />
+  </head>
+  <body class="bg-slate-950 text-white h-full">
+    <div id="root"></div>
+    {{ SCRIPTS }}
+  </body>
+</html>

package/src/webserver/index.tsx

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

package/src/webserver/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/webserver/tailwind.config.js

@@ -0,0 +1,13 @@
+import { join } from "path"
+
+// eslint-disable-next-line no-undef
+const content = [join(__dirname, "./**/*.tsx"), join(__dirname, "./**/*.html")]
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content,
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/src/webserver/terminal.html

@@ -0,0 +1,55 @@
+<!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>