ripple 0.2.42 → 0.2.44

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

@@ -1,5 +1,4 @@
 /** @import { Block, Component, Dependency, Computed, Tracked } from '#client' */
-/** @import { RippleArray } from 'ripple' */
 
 import {
 	destroy_block,
@@ -26,10 +25,11 @@ import {
 	TRACKED_OBJECT,
 	TRY_BLOCK,
 	UNINITIALIZED,
-	USE_PROP,
+	REF_PROP,
+	ARRAY_SET_INDEX_AT,
 } from './constants';
 import { capture, suspend } from './try.js';
-import { define_property, get_descriptor, is_array } from './utils';
+import { define_property, get_descriptor, is_ripple_array, is_positive_integer } from './utils';
 import {
 	object_keys as original_object_keys,
 	object_values as original_object_values,
@@ -858,6 +858,28 @@ export function computed_property(fn) {
 	return fn;
 }
 
+/**
+ * @param {any} obj
+ * @param {string | number | symbol} property
+ * @param {boolean} chain_obj
+ * @param {boolean} chain_prop
+ * @param {...any} args
+ * @returns {any}
+ */
+export function call_property(obj, property, chain_obj, chain_prop, ...args) {
+	// don't swallow errors if either the object or property is nullish,
+	// respect optional chaining as provided
+	if(!chain_obj && !chain_prop) {
+		return obj[property].call(obj, ...args);
+	} else if (chain_obj && chain_prop) {
+		return obj?.[property]?.call(obj, ...args);
+	} else if (chain_obj) {
+		return obj?.[property].call(obj, ...args);
+	} else if (chain_prop) {
+		return obj[property]?.call(obj, ...args);
+	}
+}
+
 /**
  * @param {any} obj
  * @param {string | number | symbol} property
@@ -881,6 +903,8 @@ export function get_property(obj, property, chain = false) {
 		var spread_fn = obj[SPREAD_OBJECT];
 		var properties = spread_fn();
 		return get_property(properties, property, chain);
+	} else if (is_ripple_array(obj)) {
+		obj.$length;
 	}
 
 	return value;
@@ -894,20 +918,30 @@ export function get_property(obj, property, chain = false) {
  * @returns {any}
  */
 export function set_property(obj, property, value, block) {
-	var res = (obj[property] = value);
 	var tracked_properties = obj[TRACKED_OBJECT];
-	var tracked = tracked_properties?.[property];
+	var rip_arr = is_ripple_array(obj);
+	var tracked = !(rip_arr && property === 'length') ? tracked_properties?.[property] : undefined;
 
 	if (tracked === undefined) {
 		// Handle computed assignments to arrays
-		if (is_array(obj) && obj.$length && tracked_properties !== undefined) {
-			with_scope(block, () => {
-				obj.splice(/** @type {number} */ (property), 1, value);
-			});
+		if (rip_arr) {
+			if (property === 'length') {
+				// overriding `length` in RippleArray class doesn't work
+				// placing it here instead
+				throw new Error('Cannot set length on RippleArray, use $length instead');
+			} else if (is_positive_integer(property)) {
+				// for any other type we use obj[property] = value below as per native JS
+				return with_scope(block, () => {
+					obj[ARRAY_SET_INDEX_AT](property, value);
+				});
+			}
 		}
-		return res;
+
+		return (obj[property] = value);
 	}
 
+	obj[property] = value;
+
 	set(tracked, value, block);
 }
 
@@ -1028,8 +1062,8 @@ export function structured_clone(val, options) {
 	if (typeof val === 'object' && val !== null) {
 		var tracked_properties = val[TRACKED_OBJECT];
 		if (tracked_properties !== undefined) {
-			if (is_array(val)) {
-				/** @type {RippleArray<any>} */ (val).$length;
+			if (is_ripple_array(val)) {
+				val.$length;
 			}
 			return structured_clone(object_values(val), options);
 		}
@@ -1038,7 +1072,7 @@ export function structured_clone(val, options) {
 }
 
 export function object_keys(obj) {
-	if (is_array(obj) && TRACKED_OBJECT in obj) {
+	if (is_ripple_array(obj)) {
 		obj.$length;
 	}
 	return original_object_keys(obj);
@@ -1050,7 +1084,7 @@ export function object_values(obj) {
 	if (tracked_properties === undefined) {
 		return original_object_values(obj);
 	}
-	if (is_array(obj)) {
+	if (is_ripple_array(obj)) {
 		obj.$length;
 	}
 	var keys = original_object_keys(obj);
@@ -1069,7 +1103,7 @@ export function object_entries(obj) {
 	if (tracked_properties === undefined) {
 		return original_object_entries(obj);
 	}
-	if (is_array(obj)) {
+	if (is_ripple_array(obj)) {
 		obj.$length;
 	}
 	var keys = original_object_keys(obj);
@@ -1169,8 +1203,8 @@ export function pop_component() {
 	active_component = component.p;
 }
 
-export function use_prop() {
-	return Symbol(USE_PROP);
+export function ref_prop() {
+	return Symbol(REF_PROP);
 }
 
 /**
@@ -1195,4 +1229,4 @@ export function exclude_from_object(obj, keys) {
 		delete obj[key];
 	}
 	return obj;
-}
+}

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

@@ -1,3 +1,5 @@
+import { TRACKED_OBJECT } from './constants.js';
+
 export var get_descriptor = Object.getOwnPropertyDescriptor;
 export var get_descriptors = Object.getOwnPropertyDescriptors;
 export var array_from = Array.from;
@@ -15,3 +17,19 @@ export function create_anchor() {
 	t.__t = '';
 	return t;
 }
+
+/**
+ * @param {any} obj
+ * @returns {boolean}
+ */
+export function is_ripple_array(obj) {
+	return is_array(obj) && TRACKED_OBJECT in obj && '$length' in obj;
+}
+
+/**
+ * @param {any} value
+ * @returns {boolean}
+ */
+export function is_positive_integer(value) {
+	return Number.isInteger(value) && /**@type {number} */ (value) >= 0;
+}

package/tests/__snapshots__/basic.test.ripple.snap

@@ -9,6 +9,20 @@ exports[`basic > render semi-dynamic text 1`] = `
 </div>
 `;
 
+exports[`basic > render spread props without duplication 1`] = `
+<div>
+  <div>
+    <input
+      id="vehicle1"
+      name="car"
+      type="checkbox"
+      value="Bike"
+    />
+  </div>
+  
+</div>
+`;
+
 exports[`basic > render static attributes 1`] = `
 <div>
   <div