ripple 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -1,5 +1,167 @@
 # ripple
 
+## 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
+
+- [#1478](https://github.com/Ripple-TS/ripple/pull/1478)
+  [`1032539`](https://github.com/Ripple-TS/ripple/commit/10325392e4b1ec7fba78b8ddaf57bc5376adaab1)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Faster buffered server
+  rendering. Static text and attribute values are emitted with characters above
+  U+00FF as numeric character references (raw-text elements such as `<script>`
+  excluded), so a server response stays a one-byte string whenever its dynamic
+  data is Latin-1 too: a single static em dash no longer widens the whole body to
+  two bytes per character, which halved the flatten, byte-length and UTF-8 encode
+  cost of a page. The runtime text escaper checks for `&` and `<` with two
+  single-character searches instead of a regex test.
+
+- [#1481](https://github.com/Ripple-TS/ripple/pull/1481)
+  [`e9382ed`](https://github.com/Ripple-TS/ripple/commit/e9382ed7538779aeb8671b8e3f3fdfd3a897b85a)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Cheaper text-only elements
+  and typed loop items. An element whose only child is a typed text expression
+  (`<td>{row.name}</td>`) is cloned without a placeholder text node and written
+  through the element (`set_text_content`): the first write creates the text node
+  with `textContent`, later writes update it in place, and hydration adopts the
+  server-rendered text with no cursor descent, which removes a DOM read and a text
+  node per cell from every list row. A keyed `@for` key callback reads the item
+  directly instead of unwrapping it. Type inference now follows a binding's
+  declared type through property writes (`items.value = next` no longer hides
+  `track<Row[]>()` from the loop item) and through array and tuple indexing
+  (`row.queries[0].elapsed`), so those reads lower to direct text updates in one
+  render block per row.
+
+- [#1483](https://github.com/Ripple-TS/ripple/pull/1483)
+  [`5de359e`](https://github.com/Ripple-TS/ripple/commit/5de359e430391b0e1609795b42d26161fd5c2ff9)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - perf: a list item without a
+  tracked of its own (a plain list's item, or a local keyed item) is created
+  through a lean first run (`run_branch`) instead of the generic block runner:
+  fewer checks and no re-run bookkeeping per item.
+
+- [#1482](https://github.com/Ripple-TS/ripple/pull/1482)
+  [`0030be0`](https://github.com/Ripple-TS/ripple/commit/0030be0aa3c7f1d2ce40500dc57ea980b69c69ec)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - perf: cheaper keyed lists. A
+  `@for` or `@if` that trails template siblings appends into its parent element
+  instead of inserting before a `<!>` placeholder. A list item whose updates live
+  in one render block carries that block on the item block itself (`_$_.item`),
+  and a keyed item that only its render block reads is held as it is instead of in
+  a tracked, re-running its block directly when the key's item is replaced. Leaf
+  text is written without a DOM read, from the value the render block last wrote.
+  A keyed diff that re-lays most of its items walks the range front to back
+  instead of appending every item at the end, about half the reorder cost in
+  Chromium and far less right after a layout flush.
+- Updated dependencies
+  [[`1032539`](https://github.com/Ripple-TS/ripple/commit/10325392e4b1ec7fba78b8ddaf57bc5376adaab1),
+  [`e9382ed`](https://github.com/Ripple-TS/ripple/commit/e9382ed7538779aeb8671b8e3f3fdfd3a897b85a),
+  [`0030be0`](https://github.com/Ripple-TS/ripple/commit/0030be0aa3c7f1d2ce40500dc57ea980b69c69ec)]:
+  - @tsrx/ripple@0.2.1
+
 ## 0.4.1
 
 ### 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.1",
+  "version": "0.4.3",
   "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.0"
+    "@tsrx/ripple": "0.2.2"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/constants.js

@@ -6,6 +6,10 @@ export const IS_INDEXED = 1 << 3;
 // `__anchor` (sibling semantics, no `<!>` wrapper). Distinct from IS_CONTROLLED,
 // which renders inside a parent element.
 export const ROOT_CONTROLLED = 1 << 4;
+// A keyed @for whose item is read only by the render block its item block
+// carries: items are held as they are, not in a tracked, and a replaced item
+// re-runs its block directly (see the runtime's `item`).
+export const LOCAL_ITEMS = 1 << 7;
 export const TEMPLATE_SVG_NAMESPACE = 1 << 5;
 export const TEMPLATE_MATHML_NAMESPACE = 1 << 6;
 

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,