tutuca 0.9.70 → 0.9.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tutuca",
-  "version": "0.9.70",
+  "version": "0.9.72",
   "type": "module",
   "description": "Zero-dependency SPA framework with immutable state and virtual DOM",
   "main": "./dist/tutuca.js",
@@ -13,6 +13,8 @@
     "./ext": "./dist/tutuca.ext.js",
     "./extra-ext": "./dist/tutuca-extra.ext.js",
     "./dev-ext": "./dist/tutuca-dev.ext.js",
+    "./immutable": "./dist/immutable.js",
+    "./chai": "./dist/chai.js",
     "./package.json": "./package.json"
   },
   "bin": {
@@ -49,6 +51,8 @@
     "dist/tutuca.ext.js",
     "dist/tutuca-extra.ext.js",
     "dist/tutuca-dev.ext.js",
+    "dist/immutable.js",
+    "dist/chai.js",
     "skill"
   ],
   "dependencies": {
@@ -56,9 +60,13 @@
     "prettier": "^3.0.0"
   },
   "peerDependencies": {
+    "chai": "^6.2.2",
     "immutable": "*"
   },
   "peerDependenciesMeta": {
+    "chai": {
+      "optional": true
+    },
     "immutable": {
       "optional": true
     }

package/skill/tutuca/cli.md

@@ -1,11 +1,13 @@
 # Tutuca CLI Reference
 
 The `tutuca` CLI inspects, documents, lints, tests, and renders any
-module that follows the *Conventional Module Exports* shape (see
-`core.md`). Reach this file when you need command/flag/exit-code
+module that follows the
+[Conventional Module Exports](./core.md#conventional-module-exports)
+shape. Reach this file when you need command/flag/exit-code
 details, or when reading a lint code out of `lint` output. Otherwise
-*Verifying changes* in `core.md` (run `lint`, then `test` for
-behavior changes, then `render --title "<your example>"`) is enough.
+[Verifying changes](./core.md#verifying-changes) in `core.md` (run
+`lint`, then `test` for behavior changes, then
+`render --title "<your example>"`) is enough.
 
 ## Install / invoke
 
@@ -156,25 +158,25 @@ export function getTests({ describe, test, expect }) {
     describe("inc()", () => {                           // method
       test("returns a Counter with count + 1", () => {
         const next = Counter.make().inc();
-        expect(next).to.be.instanceOf(Counter.Class);
-        expect(next.count).to.equal(1);
+        expect(next).toBeInstanceOf(Counter.Class);
+        expect(next.count).toBe(1);
       });
       test("does not mutate the original instance", () => {
         const c = Counter.make({ count: 7 });
         c.inc();
-        expect(c.count).to.equal(7);                    // immutability
+        expect(c.count).toBe(7);                    // immutability
       });
     });
 
     describe("dec()", () => {                           // input handler
       test("returns a Counter with count - 1", () => {
         const next = Counter.input.dec.call(Counter.make());
-        expect(next.count).to.equal(-1);
+        expect(next.count).toBe(-1);
       });
     });
 
     test("inc and dec round-trip", () => {              // untagged path
-      expect(Counter.input.dec.call(Counter.make().inc()).count).to.equal(0);
+      expect(Counter.input.dec.call(Counter.make().inc()).count).toBe(0);
     });
   });
 }

package/skill/tutuca/core.md

@@ -189,8 +189,8 @@ separate.
 
 Views are name-based: there is no arithmetic expression syntax in
 values, and no Vue- or Mustache-style `{{ … }}` placeholders. Every
-value slot — conditions (`@show`, `@if`, `@when`), iteration (`@each`,
-`render-each`), enrichment (`@enrich-with`, `@loop-with`), template
+value slot — conditions (`@show`, `@if`), iteration (`@each`,
+`render-each`, `@when`), enrichment (`@enrich-with`, `@loop-with`), template
 expansion (`{…}`, `:attr`, `@text`) — names a field, method, macro, or
 handler defined on the component (or registered with the app). Logic
 lives in `methods` / `alter` / `input` / `bubble` / `receive` /
@@ -217,7 +217,7 @@ literal with spaces (escape an interior quote as `\'`).
 | `@x`     | local binding (loop / scope)              | `@key`, `@value`      |
 | `^x`     | macro parameter                           | `^label`              |
 | `!x`     | request handler                           | `!loadData`           |
-| `*x`     | dynamic binding — see `advanced.md`      | `*theme`              |
+| `*x`     | dynamic binding — see [advanced.md](./advanced.md) | `*theme`          |
 | `Name`   | component type (PascalCase)               | `Item`, `JsonNull`    |
 | `name`   | bare identifier — meaning depends on slot | `dec`, `value`        |
 | `'str'`  | string literal                            | `'btn btn-success'`   |
