@vebui/bun 0.0.1

package/cli.ts

@@ -0,0 +1,266 @@
+#!/usr/bin/env bun
+import { watch, mkdirSync } from "fs"
+import { readFile, writeFile } from "fs/promises"
+import { Glob } from "bun"
+import { resolve, dirname } from "path"
+import { classToDeclaration, drainCSS } from "@vebui/core"
+import * as VebUI from "@vebui/core"
+
+// ─── Args ─────────────────────────────────────────────────────────────────────
+
+const [,, command, appFile] = process.argv
+
+if (command !== "dev" && command !== "build") {
+  console.error("Usage: vebui <dev|build> <file.ts>")
+  process.exit(1)
+}
+
+const VERBOSE = Bun.env.VEBUI_VERBOSE === "true"
+
+function resolveCorePackage(): string {
+  const workspacePath = resolve(import.meta.dir, "../../core")
+  try {
+    const stat = Bun.file(workspacePath + "/index.ts")
+    if (stat.size > 0) {
+      if (VERBOSE) console.log(`[vebui] using workspace core: ${workspacePath}`)
+      return workspacePath
+    }
+  } catch { }
+
+  try {
+    const corePath = import.meta.resolveSync("@vebui/core")
+    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")
+    process.exit(1)
+  }
+}
+
+const corePackageRoot = resolveCorePackage()
+if (VERBOSE) console.log(`[vebui] core package root: ${corePackageRoot}`)
+
+const userPatterns = Bun.env.VEBUI_CONTENT?.split(",").map(s => s.trim()) ?? []
+const patterns = [
+  `${corePackageRoot}/**/*.ts`,
+  ...userPatterns,
+]
+
+const OUT_CSS = Bun.env.VEBUI_CSS_OUT ?? "./assets/vebui/vebui.css"
+const OUT_JS = Bun.env.VEBUI_JS_OUT ?? "./assets/vebui/vebui.client.js"
+
+// ─── 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")
+  mkdirSync(dirname(OUT_JS), { recursive: true })
+
+  const result = await Bun.build({
+    entrypoints: [clientEntry],
+    minify: true,
+  })
+
+  if (!result.success) {
+    console.error("[vebui] client bundle failed:", result.logs)
+    return
+  }
+
+  const out = result.outputs[0]
+  if (out) {
+    const code = await out.text()
+    await writeFile(OUT_JS, code, "utf-8")
+    console.log(`[vebui] bundled client → ${OUT_JS} (${code.length} bytes)`)
+  }
+}
+
+// ─── CSS Generator ────────────────────────────────────────────────────────────
+
+async function resolveFiles(globs: string[]): Promise<string[]> {
+  const files = new Set<string>()
+  for (const pattern of globs) {
+    const glob = new Glob(pattern)
+    for await (const file of glob.scan({ cwd: process.cwd(), absolute: true })) {
+      if (
+        file.includes("clis/") ||
+        file.endsWith(".css") ||
+        file.endsWith(".js") ||
+        file.includes("/client/") ||
+        file.includes("\\client\\")
+      ) continue
+      files.add(file)
+    }
+  }
+  if (VERBOSE) console.log(`[vebui] resolved ${files.size} files`)
+  return [...files]
+}
+
+async function generateCSS() {
+  const files = await resolveFiles(patterns)
+  const allClasses = new Set<string>()
+  const discoveredCSS = new Set<string>()
+
+  mkdirSync(dirname(OUT_CSS), { recursive: true })
+  drainCSS()
+
+  for (const file of files) {
+    const source = await readFile(file, "utf-8")
+    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 readFile(resolve(corePackageRoot, "tokens.css"), "utf-8")
+    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 readFile(cssFile, "utf-8")
+      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)
+  }
+
+  const css = parts.join("\n")
+  await writeFile(OUT_CSS, css, "utf-8")
+  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") process.exit(0)
+
+// dev: spawn the app and watch for changes
+
+if (appFile) {
+  Bun.spawn(["bun", appFile], {
+    stdout: "inherit",
+    stderr: "inherit",
+    env: process.env as Record<string, string>,
+  })
+}
+
+const watchDirs = new Set(
+  patterns.map(p => {
+    const full = p.startsWith("/") ? p : resolve(process.cwd(), p)
+    return p.includes("*") ? full.replace(/\/\*.*$/, "") : dirname(full)
+  })
+)
+
+for (const dir of watchDirs) {
+  watch(dir, { recursive: true }, async (_, filename) => {
+    if (filename && !filename.endsWith(".ts")) return
+    if (!filename || (!filename.includes("core/client") && !filename.includes("src/client"))) {
+      await generateCSS()
+    }
+    if (filename && (filename.includes("core/client") || filename.includes("src/client") || filename.includes("signal-rpc.ts"))) {
+      await bundleClient()
+    }
+  })
+}
+
+if (VERBOSE) console.log(`[vebui] watching: ${[...watchDirs].join(", ")}`)

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@vebui/bun",
+  "version": "0.0.1",
+  "description": "Bun CLI for vebui — dev server and build tool",
+  "type": "module",
+  "bin": {
+    "vebui": "./cli.ts"
+  },
+  "exports": {
+    ".": "./cli.ts"
+  },
+  "files": [
+    "cli.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "bun",
+    "cli",
+    "css",
+    "atomic-css",
+    "build-tool",
+    "vebui"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@vebui/core": "^0.1.0"
+  },
+  "peerDependencies": {
+    "bun": ">=1.0.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "^5"
+  }
+}