ripple 0.2.170 → 0.2.171

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.170",
+  "version": "0.2.171",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.170"
+    "ripple": "0.2.171"
   }
 }

package/src/compiler/phases/1-parse/index.js

@@ -950,6 +950,16 @@ function RipplePlugin(config) {
 				return this.finishNode(node, isForIn ? 'ForInStatement' : 'ForOfStatement');
 			}
 
+			checkUnreserved(ref) {
+				if (ref.name === 'component') {
+					this.raise(
+						ref.start,
+						'"component" is a Ripple keyword and cannot be used as an identifier',
+					);
+				}
+				return super.checkUnreserved(ref);
+			}
+
 			shouldParseExportStatement() {
 				if (super.shouldParseExportStatement()) {
 					return true;

package/src/compiler/phases/3-transform/client/index.js

@@ -134,7 +134,7 @@ function visit_head_element(node, context) {
 }
 
 function apply_updates(init, update, state) {
-	if (update.length === 1) {
+	if (update.length === 1 && !update[0].needsPrevTracking) {
 		init.push(
 			b.stmt(
 				b.call(
@@ -185,18 +185,27 @@ function apply_updates(init, update, state) {
 					b.var('__' + key, u.expression),
 					b.if(
 						b.binary('!==', b.member(b.id('__prev'), b.id(key)), b.id('__' + key)),
-						b.block([
-							u.operation(b.assignment('=', b.member(b.id('__prev'), b.id(key)), b.id('__' + key))),
-						]),
+						b.block(
+							u.needsPrevTracking
+								? [
+										u.operation(b.id('__' + key), b.member(b.id('__prev'), b.id(key))),
+										b.stmt(
+											b.assignment('=', b.member(b.id('__prev'), b.id(key)), b.id('__' + key)),
+										),
+									]
+								: [
+										u.operation(
+											b.assignment('=', b.member(b.id('__prev'), b.id(key)), b.id('__' + key)),
+										),
+									],
+						),
 					),
 				);
 				index++;
 			} else {
 				const key = index_to_key(index);
 				/** @type {Array<Statement>} */
-				const if_body = [
-					b.stmt(b.assignment('=', b.member(b.id('__prev'), b.id(key)), b.id('__' + key))),
-				];
+				const if_body = [];
 				initial.push(b.prop('init', b.id(key), updates[0].initial));
 				render_statements.push(
 					b.var('__' + key, updates[0].expression),
@@ -207,14 +216,22 @@ function apply_updates(init, update, state) {
 				);
 				for (const u of updates) {
 					index_map.set(u.operation, key);
-					if_body.push(u.operation(b.id('__' + key)));
+					if_body.push(
+						u.needsPrevTracking
+							? u.operation(b.id('__' + key), b.member(b.id('__prev'), b.id(key)))
+							: u.operation(b.id('__' + key)),
+					);
 					index++;
 				}
+				// Update prev after all operations
+				if_body.push(
+					b.stmt(b.assignment('=', b.member(b.id('__prev'), b.id(key)), b.id('__' + key))),
+				);
 			}
 		}
 
 		for (const u of update) {
-			if (!u.initial) {
+			if (!u.initial && !u.needsPrevTracking) {
 				render_statements.push(u.operation);
 			}
 		}
@@ -879,7 +896,6 @@ const visitors = {
 		if (is_dom_element) {
 			let class_attribute = null;
 			let style_attribute = null;
-			/** @type {Array<Statement>} */
 			const local_updates = [];
 			const is_void = is_void_element(node.id.name);
 
@@ -954,7 +970,7 @@ const visitors = {
 							const metadata = { tracking: false, await: false };
 							const expression = visit(attr.value, { ...state, metadata });
 
-							if (name === '$checked' || metadata.tracking) {
+							if (metadata.tracking) {
 								local_updates.push({
 									operation: b.stmt(b.call('_$_.set_checked', id, expression)),
 								});
@@ -1093,14 +1109,27 @@ const visitors = {
 					const expression = visit(style_attribute.value, { ...state, metadata });
 
 					if (metadata.tracking) {
-						local_updates.push({
-							operation: (key) => b.stmt(b.call('_$_.set_style', id, key)),
-							identity: style_attribute.value,
-							expression,
-							initial: b.void0,
-						});
+						if (
+							style_attribute.value.type === 'Literal' ||
+							style_attribute.value.type === 'TemplateLiteral'
+						) {
+							// Doesn't need prev tracking
+							local_updates.push({
+								operation: b.stmt(b.call('_$_.set_style', id, expression, b.void0)),
+							});
+						} else {
+							// Object or unknown - needs prev tracking
+							local_updates.push({
+								operation: (new_value, prev_value) =>
+									b.stmt(b.call('_$_.set_style', id, new_value, prev_value)),
+								identity: style_attribute.value,
+								expression,
+								initial: b.void0,
+								needsPrevTracking: true,
+							});
+						}
 					} else {
-						state.init.push(b.stmt(b.call('_$_.set_style', id, expression)));
+						state.init.push(b.stmt(b.call('_$_.set_style', id, expression, b.void0)));
 					}
 				}
 			}

package/src/runtime/index-client.js

@@ -81,14 +81,18 @@ export { on } from './internal/client/events.js';
 export {
 	bindValue,
 	bindChecked,
+	bindGroup,
 	bindClientWidth,
 	bindClientHeight,
 	bindContentRect,
 	bindContentBoxSize,
 	bindBorderBoxSize,
 	bindDevicePixelContentBoxSize,
+	bindIndeterminate,
 	bindInnerHTML,
 	bindInnerText,
 	bindTextContent,
 	bindNode,
+	bindOffsetWidth,
+	bindOffsetHeight,
 } from './internal/client/bindings.js';

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

@@ -263,6 +263,95 @@ export function bindChecked(maybe_tracked) {
 			set(tracked, input.checked);
 		});
 
+		effect(() => {
+			var value = get(tracked);
+			input.checked = Boolean(value);
+		});
+
+		return clear_event;
+	};
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLInputElement) => void}
+ */
+export function bindIndeterminate(maybe_tracked) {
+	if (!is_tracked_object(maybe_tracked)) {
+		throw not_tracked_type_error('bindIndeterminate()');
+	}
+
+	const tracked = /** @type {Tracked} */ (maybe_tracked);
+
+	return (input) => {
+		const clear_event = on(input, 'change', () => {
+			set(tracked, input.indeterminate);
+		});
+
+		effect(() => {
+			var value = get(tracked);
+			input.indeterminate = Boolean(value);
+		});
+
+		return clear_event;
+	};
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLInputElement) => void}
+ */
+export function bindGroup(maybe_tracked) {
+	if (!is_tracked_object(maybe_tracked)) {
+		throw not_tracked_type_error('bindGroup()');
+	}
+
+	var tracked = /** @type {Tracked} */ (maybe_tracked);
+
+	return (input) => {
+		var is_checkbox = input.getAttribute('type') === 'checkbox';
+
+		// Store the input's value
+		// @ts-ignore
+		input.__value = input.value;
+
+		var clear_event = on(input, 'change', () => {
+			// @ts-ignore
+			var value = input.__value;
+
+			if (is_checkbox) {
+				/** @type {Array<any>} */
+				var current_value = get(tracked) || [];
+
+				if (input.checked) {
+					// Add if not already present
+					if (!current_value.includes(value)) {
+						value = [...current_value, value];
+					} else {
+						value = current_value;
+					}
+				} else {
+					// Remove the value
+					value = current_value.filter((v) => v !== value);
+				}
+			}
+
+			set(tracked, value);
+		});
+
+		effect(() => {
+			var value = get(tracked);
+
+			if (is_checkbox) {
+				value = value || [];
+				// @ts-ignore
+				input.checked = value.includes(input.__value);
+			} else {
+				// @ts-ignore
+				input.checked = value === input.__value;
+			}
+		});
+
 		return clear_event;
 	};
 }

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

@@ -1,6 +1,6 @@
 /** @import { Block } from '#client' */
 
-import { branch, destroy_block, ref } from './blocks.js';
+import { destroy_block, ref } from './blocks.js';
 import { REF_PROP } from './constants.js';
 import {
 	get_descriptors,
@@ -66,13 +66,14 @@ function get_setters(element) {
 /**
  * @param {Element} element
  * @param {any} value
+ * @param {Record<string, string> | undefined} prev
  * @returns {void}
  */
-export function set_style(element, value) {
+export function set_style(element, value, prev = {}) {
 	if (value == null) {
 		element.removeAttribute('style');
 	} else if (typeof value !== 'string') {
-		apply_styles(/** @type {HTMLElement} */ (element), value);
+		apply_styles(/** @type {HTMLElement} */ (element), value, prev);
 	} else {
 		// @ts-ignore
 		element.style.cssText = value;
@@ -97,27 +98,27 @@ export function set_attribute(element, attribute, value) {
 
 /**
  * @param {HTMLElement} element
- * @param {HTMLElement['style']} new_styles
+ * @param {Record<string, string | number>} new_styles
+ * @param {Record<string, string>} prev
  */
-export function apply_styles(element, new_styles) {
+function apply_styles(element, new_styles, prev) {
 	const style = element.style;
-	const new_properties = new Set();
 
-	for (const [property, value] of Object.entries(new_styles)) {
-		const normalized_property = normalize_css_property_name(property);
-		const normalized_value = String(value);
+	// Apply new styles
+	for (const key in new_styles) {
+		const css_prop = normalize_css_property_name(key);
+		const value = String(new_styles[key]);
 
-		if (style.getPropertyValue(normalized_property) !== normalized_value) {
-			style.setProperty(normalized_property, normalized_value);
+		if (!(key in prev) || prev[key] !== value) {
+			style.setProperty(css_prop, value);
 		}
-
-		new_properties.add(normalized_property);
 	}
 
-	for (let i = style.length - 1; i >= 0; i--) {
-		const property = style[i];
-		if (!new_properties.has(property)) {
-			style.removeProperty(property);
+	// 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);
 		}
 	}
 }
@@ -128,13 +129,14 @@ export function apply_styles(element, new_styles) {
  * @param {string} key
  * @param {any} value
  * @param {Record<string, (() => void) | undefined>} remove_listeners
+ * @param {Record<string, any>} prev
  */
-function set_attribute_helper(element, key, value, remove_listeners) {
+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 === 'style') {
-		set_style(/** @type {HTMLElement} */ (element), value);
+		set_style(element, value, prev.style);
 	} else if (key === '#class') {
 		// Special case for static class when spreading props
 		element.classList.add(value);
@@ -167,7 +169,7 @@ export function set_class(dom, value, hash, is_html = true) {
 				: clsx([value, hash]);
 
 	// Removing the attribute when the value is only an empty string causes
-	// peformance issues vs simply making the className an empty string. So
+	// performance 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 === undefined) {
 		dom.removeAttribute('class');
@@ -290,7 +292,7 @@ export function apply_element_spread(element, fn) {
 				if (key === '#class') {
 					continue;
 				}
-				set_attribute_helper(element, key, null, remove_listeners);
+				set_attribute_helper(element, key, null, remove_listeners, prev);
 			}
 		}
 
@@ -309,7 +311,7 @@ export function apply_element_spread(element, fn) {
 				continue;
 			}
 
-			set_attribute_helper(element, key, value, remove_listeners);
+			set_attribute_helper(element, key, value, remove_listeners, prev);
 		}
 		prev = current;
 	};