@barefootjs/cli 0.11.0 → 0.13.0

package/dist/docs/core/quick-start.mdx

@@ -18,6 +18,11 @@ Scaffold a BarefootJS app, run it locally, and tour the generated project. About
 
 Press Enter at the prompts to accept the defaults (Hono on Cloudflare Workers, UnoCSS).
 
+The CSS prompt has two options:
+
+- **UnoCSS** (default) — wires up UnoCSS and pulls a starter `<Button>` from the BarefootJS UI registry. The rest of this guide follows this path.
+- **None (bring your own CSS)** — no UnoCSS, no UI components, no stylesheets. You get just the JSX→template+signals compiler output and a dependency-free starter `Counter` built from native `<button>` elements. Pick this when you want to wire up your own styling. Pass `--css none` to select it non-interactively.
+
 ## 2. Install and run
 
 ```bash

package/dist/index.js

@@ -1,4 +1,6 @@
 #!/usr/bin/env node
+import { createRequire as __bfCreateRequire } from 'node:module';
+const require = __bfCreateRequire(import.meta.url);
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -20100,8 +20102,8 @@ function buildStaticBudget(source, filePath, componentName, options2 = {}) {
     0
   );
   const fanOut = graph.signals.map((s) => {
-    const subscribers = transitiveSubscriberCount(graph, s.name);
-    return { signal: s.name, subscribers, hot: subscribers >= threshold, loc: s.loc };
+    const { direct, total } = subscriberCounts(graph, s.name);
+    return { signal: s.name, subscribers: total, direct, hot: direct >= threshold, loc: s.loc };
   }).sort((a, b) => b.subscribers - a.subscribers);
   const { depth, chain } = longestMemoChain(graph);
   const hasReactiveState = graph.signals.length > 0 || graph.memos.length > 0;
@@ -20129,18 +20131,25 @@ function isEventHandlerConsumer(consumer) {
   const i = consumer.indexOf(":");
   return i > 0 && isEventHandlerEntry(consumer.slice(0, i), consumer.slice(i + 1));
 }
-function transitiveSubscriberCount(graph, name2) {
+function subscriberCounts(graph, name2) {
   const path25 = traceUpdatePath(graph, name2);
-  if (!path25) return 0;
+  if (!path25) return { direct: 0, total: 0 };
   const seen = /* @__PURE__ */ new Set();
-  const walk = (entries2) => {
+  const directSeen = /* @__PURE__ */ new Set();
+  const walk = (entries2, depth) => {
     for (const e of entries2) {
-      if (!isEventHandlerEntry(e.kind, e.name)) seen.add(`${e.kind}:${e.name}`);
-      walk(e.children);
+      if (!isEventHandlerEntry(e.kind, e.name)) {
+        seen.add(`${e.kind}:${e.name}`);
+        if (depth === 0) directSeen.add(`${e.kind}:${e.name}`);
+      }
+      walk(e.children, depth + 1);
     }
   };
-  walk(path25.dependents);
-  return seen.size;
+  walk(path25.dependents, 0);
+  return { direct: directSeen.size, total: seen.size };
+}
+function transitiveSubscriberCount(graph, name2) {
+  return subscriberCounts(graph, name2).total;
 }
 function longestMemoChain(graph) {
   const memoChainFrom = (entry) => {
@@ -20177,7 +20186,9 @@ function formatStaticBudget(b) {
   if (shown.length > 0) {
     lines.push("  fan-out (top):");
     for (const f of shown) {
-      lines.push(`    ${f.signal.padEnd(12)} \u2192 ${f.subscribers} subscribers${f.hot ? "   \u26A0 high" : ""}`);
+      const indirect = f.subscribers - f.direct;
+      const detail2 = indirect > 0 ? ` (${f.direct} direct \xB7 ${indirect} via memo)` : "";
+      lines.push(`    ${f.signal.padEnd(12)} \u2192 ${f.subscribers} subscribers${detail2}${f.hot ? "   \u26A0 high" : ""}`);
     }
   }
   if (b.crossComponentOnly) {
@@ -20191,8 +20202,8 @@ function formatStaticBudget(b) {
   return lines.join("\n");
 }
 function diffStaticBudget(base, head) {
-  const baseFan = new Map(base.fanOut.map((f) => [f.signal, f.subscribers]));
-  const headFan = new Map(head.fanOut.map((f) => [f.signal, f.subscribers]));
+  const baseFan = new Map(base.fanOut.map((f) => [f.signal, f.direct]));
+  const headFan = new Map(head.fanOut.map((f) => [f.signal, f.direct]));
   const signals = /* @__PURE__ */ new Set([...baseFan.keys(), ...headFan.keys()]);
   const fanOut = [];
   for (const sig of signals) {
@@ -20230,7 +20241,7 @@ function formatBudgetDiff(d) {
     lines.push(`  memo chain ${d.memoChainDepth > 0 ? "deepened" : "shortened"} by ${Math.abs(d.memoChainDepth)}`);
   }
   for (const f of d.fanOut) {
-    lines.push(`  signal \`${f.signal}\` fan-out ${f.before}\u2192${f.after}`);
+    lines.push(`  signal \`${f.signal}\` direct fan-out ${f.before}\u2192${f.after}`);
   }
   if (lines.length === 1) lines.push("  no structural reactivity change");
   else lines.push(d.regressed ? "  \u26A0 reactivity regressed" : "  \u2713 no regression");
