@ddd-ts/event-tree-viewer 0.0.0-eventviz.10

package/src/index.css

@@ -0,0 +1,205 @@
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@font-face {
+    font-family: "Supreme Variable";
+    src: url("./assets/fonts/Supreme-Variable.woff2") format("woff2-variations");
+    font-weight: 100 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Supreme Variable";
+    src: url("./assets/fonts/Supreme-VariableItalic.woff2") format("woff2-variations");
+    font-weight: 100 800;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Monor";
+    src: url("./assets/fonts/Monor_Regular.otf") format("opentype");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Monor";
+    src: url("./assets/fonts/monor-bold.otf") format("opentype");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@custom-variant dark (&:is(.dark *));
+
+.theme-switching,
+.theme-switching *,
+.theme-switching *::before,
+.theme-switching *::after {
+    transition: none !important;
+}
+
+@theme inline {
+    --font-heading: 'Monor', ui-serif, Georgia, serif;
+    --font-display: 'Monor', ui-serif, Georgia, serif;
+    --font-sans: 'Supreme Variable', ui-sans-serif, system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --color-graph-edge: var(--graph-edge);
+    --color-graph-dim: var(--graph-dim);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --graph-edge: oklch(0.73 0 0);
+    --graph-dim: oklch(0.9 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.1913 0 0);
+    --foreground: oklch(0.9851 0 0);
+    --card: oklch(0.2308 0 0);
+    --card-foreground: oklch(0.9851 0 0);
+    --popover: oklch(0.2308 0 0);
+    --popover-foreground: oklch(0.9851 0 0);
+    --primary: oklch(0.9851 0 0);
+    --primary-foreground: oklch(0.2308 0 0);
+    --secondary: oklch(0.2603 0 0);
+    --secondary-foreground: oklch(0.9097 0 0);
+    --muted: oklch(0.2308 0 0);
+    --muted-foreground: oklch(1 0 0 / 50%);
+    --accent: oklch(0.2809 0 0);
+    --accent-foreground: oklch(0.9851 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 7%);
+    --input: oklch(1 0 0 / 12%);
+    --ring: oklch(1 0 0 / 30%);
+    --graph-edge: oklch(0.5 0 0);
+    --graph-dim: oklch(0.3 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.2308 0 0);
+    --sidebar-foreground: oklch(0.9851 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.9851 0 0);
+    --sidebar-accent: oklch(0.2809 0 0);
+    --sidebar-accent-foreground: oklch(0.9851 0 0);
+    --sidebar-border: oklch(1 0 0 / 7%);
+    --sidebar-ring: oklch(1 0 0 / 30%);
+}
+
+.dark [data-slot="popover-content"],
+.dark [data-slot="popover-positioner"] > [role="dialog"] {
+    box-shadow:
+        inset 0 1px 0 0 rgba(255, 255, 255, 0.07),
+        0 2px 8px -1px rgba(0, 0, 0, 0.1),
+        0 12px 28px -4px rgba(0, 0, 0, 0.2),
+        0 24px 48px -12px rgba(0, 0, 0, 0.2);
+}
+
+.dark .surface-elevated {
+    box-shadow:
+        inset 0 1px 0 0 rgba(255, 255, 255, 0.07),
+        0 2px 8px -1px rgba(0, 0, 0, 0.1),
+        0 12px 28px -4px rgba(0, 0, 0, 0.2);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+  button:not(:disabled), [role="button"]:not(:disabled) {
+    cursor: pointer;
+    }
+  html {
+    @apply font-sans;
+    }
+}
+
+@utility scrollbar-hidden {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/main.tsx

@@ -0,0 +1,16 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+
+import "./index.css"
+import App from "./App.tsx"
+
+const queryClient = new QueryClient()
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>
+)

package/src/server/router.ts

@@ -0,0 +1,87 @@
+import fs from "node:fs"
+import path from "node:path"
+import { initTRPC, TRPCError } from "@trpc/server"
+import launchEditor from "launch-editor"
+import { z } from "zod"
+import { engine, type Edge, type Node } from "@ddd-ts/event-tree"
+
+const t = initTRPC.create()
+
+export interface Graph {
+  nodes: readonly Node[]
+  edges: readonly Edge[]
+}
+
+let cache: { root: string; graph: Graph } | null = null
+
+function scan(root: string): Graph {
+  if (cache && cache.root === root) return cache.graph
+  engine.reset()
+  engine.run(root)
+  const toRel = (file: string) =>
+    path.isAbsolute(file) ? path.relative(root, file) : file
+  const nodes = engine.getNodes().map((n) => ({
+    ...n,
+    source: { ...n.source, file: toRel(n.source.file) },
+  })) as Node[]
+  const edges = engine.getEdges().map((e) => ({
+    ...e,
+    source: { ...e.source, file: toRel(e.source.file) },
+  })) as Edge[]
+  const graph: Graph = { nodes, edges }
+  cache = { root, graph }
+  return graph
+}
+
+export function invalidate() {
+  cache = null
+}
+
+export function createRouter(scanRoot: string) {
+  return t.router({
+    graph: t.router({
+      get: t.procedure.query(() => scan(scanRoot)),
+    }),
+    editor: t.router({
+      open: t.procedure
+        .input(
+          z.object({
+            file: z.string().min(1),
+            offset: z.number().int().nonnegative().optional(),
+          })
+        )
+        .mutation(({ input }) => {
+          const absolute = path.isAbsolute(input.file)
+            ? input.file
+            : path.resolve(scanRoot, input.file)
+          if (!fs.existsSync(absolute)) {
+            throw new TRPCError({
+              code: "NOT_FOUND",
+              message: `file not found: ${input.file}`,
+            })
+          }
+          let spec = absolute
+          if (input.offset != null) {
+            const text = fs.readFileSync(absolute, "utf8")
+            const before = text.slice(0, input.offset)
+            const line = before.split("\n").length
+            const column = input.offset - before.lastIndexOf("\n")
+            spec = `${absolute}:${line}:${column}`
+          }
+          return new Promise<{ ok: true }>((resolve, reject) => {
+            launchEditor(spec, (fileName, error) => {
+              reject(
+                new TRPCError({
+                  code: "INTERNAL_SERVER_ERROR",
+                  message: `launch-editor failed for ${fileName}: ${error}`,
+                })
+              )
+            })
+            queueMicrotask(() => resolve({ ok: true }))
+          })
+        }),
+    }),
+  })
+}
+
+export type AppRouter = ReturnType<typeof createRouter>

package/src/server/vite-plugin.ts

@@ -0,0 +1,99 @@
+import path from "node:path"
+import type { PluginOption, ViteDevServer } from "vite"
+
+function nodeRequestToFetch(
+  req: import("node:http").IncomingMessage,
+  base: string
+): Request {
+  const url = new URL(req.url ?? "/", base)
+  const headers = new Headers()
+  for (const [k, v] of Object.entries(req.headers)) {
+    if (v == null) continue
+    if (Array.isArray(v)) v.forEach((vv) => headers.append(k, vv))
+    else headers.set(k, v)
+  }
+  const init: RequestInit = { method: req.method, headers }
+  if (req.method && !["GET", "HEAD"].includes(req.method)) {
+    const chunks: Buffer[] = []
+    return new Request(url, {
+      ...init,
+      body: new ReadableStream({
+        start(controller) {
+          req.on("data", (c) => chunks.push(c))
+          req.on("end", () => {
+            controller.enqueue(Buffer.concat(chunks))
+            controller.close()
+          })
+          req.on("error", (e) => controller.error(e))
+        },
+      }),
+      duplex: "half",
+    } as RequestInit & { duplex: "half" })
+  }
+  return new Request(url, init)
+}
+
+async function writeFetchResponseToNode(
+  fetchRes: Response,
+  res: import("node:http").ServerResponse
+) {
+  res.statusCode = fetchRes.status
+  fetchRes.headers.forEach((v, k) => res.setHeader(k, v))
+  if (fetchRes.body) {
+    const reader = fetchRes.body.getReader()
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      res.write(value)
+    }
+  }
+  res.end()
+}
+
+export function trpcPlugin(scanRoot: string): PluginOption {
+  return {
+    name: "event-tree-trpc",
+    apply: "serve",
+    async configureServer(server: ViteDevServer) {
+      const [{ createRouter, invalidate }, { fetchRequestHandler }] =
+        await Promise.all([
+          server.ssrLoadModule("/src/server/router.ts") as Promise<
+            typeof import("./router")
+          >,
+          import("@trpc/server/adapters/fetch"),
+        ])
+      const router = createRouter(scanRoot)
+      const endpoint = "/trpc"
+
+      server.middlewares.use(endpoint, async (req, res) => {
+        try {
+          req.url = endpoint + (req.url ?? "")
+          const request = nodeRequestToFetch(
+            req,
+            `http://${req.headers.host ?? "localhost"}`
+          )
+          const response = await fetchRequestHandler({
+            endpoint,
+            req: request,
+            router,
+          })
+          await writeFetchResponseToNode(response, res)
+        } catch (error) {
+          server.config.logger.error(
+            `[event-tree-trpc] ${(error as Error).message}`
+          )
+          res.statusCode = 500
+          res.end(String(error))
+        }
+      })
+
+      server.watcher.add(path.resolve(scanRoot, "**/*.ts"))
+      const onChange = (file: string) => {
+        if (file.startsWith(scanRoot)) invalidate()
+      }
+      server.watcher.on("change", onChange)
+      server.watcher.on("add", onChange)
+      server.watcher.on("unlink", onChange)
+    },
+  }
+}

package/vite.config.ts

@@ -0,0 +1,36 @@
+import path from "node:path"
+import tailwindcss from "@tailwindcss/vite"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+import { trpcPlugin } from "./src/server/vite-plugin"
+
+const SCAN_ROOT = path.resolve(process.env.EVENTVIZ_SCAN_ROOT ?? process.cwd())
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss(), trpcPlugin(SCAN_ROOT)],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  optimizeDeps: {
+    include: [
+      "use-sync-external-store/shim",
+      "use-sync-external-store/shim/with-selector",
+      "elkjs/lib/elk.bundled.js",
+      "@base-ui/react/button",
+      "@base-ui/react/checkbox",
+      "@base-ui/react/dialog",
+      "@base-ui/react/input",
+      "@base-ui/react/merge-props",
+      "@base-ui/react/popover",
+      "@base-ui/react/scroll-area",
+      "@base-ui/react/select",
+      "@base-ui/react/separator",
+      "@base-ui/react/toggle",
+      "@base-ui/react/toggle-group",
+      "@base-ui/react/use-render",
+    ],
+  },
+})