ripple 0.3.128 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,299 @@
 # ripple
 
+## 0.4.1
+
+### Patch Changes
+
+- [#1477](https://github.com/Ripple-TS/ripple/pull/1477)
+  [`670d669`](https://github.com/Ripple-TS/ripple/commit/670d66916a0b2d58254adb3248abc9d3e816fd8d)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Use property-specific CSS
+  types for HTML and SVG style objects and export `CSSProperties` from `ripple`
+  and `ripple/jsx-runtime`. Numeric lengths such as `width: 400` now produce a
+  type error; specify units with `width: '400px'` or `width: '24rem'`. Unitless
+  CSS properties, zero lengths, camelCase and kebab-case names, and CSS custom
+  properties remain supported.
+
+  Style properties set to `null` or `undefined` are omitted during server
+  rendering and removed on the client, matching the nullable and optional property
+  types and supporting conditional style values. Ripple does not infer or add CSS
+  units.
+
+  Re-export the `JSX` and `Ripple` namespaces as types from `ripple` so element
+  prop and event types can be imported from the main package. The
+  `ripple/jsx-runtime` exports remain available.
+
+- [#1475](https://github.com/Ripple-TS/ripple/pull/1475)
+  [`e008b3f`](https://github.com/Ripple-TS/ripple/commit/e008b3f933a5a5b54ca8b74ae80aa98b6ddfb82f)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Show public Tracked, Derived,
+  and WritableDerived type names in value property hovers.
+
+## 0.4.0
+
+### Minor Changes
+
+- [#1472](https://github.com/Ripple-TS/ripple/pull/1472)
+  [`5d3e60d`](https://github.com/Ripple-TS/ripple/commit/5d3e60d86129ac20d23c86a923914ee44efea9d1)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Lazy destructuring is removed
+  from the language (tsrx RFC
+  [#106](https://github.com/Ripple-TS/ripple/issues/106)). `&[ ... ]` and
+  `&{ ... }` are syntax errors now; a tracked value is read and written through
+  `.value`, and a `Tracked`, `Derived`, or `WritableDerived` object is passed to a
+  child as it is (`<Child {count} />`, or `count={track(() => count.value)}` for a
+  read-only view).
+
+  | Before                                                           | After                                                                    |
+  | ---------------------------------------------------------------- | ------------------------------------------------------------------------ |
+  | `let &[count] = track(0); count++; {count}`                      | `const count = track(0); count.value++; {count.value}`                   |
+  | `let &[count, countT] = track(0); <Child count={countT} />`      | `const count = track(0); <Child {count} />`                              |
+  | `let &[double] = track(() => count * 2)`                         | `const double = track(() => count.value * 2)`                            |
+  | `function Card({ count: &[count] }: { count: Tracked<number> })` | `function Card({ count }: { count: Tracked<number> })` and `count.value` |
+
+  `Tracked<V>`, `Derived<V>`, and `WritableDerived<V>` are plain `{ value: V }`
+  shapes; the `[V, Tracked<V>]` tuple member, the runtime `[0]`/`[1]` accessors,
+  and the `lazy_array_*` helpers are gone, and `count[0]` reports the ordinary
+  "use `.value`" error. Rest and default patterns lower to native destructuring: a
+  keyed `@for` pattern with a rest element or a default is destructured once per
+  item change, and a destructuring assignment onto boxed `let`s writes the boxes
+  in place; the `fallback`, `exclude_from_object`, and `array_slice` runtime
+  helpers are gone. On the server a dynamic tag `<{tag} />` is lowered to
+  `_$_.dynamic_element(tag, props)`, with the tag and the element's own props
+  passed separately, so the props never carry an `is` entry.
+
+### Patch Changes
+
+- [#1458](https://github.com/Ripple-TS/ripple/pull/1458)
+  [`bbc1445`](https://github.com/Ripple-TS/ripple/commit/bbc14455485e054c145ebc78f08a771d41ea16f1)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Lighter list, `@if`, and
+  mount output on the client. A controlled `@for` (the sole content of its
+  element) appends its items into the parent instead of inserting before an empty
+  text anchor, and an `@if` at the root of such an item creates an anchor only
+  once it needs a position of its own (a branch swap, or a branch that renders
+  nothing), so a keyed list of `@if` items keeps no anchor nodes in the DOM;
+  `mount()` likewise renders into the target without an anchor node. An `@if`
+  block now renders its branch directly and owns the branch's DOM range, and a
+  list keeps its inputs in block state, so every `@if` and `@for` allocates one
+  block less and no closures. Text and class updates compare against the last
+  value in the render block's state instead of a cache on the DOM node; the
+  compiler emits that compared form for single updates as well.
+
+  A selector key whose subscribers all left stays in the selector's map for reuse
+  when the key comes back, and is swept once more than 1024 released keys pile up.
+
+- [#1469](https://github.com/Ripple-TS/ripple/pull/1469)
+  [`b3a38ce`](https://github.com/Ripple-TS/ripple/commit/b3a38ce0aae66a9dcac0b663c30161eed0d7547a)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Add custom serialization for
+  trackAsync hydration and RPC arguments/results using `transport` handlers in
+  ripple.config.ts. Register matching encoders and decoders automatically in
+  development and production, and expose `setTransport` for custom integrations.
+  Apps without a transport retain the plain JSON hydration fast path. Provide a
+  browser entry for config helpers so importing defineConfig does not load the
+  Vite plugin's Node.js dependencies during hydration. A configured hydration
+  payload embeds devalue's flattened form directly, so the client revives it
+  without a second string encoding.
+
+- [#1460](https://github.com/Ripple-TS/ripple/pull/1460)
+  [`2ef5da5`](https://github.com/Ripple-TS/ripple/commit/2ef5da52b26fc13e11537dd28df0e2b376ca0f52)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Cheaper element refs,
+  effects, and component templates on the client. A `ref` is one effect block
+  keyed on its state instead of a render block that re-evaluates the thunk and
+  creates a branch and an effect for it, since the ref value is read untracked and
+  fixed for the life of the enclosing block. Effects deferred until a component
+  has rendered are recorded as flat entries, and an effect's first run skips the
+  child and teardown sweep. A tracked value written during a flush keeps its
+  previous value for teardowns on itself instead of in a map, and `flushSync`
+  releases those values when it finishes (they were only released by the microtask
+  flush before).
+
+  The compiler types the bindings of a destructured pattern
+  (`{ item }: { item: Item }` as component props, or `const { item } = props` from
+  a typed initializer), so their property reads lower to direct text and attribute
+  writes. A component whose body has setup statements beside a single root element
+  clones that element instead of a fragment.
+
+- [#1470](https://github.com/Ripple-TS/ripple/pull/1470)
+  [`0321791`](https://github.com/Ripple-TS/ripple/commit/03217912651e0a49edb8060a92602fd0e0abe193)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Component props are plain
+  objects, evaluated once. A call site such as `<Child a={x} b="y" />` compiles to
+  the object literal `{ a: x, b: 'y' }` and passes it to the component as is: no
+  getters, no props class, no Proxy for spreads, no `Props` helpers, and no
+  `Object.keys`/spread lowering, so props behave like any other object in `.tsrx`
+  and `.ts` code alike. A prop expression is evaluated when the component is
+  called, so a child that must follow a change now receives a live value
+  explicitly: a tracked object (`count={count}`) or a derived
+  (`title={track(() => label + count.value)}`), read through `.value`.
+  `count={count.value}` passes the current number. `track(fn)` is typed
+  `Derived<V>` with a read-only `value`; `track(fn, get, set)` or
+  `track(fn, undefined, true)` is a `WritableDerived<V>`, and a write to a
+  read-only derived warns in development. A dynamic element
+  (`<{tag} class={x} />`) still updates its attributes reactively. `Props.keys`,
+  `Props.values`, `Props.entries`, `Props.has`, `Props.spread`, `Props.rest`,
+  `Props.ownSymbolKeys` and `Props.ownAllKeys` are removed, as they are plain
+  `Object` operations now.
+
+- [#1457](https://github.com/Ripple-TS/ripple/pull/1457)
+  [`020d269`](https://github.com/Ripple-TS/ripple/commit/020d2699f8e1333367ac9f7abe9247bab55e272d)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Fix hydration when a fragment
+  root or a slot is followed by siblings. The compiler's closing `next(n)` for a
+  fragment root now counts from wherever the cursor was last positioned, so a
+  trailing element navigated to for an event or attribute, tracked text, a
+  control-flow block, a component, or a `{expression}` no longer makes the cursor
+  overshoot or fall short of the fragment's last node; a trailing element that was
+  descended into is popped back to. Control-flow bodies nested inside an element
+  now emit that `next(n)` too. At runtime, a `{expression}` leaves the cursor on
+  its own end marker like every other block, and a multi-node branch or `@for`
+  item steps to its block's end marker after appending, so the next sibling, item,
+  or component adopts the right node.
+
+- [#1462](https://github.com/Ripple-TS/ripple/pull/1462)
+  [`453bf4b`](https://github.com/Ripple-TS/ripple/commit/453bf4ba8b1b31963df26696545e446ab4b1658e)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Faster keyed lists and
+  lighter component output on the client. A `@for` keyed by the item itself
+  (`key item`) keys by identity with no key callback, so a re-run compares the
+  item arrays directly and skips the per-item value update; a same-length keyed
+  re-run rewrites the list's block array in place instead of allocating a new one,
+  with the unchanged prefix and suffix skipped by plain compares. Static child
+  components that follow their template siblings append into the parent element
+  instead of inserting before a `<!>` placeholder, so a component with trailing
+  child components clones fewer nodes and leaves no comment anchors in the DOM.
+  The compiler also infers a primitive text type through a call whose callee is
+  declared to return one (a binding typed as a function type, an `as` assertion, a
+  function with a declared return type, or a method or function-typed property of
+  an annotated object), so such text lowers to `set_text` instead of a generic
+  expression block.
+
+- [#1463](https://github.com/Ripple-TS/ripple/pull/1463)
+  [`411809f`](https://github.com/Ripple-TS/ripple/commit/411809fb38f25b259a1078a901839318e4207871)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Faster cold hydration and
+  server rendering. `hydrate()` accepts `rootBoundary: false` like `mount()`,
+  stepping over the server's root marker itself instead of rendering under a `try`
+  block (a streamed shell whose root suspended still hydrates under the default
+  boundary, which alone can adopt and activate its slot). The client runtime
+  compiles less on a cold page: the hydration cursor steps live in one module and
+  assign the cursor directly, a list's first render never compiles the diff, a
+  template's clone path stays out of its hydrating closure, `run_block` keeps
+  re-run and teardown handling in separate functions, and the compiler adopts an
+  element's lone text child in place (`hydrate_text`) with no `pop()`. A `@for`
+  whose `index` nothing reads allocates no tracked index per item. Removing the
+  server's inline styles now starts from an animation frame rather than inside
+  `mount()`/`hydrate()`.
+
+  On the server, `render()` joins its buffer tree with a plain walk instead of
+  `flat(Infinity).join('')`, `escape()` returns strings without `&`, `<` or `"`
+  after a single regex test, and an `Output` allocates its stream, css and
+  async-operation collections only for the root or on first use.
+
+- [#1453](https://github.com/Ripple-TS/ripple/pull/1453)
+  [`82bc9ee`](https://github.com/Ripple-TS/ripple/commit/82bc9ee585c6b273bf69890bc2f230aba922bf19)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Speed up portals and root
+  event delegation. `<Portal>` now lowers to a dedicated `portal()` runtime call,
+  portal content appends straight into its target without a placeholder node,
+  delegated root listeners are shared per target instead of per portal, event
+  registration no longer scans every root target, and `@if` blocks and compiled
+  `event()` calls allocate fewer closures. `mount()` accepts `rootBoundary: false`
+  to render without the default root try/pending boundary. Cold code paths
+  (keyed-list diff, block error handling, effect-phase flushing, hydration
+  branches) live in their own functions so a first mount compiles less. A
+  component whose root is `@if`, `@for`, `@switch`, or `@try` now re-renders at
+  its own position when it is portal content or one of an element's all-component
+  children, instead of at the end of the parent; `mount()`/`hydrate()` disposers
+  are safe to call more than once.
+
+- [#1470](https://github.com/Ripple-TS/ripple/pull/1470)
+  [`0321791`](https://github.com/Ripple-TS/ripple/commit/03217912651e0a49edb8060a92602fd0e0abe193)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Cheaper component
+  instantiation and `@if` chains on the client. An `@else if`, and a branch whose
+  only statement is another `@if`, fold into the enclosing `@if` block on both the
+  client and the server, so a chain costs one block and one hydration boundary. An
+  `@if` whose condition reads no tracked state renders its branch directly under
+  the enclosing block with no block of its own (a block without dependencies is
+  never scheduled, so nothing is lost); a dynamic condition keeps its block and
+  adopts the dependencies recorded while it was evaluated. A module-level
+  component also carries a direct render entry so `render_component` skips the
+  element it would otherwise return. An `@if` condition and its branches compile
+  to module-level functions when they capture at most one local (passed through
+  the if runtime), a condition returns the branch function to render instead of
+  calling a selection callback, and a render block's function is module-level with
+  its captured locals carried on the block state, so a component instantiation
+  creates no closures for its ifs or its reactive text and attribute updates.
+  `Context.get()` walks a chain of the context entries that were set rather than
+  every ancestor component. A module-level component's render body is a
+  module-level function that receives the props from the element instead of a
+  closure created per instantiation, `Context.get()`/`set()` calls on a
+  `new Context()` binding skip the `with_scope` wrapper, and `mount()` only
+  schedules the SSR style removal when the page has server-rendered inline styles.
+  A `@switch` now lowers onto the same runtime as `@if`: its selector returns the
+  case to render, so a `@switch` over a value that reads no tracked state renders
+  its case with no block, its cases are module-level functions when they capture
+  at most one local, and the separate switch runtime is gone. The probe that
+  decides whether an `@if` needs a block now renders a static branch itself, one
+  runtime call instead of four. A module-level component with a destructuring
+  parameter gets the direct render entry as well, and an `@if` or `@switch` is
+  hoisted whatever number of locals it captures: several travel as one object
+  literal destructured in the hoisted signatures. A binding that hoisted template
+  code writes (a `ref={name}` setter, a handler that assigns it) or that is
+  reassigned after template code reads it is compiled to a `{ v }` box, so the
+  hoisted functions share the variable with the component exactly as a closure
+  would: a plain `let`, a name inside a destructuring pattern of any shape, a
+  function or catch parameter (reboxed first thing in the body), and a `let`
+  written through a destructuring or `for...of` assignment target.
+
+- [#1473](https://github.com/Ripple-TS/ripple/pull/1473)
+  [`eb638ea`](https://github.com/Ripple-TS/ripple/commit/eb638ea4a3c73b7ecb98ccedfffc576661dc67b3)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - A derived created during a
+  block's run (a `track(() => ...)` or `tracked.readOnly()` in an `@if` branch, a
+  keyed `@for` item, a render expression, or component setup) is now unsubscribed
+  from its sources when that block reruns or is destroyed, unless a reader that is
+  still alive holds it. Before, such deriveds stayed subscribed until the block
+  that owned them was destroyed, so a branch that toggled repeatedly accumulated
+  one stale derived per toggle, each walked on every write to the source. The
+  bookkeeping lives in a side table keyed by the creating block, so blocks that
+  create no deriveds pay nothing.
+
+- [#1466](https://github.com/Ripple-TS/ripple/pull/1466)
+  [`2631804`](https://github.com/Ripple-TS/ripple/commit/2631804cd28980b213643ac4ef5e5bcb814eae57)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Faster streaming SSR. A
+  resolved `trackAsync` value made of plain data (strings, finite numbers,
+  booleans, `null`, arrays and plain objects, each reachable once) now travels in
+  its hydration script as raw JSON that `JSON.parse` of the envelope yields
+  directly, instead of a devalue-encoded string; values JSON cannot represent
+  (`undefined`, `NaN`, `-0`, bigints, Dates, Maps, Sets, shared references,
+  cycles) keep the devalue encoding, and the client reads either form. Boundaries
+  that settle in the same task (data arriving together, a batch of promises
+  resolved by one timer or I/O callback) stream as one chunk, flushed once the
+  task's microtasks have drained; closing the stream flushes whatever is still
+  queued first. `devalue` is updated to 5.9.2, with the stringify performance
+  patch proposed upstream in sveltejs/devalue#190 applied through pnpm's
+  `patchedDependencies` until it is released.
+
+- [#1472](https://github.com/Ripple-TS/ripple/pull/1472)
+  [`5d3e60d`](https://github.com/Ripple-TS/ripple/commit/5d3e60d86129ac20d23c86a923914ee44efea9d1)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - `tracked.readOnly()` returns
+  a read-only view of a `Tracked` or `WritableDerived`: a `Derived<V>` that
+  follows the value and rejects writes, for a child, function, or context that
+  should only read it. It is equivalent to `track(() => tracked.value)`. On a
+  derived that is already read-only, `readOnly()` returns the derived itself.
+
+- [#1465](https://github.com/Ripple-TS/ripple/pull/1465)
+  [`8ace206`](https://github.com/Ripple-TS/ripple/commit/8ace206bfed2cd80b758e6e72f94084d2ffe1455)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - `@try` blocks and the root
+  boundary keep their state in one explicit `TryState` object, and the pending,
+  catch, request and streaming helpers are module functions that take it. A
+  boundary allocates its state and one branch closure instead of a closure per
+  helper.
+- Updated dependencies
+  [[`bbc1445`](https://github.com/Ripple-TS/ripple/commit/bbc14455485e054c145ebc78f08a771d41ea16f1),
+  [`0321791`](https://github.com/Ripple-TS/ripple/commit/03217912651e0a49edb8060a92602fd0e0abe193),
+  [`2ef5da5`](https://github.com/Ripple-TS/ripple/commit/2ef5da52b26fc13e11537dd28df0e2b376ca0f52),
+  [`0321791`](https://github.com/Ripple-TS/ripple/commit/03217912651e0a49edb8060a92602fd0e0abe193),
+  [`020d269`](https://github.com/Ripple-TS/ripple/commit/020d2699f8e1333367ac9f7abe9247bab55e272d),
+  [`453bf4b`](https://github.com/Ripple-TS/ripple/commit/453bf4ba8b1b31963df26696545e446ab4b1658e),
+  [`411809f`](https://github.com/Ripple-TS/ripple/commit/411809fb38f25b259a1078a901839318e4207871),
+  [`82bc9ee`](https://github.com/Ripple-TS/ripple/commit/82bc9ee585c6b273bf69890bc2f230aba922bf19),
+  [`69d50d9`](https://github.com/Ripple-TS/ripple/commit/69d50d9849d8484a88d39b2908bb682d27ec7bc9),
+  [`0321791`](https://github.com/Ripple-TS/ripple/commit/03217912651e0a49edb8060a92602fd0e0abe193),
+  [`5d3e60d`](https://github.com/Ripple-TS/ripple/commit/5d3e60d86129ac20d23c86a923914ee44efea9d1)]:
+  - @tsrx/ripple@0.2.0
+
 ## 0.3.128
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.128",
+  "version": "0.4.1",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -29,6 +29,12 @@
       "default": "./src/runtime/index-server.js"
     },
     "./package.json": "./package.json",
+    "./transport": {
+      "types": "./types/transport.d.ts",
+      "worker": "./src/runtime/internal/server/transport.js",
+      "browser": "./src/runtime/internal/client/transport.js",
+      "default": "./src/runtime/internal/server/transport.js"
+    },
     "./server": {
       "types": "./types/server.d.ts",
       "default": "./src/server/index.js"
@@ -71,10 +77,11 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "devalue": "^5.8.1",
+    "csstype": "^3.2.3",
+    "devalue": "^5.9.2",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "^0.1.67",
-    "@tsrx/ripple": "0.1.65"
+    "@tsrx/core": "^0.2.0",
+    "@tsrx/ripple": "0.2.0"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/jsx-runtime.d.ts

@@ -7,6 +7,7 @@ import type {
 	TSRXElement,
 } from '#public';
 import type { Nullable } from '@tsrx/core/types/helpers';
+import type * as CSS from 'csstype';
 export type { RefValue } from '#public';
 
 /**
@@ -50,10 +51,18 @@ export function jsxs(
  */
 export function Fragment(props: FragmentProps): TSRXElement;
 
+type NullableStyleProperties<T> = { [Property in keyof T]: T[Property] | null };
+
 /** JSX attributes live under Ripple so editor hovers identify their framework. */
 declare namespace Ripple {
 	type ClassValue = string | import('clsx').ClassArray | import('clsx').ClassDictionary;
 
+	/** Inline CSS styles. Values keep their units; null and undefined remove a property. */
+	interface CSSProperties
+		extends NullableStyleProperties<CSS.Properties>, NullableStyleProperties<CSS.PropertiesHyphen> {
+		[property: `--${string}`]: string | number | null | undefined;
+	}
+
 	type Event<
 		Target extends globalThis.EventTarget,
 		EventType extends globalThis.Event,
@@ -493,7 +502,7 @@ declare namespace Ripple {
 		class?: ClassValue | undefined | null;
 		className?: Nullable<string>;
 		id?: Nullable<string>;
-		style?: Nullable<string> | Record<string, string | number>;
+		style?: Nullable<string> | CSSProperties;
 		title?: Nullable<string>;
 		lang?: Nullable<string>;
 		dir?: 'ltr' | 'rtl' | 'auto';
@@ -627,7 +636,7 @@ declare namespace Ripple {
 		// Styling
 		class?: ClassValue | undefined | null;
 		className?: Nullable<string>;
-		style?: Nullable<string> | Record<string, string | number>;
+		style?: Nullable<string> | CSSProperties;
 
 		// Presentation attributes
 		alignmentBaseline?:
@@ -1405,6 +1414,7 @@ declare namespace Ripple {
 }
 
 export import ClassValue = Ripple.ClassValue;
+export import CSSProperties = Ripple.CSSProperties;
 export import JSX = Ripple.JSX;
 export { Ripple };
 

package/src/runtime/element.js

@@ -1,21 +1,38 @@
-const TSRX_ELEMENT = Symbol.for('ripple.element');
+export const TSRX_ELEMENT = Symbol.for('ripple.element');
 
 /**
  * @typedef {{
  * 	render: Function;
+ * 	p: any;
  * 	[TSRX_ELEMENT]: true;
  * }} TSRXElement
  */
 
 /**
+ * Elements share one constructor so every instance has the same shape and the
+ * marker lives on the prototype instead of being defined per allocation.
  * @param {Function} render
+ * @param {any} p
+ * @this {TSRXElement}
+ */
+function TSRXElementImpl(render, p) {
+	this.render = render;
+	this.p = p;
+}
+/** @type {any} */ (TSRXElementImpl.prototype)[TSRX_ELEMENT] = true;
+
+/**
+ * @param {Function} render `(anchor, block, p) => …`
+ * @param {any} [p] a value handed back to `render` as its third argument: a
+ *   module-level component render function receives the component's props
+ *   this way instead of closing over them, so instantiating the component
+ *   allocates no closure
  * @returns {TSRXElement}
  */
-export function tsrx_element(render) {
-	return {
-		render,
-		[TSRX_ELEMENT]: true,
-	};
+export function tsrx_element(render, p = null) {
+	return /** @type {TSRXElement} */ (
+		/** @type {unknown} */ (new /** @type {any} */ (TSRXElementImpl)(render, p))
+	);
 }
 
 /**

package/src/runtime/index-client.js

@@ -1,28 +1,24 @@
-/** @import { RootBoundaryOptions } from '#client' */
+/** @import { AppendIntoAnchor, RootBoundaryOptions } from '#client' */
 
 import { destroy_block, root } from './internal/client/blocks.js';
-import { handle_root_events } from './internal/client/events.js';
-import {
-	get_first_child,
-	get_next_sibling,
-	init_operations,
-} from './internal/client/operations.js';
+import { handle_root_events, release_root_events } from './internal/client/events.js';
+import { init_operations } from './internal/client/operations.js';
 import { render_component } from './internal/client/component.js';
-import { create_anchor } from './internal/client/utils.js';
 import { try_block } from './internal/client/try.js';
-import { remove_ssr_css } from './internal/client/css.js';
+import { remove_styles } from './internal/client/css.js';
 import { normalize_children } from './element.js';
 import {
-	clear_track_hash_reference,
+	hydrate_next,
 	hydrate_node,
 	hydrating,
-	set_hydrate_node,
-	set_hydrating,
+	set_hydration,
+	track_hash_reference,
 } from './internal/client/hydration.js';
 import { COMMENT_NODE, HYDRATION_START } from '../constants.js';
 
 // Re-export JSX runtime functions for jsxImportSource: "ripple"
 export { jsx, jsxs, Fragment } from '../jsx-runtime.js';
+export { set_transport as setTransport } from './internal/client/transport.js';
 export {
 	UNINITIALIZED,
 	TRACKED_UPDATED,
@@ -31,7 +27,7 @@ export {
 } from './internal/client/constants.js';
 
 /**
- * @param {Node} anchor
+ * @param {Node | AppendIntoAnchor} anchor
  * @param {(anchor: Node) => void} render_content
  * @param {RootBoundaryOptions | undefined} boundary
  * @returns {void}
@@ -55,6 +51,7 @@ function render_root_boundary(anchor, render_content, boundary) {
 				render_component(Pending, pending_anchor, {});
 			}
 		},
+		true,
 	);
 }
 
@@ -63,71 +60,104 @@ function render_root_boundary(anchor, render_content, boundary) {
  * get, so `mount`/`hydrate` accept a component function as the `children`
  * prop.
  *
- * @param {Record<string, any> | undefined} props
+ * @param {Record<string, any>} props
  * @returns {Record<string, any>}
  */
 function normalize_props(props) {
-	if (props?.children != null) {
-		return { ...props, children: normalize_children(props.children) };
-	}
-
-	return props || {};
+	return { ...props, children: normalize_children(props.children) };
 }
 
 /**
+ * `rootBoundary` configures the default `try`/`pending`/`catch` boundary the
+ * app is rendered under; `false` renders without one. Without a root
+ * boundary, `trackAsync()` must sit inside a user `@try` block, and errors
+ * that escape one propagate out of the flush.
  * @param {Function} component
- * @param {{ props?: Record<string, any>, target: HTMLElement, rootBoundary?: RootBoundaryOptions }} options
+ * @param {{ props?: Record<string, any>, target: HTMLElement, rootBoundary?: RootBoundaryOptions | false }} options
  * @returns {() => void}
  */
 export function mount(component, options) {
 	init_operations();
-	remove_ssr_css();
+	// Only a page with server-rendered inline styles has anything to remove.
+	// Requesting a frame otherwise makes the browser attach layout to the
+	// mounted tree before the app's next update, which slows a teardown that
+	// would have preceded the first paint.
+	if (document.querySelector('style[data-ripple-ssr]') !== null) {
+		requestAnimationFrame(remove_styles);
+	}
 
-	const props = normalize_props(options.props);
+	let props = options.props ?? {};
+	if (props.children != null) {
+		props = normalize_props(props);
+	}
 	const target = options.target;
-	const anchor = create_anchor();
 
 	// Clear target content in case of SSR
 	if (target.firstChild) {
 		target.textContent = '';
 	}
 
-	target.append(anchor);
+	// The app appends into the emptied target; a root that keeps inserting
+	// relative to its anchor materializes one (see `resolve_anchor`).
+	/** @type {AppendIntoAnchor} */
+	const anchor = { parent: target, into: true };
 
-	const cleanup_events = handle_root_events(target);
+	/** @type {import('./internal/client/events.js').RootTargetRef | null} */
+	let events_ref = handle_root_events(target);
+
+	const root_boundary = options.rootBoundary;
 
 	const _root = root(() => {
+		if (root_boundary === false) {
+			render_component(component, anchor, props);
+			return;
+		}
 		render_root_boundary(
 			anchor,
 			(component_anchor) => {
 				render_component(component, component_anchor, props);
 			},
-			options.rootBoundary,
+			root_boundary,
 		);
 	});
 
 	return () => {
-		cleanup_events();
+		// The disposer may be called again (a remount, HMR, a stale reference);
+		// only the first call owns the target's delegated-listener ref.
+		if (events_ref === null) return;
+		release_root_events(events_ref);
+		events_ref = null;
 		destroy_block(_root);
 	};
 }
 
 /**
+ * `rootBoundary` works as in {@link mount}: the app hydrates under a default
+ * `try` boundary, or with `false` directly under the root block. Server output
+ * always carries the root boundary markers; without a boundary, `hydrate()`
+ * steps over a plain `<!--[-->` itself. A streamed shell whose root suspended
+ * starts with a `<!--[?N-->` / `<!--[!N-->` slot instead, and only a boundary
+ * can adopt its fallback and activate the chunk, so that shell hydrates under
+ * the default boundary regardless.
  * @param {Function} component
- * @param {{ props?: Record<string, any>, target: HTMLElement, rootBoundary?: RootBoundaryOptions }} options
+ * @param {{ props?: Record<string, any>, target: HTMLElement, rootBoundary?: RootBoundaryOptions | false }} options
  * @returns {() => void}
  */
 export function hydrate(component, options) {
 	init_operations();
-	remove_ssr_css();
+	requestAnimationFrame(remove_styles);
 
-	const props = normalize_props(options.props);
+	let props = options.props ?? {};
+	if (props.children != null) {
+		props = normalize_props(props);
+	}
 	const target = options.target;
 	const was_hydrating = hydrating;
 	const previous_hydrate_node = hydrate_node;
-	let anchor = get_first_child(target);
+	let anchor = target.firstChild;
 
-	const cleanup_events = handle_root_events(target);
+	/** @type {import('./internal/client/events.js').RootTargetRef | null} */
+	let events_ref = handle_root_events(target);
 	let _root;
 
 	try {
@@ -139,33 +169,43 @@ export function hydrate(component, options) {
 				// marker instead of a plain `<!--[-->`
 				!(/** @type {Comment} */ (anchor).data.startsWith(HYDRATION_START)))
 		) {
-			anchor = get_next_sibling(anchor);
+			anchor = anchor.nextSibling;
 		}
 
-		set_hydrating(true);
-		set_hydrate_node(/** @type {Comment} */ (anchor));
+		set_hydration(true, /** @type {Comment} */ (anchor));
+
+		const root_boundary = options.rootBoundary;
+		const marker = /** @type {Comment} */ (anchor);
 
 		_root = root(() => {
+			if (root_boundary === false && marker.data === HYDRATION_START) {
+				// The root boundary's own hydration walk: consume the `<!--[-->`
+				// marker and render against it, as `try_block` does for the root.
+				hydrate_next();
+				render_component(component, marker, props);
+				return;
+			}
 			render_root_boundary(
-				/** @type {Comment} */ (anchor),
+				marker,
 				(component_anchor) => {
 					render_component(component, component_anchor, props);
 				},
-				options.rootBoundary,
+				root_boundary === false ? undefined : root_boundary,
 			);
 		});
 	} catch (e) {
 		throw e;
 	} finally {
-		set_hydrating(was_hydrating);
-		set_hydrate_node(previous_hydrate_node, true);
+		set_hydration(was_hydrating, previous_hydrate_node);
 		if (!was_hydrating) {
-			clear_track_hash_reference();
+			track_hash_reference.clear();
 		}
 	}
 
 	return () => {
-		cleanup_events();
+		if (events_ref === null) return;
+		release_root_events(events_ref);
+		events_ref = null;
 		destroy_block(_root);
 	};
 }