@@ -24826,10 +24837,12 @@ function buildGitignore(sections) {
   lines.push(...SHARED_GITIGNORE_LINES);
   return lines.join("\n") + "\n";
 }
-var SHARED_COUNTER_TSX, SHARED_COUNTER_TEST_TSX, TOKENS_CSS, STYLES_CSS, UNO_CSS_PLACEHOLDER, COMPONENTS_MANIFEST_SEED, UNOCSS_DEV_DEPENDENCIES, SHARED_GITIGNORE_LINES;
+var CSS_LINKS_BEGIN, CSS_LINKS_END, SHARED_COUNTER_TSX, SHARED_COUNTER_TEST_TSX, SHARED_COUNTER_BARE_TSX, SHARED_COUNTER_BARE_TEST_TSX, TOKENS_CSS, STYLES_CSS, UNO_CSS_PLACEHOLDER, COMPONENTS_MANIFEST_SEED, UNOCSS_DEV_DEPENDENCIES, SHARED_GITIGNORE_LINES;
 var init_shared2 = __esm({
   "src/lib/adapters/shared.ts"() {
     "use strict";
+    CSS_LINKS_BEGIN = "@@BF_CSS_LINKS_BEGIN@@";
+    CSS_LINKS_END = "@@BF_CSS_LINKS_END@@";
     SHARED_COUNTER_TSX = `'use client'
 
 import { createSignal, createMemo } from '@barefootjs/client'
@@ -24899,6 +24912,71 @@ describe('Counter', () => {
     expect(structure).toContain('div')
   })
 })
+`;
+    SHARED_COUNTER_BARE_TSX = `'use client'
+
+import { createSignal, createMemo } from '@barefootjs/client'
+
+interface CounterProps {
+  initial?: number
+}
+
+export function Counter(props: CounterProps) {
+  const [count, setCount] = createSignal(props.initial ?? 0)
+  const doubled = createMemo(() => count() * 2)
+
+  return (
+    <div className="counter">
+      <p className="counter-value">count: {count()}</p>
+      <p className="counter-doubled">doubled: {doubled()}</p>
+      <div className="counter-buttons">
+        <button type="button" onClick={() => setCount(n => n + 1)}>+1</button>
+        <button type="button" onClick={() => setCount(n => n - 1)}>-1</button>
+        <button type="button" onClick={() => setCount(0)}>Reset</button>
+      </div>
+    </div>
+  )
+}
+`;
+    SHARED_COUNTER_BARE_TEST_TSX = `import { describe, test, expect } from '{{__TEST_RUNNER_IMPORT__}}'
+import { readFileSync } from 'fs'
+import { resolve } from 'path'
+import { renderToTest } from '@barefootjs/test'
+
+const CounterSource = readFileSync(resolve(__dirname, 'Counter.tsx'), 'utf-8')
+
+describe('Counter', () => {
+  const result = renderToTest(CounterSource, 'Counter.tsx')
+
+  test('has no compiler errors', () => {
+    expect(result.errors).toEqual([])
+  })
+
+  test('componentName is Counter', () => {
+    expect(result.componentName).toBe('Counter')
+  })
+
+  test('has expected signals', () => {
+    expect(result.signals).toContain('count')
+  })
+
+  test('renders as <div>', () => {
+    expect(result.root.tag).toBe('div')
+  })
+
+  test('has event handlers', () => {
+    const all = result.findAll({})
+    expect(
+      all.some(n => n.events.includes('click') || n.props['onClick'] != null),
+    ).toBe(true)
+  })
+
+  test('toStructure() shows expected tree', () => {
+    const structure = result.toStructure()
+    expect(structure.length).toBeGreaterThan(0)
+    expect(structure).toContain('div')
+  })
+})
 `;
     TOKENS_CSS = `:root {
   /* \u2500\u2500 Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -25381,6 +25459,7 @@ func defaultLayout(ctx *bf.RenderContext) string {
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<title>%s</title>
+	${CSS_LINKS_BEGIN}
 	<!-- Link all three sheets so the browser fetches them in parallel \u2014
 	     chaining via styles.css @import would defer tokens/uno to a
 	     second round-trip and flash unstyled DOM. tokens first so its
@@ -25388,6 +25467,7 @@ func defaultLayout(ctx *bf.RenderContext) string {
 	<link rel="stylesheet" href="/static/tokens.css" />
 	<link rel="stylesheet" href="/static/styles.css" />
 	<link rel="stylesheet" href="/static/uno.css" />
+	${CSS_LINKS_END}
 </head>
 <body>
 	<main>%s</main>
@@ -25771,6 +25851,7 @@ server.listen(port, () => {
   <script type="importmap">
     { "imports": { "@barefootjs/client/runtime": "/static/components/barefoot.js" } }
   </script>
+  ${CSS_LINKS_BEGIN}
   <!-- Link all three sheets so the browser fetches them in parallel \u2014
        chaining via styles.css @import would defer tokens/uno to a
        second round-trip and flash unstyled DOM. tokens first so its
@@ -25778,6 +25859,7 @@ server.listen(port, () => {
   <link rel="stylesheet" href="/static/tokens.css">
   <link rel="stylesheet" href="/static/styles.css">
   <link rel="stylesheet" href="/static/uno.css">
+  ${CSS_LINKS_END}
 </head>
 <body>
   <main>
@@ -25970,6 +26052,7 @@ func defaultLayout(ctx *bf.RenderContext) string {
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<title>%s</title>
+	${CSS_LINKS_BEGIN}
 	<!-- Link all three sheets so the browser fetches them in parallel \u2014
 	     chaining via styles.css @import would defer tokens/uno to a
 	     second round-trip and flash unstyled DOM. tokens first so its
@@ -25977,6 +26060,7 @@ func defaultLayout(ctx *bf.RenderContext) string {
 	<link rel="stylesheet" href="/static/tokens.css" />
 	<link rel="stylesheet" href="/static/styles.css" />
 	<link rel="stylesheet" href="/static/uno.css" />
+	${CSS_LINKS_END}
 </head>
 <body>
 	<main>%s</main>
@@ -26533,6 +26617,7 @@ export const renderer = jsxRenderer(({ children, title }) => (
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>{title ?? 'BarefootJS app'}</title>
+      ${CSS_LINKS_BEGIN}
       {/* Link all three sheets so the browser fetches them in
           parallel \u2014 chaining via styles.css @import would defer
           tokens/uno to a second round-trip and flash unstyled DOM.
@@ -26541,6 +26626,7 @@ export const renderer = jsxRenderer(({ children, title }) => (
       <link rel="stylesheet" href="/tokens.css" />
       <link rel="stylesheet" href="/styles.css" />
       <link rel="stylesheet" href="/uno.css" />
+      ${CSS_LINKS_END}
       <BfImportMap base={componentsBase} />
     </head>
     <body>
@@ -26826,6 +26912,7 @@ export function createRenderer({ componentsBase }: CreateRendererOptions) {
           <meta charset="UTF-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <title>{title ?? 'BarefootJS app'}</title>
+          ${CSS_LINKS_BEGIN}
           {/* Link all three sheets so the browser fetches them in
               parallel \u2014 chaining via styles.css @import would defer
               tokens/uno to a second round-trip and flash unstyled
@@ -26834,6 +26921,7 @@ export function createRenderer({ componentsBase }: CreateRendererOptions) {
           <link rel="stylesheet" href="/static/tokens.css" />
           <link rel="stylesheet" href="/static/styles.css" />
           <link rel="stylesheet" href="/static/uno.css" />
+          ${CSS_LINKS_END}
           <BfImportMap base={componentsBase} />
         </head>
         <body>
@@ -27047,6 +27135,7 @@ __DATA__
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>BarefootJS app</title>
+    ${CSS_LINKS_BEGIN}
     <!-- Link all three sheets so the browser fetches them in parallel \u2014
          chaining via styles.css @import would defer tokens/uno to a
          second round-trip and flash unstyled DOM. tokens first so its
@@ -27054,6 +27143,7 @@ __DATA__
     <link rel="stylesheet" href="/static/tokens.css">
     <link rel="stylesheet" href="/static/styles.css">
     <link rel="stylesheet" href="/static/uno.css">
+    ${CSS_LINKS_END}
 </head>
 <body>
     <main><%== content %></main>
@@ -27440,11 +27530,13 @@ sub layout (%a) {
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>BarefootJS app</title>
+    ${CSS_LINKS_BEGIN}
     <!-- Link all three sheets so the browser fetches them in parallel.
          tokens first so its CSS variables exist before any rule uses them. -->
     <link rel="stylesheet" href="/static/tokens.css">
     <link rel="stylesheet" href="/static/styles.css">
     <link rel="stylesheet" href="/static/uno.css">
+    ${CSS_LINKS_END}
 </head>
 <body>
     <main>$a{body}</main>
@@ -27684,7 +27776,8 @@ var init_templates = __esm({
     init_nethttp();
     init_xslate();
     CSS_LIBRARIES = {
-      unocss: { label: "UnoCSS" }
+      unocss: { label: "UnoCSS", usesUnoUi: true },
+      none: { label: "None (bring your own CSS)", usesUnoUi: false }
     };
     DEFAULT_CSS_LIBRARY = "unocss";
     ADAPTERS = {
@@ -27845,6 +27938,48 @@ var init_spinner = __esm({
   }
 });
 
+// src/lib/css.ts
+function processCssHead(content2, usesUno) {
+  if (!content2.includes(CSS_LINKS_BEGIN)) return content2;
+  const out = [];
+  let inRegion = false;
+  for (const line of content2.split("\n")) {
+    const trimmed = line.trim();
+    if (trimmed === CSS_LINKS_BEGIN) {
+      inRegion = true;
+      continue;
+    }
+    if (trimmed === CSS_LINKS_END) {
+      inRegion = false;
+      continue;
+    }
+    if (inRegion && !usesUno) continue;
+    out.push(line);
+  }
+  return out.join("\n");
+}
+function stripUnocssFromScript(cmd) {
+  let out = cmd;
+  out = out.split(' "unocss --watch"').join("");
+  out = out.replace("-n build,uno,server -c blue,magenta,green", "-n build,server -c blue,green");
+  out = out.replace("-n build,uno -c blue,magenta", "-n build -c blue");
+  out = out.split(" && unocss && ").join(" && ");
+  out = out.replace(/ && unocss$/, "");
+  return out;
+}
+function stripUnoGitignore(content2) {
+  return content2.replace(
+    "# UnoCSS output (regenerated by `unocss --watch` / `unocss`)\npublic/uno.css\n\n",
+    ""
+  );
+}
+var init_css = __esm({
+  "src/lib/css.ts"() {
+    "use strict";
+    init_shared2();
+  }
+});
+
 // src/commands/init.ts
 var init_exports = {};
 __export(init_exports, {
@@ -27887,7 +28022,8 @@ async function run4(args2, ctx2) {
   const adapter = ADAPTERS[adapterId];
   const cssId = await resolveCssLibrary(flags.css);
   const cssLibrary = CSS_LIBRARIES[cssId];
-  const bundledComponents = adapter.bundledRegistryComponents ?? ["button"];
+  const usesUno = cssLibrary.usesUnoUi !== false;
+  const bundledComponents = usesUno ? adapter.bundledRegistryComponents ?? ["button"] : [];
   if (bundledComponents.length > 0) {
     const registryHost = new URL(DEFAULT_REGISTRY_URL2).host;
     const probeSpinner = startSpinner({
@@ -27918,7 +28054,7 @@ async function run4(args2, ctx2) {
     text: `Creating ${adapter.label.split(" ")[0]} + ${cssLibrary.label} project...`
   });
   try {
-    await scaffoldApp(projectDir, adapter, flags, ctx2);
+    await scaffoldApp(projectDir, adapter, flags, usesUno, ctx2);
   } catch (err) {
     buildSpinner.fail("Failed to create project files");
     throw err;
@@ -27981,7 +28117,7 @@ async function probeRegistry(url2) {
     throw new Error(`HTTP ${res.status}`);
   }
 }
-async function scaffoldApp(projectDir, adapter, flags, _ctx) {
+async function scaffoldApp(projectDir, adapter, flags, usesUno, _ctx) {
   const paths = {
     components: "components/ui",
     tokens: "tokens",
@@ -27993,11 +28129,20 @@ async function scaffoldApp(projectDir, adapter, flags, _ctx) {
   const pm = detectPackageManager(projectDir);
   const runner = testRunnerFor(pm);
   const pmTypesEntry = runner.typesEntry;
+  const UNO_ONLY_FILES = /* @__PURE__ */ new Set(["uno.config.ts", "uno.css", "tokens.css", "styles.css"]);
   for (const [relPath, contents] of Object.entries(adapter.files)) {
+    if (!usesUno && UNO_ONLY_FILES.has(path10.basename(relPath))) continue;
     const target2 = path10.join(projectDir, relPath);
     if (existsSync8(target2)) continue;
     mkdirSync3(path10.dirname(target2), { recursive: true });
-    const resolved = contents.replace(/\{\{__PROJECT_NAME__\}\}/g, pkgName).replace(/\{\{__PM_TYPES_ENTRY__\}\}/g, pmTypesEntry).replace(/\{\{__TEST_RUNNER_IMPORT__\}\}/g, runner.importSource);
+    let source = contents;
+    if (!usesUno && relPath === "components/Counter.tsx") source = SHARED_COUNTER_BARE_TSX;
+    if (!usesUno && relPath === "components/Counter.test.tsx") source = SHARED_COUNTER_BARE_TEST_TSX;
+    let resolved = source.replace(/\{\{__PROJECT_NAME__\}\}/g, pkgName).replace(/\{\{__PM_TYPES_ENTRY__\}\}/g, pmTypesEntry).replace(/\{\{__TEST_RUNNER_IMPORT__\}\}/g, runner.importSource);
+    resolved = processCssHead(resolved, usesUno);
+    if (!usesUno && path10.basename(relPath) === ".gitignore") {
+      resolved = stripUnoGitignore(resolved);
+    }
     writeFileSync3(target2, resolved);
     created++;
   }
@@ -28011,16 +28156,24 @@ async function scaffoldApp(projectDir, adapter, flags, _ctx) {
   const pkgJsonPath = path10.join(projectDir, "package.json");
   const resolvedAdapterScripts = {};
   for (const [k, v] of Object.entries(adapter.scripts)) {
-    resolvedAdapterScripts[k] = typeof v === "function" ? v(pm) : v;
+    const rendered = typeof v === "function" ? v(pm) : v;
+    resolvedAdapterScripts[k] = usesUno ? rendered : stripUnocssFromScript(rendered);
   }
   const pmDevDeps = runner.devDeps;
+  const adapterDevDeps = { ...adapter.devDependencies };
+  if (!usesUno) {
+    for (const key of Object.keys(UNOCSS_DEV_DEPENDENCIES)) delete adapterDevDeps[key];
+  }
   const pkgJson = {
     name: pkgName,
     private: true,
     type: "module",
     scripts: {
       ...resolvedAdapterScripts,
-      watch: 'concurrently -k -n build,uno -c blue,magenta "bf build --watch" "unocss --watch"',
+      // The cross-adapter rebuild watcher. Under `--css none` there's no
+      // `unocss --watch` pane to run alongside `bf build --watch`, so it
+      // collapses to a bare build watch (no `concurrently` wrapper).
+      watch: usesUno ? 'concurrently -k -n build,uno -c blue,magenta "bf build --watch" "unocss --watch"' : "bf build --watch",
       // `test` is wired to the runner that matches the user's package
       // manager — `bun test` for bun, `vitest run` for npm / pnpm /
       // yarn. The matching `bf gen component` / `bf gen test` output
@@ -28030,13 +28183,13 @@ async function scaffoldApp(projectDir, adapter, flags, _ctx) {
       test: runner.scriptValue
     },
     dependencies: { ...adapter.dependencies },
-    devDependencies: { ...adapter.devDependencies, ...pmDevDeps }
+    devDependencies: { ...adapterDevDeps, ...pmDevDeps }
   };
   if (!existsSync8(pkgJsonPath)) {
     writeFileSync3(pkgJsonPath, JSON.stringify(pkgJson, null, 2) + "\n");
     created++;
   }
-  const bundledComponents = adapter.bundledRegistryComponents ?? ["button"];
+  const bundledComponents = usesUno ? adapter.bundledRegistryComponents ?? ["button"] : [];
   if (bundledComponents.length > 0) {
     await addFromRegistry(
       bundledComponents,
@@ -28087,6 +28240,8 @@ var init_init = __esm({
     init_pm();
     init_select();
     init_spinner();
+    init_css();
+    init_shared2();
     INIT_GATE_ENV = "BAREFOOT_INIT_VIA_CREATE";
     DEFAULT_REGISTRY_URL2 = "https://ui.barefootjs.dev/r/";
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/cli",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "CLI for agent-driven UI component discovery and scaffolding",
   "type": "module",
   "main": "./dist/index.js",
@@ -29,11 +29,11 @@
   "dependencies": {
     "esbuild": "^0.25.0",
     "typescript": "^5.0.0",
-    "@barefootjs/client": "0.11.0",
-    "@barefootjs/shared": "0.11.0"
+    "@barefootjs/client": "0.13.0",
+    "@barefootjs/shared": "0.13.0"
   },
   "devDependencies": {
-    "@barefootjs/jsx": "0.11.0",
+    "@barefootjs/jsx": "0.13.0",
     "@types/node": "^22.0.0",
     "@happy-dom/global-registrator": "^20.0.11",
     "happy-dom": "^20.0.11"