ripple 0.2.115 → 0.2.116

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.115",
+  "version": "0.2.116",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",

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

@@ -167,6 +167,22 @@ function RipplePlugin(config) {
 							}
 						}
 
+						// Check if this is #Map or #Set
+						if (this.input.slice(this.pos, this.pos + 4) === '#Map') {
+							const charAfter = this.pos + 4 < this.input.length ? this.input.charCodeAt(this.pos + 4) : -1;
+							if (charAfter === 40) { // ( character
+								this.pos += 4; // consume '#Map'
+								return this.finishToken(tt.name, '#Map');
+							}
+						}
+						if (this.input.slice(this.pos, this.pos + 4) === '#Set') {
+							const charAfter = this.pos + 4 < this.input.length ? this.input.charCodeAt(this.pos + 4) : -1;
+							if (charAfter === 40) { // ( character
+								this.pos += 4; // consume '#Set'
+								return this.finishToken(tt.name, '#Set');
+							}
+						}
+
 						// Check if this is #server
 						if (this.input.slice(this.pos, this.pos + 7) === '#server') {
 							// Check that next char after 'server' is whitespace, {, . (dot), or EOF
@@ -186,6 +202,27 @@ function RipplePlugin(config) {
 								return this.finishToken(tt.name, '#server');
 							}
 						}
