feat: improve ui

.changeset/five-icons-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@yeger/streams': minor
+---
+
+implement streams package

.changeset/gentle-foxes-destroy.md

@@ -0,0 +1,5 @@
+---
+'@yeger/debounce': minor
+---
+
+add optional args to callback

.changeset/slimy-countries-help.md

@@ -0,0 +1,6 @@
+---
+'@yeger/turbo-graph-ui': major
+'@yeger/turbo-graph': major
+---
+
+re-implement visualization

package.json

@@ -14,6 +14,7 @@
     "bundlesize": "nr turbo run bundlesize",
     "changeset": "changeset",
     "ci": "cross-env COVERAGE=true nr turbo run build bundlesize generate lint test check:publish check:tsc check:vue --output-logs=errors-only",
+    "clean": "rimraf -g **/.tsbuildinfo **/tsconfig.tsbuildinfo",
     "dev": "nr turbo run dev --parallel",
     "fix": "nr turbo run lint lint:root -- --fix",
     "codegen": "nr turbo run codegen",
@@ -48,6 +49,7 @@
     "husky": "8.0.3",
     "lint-staged": "13.2.3",
     "publint": "0.2.0",
+    "rimraf": "5.0.1",
     "syncpack": "10.9.3",
     "turbo": "1.10.12",
     "vercel": "31.2.3",

packages/debounce/src/main.ts

@@ -4,12 +4,15 @@
  * @param delay - A delay after which the callback will be invoked.
  * @returns The debounced callback.
  */
-export function debounce(cb: () => void, delay?: number) {
+export function debounce<Args extends any[]>(
+  cb: (...args: Args) => void,
+  delay?: number,
+) {
   let timeout: any
-  return () => {
+  return (...args: Args) => {
     if (timeout !== undefined) {
       clearTimeout(timeout)
     }
-    timeout = setTimeout(() => cb(), delay)
+    timeout = setTimeout(() => cb(...args), delay)
   }
 }

packages/streams/package.json

@@ -13,9 +13,14 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "require": "./dist/index.umd.js",
-      "import": "./dist/index.mjs"
+      "import": {
+        "types": "./dist/types/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.umd.js"
+      }
     }
   },
   "main": "dist/index.umd.js",
@@ -38,7 +43,7 @@
   "devDependencies": {
     "@yeger/tsconfig": "workspace:*",
     "typescript": "5.1.6",
-    "vite": "4.4.4",
+    "vite": "4.4.9",
     "vite-plugin-lib": "workspace:*"
   },
   "publishConfig": {

packages/streams/src/sync.ts

@@ -28,8 +28,11 @@ export abstract class Stream<T> implements Iterable<T> {
     return new Map(stream)
   }
 
-  public toRecord(fn: Processor<T, string>): Record<string, T> {
-    return Object.fromEntries(this.map((x) => [fn(x), x] as const))
+  public toRecord<U>(
+    key: Processor<T, string>,
+    value: Processor<T, U>,
+  ): Record<string, U> {
+    return Object.fromEntries(this.map((x) => [key(x), value?.(x)] as const))
   }
 
   public abstract [Symbol.iterator](): IterableIterator<T>

packages/streams/vite.config.ts

@@ -1,3 +1,5 @@
+import process from 'node:process'
+
 import { defineConfig } from 'vite'
 import { library } from 'vite-plugin-lib'
 

packages/tsconfig/cli.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "declaration": false,
     "module": "CommonJS",
+    "noEmit": false,
     "sourceMap": false
   }
 }

packages/tsconfig/next.json

@@ -2,6 +2,7 @@
   "extends": "./web.json",
   "compilerOptions": {
     "noEmit": true,
-    "incremental": true
+    "incremental": true,
+    "plugins": [{ "name": "next" }]
   }
 }

packages/turbo-graph-ui/app/globals.css

@@ -0,0 +1,120 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 4.9%;
+
+    --primary: 0 0% 11.2%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 11.2%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 0 0% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 0%;
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 4.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 4.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 11.2%;
+
+    --secondary: 0 0% 17.5%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 17.5%;
+    --muted-foreground: 0 0% 65.1%;
+
+    --accent: 0 0% 17.5%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 0% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 17.5%;
+    --input: 0 0% 17.5%;
+    --ring: hsl(212.7, 0%, 83.9);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.react-flow__edge {
+  pointer-events: none !important;
+}
+
+.react-flow__controls button {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  border: 1px solid hsl(var(--foreground));
+  border-bottom: none;
+}
+
+.react-flow__controls button:hover {
+  background-color: hsl(var(--secondary));
+}
+
+.react-flow__controls button:first-child {
+  border-radius: 5px 5px 0 0;
+}
+
+.react-flow__controls button:last-child {
+  border-bottom: 1px solid hsl(var(--foreground));
+  border-radius: 0 0 5px 5px;
+}
+
+.react-flow__controls button path {
+  fill: hsl(var(--foreground));
+}
+
+.react-flow__controls button:disabled path {
+  fill: hsl(var(--muted-foreground));
+}
+
+.react-flow__attribution {
+  background: hsl(var(--background)) !important;
+}
+
+.react-flow__attribution a {
+  color: hsl(var(--muted-foreground)) !important;
+}
+
+.react-flow__minimap {
+  background: hsl(var(--background)) !important;
+}

packages/turbo-graph-ui/app/layout.tsx

@@ -0,0 +1,24 @@
+import { FilterInput, TaskInput } from '../components/GraphInputs'
+import './globals.css'
+
+export default function RootLayout({
+  // Layouts must accept a children prop.
+  // This will be populated with nested layouts or pages
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className="dark h-full w-full">
+      <body className="m-0 h-full w-full">
+        <main className="relative flex h-full w-full flex-col">
+          <div className="absolute left-0 top-0 z-10 flex w-96 max-w-full flex-col gap-2 p-2">
+            <TaskInput defaultValue="build" />
+            <FilterInput />
+          </div>
+          {children}
+        </main>
+      </body>
+    </html>
+  )
+}

packages/turbo-graph-ui/app/page.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next'
+
+import { Graph } from '../components/Graph'
+
+export const metadata: Metadata = {
+  title: 'Turbo Graph',
+  description: 'Interactive visualization of Turborepo task graphs.',
+  icons: ['/favicon.ico'],
+}
+
+export default async function Home({
+  searchParams,
+}: {
+  searchParams?: { [key: string]: string | string[] | undefined }
+}) {
+  const rawTasks = searchParams?.tasks
+  const tasks = Array.isArray(rawTasks)
+    ? rawTasks
+    : rawTasks?.replaceAll(',', ' ')?.split(' ') ?? ['build']
+  const filter = searchParams?.filter
+
+  if (filter && Array.isArray(filter)) {
+    throw new Error(`Unsupported filter ${filter}`)
+  }
+
+  return <Graph tasks={tasks} filter={filter} />
+}