balises 0.8.2 → 0.8.4

package/README.md

@@ -33,6 +33,8 @@ Ultimately it turns out that I am quite happy with the result! It is quite perfo
 - [Async Generators](#async-generators)
   - [DOM Preservation on Restart](#dom-preservation-on-restart)
 - [Template Syntax](#template-syntax)
+  - [Efficient List Rendering with each()](#efficient-list-rendering-with-each)
+  - [Conditional Rendering with when() and match()](#conditional-rendering-with-when-and-match)
 - [Reactivity API](#reactivity-api)
 - [Web Components](#web-components)
 - [Tree-Shaking / Modular Imports](#tree-shaking--modular-imports)
@@ -113,8 +115,11 @@ const html = baseHtml.with(asyncPlugin);
 const userId = signal(1);
 
 html`
-  ${async function* () {
+  ${async function* (settled, ctx) {
+    void settled;
     const id = userId.value; // Track dependency - restarts when userId changes
+    const prev = ctx?.lastId;
+    if (ctx) ctx.lastId = id;
 
     yield html`<div class="loading">Loading...</div>`;
 
@@ -129,6 +134,8 @@ userId.value = 2;
 
 Async generators replace the entire yielded content on each yield. For surgical updates within a stable DOM structure, use reactive bindings (`${() => state.value}`) instead.
 
+Generators receive a mutable context object as their second argument. This object persists across restarts and can hold user-defined state for diffing or caching. Use the `AsyncGeneratorContext<T>` type from `balises/async` for type safety.
+
 ### DOM Preservation on Restart
 
 When a signal changes, the generator restarts and normally replaces the DOM. To preserve existing DOM and enable surgical updates via reactive bindings, return the `settled` parameter:
@@ -142,8 +149,9 @@ const userId = signal(1);
 const state = store({ user: null, loading: false });
 
 html`
-  ${async function* (settled?: RenderedContent) {
+  ${async function* (settled?: RenderedContent, ctx?: { lastId?: number }) {
     const id = userId.value;
+    if (ctx) ctx.lastId = id;
 
     if (settled) {
       // Restart: update state, preserve existing DOM
@@ -305,6 +313,77 @@ each(list, keyFn, renderFn); // keyFn extracts key, renderFn receives ReadonlySi
 
 **Important:** Access item properties through `itemSignal.value` and wrap in `() => ...` for reactive updates.
 
+### Conditional Rendering with `when()` and `match()`
+
+When conditionally rendering content, a naive approach re-creates templates on every change, even when the condition result stays the same. Use `when()` and `match()` for conditional rendering where branches are rendered based on the selector's **result**, not the underlying data.
+
+**Note:** Import from `balises/match` and use `html.with(matchPlugin)` to enable.
+
+```ts
+import { html as baseHtml, store } from "balises";
+import matchPlugin, { when } from "balises/match";
+
+const html = baseHtml.with(matchPlugin);
+const state = store({ user: null });
+
+html`
+  ${when(
+    () => !!state.user,
+    [
+      () => html`<Profile>${() => state.user.name}</Profile>`,
+      () => html`<LoginPrompt />`,
+    ],
+  )}
+`.render();
+
+// When user changes from Alice to Bob, !!state.user stays true
+// so the Profile branch is REUSED (not recreated)
+state.user = { name: "Alice" };
+state.user = { name: "Bob" }; // Same branch, just updates the name binding
+```
+
+The second argument is an array `[ifTrue, ifFalse?]`. If `ifFalse` is omitted, renders nothing when false.
+
+For multiple cases, use `match()`:
+
+```ts
+import matchPlugin, { match } from "balises/match";
+
+const status = signal<"idle" | "loading" | "error" | "success">("idle");
+
+html`
+  ${match(() => status.value, {
+    idle: () => html`<IdleState />`,
+    loading: () => html`<Spinner />`,
+    error: () => html`<ErrorMessage />`,
+    success: () => html`<content />`,
+    _: () => html`<Fallback />`, // Optional default case
+  })}
+`.render();
+```
+
+By default, branches are disposed when switching away (freeing memory). For scenarios where you want instant switching back (like tabs), use `{ cache: true }`:
+
+```ts
+html`
+  ${match(
+    () => state.activeTab,
+    {
+      home: () => html`<Home />`,
+      settings: () => html`<Settings />`,
+    },
+    { cache: true }, // Keep branches in memory for instant switching
+  )}
+`.render();
+
+// With cache: true, switching back reuses the same DOM nodes
+state.activeTab = "settings"; // Creates Settings
+state.activeTab = "home"; // Creates Home
+state.activeTab = "settings"; // Reuses cached Settings (same DOM!)
+```
+
+Reactive bindings inside branches continue to work normally regardless of caching.
+
 ## Reactivity API
 
 ### `signal<T>(value)`
@@ -564,7 +643,7 @@ import { batch, scope } from "balises/signals/context";
 
 ### Template Plugins
 
-The `each()` and async generator features are provided as opt-in plugins to keep the base bundle minimal. Use `html.with()` to compose plugins:
+The `each()`, `when()`/`match()`, and async generator features are provided as opt-in plugins to keep the base bundle minimal. Use `html.with()` to compose plugins:
 
 ```ts
 // With each() support for keyed lists
@@ -573,18 +652,25 @@ import eachPlugin, { each } from "balises/each";
 
 const html = baseHtml.with(eachPlugin);
 
+// With when()/match() for cached conditional rendering
+import { html as baseHtml } from "balises";
+import matchPlugin, { when, match } from "balises/match";
+
+const html = baseHtml.with(matchPlugin);
+
 // With async generator support
 import { html as baseHtml } from "balises";
 import asyncPlugin from "balises/async";
 
 const html = baseHtml.with(asyncPlugin);
 
-// With both plugins
+// With multiple plugins
 import { html as baseHtml } from "balises";
 import eachPlugin, { each } from "balises/each";
+import matchPlugin, { when, match } from "balises/match";
 import asyncPlugin from "balises/async";
 
-const html = baseHtml.with(eachPlugin, asyncPlugin);
+const html = baseHtml.with(eachPlugin, matchPlugin, asyncPlugin);
 ```
 
 ### Using as a Standalone Signals Library
@@ -700,23 +786,23 @@ Performance comparison of Balises against other popular reactive libraries. Benc
 ┌───────┬───────────────────┬───────┬───────────────┬──────────────────┐
 │ Rank  │ Library           │ Score │ Avg Time (μs) │ vs Fastest       │
 ├───────┼───────────────────┼───────┼───────────────┼──────────────────┤
-│ #1 🏆 │ preact@1.12.1     │ 0.000 │ 63.12         │ 1.00x (baseline) │
+│ #1 🏆 │ preact@1.12.1     │ 0.000 │ 63.20         │ 1.00x (baseline) │
 ├───────┼───────────────────┼───────┼───────────────┼──────────────────┤
-│ #2    │ balises@0.8.1     │ 0.062 │ 96.24         │ 1.52x            │
+│ #2    │ balises@0.8.3     │ 0.059 │ 90.83         │ 1.44x            │
 ├───────┼───────────────────┼───────┼───────────────┼──────────────────┤
-│ #3    │ vue@3.5.26        │ 0.103 │ 93.97         │ 1.49x            │
+│ #3    │ vue@3.5.26        │ 0.103 │ 93.43         │ 1.48x            │
 ├───────┼───────────────────┼───────┼───────────────┼──────────────────┤
-│ #4    │ maverick@6.0.0    │ 0.154 │ 125.73        │ 1.99x            │
+│ #4    │ maverick@6.0.0    │ 0.152 │ 122.20        │ 1.93x            │
 ├───────┼───────────────────┼───────┼───────────────┼──────────────────┤
-│ #5    │ usignal@0.10.0    │ 0.186 │ 132.38        │ 2.10x            │
+│ #5    │ usignal@0.10.0    │ 0.187 │ 132.51        │ 2.10x            │
 ├───────┼───────────────────┼───────┼───────────────┼──────────────────┤
-│ #6    │ angular@19.2.17   │ 0.210 │ 157.89        │ 2.50x            │
+│ #6    │ angular@19.2.17   │ 0.215 │ 161.81        │ 2.56x            │
 ├───────┼───────────────────┼───────┼───────────────┼──────────────────┤
-│ #7    │ solid@1.9.10      │ 0.342 │ 260.88        │ 4.13x            │
+│ #7    │ solid@1.9.10      │ 0.342 │ 255.37        │ 4.04x            │
 ├───────┼───────────────────┼───────┼───────────────┼──────────────────┤
-│ #8    │ mobx@6.15.0       │ 0.844 │ 892.34        │ 14.14x           │
+│ #8    │ mobx@6.15.0       │ 0.858 │ 889.72        │ 14.08x           │
 ├───────┼───────────────────┼───────┼───────────────┼──────────────────┤
-│ #9    │ hyperactiv@0.11.3 │ 1.000 │ 1048.63       │ 16.61x           │
+│ #9    │ hyperactiv@0.11.3 │ 1.000 │ 1023.25       │ 16.19x           │
 └───────┴───────────────────┴───────┴───────────────┴──────────────────┘
 ```
 
@@ -728,7 +814,7 @@ Performance comparison of Balises against other popular reactive libraries. Benc
 ├───────────────────┼───────────────┼─────────────┼────────────────┼────────────────────┼─────────────┼──────────────┼──────────┤
 │ preact@1.12.1     │ #1 🏆         │ #1 🏆       │ #1 🏆          │ #1 🏆              │ #1 🏆       │ #1 🏆        │ 1.0      │
 ├───────────────────┼───────────────┼─────────────┼────────────────┼────────────────────┼─────────────┼──────────────┼──────────┤
-│ balises@0.8.1     │ #3            │ #2          │ #2             │ #2                 │ #2          │ #2           │ 2.2      │
+│ balises@0.8.3     │ #3            │ #2          │ #2             │ #2                 │ #2          │ #2           │ 2.2      │
 ├───────────────────┼───────────────┼─────────────┼────────────────┼────────────────────┼─────────────┼──────────────┼──────────┤
 │ vue@3.5.26        │ #2            │ #3          │ #5             │ #3                 │ #3          │ #5           │ 3.5      │
 ├───────────────────┼───────────────┼─────────────┼────────────────┼────────────────────┼─────────────┼──────────────┼──────────┤
@@ -761,7 +847,7 @@ Performance comparison of Balises against other popular reactive libraries. Benc
 - These are synthetic benchmarks measuring pure reactivity - real apps should consider the whole picture (ecosystem, docs, community, etc.)
 - Lower rank = better performance
 
-_Last updated: 2026-01-11_
+_Last updated: 2026-01-21_
 
 <!-- BENCHMARK_RESULTS_END -->
 

package/dist/esm/async.d.ts

@@ -33,8 +33,13 @@ import { type InterpolationPlugin } from "./template.js";
  * ```ts
  * import asyncPlugin, { type RenderedContent } from "balises/async";
  *
- * async function* loadUser(settled?: RenderedContent) {
+ * async function* loadUser(
+ *   settled?: RenderedContent,
+ *   ctx?: AsyncGeneratorContext<{ lastId?: number }>,
+ * ) {
  *   const id = userId.value; // Track dependency
+ *   const previous = ctx?.lastId;
+ *   ctx && (ctx.lastId = id);
  *
  *   if (settled) {
  *     // Restart: update state, keep existing DOM
@@ -55,6 +60,10 @@ export interface RenderedContent {
     /** @internal Brand to prevent construction outside the library */
     readonly __brand: "RenderedContent";
 }
+/**
+ * Mutable context object that persists across async generator restarts.
+ */
+export type AsyncGeneratorContext<T extends object = Record<string, unknown>> = T;
 /**
  * Plugin that handles async generator functions.
  * Auto-detects `async function*` without needing a wrapper.

package/dist/esm/async.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"async.d.ts","sourceRoot":"","sources":["../../src/async.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAOH,OAAO,EAAY,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAMnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,WAAW,eAAe;IAC9B,kEAAkE;IAClE,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC;CACrC;AAwDD;;;GAGG;AACH,QAAA,MAAM,WAAW,EAAE,mBAMlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"async.d.ts","sourceRoot":"","sources":["../../src/async.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAOH,OAAO,EAAY,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAMnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,WAAW,eAAe;IAC9B,kEAAkE;IAClE,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAC1E,CAAC,CAAC;AAyDJ;;;GAGG;AACH,QAAA,MAAM,WAAW,EAAE,mBAMlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/esm/async.js

@@ -120,6 +120,7 @@ function bindAsyncGenerator(genFn, marker, disposers) {
     let iterationId = 0;
     let depUnsubscribers = [];
     let lastSettled = null;
+    const context = {};
     const clearNodes = () => {
         for (let i = 0; i < childDisposers.length; i++)
             childDisposers[i]();
@@ -153,7 +154,7 @@ function bindAsyncGenerator(genFn, marker, disposers) {
         cleanupGenerator();
         if (disposed)
             return;
-        generator = genFn(lastSettled ?? undefined);
+        generator = genFn(lastSettled ?? undefined, context);
         let lastYielded = null;
         while (!disposed && thisIteration === iterationId) {
             let result;

package/dist/esm/async.js.map

@@ -1 +1 @@
-{"version":3,"file":"async.js","sourceRoot":"","sources":["../../src/async.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Async generator support for templates.\n *\n * This module provides opt-in support for async generators in templates,\n * enabling loading states, progressive content, and automatic restart\n * when signal dependencies change.\n *\n * @example\n * ```ts\n * import { html as baseHtml, signal } from \"balises\";\n * import asyncPlugin from \"balises/async\";\n *\n * const html = baseHtml.with(asyncPlugin);\n * const userId = signal(1);\n *\n * // Async generators are auto-detected - no wrapper needed!\n * html`<div>${async function* () {\n *   yield html`<span>Loading user ${userId.value}...</span>`;\n *   const user = await fetchUser(userId.value);\n *   return html`<span>${user.name}</span>`;\n * }}</div>`.render();\n * ```\n */\n\nimport {\n  onTrack,\n  type Subscriber,\n  type TrackableSource,\n} from \"./signals/context.js\";\nimport { Template, type InterpolationPlugin } from \"./template.js\";\nimport { isSignal, type Reactive } from \"./signals/index.js\";\n\n/** Reactive source type - TrackableSource may or may not be subscribable */\ntype SubscribableSource = Reactive<unknown>;\n\n/**\n * Opaque handle representing settled content from an async generator.\n *\n * When an async generator restarts due to signal changes, it receives the\n * previous settled content as its first argument. Return this value to\n * preserve the existing DOM instead of re-rendering.\n *\n * @example\n * ```ts\n * import asyncPlugin, { type RenderedContent } from \"balises/async\";\n *\n * async function* loadUser(settled?: RenderedContent) {\n *   const id = userId.value; // Track dependency\n *\n *   if (settled) {\n *     // Restart: update state, keep existing DOM\n *     const user = await fetchUser(id);\n *     state.user = user; // Triggers surgical updates via reactive bindings\n *     return settled; // Preserve DOM\n *   }\n *\n *   // First load\n *   yield html`<div class=\"skeleton\">...</div>`;\n *   const user = await fetchUser(id);\n *   state.user = user;\n *   return UserCard({ state });\n * }\n * ```\n */\nexport interface RenderedContent {\n  /** @internal Brand to prevent construction outside the library */\n  readonly __brand: \"RenderedContent\";\n}\n\n/** Internal structure for RenderedContent */\ninterface RenderedContentInternal extends RenderedContent {\n  readonly nodes: Node[];\n  readonly childDisposers: (() => void)[];\n}\n\n/** Async generator function type */\ntype AsyncGenFn = (\n  settled?: RenderedContent,\n) => AsyncGenerator<unknown, unknown, unknown>;\n\n/**\n * Check if a value is an async generator function.\n */\nfunction isAsyncGeneratorFunction(\n  value: unknown,\n): value is AsyncGeneratorFunction {\n  if (typeof value !== \"function\") return false;\n  const constructor = value.constructor;\n  return (\n    constructor &&\n    (constructor.name === \"AsyncGeneratorFunction\" ||\n      // Check prototype chain for async generator\n      Object.prototype.toString.call(constructor.prototype) ===\n        \"[object AsyncGeneratorFunction]\")\n  );\n}\n\n/**\n * Render content and insert nodes before marker.\n * Handles Templates and primitives.\n */\nfunction insertContent(\n  marker: Comment,\n  value: unknown,\n  nodes: Node[],\n  disposers: (() => void)[],\n): void {\n  const parent = marker.parentNode!;\n\n  for (const item of Array.isArray(value) ? value : [value]) {\n    if (item instanceof Template) {\n      const { fragment, dispose } = item.render();\n      disposers.push(dispose);\n      nodes.push(...fragment.childNodes);\n      parent.insertBefore(fragment, marker);\n    } else if (item != null && typeof item !== \"boolean\") {\n      const node = document.createTextNode(String(item));\n      nodes.push(node);\n      parent.insertBefore(node, marker);\n    }\n  }\n}\n\n/**\n * Plugin that handles async generator functions.\n * Auto-detects `async function*` without needing a wrapper.\n */\nconst asyncPlugin: InterpolationPlugin = (value) => {\n  if (!isAsyncGeneratorFunction(value)) return null;\n\n  return (marker, disposers) => {\n    bindAsyncGenerator(value as AsyncGenFn, marker, disposers);\n  };\n};\n\nexport default asyncPlugin;\n\n/** Result of tracking dependencies during a function call */\ninterface TrackResult<T> {\n  value: T;\n  subscribe: (callback: Subscriber) => void;\n  unsubscribe: () => void;\n}\n\n/**\n * Track reactive dependencies accessed during a function call.\n * Sets up the onTrack hook temporarily to capture signal/computed accesses.\n */\nfunction track<T>(fn: () => T): TrackResult<T> {\n  const sources = new Set<TrackableSource>();\n  const prevHook = onTrack.current;\n  onTrack.current = (source) => sources.add(source);\n\n  let value: T;\n  try {\n    value = fn();\n  } finally {\n    onTrack.current = prevHook;\n  }\n\n  let unsubscribers: (() => void)[] = [];\n  let subscribed = false;\n\n  return {\n    value,\n    subscribe: (callback: Subscriber) => {\n      if (subscribed) return;\n      subscribed = true;\n      for (const source of sources) {\n        // Only subscribe to actual signals/computeds (not selector slots)\n        if (isSignal(source)) {\n          unsubscribers.push(\n            (source as SubscribableSource).subscribe(callback),\n          );\n        }\n      }\n    },\n    unsubscribe: () => {\n      for (const unsub of unsubscribers) unsub();\n      unsubscribers = [];\n      subscribed = false;\n    },\n  };\n}\n\n/**\n * Bind an async generator function to a marker position.\n * Tracks signal dependencies during generator execution and restarts\n * the generator when those dependencies change.\n */\nfunction bindAsyncGenerator(\n  genFn: AsyncGenFn,\n  marker: Comment,\n  disposers: (() => void)[],\n): void {\n  let generator: AsyncGenerator<unknown> | null = null;\n  let currentNodes: Node[] = [];\n  let childDisposers: (() => void)[] = [];\n  let disposed = false;\n  let iterationId = 0;\n  let depUnsubscribers: (() => void)[] = [];\n  let lastSettled: RenderedContentInternal | null = null;\n\n  const clearNodes = () => {\n    for (let i = 0; i < childDisposers.length; i++) childDisposers[i]!();\n    for (let i = 0; i < currentNodes.length; i++)\n      currentNodes[i]!.parentNode?.removeChild(currentNodes[i]!);\n    childDisposers = [];\n    currentNodes = [];\n  };\n\n  const clearDeps = () => {\n    for (let i = 0; i < depUnsubscribers.length; i++) depUnsubscribers[i]!();\n    depUnsubscribers = [];\n  };\n\n  const cleanupGenerator = () => {\n    clearDeps();\n    if (generator) {\n      generator.return(undefined);\n      generator = null;\n    }\n  };\n\n  const cleanup = () => {\n    cleanupGenerator();\n    clearNodes();\n  };\n\n  const render = (value: unknown) => {\n    clearNodes();\n    insertContent(marker, value, currentNodes, childDisposers);\n  };\n\n  const runGenerator = async () => {\n    const thisIteration = ++iterationId;\n    cleanupGenerator();\n\n    if (disposed) return;\n\n    generator = genFn(lastSettled ?? undefined);\n    let lastYielded: unknown = null;\n\n    while (!disposed && thisIteration === iterationId) {\n      let result: IteratorResult<unknown>;\n\n      try {\n        const tracked = track(() => generator!.next());\n\n        tracked.subscribe(() => {\n          if (!disposed && thisIteration === iterationId) {\n            void runGenerator();\n          }\n        });\n        depUnsubscribers.push(tracked.unsubscribe);\n\n        result = await tracked.value;\n      } catch (e) {\n        cleanup();\n        if (!disposed) throw e;\n        return;\n      }\n\n      if (thisIteration !== iterationId) return;\n\n      const { value, done } = result;\n\n      if (done) {\n        if (value === lastSettled && lastSettled !== null) {\n          currentNodes = lastSettled.nodes;\n          childDisposers = lastSettled.childDisposers;\n        } else {\n          render(value !== undefined ? value : lastYielded);\n          lastSettled = {\n            __brand: \"RenderedContent\" as const,\n            nodes: currentNodes,\n            childDisposers: childDisposers,\n          };\n        }\n        return;\n      }\n\n      lastYielded = value;\n      render(value);\n    }\n  };\n\n  void runGenerator();\n\n  disposers.push(() => {\n    disposed = true;\n    cleanup();\n    lastSettled = null;\n  });\n}\n"]}
+{"version":3,"file":"async.js","sourceRoot":"","sources":["../../src/async.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Async generator support for templates.\n *\n * This module provides opt-in support for async generators in templates,\n * enabling loading states, progressive content, and automatic restart\n * when signal dependencies change.\n *\n * @example\n * ```ts\n * import { html as baseHtml, signal } from \"balises\";\n * import asyncPlugin from \"balises/async\";\n *\n * const html = baseHtml.with(asyncPlugin);\n * const userId = signal(1);\n *\n * // Async generators are auto-detected - no wrapper needed!\n * html`<div>${async function* () {\n *   yield html`<span>Loading user ${userId.value}...</span>`;\n *   const user = await fetchUser(userId.value);\n *   return html`<span>${user.name}</span>`;\n * }}</div>`.render();\n * ```\n */\n\nimport {\n  onTrack,\n  type Subscriber,\n  type TrackableSource,\n} from \"./signals/context.js\";\nimport { Template, type InterpolationPlugin } from \"./template.js\";\nimport { isSignal, type Reactive } from \"./signals/index.js\";\n\n/** Reactive source type - TrackableSource may or may not be subscribable */\ntype SubscribableSource = Reactive<unknown>;\n\n/**\n * Opaque handle representing settled content from an async generator.\n *\n * When an async generator restarts due to signal changes, it receives the\n * previous settled content as its first argument. Return this value to\n * preserve the existing DOM instead of re-rendering.\n *\n * @example\n * ```ts\n * import asyncPlugin, { type RenderedContent } from \"balises/async\";\n *\n * async function* loadUser(\n *   settled?: RenderedContent,\n *   ctx?: AsyncGeneratorContext<{ lastId?: number }>,\n * ) {\n *   const id = userId.value; // Track dependency\n *   const previous = ctx?.lastId;\n *   ctx && (ctx.lastId = id);\n *\n *   if (settled) {\n *     // Restart: update state, keep existing DOM\n *     const user = await fetchUser(id);\n *     state.user = user; // Triggers surgical updates via reactive bindings\n *     return settled; // Preserve DOM\n *   }\n *\n *   // First load\n *   yield html`<div class=\"skeleton\">...</div>`;\n *   const user = await fetchUser(id);\n *   state.user = user;\n *   return UserCard({ state });\n * }\n * ```\n */\nexport interface RenderedContent {\n  /** @internal Brand to prevent construction outside the library */\n  readonly __brand: \"RenderedContent\";\n}\n\n/**\n * Mutable context object that persists across async generator restarts.\n */\nexport type AsyncGeneratorContext<T extends object = Record<string, unknown>> =\n  T;\n\n/** Internal structure for RenderedContent */\ninterface RenderedContentInternal extends RenderedContent {\n  readonly nodes: Node[];\n  readonly childDisposers: (() => void)[];\n}\n\n/** Async generator function type */\ntype AsyncGenFn = (\n  settled?: RenderedContent,\n  ctx?: AsyncGeneratorContext,\n) => AsyncGenerator<unknown, unknown, unknown>;\n\n/**\n * Check if a value is an async generator function.\n */\nfunction isAsyncGeneratorFunction(\n  value: unknown,\n): value is AsyncGeneratorFunction {\n  if (typeof value !== \"function\") return false;\n  const constructor = value.constructor;\n  return (\n    constructor &&\n    (constructor.name === \"AsyncGeneratorFunction\" ||\n      // Check prototype chain for async generator\n      Object.prototype.toString.call(constructor.prototype) ===\n        \"[object AsyncGeneratorFunction]\")\n  );\n}\n\n/**\n * Render content and insert nodes before marker.\n * Handles Templates and primitives.\n */\nfunction insertContent(\n  marker: Comment,\n  value: unknown,\n  nodes: Node[],\n  disposers: (() => void)[],\n): void {\n  const parent = marker.parentNode!;\n\n  for (const item of Array.isArray(value) ? value : [value]) {\n    if (item instanceof Template) {\n      const { fragment, dispose } = item.render();\n      disposers.push(dispose);\n      nodes.push(...fragment.childNodes);\n      parent.insertBefore(fragment, marker);\n    } else if (item != null && typeof item !== \"boolean\") {\n      const node = document.createTextNode(String(item));\n      nodes.push(node);\n      parent.insertBefore(node, marker);\n    }\n  }\n}\n\n/**\n * Plugin that handles async generator functions.\n * Auto-detects `async function*` without needing a wrapper.\n */\nconst asyncPlugin: InterpolationPlugin = (value) => {\n  if (!isAsyncGeneratorFunction(value)) return null;\n\n  return (marker, disposers) => {\n    bindAsyncGenerator(value as AsyncGenFn, marker, disposers);\n  };\n};\n\nexport default asyncPlugin;\n\n/** Result of tracking dependencies during a function call */\ninterface TrackResult<T> {\n  value: T;\n  subscribe: (callback: Subscriber) => void;\n  unsubscribe: () => void;\n}\n\n/**\n * Track reactive dependencies accessed during a function call.\n * Sets up the onTrack hook temporarily to capture signal/computed accesses.\n */\nfunction track<T>(fn: () => T): TrackResult<T> {\n  const sources = new Set<TrackableSource>();\n  const prevHook = onTrack.current;\n  onTrack.current = (source) => sources.add(source);\n\n  let value: T;\n  try {\n    value = fn();\n  } finally {\n    onTrack.current = prevHook;\n  }\n\n  let unsubscribers: (() => void)[] = [];\n  let subscribed = false;\n\n  return {\n    value,\n    subscribe: (callback: Subscriber) => {\n      if (subscribed) return;\n      subscribed = true;\n      for (const source of sources) {\n        // Only subscribe to actual signals/computeds (not selector slots)\n        if (isSignal(source)) {\n          unsubscribers.push(\n            (source as SubscribableSource).subscribe(callback),\n          );\n        }\n      }\n    },\n    unsubscribe: () => {\n      for (const unsub of unsubscribers) unsub();\n      unsubscribers = [];\n      subscribed = false;\n    },\n  };\n}\n\n/**\n * Bind an async generator function to a marker position.\n * Tracks signal dependencies during generator execution and restarts\n * the generator when those dependencies change.\n */\nfunction bindAsyncGenerator(\n  genFn: AsyncGenFn,\n  marker: Comment,\n  disposers: (() => void)[],\n): void {\n  let generator: AsyncGenerator<unknown> | null = null;\n  let currentNodes: Node[] = [];\n  let childDisposers: (() => void)[] = [];\n  let disposed = false;\n  let iterationId = 0;\n  let depUnsubscribers: (() => void)[] = [];\n  let lastSettled: RenderedContentInternal | null = null;\n  const context: AsyncGeneratorContext = {};\n\n  const clearNodes = () => {\n    for (let i = 0; i < childDisposers.length; i++) childDisposers[i]!();\n    for (let i = 0; i < currentNodes.length; i++)\n      currentNodes[i]!.parentNode?.removeChild(currentNodes[i]!);\n    childDisposers = [];\n    currentNodes = [];\n  };\n\n  const clearDeps = () => {\n    for (let i = 0; i < depUnsubscribers.length; i++) depUnsubscribers[i]!();\n    depUnsubscribers = [];\n  };\n\n  const cleanupGenerator = () => {\n    clearDeps();\n    if (generator) {\n      generator.return(undefined);\n      generator = null;\n    }\n  };\n\n  const cleanup = () => {\n    cleanupGenerator();\n    clearNodes();\n  };\n\n  const render = (value: unknown) => {\n    clearNodes();\n    insertContent(marker, value, currentNodes, childDisposers);\n  };\n\n  const runGenerator = async () => {\n    const thisIteration = ++iterationId;\n    cleanupGenerator();\n\n    if (disposed) return;\n\n    generator = genFn(lastSettled ?? undefined, context);\n    let lastYielded: unknown = null;\n\n    while (!disposed && thisIteration === iterationId) {\n      let result: IteratorResult<unknown>;\n\n      try {\n        const tracked = track(() => generator!.next());\n\n        tracked.subscribe(() => {\n          if (!disposed && thisIteration === iterationId) {\n            void runGenerator();\n          }\n        });\n        depUnsubscribers.push(tracked.unsubscribe);\n\n        result = await tracked.value;\n      } catch (e) {\n        cleanup();\n        if (!disposed) throw e;\n        return;\n      }\n\n      if (thisIteration !== iterationId) return;\n\n      const { value, done } = result;\n\n      if (done) {\n        if (value === lastSettled && lastSettled !== null) {\n          currentNodes = lastSettled.nodes;\n          childDisposers = lastSettled.childDisposers;\n        } else {\n          render(value !== undefined ? value : lastYielded);\n          lastSettled = {\n            __brand: \"RenderedContent\" as const,\n            nodes: currentNodes,\n            childDisposers: childDisposers,\n          };\n        }\n        return;\n      }\n\n      lastYielded = value;\n      render(value);\n    }\n  };\n\n  void runGenerator();\n\n  disposers.push(() => {\n    disposed = true;\n    cleanup();\n    lastSettled = null;\n  });\n}\n"]}

package/dist/esm/match.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Match plugin - Conditional rendering with optional branch caching.
+ *
+ * This module provides opt-in support for conditional rendering,
+ * where branches are rendered based on selector results rather than
+ * underlying data changes.
+ *
+ * By default, branches are disposed when switching away (cache: false).
+ * Set cache: true to keep branches in memory for instant re-switching.
+ *
+ * @example
+ * ```ts
+ * import { html as baseHtml } from "balises";
+ * import matchPlugin, { when, match } from "balises/match";
+ *
+ * const html = baseHtml.with(matchPlugin);
+ *
+ * // Default: branches disposed on switch
+ * html`${when(() => !!state.user, [
+ *   () => html`<Profile />`,
+ *   () => html`<Login />`
+ * ])}`.render();
+ *
+ * // With caching: branches preserved for instant re-switching
+ * html`${match(() => state.tab, {
+ *   home: () => html`<Home />`,
+ *   settings: () => html`<Settings />`
+ * }, { cache: true })}`.render();
+ * ```
+ */
+import { Template, type InterpolationPlugin } from "./template.js";
+declare const MATCH: unique symbol;
+/** Options for when/match behavior */
+export interface MatchOptions {
+    /**
+     * Whether to cache branches when switching away.
+     * - false (default): Dispose branches when hidden, recreate when revisited
+     * - true: Keep branches in memory for instant re-switching
+     */
+    cache?: boolean;
+}
+interface MatchDescriptor {
+    readonly [MATCH]: true;
+    /** @internal */ selector: () => unknown;
+    /** @internal */ cases: Record<string, () => Template>;
+    /** @internal */ cache: boolean;
+}
+/**
+ * Conditional rendering for boolean conditions.
+ * Prevents re-renders when the condition result stays the same.
+ *
+ * @param condition - Function that returns a boolean
+ * @param branches - Array of [ifTrue, ifFalse?] factory functions. If ifFalse is omitted, renders nothing when false.
+ * @param options - Optional settings. cache: false (default) disposes branches on switch.
+ *
+ * @example
+ * ```ts
+ * // Render only when true
+ * html`${when(() => !!state.user, [
+ *   () => html`<Profile user=${state.user} />`
+ * ])}`
+ *
+ * // Render different content for true/false
+ * html`${when(() => !!state.user, [
+ *   () => html`<Profile user=${state.user} />`,
+ *   () => html`<LoginPrompt />`
+ * ])}`
+ *
+ * // With caching for instant switching
+ * html`${when(() => state.expanded, [
+ *   () => html`<ExpandedView />`,
+ *   () => html`<CollapsedView />`
+ * ], { cache: true })}`
+ * ```
+ */
+export declare function when(condition: () => boolean, [ifTrue, ifFalse]: [() => Template, (() => Template)?], options?: MatchOptions): MatchDescriptor;
+/**
+ * Conditional rendering for multiple cases.
+ * Prevents re-renders when the selector result stays the same.
+ *
+ * @param selector - Function that returns a key value
+ * @param cases - Object mapping keys to template factories. Use `_` for default case.
+ * @param options - Optional settings. cache: false (default) disposes branches on switch.
+ *
+ * @example
+ * ```ts
+ * // Loading states (no caching needed)
+ * html`${match(() => state.status, {
+ *   loading: () => html`<Spinner />`,
+ *   error: () => html`<Error message=${() => state.error} />`,
+ *   success: () => html`<Data items=${() => state.items} />`,
+ *   _: () => html`<Fallback />`,
+ * })}`
+ *
+ * // Tab switching with caching
+ * html`${match(() => state.tab, {
+ *   home: () => html`<Home />`,
+ *   settings: () => html`<Settings />`
+ * }, { cache: true })}`
+ * ```
+ */
+export declare function match<K extends string | number>(selector: () => K, cases: Partial<Record<K, () => Template>> & {
+    _?: () => Template;
+}, options?: MatchOptions): MatchDescriptor;
+/**
+ * Plugin that handles match/when descriptors.
+ * Register with: const html = baseHtml.with(matchPlugin);
+ */
+declare const matchPlugin: InterpolationPlugin;
+export default matchPlugin;
+//# sourceMappingURL=match.d.ts.map

package/dist/esm/match.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"match.d.ts","sourceRoot":"","sources":["../../src/match.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAGH,OAAO,EAAE,QAAQ,EAAE,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEnE,QAAA,MAAM,KAAK,eAAkB,CAAC;AAE9B,sCAAsC;AACtC,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,UAAU,eAAe;IACvB,QAAQ,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;IACvB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,OAAO,CAAC;IACzC,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,QAAQ,CAAC,CAAC;IACvD,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC;CACjC;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,IAAI,CAClB,SAAS,EAAE,MAAM,OAAO,EACxB,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,MAAM,QAAQ,EAAE,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EACtD,OAAO,CAAC,EAAE,YAAY,GACrB,eAAe,CAOjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC7C,QAAQ,EAAE,MAAM,CAAC,EACjB,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,GAAG;IAAE,CAAC,CAAC,EAAE,MAAM,QAAQ,CAAA;CAAE,EAClE,OAAO,CAAC,EAAE,YAAY,GACrB,eAAe,CAOjB;AAQD;;;GAGG;AACH,QAAA,MAAM,WAAW,EAAE,mBAsFlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/esm/match.js

@@ -0,0 +1,191 @@
+/**
+ * Match plugin - Conditional rendering with optional branch caching.
+ *
+ * This module provides opt-in support for conditional rendering,
+ * where branches are rendered based on selector results rather than
+ * underlying data changes.
+ *
+ * By default, branches are disposed when switching away (cache: false).
+ * Set cache: true to keep branches in memory for instant re-switching.
+ *
+ * @example
+ * ```ts
+ * import { html as baseHtml } from "balises";
+ * import matchPlugin, { when, match } from "balises/match";
+ *
+ * const html = baseHtml.with(matchPlugin);
+ *
+ * // Default: branches disposed on switch
+ * html`${when(() => !!state.user, [
+ *   () => html`<Profile />`,
+ *   () => html`<Login />`
+ * ])}`.render();
+ *
+ * // With caching: branches preserved for instant re-switching
+ * html`${match(() => state.tab, {
+ *   home: () => html`<Home />`,
+ *   settings: () => html`<Settings />`
+ * }, { cache: true })}`.render();
+ * ```
+ */
+import { computed } from "./signals/computed.js";
+import { Template } from "./template.js";
+const MATCH = Symbol("match");
+function isMatchDescriptor(v) {
+    return v != null && typeof v === "object" && MATCH in v;
+}
+/**
+ * Conditional rendering for boolean conditions.
+ * Prevents re-renders when the condition result stays the same.
+ *
+ * @param condition - Function that returns a boolean
+ * @param branches - Array of [ifTrue, ifFalse?] factory functions. If ifFalse is omitted, renders nothing when false.
+ * @param options - Optional settings. cache: false (default) disposes branches on switch.
+ *
+ * @example
+ * ```ts
+ * // Render only when true
+ * html`${when(() => !!state.user, [
+ *   () => html`<Profile user=${state.user} />`
+ * ])}`
+ *
+ * // Render different content for true/false
+ * html`${when(() => !!state.user, [
+ *   () => html`<Profile user=${state.user} />`,
+ *   () => html`<LoginPrompt />`
+ * ])}`
+ *
+ * // With caching for instant switching
+ * html`${when(() => state.expanded, [
+ *   () => html`<ExpandedView />`,
+ *   () => html`<CollapsedView />`
+ * ], { cache: true })}`
+ * ```
+ */
+export function when(condition, [ifTrue, ifFalse], options) {
+    return {
+        [MATCH]: true,
+        selector: condition,
+        cases: ifFalse ? { true: ifTrue, false: ifFalse } : { true: ifTrue },
+        cache: options?.cache ?? false,
+    };
+}
+/**
+ * Conditional rendering for multiple cases.
+ * Prevents re-renders when the selector result stays the same.
+ *
+ * @param selector - Function that returns a key value
+ * @param cases - Object mapping keys to template factories. Use `_` for default case.
+ * @param options - Optional settings. cache: false (default) disposes branches on switch.
+ *
+ * @example
+ * ```ts
+ * // Loading states (no caching needed)
+ * html`${match(() => state.status, {
+ *   loading: () => html`<Spinner />`,
+ *   error: () => html`<Error message=${() => state.error} />`,
+ *   success: () => html`<Data items=${() => state.items} />`,
+ *   _: () => html`<Fallback />`,
+ * })}`
+ *
+ * // Tab switching with caching
+ * html`${match(() => state.tab, {
+ *   home: () => html`<Home />`,
+ *   settings: () => html`<Settings />`
+ * }, { cache: true })}`
+ * ```
+ */
+export function match(selector, cases, options) {
+    return {
+        [MATCH]: true,
+        selector,
+        cases: cases,
+        cache: options?.cache ?? false,
+    };
+}
+/**
+ * Plugin that handles match/when descriptors.
+ * Register with: const html = baseHtml.with(matchPlugin);
+ */
+const matchPlugin = (value) => {
+    if (!isMatchDescriptor(value))
+        return null;
+    return (marker, disposers) => {
+        const startMarker = document.createComment("");
+        marker.parentNode.insertBefore(startMarker, marker);
+        let prevKey = null;
+        let prevBranch = null;
+        const branches = value.cache ? new Map() : null;
+        // Create computed that tracks the selector
+        const keyComputed = computed(() => String(value.selector()));
+        const update = () => {
+            const key = keyComputed.value;
+            const parent = marker.parentNode;
+            if (!parent)
+                return; // Marker detached, skip update
+            // Same key - nothing to do (internal bindings handle updates)
+            if (key === prevKey)
+                return;
+            // Remove current nodes from DOM
+            for (let n = startMarker.nextSibling; n && n !== marker;) {
+                const next = n.nextSibling;
+                if (branches && prevBranch) {
+                    // Caching: save nodes for later
+                    prevBranch.nodes.push(n);
+                }
+                parent.removeChild(n);
+                n = next;
+            }
+            // Dispose previous branch if not caching
+            if (!branches && prevBranch) {
+                prevBranch.dispose();
+                prevBranch = null;
+            }
+            // Get or create branch
+            let branch = branches?.get(key);
+            if (!branch) {
+                const factory = value.cases[key] ?? value.cases["_"];
+                if (!factory) {
+                    // No matching case - render nothing
+                    prevKey = key;
+                    prevBranch = null;
+                    return;
+                }
+                const { fragment, dispose } = factory().render();
+                parent.insertBefore(fragment, marker);
+                branch = { nodes: [], dispose };
+                branches?.set(key, branch);
+            }
+            else {
+                // Re-insert cached branch nodes
+                for (const n of branch.nodes) {
+                    parent.insertBefore(n, marker);
+                }
+                branch.nodes.length = 0; // Clear after re-inserting (reuses array)
+            }
+            prevKey = key;
+            prevBranch = branch;
+        };
+        // Initial render
+        update();
+        // Subscribe to key changes
+        const unsub = keyComputed.subscribe(update);
+        disposers.push(() => {
+            unsub();
+            keyComputed.dispose();
+            // Dispose all branches
+            if (branches) {
+                for (const branch of branches.values()) {
+                    branch.dispose();
+                }
+                branches.clear();
+            }
+            else if (prevBranch) {
+                prevBranch.dispose();
+            }
+            startMarker.remove();
+        });
+    };
+};
+export default matchPlugin;
+//# sourceMappingURL=match.js.map

package/dist/esm/match.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"match.js","sourceRoot":"","sources":["../../src/match.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Match plugin - Conditional rendering with optional branch caching.\n *\n * This module provides opt-in support for conditional rendering,\n * where branches are rendered based on selector results rather than\n * underlying data changes.\n *\n * By default, branches are disposed when switching away (cache: false).\n * Set cache: true to keep branches in memory for instant re-switching.\n *\n * @example\n * ```ts\n * import { html as baseHtml } from \"balises\";\n * import matchPlugin, { when, match } from \"balises/match\";\n *\n * const html = baseHtml.with(matchPlugin);\n *\n * // Default: branches disposed on switch\n * html`${when(() => !!state.user, [\n *   () => html`<Profile />`,\n *   () => html`<Login />`\n * ])}`.render();\n *\n * // With caching: branches preserved for instant re-switching\n * html`${match(() => state.tab, {\n *   home: () => html`<Home />`,\n *   settings: () => html`<Settings />`\n * }, { cache: true })}`.render();\n * ```\n */\n\nimport { computed } from \"./signals/computed.js\";\nimport { Template, type InterpolationPlugin } from \"./template.js\";\n\nconst MATCH = Symbol(\"match\");\n\n/** Options for when/match behavior */\nexport interface MatchOptions {\n  /**\n   * Whether to cache branches when switching away.\n   * - false (default): Dispose branches when hidden, recreate when revisited\n   * - true: Keep branches in memory for instant re-switching\n   */\n  cache?: boolean;\n}\n\ninterface MatchDescriptor {\n  readonly [MATCH]: true;\n  /** @internal */ selector: () => unknown;\n  /** @internal */ cases: Record<string, () => Template>;\n  /** @internal */ cache: boolean;\n}\n\nfunction isMatchDescriptor(v: unknown): v is MatchDescriptor {\n  return v != null && typeof v === \"object\" && MATCH in v;\n}\n\n/**\n * Conditional rendering for boolean conditions.\n * Prevents re-renders when the condition result stays the same.\n *\n * @param condition - Function that returns a boolean\n * @param branches - Array of [ifTrue, ifFalse?] factory functions. If ifFalse is omitted, renders nothing when false.\n * @param options - Optional settings. cache: false (default) disposes branches on switch.\n *\n * @example\n * ```ts\n * // Render only when true\n * html`${when(() => !!state.user, [\n *   () => html`<Profile user=${state.user} />`\n * ])}`\n *\n * // Render different content for true/false\n * html`${when(() => !!state.user, [\n *   () => html`<Profile user=${state.user} />`,\n *   () => html`<LoginPrompt />`\n * ])}`\n *\n * // With caching for instant switching\n * html`${when(() => state.expanded, [\n *   () => html`<ExpandedView />`,\n *   () => html`<CollapsedView />`\n * ], { cache: true })}`\n * ```\n */\nexport function when(\n  condition: () => boolean,\n  [ifTrue, ifFalse]: [() => Template, (() => Template)?],\n  options?: MatchOptions,\n): MatchDescriptor {\n  return {\n    [MATCH]: true,\n    selector: condition,\n    cases: ifFalse ? { true: ifTrue, false: ifFalse } : { true: ifTrue },\n    cache: options?.cache ?? false,\n  };\n}\n\n/**\n * Conditional rendering for multiple cases.\n * Prevents re-renders when the selector result stays the same.\n *\n * @param selector - Function that returns a key value\n * @param cases - Object mapping keys to template factories. Use `_` for default case.\n * @param options - Optional settings. cache: false (default) disposes branches on switch.\n *\n * @example\n * ```ts\n * // Loading states (no caching needed)\n * html`${match(() => state.status, {\n *   loading: () => html`<Spinner />`,\n *   error: () => html`<Error message=${() => state.error} />`,\n *   success: () => html`<Data items=${() => state.items} />`,\n *   _: () => html`<Fallback />`,\n * })}`\n *\n * // Tab switching with caching\n * html`${match(() => state.tab, {\n *   home: () => html`<Home />`,\n *   settings: () => html`<Settings />`\n * }, { cache: true })}`\n * ```\n */\nexport function match<K extends string | number>(\n  selector: () => K,\n  cases: Partial<Record<K, () => Template>> & { _?: () => Template },\n  options?: MatchOptions,\n): MatchDescriptor {\n  return {\n    [MATCH]: true,\n    selector,\n    cases: cases as Record<string, () => Template>,\n    cache: options?.cache ?? false,\n  };\n}\n\n/** Cache entry per branch: cached nodes and dispose function */\ninterface BranchEntry {\n  nodes: Node[];\n  dispose: () => void;\n}\n\n/**\n * Plugin that handles match/when descriptors.\n * Register with: const html = baseHtml.with(matchPlugin);\n */\nconst matchPlugin: InterpolationPlugin = (value) => {\n  if (!isMatchDescriptor(value)) return null;\n\n  return (marker, disposers) => {\n    const startMarker = document.createComment(\"\");\n    marker.parentNode!.insertBefore(startMarker, marker);\n\n    let prevKey: string | null = null;\n    let prevBranch: BranchEntry | null = null;\n    const branches = value.cache ? new Map<string, BranchEntry>() : null;\n\n    // Create computed that tracks the selector\n    const keyComputed = computed(() => String(value.selector()));\n\n    const update = () => {\n      const key = keyComputed.value;\n      const parent = marker.parentNode;\n      if (!parent) return; // Marker detached, skip update\n\n      // Same key - nothing to do (internal bindings handle updates)\n      if (key === prevKey) return;\n\n      // Remove current nodes from DOM\n      for (let n = startMarker.nextSibling; n && n !== marker; ) {\n        const next = n.nextSibling;\n        if (branches && prevBranch) {\n          // Caching: save nodes for later\n          prevBranch.nodes.push(n);\n        }\n        parent.removeChild(n);\n        n = next;\n      }\n\n      // Dispose previous branch if not caching\n      if (!branches && prevBranch) {\n        prevBranch.dispose();\n        prevBranch = null;\n      }\n\n      // Get or create branch\n      let branch = branches?.get(key);\n      if (!branch) {\n        const factory = value.cases[key] ?? value.cases[\"_\"];\n        if (!factory) {\n          // No matching case - render nothing\n          prevKey = key;\n          prevBranch = null;\n          return;\n        }\n        const { fragment, dispose } = factory().render();\n        parent.insertBefore(fragment, marker);\n        branch = { nodes: [], dispose };\n        branches?.set(key, branch);\n      } else {\n        // Re-insert cached branch nodes\n        for (const n of branch.nodes) {\n          parent.insertBefore(n, marker);\n        }\n        branch.nodes.length = 0; // Clear after re-inserting (reuses array)\n      }\n\n      prevKey = key;\n      prevBranch = branch;\n    };\n\n    // Initial render\n    update();\n\n    // Subscribe to key changes\n    const unsub = keyComputed.subscribe(update);\n\n    disposers.push(() => {\n      unsub();\n      keyComputed.dispose();\n      // Dispose all branches\n      if (branches) {\n        for (const branch of branches.values()) {\n          branch.dispose();\n        }\n        branches.clear();\n      } else if (prevBranch) {\n        prevBranch.dispose();\n      }\n      startMarker.remove();\n    });\n  };\n};\n\nexport default matchPlugin;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "balises",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "A very simple reactive html templating library",
   "author": "Julien Elbaz <elbywan@hotmail.com>",
   "type": "module",
@@ -60,6 +60,10 @@
     "./each": {
       "import": "./dist/esm/each.js",
       "types": "./dist/esm/each.d.ts"
+    },
+    "./match": {
+      "import": "./dist/esm/match.js",
+      "types": "./dist/esm/match.d.ts"
     }
   },
   "scripts": {
@@ -98,6 +102,6 @@
     "typescript-eslint": "8.50.1"
   },
   "dependencies": {
-    "balises": "0.8.2"
+    "balises": "0.8.4"
   }
 }