npm - @weftui/core - Versions diffs - 0.29.0 → 0.31.0 - Mend

@weftui/core 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 (29) hide show

package/dist/{index-4cTlhojA.d.ts → index-B-dPfhKZ.d.ts} +38 -20
package/dist/index.d.ts +1 -1
package/dist/index.js +1 -1
package/dist/types/index.d.ts +1 -1
package/docs/explanation/boundaries-and-suspense.md +38 -8
package/docs/explanation/combinator-api.md +17 -11
package/docs/explanation/reactive-primitives.md +40 -13
package/docs/explanation/rendering-model.md +14 -2
package/docs/how-to/add-routing.md +299 -28
package/docs/how-to/author-components.md +71 -105
package/docs/how-to/compose-behavior-and-markup.md +141 -54
package/docs/how-to/handle-forms.md +142 -15
package/docs/how-to/load-async-data.md +110 -6
package/docs/how-to/load-data-with-rpc.md +171 -18
package/docs/how-to/provide-services.md +84 -1
package/docs/how-to/render-keyed-lists.md +120 -14
package/docs/how-to/render-on-the-server.md +113 -15
package/docs/how-to/show-navigation-progress.md +120 -14
package/docs/how-to/split-routes-lazily.md +106 -3
package/docs/how-to/style-reactively.md +141 -13
package/docs/how-to/use-element-refs.md +126 -8
package/docs/reference/core.md +22 -2
package/docs/reference/dom.md +43 -0
package/docs/reference/router.md +2 -2
package/docs/tutorial/01-your-first-app.md +43 -13
package/docs/tutorial/02-reactivity.md +29 -30
package/docs/tutorial/03-services-and-async.md +89 -38
package/docs/tutorial/04-errors-and-server.md +41 -25
package/package.json +1 -1

package/docs/tutorial/01-your-first-app.md CHANGED Viewed

