ripple 0.4.2 → 0.4.4

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

@@ -1,21 +1,9 @@
 /** @import { Block } from '#client' */
 
-import { branch, destroy_block, ref } from './blocks.js';
-import { DESTROYED, REF_PROP } from './constants.js';
-import { isRefProp as is_ref_prop } from '@tsrx/core/runtime/ref';
-import { is_ripple_object } from './utils.js';
-import {
-	get_descriptors,
-	get_own_property_symbols,
-	get_prototype_of,
-} from '@tsrx/core/runtime/language-helpers';
-import { event_listener } from './events.js';
-import { get_attribute_event_name, is_event_attribute } from '@tsrx/core/runtime/events';
-import { get } from './runtime.js';
 import { hydrating } from './hydration.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 import { TEXT_NODE } from '../../../constants.js';
-import { clsx } from 'clsx';
-import { normalize_css_property_name } from '@tsrx/core/runtime/html';
+import { class_name } from '../../../utils/class-name.js';
 
 /**
  * Sets the text of an element whose only child is that text. The template
@@ -31,7 +19,7 @@ import { normalize_css_property_name } from '@tsrx/core/runtime/html';
  */
 export function set_text_content(element, value, prev) {
 	var str = value == null ? '' : value + '';
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		var text = element.firstChild;
 		if (text === null) {
 			if (str !== '') {
@@ -63,166 +51,35 @@ export function set_text(text, value) {
 	// The compiled render block compares against the value it last wrote, so
 	// nothing is cached on the node. Only server-rendered text can already
 	// hold the value; a fresh template text node never does.
-	if (hydrating && text.nodeValue === str) {
+	if (HYDRATION && hydrating && text.nodeValue === str) {
 		return;
 	}
 	text.nodeValue = str;
 }
 
-/** @type {Map<string, string[]>} */
-var setters_cache = new Map();
-
-/**
- * @param {Element} element
- * @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);
-			}
-		}
-
-		proto = get_prototype_of(proto);
-	}
-
-	return setters;
-}
-
-/**
- * @param {Element} element
- * @param {any} value
- * @param {Record<string, string | number | null | undefined> | undefined} prev
- * @returns {void}
- */
-export function set_style(element, value, prev = {}) {
-	if (value == null) {
-		element.removeAttribute('style');
-	} else if (typeof value !== 'string') {
-		apply_styles(/** @type {HTMLElement} */ (element), value, prev);
-	} else {
-		// @ts-ignore
-		element.style.cssText = value;
-	}
-}
-
-/**
- * @param {Element} element
- * @param {string} attribute
- * @param {any} value
- * @returns {void}
- */
-export function set_attribute(element, attribute, value) {
-	if (value == null) {
-		element.removeAttribute(attribute);
-	} else if (typeof value !== 'string' && get_setters(element).includes(attribute)) {
-		/** @type {any} */ (element)[attribute] = value;
-	} else {
-		element.setAttribute(attribute, value);
-	}
-}
-
-/**
- * @param {HTMLElement} element
- * @param {Record<string, string | number | null | undefined>} new_styles
- * @param {Record<string, string | number | null | undefined>} prev
- */
-function apply_styles(element, new_styles, prev) {
-	const style = element.style;
-
-	// Apply new styles
-	for (const key in new_styles) {
-		const css_prop = normalize_css_property_name(key);
-		const raw_value = new_styles[key];
-		const value = raw_value == null ? null : String(raw_value);
-
-		if (!(key in prev) || prev[key] !== value) {
-			style.setProperty(css_prop, value);
-		}
-	}
-
-	// Remove properties that were in prev but not in new_styles
-	for (const key in prev) {
-		if (!(key in new_styles)) {
-			const css_prop = normalize_css_property_name(key);
-			style.removeProperty(css_prop);
-		}
-	}
-}
-
-/**
- * Helper function to set a single attribute
- * @param {Element} element
- * @param {string} key
- * @param {any} value
- * @param {Record<string, (() => void) | undefined>} remove_listeners
- * @param {Record<string | symbol, any>} prev
- */
-function set_attribute_helper(element, key, value, remove_listeners, prev) {
-	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 === 'innerHTML') {
-		element.removeAttribute('innerhtml');
-		/** @type {HTMLElement} */ (element).innerHTML = value == null ? '' : String(value);
-	} else if (key === 'style') {
-		set_style(element, value, prev.style);
-	} else if (key === '#class') {
-		// Special case for the scope classes of an element that spreads props:
-		// one token per scope hash and applied theme.
-		element.classList.add(...String(value).split(' ').filter(Boolean));
-	} else if (typeof key === 'string' && is_event_attribute(key)) {
-		// Handle event handlers in spread props
-		if (remove_listeners[key]) {
-			remove_listeners[key]();
-			remove_listeners[key] = undefined;
-		}
-		if (value != null) {
-			const event_name = get_attribute_event_name(key, value);
-			remove_listeners[key] = event_listener(event_name, element, value);
-		}
-	} else {
-		set_attribute(element, key, value);
-	}
-}
-
 /**
+ * Writes a class the compiler proved to be a string (or nullish). The
+ * compiled render block compares against the class it last applied, so
+ * nothing is cached on the element. Removing the attribute when the value is
+ * only an empty string costs more than an empty className, so the class is
+ * removed only for a nullish value; an element that has no class does not
+ * receive an empty one either (the server omits an empty class attribute as
+ * well).
  * @param {HTMLElement} dom
- * @param {string} value
+ * @param {string | null | undefined} value
  * @param {string} [hash]
  * @param {boolean} [is_html]
  * @returns {void}
  */
 export function set_class(dom, value, hash, is_html = true) {
-	var class_value =
-		value == null
-			? hash === undefined
-				? null
-				: hash
-			: // Fast-path for string values
-				typeof value === 'string'
-				? value + (hash ? ' ' + hash : '')
-				: clsx([value, hash]);
+	/** @type {string | null} */
+	var class_value;
+	if (value == null) {
+		class_value = hash === undefined ? null : hash;
+	} else {
+		class_value = hash ? (value === '' ? hash : value + ' ' + hash) : value;
+	}
 
-	// The compiled render block compares against the class it last applied,
-	// so nothing is cached on the element. Removing the attribute when the
-	// value is only an empty string costs more than an empty className, so the
-	// class is removed only for a nullish value; an element that has no class
-	// does not receive an empty one either (the server omits an empty class
-	// attribute as well).
 	if (class_value === null) {
 		dom.removeAttribute('class');
 	} else if (is_html) {
@@ -234,6 +91,24 @@ export function set_class(dom, value, hash, is_html = true) {
 	}
 }
 
+/**
+ * `set_class` for a value of any shape: arrays, objects and numbers compose
+ * as clsx does. Only a bundle with such a class expression carries the joiner.
+ * @param {HTMLElement} dom
+ * @param {any} value
+ * @param {string} [hash]
+ * @param {boolean} [is_html]
+ * @returns {void}
+ */
+export function set_class_value(dom, value, hash, is_html = true) {
+	set_class(
+		dom,
+		value == null || typeof value === 'string' ? value : class_name(value),
+		hash,
+		is_html,
+	);
+}
+
 /**
  * @param {HTMLInputElement | HTMLProgressElement | HTMLOptionElement} element
  * @param {any} value
@@ -266,18 +141,12 @@ export function set_value(element, value) {
  * @returns {void}
  */
 export function set_checked(element, checked) {
-	var attributes = (element.__attributes ??= {});
-
-	if (
-		attributes.checked ===
-		(attributes.checked =
-			// treat null and undefined the same for the initial value
-			checked ?? undefined)
-	) {
-		return;
+	// Compared against the element itself rather than a record of the last
+	// write: no expando per checkbox, and a box the user just toggled to the
+	// value being set needs no write at all.
+	if (element.checked !== (checked = !!checked)) {
+		element.checked = checked;
 	}
-
-	element.checked = checked;
 }
 
 /**
@@ -296,155 +165,3 @@ export function set_selected(element, selected) {
 		element.removeAttribute('selected');
 	}
 }
-
-/**
- * @param {Element} element
- * @param {() => Record<string | symbol, any>} fn
- * @returns {() => void}
- */
-export function apply_element_spread(element, fn) {
-	/** @type {Record<string | symbol, any>} */
-	var prev = {};
-	/** @type {Record<string | symbol, Block | undefined>} */
-	var effects = {};
-	/** @type {Record<string | symbol, (() => void) | undefined>} */
-	var remove_listeners = {};
-
-	/** @type {Record<symbol, any>} */
-	var prev_symbols = {};
-	/** @type {Record<string, any>} */
-	var prev_ref_props = {};
-
-	return () => {
-		var next = fn();
-		var current_symbols = /** @type {Record<symbol, any>} */ ({});
-
-		for (const symbol of get_own_property_symbols(next)) {
-			if (symbol.description !== REF_PROP) {
-				continue;
-			}
-			const ref_fn = next[symbol];
-			current_symbols[symbol] = ref_fn;
-
-			if (
-				!(symbol in prev_symbols) ||
-				ref_fn !== prev_symbols[symbol] ||
-				(effects[symbol] && (effects[symbol].f & DESTROYED) !== 0)
-			) {
-				if (effects[symbol] && (effects[symbol].f & DESTROYED) === 0) {
-					destroy_block(effects[symbol]);
-				}
-				effects[symbol] = create_spread_ref_effect(element, ref_fn);
-			}
-		}
-
-		for (const symbol of get_own_property_symbols(prev_symbols)) {
-			if (!(symbol in current_symbols) && effects[symbol]) {
-				destroy_block(/** @type {Block} */ (effects[symbol]));
-				effects[symbol] = undefined;
-			}
-		}
-
-		prev_symbols = current_symbols;
-
-		/** @type {Record<string, any>} */
-		var current_ref_props = {};
-		var keys = spread_keys(next);
-
-		for (const key of keys) {
-			const ref_fn = next[key];
-			if (!is_ref_prop(ref_fn)) {
-				continue;
-			}
-
-			current_ref_props[key] = ref_fn;
-
-			if (
-				!(key in prev_ref_props) ||
-				ref_fn !== prev_ref_props[key] ||
-				(effects[key] && (effects[key].f & DESTROYED) !== 0)
-			) {
-				if (effects[key] && (effects[key].f & DESTROYED) === 0) {
-					destroy_block(effects[key]);
-				}
-				effects[key] = create_spread_ref_effect(element, ref_fn);
-			}
-		}
-
-		for (const key in prev_ref_props) {
-			if (!(key in current_ref_props) && effects[key]) {
-				destroy_block(/** @type {Block} */ (effects[key]));
-				effects[key] = undefined;
-			}
-		}
-
-		prev_ref_props = current_ref_props;
-
-		for (let key in remove_listeners) {
-			// Remove event listeners that are no longer present
-			if ((!keys.includes(key) || is_ref_prop(next[key])) && remove_listeners[key]) {
-				remove_listeners[key]();
-				remove_listeners[key] = undefined;
-			}
-		}
-
-		for (const key in prev) {
-			if (!keys.includes(key) || is_ref_prop(next[key])) {
-				if (key === '#class') {
-					continue;
-				}
-				set_attribute_helper(element, key, null, remove_listeners, prev);
-			}
-		}
-
-		/** @type {typeof prev} */
-		const current = {};
-		for (const key of keys) {
-			if (key === 'children') continue;
-
-			let value = next[key];
-			if (is_ref_prop(value)) {
-				continue;
-			}
-			if (is_ripple_object(value)) {
-				value = get(value);
-			}
-			current[key] = value;
-
-			if (key in prev && prev[key] === value && key !== '#class') {
-				continue;
-			}
-
-			set_attribute_helper(element, key, value, remove_listeners, prev);
-		}
-		prev = current;
-	};
-}
-
-/**
- * The keys an element spread applies: every prop of a props instance, or the
- * enumerable keys of a plain object.
- * @param {Record<string | symbol, any>} next
- * @returns {string[]}
- */
-function spread_keys(next) {
-	/** @type {string[]} */
-	var keys = [];
-	for (var key in next) keys.push(key);
-	return keys;
-}
-
-/**
- * Keep spread refs in a branch block so ordinary spread updates do not destroy
- * and recreate the ref block before `apply_element_spread` can compare the
- * previous and current ref values.
- *
- * @param {Element} element
- * @param {any} ref_fn
- * @returns {Block}
- */
-function create_spread_ref_effect(element, ref_fn) {
-	return branch(() => {
-		ref(element, () => ref_fn);
-	});
-}

package/src/runtime/internal/client/root-boundary-enabled.js

@@ -0,0 +1,7 @@
+/**
+ * Whether `mount()` and `hydrate()` render the app under a default
+ * try/pending/catch boundary. The Vite plugin's `rootBoundary: false` build
+ * aliases this module to one exporting `false`; the bundler then drops the
+ * boundary runtime from an app that renders without one.
+ */
+export const ROOT_BOUNDARY = true;