ripple 0.3.71 → 0.3.74

package/CHANGELOG.md

@@ -1,5 +1,80 @@
 # ripple
 
+## 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
+
+- Updated dependencies
+  [[`0ea87fb`](https://github.com/Ripple-TS/ripple/commit/0ea87fb3cbef21c3c00d63cc2a1f3c9f34d01c24)]:
+  - @tsrx/core@0.1.20
+  - @tsrx/ripple@0.1.20
+
 ## 0.3.71
 
 ### 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.71",
+  "version": "0.3.74",
   "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.19",
-    "@tsrx/ripple": "0.1.19"
+    "@tsrx/core": "0.1.22",
+    "@tsrx/ripple": "0.1.22"
   },
   "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
@@ -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/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 {

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,
@@ -172,32 +172,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/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/types.d.ts

@@ -59,16 +59,6 @@ export type BlockWithTryBoundaryAndCatch = Omit<BlockWithTryBoundary, 's'> & {
 	s: TryBoundaryState & { c: NonNullable<TryBoundaryState['c']> };
 };
 
-export type CompatApi = {
-	createRoot: () => void;
-	createComponent: (node: any, children_fn: () => any) => void;
-	jsx: (type: any, props: any) => any;
-};
-
-export type CompatOptions = {
-	[key: string]: CompatApi;
-};
-
 export type RootBoundaryOptions = {
 	pending?: (anchor: Node, props: Record<string, never>, block: Block | null) => void;
 	catch?: (anchor: Node, props: { error: unknown; reset: () => void }, block: Block | null) => void;

package/tests/client/__snapshots__/computed-properties.test.tsrx.snap

@@ -2,48 +2,56 @@
 
 exports[`computed tracked properties > should update a property using assignment 1`] = `
 <div>
+  <!---->
   <div>
     0
   </div>
   <button>
     Increment
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`computed tracked properties > should update a property using assignment 2`] = `
 <div>
+  <!---->
   <div>
     1
   </div>
   <button>
     Increment
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`computed tracked properties > should update a property using update expressions 1`] = `
 <div>
+  <!---->
   <div>
     0
   </div>
   <button>
     Increment
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`computed tracked properties > should update a property using update expressions 2`] = `
 <div>
+  <!---->
   <div>
     1
   </div>
   <button>
     Increment
   </button>
+  <!---->
   
 </div>
 `;

package/tests/client/__snapshots__/for.test.tsrx.snap

@@ -2,6 +2,7 @@
 
 exports[`for statements > correctly handles intermediate statements in for block 1`] = `
 <div>
+  <!---->
   <div>
     <div>
       <div>
@@ -32,12 +33,14 @@ exports[`for statements > correctly handles intermediate statements in for block
   <button>
     Add Item
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > correctly handles intermediate statements in for block 2`] = `
 <div>
+  <!---->
   <div>
     <div>
       <div>
@@ -76,12 +79,14 @@ exports[`for statements > correctly handles intermediate statements in for block
   <button>
     Add Item
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > correctly handles keyed for...of loops 1`] = `
 <div>
+  <!---->
   <!---->
   <div>
     0:Item 1
@@ -96,12 +101,14 @@ exports[`for statements > correctly handles keyed for...of loops 1`] = `
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > correctly handles keyed for...of loops 2`] = `
 <div>
+  <!---->
   <!---->
   <div>
     0:Item 3
@@ -116,12 +123,14 @@ exports[`for statements > correctly handles keyed for...of loops 2`] = `
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > correctly handles the index in a for...of loop 1`] = `
 <div>
+  <!---->
   <div>
     <div>
       0 : a
@@ -140,12 +149,14 @@ exports[`for statements > correctly handles the index in a for...of loop 1`] = `
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > correctly handles the index in a for...of loop 2`] = `
 <div>
+  <!---->
   <div>
     <div>
       0 : a
@@ -167,12 +178,14 @@ exports[`for statements > correctly handles the index in a for...of loop 2`] = `
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > correctly handles the index in a for...of loop 3`] = `
 <div>
+  <!---->
   <div>
     <div>
       0 : d
@@ -194,12 +207,14 @@ exports[`for statements > correctly handles the index in a for...of loop 3`] = `
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > handles updating with new objects with same key 1`] = `
 <div>
+  <!---->
   <!---->
   <div>
     0:Item 1
@@ -214,12 +229,14 @@ exports[`for statements > handles updating with new objects with same key 1`] =
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > handles updating with new objects with same key 2`] = `
 <div>
+  <!---->
   <!---->
   <div>
     0:Item 1!
@@ -234,12 +251,14 @@ exports[`for statements > handles updating with new objects with same key 2`] =
   <button>
     Reverse
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > renders a simple dynamic array 1`] = `
 <div>
+  <!---->
   <!---->
   <div
     class="Item 1"
@@ -260,12 +279,14 @@ exports[`for statements > renders a simple dynamic array 1`] = `
   <button>
     Add Item
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`for statements > renders a simple dynamic array 2`] = `
 <div>
+  <!---->
   <!---->
   <div
     class="Item 1"
@@ -291,6 +312,7 @@ exports[`for statements > renders a simple dynamic array 2`] = `
   <button>
     Add Item
   </button>
+  <!---->
   
 </div>
 `;

package/tests/client/__snapshots__/html.test.tsrx.snap

@@ -2,6 +2,7 @@
 
 exports[`Fragment innerHTML > renders dynamic innerHTML fragments 1`] = `
 <div>
+  <!---->
   <!---->
   <div>
     Test
@@ -10,12 +11,14 @@ exports[`Fragment innerHTML > renders dynamic innerHTML fragments 1`] = `
   <button>
     Update
   </button>
+  <!---->
   
 </div>
 `;
 
 exports[`Fragment innerHTML > renders dynamic innerHTML fragments 2`] = `
 <div>
+  <!---->
   <!---->
   <div>
     Updated
@@ -24,6 +27,7 @@ exports[`Fragment innerHTML > renders dynamic innerHTML fragments 2`] = `
   <button>
     Update
   </button>
+  <!---->
   
 </div>
 `;