@bull-js/cli 0.0.0-stage → 0.3.0

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import { BullArchitectureConfig, ProjectAnalyzer } from '@bull-js/core';
+import { UserConfig, Plugin } from 'vite';
+
+interface BullConfig extends BullArchitectureConfig {
+    dev?: {
+        port?: number;
+        open?: boolean;
+        /**
+         * How the browser overlay behaves when there are architecture violations.
+         * - `dismissible` (default): it can be closed to keep trying the app.
+         * - `blocking`: it cannot be closed until the code respects MVVM.
+         */
+        overlay?: "dismissible" | "blocking" | false;
+    };
+    /** Extra Vite options (aliases, proxy, additional plugins…). */
+    vite?: UserConfig;
+}
+/** Type helper for `bull.config.ts`. */
+declare function defineConfig(config: BullConfig): BullConfig;
+
+interface BullPluginOptions {
+    /** Project root. Defaults to Vite's `root`. */
+    root?: string;
+    config?: BullArchitectureConfig;
+    /** An existing analyzer (the CLI shares it to avoid analyzing twice). */
+    analyzer?: ProjectAnalyzer;
+    /** Browser overlay in dev. Defaults to `dismissible`. */
+    overlay?: "dismissible" | "blocking" | false;
+    /** Check the architecture in `buildStart`. The CLI turns it off because it checks before calling Vite. */
+    checkOnBuild?: boolean;
+}
+/**
+ * Vite plugin that enforces the MVVM architecture.
+ * - On build: fails if there are architecture errors.
+ * - On dev: re-analyzes on every change and shows the report in the
+ *   terminal and in a browser overlay.
+ *
+ * It can also be used on its own in a `vite.config.ts`.
+ */
+declare function bullPlugin(options?: BullPluginOptions): Plugin;
+
+export { type BullConfig, type BullPluginOptions, bullPlugin, defineConfig };

package/dist/index.js

@@ -0,0 +1,8 @@
+import {
+  bullPlugin,
+  defineConfig
+} from "./chunk-FHBUQ5I5.js";
+export {
+  bullPlugin,
+  defineConfig
+};

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "@bull-js/cli",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.0",
+  "description": "Bull: the opinionated React framework that refuses to build unless you respect MVVM.",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/nicolasandradedesarrollosit/bull.js#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nicolasandradedesarrollosit/bull.js.git",
+    "directory": "packages/cli"
+  },
+  "bugs": {
+    "url": "https://github.com/nicolasandradedesarrollosit/bull.js/issues"
+  },
+  "keywords": [
+    "react",
+    "mvvm",
+    "vite",
+    "framework",
+    "cli",
+    "architecture",
+    "linter"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "bull": "./dist/bin.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "!templates/**/node_modules"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./create": {
+      "types": "./dist/create.d.ts",
+      "import": "./dist/create.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/bin.ts src/create.ts --format esm --dts --clean --external @bull-js/core"
+  },
+  "dependencies": {
+    "@bull-js/core": "^0.3.0",
+    "@clack/prompts": "^1.8.1",
+    "@vitejs/plugin-react": "^6.1.2",
+    "cac": "^6.7.14",
+    "picocolors": "^1.1.1",
+    "vite": "^8.3.4"
+  }
+}

package/templates/default/_gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+*.log

package/templates/default/bull.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "@bull-js/cli";
+
+export default defineConfig({
+  dev: { overlay: "dismissible" },
+});

package/templates/default/eslint.config.js

@@ -0,0 +1,3 @@
+import bull from "@bull-js/eslint-plugin";
+
+export default [...bull.configs.recommended];

package/templates/default/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{name}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/default/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "{{name}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "bull",
+    "build": "bull build",
+    "preview": "bull preview",
+    "check": "bull check",
+    "test": "vitest run",
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@bull-js/runtime": "^{{bullVersion}}",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@bull-js/cli": "^{{bullVersion}}",
+    "@bull-js/eslint-plugin": "^{{bullVersion}}",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^10.0.0",
+    "typescript": "^6.0.0",
+    "vitest": "^5.0.0"
+  }
+}

package/templates/default/src/env.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/templates/default/src/main.tsx

@@ -0,0 +1,14 @@
+// Composition root: the only file that knows all three layers.
+import "./styles/app.css";
+import { createBullApp } from "@bull-js/runtime/react";
+import { CounterRepository } from "./model/counter.repository";
+import { CounterView } from "./view/counter.view";
+import { CounterViewModel } from "./viewmodel/counter.viewmodel";
+
+createBullApp({
+  root: CounterView,
+  register: (c) => {
+    c.model(CounterRepository, () => new CounterRepository());
+    c.viewModel(CounterViewModel, (c) => new CounterViewModel(c.get(CounterRepository)));
+  },
+});

package/templates/default/src/model/counter.repository.ts

@@ -0,0 +1,12 @@
+// Model: data and business rules. Knows nothing about React or the screen.
+const KEY = "counter";
+
+export class CounterRepository {
+  load(): number {
+    return Number(localStorage.getItem(KEY) ?? 0);
+  }
+
+  save(value: number): void {
+    localStorage.setItem(KEY, String(value));
+  }
+}

package/templates/default/src/styles/app.css

