ripple 0.4.2 → 0.4.3

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 # 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

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.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.1"
+    "@tsrx/ripple": "0.2.2"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

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,

package/src/runtime/internal/client/attributes.js

@@ -0,0 +1,313 @@
+/** @import { Block } from '#client' */
+
+import { block, branch, destroy_block, ref } from './blocks.js';
+import { DESTROYED, REF_PROP, RENDER_BLOCK } from './constants.js';
+import { isRefProp as is_ref_prop } from '@tsrx/core/runtime/ref';
+import { is_ripple_object } from './utils.js';
+import {
+	get_descriptors,
+	get_own_property_symbols,
+	get_prototype_of,
+} from '@tsrx/core/runtime/language-helpers';
+import { event_listener } from './events.js';
+import { get_attribute_event_name, is_event_attribute } from '@tsrx/core/runtime/events';
+import { get } from './runtime.js';
+import { normalize_css_property_name } from '@tsrx/core/runtime/html';
+import { set_class_value } from './render.js';
+
+/**
+ * Dynamic attributes, styles and spreads. Apart from `render.js`, so that an
+ * app whose attributes are all static or class/text/value writes never loads
+ * the attribute tables these helpers consult.
+ */
+
+/** @type {Map<string, string[]>} */
+var setters_cache = new Map();
+
+/**
+ * @param {Element} element
+ * @returns {string[]}
+ */
+function get_setters(element) {
+	var setters = setters_cache.get(element.nodeName);
+	if (setters) return setters;
+	setters_cache.set(element.nodeName, (setters = []));
+
+	var descriptors;
+	var proto = element; // In the case of custom elements there might be setters on the instance
+	var element_proto = Element.prototype;
+
+	// Stop at Element, from there on there's only unnecessary setters we're not interested in
+	// Do not use constructor.name here as that's unreliable in some browser environments
+	while (element_proto !== proto) {
+		descriptors = get_descriptors(proto);
+
+		for (var key in descriptors) {
+			if (descriptors[key].set) {
+				setters.push(key);
+			}
+		}
+
+		proto = get_prototype_of(proto);
+	}
+
+	return setters;
+}
+
+/**
+ * @param {Element} element
+ * @param {any} value
+ * @param {Record<string, string | number | null | undefined> | undefined} prev
+ * @returns {void}
+ */
+export function set_style(element, value, prev = {}) {
+	if (value == null) {
+		element.removeAttribute('style');
+	} else if (typeof value !== 'string') {
+		apply_styles(/** @type {HTMLElement} */ (element), value, prev);
+	} else {
+		// @ts-ignore
+		element.style.cssText = value;
+	}
+}
+
+/**
+ * @param {Element} element
+ * @param {string} attribute
+ * @param {any} value
+ * @returns {void}
+ */
+export function set_attribute(element, attribute, value) {
+	if (value == null) {
+		element.removeAttribute(attribute);
+	} else if (typeof value !== 'string' && get_setters(element).includes(attribute)) {
+		/** @type {any} */ (element)[attribute] = value;
+	} else {
+		element.setAttribute(attribute, value);
+	}
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {Record<string, string | number | null | undefined>} new_styles
+ * @param {Record<string, string | number | null | undefined>} prev
+ */
+function apply_styles(element, new_styles, prev) {
+	const style = element.style;
+
+	// Apply new styles
+	for (const key in new_styles) {
+		const css_prop = normalize_css_property_name(key);
+		const raw_value = new_styles[key];
+		const value = raw_value == null ? null : String(raw_value);
+
+		if (!(key in prev) || prev[key] !== value) {
+			style.setProperty(css_prop, value);
+		}
+	}
+
+	// Remove properties that were in prev but not in new_styles
+	for (const key in prev) {
+		if (!(key in new_styles)) {
+			const css_prop = normalize_css_property_name(key);
+			style.removeProperty(css_prop);
+		}
+	}
+}
+
+/**
+ * Helper function to set a single attribute
+ * @param {Element} element
+ * @param {string} key
+ * @param {any} value
+ * @param {Record<string, (() => void) | undefined>} remove_listeners
+ * @param {Record<string | symbol, any>} prev
+ */
+function set_attribute_helper(element, key, value, remove_listeners, prev) {
+	if (key === 'class') {
+		const is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
+		set_class_value(/** @type {HTMLElement} */ (element), value, undefined, is_html);
+	} else if (key === 'innerHTML') {
+		element.removeAttribute('innerhtml');
+		/** @type {HTMLElement} */ (element).innerHTML = value == null ? '' : String(value);
+	} else if (key === 'style') {
+		set_style(element, value, prev.style);
+	} else if (key === '#class') {
+		// Special case for the scope classes of an element that spreads props:
+		// one token per scope hash and applied theme.
+		element.classList.add(...String(value).split(' ').filter(Boolean));
+	} else if (typeof key === 'string' && is_event_attribute(key)) {
+		// Handle event handlers in spread props
+		if (remove_listeners[key]) {
+			remove_listeners[key]();
+			remove_listeners[key] = undefined;
+		}
+		if (value != null) {
+			const event_name = get_attribute_event_name(key, value);
+			remove_listeners[key] = event_listener(event_name, element, value);
+		}
+	} else {
+		set_attribute(element, key, value);
+	}
+}
+
+/**
+ * @param {Element} element
+ * @param {() => Record<string | symbol, any>} fn
+ * @returns {() => void}
+ */
+export function apply_element_spread(element, fn) {
+	/** @type {Record<string | symbol, any>} */
+	var prev = {};
+	/** @type {Record<string | symbol, Block | undefined>} */
+	var effects = {};
+	/** @type {Record<string | symbol, (() => void) | undefined>} */
+	var remove_listeners = {};
+
+	/** @type {Record<symbol, any>} */
+	var prev_symbols = {};
+	/** @type {Record<string, any>} */
+	var prev_ref_props = {};
+
+	return () => {
+		var next = fn();
+		var current_symbols = /** @type {Record<symbol, any>} */ ({});
+
+		for (const symbol of get_own_property_symbols(next)) {
+			if (symbol.description !== REF_PROP) {
+				continue;
+			}
+			const ref_fn = next[symbol];
+			current_symbols[symbol] = ref_fn;
+
+			if (
+				!(symbol in prev_symbols) ||
+				ref_fn !== prev_symbols[symbol] ||
+				(effects[symbol] && (effects[symbol].f & DESTROYED) !== 0)
+			) {
+				if (effects[symbol] && (effects[symbol].f & DESTROYED) === 0) {
+					destroy_block(effects[symbol]);
+				}
+				effects[symbol] = create_spread_ref_effect(element, ref_fn);
+			}
+		}
+
+		for (const symbol of get_own_property_symbols(prev_symbols)) {
+			if (!(symbol in current_symbols) && effects[symbol]) {
+				destroy_block(/** @type {Block} */ (effects[symbol]));
+				effects[symbol] = undefined;
+			}
+		}
+
+		prev_symbols = current_symbols;
+
+		/** @type {Record<string, any>} */
+		var current_ref_props = {};
+		var keys = spread_keys(next);
+
+		for (const key of keys) {
+			const ref_fn = next[key];
+			if (!is_ref_prop(ref_fn)) {
+				continue;
+			}
+
+			current_ref_props[key] = ref_fn;
+
+			if (
+				!(key in prev_ref_props) ||
+				ref_fn !== prev_ref_props[key] ||
+				(effects[key] && (effects[key].f & DESTROYED) !== 0)
+			) {
+				if (effects[key] && (effects[key].f & DESTROYED) === 0) {
+					destroy_block(effects[key]);
+				}
+				effects[key] = create_spread_ref_effect(element, ref_fn);
+			}
+		}
+
+		for (const key in prev_ref_props) {
+			if (!(key in current_ref_props) && effects[key]) {
+				destroy_block(/** @type {Block} */ (effects[key]));
+				effects[key] = undefined;
+			}
+		}
+
+		prev_ref_props = current_ref_props;
+
+		for (let key in remove_listeners) {
+			// Remove event listeners that are no longer present
+			if ((!keys.includes(key) || is_ref_prop(next[key])) && remove_listeners[key]) {
+				remove_listeners[key]();
+				remove_listeners[key] = undefined;
+			}
+		}
+
+		for (const key in prev) {
+			if (!keys.includes(key) || is_ref_prop(next[key])) {
+				if (key === '#class') {
+					continue;
+				}
+				set_attribute_helper(element, key, null, remove_listeners, prev);
+			}
+		}
+
+		/** @type {typeof prev} */
+		const current = {};
+		for (const key of keys) {
+			if (key === 'children') continue;
+
+			let value = next[key];
+			if (is_ref_prop(value)) {
+				continue;
+			}
+			if (is_ripple_object(value)) {
+				value = get(value);
+			}
+			current[key] = value;
+
+			if (key in prev && prev[key] === value && key !== '#class') {
+				continue;
+			}
+
+			set_attribute_helper(element, key, value, remove_listeners, prev);
+		}
+		prev = current;
+	};
+}
+
+/**
+ * The keys an element spread applies: every prop of a props instance, or the
+ * enumerable keys of a plain object.
+ * @param {Record<string | symbol, any>} next
+ * @returns {string[]}
+ */
+function spread_keys(next) {
+	/** @type {string[]} */
+	var keys = [];
+	for (var key in next) keys.push(key);
+	return keys;
+}
+
+/**
+ * Keep spread refs in a branch block so ordinary spread updates do not destroy
+ * and recreate the ref block before `apply_element_spread` can compare the
+ * previous and current ref values.
+ *
+ * @param {Element} element
+ * @param {any} ref_fn
+ * @returns {Block}
+ */
+function create_spread_ref_effect(element, ref_fn) {
+	return branch(() => {
+		ref(element, () => ref_fn);
+	});
+}
+/**
+ * A render block that applies a spread of attributes to an element.
+ * @param {any} element
+ * @param {any} fn
+ * @param {number} [flags]
+ */
+export function render_spread(element, fn, flags = 0) {
+	return block(RENDER_BLOCK | flags, apply_element_spread(element, fn));
+}