ripple 0.4.2 → 0.4.4

package/CHANGELOG.md

@@ -1,5 +1,169 @@
 # ripple
 
+## 0.4.4
+
+### Patch Changes
+
+- [#1496](https://github.com/Ripple-TS/ripple/pull/1496)
+  [`0473e93`](https://github.com/Ripple-TS/ripple/commit/0473e93006e53cd15fcf6d851443d427ccf13e8b)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Update `@tsrx/core` to ^0.2.3
+  and use its SVG and MathML tag-name predicates for dynamic class handling,
+  removing the compiler's duplicate tag-name list.
+
+- [#1490](https://github.com/Ripple-TS/ripple/pull/1490)
+  [`ff3a26a`](https://github.com/Ripple-TS/ripple/commit/ff3a26acef0c9584cf41d32bc8cbcc39d863d74c)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Blocks keep the namespace
+  they were created in when they rerun. A dynamic element whose tag changes, an
+  `@if` that toggles, or an `@for` that grows inside an SVG that is only known at
+  runtime (children rendered into a component's `<svg>`, a leaf component rendered
+  there) now creates its elements in the SVG namespace instead of HTML, and a
+  nested template cloned in that context no longer throws before a namespaced
+  template has been parsed. A dynamic element whose tag becomes `foreignObject`
+  renders its children as HTML.
+
+- [#1488](https://github.com/Ripple-TS/ripple/pull/1488)
+  [`b3bf787`](https://github.com/Ripple-TS/ripple/commit/b3bf78756d9235412a2af264e42897652e8f911e)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Build a template that is one
+  element with static attributes and at most a text child with DOM calls instead
+  of parsing it. Parsing a `<template>` has a fixed cost that dwarfs such an
+  element, and an app's first render pays it once per distinct template; a chain
+  of 100 single-element components mounts about 35% faster.
+
+- [#1495](https://github.com/Ripple-TS/ripple/pull/1495)
+  [`1b8381f`](https://github.com/Ripple-TS/ripple/commit/1b8381f31f98f84049764ca56676fc320721e844)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Faster element spreads,
+  dynamic elements and list items. An element spread is applied from the element's
+  own render function instead of a render block of its own, and a spread object
+  identical to the one applied last is skipped without a diff (a spread of a
+  tracked object or of tracked values is always diffed). A dynamic element
+  (`<{tag}>`) is one block that owns its element and applies its attributes
+  itself; a tag that does not change keeps its element and diffs the attributes,
+  so a swap between variants with the same tag no longer recreates the element. An
+  `@if` whose condition reads tracked state is evaluated by the render function of
+  the enclosing content (a list item's, an element's), so the if keeps a block for
+  its branch but not one that runs the condition. A dynamic element or component
+  called inside an `<svg>` or `<math>` template receives the namespace as an
+  argument instead of a `with_ns` closure. A dynamic element without children is
+  driven by the render function of the content it sits in, with no block or
+  closures of its own (`_$_.dynamic`); a build that can hydrate lets a composite
+  block claim the server element while hydrating. With `textTypes`, an attribute
+  value TypeScript proves to be a string is set with a direct `setAttribute` call,
+  and a proven `class` takes the string-only path. On the SVG dashboard benchmark,
+  mounting is about 20% faster and swapping 150 dynamic icons 40% faster.
+- Updated dependencies
+  [[`0473e93`](https://github.com/Ripple-TS/ripple/commit/0473e93006e53cd15fcf6d851443d427ccf13e8b),
+  [`b3bf787`](https://github.com/Ripple-TS/ripple/commit/b3bf78756d9235412a2af264e42897652e8f911e),
+  [`1b8381f`](https://github.com/Ripple-TS/ripple/commit/1b8381f31f98f84049764ca56676fc320721e844),
+  [`ff3a26a`](https://github.com/Ripple-TS/ripple/commit/ff3a26acef0c9584cf41d32bc8cbcc39d863d74c)]:
+  - @tsrx/ripple@0.2.3
+
+## 0.4.3
+
+### Patch Changes
+
+- [#1486](https://github.com/Ripple-TS/ripple/pull/1486)
+  [`304ba6c`](https://github.com/Ripple-TS/ripple/commit/304ba6c2d9098752396fff6c2545e3ef2546381c)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - perf: a static component,
+  template `@if`, or template `@for` followed by a static element sibling inserts
+  before that element instead of before a `<!>` placeholder of its own: the
+  element is part of the template and never moves, so the compiled template holds
+  no comment node for it and the client reuses the element's variable where
+  hydration steps to the sibling. The `RippleArray` statics (`from`, `of`,
+  `fromAsync`) lower to standalone runtime functions, so a bundle that never
+  constructs a `RippleArray` drops the array proxy instead of keeping it through
+  property assignments on the constructor's compiled form (the server's
+  `fromAsync` lowering previously named a function that did not exist).
+
+- [#1487](https://github.com/Ripple-TS/ripple/pull/1487)
+  [`b4abea0`](https://github.com/Ripple-TS/ripple/commit/b4abea0ab4830eed99adf14dc95a0ef214b24af1)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - perf: smaller production
+  bundles without a runtime cost. The compiler lowers a static `onBlur`-style
+  handler (an event its name keeps off delegation) to a direct `listen` call with
+  the DOM name and phase resolved at compile time, packs the locals a hoisted
+  `@if`/`@switch` captures under positional keys, writes template strings without
+  attribute quotes or implied end tags where the parser reads them back the same,
+  gives a plain function no `_$_.scope()` call when its body never reads the
+  block, and omits `set_class`'s default trailing arguments. The runtime keeps its
+  hydration paths (template adoption, expression text, append cursor, streamed
+  boundaries) in a module `hydrate()` installs and its `trackAsync` machinery in a
+  module that registers with the runtime on first use, and the catch routing is
+  registered by the first boundary, so a client-only mount without `trackAsync`
+  ships neither and the core runtime no longer imports the boundary module; the
+  try boundary state, the root event ref and the template cache use short keys,
+  the keyed and reference list diffs share one patch helper, and symbol constants
+  carry no descriptions. The runtime's errors are thrown as in Svelte: the message
+  and a link to `https://ripple-ts.com/e/<code>` in development, the link alone in
+  production, so the message text stays out of production bundles; `set_class`
+  composes non-string values with its own clsx-style joiner instead of importing
+  `clsx`; hoisted render blocks store captured locals under positional keys; a
+  `template()` with no flags passes none; and the hash a `track()` call carries
+  encodes the same 32 bits in base 36. The Vite plugin leaves Vite's modulepreload
+  polyfill out of production builds unless `build.modulePreload` is configured.
+
+- [#1487](https://github.com/Ripple-TS/ripple/pull/1487)
+  [`b4abea0`](https://github.com/Ripple-TS/ripple/commit/b4abea0ab4830eed99adf14dc95a0ef214b24af1)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - feat: build shapes.
+  `ripple({ ssr: false })` builds a client-only app: components compile without
+  the hydration cursor or `track()` serialization hashes (`hydration: false` on
+  the compiler), the runtime's hydration paths are compiled out through its
+  `HYDRATION` build constant, and `hydrate()` throws; `ssr: true` compiles every
+  module for the server. `prerender()` on `ripple/server` renders a component to
+  static HTML with every boundary settled and the CSS as text, and a `RenderRoute`
+  marked `prerender: true` is rendered through the built server entry at build
+  time into `<outDir>/client<path>/index.html`, which the node and bun adapters
+  now serve for a directory request before the server renders. The client build's
+  `index.html` template moves to the server output so a static handler never
+  serves its placeholders.
+
+- [#1487](https://github.com/Ripple-TS/ripple/pull/1487)
+  [`b4abea0`](https://github.com/Ripple-TS/ripple/commit/b4abea0ab4830eed99adf14dc95a0ef214b24af1)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - perf: a `class` expression
+  the compiler can prove to be a string writes through a string-only `set_class`,
+  so the clsx-style joiner ships only with a bundle that composes classes from
+  arrays or objects; templates in the SVG or MathML namespace parse through a
+  `template_ns` entry that an HTML-only bundle never loads; and the class joiner
+  is one module shared by the client and server renderers, so `ripple` no longer
+  depends on `clsx`. `ripple({ rootBoundary: false })` builds an app that renders
+  without the default root try/pending/catch boundary and leaves the boundary
+  runtime out of the bundle; a `rootBoundary` option on `mount()` or `hydrate()`
+  then throws. The `ripple` package declares `sideEffects: false`, and dynamic
+  attribute, style and spread helpers live in their own runtime module, so a
+  bundle that never sets an attribute dynamically drops them along with the
+  attribute tables they consult. The plugin's `ssr: false` and
+  `rootBoundary: false` rewrite the runtime's build-constant imports to literals
+  at transform time, which every bundler folds while tree-shaking.
+
+- [#1484](https://github.com/Ripple-TS/ripple/pull/1484)
+  [`1ea71f1`](https://github.com/Ripple-TS/ripple/commit/1ea71f14fcee5a976ea81e2bedf5010251eaa70c)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - perf: a template `@if` that
+  closes the trailing run of an element's children (nothing rendered follows it)
+  never materializes an anchor node: the element's tail is its position for its
+  whole life. An `@if (outer === item.key)` in a `@for` body lowers to the loop's
+  selector like an attribute comparison, and a comparison against the item's key
+  reads the block's key (fixed for its life) rather than the item, so a change of
+  the outer value re-runs the ifs of its previous and next key alone and a
+  replaced item leaves its ifs untouched; comparisons against the same outer value
+  share one selector per loop. Event delegation reads the composed path only for a
+  nested root and looks the handler property up by one string, and `checked` is
+  compared against the element instead of a cached write.
+
+- [#1487](https://github.com/Ripple-TS/ripple/pull/1487)
+  [`b4abea0`](https://github.com/Ripple-TS/ripple/commit/b4abea0ab4830eed99adf14dc95a0ef214b24af1)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - `trackReadOnly(value)`
+  replaces the `readOnly()` method on tracked and derived values: it returns a
+  derived that follows a tracked or writable derived, or a read-only derived as it
+  is. The method is removed, so `count.readOnly()` becomes `trackReadOnly(count)`,
+  imported from `ripple`. Dropping the prototype methods lets a bundle that never
+  takes a read-only view leave the code out.
+- Updated dependencies
+  [[`304ba6c`](https://github.com/Ripple-TS/ripple/commit/304ba6c2d9098752396fff6c2545e3ef2546381c),
+  [`b4abea0`](https://github.com/Ripple-TS/ripple/commit/b4abea0ab4830eed99adf14dc95a0ef214b24af1),
+  [`b4abea0`](https://github.com/Ripple-TS/ripple/commit/b4abea0ab4830eed99adf14dc95a0ef214b24af1),
+  [`b4abea0`](https://github.com/Ripple-TS/ripple/commit/b4abea0ab4830eed99adf14dc95a0ef214b24af1),
+  [`1ea71f1`](https://github.com/Ripple-TS/ripple/commit/1ea71f14fcee5a976ea81e2bedf5010251eaa70c),
+  [`b4abea0`](https://github.com/Ripple-TS/ripple/commit/b4abea0ab4830eed99adf14dc95a0ef214b24af1)]:
+  - @tsrx/ripple@0.2.2
+
 ## 0.4.2
 
 ### Patch Changes

package/package.json

@@ -3,8 +3,9 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "type": "module",
+  "sideEffects": false,
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
   "repository": {
@@ -54,6 +55,12 @@
     "./internal/client": {
       "default": "./src/runtime/internal/client/index.js"
     },
+    "./internal/client/hydration-enabled": {
+      "default": "./src/runtime/internal/client/hydration-enabled.js"
+    },
+    "./internal/client/root-boundary-enabled": {
+      "default": "./src/runtime/internal/client/root-boundary-enabled.js"
+    },
     "./internal/client-types": {
       "types": "./src/runtime/internal/client/types.d.ts"
     },
@@ -76,12 +83,11 @@
     "#public": "./types/index.d.ts"
   },
   "dependencies": {
-    "clsx": "^2.1.1",
     "csstype": "^3.2.3",
     "devalue": "^5.9.2",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "^0.2.0",
-    "@tsrx/ripple": "0.2.1"
+    "@tsrx/core": "^0.2.3",
+    "@tsrx/ripple": "0.2.3"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/constants.js

@@ -38,3 +38,9 @@ export const ELEMENT_NODE = 1;
 export const TEXT_NODE = 3;
 export const COMMENT_NODE = 8;
 export const DOCUMENT_FRAGMENT_NODE = 11;
+
+// `if_static` flags (see the runtime's if module): the if renders directly
+// before the component's `__anchor`, and the compiler proved its condition
+// reads tracked state.
+export const IF_ROOT_CONTROLLED = 1;
+export const IF_TRACKED = 1 << 1;

package/src/jsx-runtime.d.ts

@@ -55,7 +55,8 @@ 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;
+	type ClassValue =
+		string | number | boolean | null | undefined | ClassValue[] | { [key: string]: unknown };
 
 	/** Inline CSS styles. Values keep their units; null and undefined remove a property. */
 	interface CSSProperties

package/src/runtime/array.js

@@ -24,7 +24,7 @@ export class RippleArray {
 	 * @returns {RippleArray<U>}
 	 */
 	static from(arrayLike, mapFn, thisArg) {
-		return ripple_array.from(safe_scope(), arrayLike, mapFn, thisArg);
+		return ripple_array_from(safe_scope(), arrayLike, mapFn, thisArg);
 	}
 
 	/**
@@ -33,7 +33,7 @@ export class RippleArray {
 	 * @returns {RippleArray<U>}
 	 */
 	static of(...items) {
-		return ripple_array.of(safe_scope(), ...items);
+		return ripple_array_of(safe_scope(), ...items);
 	}
 
 	/**
@@ -44,11 +44,14 @@ export class RippleArray {
 	 * @returns {Promise<RippleArray<U>>}
 	 */
 	static async fromAsync(arrayLike, mapFn, thisArg) {
-		return ripple_array.fromAsync(safe_scope(), arrayLike, mapFn, thisArg);
+		return ripple_array_from_async(safe_scope(), arrayLike, mapFn, thisArg);
 	}
 }
 
 /**
+ * The compiled form of `new RippleArray(...)`. Each static below is its own
+ * function so a bundle that never uses one drops it (and the proxy it would
+ * create) instead of keeping a function that carries them all.
  * @template T
  * @param {Block} block
  * @param {...T} elements
@@ -59,6 +62,7 @@ export function ripple_array(block, ...elements) {
 }
 
 /**
+ * `RippleArray.from(...)`
  * @template T
  * @param {Block} block
  * @param {ArrayLike<T> | Iterable<T>} arrayLike
@@ -66,23 +70,25 @@ export function ripple_array(block, ...elements) {
  * @param {*} [thisArg]
  * @returns {RippleArray<T>}
  */
-ripple_array.from = function (block, arrayLike, mapFn, thisArg) {
+export function ripple_array_from(block, arrayLike, mapFn, thisArg) {
 	var elements = mapFn ? Array.from(arrayLike, mapFn, thisArg) : Array.from(arrayLike);
 	return array_proxy({ elements, block, from_static: true });
-};
+}
 
 /**
+ * `RippleArray.of(...)`
  * @template T
  * @param {Block} block
  * @param {...T} items
  * @returns {RippleArray<T>}
  */
-ripple_array.of = function (block, ...items) {
+export function ripple_array_of(block, ...items) {
 	var elements = Array.of(...items);
 	return array_proxy({ elements, block, from_static: true });
-};
+}
 
 /**
+ * `RippleArray.fromAsync(...)`
  * @template T
  * @param {Block} block
  * @param {ArrayLike<T> | Iterable<T>} arrayLike
@@ -90,9 +96,9 @@ ripple_array.of = function (block, ...items) {
  * @param {any} [thisArg]
  * @returns {Promise<RippleArray<T>>}
  */
-ripple_array.fromAsync = async function (block, arrayLike, mapFn, thisArg) {
+export async function ripple_array_from_async(block, arrayLike, mapFn, thisArg) {
 	var elements = mapFn
 		? await Array.fromAsync(arrayLike, mapFn, thisArg)
 		: await Array.fromAsync(arrayLike);
 	return array_proxy({ elements, block, from_static: true });
-};
+}

package/src/runtime/index-client.js

@@ -6,6 +6,9 @@ import { init_operations } from './internal/client/operations.js';
 import { render_component } from './internal/client/component.js';
 import { try_block } from './internal/client/try.js';
 import { remove_styles } from './internal/client/css.js';
+import { install_hydration } from './internal/client/hydrate.js';
+import { hydration_disabled, root_boundary_disabled } from './internal/client/errors.js';
+import { ROOT_BOUNDARY } from 'ripple/internal/client/root-boundary-enabled';
 import { normalize_children } from './element.js';
 import {
 	hydrate_next,
@@ -82,8 +85,10 @@ export function mount(component, options) {
 	// 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);
+	if (HYDRATION) {
+		if (document.querySelector('style[data-ripple-ssr]') !== null) {
+			requestAnimationFrame(remove_styles);
+		}
 	}
 
 	let props = options.props ?? {};
@@ -100,15 +105,18 @@ export function mount(component, options) {
 	// 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 anchor = { parent: target, into: true, tail: false };
 
 	/** @type {import('./internal/client/events.js').RootTargetRef | null} */
 	let events_ref = handle_root_events(target);
 
 	const root_boundary = options.rootBoundary;
+	if (!ROOT_BOUNDARY && root_boundary != null && root_boundary !== false) {
+		root_boundary_disabled();
+	}
 
 	const _root = root(() => {
-		if (root_boundary === false) {
+		if (!ROOT_BOUNDARY || root_boundary === false) {
 			render_component(component, anchor, props);
 			return;
 		}
@@ -144,7 +152,11 @@ export function mount(component, options) {
  * @returns {() => void}
  */
 export function hydrate(component, options) {
+	if (!HYDRATION) {
+		hydration_disabled();
+	}
 	init_operations();
+	install_hydration();
 	requestAnimationFrame(remove_styles);
 
 	let props = options.props ?? {};
@@ -152,7 +164,7 @@ export function hydrate(component, options) {
 		props = normalize_props(props);
 	}
 	const target = options.target;
-	const was_hydrating = hydrating;
+	const was_hydrating = HYDRATION && hydrating;
 	const previous_hydrate_node = hydrate_node;
 	let anchor = target.firstChild;
 
@@ -176,9 +188,12 @@ export function hydrate(component, options) {
 
 		const root_boundary = options.rootBoundary;
 		const marker = /** @type {Comment} */ (anchor);
+		if (!ROOT_BOUNDARY && root_boundary != null && root_boundary !== false) {
+			root_boundary_disabled();
+		}
 
 		_root = root(() => {
-			if (root_boundary === false && marker.data === HYDRATION_START) {
+			if ((!ROOT_BOUNDARY || 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();
@@ -215,13 +230,15 @@ export { Context } from './internal/client/context.js';
 export {
 	flush_sync as flushSync,
 	track,
-	track_async as trackAsync,
+	track_read_only as trackReadOnly,
 	untrack,
 	tick,
 	is_tracked_pending as trackPending,
 	peek_tracked as peek,
 } from './internal/client/runtime.js';
 
+export { track_async as trackAsync } from './internal/client/track-async.js';
+
 export { snapshot } from './proxy.js';
 
 export { RippleArray } from './array.js';
@@ -271,3 +288,4 @@ export {
 	bindOffsetWidth,
 	bindOffsetHeight,
 } from './internal/client/bindings.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';

package/src/runtime/index-server.js

@@ -6,6 +6,7 @@ export { Context } from './internal/server/context.js';
 export {
 	untrack,
 	track,
+	track_read_only as trackReadOnly,
 	track_async as trackAsync,
 	is_tracked_pending as trackPending,
 	peek_tracked as peek,