ripple 0.2.107 → 0.2.109

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

@@ -3,16 +3,16 @@
 import { destroy_block, ref } from './blocks.js';
 import { REF_PROP } from './constants.js';
 import {
-  get_descriptors,
-  get_own_property_symbols,
-  get_prototype_of,
-  is_tracked_object,
+	get_descriptors,
+	get_own_property_symbols,
+	get_prototype_of,
+	is_tracked_object,
 } from './utils.js';
 import { delegate, event } from './events.js';
 import {
-  get_attribute_event_name,
-  is_delegated,
-  is_event_attribute,
+	get_attribute_event_name,
+	is_delegated,
+	is_event_attribute,
 } from '../../../utils/events.js';
 import { get } from './runtime.js';
 import { clsx } from 'clsx';
@@ -24,14 +24,14 @@ import { normalize_css_property_name } from '../../../utils/normalize_css_proper
  * @returns {void}
  */
 export function set_text(text, value) {
-  // For objects, we apply string coercion
-  var str = value == null ? '' : typeof value === 'object' ? value + '' : value;
-  // @ts-expect-error
-  if (str !== (text.__t ??= text.nodeValue)) {
-    // @ts-expect-error
-    text.__t = str;
-    text.nodeValue = str + '';
-  }
+	// For objects, we apply string coercion
+	var str = value == null ? '' : typeof value === 'object' ? value + '' : value;
+	// @ts-expect-error
+	if (str !== (text.__t ??= text.nodeValue)) {
+		// @ts-expect-error
+		text.__t = str;
+		text.nodeValue = str + '';
+	}
 }
 
 /** @type {Map<string, string[]>} */
@@ -42,29 +42,29 @@ var setters_cache = new Map();
  * @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);
-      }
-    }
+	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);
-  }
+		proto = get_prototype_of(proto);
+	}
 
