@weftui/router 0.29.0 → 0.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/client/index.d.ts +2 -2
  2. package/dist/client/index.js +3 -3
  3. package/dist/{compile-Bb7AknG_.d.ts → compile-DFlX4Atp.d.ts} +3 -3
  4. package/dist/{href-3swSSbn_.js → href-wIrP-_-3.js} +1 -1
  5. package/dist/index.d.ts +2 -2
  6. package/dist/index.js +2 -2
  7. package/dist/{outlet-2AnUWKQD.d.ts → outlet-CWpiNOxW.d.ts} +1 -1
  8. package/dist/{outlet-BgJmsO_g.js → outlet-Crd9mxZA.js} +15 -13
  9. package/dist/server/index.d.ts +1 -1
  10. package/dist/server/index.js +1 -1
  11. package/docs/explanation/boundaries-and-suspense.md +38 -8
  12. package/docs/explanation/combinator-api.md +17 -11
  13. package/docs/explanation/reactive-primitives.md +40 -13
  14. package/docs/explanation/rendering-model.md +14 -2
  15. package/docs/how-to/add-routing.md +299 -28
  16. package/docs/how-to/author-components.md +71 -105
  17. package/docs/how-to/compose-behavior-and-markup.md +141 -54
  18. package/docs/how-to/handle-forms.md +142 -15
  19. package/docs/how-to/load-async-data.md +110 -6
  20. package/docs/how-to/load-data-with-rpc.md +171 -18
  21. package/docs/how-to/provide-services.md +84 -1
  22. package/docs/how-to/render-keyed-lists.md +120 -14
  23. package/docs/how-to/render-on-the-server.md +113 -15
  24. package/docs/how-to/show-navigation-progress.md +120 -14
  25. package/docs/how-to/split-routes-lazily.md +106 -3
  26. package/docs/how-to/style-reactively.md +141 -13
  27. package/docs/how-to/use-element-refs.md +126 -8
  28. package/docs/reference/core.md +22 -2
  29. package/docs/reference/dom.md +43 -0
  30. package/docs/reference/router.md +2 -2
  31. package/docs/tutorial/01-your-first-app.md +43 -13
  32. package/docs/tutorial/02-reactivity.md +29 -30
  33. package/docs/tutorial/03-services-and-async.md +89 -38
  34. package/docs/tutorial/04-errors-and-server.md +41 -25
  35. package/package.json +3 -3
@@ -1,5 +1,5 @@
1
- import { S as Router, b as NavState, i as RouterDef, m as RouteNode, u as Fields, x as NavigateOptions } from "../compile-Bb7AknG_.js";
2
- import { n as outletNode, r as HrefArgs, t as RouterApp } from "../outlet-2AnUWKQD.js";
1
+ import { S as Router, b as NavState, i as RouterDef, m as RouteNode, u as Fields, x as NavigateOptions } from "../compile-DFlX4Atp.js";
2
+ import { n as outletNode, r as HrefArgs, t as RouterApp } from "../outlet-CWpiNOxW.js";
3
3
  import { Effect, Layer, Scope } from "effect";
4
4
  import { AppRpcClientTag } from "@weftui/core";
5
5
  import { RpcGroup } from "effect/unstable/rpc";
@@ -1,5 +1,5 @@
1
- import { a as Router, i as setResolvedCommit, n as outletNode, o as getPreload, r as preRunLeaf, t as RouterApp } from "../outlet-BgJmsO_g.js";
2
- import { r as match, t as href } from "../href-3swSSbn_.js";
1
+ import { a as Router, i as setResolvedCommit, n as outletNode, o as getPreload, r as preRunLeaf, t as RouterApp } from "../outlet-Crd9mxZA.js";
2
+ import { r as match, t as href } from "../href-wIrP-_-3.js";
3
3
  import { HttpApiClient } from "effect/unstable/httpapi";
4
4
  import { Context, Effect, Exit, Fiber, Layer, Option, Schema, Scope, Stream, SubscriptionRef } from "effect";
5
5
  import { AppRpcClientTag, Subscribable } from "@weftui/core";
