get beth-stack package working

2023-09-17 22:52:39 -05:00 · 2023-09-17 22:52:39 -05:00 · 2977b96725
parent 039a4f500c
commit 2977b96725
5 changed files with 12 additions and 85 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/elysia-0.7.0-exp.0.tgz
+++ b/elysia-0.7.0-exp.0.tgz
--- a/package.json
+++ b/package.json
@ -4,7 +4,7 @@
  "type": "module",
  "scripts": {
    "dev": "concurrently \"bun run --hot src/main.ts\" \"bun run uno:dev\" \"bun run liveReload\"",
-    "liveReload": "bun run src/beth/liveReload.ts",
+    "liveReload": "bunx beth-stack",
    "start": "bun run uno && bun run src/main.ts",
    "db:push": "bunx drizzle-kit push:sqlite",
    "db:studio": "bunx drizzle-kit studio",
@ -12,7 +12,8 @@
    "uno": "bunx unocss",
    "uno:dev": "bunx unocss --watch",
    "typecheck": "bunx --bun tsc",
-    "cli": "bunx beth-stack foo bar"
+    "cli": "bunx beth-stack foo bar",
+    "reset-cache": "rm -rf /home/whatplan/.bun/install/cache && rm -rf node_modules && bun i"
  },
  "devDependencies": {
    "@kitajs/ts-html-plugin": "^1.0.1",
@ -30,12 +31,12 @@
    "@libsql/client": "0.3.5-pre.4",
    "@lucia-auth/adapter-sqlite": "^2.0.0",
    "@t3-oss/env-core": "^0.6.1",
+    "beth-stack": "0.0.13",
    "drizzle-orm": "^0.28.6",
    "drizzle-typebox": "^0.1.1",
    "elysia": "./elysia-0.7.0-exp.0.tgz",
    "lucia": "^2.6.0",
    "pino-pretty": "^10.2.0",
-    "zod": "^3.22.2",
-    "beth-stack": "0.0.3"
+    "zod": "^3.22.2"
  }
 }
--- a/src/beth/liveReload.ts
+++ b/src/beth/liveReload.ts
@ -1,35 +0,0 @@
-import { Elysia } from "elysia";
-import { type ElysiaWS } from "elysia/ws";
-
-let wsConnections = new Set<ElysiaWS<any, any>>();
-
-function dispatch() {
-  wsConnections.forEach((connection) => {
-    console.log("sending refresh");
-    connection.send("refresh");
-  });
-}
-
-const app = new Elysia()
-  .ws("/ws", {
-    open(ws) {
-      // console.log("open");
-      wsConnections.add(ws);
-    },
-    close(ws) {
-      // console.log("close");
-      wsConnections.delete(ws);
-    },
-    message(ws, message) {
-      // console.log("message", message);
-    },
-  })
-  .get("/restart", () => {
-    // console.log("recieved restart");
-    dispatch();
-  })
-  .listen(3001);
-
-console.log(
-  `🦊 Livereload running ${app.server?.hostname}:${app.server?.port}`
-);
--- a/src/components/base.tsx
+++ b/src/components/base.tsx
@ -1,6 +1,11 @@
 import { type PropsWithChildren } from "beth-stack/jsx";
+import { liveReloadScript } from "beth-stack/dev";
+import { htmxExtensionScript } from "beth-stack";
 import { config } from "../config";

+const safeScript =
+  config.env.NODE_ENV === "development" ? liveReloadScript() : "";
+
 export const BaseHtml = ({ children }: PropsWithChildren) => (
  <html>
    <head>
@ -8,58 +13,14 @@ export const BaseHtml = ({ children }: PropsWithChildren) => (
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>THE BETH STACK</title>
      <script src="https://unpkg.com/htmx.org@1.9.5"></script>
-      <script>
-        {`
-        (function () {
-          htmx.defineExtension("revalidate", {
-            onEvent: function (name, evt) {
-              if (name === "htmx:configRequest") {
-                var revalidationTag = evt.srcElement.getAttribute("hx-revalidate");
-                console.log("revalidationTag", revalidationTag) 
-                if (revalidationTag) {
-                  // Split the string into an array based on comma and trim spaces
-                  var tags = revalidationTag.split(',').map(function(tag) {
-                      return tag.trim();
-                  });
-
-                  // Convert array to JSON and set it to the header
-                  evt.detail.headers["HX-Revalidate"] = JSON.stringify(tags);
-                }
-              }
-            },
-          });
-        })();
-        `}
-      </script>
+      <script>{htmxExtensionScript}</script>
      <script src="https://unpkg.com/hyperscript.org@0.9.11"></script>
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css"
      />
      <link rel="stylesheet" href="/public/dist/unocss.css" />
-      <script>
-        {`
-        (function () {
-          let socket = new WebSocket("ws://localhost:3001/ws");
-
-          socket.onopen = function(e) {
-            console.log("connected")
-          };
-
-          socket.onmessage = function(event) {
-            location.reload();
-          };
-
-          socket.onclose = function(event) {
-            console.log("closed");
-          };
-
-          socket.onerror = function(error) {
-            console.log("error: " + error.message);
-          };
-        })();
-        `}
-      </script>
+      <script>{safeScript}</script>
    </head>
    <body hx-ext="revalidate">{children}</body>
  </html>