ripple 0.2.87 → 0.2.89

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

@@ -9,38 +9,38 @@ import { IF_BLOCK, UNINITIALIZED } from './constants.js';
  * @returns {void}
  */
 export function if_block(node, fn) {
-  var anchor = node;
-  var has_branch = false;
-  /** @type {any} */
-  var condition = UNINITIALIZED;
-  /** @type {Block | null} */
-  var b = null;
+	var anchor = node;
+	var has_branch = false;
+	/** @type {any} */
+	var condition = UNINITIALIZED;
+	/** @type {Block | null} */
+	var b = null;
 
-  /** @type {(fn: (anchor: Node) => void, flag?: boolean) => void} */
-  var set_branch = (fn, flag = true) => {
-    has_branch = true;
-    update_branch(flag, fn);
-  };
+	/** @type {(fn: (anchor: Node) => void, flag?: boolean) => void} */
+	var set_branch = (fn, flag = true) => {
+		has_branch = true;
+		update_branch(flag, fn);
+	};
 
-  /** @type {(new_condition: any, fn: ((anchor: Node) => void) | null) => void} */
-  var update_branch = (new_condition, fn) => {
-    if (condition === (condition = new_condition)) return;
+	/** @type {(new_condition: any, fn: ((anchor: Node) => void) | null) => void} */
+	var update_branch = (new_condition, fn) => {
+		if (condition === (condition = new_condition)) return;
 
-    if (b !== null) {
-      destroy_block(b);
-      b = null;
-    }
+		if (b !== null) {
+			destroy_block(b);
+			b = null;
+		}
 
-    if (fn !== null) {
-      b = branch(() => fn(anchor));
-    }
-  };
+		if (fn !== null) {
+			b = branch(() => fn(anchor));
+		}
+	};
 
-  render(() => {
-    has_branch = false;
-    fn(set_branch);
-    if (!has_branch) {
-      update_branch(null, null);
-    }
-  }, IF_BLOCK);
+	render(() => {
+		has_branch = false;
+		fn(set_branch);
+		if (!has_branch) {
+			update_branch(null, null);
+		}
+	}, IF_BLOCK);
 }

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

@@ -60,4 +60,8 @@ export { template, append } from './template.js';
 
 export { tracked_array } from '../../array.js';
 
+export { tracked_object } from '../../object.js';
+
 export { head } from './head.js';
+
+export { script } from './script.js';

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