@@ -419,6 +419,11 @@ statics: {
 <x text="@value"></x>               <!-- loop binding -->
 ```
 
+Use `@text` when you already have a host element to put the text in; use
+`<x text=…>` for bare text with no wrapping element (e.g. text interleaved with
+other inline content, or a loop binding). Both take the same value forms
+(`.field`, `$method`, `@binding`).
+
 ## Attribute Binding
 
 ```html
@@ -509,6 +514,17 @@ input: { onPick(detail) { return this.setCurrent(detail.unicode); } }
 view: html`<emoji-picker @on.emoji-click="onPick value"></emoji-picker>`,
 ```
 
+Handle these events declaratively with `@on.<event-name>` in the view —
+don't grab the node from host/glue code and `addEventListener` on it. A
+listener attached from outside the component runs outside the handler
+model: no `return this.set…()`, no transactor batching, and the mutation
+is invisible to the component that owns the state (the same hazard as
+reaching into `app.state` directly). For any event with a real element in
+the tree, `@on.` is the only entry point you need. Genuinely external
+inbound sources (WebSocket, `postMessage`, timers) have no element to bind
+— route those through `app.sendAtRoot` instead (see
+[request-response.md](./request-response.md)).
+
 Pitfall: binding camelCase JS properties on a custom element silently
 fails. `:mapId=".id"` does *not* invoke a `set mapId` setter
 — the HTML parser lowercased the attribute name, so the framework assigns
@@ -899,3 +915,16 @@ export function getExamples()         {
 }
 export function getTests({ describe, test, expect }) { /*...*/ }      // optional — see cli.md
 ```
+
+## See also
+
+- [request-response.md](./request-response.md) — `bubble` / `send`-`receive` /
+  `request`-`response` channels, the `ctx.at` `PathBuilder`, `$unknown`, and
+  request-handler registration.
+- [advanced.md](./advanced.md) — dynamic bindings (`*x`), pseudo-`@x` for
+  `<select>` / `<table>` / `<tr>`, drag & drop, custom seq types, Tailwind /
+  MargaUI compilation.
+- [testing.md](./testing.md) — `getTests` shape and the handler calling
+  convention for tests.
+- [cli.md](./cli.md) — commands, flags, exit codes, and the full linter rule
+  list.

package/skill/tutuca/testing.md

@@ -16,13 +16,19 @@ A module opts into `tutuca test` by exporting `getTests`:
 export function getTests({ describe, test, expect }) {
   describe(MyComp, () => {
     test("does the thing", () => {
-      expect(MyComp.make().doTheThing().count).to.equal(1);
+      expect(MyComp.make().doTheThing().count).toBe(1);
     });
   });
 }
 ```
 
-- `expect` is chai.
+- `expect` is chai, extended with **jest-style matchers** (`toBe`,
+  `toEqual`, `toContain`, `toThrow`, `.not.toBe`, …) — the recommended
+  style. Chai's BDD chain (`expect(x).to.equal(1)`) still works for those
+  who prefer it. Run `tutuca help` for the full matcher list (it's
+  surfaced from code). Asymmetric/mock matchers
+  (`expect.objectContaining`, `toHaveBeenCalled…`, `toMatchSnapshot`) are
+  **not** available — tutuca has no mocking layer.
 - `test` and `describe` are **Tutuca's own** subset of the common
   Mocha/Bun-style API, injected by `tutuca test` — not Bun's built-ins.
   Available calls: `describe(title, fn)`, `describe(Component, fn)`,
@@ -147,7 +153,7 @@ test("filters and enriches", () => {
     when: "keepEven",
     enrichWith: "addLabel",
   });
-  expect(r).to.deep.equal([
+  expect(r).toEqual([
     { key: 0, value: 10, label: "0/4: 10" },
     { key: 2, value: 30, label: "2/4: 30" },
   ]);
@@ -211,8 +217,8 @@ input: { setCount(n) { return this.setCount(n); } }
 At test time, the "good" forms become trivial:
 
 ```js
-expect(MyComp.make().setName("Ada").name).to.equal("Ada");
-expect(MyComp.input.setCount.call(MyComp.make(), 42).count).to.equal(42);
+expect(MyComp.make().setName("Ada").name).toBe("Ada");
+expect(MyComp.input.setCount.call(MyComp.make(), 42).count).toBe(42);
 ```
 
 The "bad" forms force every test to construct
@@ -237,31 +243,31 @@ export function getTests({ describe, test, expect }) {
   describe(Counter, () => {
     describe("inc()", () => {                         // method
       test("returns a Counter with count + 1", () => {
-        expect(Counter.make().inc().count).to.equal(1);
+        expect(Counter.make().inc().count).toBe(1);
       });
       test("does not mutate the original instance", () => {
         const c = Counter.make({ count: 7 });
         c.inc();
-        expect(c.count).to.equal(7);
+        expect(c.count).toBe(7);
       });
     });
 
     describe("dec()", () => {                         // input handler, no args
       test("returns a Counter with count - 1", () => {
         const next = Counter.input.dec.call(Counter.make());
-        expect(next.count).to.equal(-1);
+        expect(next.count).toBe(-1);
       });
     });
 
     describe("setCount()", () => {                    // input handler, valueAsInt
       test("sets the count from a parsed int", () => {
         const next = Counter.input.setCount.call(Counter.make(), 42);
-        expect(next.count).to.equal(42);
+        expect(next.count).toBe(42);
       });
     });
 
     test("inc and dec round-trip", () => {            // untagged, inherits Counter
-      expect(Counter.input.dec.call(Counter.make().inc()).count).to.equal(0);
+      expect(Counter.input.dec.call(Counter.make().inc()).count).toBe(0);
     });
   });
 }