ripple 0.2.113 → 0.2.115

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.113",
+  "version": "0.2.115",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -38,11 +38,6 @@
       "require": "./src/compiler/index.js",
       "default": "./src/compiler/index.js"
     },
-    "./bindings": {
-      "types": "./src/bindings/index.d.ts",
-      "require": "./src/bindings/index.js",
-      "default": "./src/bindings/index.js"
-    },
     "./validator": {
       "types": "./types/index.d.ts",
       "require": "./validator/index.js",

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

@@ -1306,6 +1306,7 @@ function RipplePlugin(config) {
 				}
 
 				if (this.value === 'component') {
+					this.awaitPos = 0;
 					const node = this.startNode();
 					node.type = 'Component';
 					node.css = null;

package/src/compiler/phases/2-analyze/index.js

@@ -567,6 +567,23 @@ const visitors = {
 
 		mark_control_flow_has_template(path);
 
+		// Store capitalized name for dynamic components/elements
+		if (node.id.tracked) {
+			const original_name = node.id.name;
+			const capitalized_name = original_name.charAt(0).toUpperCase() + original_name.slice(1);
+			node.metadata.ts_name = capitalized_name;
+			node.metadata.original_name = original_name;
+
+			// Mark the binding as a dynamic component so we can capitalize it everywhere
+			const binding = context.state.scope.get(original_name);
+			if (binding) {
+				if (!binding.metadata) {
+					binding.metadata = {};
+				}
+				binding.metadata.is_dynamic_component = true;
+			}
+		}
+
 		if (is_dom_element) {
 			if (node.id.name === 'head') {
 				// head validation

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

@@ -161,6 +161,15 @@ const visitors = {
 		if (is_reference(node, parent)) {
 			if (context.state.to_ts) {
 				if (node.tracked) {
+					// Check if this identifier is used as a dynamic component/element
+					// by checking if it has a capitalized name in metadata
+					const binding = context.state.scope.get(node.name);
+					if (binding?.metadata?.is_dynamic_component) {
+						// Capitalize the identifier for TypeScript
+						const capitalizedName = node.name.charAt(0).toUpperCase() + node.name.slice(1);
+						const capitalizedNode = { ...node, name: capitalizedName };
+						return b.member(capitalizedNode, b.literal('#v'), true);
+					}
 					return b.member(node, b.literal('#v'), true);
 				}
 			} else {
@@ -204,7 +213,7 @@ const visitors = {
 		return {
 			...node,
 			specifiers: node.specifiers
-				.filter((spec) => spec.importKind !== 'type')
+				.filter((spec) => context.state.to_ts || spec.importKind !== 'type')
 				.map((spec) => context.visit(spec)),
 		};
 	},
@@ -441,6 +450,22 @@ const visitors = {
 		return context.next();
 	},
 
+	VariableDeclarator(node, context) {
+		// In TypeScript mode, capitalize identifiers that are used as dynamic components
+		if (context.state.to_ts && node.id.type === 'Identifier') {
+			const binding = context.state.scope.get(node.id.name);
+			if (binding?.metadata?.is_dynamic_component) {
+				const capitalizedName = node.id.name.charAt(0).toUpperCase() + node.id.name.slice(1);
+				return {
+					...node,
+					id: { ...node.id, name: capitalizedName },
+					init: node.init ? context.visit(node.init) : null
+				};
+			}
+		}
+		return context.next();
+	},
+
 	FunctionDeclaration(node, context) {
 		return visit_function(node, context);
 	},
@@ -1397,7 +1422,8 @@ function transform_ts_child(node, context) {
 		// Do we need to do something special here?
 		state.init.push(b.stmt(visit(node.expression, { ...state })));
 	} else if (node.type === 'Element') {
-		const type = node.id.name;
+		// Use capitalized name for dynamic components/elements in TypeScript output
+		const type = node.metadata?.ts_name || node.id.name;
 		const children = [];
 		let has_children_props = false;
 
@@ -1463,7 +1489,17 @@ function transform_ts_child(node, context) {
 		}
 
 		const opening_type = b.jsx_id(type);
-		opening_type.loc = node.id.loc;
+		// Use node.id.loc if available, otherwise create a loc based on the element's position
+		opening_type.loc = node.id.loc || {
+			start: {
+				line: node.loc.start.line,
+				column: node.loc.start.column + 2, // After "<@"
+			},
+			end: {
+				line: node.loc.start.line,
+				column: node.loc.start.column + 2 + type.length,
+			},
+		};
 
 		let closing_type = undefined;
 
@@ -1481,9 +1517,15 @@ function transform_ts_child(node, context) {
 			};
 		}
 
-		state.init.push(
-			b.stmt(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
+			};
+		}
+		state.init.push(b.stmt(jsxElement));
 	} else if (node.type === 'IfStatement') {
 		const consequent_scope = context.state.scopes.get(node.consequent);
 		const consequent = b.block(

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

@@ -5,6 +5,14 @@ export const mapping_data = {
 	completion: true,
 	semantic: true,
 	navigation: true,
+	rename: true,
+	codeActions: false, // set to false to disable auto import when importing yourself
+	formatting: false, // not doing formatting through Volar, using Prettier.
+	// these 3 below will be true by default
+	// leaving for reference
+	// hover: true,
+	// definition: true,
+	// references: true,
 };
 
 /**
@@ -22,6 +30,26 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	let sourceIndex = 0;
 	let generatedIndex = 0;
 
+	// Map to track capitalized names: original name -> capitalized name
+	/** @type {Map<string, string>} */
+	const capitalizedNames = new Map();
+	// Reverse map: capitalized name -> original name
+	/** @type {Map<string, string>} */
+	const reverseCapitalizedNames = new Map();
+
+	// Pre-walk to collect capitalized names from JSXElement nodes (transformed AST)
+	// These are identifiers that are used as dynamic components/elements
+	walk(ast, null, {
+		_(node, { next }) {
+			// Check JSXElement nodes with metadata (preserved from Element nodes)
+			if (node.type === 'JSXElement' && node.metadata?.ts_name && node.metadata?.original_name) {
+				capitalizedNames.set(node.metadata.original_name, node.metadata.ts_name);
+				reverseCapitalizedNames.set(node.metadata.ts_name, node.metadata.original_name);
+			}
+			next();
+		}
+	});
+
 	/**
 	 * Check if character is a word boundary (not alphanumeric or underscore)
 	 * @param {string} char
@@ -31,6 +59,29 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 		return char === undefined || !/[a-zA-Z0-9_$]/.test(char);
 	};
 
+	/**
+	 * Check if a position is inside a comment
+	 * @param {number} pos - Position to check
+	 * @returns {boolean}
+	 */
+	const isInComment = (pos) => {
+		// Check for single-line comment: find start of line and check if there's // before this position
+		let lineStart = source.lastIndexOf('\n', pos - 1) + 1;
+		const lineBeforePos = source.substring(lineStart, pos);
+		if (lineBeforePos.includes('//')) {
+			return true;
+		}
+		// Check for multi-line comment: look backwards for /* and forwards for */
+		const lastCommentStart = source.lastIndexOf('/*', pos);
+		if (lastCommentStart !== -1) {
+			const commentEnd = source.indexOf('*/', lastCommentStart);
+			if (commentEnd === -1 || commentEnd > pos) {
+				return true; // We're inside an unclosed or open comment
+			}
+		}
+		return false;
+	};
+
 	/**
 	 * Find text in source string, searching character by character from sourceIndex
 	 * @param {string} text - Text to find
@@ -46,6 +97,11 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 				}
 			}
 			if (match) {
+				// Skip if this match is inside a comment
+				if (isInComment(i)) {
+					continue;
+				}
+
 				// Check word boundaries for identifier-like tokens
 				const isIdentifierLike = /^[a-zA-Z_$]/.test(text);
 				if (isIdentifierLike) {
@@ -96,30 +152,73 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	};
 
 	// Collect text tokens from AST nodes
-	/** @type {string[]} */
+	// Tokens can be either strings or objects with source/generated properties
+	/** @type {Array<string | {source: string, generated: string}>} */
 	const tokens = [];
 
+	// Collect import declarations for full-statement mappings
+	/** @type {Array<{start: number, end: number}>} */
+	const importDeclarations = [];
+
 	// We have to visit everything in generated order to maintain correct indices
 	walk(ast, null, {
 		_(node, { visit }) {
 			// Collect key node types: Identifiers, Literals, and JSX Elements
+			// Only collect tokens from nodes with .loc (skip synthesized nodes like children attribute)
 			if (node.type === 'Identifier' && node.name) {
-				tokens.push(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 });
+					} 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 });
+						} else {
+							tokens.push(node.name);
+						}
+					}
+				}
 				return; // Leaf node, don't traverse further
 			} else if (node.type === 'JSXIdentifier' && node.name) {
-				tokens.push(node.name);
+				if (node.loc) {
+					// Check if this was capitalized (reverse lookup)
+					const originalName = reverseCapitalizedNames.get(node.name);
+					if (originalName) {
+						tokens.push({ source: originalName, generated: node.name });
+					} else {
+						// Check if this 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);
+						}
+					}
+				}
 				return; // Leaf node, don't traverse further
 			} else if (node.type === 'Literal' && node.raw) {
-				tokens.push(node.raw);
+				if (node.loc) {
+					tokens.push(node.raw);
+				}
 				return; // Leaf node, don't traverse further
 			} else if (node.type === 'ImportDeclaration') {
+				// Collect import declaration range for full-statement mapping
+				// TypeScript reports unused imports with diagnostics covering the entire statement
+				if (node.start !== undefined && node.end !== undefined) {
+					importDeclarations.push({ start: node.start, end: node.end });
+				}
+
 				// Visit specifiers in source order
 				if (node.specifiers) {
 					for (const specifier of node.specifiers) {
 						visit(specifier);
 					}
 				}
-				// Skip source (just a string literal)
+				visit(node.source);
 				return;
 			} else if (node.type === 'ImportSpecifier') {
 				// If local and imported are the same, only visit local to avoid duplicates
@@ -209,7 +308,20 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 
 				// 3. Push closing tag name (not visited by AST walker)
 				if (!node.openingElement?.selfClosing && node.closingElement?.name?.type === 'JSXIdentifier') {
-					tokens.push(node.closingElement.name.name);
+					const closingName = node.closingElement.name.name;
+					// Check if this was capitalized (reverse lookup)
+					const originalName = reverseCapitalizedNames.get(closingName);
+					if (originalName) {
+						tokens.push({ source: originalName, generated: closingName });
+					} else {
+						// Check if this should be capitalized (forward lookup)
+						const capitalizedName = capitalizedNames.get(closingName);
+						if (capitalizedName) {
+							tokens.push({ source: closingName, generated: capitalizedName });
+						} else {
+							tokens.push(closingName);
+						}
+					}
 				}
 
 				return;
@@ -988,23 +1100,65 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	});
 
 	// Process each token in order
-	for (const text of tokens) {
-		const sourcePos = findInSource(text);
-		const genPos = findInGenerated(text);
+	for (const token of tokens) {
+		let sourceText, generatedText;
+
+		if (typeof token === 'string') {
+			sourceText = token;
+			generatedText = token;
+		} else {
+			// Token with different source and generated names
+			sourceText = token.source;
+			generatedText = token.generated;
+		}
+
+		const sourcePos = findInSource(sourceText);
+		const genPos = findInGenerated(generatedText);
 
 		if (sourcePos !== null && genPos !== null) {
 			mappings.push({
 				sourceOffsets: [sourcePos],
 				generatedOffsets: [genPos],
-				lengths: [text.length],
+				lengths: [sourceText.length],
 				data: mapping_data,
 			});
 		}
 	}
 
+	// Add full-statement mappings for import declarations
+	// TypeScript reports unused import diagnostics covering the entire import statement
+	// Use verification-only mapping to avoid duplicate hover/completion
+	for (const importDecl of importDeclarations) {
+		const length = importDecl.end - importDecl.start;
+		mappings.push({
+			sourceOffsets: [importDecl.start],
+			generatedOffsets: [importDecl.start], // Same position in generated code
+			lengths: [length],
+			data: {
+				// only verification (diagnostics) to avoid duplicate hover/completion
+				verification: true
+			},
+		});
+	}
+
 	// Sort mappings by source offset
 	mappings.sort((a, b) => a.sourceOffsets[0] - b.sourceOffsets[0]);
 
+	// Add a mapping for the very beginning of the file to handle import additions
+	// This ensures that code actions adding imports at the top work correctly
+	if (mappings.length > 0 && mappings[0].sourceOffsets[0] > 0) {
+		mappings.unshift({
+			sourceOffsets: [0],
+			generatedOffsets: [0],
+			lengths: [1],
+				data: {
+					...mapping_data,
+					codeActions: true, // auto-import
+					rename: false, // avoid rename for a “dummy” mapping
+				}
+		});
+	}
+
 	return {
 		code: generated_code,
 		mappings,

package/src/runtime/index-client.js

@@ -1,10 +1,10 @@
-/** @import { Block, Derived, Tracked } from '#client' */
+/** @import { Block, Tracked } from '#client' */
 
-import { destroy_block, root } from './internal/client/blocks.js';
-import { handle_root_events } from './internal/client/events.js';
+import { destroy_block, effect, render, root } from './internal/client/blocks.js';
+import { handle_root_events, on } from './internal/client/events.js';
 import { init_operations } from './internal/client/operations.js';
-import { active_block, tracked, derived } from './internal/client/runtime.js';
-import { create_anchor } from './internal/client/utils.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 { remove_ssr_css } from './internal/client/css.js';
 
 // Re-export JSX runtime functions for jsxImportSource: "ripple"
@@ -77,3 +77,183 @@ export { Portal } from './internal/client/portal.js';
 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;
+	};
+}

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

@@ -269,16 +269,16 @@ var empty_get_set = { get: undefined, set: undefined };
 /**
  *
  * @param {any} v
- * @param {Block} b
+ * @param {Block} block
  * @param {(value: any) => any} [get]
  * @param {(next: any, prev: any) => any} [set]
  * @returns {Tracked}
  */
-export function tracked(v, b, get, set) {
+export function tracked(v, block, get, set) {
 	// TODO: now we expose tracked, we should likely block access in DEV somehow
 	return {
 		a: get || set ? { get, set } : empty_get_set,
-		b,
+		b: block || active_block,
 		c: 0,
 		f: TRACKED,
 		v,
@@ -295,7 +295,7 @@ export function tracked(v, b, get, set) {
 export function derived(fn, block, get, set) {
 	return {
 		a: get || set ? { get, set } : empty_get_set,
-		b: block,
+		b: block || active_block,
 		blocks: null,
 		c: 0,
 		co: active_component,