-  return setters;
+	return setters;
 }
 
 /**
@@ -74,25 +74,25 @@ function get_setters(element) {
  * @returns {void}
  */
 export function set_attribute(element, attribute, value) {
-  // @ts-expect-error
-  var attributes = (element.__attributes ??= {});
+	// @ts-expect-error
+	var attributes = (element.__attributes ??= {});
 
-  if (attributes[attribute] === (attributes[attribute] = value)) return;
+	if (attributes[attribute] === (attributes[attribute] = value)) return;
 
-  if (attribute === 'style' && '__styles' in element) {
-    // reset styles to force style: directive to update
-    element.__styles = {};
-  }
+	if (attribute === 'style' && '__styles' in element) {
+		// reset styles to force style: directive to update
+		element.__styles = {};
+	}
 
-  if (value == null) {
-    element.removeAttribute(attribute);
-  } else if (attribute === 'style' && typeof value !== 'string') {
+	if (value == null) {
+		element.removeAttribute(attribute);
+	} else if (attribute === 'style' && typeof value !== 'string') {
 		apply_styles(/** @type {HTMLElement} */ (element), value);
 	} else if (typeof value !== 'string' && get_setters(element).includes(attribute)) {
-    /** @type {any} */ (element)[attribute] = value;
-  } else {
-    element.setAttribute(attribute, value);
-  }
+		/** @type {any} */ (element)[attribute] = value;
+	} else {
+		element.setAttribute(attribute, value);
+	}
 }
 
 /**
@@ -103,7 +103,7 @@ export function apply_styles(element, newStyles) {
 	const style = element.style;
 	const new_properties = new Set();
 
-	for(const [property, value] of Object.entries(newStyles)) {
+	for (const [property, value] of Object.entries(newStyles)) {
 		const normalized_property = normalize_css_property_name(property);
 		const normalized_value = String(value);
 
@@ -128,36 +128,63 @@ export function apply_styles(element, newStyles) {
  * @returns {void}
  */
 export function set_attributes(element, attributes) {
-  for (const key in attributes) {
-    if (key === 'children') continue;
+	let found_enumerable_keys = false;
 
-    let value = attributes[key];
+	for (const key in attributes) {
+		if (key === 'children') continue;
+		found_enumerable_keys = true;
 
-    if (is_tracked_object(value)) {
-      value = get(value);
-    }
+		let value = attributes[key];
+		if (is_tracked_object(value)) {
+			value = get(value);
+		}
+		set_attribute_helper(element, key, value);
+	}
+
+	// Only if no enumerable keys but attributes object exists
+	// This handles spread_props Proxy objects from dynamic elements with {...spread}
+	if (!found_enumerable_keys && attributes) {
+		const allKeys = Reflect.ownKeys(attributes);
+		for (const key of allKeys) {
+			if (key === 'children') continue;
+			if (typeof key === 'symbol') continue; // Skip symbols - handled by apply_element_spread
+
+			let value = attributes[key];
+			if (is_tracked_object(value)) {
+				value = get(value);
+			}
+			set_attribute_helper(element, key, value);
+		}
+	}
+}
 
-    if (key === 'class') {
-      const is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
-      set_class(/** @type {HTMLElement} */ (element), value, undefined, is_html);
-    } else if (key === '#class') {
-      // Special case for static class when spreading props
-      element.classList.add(value);
-    } else if (is_event_attribute(key)) {
-      // Handle event handlers in spread props
-      const event_name = get_attribute_event_name(key);
-
-      if (is_delegated(event_name)) {
-        // Use delegation for delegated events
-        /** @type {any} */ (element)['__' + event_name] = value;
-        delegate([event_name]);
-      } else {
-        // Use addEventListener for non-delegated events
-        event(event_name, element, value);
-      }
+/**
+ * Helper function to set a single attribute
+ * @param {Element} element
+ * @param {string} key
+ * @param {any} value
+*/
+function set_attribute_helper(element, key, value) {
+  if (key === 'class') {
+    const is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
+    set_class(/** @type {HTMLElement} */ (element), value, undefined, is_html);
+  } else if (key === '#class') {
+    // Special case for static class when spreading props
+    element.classList.add(value);
+  } else if (typeof key === 'string' && is_event_attribute(key)) {
+    // Handle event handlers in spread props
+    const event_name = get_attribute_event_name(key);
+
+    if (is_delegated(event_name)) {
+      // Use delegation for delegated events
+      /** @type {any} */ (element)['__' + event_name] = value;
+      delegate([event_name]);
     } else {
-      set_attribute(element, key, value);
+      // Use addEventListener for non-delegated events
+      event(event_name, element, value);
     }
+  } else {
+    set_attribute(element, key, value);
   }
 }
 
@@ -167,7 +194,7 @@ export function set_attributes(element, attributes) {
  * @returns {string}
  */
 function to_class(value, hash) {
-  return value == null ? hash ?? '' : clsx([value, hash]);
+	return value == null ? (hash ?? '') : clsx([value, hash]);
 }
 
 /**
@@ -178,27 +205,27 @@ function to_class(value, hash) {
  * @returns {void}
  */
 export function set_class(dom, value, hash, is_html = true) {
-  // @ts-expect-error need to add __className to patched prototype
-  var prev_class_name = dom.__className;
-  var next_class_name = to_class(value, hash);
-
-  if (prev_class_name !== next_class_name) {
-    // Removing the attribute when the value is only an empty string causes
-    // peformance issues vs simply making the className an empty string. So
-    // we should only remove the class if the the value is nullish.
-    if (value == null && !hash) {
-      dom.removeAttribute('class');
-    } else {
-      if (is_html) {
-        dom.className = next_class_name;
-      } else {
-        dom.setAttribute('class', next_class_name);
-      }
-    }
+	// @ts-expect-error need to add __className to patched prototype
+	var prev_class_name = dom.__className;
+	var next_class_name = to_class(value, hash);
+
+	if (prev_class_name !== next_class_name) {
+		// Removing the attribute when the value is only an empty string causes
+		// peformance issues vs simply making the className an empty string. So
+		// we should only remove the class if the the value is nullish.
+		if (value == null && !hash) {
+			dom.removeAttribute('class');
+		} else {
+			if (is_html) {
+				dom.className = next_class_name;
+			} else {
+				dom.setAttribute('class', next_class_name);
+			}
+		}
 
-    // @ts-expect-error need to add __className to patched prototype
-    dom.__className = next_class_name;
-  }
+		// @ts-expect-error need to add __className to patched prototype
+		dom.__className = next_class_name;
+	}
 }
 
 /**
@@ -207,21 +234,21 @@ export function set_class(dom, value, hash, is_html = true) {
  * @returns {void}
  */
 export function set_value(element, value) {
-  // @ts-expect-error
-  var attributes = (element.__attributes ??= {});
-
-  if (
-    attributes.value ===
-      (attributes.value =
-        // treat null and undefined the same for the initial value
-        value ?? undefined) ||
-    // `progress` elements always need their value set when it's `0`
-    (element.value === value && (value !== 0 || element.nodeName !== 'PROGRESS'))
-  ) {
-    return;
-  }
+	// @ts-expect-error
+	var attributes = (element.__attributes ??= {});
+
+	if (
+		attributes.value ===
+			(attributes.value =
+				// treat null and undefined the same for the initial value
+				value ?? undefined) ||
+		// `progress` elements always need their value set when it's `0`
+		(element.value === value && (value !== 0 || element.nodeName !== 'PROGRESS'))
+	) {
+		return;
+	}
 
-  element.value = value ?? '';
+	element.value = value ?? '';
 }
 
 /**
@@ -230,19 +257,19 @@ export function set_value(element, value) {
  * @returns {void}
  */
 export function set_checked(element, checked) {
-  // @ts-expect-error
-  var attributes = (element.__attributes ??= {});
-
-  if (
-    attributes.checked ===
-    (attributes.checked =
-      // treat null and undefined the same for the initial value
-      checked ?? undefined)
-  ) {
-    return;
-  }
+	// @ts-expect-error
+	var attributes = (element.__attributes ??= {});
+
+	if (
+		attributes.checked ===
+		(attributes.checked =
+			// treat null and undefined the same for the initial value
+			checked ?? undefined)
+	) {
+		return;
+	}
 
-  element.checked = checked;
+	element.checked = checked;
 }
 
 /**
@@ -251,15 +278,15 @@ export function set_checked(element, checked) {
  * @returns {void}
  */
 export function set_selected(element, selected) {
-  if (selected) {
-    // The selected option could've changed via user selection, and
-    // setting the value without this check would set it back.
-    if (!element.hasAttribute('selected')) {
-      element.setAttribute('selected', '');
-    }
-  } else {
-    element.removeAttribute('selected');
-  }
+	if (selected) {
+		// The selected option could've changed via user selection, and
+		// setting the value without this check would set it back.
+		if (!element.hasAttribute('selected')) {
+			element.setAttribute('selected', '');
+		}
+	} else {
+		element.removeAttribute('selected');
+	}
 }
 
 /**
@@ -268,35 +295,35 @@ export function set_selected(element, selected) {
  * @returns {() => void}
  */
 export function apply_element_spread(element, fn) {
-  /** @type {Record<string | symbol, any> | undefined} */
-  var prev;
-  /** @type {Record<symbol, Block>} */
-  var effects = {};
-
-  return () => {
-    var next = fn();
-
-    for (let symbol of get_own_property_symbols(effects)) {
-      if (!next[symbol]) {
-        destroy_block(effects[symbol]);
-      }
-    }
+	/** @type {Record<string | symbol, any> | undefined} */
+	var prev;
+	/** @type {Record<symbol, Block>} */
+	var effects = {};
+
+	return () => {
+		var next = fn();
+
+		for (let symbol of get_own_property_symbols(effects)) {
+			if (!next[symbol]) {
+				destroy_block(effects[symbol]);
+			}
+		}
 
-    for (const symbol of get_own_property_symbols(next)) {
-      var ref_fn = next[symbol];
+		for (const symbol of get_own_property_symbols(next)) {
+			var ref_fn = next[symbol];
 
-      if (symbol.description === REF_PROP && (!prev || ref_fn !== prev[symbol])) {
-        if (effects[symbol]) {
-          destroy_block(effects[symbol]);
-        }
-        effects[symbol] = ref(element, () => ref_fn);
-      }
+			if (symbol.description === REF_PROP && (!prev || ref_fn !== prev[symbol])) {
+				if (effects[symbol]) {
+					destroy_block(effects[symbol]);
+				}
+				effects[symbol] = ref(element, () => ref_fn);
+			}
 
-      next[symbol] = ref_fn;
-    }
+			next[symbol] = ref_fn;
+		}
 
-    set_attributes(element, next);
+		set_attributes(element, next);
 
-    prev = next;
-  };
+		prev = next;
+	};
 }

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

@@ -412,7 +412,7 @@ function is_tracking_dirty(tracking) {
 		var tracked = tracking.t;
 
 		if ((tracked.f & DERIVED) !== 0) {
-			update_derived(/** @type {Derived} **/(tracked));
+			update_derived(/** @type {Derived} **/ (tracked));
 		}
 
 		if (tracked.c > tracking.c) {
@@ -472,7 +472,7 @@ export function async_computed(fn, block) {
 		}
 
 		promise.then((v) => {
-			if (parent && is_destroyed(/** @type {Block} */(parent))) {
+			if (parent && is_destroyed(/** @type {Block} */ (parent))) {
 				return;
 			}
 			if (promise === current && t.v !== v) {
@@ -746,7 +746,7 @@ export function get(tracked) {
 	}
 
 	return (tracked.f & DERIVED) !== 0
-		? get_derived(/** @type {Derived} */(tracked))
+		? get_derived(/** @type {Derived} */ (tracked))
 		: get_tracked(tracked);
 }
 
@@ -775,7 +775,9 @@ export function get_tracked(tracked) {
  */
 export function set(tracked, value, block) {
 	if (!is_mutating_allowed) {
-		throw new Error('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
+		throw new Error(
+			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
+		);
 	}
 
 	var old_value = tracked.v;
@@ -1152,7 +1154,7 @@ export async function maybe_tracked(v) {
 		} else {
 			value = await async_computed(async () => {
 				return await get_tracked(v);
-			}, /** @type {Block} */(active_block));
+			}, /** @type {Block} */ (active_block));
 		}
 	} else {
 		value = await v;

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

@@ -1,10 +1,10 @@
 /** @import { Block } from '#client' */
 
 import {
-  TEMPLATE_FRAGMENT,
-  TEMPLATE_USE_IMPORT_NODE,
-  TEMPLATE_SVG_NAMESPACE,
-  TEMPLATE_MATHML_NAMESPACE,
+	TEMPLATE_FRAGMENT,
+	TEMPLATE_USE_IMPORT_NODE,
+	TEMPLATE_SVG_NAMESPACE,
+	TEMPLATE_MATHML_NAMESPACE,
 } from '../../../constants.js';
 import { first_child, is_firefox } from './operations.js';
 import { active_block } from './runtime.js';
@@ -15,17 +15,17 @@ import { active_block } from './runtime.js';
  * @param {Node} end - The end node.
  */
 export function assign_nodes(start, end) {
-  var block = /** @type {Block} */ (active_block);
-  var s = block.s;
-  if (s === null) {
-    block.s = {
-      start,
-      end,
-    };
-  } else if (s.start === null) {
-    s.start = start;
-    s.end = end;
-  }
+	var block = /** @type {Block} */ (active_block);
+	var s = block.s;
+	if (s === null) {
+		block.s = {
+			start,
+			end,
+		};
+	} else if (s.start === null) {
+		s.start = start;
+		s.end = end;
+	}
 }
 
 /**
@@ -35,16 +35,20 @@ export function assign_nodes(start, end) {
  * @param {boolean} use_mathml_namespace - Whether to use MathML namespace.
  * @returns {DocumentFragment}
  */
-export function create_fragment_from_html(html, use_svg_namespace = false, use_mathml_namespace = false) {
-  if (use_svg_namespace) {
-    return from_namespace(html, 'svg');
-  }
-  if (use_mathml_namespace) {
-    return from_namespace(html, 'math');
-  }
-  var elem = document.createElement('template');
-  elem.innerHTML = html;
-  return elem.content;
+export function create_fragment_from_html(
+	html,
+	use_svg_namespace = false,
+	use_mathml_namespace = false,
+) {
+	if (use_svg_namespace) {
+		return from_namespace(html, 'svg');
+	}
+	if (use_mathml_namespace) {
+		return from_namespace(html, 'math');
+	}
+	var elem = document.createElement('template');
+	elem.innerHTML = html;
+	return elem.content;
 }
 
 /**
@@ -54,38 +58,40 @@ export function create_fragment_from_html(html, use_svg_namespace = false, use_m
  * @returns {() => Node}
  */
 export function template(content, flags) {
-  var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
-  var use_import_node = (flags & TEMPLATE_USE_IMPORT_NODE) !== 0;
-  var use_svg_namespace = (flags & TEMPLATE_SVG_NAMESPACE) !== 0;
-  var use_mathml_namespace = (flags & TEMPLATE_MATHML_NAMESPACE) !== 0;
-  /** @type {Node | DocumentFragment | undefined} */
-  var node;
-  var has_start = !content.startsWith('<!>');
+	var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
+	var use_import_node = (flags & TEMPLATE_USE_IMPORT_NODE) !== 0;
+	var use_svg_namespace = (flags & TEMPLATE_SVG_NAMESPACE) !== 0;
+	var use_mathml_namespace = (flags & TEMPLATE_MATHML_NAMESPACE) !== 0;
+	/** @type {Node | DocumentFragment | undefined} */
+	var node;
+	var has_start = !content.startsWith('<!>');
 
-  return () => {
-    if (node === undefined) {
-      node = create_fragment_from_html(
-        has_start ? content : '<!>' + content,
-        use_svg_namespace,
-        use_mathml_namespace,
-      );
-      if (!is_fragment) node = /** @type {Node} */ (first_child(node));
-    }
+	return () => {
+		if (node === undefined) {
+			node = create_fragment_from_html(
+				has_start ? content : '<!>' + content,
+				use_svg_namespace,
+				use_mathml_namespace,
+			);
+			if (!is_fragment) node = /** @type {Node} */ (first_child(node));
+		}
 
-    var clone =
-      use_import_node || is_firefox ? document.importNode(/** @type {Node} */ (node), true) : /** @type {Node} */ (node).cloneNode(true);
+		var clone =
+			use_import_node || is_firefox
+				? document.importNode(/** @type {Node} */ (node), true)
+				: /** @type {Node} */ (node).cloneNode(true);
 
-    if (is_fragment) {
-      var start = first_child(clone);
-      var end = clone.lastChild;
+		if (is_fragment) {
+			var start = first_child(clone);
+			var end = clone.lastChild;
 
-      assign_nodes(/** @type {Node} */ (start), /** @type {Node} */ (end));
-    } else {
-      assign_nodes(clone, clone);
-    }
+			assign_nodes(/** @type {Node} */ (start), /** @type {Node} */ (end));
+		} else {
+			assign_nodes(clone, clone);
+		}
 
-    return clone;
-  };
+		return clone;
+	};
 }
 
 /**
@@ -94,7 +100,7 @@ export function template(content, flags) {
  * @param {Node} dom - The DOM node to append.
  */
 export function append(anchor, dom) {
-  anchor.before(/** @type {Node} */ (dom));
+	anchor.before(/** @type {Node} */ (dom));
 }
 
 /**
@@ -104,18 +110,18 @@ export function append(anchor, dom) {
  * @returns {DocumentFragment}
  */
 function from_namespace(content, ns = 'svg') {
-  var wrapped = `<${ns}>${content}</${ns}>`;
+	var wrapped = `<${ns}>${content}</${ns}>`;
 
-  var elem = document.createElement('template');
-  elem.innerHTML = wrapped;
-  var fragment = elem.content;
+	var elem = document.createElement('template');
+	elem.innerHTML = wrapped;
+	var fragment = elem.content;
 
-  var root = /** @type {Element} */ (first_child(fragment));
-  var result = document.createDocumentFragment();
+	var root = /** @type {Element} */ (first_child(fragment));
+	var result = document.createDocumentFragment();
 
-  while (first_child(root)) {
-    result.appendChild(/** @type {Node} */ (first_child(root)));
-  }
+	while (first_child(root)) {
+		result.appendChild(/** @type {Node} */ (first_child(root)));
+	}
 
-  return result;
+	return result;
 }