@typed-assistant/builder 0.0.11 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed-assistant/builder",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "exports": {
     "./appProcess": "./src/appProcess.tsx",
     "./bunInstall": "./src/bunInstall.tsx",
@@ -20,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

@@ -60,6 +60,7 @@ 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}`)
   }
@@ -81,12 +82,11 @@ export async function setupWatcher(
     },
   )
 
-  startWebappServer({getSubprocesses: () => subprocesses})
+  startWebappServer({ getSubprocesses: () => subprocesses })
 
   return subprocesses
 }
 
-
 const setupGitSync = async ({
   gitPullPollDuration,
 }: {

package/src/setupWebserver.tsx

@@ -1,8 +1,17 @@
+import { log } from "@typed-assistant/logger"
 import Convert from "ansi-to-html"
-import type { Context } from "elysia"
-import { Elysia, t } from "elysia"
 import type { Subprocess } from "bun"
-import terminalHtmlUrl from "./webserver/terminal.html" with { type: "url" }
+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()
@@ -38,7 +47,38 @@ export const startWebappServer = async ({
     app: Subprocess<"ignore", "pipe", "pipe">
   }
 }) => {
-  new Elysia()
+  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(
@@ -55,29 +95,32 @@ export const startWebappServer = async ({
       )
     })
     .get("/terminal", Bun.file(terminalHtmlUrl))
+    .get(
+      "/terminal2",
+      () =>
+        new Response(indexHtml, {
+          headers: { "content-type": "text/html" },
+        }),
+    )
     .get("/log.txt", Bun.file("./log.txt"))
-    .get("/*", ({ request }) => {
-      getIngressPath(request)
-      return "Hello Elysia"
-    })
     .ws("/ws", {
-      body: t.Object({
-        id: t.String(),
-      }),
       async open(ws) {
         ws.send("Connected successfully. Awaiting messages...")
         subscribers.set(ws.id, (message) => {
           ws.send(message)
         })
-        console.log("😅😅😅 ~ ws.id:", ws.id)
       },
-      close(ws, code, message) {
-        console.log("ws closed", code, message, ws.id)
-        console.log("😅😅😅 ~ ws.id:", ws.id)
+      close(ws) {
         subscribers.delete(ws.id)
       },
     })
-    .listen(8099)
+
+  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) {

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

@@ -7,7 +7,6 @@
     color: #fff;
   }
 </style>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ansi-to-html/0.7.2/ansi_to_html.js"></script>
 <script>
   function log(msg) {
     document.getElementById("log").innerHTML = msg + "\n"