@vebui/deno 0.0.1

package/cli.ts

@@ -0,0 +1,300 @@
+import { resolve, dirname } from "node:path"
+import { build as esbuild, stop as esbuildStop } from "esbuild"
+import { classToDeclaration, drainCSS } from "@vebui/core"
+import * as VebUI from "@vebui/core"
+
+// ─── Args ─────────────────────────────────────────────────────────────────────
+
+const [command, appFile] = Deno.args
+
+if (command !== "dev" && command !== "build") {
+  console.error("Usage: vebui <dev|build> <file.ts>")
+  Deno.exit(1)
+}
+
+const VERBOSE = Deno.env.get("VEBUI_VERBOSE") === "true"
+
+function resolveCorePackage(): string {
+  const workspacePath = new URL("../../core", import.meta.url).pathname
+  try {
+    Deno.statSync(workspacePath + "/index.ts")
+    if (VERBOSE) console.log(`[vebui] using workspace core: ${workspacePath}`)
+    return workspacePath
+  } catch { }
+
+  try {
+    const corePath = new URL(import.meta.resolve("@vebui/core")).pathname
+    if (VERBOSE) console.log(`[vebui] resolved core via import.meta: ${corePath}`)
+    if (corePath.includes("/dist/")) return dirname(dirname(corePath))
+    return dirname(corePath)
+  } catch {
+    console.error("[vebui] Error: Cannot resolve @vebui/core package")
+    Deno.exit(1)
+  }
+}
+
+const corePackageRoot = resolveCorePackage()
+if (VERBOSE) console.log(`[vebui] core package root: ${corePackageRoot}`)
+
+const userPatterns = Deno.env.get("VEBUI_CONTENT")?.split(",").map(s => s.trim()) ?? []
+const patterns = [
+  `${corePackageRoot}/**/*.ts`,
+  ...userPatterns,
+]
+
+const OUT_CSS = Deno.env.get("VEBUI_CSS_OUT") ?? "./assets/vebui/vebui.css"
+const OUT_JS = Deno.env.get("VEBUI_JS_OUT") ?? "./assets/vebui/vebui.client.js"
+
+// ─── Dir walker ───────────────────────────────────────────────────────────────
+
+async function* walkDir(dir: string): AsyncGenerator<string> {
+  for await (const entry of Deno.readDir(dir)) {
+    const fullPath = resolve(dir, entry.name)
+    if (entry.isDirectory) yield* walkDir(fullPath)
+    else if (entry.isFile) yield fullPath
+  }
+}
+
+function globBase(pattern: string): string {
+  const starIdx = pattern.indexOf("*")
+  if (starIdx === -1) return pattern
+  return dirname(pattern.slice(0, starIdx + 1))
+}
+
+async function resolveFiles(globs: string[]): Promise<string[]> {
+  const files = new Set<string>()
+  for (const pattern of globs) {
+    const base = globBase(pattern)
+    try {
+      for await (const file of walkDir(base)) {
+        if (
+          !file.endsWith(".ts") ||
+          file.includes("clis/") ||
+          file.endsWith(".css") ||
+          file.endsWith(".js") ||
+          file.includes("/client/")
+        ) continue
+        files.add(file)
+      }
+    } catch { }
+  }
+  if (VERBOSE) console.log(`[vebui] resolved ${files.size} files`)
+  return [...files]
+}
+
+// ─── Extractor ────────────────────────────────────────────────────────────────
+
+const CHAIN_RE = /\b(VStack|HStack|Block|Text|Button|Input|Body|Head)(?:(?:\s*\.\s*[a-zA-Z0-9]+\s*\((?:[^()]*|\((?:[^()]*|\([^()]*\))*\))*\))|(?:\s*\.\s*(?:mobile|tablet|desktop|hover|active|focus|focusWithin|before|after)))+/g
+const IMPORT_CSS_RE = /import\s+["'](.+\.css)["']/g
+
+async function extractCSSFromSource(source: string, allClasses: Set<string>, discoveredCSS: Set<string>, currentFile: string) {
+  for (const match of source.matchAll(IMPORT_CSS_RE)) {
+    const importPath = match[1]
+    if (!importPath) continue
+    const resolvedPath = importPath.startsWith(".")
+      ? resolve(dirname(currentFile), importPath)
+      : importPath
+    discoveredCSS.add(resolvedPath)
+  }
+
+  const MODIFIER_RE = /\.([a-zA-Z0-9]+)\((?:"([^"]+)"|([\d.]+))\)/g
+  const MODIFIER_TO_CLS: Record<string, string> = {
+    margin: "m", marginT: "mt", marginB: "mb", marginL: "ml", marginR: "mr", marginX: "mx", marginY: "my",
+    m: "m", mt: "mt", mb: "mb", ml: "ml", mr: "mr", mx: "mx", my: "my",
+    padding: "p", paddingT: "pt", paddingB: "pb", paddingL: "pl", paddingR: "pr", paddingX: "px", paddingY: "py",
+    p: "p", pt: "pt", pb: "pb", pl: "pl", pr: "pr", px: "px", py: "py",
+    gap: "gap", gapX: "gapx", gapY: "gapy", spaceX: "gapx", spaceY: "gapy",
+    radius: "radius", size: "text",
+    width: "w", height: "h", background: "bg",
+  }
+  const INLINE_MODIFIERS = new Set(["color", "weight", "align", "justify", "border", "opacity", "fontWeight", "fontSize", "flex"])
+
+  for (const match of source.matchAll(MODIFIER_RE)) {
+    const [, modifier, strVal, numVal] = match
+    const value = strVal ?? numVal
+    if (!modifier || value === undefined || value === null) continue
+    if (INLINE_MODIFIERS.has(modifier)) continue
+    const prefix = MODIFIER_TO_CLS[modifier]
+    if (prefix) allClasses.add(`${prefix}-${String(value).replace(/[^a-zA-Z0-9]/g, "_")}`)
+  }
+
+  const mockProxy: any = new Proxy(() => mockProxy, {
+    get: (_, key) => {
+      if (key === Symbol.toPrimitive) return (hint: string) => hint === "string" ? "MOCK" : 0
+      if (key === "key") return "mock-sig"
+      return mockProxy
+    },
+    apply: () => mockProxy,
+  })
+
+  const context: any = { ...VebUI }
+
+  for (const match of source.matchAll(CHAIN_RE)) {
+    const chain = match[0]
+    try {
+      const proxy = new Proxy(context, {
+        get: (target, key) => {
+          if (key === Symbol.unscopables) return undefined
+          if (key in target) return target[key]
+          return mockProxy
+        },
+        has: () => true,
+      })
+      const result = new Function("with(this) { return " + chain + " }").call(proxy)
+      if (typeof result === "function") {
+        const element = result("DUMMY")
+        if (element && typeof element.render === "function") {
+          const html = element.render()
+          for (const classMatch of html.matchAll(/class="([^"]+)"/g)) {
+            classMatch[1].split(" ").forEach((cls: string) => {
+              if (cls && !cls.startsWith("w-")) allClasses.add(cls)
+            })
+          }
+        }
+      }
+    } catch (e) {
+      if (VERBOSE) console.error(`[vebui] eval failed for ${chain.slice(0, 50).trim()}:`, e)
+    }
+  }
+}
+
+// ─── Bundler ──────────────────────────────────────────────────────────────────
+
+async function bundleClient() {
+  const clientEntry = resolve(corePackageRoot, "client/index.ts")
+  Deno.mkdirSync(dirname(OUT_JS), { recursive: true })
+
+  const result = await esbuild({
+    entryPoints: [clientEntry],
+    bundle: true,
+    minify: true,
+    format: "esm",
+    platform: "browser",
+    write: false,
+  })
+
+  const out = result.outputFiles[0]
+  if (out) {
+    await Deno.writeTextFile(OUT_JS, out.text)
+    console.log(`[vebui] bundled client → ${OUT_JS} (${out.text.length} bytes)`)
+  }
+}
+
+// ─── CSS Generator ────────────────────────────────────────────────────────────
+
+async function generateCSS() {
+  const files = await resolveFiles(patterns)
+  const allClasses = new Set<string>()
+  const discoveredCSS = new Set<string>()
+
+  Deno.mkdirSync(dirname(OUT_CSS), { recursive: true })
+  drainCSS()
+
+  for (const file of files) {
+    const source = await Deno.readTextFile(file)
+    await extractCSSFromSource(source, allClasses, discoveredCSS, file)
+  }
+
+  const hashedCSS = drainCSS()
+  const utilityRules: string[] = []
+  for (const cls of allClasses) {
+    const decl = classToDeclaration(cls)
+    if (decl) utilityRules.push(`.${cls} { ${decl} }`)
+  }
+
+  const parts: string[] = ["/* Generated by vebui — do not edit */"]
+
+  try {
+    const tokens = await Deno.readTextFile(resolve(corePackageRoot, "tokens.css"))
+    parts.push("\n/* Design Tokens & Reset */")
+    parts.push(tokens)
+  } catch {
+    console.warn("[vebui] Warning: Could not find core/tokens.css")
+  }
+
+  for (const cssFile of discoveredCSS) {
+    try {
+      const content = await Deno.readTextFile(cssFile)
+      parts.push(`\n/* User CSS: ${cssFile} */`)
+      parts.push(content)
+    } catch {
+      console.warn(`[vebui] Warning: Could not read CSS file: ${cssFile}`)
+    }
+  }
+
+  parts.push("\n/* Utility Classes */")
+  parts.push(...utilityRules)
+
+  if (hashedCSS.trim()) {
+    parts.push("\n/* Hashed Pseudo-classes */")
+    parts.push(hashedCSS)
+  }
+
+  await Deno.writeTextFile(OUT_CSS, parts.join("\n"))
+  console.log(`[vebui] generated css → ${OUT_CSS} (${files.length} files, ${utilityRules.length} utilities)`)
+}
+
+async function buildAll() {
+  await Promise.all([generateCSS(), bundleClient()])
+}
+
+// ─── Entry ────────────────────────────────────────────────────────────────────
+
+await buildAll()
+
+if (command === "build") {
+  esbuildStop()
+  Deno.exit(0)
+}
+
+// dev: spawn the app and watch for changes
+
+if (appFile) {
+  new Deno.Command("deno", {
+    args: ["run", "--allow-all", appFile],
+    stdout: "inherit",
+    stderr: "inherit",
+  }).spawn()
+}
+
+const watchDirs = new Set(
+  patterns.map(p => {
+    const full = p.startsWith("/") ? p : resolve(Deno.cwd(), p)
+    return p.includes("*") ? full.replace(/\/\*.*$/, "") : dirname(full)
+  })
+)
+
+if (VERBOSE) console.log(`[vebui] watching: ${[...watchDirs].join(", ")}`)
+
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+function scheduleRebuild(path: string) {
+  if (debounceTimer) clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(async () => {
+    const isClient = path.includes("/client/")
+    if (!isClient) await generateCSS()
+    if (isClient || path.includes("signal-rpc.ts")) await bundleClient()
+  }, 50)
+}
+
+const cleanup = () => {
+  esbuildStop()
+  Deno.exit(0)
+}
+Deno.addSignalListener("SIGINT", cleanup)
+Deno.addSignalListener("SIGTERM", cleanup)
+
+for (const dir of watchDirs) {
+  ;(async () => {
+    try {
+      const watcher = Deno.watchFs(dir, { recursive: true })
+      for await (const event of watcher) {
+        if (event.kind !== "modify" && event.kind !== "create") continue
+        for (const path of event.paths) {
+          if (!path.endsWith(".ts")) continue
+          scheduleRebuild(path)
+        }
+      }
+    } catch { }
+  })()
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@vebui/deno",
+  "version": "0.0.1",
+  "description": "Deno CLI for vebui — dev server and build tool",
+  "type": "module",
+  "exports": "./cli.ts",
+  "files": [
+    "cli.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "deno",
+    "cli",
+    "css",
+    "atomic-css",
+    "build-tool",
+    "vebui"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@vebui/core": "^0.1.0",
+    "esbuild": "^0.25.0"
+  }
+}