+
+						// Check if this is an invalid #Identifier pattern
+						// Valid patterns: #[, #{, #Map(, #Set(, #server
+						// If we see # followed by an uppercase letter that isn't Map or Set, it's an error
+						if (nextChar >= 65 && nextChar <= 90) { // A-Z
+							// Extract the identifier name
+							let identEnd = this.pos + 1;
+							while (identEnd < this.input.length) {
+								const ch = this.input.charCodeAt(identEnd);
+								if ((ch >= 65 && ch <= 90) || (ch >= 97 && ch <= 122) || (ch >= 48 && ch <= 57) || ch === 95) {
+									// A-Z, a-z, 0-9, _
+									identEnd++;
+								} else {
+									break;
+								}
+							}
+							const identName = this.input.slice(this.pos + 1, identEnd);
+							if (identName !== 'Map' && identName !== 'Set') {
+								this.raise(this.pos, `Invalid tracked syntax '#${identName}'. Only #Map and #Set are currently supported using shorthand tracked syntax.`);
+							}
+						}
 					}
 				}
 				if (code === 64) {
@@ -391,6 +428,12 @@ function RipplePlugin(config) {
 					return this.finishNode(node, 'ServerIdentifier');
 				}
 
+				// Check if this is #Map( or #Set(
+				if (this.type === tt.name && (this.value === '#Map' || this.value === '#Set')) {
+					const type = this.value === '#Map' ? 'TrackedMapExpression' : 'TrackedSetExpression';
+					return this.parseTrackedCollectionExpression(type);
+				}
+
 				// Check if this is a tuple literal starting with #[
 				if (this.type === tt.bracketL && this.value === '#[') {
 					return this.parseTrackedArrayExpression();
@@ -449,6 +492,42 @@ function RipplePlugin(config) {
 				return this.finishNode(node, 'ServerBlock');
 			}
 
+			/**
+			 * Parse `#Map(...)` or `#Set(...)` syntax for tracked collections
+			 * Creates a TrackedMap or TrackedSet node with the arguments property
+			 * @param {string} type - Either 'TrackedMap' or 'TrackedSet'
+			 * @returns {any} TrackedMap or TrackedSet node
+			 */
+			parseTrackedCollectionExpression(type) {
+				const node = this.startNode();
+				this.next(); // consume '#Map' or '#Set'
+				this.expect(tt.parenL); // expect '('
+
+				node.arguments = [];
+
+				// Parse arguments similar to function call arguments
+				let first = true;
+				while (!this.eat(tt.parenR)) {
+					if (!first) {
+						this.expect(tt.comma);
+						if (this.afterTrailingComma(tt.parenR)) break;
+					} else {
+						first = false;
+					}
+
+					if (this.type === tt.ellipsis) {
+						// Spread argument
+						const arg = this.parseSpread();
+						node.arguments.push(arg);
+					} else {
+						// Regular argument
+						node.arguments.push(this.parseMaybeAssign(false));
+					}
+				}
+
+				return this.finishNode(node, type);
+			}
+
 			parseTrackedArrayExpression() {
 				const node = this.startNode();
 				this.next(); // consume the '#['

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

@@ -350,11 +350,9 @@ const visitors = {
 				context.state.imports.add(`import { TrackedArray } from 'ripple'`);
 			}
 
-			return b.new(
-				b.call(
-					b.member(b.id('TrackedArray'), b.id('from')),
-					node.elements.map((el) => context.visit(el)),
-				),
+			return b.call(
+				b.member(b.id('TrackedArray'), b.id('from')),
+				...node.elements.map((el) => context.visit(el)),
 			);
 		}
 
@@ -384,6 +382,48 @@ const visitors = {
 		);
 	},
 
+	TrackedMapExpression(node, context) {
+		if (context.state.to_ts) {
+			if (!context.state.imports.has(`import { TrackedMap } from 'ripple'`)) {
+				context.state.imports.add(`import { TrackedMap } from 'ripple'`);
+			}
+
+			const calleeId = b.id('TrackedMap');
+			// Preserve location from original node for Volar mapping
+			calleeId.loc = node.loc;
+			// Add metadata for Volar mapping - map "TrackedMap" identifier to "#Map" in source
+			calleeId.metadata = { tracked_shorthand: '#Map' };
+			return b.new(calleeId, ...node.arguments.map((arg) => context.visit(arg)));
+		}
+
+		return b.call(
+			'_$_.tracked_map',
+			b.id('__block'),
+			...node.arguments.map((arg) => context.visit(arg)),
+		);
+	},
+
+	TrackedSetExpression(node, context) {
+		if (context.state.to_ts) {
+			if (!context.state.imports.has(`import { TrackedSet } from 'ripple'`)) {
+				context.state.imports.add(`import { TrackedSet } from 'ripple'`);
+			}
+
+			const calleeId = b.id('TrackedSet');
+			// Preserve location from original node for Volar mapping
+			calleeId.loc = node.loc;
+			// Add metadata for Volar mapping - map "TrackedSet" identifier to "#Set" in source
+			calleeId.metadata = { tracked_shorthand: '#Set' };
+			return b.new(calleeId, ...node.arguments.map((arg) => context.visit(arg)));
+		}
+
+		return b.call(
+			'_$_.tracked_set',
+			b.id('__block'),
+			...node.arguments.map((arg) => context.visit(arg)),
+		);
+	},
+
 	TrackedExpression(node, context) {
 		return b.call('_$_.get', context.visit(node.argument));
 	},
@@ -459,7 +499,7 @@ const visitors = {
 				return {
 					...node,
 					id: { ...node.id, name: capitalizedName },
-					init: node.init ? context.visit(node.init) : null
+					init: node.init ? context.visit(node.init) : null,
 				};
 			}
 		}
@@ -1517,12 +1557,18 @@ function transform_ts_child(node, context) {
 			};
 		}
 
-		const jsxElement = b.jsx_element(opening_type, attributes, children, node.selfClosing, closing_type);
+		const jsxElement = b.jsx_element(
+			opening_type,
+			attributes,
+			children,
+			node.selfClosing,
+			closing_type,
+		);
 		// Preserve metadata from Element node for mapping purposes
 		if (node.metadata && (node.metadata.ts_name || node.metadata.original_name)) {
 			jsxElement.metadata = {
 				ts_name: node.metadata.ts_name,
-				original_name: node.metadata.original_name
+				original_name: node.metadata.original_name,
 			};
 		}
 		state.init.push(b.stmt(jsxElement));

package/src/compiler/phases/3-transform/segments.js