@@ -14,7 +14,6 @@ export var is_firefox;
 export function init_operations() {
 	var node_prototype = Node.prototype;
 	var element_prototype = Element.prototype;
-	var object_prototype = Object.prototype;
 	var event_target_prototype = EventTarget.prototype;
 
 	is_firefox = /Firefox/.test(navigator.userAgent);

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

@@ -15,6 +15,7 @@ import {
   is_event_attribute,
 } from '../../../utils/events.js';
 import { get } from './runtime.js';
+import { clsx } from 'clsx';
 
 /**
  * @param {Text} text
@@ -131,18 +132,17 @@ export function set_attributes(element, attributes) {
 }
 
 /**
- * @template V
- * @param {V} value
+ * @param {import('clsx').ClassValue} value
  * @param {string} [hash]
- * @returns {string | V}
+ * @returns {string}
  */
 function to_class(value, hash) {
-  return (value == null ? '' : value) + (hash ? ' ' + hash : '');
+  return value == null ? hash ?? '' : clsx([value, hash]);
 }
 
 /**
  * @param {HTMLElement} dom
- * @param {string} value
+ * @param {import('clsx').ClassValue} value
  * @param {string} [hash]
  * @param {boolean} [is_html]
  * @returns {void}

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

@@ -325,7 +325,7 @@ export function track(v, get, set, b) {
  * @param {Block} b
  * @returns {Tracked[]}
  */
-export function trackSplit(v, l, b) {
+export function track_split(v, l, b) {
 	var is_tracked = is_tracked_object(v);
 
 	if (is_tracked || typeof v !== 'object' || v === null || is_array(v)) {
@@ -1089,7 +1089,7 @@ export function exclude_from_object(obj, exclude_keys) {
   var keys = object_keys(obj);
 	/** @type {Record<string | symbol, unknown>} */
 	var new_obj = {};
-  
+
   for (const key of keys) {
     if (!exclude_keys.includes(key)) {
       new_obj[key] = obj[key];

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

@@ -0,0 +1,16 @@
+import { effect } from './blocks';
+/**
+ * @param {Text | Comment} node
+ * @param {string} content
+ */
+export function script(node, content) {
+	effect(() => {
+		var script = document.createElement('script');
+		script.textContent = content;
+		node.before(script);
+
+		return () => {
+			script.remove();
+		};
+	});
+}

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

@@ -20,6 +20,10 @@ export var object_keys = Object.keys;
 export var get_own_property_symbols = Object.getOwnPropertySymbols;
 /** @type {typeof structuredClone} */
 export var structured_clone = structuredClone;
+/** @type {typeof Object.prototype} */
+export var object_prototype = Object.prototype;
+/** @type {typeof Array.prototype} */
+export var array_prototype = Array.prototype;
 
 /**
  * Creates a text node that serves as an anchor point in the DOM.

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

@@ -6,6 +6,8 @@ import { is_tracked_object } from '../client/utils';
 import { escape } from '../../../utils/escaping.js';
 import { is_boolean_attribute } from '../../../compiler/utils';
 
+import { clsx } from 'clsx';
+
 export { escape };
 
 /** @type {Component | null} */
@@ -132,7 +134,8 @@ export function attr(name, value, is_boolean = false) {
 	}
 	if (value == null || (!value && is_boolean)) return '';
 	const normalized = (name in replacements && replacements[name].get(value)) || value;
-	const assignment = is_boolean ? '' : `="${escape(normalized, true)}"`;
+	const value_to_escape = name === 'class' ? clsx(normalized) : normalized;
+	const assignment = is_boolean ? '' : `="${escape(value_to_escape, true)}"`;
 	return ` ${name}${assignment}`;
 }
 
@@ -155,7 +158,7 @@ export function spread_attrs(attrs, css_hash) {
     }
 
     if (name === 'class' && css_hash) {
-      value = (value == null ? '' : value) + ' ' + css_hash;
+      value = value == null ? css_hash : [value, css_hash];
     }
 
 		attr_str += attr(name, value, is_boolean_attribute(name));

package/src/runtime/object.js

@@ -0,0 +1,29 @@
+/** @import { Block } from '#client' */
+import { safe_scope } from './internal/client/runtime.js';
+import { object_proxy } from './proxy.js';
+
+/**
+ * @template {object} T
+ * @constructor
+ * @param {T} obj
+ * @returns {TrackedObject<T>}
+ */
+export function TrackedObject(obj) {
+  if (!new.target) {
+    throw new Error("TrackedObject must be called with 'new'");
+  }
+
+  var block = safe_scope();
+
+  return object_proxy(obj, block);
+}
+
+/**
+ * @template {object} T
+ * @param {T} obj
+ * @param {Block} block
+ * @returns {TrackedObject<T>}
+ */
+export function tracked_object(obj, block) {
+  return object_proxy(obj, block);
+}

package/src/runtime/proxy.js

@@ -0,0 +1,341 @@
+/** @import { Block, Tracked } from '#client' */
+/** @import { TrackedArray } from './array.js' */
+/** @import { TrackedObject } from './object.js' */
+
+import { get, set, tracked } from './internal/client/runtime.js';
+import {
+  array_prototype,
+  get_descriptor,
+  get_prototype_of,
+  is_array,
+  object_prototype,
+} from './internal/client/utils.js';
+import {
+  MAX_ARRAY_LENGTH,
+  TRACKED_ARRAY,
+  TRACKED_OBJECT,
+  UNINITIALIZED,
+} from './internal/client/constants.js';
+
+/**
+ * @template T
+ * @param {T[] | Record<PropertyKey, any>} value
+ * @param {Block} block
+ * @returns {TrackedArray<T> | TrackedObject<T>}
+ */
+export function proxy(value, block) {
+  // if non-proxyable, or is already a proxy, return `value`
+  if (
+    typeof value !== 'object'
+    || value === null
+    || TRACKED_ARRAY in value
+    || TRACKED_OBJECT in value
+  ) {
+    return value;
+  }
+
+  const prototype = get_prototype_of(value);
+
+  if (prototype !== object_prototype && prototype !== array_prototype) {
+    return value;
+  }
+
+  var tracked_elements = new Map();
+  var is_proxied_array = is_array(value);
+  /** @type {Tracked} */
+  var tracked_len;
+
+  if (is_proxied_array) {
+    tracked_len = tracked(value.length, block);
+    tracked_elements.set('length', tracked_len);
+  }
+
+  return new Proxy(value, {
+    /**
+     * @param {PropertyKey} prop
+     */
+    get(target, prop, receiver) {
+      var t = tracked_elements.get(prop);
+      var exists = prop in target;
+
+      if (t === undefined && (!exists || get_descriptor(target, prop)?.writable)) {
+        t = tracked(exists ? /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
+        tracked_elements.set(prop, t);
+      }
+
+      if (t !== undefined) {
+        var v = get(t);
+        return v === UNINITIALIZED ? undefined : v;
+      }
+
+      var result = Reflect.get(target, prop, receiver);
+
+      if (typeof result === 'function') {
+        if (methods_returning_arrays.has(prop)) {
+          /** @type {(this: any, ...args: any[]) => any} */
+          return function (...args) {
+            var output = Reflect.apply(result, receiver, args);
+
+            if (Array.isArray(output) && output !== target) {
+              return array_proxy({ elements: output, block, use_array: true });
+            }
+
+            return output;
+          };
+        }
+
+        // When generating an iterator, we need to ensure that length is tracked
+        if (is_proxied_array && (prop === 'entries' || prop === 'values' || prop === 'keys')) {
+          receiver.length;
+        }
+      }
+
+      return result;
+    },
+
+    set(target, prop, value, receiver) {
+      var t = tracked_elements.get(prop);
+      var exists = prop in target;
+
+      if (is_proxied_array && prop === 'length') {
+        for (var i = value; i < t.v; i += 1) {
+          var other_t = tracked_elements.get(i + '');
+          if (other_t !== undefined) {
+            set(other_t, UNINITIALIZED, block);
+          } else if (i in target) {
+            // If the item exists in the original, we need to create a uninitialized tracked,
+            // else a later read of the property would result in a tracked being created with
+            // the value of the original item at that index.
+            other_t = tracked(UNINITIALIZED, block);
+            tracked_elements.set(i + '', other_t);
+          }
+        }
+      }
+
+      // If we haven't yet created a tracked for this property, we need to ensure
+      // we do so otherwise if we read it later, then the write won't be tracked and
+      // the heuristics of effects will be different vs if we had read the proxied
+      // object property before writing to that property.
+      if (t === undefined) {
+        if (!exists || get_descriptor(target, prop)?.writable) {
+          t = tracked(undefined, block);
+          set(t, value, block);
+
+          tracked_elements.set(prop, t);
+        }
+      } else {
+        exists = t.v !== UNINITIALIZED;
+
+        set(t, value, block);
+      }
+
+			var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+
+			// Set the new value before updating any tracked's so that any listeners get the new value
+			if (descriptor?.set) {
+				descriptor.set.call(receiver, value);
+			}
+
+      if (!exists && is_proxied_array && typeof prop === 'string' ) {
+        // If we have mutated an array directly, we might need to
+        // signal that length has also changed. Do it before updating metadata
+        // to ensure that iterating over the array as a result of a metadata update
+        // will not cause the length to be out of sync.
+        var n = Number(prop);
+
+        if (Number.isInteger(n) && n >= tracked_len.v) {
+          set(tracked_len, n + 1, block);
+        }
+      }
+
+      return true;
+    },
+
+    setPrototypeOf() {
+      throw new Error(`Cannot set prototype of ${is_proxied_array ? '\`TrackedArray\`' : '\`TrackedObject\`'}`);
+    },
+
+    deleteProperty(target, prop) {
+      var t = tracked_elements.get(prop);
+
+      if (t === undefined) {
+        if (prop in target) {
+          const t = tracked(UNINITIALIZED, block);
+          tracked_elements.set(prop, t);
+        }
+      } else {
+        set(t, UNINITIALIZED, block);
+      }
+
+      return Reflect.deleteProperty(target, prop);
+    },
+
+    has(target, prop) {
+      if (is_proxied_array && prop === TRACKED_ARRAY) {
+        return true;
+      }
+
+      if (prop === TRACKED_OBJECT) {
+        return true;
+      }
+
+      var t = tracked_elements.get(prop);
+      var exists = (t !== undefined && t.v !== UNINITIALIZED) || Reflect.has(target, prop);
+
+      if (t !== undefined || !exists || get_descriptor(target, prop)?.writable) {
+        if (t === undefined) {
+          t = tracked(exists ?  /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
+
+          tracked_elements.set(prop, t);
+        }
+
+        var value = get(t);
+        if (value === UNINITIALIZED) {
+          return false;
+        }
+      }
+
+      return exists;
+    },
+
+    defineProperty(_, prop, descriptor) {
+      if (
+        !('value' in descriptor) ||
+        descriptor.configurable === false ||
+        descriptor.enumerable === false ||
+        descriptor.writable === false
+      ) {
+        // we disallow non-basic descriptors, because unless they are applied to the
+        // target object — which we avoid, so that state can be forked — we will run
+        // afoul of the various invariants
+        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor#invariants
+        throw new Error(
+          'Only basic property descriptors are supported with value and configurable, enumerable, and writable set to true',
+        );
+      }
+
+      var t = tracked_elements.get(prop);
+
+      if (t === undefined) {
+        t = tracked(descriptor.value, block);
+        tracked_elements.set(prop, t);
+      } else {
+        set(t, descriptor.value, block);
+      }
+
+      return true;
+    },
+
+    ownKeys(target) {
+      var own_keys = Reflect.ownKeys(target).filter((key) => {
+        var t = tracked_elements.get(key);
+        return t === undefined || t.v !== UNINITIALIZED;
+      });
+
+      for (var [key, t] of tracked_elements) {
+        if (t.v !== UNINITIALIZED && !(key in target)) {
+          own_keys.push(key);
+        }
+      }
+
+      return own_keys;
+    },
+
+    getOwnPropertyDescriptor(target, prop) {
+      var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+
+      if (descriptor && 'value' in descriptor) {
+        var t = tracked_elements.get(prop);
+        if (t) descriptor.value = get(t);
+      } else if (descriptor === undefined) {
+        var t = tracked_elements.get(prop);
+        var value = t?.v;
+
+        if (t !== undefined && value !== UNINITIALIZED) {
+          return {
+            enumerable: true,
+            configurable: true,
+            value,
+            writable: true
+          };
+        }
+      }
+
+      return descriptor;
+    },
+
+  });
+}
+
+/**
+ * @template T
+ * @param {{
+ *  elements: Iterable<T>,
+ *  block: Block,
+ *  from_static?: boolean,
+ *  use_array?: boolean
+ * }} params
+ * @returns {TrackedArray<T>}
+ */
+export function array_proxy({ elements, block, from_static = false, use_array = false }) {
+  var arr;
+  var first;
+
+  if (
+    from_static &&
+    (first = get_first_if_length(/** @type {Array<T>} */ (elements))) !== undefined
+  ) {
+    arr = new Array();
+    arr[0] = first;
+  } else if (use_array) {
+    arr = elements;
+  } else {
+    arr = new Array(...elements);
+  }
+
+  return proxy(arr, block);
+}
+
+/**
+ * @template {object} T
+ * @param {T} obj
+ * @param {Block} block
+ * @returns {TrackedObject<T>}
+ */
+export function object_proxy(obj, block) {
+  return proxy(obj, block);
+}
+
+/** @type {Set<PropertyKey>} */
+const methods_returning_arrays = new Set([
+  'concat',
+  'filter',
+  'flat',
+  'flatMap',
+  'map',
+  'slice',
+  'splice',
+  'toReversed',
+  'toSorted',
+  'toSpliced',
+  'with',
+]);
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @returns {number | void}
+ */
+function get_first_if_length(array) {
+  var first = array[0];
+
+  if (
+    array.length === 1 &&
+    0 in array &&
+    Number.isInteger(first) &&
+    /** @type {number} */ (first) >= 0 &&
+    /** @type {number} */ (first) <= MAX_ARRAY_LENGTH
+  ) {
+    return /** @type {number} */ (first);
+  }
+}

package/src/utils/events.js

@@ -58,11 +58,11 @@ export function is_capture_event(name) {
  * @param {string} event_name
  */
 export function get_attribute_event_name(event_name) {
-  event_name = event_name.slice(2);
+  event_name = event_name.slice(2); // strip "on"
   if (is_capture_event(event_name)) {
-    event_name = event_name.slice(0, -7);
+    event_name = event_name.slice(0, -7); // strip "Capture"
   }
-  return event_name[0].toLowerCase() + event_name.slice(1);
+  return event_name.toLowerCase();
 }
 
 const PASSIVE_EVENTS = ['touchstart', 'touchmove'];

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

@@ -37,6 +37,19 @@ exports[`basic client > handles boolean attributes with no prop value provides 1
 </div>
 `;
 
+exports[`basic client > handles boolean props correctly 1`] = `
+<div>
+  <div
+    data-disabled=""
+  />
+  <input
+    disabled=""
+  />
+  <!---->
+  
+</div>
+`;
+
 exports[`basic client > render semi-dynamic text 1`] = `
 <div>
   <div>

package/tests/client/array.test.ripple

@@ -7,7 +7,7 @@ describe('TrackedArray', () => {
 
 	function render(component) {
 		mount(component, {
-		target: container
+			target: container
 		});
 	}
 
@@ -877,7 +877,7 @@ describe('TrackedArray', () => {
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('[5,4,3,2,1]');
 	});
 
-	it('handles toSorted method with reactivity', () => {
+	it('handles toSorted method with reactivity', (context) => {
 		if (!('toSorted' in Array.prototype)) {
 			context.skip();
 		}
@@ -907,7 +907,7 @@ describe('TrackedArray', () => {
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('[0,1,2,3,4]');
 	});
 
-	it('handles toSpliced method with reactivity', () => {
+	it('handles toSpliced method with reactivity', (context) => {
 		if (!('toSpliced' in Array.prototype)) {
 			context.skip();
 		}