@@ -9,6 +9,8 @@ description: "Install Weft, build a component with the h namespace, and mount it
 We assume you know [Effect](https://effect.website/docs/getting-started/introduction) fundamentals. Weft is Effect for the UI, so we will not re-explain `Effect.gen`, services, or streams from scratch.
+Across this tutorial you build one app: a counter. This step renders its static shell.
 ## Install
 ```bash
@@ -17,33 +19,61 @@ npm install @weftui/core @weftui/dom effect@beta
 Weft tracks Effect 4's beta line. This release is built and tested against `effect@4.0.0-beta.98`; the peer range accepts newer 4.0 betas, which may contain upstream breaking changes.
-`@weftui/core` gives you the element builders and combinators; `@weftui/dom` renders them (its `./client` entry mounts in the browser). `effect` is the peer everything is built on.
-## Build a component
+## Build and mount it
-A **component is a plain function you call**. There is no JSX and no `<Component/>` deferral. It returns a `Node`, which is just an `Effect` that produces a DOM node:
+A **component is a plain function you call**. There is no JSX and no `<Component/>` deferral. `App()` returns a `Node`, and the `h` namespace builds one: every property (`h.div`, `h.h1`, `h.button`, …) is a builder for that HTML tag, taking optional props and children.
 ```typescript
+// src/app.ts
 import { h } from "@weftui/core";
+export function App() {
+  return h.div({ class: "app" }, [
+    h.h1("Weft Counter"),
+    h.p({ class: "count" }, "Count: 0"),
+    h.div({ class: "controls" }, [
+      h.button({ type: "button" }, "−"),
+      h.button({ type: "button" }, "+"),
+    ]),
+  ]);
+}
+```
+```typescript
+// src/main.ts
 import { WeftApp } from "@weftui/dom/client";
 import { Effect } from "effect";
+import { App } from "./app";
-function App() {
-  return h.div({ class: "app" }, [h.h1("Hello, Weft"), h.p("A minimal app.")]);
-}
+const root = document.getElementById("root")!;
 const app = WeftApp.make();
-void Effect.runPromise(WeftApp.mount(app, App(), document.getElementById("root")!));
+void Effect.runPromise(WeftApp.mount(app, App(), root));
+```
+```html
+<!-- index.html -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Weft counter</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
 ```
-The `h` namespace is the entry point: every property (`h.div`, `h.h1`, `h.button`, …) is a builder for that HTML tag. A builder takes optional props and children, and returns a `Node`.
+Run it with `vite` (or any dev server that serves ES modules) and you get a heading, a static count, and two inert buttons. The buttons don't do anything yet: that's next.
 ## What just happened
-- `App()` returns a **`Node<never, never>`**. The two type parameters are the error channel (`E`) and the requirement channel (`R`), both `never` here because this component neither fails nor needs a service. As your app grows, those channels accumulate what it can fail with and what it depends on. That is the whole point of Weft's types: see [The Rendering Model](https://weftui.dev/docs/explanation/rendering-model).
-- `WeftApp.make()` creates a Weft app synchronously, with no layer to build yet. `WeftApp.mount(app, node, target)` renders the node into `target`, building real DOM and starting any reactive streams. It returns `Effect<RootHandle, …>` with `R = never`, so a bare `Effect.runPromise` runs it with no `Effect.provide` needed. You will give `WeftApp.make` a `Layer` once components need services: see [Services and Async](https://weftui.dev/docs/tutorial/03-services-and-async).
-- The component function runs **once**. Nothing here re-runs on a timer or a state change, because there is no state yet. That comes next.
+- `App()` returns a **`Node<never, never>`**, an `Effect` that resolves to an element descriptor, not a DOM node yet. `E` and `R` are `never` because this component neither fails nor needs a service. As your app grows, those channels accumulate what it can fail with and what it depends on: see [The Rendering Model](https://weftui.dev/docs/explanation/rendering-model).
+- `WeftApp.make()` creates a Weft app synchronously, with no layer to build yet. `WeftApp.mount(app, node, root)` renders `node` into `root`, building real DOM. It returns `Effect<RootHandle, …>` with `R = never`, so a bare `Effect.runPromise` runs it. You'll give `WeftApp.make` a `Layer` once components need services: see [Services and Async](https://weftui.dev/docs/tutorial/03-services-and-async).
+- `App` runs **once**. Nothing re-invokes it, because there's no state yet.
 ## Next
-- [Reactivity →](https://weftui.dev/docs/tutorial/02-reactivity): make the UI change over time with `SubscriptionRef` and streams
+- [Reactivity →](https://weftui.dev/docs/tutorial/02-reactivity): wire up the counter with `SubscriptionRef` and streams

package/docs/tutorial/02-reactivity.md CHANGED Viewed

@@ -7,54 +7,53 @@ description: Add component-local state with SubscriptionRef and weave its stream
 # Reactivity
-[Previously](https://weftui.dev/docs/tutorial/01-your-first-app) we mounted a static component. Now we make it change over time. This is the defining move in Weft: **weave a stream through the tree, and only that point updates.**
+[Previously](https://weftui.dev/docs/tutorial/01-your-first-app) you mounted a static counter shell. Now wire it up. This is the defining move in Weft: **weave a stream through the tree, and only that point updates.**
-## Local state with `SubscriptionRef`
+## Wire up the counter
-Use Effect's `SubscriptionRef` for component-local state. `SubscriptionRef.changes(ref)` returns a `Stream` that emits the current value and then every update. Pass that stream as a child or prop and the DOM at that spot becomes live:
+Use Effect's `SubscriptionRef` for component-local state. `SubscriptionRef.changes(ref)` returns a `Stream` that emits the current value and then every update. Pass that stream (or a derived stream) as a child and the DOM at that spot becomes live. Replace `src/app.ts`:
 ```typescript
+// src/app.ts
 import { h } from "@weftui/core";
-import { WeftApp } from "@weftui/dom/client";
-import { Effect, SubscriptionRef } from "effect";
+import { Effect, Stream, SubscriptionRef } from "effect";
-const Counter = () =>
+export const App = () =>
   Effect.gen(function* () {
     const count = yield* SubscriptionRef.make(0);
-    return yield* h.div([
-      h.span([SubscriptionRef.changes(count)]),
-      h.button({ onclick: () => SubscriptionRef.update(count, (n) => n + 1) }, "+"),
-      h.button({ onclick: () => SubscriptionRef.update(count, (n) => n - 1) }, "-"),
+    const label = Stream.map(SubscriptionRef.changes(count), (n) => `Count: ${n}`);
+    return yield* h.div({ class: "app" }, [
+      h.h1("Weft Counter"),
+      h.p({ class: "count" }, [label]),
+      h.div({ class: "controls" }, [
+        h.button(
+          { type: "button", onclick: () => SubscriptionRef.update(count, (n) => n - 1) },
+          "−",
+        ),
+        h.button(
+          { type: "button", onclick: () => SubscriptionRef.update(count, (n) => n + 1) },
+          "+",
+        ),
+      ]),
     ]);
   });
-const app = WeftApp.make();
-void Effect.runPromise(WeftApp.mount(app, Counter(), document.getElementById("root")!));
 ```
-`Effect.gen` lets you `yield*` the `SubscriptionRef` to set up state **before** building the tree. Because a `Node` is an `Effect`, the component body is an ordinary generator: no hooks, no dependency arrays.
-## The key idea: the body runs once
-The `Counter` function runs **exactly once**. It creates the ref, builds the tree, and returns. After that, nothing re-invokes it. The only thing that changes the DOM is the `SubscriptionRef.changes(count)` stream woven into the `h.span`.
+`main.ts` and `index.html` don't change. Reload and the buttons work.
-When you click `+`, `SubscriptionRef.update` pushes a new value, the stream emits, and the renderer patches _just that span's text_ in place. No diff, no re-render, no sibling touched.
+## Why this works
-This is what "streams are the weft" means in practice: reactivity is local to exactly where you thread a stream. Everything else is static. The full model is [The Rendering Model](https://weftui.dev/docs/explanation/rendering-model); the vocabulary of stream-shaped values is [Reactive Primitives](https://weftui.dev/docs/explanation/reactive-primitives).
+`App`'s body runs **exactly once**: it creates the ref, builds the tree, and returns. Nothing re-invokes it afterward. The only thing that changes the DOM is the `label` stream woven into `h.p`.
-> **Note.** In `[SubscriptionRef.changes(count)]` the stream is passed as a child array. Static values (`"Hello"`, `5`) work in the same position and simply never change. The rule is uniform: a plain value is static, a stream-shaped value is reactive.
+Click `+` and `SubscriptionRef.update` pushes a new value, `label` emits `"Count: 1"`, and the renderer patches _just that paragraph's text_ in place. No diff, no re-render, no sibling touched.
-## Deriving values
+`label` also shows **deriving values**: because `SubscriptionRef.changes(count)` is a `Stream`, you shape reactive text with ordinary stream operators (`Stream.map` here) instead of a templating syntax. Anywhere you'd compute a derived value, map the stream.
-Because `SubscriptionRef.changes(count)` returns a `Stream`, you shape reactive text with ordinary stream operators:
-```typescript
-h.span([Stream.map(SubscriptionRef.changes(count), (n) => `Count: ${n}`)]);
-```
+> **Note.** A stream-shaped child or prop is reactive; a static value (`"Hello"`, `5`) is not and never changes. `h.h1("Weft Counter")` above is static for exactly that reason. The rule is uniform across the whole tree.
-Anywhere you would compute a derived value, map the stream instead. The derivation stays reactive.
+The full model is [The Rendering Model](https://weftui.dev/docs/explanation/rendering-model); the vocabulary of stream-shaped values is [Reactive Primitives](https://weftui.dev/docs/explanation/reactive-primitives).
 ## Next
-- [Services and Async →](https://weftui.dev/docs/tutorial/03-services-and-async): pull dependencies from the environment and render async loading states
+- [Services and Async →](https://weftui.dev/docs/tutorial/03-services-and-async): read services from a button handler and load data asynchronously

package/docs/tutorial/03-services-and-async.md CHANGED Viewed

@@ -7,15 +7,13 @@ description: Give handlers access to services from the environment, and render a
 # Services and Async
-[So far](https://weftui.dev/docs/tutorial/02-reactivity) our state has been self-contained. Real apps talk to services and wait on async work. Both fall out of the same fact (a `Node` is an `Effect`), so both use plain Effect.
+[So far](https://weftui.dev/docs/tutorial/02-reactivity) the counter's state has been self-contained. Real apps talk to services and wait on async work. Both fall out of the same fact (a `Node` is an `Effect`), so both use plain Effect. This step adds a logging service to the buttons and an async fact panel below the counter.
 ## Handlers that use services
 An event handler can **return an Effect**. That Effect runs in the app's environment, so it can read any service the app's layer provides:
 ```typescript
-import { h } from "@weftui/core";
-import { WeftApp } from "@weftui/dom/client";
 import { Context, Effect, Layer } from "effect";
 class Logger extends Context.Service<Logger, { log: (message: string) => Effect.Effect<void> }>()(
@@ -23,60 +21,113 @@ class Logger extends Context.Service<Logger, { log: (message: string) => Effect.
 ) {}
 const LoggerLive = Layer.succeed(Logger, {
-  log: (message) => Effect.sync(() => console.log(message)),
+  log: (message) => Effect.log(message),
 });
+```
-const LogButton = () =>
-  h.button(
-    {
-      onclick: () =>
-        Effect.gen(function* () {
-          const logger = yield* Logger;
-          yield* logger.log("Button clicked");
-        }),
-    },
-    "Log",
-  );
+Wire it into the counter's `step` handler, so every click logs before updating state:
-// Give the app the layer: every handler in every root can now read Logger.
-const app = WeftApp.make(LoggerLive);
-void Effect.runPromise(WeftApp.mount(app, LogButton(), document.getElementById("root")!));
+```typescript
+const step = (delta: number) =>
+  Effect.gen(function* () {
+    const logger = yield* Logger;
+    yield* SubscriptionRef.update(count, (n) => n + delta);
+    yield* logger.log(`count changed by ${delta}`);
+  });
 ```
-`Logger` entered the tree's requirement channel the moment `LogButton` read it. You discharged it **once**, by passing `LoggerLive` to `WeftApp.make`. Provide too little and it is a compile error. The type of `app` (and so of `WeftApp.mount(app, LogButton(), …)`) names exactly which service is missing.
-Services come exclusively from the app's layer: an `Effect.provide` wrapped around the `mount` call does **not** reach components or handlers. This is Weft's entire dependency-injection story; it is just Effect's. The deeper treatment is [Services and Context](https://weftui.dev/docs/explanation/services-and-context).
+`Logger` entered the tree's requirement channel the moment `step` read it. You'll discharge it **once**, by passing `LoggerLive` to `WeftApp.make`. Provide too little and it's a compile error. Services come exclusively from the app's layer: an `Effect.provide` wrapped around the `mount` call does **not** reach components or handlers. This is Weft's entire dependency-injection story; it's just Effect's. The deeper treatment is [Services and Context](https://weftui.dev/docs/explanation/services-and-context).
 ## Async loading states
 A component can return a **`Stream<Node>`** to show different content over time. Sequence a loading placeholder before the resolved content with `Stream.concat`:
 ```typescript
+const fetchFact = (n: number) =>
+  Effect.gen(function* () {
+    yield* Effect.sleep("800 millis");
+    return `${n} is ${n % 2 === 0 ? "even" : "odd"}.`;
+  });
+const NumberFact = ({ n }: { n: number }) =>
+  Stream.concat(
+    Stream.make(h.p({ class: "fact" }, "Loading a fact…")),
+    Stream.fromEffect(Effect.map(fetchFact(n), (fact) => h.p({ class: "fact" }, fact))),
+  );
+```
+The stream emits the loading node first, then the resolved node. The renderer swaps the DOM in place on the second emission. This is the raw mechanism; to coordinate _several_ async regions with one fallback, reach for [`Boundary.suspend`](https://weftui.dev/docs/explanation/boundaries-and-suspense).
+## Put it together
+Replace `src/app.ts`, adding both pieces as part of the same tree:
+```typescript
+// src/app.ts
 import { h } from "@weftui/core";
-import { WeftApp } from "@weftui/dom/client";
-import { Effect, Stream } from "effect";
+import { Context, Effect, Layer, Stream, SubscriptionRef } from "effect";
+export class Logger extends Context.Service<
+  Logger,
+  { log: (message: string) => Effect.Effect<void> }
+>()("Logger") {}
+export const LoggerLive = Layer.succeed(Logger, {
+  log: (message) => Effect.log(message),
+});
-const AsyncGreeting = ({ name }: { name: string }) =>
+const fetchFact = (n: number) =>
+  Effect.gen(function* () {
+    yield* Effect.sleep("800 millis");
+    return `${n} is ${n % 2 === 0 ? "even" : "odd"}.`;
+  });
+const NumberFact = ({ n }: { n: number }) =>
   Stream.concat(
-    Stream.make(h.span("Loading…")),
-    Stream.fromEffect(
-      Effect.gen(function* () {
-        yield* Effect.sleep("1 second");
-        return yield* h.span(`Hello, ${name}!`);
-      }),
-    ),
+    Stream.make(h.p({ class: "fact" }, "Loading a fact…")),
+    Stream.fromEffect(Effect.map(fetchFact(n), (fact) => h.p({ class: "fact" }, fact))),
   );
-const app = WeftApp.make();
-void Effect.runPromise(
-  WeftApp.mount(app, AsyncGreeting({ name: "World" }), document.getElementById("root")!),
-);
+export const App = () =>
+  Effect.gen(function* () {
+    const count = yield* SubscriptionRef.make(0);
+    const label = Stream.map(SubscriptionRef.changes(count), (n) => `Count: ${n}`);
+    const step = (delta: number) =>
+      Effect.gen(function* () {
+        const logger = yield* Logger;
+        yield* SubscriptionRef.update(count, (n) => n + delta);
+        yield* logger.log(`count changed by ${delta}`);
+      });
+    return yield* h.div({ class: "app" }, [
+      h.h1("Weft Counter"),
+      h.p({ class: "count" }, [label]),
+      h.div({ class: "controls" }, [
+        h.button({ type: "button", onclick: () => step(-1) }, "−"),
+        h.button({ type: "button", onclick: () => step(1) }, "+"),
+      ]),
+      NumberFact({ n: 3 }),
+    ]);
+  });
 ```
-The stream emits the loading node first, then the resolved node. The renderer swaps the DOM in place on the second emission.
+Give the app the layer in `src/main.ts`:
+```typescript
+// src/main.ts
+import { WeftApp } from "@weftui/dom/client";
+import { Effect } from "effect";
+import { App, LoggerLive } from "./app";
+const root = document.getElementById("root")!;
+const app = WeftApp.make(LoggerLive);
+void Effect.runPromise(WeftApp.mount(app, App(), root));
+```
-This is the raw mechanism. To coordinate _several_ async regions with a single fallback, reach for [`Boundary.suspend`](https://weftui.dev/docs/explanation/boundaries-and-suspense), which you will meet in the next step.
+Reload: the fact panel shows "Loading a fact…" then swaps in, and every click logs to the console.
 ## Next
-- [Errors and Server Rendering →](https://weftui.dev/docs/tutorial/04-errors-and-server): catch failures with boundaries and render on the server
+- [Errors and Server Rendering →](https://weftui.dev/docs/tutorial/04-errors-and-server): catch the fact panel's failures with a boundary and render the whole app on the server

package/docs/tutorial/04-errors-and-server.md CHANGED Viewed

@@ -7,63 +7,79 @@ description: Catch rendering-path failures with Boundary, then render on the ser
 # Errors and Server Rendering
-The final step. [We can now](https://weftui.dev/docs/tutorial/03-services-and-async) use services and async. Here we handle what happens when async work **fails**, and how the same tree renders on the server.
+The final step. [We can now](https://weftui.dev/docs/tutorial/03-services-and-async) use services and async. Here we make the fact panel's fetch fail on purpose, catch it with a boundary, and render the whole counter on the server.
 ## Error boundaries
-A component's failures accumulate on its `E` channel. Wrap a subtree in a `Boundary.*` variant to intercept them and render a fallback instead of failing the mount:
+A component's failures accumulate on its `E` channel. Wrap a subtree in a `Boundary.*` variant to intercept them and render a fallback instead of failing the mount. In `src/app.ts`, make `fetchFact` fail for `n === 3`, the value the counter's fact panel actually requests:
 ```typescript
 import { Boundary, h } from "@weftui/core";
 import { Data, Effect } from "effect";
-class ApiError extends Data.TaggedError("ApiError")<{ status: number }> {}
+class FactError extends Data.TaggedError("FactError")<{ n: number }> {}
-const SafeWidget = () =>
-  Boundary.catch({ fallback: (e) => h.div({ class: "error" }, `Request failed: ${e.status}`) }, [
-    Effect.fail(new ApiError({ status: 503 })),
-  ]);
+const fetchFact = (n: number): Effect.Effect<string, FactError> =>
+  Effect.gen(function* () {
+    yield* Effect.sleep("800 millis");
+    if (n === 3) return yield* Effect.fail(new FactError({ n }));
+    return `${n} is ${n % 2 === 0 ? "even" : "odd"}.`;
+  });
 ```
-There are six failure-catch variants, mirroring Effect's own error operators: `catch`, `catchCause`, `catchTag`, `catchTags`, `catchFilter`, `catchIf`. A failure that a boundary does not match re-raises to the **nearest enclosing** boundary. If none catches it, the mount fails.
+Wrap the fact panel where it's placed in `App`:
-The conceptual model (and why the boundary's type reflects exactly which failures are handled) is [Boundaries and Suspense](https://weftui.dev/docs/explanation/boundaries-and-suspense).
+```typescript
+Boundary.catch(
+  { fallback: (e) => h.p({ class: "error" }, `Couldn't load a fact about ${e.n}.`) },
+  [NumberFact({ n: 3 })],
+),
+```
+There are six failure-catch variants, mirroring Effect's own error operators: `catch`, `catchCause`, `catchTag`, `catchTags`, `catchFilter`, `catchIf`. `Boundary.catch` here fully consumes `FactError` from the subtree's `E`; the app's aggregate `E` stays `never`. A failure a boundary doesn't match re-raises to the **nearest enclosing** boundary; if none catches it, the mount fails. The conceptual model (and why the boundary's type reflects exactly which failures are handled) is [Boundaries and Suspense](https://weftui.dev/docs/explanation/boundaries-and-suspense).
+Reload and the fact panel shows "Couldn't load a fact about 3." instead of hanging or crashing the mount.
 ## Render on the server
-The same component tree renders to HTML on the server and **hydrates in place** on the client: no re-render, no flash. The server produces markup (plus inline data). `hydrate` adopts that existing DOM and resumes reactivity:
+The same component tree renders to HTML on the server and **hydrates in place** on the client: no re-render, no flash. `hydrate` adopts the server's existing DOM and resumes reactivity. Split `main.ts` into two entries that both import the same side-effect-free `App`:
 ```typescript
-// server entry
+// src/entry-server.ts
+import { AppRpcClientTag } from "@weftui/core";
 import { renderToStringHydratable } from "@weftui/dom/server";
-import { Effect } from "effect";
+import { Effect, Layer } from "effect";
 import { App } from "./app";
-export const render = () => Effect.runPromise(renderToStringHydratable(App()));
+// This tree has no `Boundary.rpc`, but the SSR renderer always requires an
+// AppRpcClientTag in context, so discharge it with a no-op.
+const NoRpc = Layer.succeed(AppRpcClientTag, {
+  call: () => Effect.die(new Error("no rpc in this app")),
+});
+export const render = (): Promise<string> =>
+  Effect.runPromise(Effect.provide(renderToStringHydratable(App()), NoRpc));
 ```
 ```typescript
-// client entry
+// src/entry-client.ts
 import { WeftApp } from "@weftui/dom/client";
 import { Effect } from "effect";
-import { App } from "./app";
+import { App, LoggerLive } from "./app";
-const app = WeftApp.make();
-void Effect.runPromise(WeftApp.hydrate(app, App(), document.getElementById("root")!));
-```
+const root = document.getElementById("root")!;
-The same side-effect-free `App` is imported by both entries.
+const app = WeftApp.make(LoggerLive);
+void Effect.runPromise(WeftApp.hydrate(app, App(), root));
+```
-For server-resolved data that replays into the client without a second request, `Boundary.rpc` extends this model:
+Splice `render()`'s HTML into your server template's `#root`, and point `index.html`'s script tag at `entry-client.ts` instead of `main.ts`. `AppRpcClientTag` and the `NoRpc` no-op only matter here because `renderToStringHydratable` requires that seam unconditionally; a tree using [`Boundary.rpc`](https://weftui.dev/docs/how-to/load-data-with-rpc) would provide a real one instead, typically via `@weftui/router`'s `RouterServer`.
-1. Resolve an rpc on the server.
-2. Serialize its result into the HTML.
-3. Replay it on hydrate.
-4. Keep the region live for refetch.
+For server-resolved data that replays into the client without a second request, `Boundary.rpc` extends this model: resolve an rpc on the server, serialize its result into the HTML, replay it on hydrate, and keep the region live for refetch.
 ## You're done
-You have built up every core idea: components and `h`, reactive state and streams, services and async, boundaries and SSR. Where to go next depends on what you are doing:
+You've built up every core idea: components and `h`, reactive state and streams, services and async, boundaries and SSR, all in one counter. Where to go next depends on what you're doing:
 - **Understand the model** → [The Rendering Model](https://weftui.dev/docs/explanation/rendering-model), [The Combinator API](https://weftui.dev/docs/explanation/combinator-api), [Reactive Primitives](https://weftui.dev/docs/explanation/reactive-primitives)
 - **Get a task done** → [Author Components](https://weftui.dev/docs/how-to/author-components), [Render on the Server](https://weftui.dev/docs/how-to/render-on-the-server), [Load Data with RPC](https://weftui.dev/docs/how-to/load-data-with-rpc), [Add Routing](https://weftui.dev/docs/how-to/add-routing)

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@weftui/core",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "description": "Element builders and combinators for Weft: reactive UI, woven from Effect",
   "keywords": [
     "combinators",