@@ -0,0 +1,52 @@
+:root {
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: #1d1b22;
+  background: #f6f5f2;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: #ecebf2;
+    background: #111016;
+  }
+}
+body {
+  margin: 0;
+}
+.counter {
+  min-height: 100vh;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  text-align: center;
+  gap: 8px;
+}
+.layers {
+  color: #8f8b9c;
+  font-size: 13px;
+  letter-spacing: 0.04em;
+  margin: 0;
+}
+h1 {
+  font-size: 96px;
+  margin: 0;
+  letter-spacing: -0.04em;
+}
+.actions {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+button {
+  font: inherit;
+  font-weight: 600;
+  padding: 10px 20px;
+  border-radius: 12px;
+  cursor: pointer;
+  border: 1px solid #6b4dff;
+  background: #6b4dff;
+  color: white;
+}
+button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}

package/templates/default/src/view/bull-logo.view.tsx

@@ -0,0 +1,15 @@
+/** The Bull logo: three facets for the three layers. */
+export function BullLogoView(props: { size?: number }) {
+  const size = props.size ?? 28;
+  return (
+    <svg width={size} height={size} viewBox="0 0 64 64" role="img" aria-label="Bull">
+      <path d="M19 20C10.5 20 4.5 15 4 5.5c3.5 5.8 9 8.6 17 9.2Z" fill="#ffc9a8" />
+      <path d="M45 20c8.5 0 14.5-5 15-14.5c-3.5 5.8-9 8.6-17 9.2Z" fill="#ffc9a8" />
+      <path d="M18 15h28L32 36Z" fill="#a78bfa" />
+      <path d="M18 15l14 21v21h-6L20.5 34Z" fill="#6b4dff" />
+      <path d="M46 15 32 36v21h6l5.5-23Z" fill="#f0507c" />
+      <rect x="23" y="45" width="18" height="12" rx="6" fill="#33224a" />
+      <path d="M28.5 56.5a3.5 3.5 0 0 0 7 0" fill="none" stroke="#ffc9a8" strokeWidth="1.8" strokeLinecap="round" />
+    </svg>
+  );
+}

package/templates/default/src/view/counter.view.tsx

@@ -0,0 +1,26 @@
+// View: only binds and draws. Reads with useBinding, acts with commands.
+import { useBinding, useViewModel } from "@bull-js/runtime/react";
+import { CounterViewModel } from "../viewmodel/counter.viewmodel";
+import { BullLogoView } from "./bull-logo.view";
+
+export function CounterView() {
+  const vm = useViewModel(CounterViewModel);
+  const count = useBinding(vm.count);
+  const canReset = useBinding(vm.reset.canExecute);
+
+  return (
+    <main className="counter">
+      <BullLogoView size={56} />
+      <p className="layers">View → ViewModel → Model</p>
+      <h1>{count}</h1>
+      <div className="actions">
+        <button type="button" onClick={vm.increment.execute}>
+          +1
+        </button>
+        <button type="button" onClick={vm.reset.execute} disabled={!canReset}>
+          Reset
+        </button>
+      </div>
+    </main>
+  );
+}

package/templates/default/src/viewmodel/counter.viewmodel.test.ts

@@ -0,0 +1,36 @@
+// The ViewModel is tested as a plain class: no React, no DOM, with an in-memory repository.
+import { describe, expect, it } from "vitest";
+import type { CounterRepository } from "../model/counter.repository";
+import { CounterViewModel } from "./counter.viewmodel";
+
+function memoryRepository(initial = 0): CounterRepository & { stored: number } {
+  return {
+    stored: initial,
+    load() {
+      return this.stored;
+    },
+    save(value: number) {
+      this.stored = value;
+    },
+  };
+}
+
+describe("CounterViewModel", () => {
+  it("increments and saves the count", () => {
+    const repo = memoryRepository();
+    const vm = new CounterViewModel(repo);
+    vm.increment.execute();
+    vm.increment.execute();
+    expect(vm.count.value).toBe(2);
+    expect(repo.stored).toBe(2);
+  });
+
+  it("can only reset when the count is not zero", () => {
+    const vm = new CounterViewModel(memoryRepository());
+    expect(vm.reset.canExecute.value).toBe(false);
+    vm.increment.execute();
+    expect(vm.reset.canExecute.value).toBe(true);
+    vm.reset.execute();
+    expect(vm.count.value).toBe(0);
+  });
+});

package/templates/default/src/viewmodel/counter.viewmodel.ts

@@ -0,0 +1,26 @@
+// ViewModel: screen state and actions. Does not know how it is drawn.
+import { ViewModel } from "@bull-js/runtime";
+import type { CounterRepository } from "../model/counter.repository";
+
+export class CounterViewModel extends ViewModel {
+  readonly #count = this.state(0);
+
+  readonly count = this.#count.readonly;
+  readonly isZero = this.computed(() => this.#count.value === 0);
+
+  readonly increment = this.command(() => this.#set(this.#count.value + 1));
+  readonly reset = this.command(() => this.#set(0), { canExecute: () => !this.isZero.value });
+
+  constructor(private readonly repo: CounterRepository) {
+    super();
+  }
+
+  protected override onActivate() {
+    this.#count.set(this.repo.load());
+  }
+
+  #set(value: number): void {
+    this.#count.set(value);
+    this.repo.save(value);
+  }
+}

package/templates/default/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noImplicitOverride": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": []
+  },
+  "include": ["src"]
+}