@@ -167,18 +167,23 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 			// Only collect tokens from nodes with .loc (skip synthesized nodes like children attribute)
 			if (node.type === 'Identifier' && node.name) {
 				if (node.loc) {
-					// Check if this identifier was capitalized (reverse lookup)
-					const originalName = reverseCapitalizedNames.get(node.name);
-					if (originalName) {
-						// This is a capitalized name in generated code, map to lowercase in source
-						tokens.push({ source: originalName, generated: node.name });
+					// Check if this identifier has tracked_shorthand metadata (e.g., TrackedMap -> #Map)
+					if (node.metadata?.tracked_shorthand) {
+						tokens.push({ source: node.metadata.tracked_shorthand, generated: node.name });
 					} else {
-						// Check if this identifier should be capitalized (forward lookup)
-						const capitalizedName = capitalizedNames.get(node.name);
-						if (capitalizedName) {
-							tokens.push({ source: node.name, generated: capitalizedName });
+						// Check if this identifier was capitalized (reverse lookup)
+						const originalName = reverseCapitalizedNames.get(node.name);
+						if (originalName) {
+							// This is a capitalized name in generated code, map to lowercase in source
+							tokens.push({ source: originalName, generated: node.name });
 						} else {
-							tokens.push(node.name);
+							// Check if this identifier should be capitalized (forward lookup)
+							const capitalizedName = capitalizedNames.get(node.name);
+							if (capitalizedName) {
+								tokens.push({ source: node.name, generated: capitalizedName });
+							} else {
+								tokens.push(node.name);
+							}
 						}
 					}
 				}

package/src/compiler/types/index.d.ts

@@ -78,6 +78,22 @@ export interface TrackedObjectExpression extends Omit<ObjectExpression, 'type'>
 	properties: (Property | SpreadElement)[];
 }
 
+/**
+ * Tracked Map expression node
+ */
+export interface TrackedMapExpression extends Omit<Node, 'type'> {
+	type: 'TrackedMapExpression';
+	arguments: (Expression | SpreadElement)[];
+}
+
+/**
+ * Tracked Set expression node
+ */
+export interface TrackedSetExpression extends Omit<Node, 'type'> {
+	type: 'TrackedSetExpression';
+	arguments: (Expression | SpreadElement)[];
+}
+
 /**
  * Ripple component node
  */

package/src/runtime/index-client.js

@@ -1,10 +1,10 @@
-/** @import { Block, Tracked } from '#client' */
+/** @import { Block } from '#client' */
 
-import { destroy_block, effect, render, root } from './internal/client/blocks.js';
-import { handle_root_events, on } from './internal/client/events.js';
+import { destroy_block, root } from './internal/client/blocks.js';
+import { handle_root_events } from './internal/client/events.js';
 import { init_operations } from './internal/client/operations.js';
-import { active_block, get, set, tick } from './internal/client/runtime.js';
-import { create_anchor, is_array, is_tracked_object } from './internal/client/utils.js';
+import { active_block } from './internal/client/runtime.js';
+import { create_anchor } from './internal/client/utils.js';
 import { remove_ssr_css } from './internal/client/css.js';
 
 // Re-export JSX runtime functions for jsxImportSource: "ripple"
@@ -78,182 +78,16 @@ export { ref_prop as createRefKey } from './internal/client/runtime.js';
 
 export { on } from './internal/client/events.js';
 
-/**
- * @param {string} value
- */
-function to_number(value) {
-	return value === '' ? null : +value;
-}
-
-/**
- * @param {HTMLInputElement} input
- */
-function is_numberlike_input(input) {
-	var type = input.type;
-	return type === 'number' || type === 'range';
-}
-
-/** @param {HTMLOptionElement} option */
-function get_option_value(option) {
-	return option.value;
-}
-
-/**
- * Selects the correct option(s) (depending on whether this is a multiple select)
- * @template V
- * @param {HTMLSelectElement} select
- * @param {V} value
- * @param {boolean} mounting
- */
-function select_option(select, value, mounting = false) {
-	if (select.multiple) {
-		// If value is null or undefined, keep the selection as is
-		if (value == undefined) {
-			return;
-		}
-
-		// If not an array, warn and keep the selection as is
-		if (!is_array(value)) {
-			// TODO
-		}
-
-		// Otherwise, update the selection
-		for (var option of select.options) {
-			option.selected = /** @type {string[]} */ (value).includes(get_option_value(option));
-		}
-
-		return;
-	}
-
-	for (option of select.options) {
-		var option_value = get_option_value(option);
-		if (option_value === value) {
-			option.selected = true;
-			return;
-		}
-	}
-
-	if (!mounting || value !== undefined) {
-		select.selectedIndex = -1; // no option should be selected
-	}
-}
-
-/**
- * @param {unknown} maybe_tracked
- * @returns {(node: HTMLInputElement | HTMLSelectElement) => void}
- */
-export function bindValue(maybe_tracked) {
-	if (!is_tracked_object(maybe_tracked)) {
-		throw new TypeError('bindValue() argument is not a tracked object');
-	}
-
-	var block = /** @type {Block} */ (active_block);
-	var tracked = /** @type {Tracked} */ (maybe_tracked);
-
-	return (node) => {
-		var clear_event;
-
-		if (node.tagName === 'SELECT') {
-			var select = /** @type {HTMLSelectElement} */ (node);
-			var mounting = true;
-
-			clear_event = on(select, 'change', async () => {
-				var query = ':checked';
-				/** @type {unknown} */
-				var value;
-
-				if (select.multiple) {
-					value = [].map.call(select.querySelectorAll(query), get_option_value);
-				} else {
-					/** @type {HTMLOptionElement | null} */
-					var selected_option =
-						select.querySelector(query) ??
-						// will fall back to first non-disabled option if no option is selected
-						select.querySelector('option:not([disabled])');
-					value = selected_option && get_option_value(selected_option);
-				}
-
-				set(tracked, value, block);
-			});
-
-			effect(() => {
-				var value = get(tracked);
-				select_option(select, value, mounting);
-
-				// Mounting and value undefined -> take selection from dom
-				if (mounting && value === undefined) {
-					/** @type {HTMLOptionElement | null} */
-					var selected_option = select.querySelector(':checked');
-					if (selected_option !== null) {
-						value = get_option_value(selected_option);
-						set(tracked, value, block);
-					}
-				}
-
-				mounting = false;
-			});
-		} else {
-			var input = /** @type {HTMLInputElement} */ (node);
-
-			clear_event = on(input, 'input', async () => {
-				/** @type {any} */
-				var value = input.value;
-				value = is_numberlike_input(input) ? to_number(value) : value;
-				set(tracked, value, block);
-
-				await tick();
-
-				if (value !== (value = get(tracked))) {
-					var start = input.selectionStart;
-					var end = input.selectionEnd;
-					input.value = value ?? '';
-
-					// Restore selection
-					if (end !== null) {
-						input.selectionStart = start;
-						input.selectionEnd = Math.min(end, input.value.length);
-					}
-				}
-			});
-
-			render(() => {
-				var value = get(tracked);
-
-				if (is_numberlike_input(input) && value === to_number(input.value)) {
-					return;
-				}
-
-				if (input.type === 'date' && !value && !input.value) {
-					return;
-				}
-
-				if (value !== input.value) {
-					input.value = value ?? '';
-				}
-			});
-
-			return clear_event;
-		}
-	};
-}
-
-/**
- * @param {unknown} maybe_tracked
- * @returns {(node: HTMLInputElement) => void}
- */
-export function bindChecked(maybe_tracked) {
-	if (!is_tracked_object(maybe_tracked)) {
-		throw new TypeError('bindChecked() argument is not a tracked object');
-	}
-
-	const block = /** @type {any} */ (active_block);
-	const tracked = /** @type {Tracked<any>} */ (maybe_tracked);
-
-	return (input) => {
-		const clear_event = on(input, 'change', () => {
-			set(tracked, input.checked, block);
-		});
-
-		return clear_event;
-	};
-}
+export {
+	bindValue,
+	bindChecked,
+	bindClientWidth,
+	bindClientHeight,
+	bindContentRect,
+	bindContentBoxSize,
+	bindBorderBoxSize,
+	bindDevicePixelContentBoxSize,
+	bindInnerHTML,
+	bindInnerText,
+	bindTextContent,
+} from './internal/client/bindings.js';