ripple 0.3.72 → 0.3.76

package/CHANGELOG.md

@@ -1,5 +1,121 @@
 # ripple
 
+## 0.3.76
+
+### Patch Changes
+
+- [#1229](https://github.com/Ripple-TS/ripple/pull/1229)
+  [`6fd49c9`](https://github.com/Ripple-TS/ripple/commit/6fd49c9dd737e889844e254763f66e13ea4a7241)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Replace the removed `<@...>`
+  dynamic tag syntax with runtime `Dynamic` helpers. Ripple now exports `Dynamic`
+  and reuses its composite runtime path for dynamic elements/components, while
+  React, Preact, Solid, and Vue expose target-specific `Dynamic` helpers with
+  typed `is` props.
+
+  React, Preact, Solid, and Vue now mark imported runtime `Dynamic` elements
+  during shared JSX analysis so scoped CSS classes are applied through aliases
+  without treating local components named `Dynamic` as runtime elements.
+
+  Dynamic component prop forwarding now uses a shared core runtime helper that
+  excludes the internal `is` prop without snapshotting getter-backed reactive
+  props.
+
+  The TSRX parser, transforms, analyzers, prettier support, and related tests no
+  longer recognize dynamic tag syntax. Stale JSX identifier `tracked` plumbing
+  from that parser path has also been removed.
+
+- Updated dependencies
+  [[`6fd49c9`](https://github.com/Ripple-TS/ripple/commit/6fd49c9dd737e889844e254763f66e13ea4a7241)]:
+  - @tsrx/core@0.1.24
+  - @tsrx/ripple@0.1.24
+
+## 0.3.75
+
+### Patch Changes
+
+- Updated dependencies
+  [[`9eb4819`](https://github.com/Ripple-TS/ripple/commit/9eb4819cede6da7e93cbcd2bdf284bcb42d40464),
+  [`88a254c`](https://github.com/Ripple-TS/ripple/commit/88a254c69953a5ace33bc10047f11052ec598672),
+  [`ba3a7f6`](https://github.com/Ripple-TS/ripple/commit/ba3a7f6485ea163e60cc0750a8e8b06b50728009),
+  [`ac6f358`](https://github.com/Ripple-TS/ripple/commit/ac6f3582ca0b2814004439c882d6aa735c8afe50),
+  [`4c5f992`](https://github.com/Ripple-TS/ripple/commit/4c5f992b9a11e1f26abee476a6add89f959169bc),
+  [`78ffa8d`](https://github.com/Ripple-TS/ripple/commit/78ffa8d90fd01e85bf34e5c6adef0e51caae8da7),
+  [`16560cb`](https://github.com/Ripple-TS/ripple/commit/16560cb466430bdbe8749d9491bc79e69e58d02c),
+  [`186b3b2`](https://github.com/Ripple-TS/ripple/commit/186b3b2557761ff06c9056bf2e0b7ab8c7692477),
+  [`4be6e54`](https://github.com/Ripple-TS/ripple/commit/4be6e54bbfee20927adca473648a94aa173d7d77),
+  [`2b67f83`](https://github.com/Ripple-TS/ripple/commit/2b67f83d7ed7eab7a39bc33524fcf73f737d977e),
+  [`9918c52`](https://github.com/Ripple-TS/ripple/commit/9918c52e954f2b8e1a994892e7c555e8277f2d59),
+  [`e8493be`](https://github.com/Ripple-TS/ripple/commit/e8493be0b3489f402105297251e1919c103c2360),
+  [`c424675`](https://github.com/Ripple-TS/ripple/commit/c424675102a9edd4f1e356fb6db30124a9c2d885)]:
+  - @tsrx/core@0.1.23
+  - @tsrx/ripple@0.1.23
+
+## 0.3.74
+
+### Patch Changes
+
+- [#1199](https://github.com/Ripple-TS/ripple/pull/1199)
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649)
+  Thanks [@trueadm](https://github.com/trueadm)! - Expose Ripple's `RefValue` type
+  from the shared TSRX ref runtime declarations.
+
+- [#1199](https://github.com/Ripple-TS/ripple/pull/1199)
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649)
+  Thanks [@trueadm](https://github.com/trueadm)! - Add `@empty { ... }` fallbacks
+  for TSRX `@for` loops, require prefixed template continuation clauses such as
+  `@else`, `@empty`, `@pending`, `@catch`, `@case`, and `@default`, and reject
+  direct `continue`, `break`, and `return` statements inside `@for` loop bodies
+  and `@if` template branches.
+
+- [#1199](https://github.com/Ripple-TS/ripple/pull/1199)
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649)
+  Thanks [@trueadm](https://github.com/trueadm)! - Allow JSX and shared ref helper
+  types to accept arrays of ref functions.
+
+- Updated dependencies
+  [[`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649),
+  [`5d33325`](https://github.com/Ripple-TS/ripple/commit/5d3332564109d228af5e02c0f68ca4a318766649)]:
+  - @tsrx/ripple@0.1.22
+  - @tsrx/core@0.1.22
+
+## 0.3.73
+
+### Patch Changes
+
+- [#1198](https://github.com/Ripple-TS/ripple/pull/1198)
+  [`1de66b8`](https://github.com/Ripple-TS/ripple/commit/1de66b8f851849597b6078dab7af2699e49b0e21)
+  Thanks [@trueadm](https://github.com/trueadm)! - Remove the unused namespaced
+  TSX island feature and React bridge package.
+
+- Updated dependencies
+  [[`e738e11`](https://github.com/Ripple-TS/ripple/commit/e738e1153694f56f35cfcab8982d897d7199d85a),
+  [`1de66b8`](https://github.com/Ripple-TS/ripple/commit/1de66b8f851849597b6078dab7af2699e49b0e21),
+  [`e00f596`](https://github.com/Ripple-TS/ripple/commit/e00f5961d5668c054435c8a366ef2a6da6e4a381)]:
+  - @tsrx/ripple@0.1.21
+  - @tsrx/core@0.1.21
+
 ## 0.3.72
 
 ### 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.72",
+  "version": "0.3.76",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -74,8 +74,8 @@
     "clsx": "^2.1.1",
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "0.1.20",
-    "@tsrx/ripple": "0.1.20"
+    "@tsrx/core": "0.1.24",
+    "@tsrx/ripple": "0.1.24"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/jsx-runtime.d.ts

@@ -1,5 +1,6 @@
-import type { AddEventObject, FragmentProps, RefKey, TSRXElement } from '#public';
+import type { AddEventObject, FragmentProps, RefKey, RefValue, TSRXElement } from '#public';
 import type { Nullable } from '#helpers';
+export type { RefValue } from '#public';
 
 /**
  * Ripple JSX Runtime Type Definitions
@@ -7,8 +8,8 @@ import type { Nullable } from '#helpers';
  * renderable TSRX values when used in expression positions.
  */
 
-// Ripple components don't return JSX elements - they're imperative
-export type ComponentType<P = {}> = (props: P) => void;
+// Ripple components are usually imperative, but helpers can return TSRX values.
+export type ComponentType<P = {}> = (props: P) => void | TSRXElement;
 
 /**
  * Create a JSX element (for elements with children)
@@ -67,13 +68,6 @@ type EventHandlerValue<Target extends globalThis.EventTarget, EventType extends
 	| EventHandler<Target, EventType>
 	| EventHandlerObject<Target, EventType>;
 
-type RefValue<Target extends globalThis.Element> =
-	| ((node: Target) => void | (() => void))
-	| { value: Target | null }
-	| Target
-	| null
-	| undefined;
-
 type RefAttribute<Target extends globalThis.Element> = {
 	[Key in RefKey]?: RefValue<Target>;
 };

package/src/runtime/dynamic-client.js

@@ -0,0 +1,33 @@
+/** @import { Block } from '#client' */
+
+import { composite } from './internal/client/composite.js';
+import { with_block } from './internal/client/runtime.js';
+import { tsrx_element } from './element.js';
+
+/**
+ * @typedef {Function | string | null | undefined | false} DynamicTarget
+ * @typedef {{ is?: DynamicTarget, [key: string]: any }} DynamicProps
+ */
+
+/**
+ * @param {DynamicProps} props
+ * @returns {import('./element.js').TSRXElement}
+ */
+export function Dynamic(props) {
+	return tsrx_element(
+		/**
+		 * @param {Node} anchor
+		 * @param {Block | null} block
+		 */
+		(anchor, block) => {
+			const render_dynamic = () =>
+				composite(() => /** @type {DynamicTarget} */ (props?.is), anchor, props || {}, 'is');
+
+			if (block !== null) {
+				with_block(block, render_dynamic);
+			} else {
+				render_dynamic();
+			}
+		},
+	);
+}

package/src/runtime/dynamic-server.js

@@ -0,0 +1,80 @@
+import { is_void_element } from '@tsrx/core/runtime/html';
+import { exclude_prop_from_object } from '@tsrx/core/runtime/language-helpers';
+import {
+	escape,
+	get,
+	is_tsrx_element,
+	output_push,
+	render_component,
+	render_tsrx_element,
+	spread_attrs,
+	spread_inner_html,
+} from './internal/server/index.js';
+import { tsrx_element } from './element.js';
+
+/**
+ * @param {any} value
+ * @returns {void}
+ */
+function render_child(value) {
+	value = get(value);
+
+	if (is_tsrx_element(value)) {
+		render_tsrx_element(value);
+	} else if (Array.isArray(value)) {
+		for (const item of value) {
+			render_child(item);
+		}
+	} else if (value != null) {
+		output_push(escape(value));
+	}
+}
+
+/**
+ * @param {string} tag
+ * @param {Record<string, any>} props
+ * @returns {void}
+ */
+function render_element(tag, props) {
+	output_push(`<${tag}`);
+	output_push(spread_attrs(props, undefined, 'is'));
+
+	if (is_void_element(tag)) {
+		output_push(' />');
+		return;
+	}
+
+	output_push('>');
+
+	const inner_html = spread_inner_html(props);
+	if (inner_html !== undefined) {
+		output_push(inner_html);
+	} else {
+		render_child(props.children);
+	}
+
+	output_push(`</${tag}>`);
+}
+
+/**
+ * @param {{ is?: Function | string | null | undefined | false, [key: string]: any }} props
+ * @returns {import('./element.js').TSRXElement}
+ */
+export function Dynamic(props) {
+	return tsrx_element(() => {
+		const component = get(props?.is);
+		if (component == null || component === false) {
+			return;
+		}
+
+		const dynamic_props = props || {};
+
+		if (typeof component === 'function') {
+			render_component(component, exclude_prop_from_object(dynamic_props, 'is'));
+		} else if (is_tsrx_element(component)) {
+			throw new TypeError('Invalid component type: received a TSRXElement value.');
+		} else {
+			render_element(String(component), dynamic_props);
+		}
+	});
+}

package/src/runtime/index-client.js

@@ -1,4 +1,4 @@
-/** @import { CompatOptions, RootBoundaryOptions } from '#client' */
+/** @import { RootBoundaryOptions } from '#client' */
 
 import { destroy_block, root } from './internal/client/blocks.js';
 import { handle_root_events } from './internal/client/events.js';
@@ -29,14 +29,6 @@ export {
 	SUSPENSE_REJECTED,
 } from './internal/client/constants.js';
 
-/**
- * @returns {CompatOptions | undefined}
- */
-function get_default_compat() {
-	return /** @type {typeof globalThis & { __RIPPLE_COMPAT__?: CompatOptions }} */ (globalThis)
-		.__RIPPLE_COMPAT__;
-}
-
 /**
  * @param {Node} anchor
  * @param {(anchor: Node) => void} render_content
@@ -74,7 +66,6 @@ export function mount(component, options) {
 	init_operations();
 	remove_ssr_css();
 
-	const compat = get_default_compat();
 	const props = options.props || {};
 	const target = options.target;
 	const anchor = create_anchor();
@@ -96,7 +87,7 @@ export function mount(component, options) {
 			},
 			options.rootBoundary,
 		);
-	}, compat);
+	});
 
 	return () => {
 		cleanup_events();
@@ -113,7 +104,6 @@ export function hydrate(component, options) {
 	init_operations();
 	remove_ssr_css();
 
-	const compat = get_default_compat();
 	const props = options.props || {};
 	const target = options.target;
 	const was_hydrating = hydrating;
@@ -142,7 +132,7 @@ export function hydrate(component, options) {
 				},
 				options.rootBoundary,
 			);
-		}, compat);
+		});
 	} catch (e) {
 		throw e;
 	} finally {
@@ -193,6 +183,8 @@ export { user_effect as effect } from './internal/client/blocks.js';
 
 export { Portal } from './internal/client/portal.js';
 
+export { Dynamic } from './dynamic-client.js';
+
 export { ref_prop as createRefKey } from './internal/client/runtime.js';
 
 export { isRefProp } from '@tsrx/core/runtime/ref';

package/src/runtime/index-server.js

@@ -68,6 +68,8 @@ export const bindNode = noop;
 export const bindOffsetWidth = noop;
 export const bindOffsetHeight = noop;
 
+export { Dynamic } from './dynamic-server.js';
+
 /**
  * Portal component noop for server-side rendering.
  * Portals are client-only and do not render on the server.

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

@@ -1,4 +1,4 @@
-/** @import { Block, Derived, CompatOptions, Component } from '#client' */
+/** @import { Block, Derived, Component } from '#client' */
 
 import {
 	BLOCK_HAS_RUN,
@@ -85,9 +85,10 @@ export function render(fn, state, flags = 0) {
  * @param {any} element
  * @param {any} fn
  * @param {number} [flags]
+ * @param {string} [exclude_prop]
  */
-export function render_spread(element, fn, flags = 0) {
-	return block(RENDER_BLOCK | flags, apply_element_spread(element, fn));
+export function render_spread(element, fn, flags = 0, exclude_prop) {
+	return block(RENDER_BLOCK | flags, apply_element_spread(element, fn, exclude_prop));
 }
 
 /**
@@ -172,32 +173,10 @@ export function ref(element, get_fn, set_fn) {
 
 /**
  * @param {() => (void | (() => void))} fn
- * @param {CompatOptions} [compat]
  * @returns {Block}
  */
-export function root(fn, compat) {
-	var target_fn = fn;
-
-	if (compat != null) {
-		/** @type {Array<void | (() => void)>} */
-		var unmounts = [];
-		for (var key in compat) {
-			var api = compat[key];
-			unmounts.push(api.createRoot());
-		}
-		target_fn = () => {
-			var component_unmount = fn();
-
-			return () => {
-				component_unmount?.();
-				for (var unmount of unmounts) {
-					unmount?.();
-				}
-			};
-		};
-	}
-
-	return block(ROOT_BLOCK, target_fn, { compat, start: null, end: null }, create_component_ctx());
+export function root(fn) {
+	return block(ROOT_BLOCK, fn, { start: null, end: null }, create_component_ctx());
 }
 
 /**

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

@@ -1,5 +1,6 @@
 /** @import { Block } from '#client' */
 
+import { exclude_prop_from_object } from '@tsrx/core/runtime/language-helpers';
 import { branch, destroy_block, render, render_spread } from './blocks.js';
 import { COMPOSITE_BLOCK, DEFAULT_NAMESPACE, NAMESPACE_URI } from './constants.js';
 import { hydrate_next, hydrating } from './hydration.js';
@@ -9,13 +10,14 @@ import { is_tsrx_element } from '../../element.js';
 import { render_component } from './component.js';
 
 /**
- * @typedef {((anchor: Node, props: Record<string, any>, block: Block | null) => void)} ComponentFunction
- * @param {() => ComponentFunction | keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap | keyof MathMLElementTagNameMap} get_component
+ * @typedef {Function | string | null | undefined | false} CompositeTarget
+ * @param {() => CompositeTarget} get_component
  * @param {Node} node
  * @param {Record<string, any>} props
+ * @param {string} [exclude_prop]
  * @returns {void}
  */
-export function composite(get_component, node, props) {
+export function composite(get_component, node, props, exclude_prop) {
 	if (hydrating) {
 		// During hydration, `node` may already point at the first real SSR node
 		// (e.g. layout children). Only skip forward when we are on an empty
@@ -42,7 +44,10 @@ export function composite(get_component, node, props) {
 			if (typeof component === 'function') {
 				// Handle as regular component
 				b = branch(() => {
-					render_component(component, anchor, props);
+					const component_props = exclude_prop
+						? exclude_prop_from_object(props, exclude_prop)
+						: props;
+					render_component(component, anchor, component_props);
 				});
 			} else if (is_tsrx_element(component)) {
 				throw new TypeError('Invalid component type: received a TSRXElement value.');
@@ -69,7 +74,7 @@ export function composite(get_component, node, props) {
 						};
 					}
 
-					render_spread(element, () => props || {});
+					render_spread(element, () => props || {}, 0, exclude_prop);
 
 					if (is_tsrx_element(props?.children)) {
 						var child_anchor = document.createComment('');
@@ -84,7 +89,7 @@ export function composite(get_component, node, props) {
 				};
 
 				if (ns !== active_namespace) {
-					// support top-level dynamic element svg/math <@tag />
+					// support top-level dynamic element svg/math tags
 					b = branch(() => with_ns(ns, run));
 				} else {
 					b = branch(run);

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

@@ -57,6 +57,17 @@ function create_item(anchor, value, index, render_fn, is_indexed, is_keyed) {
 	return b;
 }
 
+/**
+ * @param {Node} anchor
+ * @param {(anchor: Node) => void} render_empty
+ * @returns {Block}
+ */
+function create_empty(anchor, render_empty) {
+	return branch(() => {
+		render_empty(anchor);
+	});
+}
+
 /**
  * @param {Block} block
  * @param {Element} anchor
@@ -104,9 +115,10 @@ function collection_to_array(collection) {
  * @param {() => V[] | Iterable<V>} get_collection
  * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {number} flags
+ * @param {(anchor: Node) => void} [render_empty]
  * @returns {void}
  */
-export function for_block(node, get_collection, render_fn, flags) {
+export function for_block(node, get_collection, render_fn, flags, render_empty) {
 	var is_controlled = (flags & IS_CONTROLLED) !== 0;
 	var is_indexed = (flags & IS_INDEXED) !== 0;
 	var anchor = /** @type {Element | Text} */ (node);
@@ -131,7 +143,7 @@ export function for_block(node, get_collection, render_fn, flags) {
 			var array = collection_to_array(collection);
 
 			untrack(() => {
-				reconcile_by_ref(anchor, block, array, render_fn, is_controlled, is_indexed);
+				reconcile_by_ref(anchor, block, array, render_fn, is_controlled, is_indexed, render_empty);
 			});
 
 			if (hydrating) {
@@ -151,9 +163,10 @@ export function for_block(node, get_collection, render_fn, flags) {
  * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {number} flags
  * @param {(item: V) => K} [get_key]
+ * @param {(anchor: Node) => void} [render_empty]
  * @returns {void}
  */
-export function for_block_keyed(node, get_collection, render_fn, flags, get_key) {
+export function for_block_keyed(node, get_collection, render_fn, flags, get_key, render_empty) {
 	var is_controlled = (flags & IS_CONTROLLED) !== 0;
 	var is_indexed = (flags & IS_INDEXED) !== 0;
 	var anchor = /** @type {Element | Text} */ (node);
@@ -188,6 +201,7 @@ export function for_block_keyed(node, get_collection, render_fn, flags, get_key)
 					is_controlled,
 					is_indexed,
 					/** @type {(item: V) => K} */ (get_key),
+					render_empty,
 				);
 			});
 		},
@@ -211,6 +225,7 @@ function reconcile_fast_clear(anchor, block, array) {
 	parent_node.append(anchor);
 	state.array = array;
 	state.blocks = [];
+	state.empty = null;
 }
 
 /**
@@ -241,9 +256,19 @@ function update_value(block, value) {
  * @param {boolean} is_controlled
  * @param {boolean} is_indexed
  * @param {(item: V) => K} get_key
+ * @param {(anchor: Node) => void} [render_empty]
  * @returns {void}
  */
-function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed, get_key) {
+function reconcile_by_key(
+	anchor,
+	block,
+	b,
+	render_fn,
+	is_controlled,
+	is_indexed,
+	get_key,
+	render_empty,
+) {
 	var state = block.s;
 
 	// Variables used in conditional branches - declare with initial values
@@ -271,6 +296,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 			array: [],
 			blocks: [],
 			keys: null,
+			empty: null,
 		};
 	}
 
@@ -279,6 +305,30 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 	var b_length = b.length;
 	var j = 0;
 
+	if (b_length === 0) {
+		if (a_length > 0) {
+			if (is_controlled) {
+				reconcile_fast_clear(anchor, block, b);
+			} else {
+				for (; j < a_length; j++) {
+					destroy_block(state.blocks[j]);
+				}
+				state.array = b;
+				state.blocks = [];
+				state.keys = [];
+			}
+		}
+		if (render_empty && state.empty === null) {
+			state.empty = create_empty(anchor, render_empty);
+		}
+		return;
+	}
+
+	if (state.empty !== null) {
+		destroy_block(state.empty);
+		state.empty = null;
+	}
+
 	// Fast-path for clear
 	if (is_controlled && b_length === 0) {
 		if (a_length > 0) {
@@ -516,9 +566,10 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
  * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {boolean} is_controlled
  * @param {boolean} is_indexed
+ * @param {(anchor: Node) => void} [render_empty]
  * @returns {void}
  */
-function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed) {
+function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed, render_empty) {
 	var state = block.s;
 
 	// Variables used in conditional branches - declare with initial values
@@ -546,6 +597,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 			array: [],
 			blocks: [],
 			keys: null,
+			empty: null,
 		};
 	}
 
@@ -554,6 +606,29 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 	var b_length = b.length;
 	var j = 0;
 
+	if (b_length === 0) {
+		if (a_length > 0) {
+			if (is_controlled) {
+				reconcile_fast_clear(anchor, block, b);
+			} else {
+				for (; j < a_length; j++) {
+					destroy_block(state.blocks[j]);
+				}
+				state.array = b;
+				state.blocks = [];
+			}
+		}
+		if (render_empty && state.empty === null) {
+			state.empty = create_empty(anchor, render_empty);
+		}
+		return;
+	}
+
+	if (state.empty !== null) {
+		destroy_block(state.empty);
+		state.empty = null;
+	}
+
 	// Fast-path for clear
 	if (is_controlled && b_length === 0) {
 		if (a_length > 0) {

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

@@ -127,8 +127,6 @@ export { expression } from './expression.js';
 
 export { rpc } from './rpc.js';
 
-export { tsx_compat } from './compat.js';
-
 export { render_tsrx_element } from './component.js';
 
 export { TRY_BLOCK, HMR } from './constants.js';

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

@@ -253,9 +253,10 @@ export function set_selected(element, selected) {
 /**
  * @param {Element} element
  * @param {() => Record<string | symbol, any>} fn
+ * @param {string} [exclude_prop]
  * @returns {() => void}
  */
-export function apply_element_spread(element, fn) {
+export function apply_element_spread(element, fn, exclude_prop) {
 	/** @type {Record<string | symbol, any>} */
 	var prev = {};
 	/** @type {Record<string | symbol, Block | undefined>} */
@@ -304,6 +305,8 @@ export function apply_element_spread(element, fn) {
 		var current_ref_props = {};
 
 		for (const key in next) {
+			if (key === exclude_prop) continue;
+
 			const ref_fn = next[key];
 			if (!is_ref_prop(ref_fn)) {
 				continue;
@@ -352,7 +355,7 @@ export function apply_element_spread(element, fn) {
 		/** @type {typeof prev} */
 		const current = {};
 		for (const key in next) {
-			if (key === 'children') continue;
+			if (key === 'children' || key === exclude_prop) continue;
 
 			let value = next[key];
 			if (is_ref_prop(value)) {