@@ -245,7 +245,7 @@ function pathOf(url) {
245
245
  function applyQuery(transform, options) {
246
246
  return Effect.gen(function* () {
247
247
  const router = yield* Router;
248
- const match = yield* router.currentMatch.get;
248
+ const match = yield* Subscribable.get(router.currentMatch);
249
249
  if (match._tag !== "Matched") return;
250
250
  const next = transform(match.query);
251
251
  const search = encodeSearch(Schema.encodeUnknownSync(match.leaf.querySchema)(next));
@@ -182,7 +182,7 @@ declare const OutletTag_base: Context.ServiceClass<OutletTag, "@weftui/router/Ou
182
182
  declare class OutletTag extends OutletTag_base {}
183
183
  /**
184
184
  * Reads the live match's **path params** for the requested `fields`. Snapshot
185
- * semantics (reads `yield* Router`, then `currentMatch.get`), returning the
185
+ * semantics (reads `yield* Router`, then `Subscribable.get(currentMatch)`), returning the
186
186
  * already-decoded values **directly**: the matcher decoded them against the leaf's
187
187
  * full path schema, so no re-validation is needed. The cast is sound because the
188
188
  * picked subset is the `Type` side of `fields`. Fails with a {@link RouterParamsError}
@@ -198,9 +198,9 @@ declare function readParams<F extends Fields>(fields: F): Effect.Effect<FieldsTy
198
198
  declare function readQuery<F extends Fields>(fields: F): Effect.Effect<FieldsType<F>, RouterParamsError, Router>;
199
199
  /**
200
200
  * Reactive counterpart to {@link readParams}: a {@link Subscribable} of the live
201
- * match's **path params** for `fields`, derived from `currentMatch.changes`. It
201
+ * match's **path params** for `fields`, derived from `Subscribable.changes(currentMatch)`. It
202
202
  * re-emits on every navigation and stays live across `NotFound` (yielding the empty
203
- * subset), so a component can render `[(yield* Router.paramsStream(fields)).changes]`
203
+ * subset), so a component can render `[Subscribable.changes(yield* Router.paramsStream(fields))]`
204
204
  * and update in place even when the outlet keeps the same leaf mounted. Re-exported
205
205
  * as `Router.paramsStream`.
206
206
  */
@@ -1,4 +1,4 @@
1
- import { l as leafRegistry } from "./outlet-BgJmsO_g.js";
1
+ import { l as leafRegistry } from "./outlet-Crd9mxZA.js";
2
2
  import { Result, Schema } from "effect";
3
3
  //#region src/matcher.ts
4
4
  /** Escapes a literal path segment for inclusion in a `RegExp`. */
package/dist/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { A as notFound, C as RouterHttpApiClient, D as RouterNotFound, E as match, O as RouterParamsError, S as Router, T as compileMatchers, _ as TreeE, a as RouterOptions, b as NavState, c as leafRegistry, d as FieldsType, f as LayoutNode, g as SubtreeR, h as SubtreeE, i as RouterDef, k as isRouterNotFound, l as ComponentSlot, m as RouteNode, n as CompiledLayout, o as buildHttpApi, p as RouteHandlerProps, r as CompiledLeaf, s as compile, t as Compiled, u as Fields, v as TreeNode, w as RouteMatch, x as NavigateOptions, y as TreeR } from "./compile-Bb7AknG_.js";
2
- import { i as href, n as outletNode, r as HrefArgs, t as RouterApp } from "./outlet-2AnUWKQD.js";
1
+ import { A as notFound, C as RouterHttpApiClient, D as RouterNotFound, E as match, O as RouterParamsError, S as Router, T as compileMatchers, _ as TreeE, a as RouterOptions, b as NavState, c as leafRegistry, d as FieldsType, f as LayoutNode, g as SubtreeR, h as SubtreeE, i as RouterDef, k as isRouterNotFound, l as ComponentSlot, m as RouteNode, n as CompiledLayout, o as buildHttpApi, p as RouteHandlerProps, r as CompiledLeaf, s as compile, t as Compiled, u as Fields, v as TreeNode, w as RouteMatch, x as NavigateOptions, y as TreeR } from "./compile-DFlX4Atp.js";
2
+ import { i as href, n as outletNode, r as HrefArgs, t as RouterApp } from "./outlet-CWpiNOxW.js";
3
3
  export { type Compiled, type CompiledLayout, type CompiledLeaf, type ComponentSlot, type Fields, type FieldsType, type HrefArgs, type LayoutNode, type NavState, type NavigateOptions, type RouteHandlerProps, type RouteMatch, type RouteNode, Router, RouterApp, type RouterDef, type RouterHttpApiClient, RouterNotFound, type RouterOptions, RouterParamsError, type SubtreeE, type SubtreeR, type TreeE, type TreeNode, type TreeR, buildHttpApi, compile, compileMatchers, href, isRouterNotFound, leafRegistry, match, notFound, outletNode };
package/dist/index.js CHANGED
@@ -1,3 +1,3 @@
1
- import { a as Router, c as compile, d as RouterParamsError, f as isRouterNotFound, l as leafRegistry, n as outletNode, p as notFound, s as buildHttpApi, t as RouterApp, u as RouterNotFound } from "./outlet-BgJmsO_g.js";
2
- import { n as compileMatchers, r as match, t as href } from "./href-3swSSbn_.js";
1
+ import { a as Router, c as compile, d as RouterParamsError, f as isRouterNotFound, l as leafRegistry, n as outletNode, p as notFound, s as buildHttpApi, t as RouterApp, u as RouterNotFound } from "./outlet-Crd9mxZA.js";
2
+ import { n as compileMatchers, r as match, t as href } from "./href-wIrP-_-3.js";
3
3
  export { Router, RouterApp, RouterNotFound, RouterParamsError, buildHttpApi, compile, compileMatchers, href, isRouterNotFound, leafRegistry, match, notFound, outletNode };
@@ -1,4 +1,4 @@
1
- import { D as RouterNotFound, S as Router, d as FieldsType, i as RouterDef, m as RouteNode, u as Fields } from "./compile-Bb7AknG_.js";
1
+ import { D as RouterNotFound, S as Router, d as FieldsType, i as RouterDef, m as RouteNode, u as Fields } from "./compile-DFlX4Atp.js";
2
2
  import { Node } from "@weftui/core";
3
3
  //#region src/href.d.ts
4
4
  /**
@@ -301,7 +301,7 @@ function pick(fields, record) {
301
301
  }
302
302
  /**
303
303
  * Reads the live match's **path params** for the requested `fields`. Snapshot
304
- * semantics (reads `yield* Router`, then `currentMatch.get`), returning the
304
+ * semantics (reads `yield* Router`, then `Subscribable.get(currentMatch)`), returning the
305
305
  * already-decoded values **directly**: the matcher decoded them against the leaf's
306
306
  * full path schema, so no re-validation is needed. The cast is sound because the
307
307
  * picked subset is the `Type` side of `fields`. Fails with a {@link RouterParamsError}
@@ -309,7 +309,8 @@ function pick(fields, record) {
309
309
  */
310
310
  function readParams(fields) {
311
311
  return Effect.gen(function* () {
312
- const match = yield* (yield* Router).currentMatch.get;
312
+ const router = yield* Router;
313
+ const match = yield* Subscribable.get(router.currentMatch);
313
314
  if (match._tag === "NotFound") return yield* Effect.fail(new RouterParamsError({
314
315
  source: "path",
315
316
  keys: Object.keys(fields)
@@ -325,7 +326,8 @@ function readParams(fields) {
325
326
  */
326
327
  function readQuery(fields) {
327
328
  return Effect.gen(function* () {
328
- const match = yield* (yield* Router).currentMatch.get;
329
+ const router = yield* Router;
330
+ const match = yield* Subscribable.get(router.currentMatch);
329
331
  if (match._tag === "NotFound") return yield* Effect.fail(new RouterParamsError({
330
332
  source: "query",
331
333
  keys: Object.keys(fields)
@@ -343,15 +345,15 @@ function readQuery(fields) {
343
345
  function selectStream(currentMatch, fields, source) {
344
346
  const select = (m) => pick(fields, m._tag === "Matched" ? m[source] : {});
345
347
  return Subscribable.make({
346
- get: Effect.map(currentMatch.get, select),
347
- changes: Stream.map(currentMatch.changes, select)
348
+ get: Effect.map(Subscribable.get(currentMatch), select),
349
+ changes: Stream.map(Subscribable.changes(currentMatch), select)
348
350
  });
349
351
  }
350
352
  /**
351
353
  * Reactive counterpart to {@link readParams}: a {@link Subscribable} of the live
352
- * match's **path params** for `fields`, derived from `currentMatch.changes`. It
354
+ * match's **path params** for `fields`, derived from `Subscribable.changes(currentMatch)`. It
353
355
  * re-emits on every navigation and stays live across `NotFound` (yielding the empty
354
- * subset), so a component can render `[(yield* Router.paramsStream(fields)).changes]`
356
+ * subset), so a component can render `[Subscribable.changes(yield* Router.paramsStream(fields))]`
355
357
  * and update in place even when the outlet keeps the same leaf mounted. Re-exported
356
358
  * as `Router.paramsStream`.
357
359
  */
@@ -370,7 +372,7 @@ function subscribeQuery(fields) {
370
372
  }
371
373
  /**
372
374
  * Reactive {@link Subscribable} of the client {@link NavState}. A component reads
373
- * `[(yield* Router.navigatingStream).changes]` to render pending UI during a
375
+ * `[Subscribable.changes(yield* Router.navigatingStream)]` to render pending UI during a
374
376
  * deferred-commit navigation (`pending-navigation.specs.md`,
375
377
  * `resolve-before-commit.specs.md`). Re-exported as `Router.navigatingStream`.
376
378
  */
@@ -436,10 +438,10 @@ function takeResolvedCommit(router, url) {
436
438
  }
437
439
  /**
438
440
  * The staged `Router` view the pre-run executes under (AC-R4): identical to
439
- * `router` except `currentMatch.get` resolves to the **target** match. The URL
441
+ * `router` except `Subscribable.get(currentMatch)` resolves to the **target** match. The URL
440
442
  * ref has not moved yet, and one-shot reads (`Router.params`, `Router.query`,
441
- * `currentMatch.get`) inside the pre-running component body must decode the
442
- * destination, not the page being left. `currentMatch.changes` (and `navigate` /
443
+ * `Subscribable.get(currentMatch)`) inside the pre-running component body must decode the
444
+ * destination, not the page being left. `Subscribable.changes(currentMatch)` (and `navigate` /
443
445
  * `httpApiClient` / `navigating`) delegate to the live service, so reactive
444
446
  * subscriptions, which occur at render/mount time post-commit, observe the
445
447
  * committed match onward.
@@ -449,7 +451,7 @@ function stageMatch(router, target) {
449
451
  ...router,
450
452
  currentMatch: Subscribable.make({
451
453
  get: Effect.succeed(target),
452
- changes: router.currentMatch.changes
454
+ changes: Subscribable.changes(router.currentMatch)
453
455
  })
454
456
  };
455
457
  }
@@ -524,7 +526,7 @@ function renderLevel(def, router, index, match) {
524
526
  * reactive child region.
525
527
  */
526
528
  function levelStream(def, router, index) {
527
- return pipe(router.currentMatch.changes, Stream.map((match) => [keyOf(index, match), match]), Stream.changesWith((a, b) => a[0] === b[0]), Stream.map(([, match]) => renderLevel(def, router, index, match)));
529
+ return pipe(Subscribable.changes(router.currentMatch), Stream.map((match) => [keyOf(index, match), match]), Stream.changesWith((a, b) => a[0] === b[0]), Stream.map(([, match]) => renderLevel(def, router, index, match)));
528
530
  }
529
531
  /**
530
532
  * The bare nested-outlet node for a router definition: a fragment whose single
@@ -1,4 +1,4 @@
1
- import { S as Router, i as RouterDef, l as ComponentSlot } from "../compile-Bb7AknG_.js";
1
+ import { S as Router, i as RouterDef, l as ComponentSlot } from "../compile-DFlX4Atp.js";
2
2
  import { Effect, Layer } from "effect";
3
3
  import { AppRpcClientTag } from "@weftui/core";
4
4
  import { RpcGroup } from "effect/unstable/rpc";
@@ -1,4 +1,4 @@
1
- import { a as Router, f as isRouterNotFound, n as outletNode, u as RouterNotFound } from "../outlet-BgJmsO_g.js";
1
+ import { a as Router, f as isRouterNotFound, n as outletNode, u as RouterNotFound } from "../outlet-Crd9mxZA.js";
2
2
  import { HttpApiBuilder, HttpApiEndpoint, HttpApiGroup } from "effect/unstable/httpapi";
3
3
  import { Cause, Effect, Exit, Layer, Option, Schema, Scope, Stream } from "effect";
4
4
  import { AppRpcClientTag, Subscribable } from "@weftui/core";
@@ -40,15 +40,28 @@ An unhandled failure re-raises to the **nearest enclosing** boundary; if none ca
40
40
 
41
41
  ### Post-mount failures with no enclosing boundary
42
42
 
43
- The routing above describes what happens while a node is being built. Once mounted, a reactive region (an attribute, child, or list stream, or a hydrated equivalent) keeps running for the lifetime of its scope. It can still fail later: a `Stream` backing a `Boundary.rpc` resource might raise `RouterNotFound` after a client-side navigation. If a `BoundaryContext` encloses the region, the failure routes to it exactly as above, and the boundary's fallback swaps in.
43
+ The routing above describes what happens while a node is being built. Once mounted, a reactive region keeps running for the lifetime of its scope: an attribute, a child, a list stream, or a hydrated equivalent. It can still fail later, e.g. a `Boundary.rpc` resource's refetch stream raising after a client-side navigation.
44
44
 
45
- If no boundary encloses it, there is nothing to swap to. Weft does not synthesize one. The region's DOM keeps its last rendered content, and a watcher fiber (forked into the same scope alongside the subscription itself) observes its exit directly.
45
+ If a boundary encloses the region, the failure routes to it exactly as above and its fallback swaps in. If none does, there is nothing to swap to. Weft does not synthesize one: the region's DOM keeps its last rendered content, and a watcher fiber (forked alongside the subscription itself) observes the exit instead.
46
46
 
47
- When that exit is a failure whose cause is not interruption-only, Weft reports it explicitly via `Effect.logError(exit.cause)`. The log is annotated with `weft.region` to identify the failing region by kind and identity (e.g. `attribute:class`, `child:stream-3`, `list:stream-2`, `hydrate:stream-1 (/products/42)`). This fires for typed failures and defects alike, in both dev and prod, exactly once per failing region, at the `"Error"` level. Interruption (the ordinary case of unmount tearing down the region's scope) is never reported; only genuine failures are.
47
+ An exit whose cause is not interruption-only publishes an `UnhandledError` (`cause`, `region`, `root`) to the app's unhandled-error hub, exposed as `WeftApp.errors(app)`. `region` names the failing spot: `attribute:class`, `child:stream-3`, or `boundary:outermost` for a failure that escapes even the outermost boundary. Subscribe to observe every occurrence yourself:
48
48
 
49
- This is deliberate. Rather than leave the failure to whatever the Effect runtime would do with an unobserved fiber exit, Weft observes and logs it itself. Visibility is therefore controlled by the same knobs any Effect program uses: `References.MinimumLogLevel` (provided via `Effect.provideService`) to filter it, or a custom `Logger` to route it elsewhere.
49
+ ```typescript
50
+ import { WeftApp } from "@weftui/dom/client";
51
+ import { Effect, Stream } from "effect";
52
+
53
+ Effect.runFork(
54
+ Stream.runForEach(WeftApp.errors(app), (error) =>
55
+ Effect.log(`unhandled in ${error.region}`, error.cause),
56
+ ),
57
+ );
58
+ ```
50
59
 
51
- A stream that can fail and has no enclosing boundary is a stream whose failures you've chosen not to route into the UI. The log is what tells you that decision has consequences at runtime.
60
+ With zero subscribers, each unhandled error instead runs a default `Effect.logError(cause)` annotated with `weft.region`, exactly once per occurrence, in dev and prod alike. Subscribing suppresses that fallback for as long as at least one subscriber stays attached.
61
+
62
+ This is deliberate: rather than leave an unobserved fiber exit to the runtime, Weft always surfaces it, either to your subscriber or to the log. Interruption (ordinary unmount teardown) is never published or logged; only genuine failures are.
63
+
64
+ A stream that can fail with no enclosing boundary is a stream whose failures you've chosen not to route into the UI. `WeftApp.errors` (and the log fallback) is what tells you that decision has consequences at runtime. Full contract: [`WeftApp.errors` / `UnhandledError`](https://weftui.dev/docs/reference/dom#weftapperrors).
52
65
 
53
66
  ## Suspense boundaries
54
67
 
@@ -81,13 +94,13 @@ On the server, `renderToStreamHydratable` emits the fallback inline and appends
81
94
  Conceptually it is the same idea as the other boundaries: a node that decides what renders in a subtree. But the thing it intercepts is a **round-trip to a server handler**. Instead of a children array, it takes a `render` function that receives a reactive [`Resource`](https://weftui.dev/docs/reference/core#resourcea).
82
95
 
83
96
  ```typescript
84
- import { Boundary, h } from "@weftui/core";
97
+ import { Boundary, h, Subscribable } from "@weftui/core";
85
98
  import { Stream } from "effect";
86
99
 
87
100
  Boundary.rpc(
88
101
  GetStock,
89
102
  () => ({ id: productId }),
90
- (resource) => h.span([Stream.map(resource.value.changes, (s) => String(s.units))]),
103
+ (resource) => h.span([Stream.map(Subscribable.changes(resource.value), (s) => String(s.units))]),
91
104
  { fallback: h.p("loading…") },
92
105
  );
93
106
  ```
@@ -100,11 +113,28 @@ Its channel behavior is also distinct. The rpc's typed `error` schema joins the
100
113
 
101
114
  The unifying idea: failure, async pending state, and server data are not three separate subsystems bolted onto the renderer. They are three **boundary nodes** in the one tree, each intercepting a different thing flowing through it. Each has channel behavior you can read off its type.
102
115
 
103
- That is why they nest freely. A `Boundary.catchTag` can wrap a `Boundary.rpc` to catch its typed failure. A `Boundary.suspend` can wrap async siblings that themselves contain rpc boundaries.
116
+ That is why they nest freely. A `Boundary.catchTag` can wrap a `Boundary.rpc` to catch its typed failure, and a `Boundary.suspend` can wrap async siblings that themselves contain rpc boundaries:
117
+
118
+ ```typescript
119
+ import { Boundary, h, Subscribable } from "@weftui/core";
120
+ import { Stream } from "effect";
121
+
122
+ Boundary.catchTag({ tag: "StockRpcError", fallback: () => h.p("Couldn't load stock.") }, [
123
+ Boundary.rpc(
124
+ GetStock,
125
+ () => ({ id: productId }),
126
+ (resource) =>
127
+ h.span([Stream.map(Subscribable.changes(resource.value), (s) => String(s.units))]),
128
+ ),
129
+ ]);
130
+ ```
131
+
132
+ Each layer only sees the channel its own kind produces: `catchTag` narrows `E`, `Boundary.rpc` widens it by the rpc's error schema. Neither cares how the other renders.
104
133
 
105
134
  ## See also
106
135
 
107
136
  - [The Rendering Model](https://weftui.dev/docs/explanation/rendering-model): why a boundary is just a node in a static tree
108
137
  - [`Boundary` API reference](https://weftui.dev/docs/reference/core#boundary-namespace): every variant's signature and channel algebra
138
+ - [`WeftApp.errors` / `UnhandledError`](https://weftui.dev/docs/reference/dom#weftapperrors): the unhandled-error hub for post-mount failures with no enclosing boundary
109
139
  - [Load Data with RPC](https://weftui.dev/docs/how-to/load-data-with-rpc): the full `Boundary.rpc` walkthrough and its four lifecycles
110
140
  - [Render on the Server](https://weftui.dev/docs/how-to/render-on-the-server): how suspense and rpc boundaries stream and hydrate
@@ -7,7 +7,14 @@ description: How h, h.fragment, and Component.gen / Component.make work; why Nod
7
7
 
8
8
  # The Combinator API
9
9
 
10
- Weft builds UI trees by calling builder functions. Because component return types stay as generic `Effect.Effect<ElementDescriptor, E, R>`, the error channel (`E`) and requirements channel (`R`) propagate through the entire tree: visible to the type checker, satisfiable at the mount boundary.
10
+ Weft builds UI trees by calling builder functions, not by writing markup. There is no JSX runtime and no `h(Component)` overload: a component is a plain function you call, and its result goes straight into the tree.
11
+
12
+ ```typescript
13
+ // No JSX, no deferred element. Header/Main/Footer already ran; these are Nodes.
14
+ const tree = h.div({ class: "app" }, [Header(), Main(), Footer()]);
15
+ ```
16
+
17
+ Because a component's return type stays a concrete `Effect.Effect<ElementDescriptor, E, R>`, its error channel (`E`) and requirement channel (`R`) propagate through the whole tree. Both are visible to the type checker and satisfiable exactly once, at the mount boundary.
11
18
 
12
19
  JSX collapses every component's return type to an opaque `JSX.Element`, erasing both channels. The combinator API exists specifically to keep them intact.
13
20
 
@@ -110,7 +117,7 @@ const TableRow = ({ user }: { user: User }) =>
110
117
 
111
118
  ## Custom components with `Component.gen` / `Component.make`
112
119
 
113
- Plain functions work fine for simple components, but the `Component` factories provide type-level wiring so the caller's reactive prop types contribute their `E`/`R` to the returned node. Pick `Component.make` for a plain-function body and `Component.gen` for a generator body (when you need `yield*` to set up local state or pull from services).
120
+ Plain functions work fine for simple components. The `Component` factories add type-level wiring: the caller's actual reactive prop types contribute their `E`/`R` to the node returned at that call site, not just the types you wrote in the signature. Pick `Component.make` for a plain-function body, `Component.gen` for a generator body (when you need `yield*` for local state or a service).
114
121
 
115
122
  ```typescript
116
123
  import { Component, h } from "@weftui/core";
@@ -132,30 +139,29 @@ declare const labelStream: Stream.Stream<string, never, I18nService>;
132
139
  const btn = Button({ label: labelStream });
133
140
  ```
134
141
 
135
- Components also accept an optional `children` argument, either as `readonly Renderable[]` or as a `(input) => readonly Renderable[]` function (render-prop pattern). `E`/`R` from children, including the array returned by a function-children call, accumulate on the resulting node.
142
+ Components also accept an optional `children` argument: either `readonly Renderable[]`, or a `(input) => readonly Renderable[]` function for the render-prop pattern. Either way, the children's `E`/`R` accumulate onto the resulting node, including the array a function-children call returns.
136
143
 
137
- Without `Component`, a plain function's return type is fixed at definition time and does not reflect the caller's reactive prop types.
144
+ A plain function without `Component` has its return type fixed at definition time. It reflects only the prop types you wrote, never a specific caller's reactive prop types.
138
145
 
139
- See [component-authoring.md](https://weftui.dev/docs/how-to/author-components) for a full walkthrough.
146
+ See [Author Components](https://weftui.dev/docs/how-to/author-components) for a full walkthrough.
140
147
 
141
- ## Suspense boundaries
148
+ ## Boundaries accumulate channels too
142
149
 
143
- `Boundary.suspend` wraps async children and shows a fallback until all of them have emitted their first value:
150
+ `Boundary.suspend`, `Boundary.catch`, and the rest of the `Boundary` namespace are Nodes, not a separate concept. A boundary wraps children and its own type is `Node<ChildrenE, ChildrenR>`, so the same accumulation rules apply:
144
151
 
145
152
  ```typescript
146
153
  import { Boundary, h } from "@weftui/core";
147
154
 
155
+ // Node<ChildrenE, ChildrenR>: transparent to E/R, like a plain h.* parent
148
156
  Boundary.suspend({ fallback: h.div({ class: "spinner" }, "Loading...") }, [
149
157
  AsyncCard({ id: 1 }),
150
158
  AsyncCard({ id: 2 }),
151
159
  ]);
152
160
  ```
153
161
 
154
- The fallback is replaced atomically: either all children are visible or none are. This prevents partial flicker when multiple async siblings resolve at different times. The boundary's node type is `Node<ChildrenE, ChildrenR>`: the children's `E`/`R` channels accumulate onto it, exactly as they would for a plain `h.*` parent.
155
-
156
- On the server, `renderToStreamHydratable` emits the fallback inline and appends patch scripts as children resolve. On the client, `hydrate` sees through `Boundary.suspend` boundaries and adopts the already-resolved DOM directly.
162
+ A boundary changes _when_ and _whether_ its children's output reaches the DOM, not what its type carries. `Boundary.catchTag` is the one exception: it removes the matched tag from `E`, since that's the failure it discharges.
157
163
 
158
- `Boundary.suspend` is one of the boundary combinators. See the [core reference](https://weftui.dev/docs/reference/core#boundarysuspend) for the full `Boundary.*` surface, including the failure-catch variants and `Boundary.rpc`.
164
+ See [Boundaries and Suspense](https://weftui.dev/docs/explanation/boundaries-and-suspense) for what each boundary variant does, and the [core reference](https://weftui.dev/docs/reference/core#boundary-namespace) for the full `Boundary.*` surface.
159
165
 
160
166
  ## See also
161
167
 
@@ -7,16 +7,14 @@ description: The Source<A, E, R> vocabulary; Stream, Effect, and Subscribable as
7
7
 
8
8
  # Reactive Primitives
9
9
 
10
- The unified `Source` vocabulary lets static values, Effects, Streams, and Subscribables be used interchangeably. Props, children, and style values all accept the same type.
10
+ Weft accepts a `Source` for any prop value, any child, and any style value: one vocabulary, four kinds, used interchangeably wherever reactivity is supported.
11
11
 
12
- Weft accepts a `Source` for prop values and children. Any of these is valid wherever reactivity is supported:
13
-
14
- - A plain static value (`string`, `number`, `boolean`, ...)
15
- - An `Effect.Effect<A, E, R>`: runs once and resolves to a value
16
- - A `Stream.Stream<A, E, R>`: each emission replaces the previous value
17
- - A `Subscribable<A, E, R>`: like a hot stream; already has a "current value"
18
-
19
- The `Source<A, E, R>` type captures this union:
12
+ | Kind | Behavior |
13
+ | --------------------------------------------------------- | ----------------------------------------- |
14
+ | a plain static value (`string`, `number`, `boolean`, ...) | set once, never updates |
15
+ | `Effect.Effect<A, E, R>` | runs once, resolves to a value |
16
+ | `Stream.Stream<A, E, R>` | each emission replaces the previous value |
17
+ | `Subscribable<A, E, R>` | a hot stream: already has a current value |
20
18
 
21
19
  ```typescript
22
20
  type Source<A, E, R> = A | Effect.Effect<A, E, R> | Stream.Stream<A, E, R> | Subscribable<A, E, R>;
@@ -139,13 +137,42 @@ h.div({
139
137
  });
140
138
  ```
141
139
 
140
+ ## Latest-value-wins conflation
141
+
142
+ Every reactive region and prop is drained by one shared commit scheduler, the
143
+ Loom (see [The Rendering Model](https://weftui.dev/docs/explanation/rendering-model#the-loom-one-scheduler-per-app-committing-asynchronously)).
144
+ When a source emits faster than the DOM commits, the Loom conflates the burst:
145
+ it keeps only the newest value per region and skips the intermediate ones.
146
+
147
+ ```typescript
148
+ const ticks = Stream.range(0, 999); // publishes far faster than the DOM commits
149
+
150
+ h.span([ticks]); // the span settles on 999; 0 through 998 may never render
151
+ ```
152
+
153
+ The final DOM state always reflects the newest value; nothing is lost
154
+ permanently. What is skipped are the values in between, by design: this is
155
+ what keeps a fast-publishing source from piling up unbounded DOM work.
156
+
157
+ Code that must observe every emission, not just the settled one (an audit
158
+ log, a counter that sums each tick), should consume the stream directly
159
+ instead of relying on what lands in the DOM:
160
+
161
+ ```typescript
162
+ yield * Stream.runForEach(ticks, (n) => Effect.sync(() => total.push(n)));
163
+ ```
164
+
142
165
  ## NoPropValue
143
166
 
144
- When a `Stream` prop ends before emitting, the renderer raises a `NoPropValue` tagged error. This carries an optional `key` field identifying which prop triggered it:
167
+ A finite `Stream` prop can end without ever emitting, e.g. `Stream.empty` or `Stream.take(0, stream)`. When it does, the renderer raises a `NoPropValue` tagged error carrying an optional `key` that identifies the prop:
168
+
169
+ ```typescript
170
+ h.span([Stream.empty]); // completes without emitting: raises NoPropValue
171
+ ```
172
+
173
+ `Effect.catchTag` matches by the string tag, so handling it at the mount boundary needs no `NoPropValue` import:
145
174
 
146
175
  ```typescript
147
- // Handle at the mount boundary if needed. `Effect.catchTag` matches the error
148
- // by its string tag, so no `NoPropValue` import is required here.
149
176
  pipe(
150
177
  WeftApp.mount(app, App(), root),
151
178
  Effect.catchTag("NoPropValue", (e) =>
@@ -154,7 +181,7 @@ pipe(
154
181
  );
155
182
  ```
156
183
 
157
- In practice you only encounter `NoPropValue` when a finite `Stream` prop ends before emitting (e.g., `Stream.empty` or `Stream.take(0, stream)`). Most usage with `SubscriptionRef.changes` or infinite streams never raises it.
184
+ `SubscriptionRef.changes` and other infinite streams always emit before completing, so most usage never raises it.
158
185
 
159
186
  ## See also
160
187
 
@@ -37,12 +37,22 @@ When a stream emits, only the DOM at _that_ point updates. Nothing above it re-r
37
37
 
38
38
  ## Streams drive all updates
39
39
 
40
- There is no `setState`, no render-triggering scheduler, no "re-render this component." A region of the DOM is live **if and only if** a stream is woven into it. To make something update, you thread a stream through it; to keep something static, you pass a plain value.
40
+ There is no `setState`, no "re-render this component," no vdom diff. A region of the DOM is live **if and only if** a stream is woven into it. To make something update, you thread a stream through it; to keep something static, you pass a plain value.
41
41
 
42
- The renderer subscribes to each woven stream and patches its target in place on every emission. It reuses the existing DOM node and patches text and attributes rather than recreating elements, so identity, focus, and typed input survive an update.
42
+ The renderer reuses the existing DOM node and patches text and attributes in place rather than recreating elements, so identity, focus, and typed input survive an update. Updates stay local: a stream woven at one point never touches an untouched sibling or re-runs a parent.
43
43
 
44
44
  This also fixes the update _shape_. Because the structure is fixed, an update is always "new value into a known hole," never "reconcile these two trees." Even list rendering, where the number of children genuinely varies, is expressed as a keyed region ([`List.each`](https://weftui.dev/docs/how-to/render-keyed-lists)). It reconciles by key rather than by structural diff.
45
45
 
46
+ ## The Loom: one scheduler per app, committing asynchronously
47
+
48
+ Every woven stream feeds one shared scheduler per `WeftApp`: the **Loom**. It keeps one latest-value slot per reactive region or prop and commits changes to the DOM in passes.
49
+
50
+ The name follows the metaphor: individual streams spin as fast as they like, like threads paid out from a bobbin. The loom only ever weaves the newest state of each thread into the fabric, one pass at a time. A region that receives several values before its next commit collapses to the last one: intermediate emissions are conflated, never committed. This bounds DOM work no matter how fast a source publishes.
51
+
52
+ Commits are asynchronous: they happen on the scheduler's own turn, not synchronously with the write. `RootHandle.awaitCommit` is the acknowledgement. It resolves once everything pending at call time has either committed or been discarded, returning the commit generation. See the [`RootHandle` reference](https://weftui.dev/docs/reference/dom#roothandle) for its exact semantics.
53
+
54
+ None of this changes what you write. You still thread a `Stream`, `Effect`, or `Subscribable` through a prop or child; the Loom is an implementation detail of how those emissions reach the DOM. Code that must observe every intermediate value, not just the settled one, should consume the stream directly instead of relying on what lands in the DOM (see [Reactive Primitives](https://weftui.dev/docs/explanation/reactive-primitives#latest-value-wins-conflation)).
55
+
46
56
  ## One tree, two sides, hydrate in place
47
57
 
48
58
  The same component tree renders on the server and the client:
@@ -56,6 +66,7 @@ Because the same `Node<E, R>` describes both passes, there is nothing to keep in
56
66
 
57
67
  - **No diff cost.** Updates are O(changed value), not O(tree). There is no reconciliation pass to pay for.
58
68
  - **Local reasoning.** A stream woven at one point cannot affect another. What is reactive is exactly what you made reactive.
69
+ - **Bounded commit work.** The Loom conflates bursts to one commit per region, so a fast-publishing source cannot outrun the DOM.
59
70
  - **Type-honest edges.** The app node's `E`/`R` is the whole app's error and dependency surface, checked at compile time and discharged once at the edge.
60
71
  - **Flash-free SSR by construction.** Hydration adopts rather than replaces, because the tree is identical on both sides.
61
72
 
@@ -65,3 +76,4 @@ Because the same `Node<E, R>` describes both passes, there is nothing to keep in
65
76
  - [Reactive Primitives](https://weftui.dev/docs/explanation/reactive-primitives): the stream-shaped values you weave through the tree
66
77
  - [Boundaries and Suspense](https://weftui.dev/docs/explanation/boundaries-and-suspense): how failure and async are modeled as nodes in the same tree
67
78
  - [Render on the Server](https://weftui.dev/docs/how-to/render-on-the-server): the server/client split and `hydrate`
79
+ - [`@weftui/dom` reference](https://weftui.dev/docs/reference/dom#roothandle): `RootHandle.awaitCommit` and `commitGeneration`