ripple 0.2.91 → 0.2.92

package/src/compiler/utils.js

@@ -1,4 +1,6 @@
-import { build_assignment_value } from '../utils/ast.js';
+/** @import { Identifier, Pattern, Super, FunctionExpression, FunctionDeclaration, ArrowFunctionExpression, MemberExpression, AssignmentExpression, Expression, Node, AssignmentOperator } from 'estree' */
+/** @import { Component, Element, Attribute, SpreadAttribute, ScopeInterface, Binding, RippleNode, CompilerState, TransformContext, DelegatedEventResult, TextNode } from '#compiler' */
+import { build_assignment_value, extract_paths } from '../utils/ast.js';
 import * as b from '../utils/builders.js';
 import { get_attribute_event_name, is_delegated, is_event_attribute } from '../utils/events.js';
 
@@ -27,6 +29,11 @@ const VOID_ELEMENT_NAMES = [
  * Returns `true` if `name` is of a void element
  * @param {string} name
  */
+/**
+ * Returns true if name is a void element
+ * @param {string} name
+ * @returns {boolean}
+ */
 export function is_void_element(name) {
 	return VOID_ELEMENT_NAMES.includes(name) || name.toLowerCase() === '!doctype';
 }
@@ -82,6 +89,11 @@ const RESERVED_WORDS = [
 	'yield',
 ];
 
+/**
+ * Returns true if word is a reserved JS keyword
+ * @param {string} word
+ * @returns {boolean}
+ */
 export function is_reserved(word) {
 	return RESERVED_WORDS.includes(word);
 }
@@ -121,6 +133,11 @@ const DOM_BOOLEAN_ATTRIBUTES = [
 	'disableremoteplayback',
 ];
 
+/**
+ * Returns true if name is a boolean DOM attribute
+ * @param {string} name
+ * @returns {boolean}
+ */
 export function is_boolean_attribute(name) {
 	return DOM_BOOLEAN_ATTRIBUTES.includes(name);
 }
@@ -143,12 +160,24 @@ const DOM_PROPERTIES = [
 	'disableRemotePlayback',
 ];
 
+/**
+ * Returns true if name is a DOM property
+ * @param {string} name
+ * @returns {boolean}
+ */
 export function is_dom_property(name) {
 	return DOM_PROPERTIES.includes(name);
 }
 
 const unhoisted = { hoisted: false };
 
+/**
+ * Determines if an event handler can be hoisted for delegation
+ * @param {string} event_name
+ * @param {Expression} handler
+ * @param {CompilerState} state
+ * @returns {DelegatedEventResult | null}
+ */
 export function get_delegated_event(event_name, handler, state) {
 	// Handle delegated event handlers. Bail out if not a delegated event.
 	if (!handler || !is_delegated(event_name)) {
@@ -176,18 +205,18 @@ export function get_delegated_event(event_name, handler, state) {
 
 				const grandparent = path.at(-2);
 
-				/** @type {AST.RegularElement | null} */
+				/** @type {Element | null} */
 				let element = null;
 				/** @type {string | null} */
 				let event_name = null;
 				if (
-					parent.type === 'ExpressionTag' &&
+					parent.type === 'Expression' &&
 					grandparent?.type === 'Attribute' &&
 					is_event_attribute(grandparent)
 				) {
-					element = /** @type {AST.RegularElement} */ (path.at(-3));
-					const attribute = /** @type {AST.Attribute} */ (grandparent);
-					event_name = get_attribute_event_name(attribute.name);
+					element = /** @type {Element} */ (path.at(-3));
+					const attribute = /** @type {Attribute} */ (grandparent);
+					event_name = get_attribute_event_name(attribute.name.name);
 				}
 
 				if (element && event_name) {
@@ -205,7 +234,11 @@ export function get_delegated_event(event_name, handler, state) {
 		}
 
 		// If the binding is exported, bail out
-		if (state.analysis.exports.find((node) => node.name === handler.name)) {
+		if (
+			state.analysis?.exports?.find(
+				(/** @type {{name: string}} */ node) => node.name === handler.name,
+			)
+		) {
 			return unhoisted;
 		}
 
@@ -256,6 +289,11 @@ export function get_delegated_event(event_name, handler, state) {
 	return { hoisted: true, function: target_function };
 }
 
+/**
+ * @param {Node} node
+ * @param {TransformContext} context
+ * @returns {Identifier[]}
+ */
 function get_hoisted_params(node, context) {
 	const scope = context.state.scope;
 
@@ -292,6 +330,12 @@ function get_hoisted_params(node, context) {
 	return params;
 }
 
+/**
+ * Builds the parameter list for a hoisted function
+ * @param {FunctionDeclaration|FunctionExpression|ArrowFunctionExpression} node
+ * @param {TransformContext} context
+ * @returns {Pattern[]}
+ */
 export function build_hoisted_params(node, context) {
 	const hoisted_params = get_hoisted_params(node, context);
 	node.metadata.hoisted_params = hoisted_params;
@@ -314,6 +358,11 @@ export function build_hoisted_params(node, context) {
 	return params;
 }
 
+/**
+ * Returns true if context is inside a top-level await
+ * @param {TransformContext} context
+ * @returns {boolean}
+ */
 export function is_top_level_await(context) {
 	if (!is_inside_component(context)) {
 		return false;
@@ -323,7 +372,7 @@ export function is_top_level_await(context) {
 		const context_node = context.path[i];
 		const type = context_node.type;
 
-		if (type === 'Component') {
+		if (/** @type {Component} */ (context_node).type === 'Component') {
 			return true;
 		}
 
@@ -338,6 +387,12 @@ export function is_top_level_await(context) {
 	return true;
 }
 
+/**
+ * Returns true if context is inside a Component node
+ * @param {TransformContext} context
+ * @param {boolean} [includes_functions=false]
+ * @returns {boolean}
+ */
 export function is_inside_component(context, includes_functions = false) {
 	for (let i = context.path.length - 1; i >= 0; i -= 1) {
 		const context_node = context.path[i];
@@ -351,13 +406,18 @@ export function is_inside_component(context, includes_functions = false) {
 		) {
 			return false;
 		}
-		if (type === 'Component') {
+		if (/** @type {Component} */ (context_node).type === 'Component') {
 			return true;
 		}
 	}
 	return false;
 }
 
+/**
+ * Returns true if context is inside a component-level function
+ * @param {TransformContext} context
+ * @returns {boolean}
+ */
 export function is_component_level_function(context) {
 	for (let i = context.path.length - 1; i >= 0; i -= 1) {
 		const context_node = context.path[i];
@@ -378,18 +438,32 @@ export function is_component_level_function(context) {
 	return true;
 }
 
+/**
+ * Returns true if callee is a Ripple track call
+ * @param {Expression | Super} callee
+ * @param {TransformContext} context
+ * @returns {boolean}
+ */
 export function is_ripple_track_call(callee, context) {
-  return (
-    (callee.type === 'Identifier' && (callee.name === 'track' || callee.name === 'trackSplit')) ||
-    (callee.type === 'MemberExpression' &&
-      callee.object.type === 'Identifier' &&
-      callee.property.type === 'Identifier' &&
-      (callee.property.name === 'track' || callee.property.name === 'trackSplit') &&
-      !callee.computed &&
-      is_ripple_import(callee, context))
-  );
+	// Super expressions cannot be Ripple track calls
+	if (callee.type === 'Super') return false;
+
+	return (
+		(callee.type === 'Identifier' && (callee.name === 'track' || callee.name === 'trackSplit')) ||
+		(callee.type === 'MemberExpression' &&
+			callee.object.type === 'Identifier' &&
+			callee.property.type === 'Identifier' &&
+			(callee.property.name === 'track' || callee.property.name === 'trackSplit') &&
+			!callee.computed &&
+			is_ripple_import(callee, context))
+	);
 }
 
+/**
+ * Returns true if context is inside a call expression
+ * @param {TransformContext} context
+ * @returns {boolean}
+ */
 export function is_inside_call_expression(context) {
 	for (let i = context.path.length - 1; i >= 0; i -= 1) {
 		const context_node = context.path[i];
@@ -413,6 +487,11 @@ export function is_inside_call_expression(context) {
 	return false;
 }
 
+/**
+ * Returns true if node is a static value (Literal, ArrayExpression, etc)
+ * @param {Node} node
+ * @returns {boolean}
+ */
 export function is_value_static(node) {
 	if (node.type === 'Literal') {
 		return true;
@@ -430,12 +509,20 @@ export function is_value_static(node) {
 	return false;
 }
 
+/**
+ * Returns true if callee is a Ripple import
+ * @param {Expression} callee
+ * @param {TransformContext} context
+ * @returns {boolean}
+ */
 export function is_ripple_import(callee, context) {
 	if (callee.type === 'Identifier') {
 		const binding = context.state.scope.get(callee.name);
 
 		return (
 			binding?.declaration_kind === 'import' &&
+			binding.initial !== null &&
+			binding.initial.type === 'ImportDeclaration' &&
 			binding.initial.source.type === 'Literal' &&
 			binding.initial.source.value === 'ripple'
 		);
@@ -448,6 +535,8 @@ export function is_ripple_import(callee, context) {
 
 		return (
 			binding?.declaration_kind === 'import' &&
+			binding.initial !== null &&
+			binding.initial.type === 'ImportDeclaration' &&
 			binding.initial.source.type === 'Literal' &&
 			binding.initial.source.value === 'ripple'
 		);
@@ -456,8 +545,14 @@ export function is_ripple_import(callee, context) {
 	return false;
 }
 
+/**
+ * Returns true if node is a function declared within a component
+ * @param {import('estree').Identifier} node
+ * @param {TransformContext} context
+ * @returns {boolean}
+ */
 export function is_declared_function_within_component(node, context) {
-	const component = context.path.find((n) => n.type === 'Component');
+	const component = context.path?.find(/** @param {RippleNode} n */ (n) => n.type === 'Component');
 
 	if (node.type === 'Identifier' && component) {
 		const binding = context.state.scope.get(node.name);
@@ -485,11 +580,13 @@ export function is_declared_function_within_component(node, context) {
 
 	return false;
 }
-
-function is_non_coercive_operator(operator) {
-	return ['=', '||=', '&&=', '??='].includes(operator);
-}
-
+/**
+ * Visits and transforms an assignment expression
+ * @param {AssignmentExpression} node
+ * @param {TransformContext} context
+ * @param {Function} build_assignment
+ * @returns {Expression | AssignmentExpression | null}
+ */
 export function visit_assignment_expression(node, context, build_assignment) {
 	if (
 		node.left.type === 'ArrayPattern' ||
@@ -523,7 +620,7 @@ export function visit_assignment_expression(node, context, build_assignment) {
 			return null;
 		}
 
-		const is_standalone = /** @type {Node} */ (context.path.at(-1)).type.endsWith('Statement');
+		const is_standalone = context.path.at(-1).type.endsWith('Statement');
 		const sequence = b.sequence(assignments);
 
 		if (!is_standalone) {
@@ -535,11 +632,7 @@ export function visit_assignment_expression(node, context, build_assignment) {
 			// the right hand side is a complex expression, wrap in an IIFE to cache it
 			const iife = b.arrow([rhs], sequence);
 
-			const iife_is_async =
-				is_expression_async(value) ||
-				assignments.some((assignment) => is_expression_async(assignment));
-
-			return iife_is_async ? b.await(b.call(b.async(iife), value)) : b.call(iife, value);
+			return b.call(iife, value);
 		}
 
 		return sequence;
@@ -558,6 +651,14 @@ export function visit_assignment_expression(node, context, build_assignment) {
 	return transformed;
 }
 
+/**
+ * Builds an assignment node, possibly transforming for reactivity
+ * @param {AssignmentOperator} operator
+ * @param {Pattern | MemberExpression | Identifier} left
+ * @param {Expression} right
+ * @param {TransformContext} context
+ * @returns {Expression|null}
+ */
 export function build_assignment(operator, left, right, context) {
 	let object = left;
 
@@ -611,6 +712,12 @@ export function build_assignment(operator, left, right, context) {
 const ATTR_REGEX = /[&"<]/g;
 const CONTENT_REGEX = /[&<]/g;
 
+/**
+ * Escapes HTML special characters in a string
+ * @param {string} value
+ * @param {boolean} [is_attr=false]
+ * @returns {string}
+ */
 export function escape_html(value, is_attr = false) {
 	const str = String(value ?? '');
 
@@ -630,6 +737,11 @@ export function escape_html(value, is_attr = false) {
 	return escaped + str.substring(last);
 }
 
+/**
+ * Hashes a string to a base36 value
+ * @param {string} str
+ * @returns {string}
+ */
 export function hash(str) {
 	str = str.replace(regex_return_characters, '');
 	let hash = 5381;
@@ -639,6 +751,11 @@ export function hash(str) {
 	return (hash >>> 0).toString(36);
 }
 
+/**
+ * Returns true if node is a DOM element (not a component)
+ * @param {Element} node
+ * @returns {boolean}
+ */
 export function is_element_dom_element(node) {
 	return (
 		node.id.type === 'Identifier' &&
@@ -648,7 +765,14 @@ export function is_element_dom_element(node) {
 	);
 }
 
+/**
+ * Normalizes children nodes (merges adjacent text, removes empty)
+ * @param {RippleNode[]} children
+ * @param {TransformContext} context
+ * @returns {RippleNode[]}
+ */
 export function normalize_children(children, context) {
+	/** @type {RippleNode[]} */
 	const normalized = [];
 
 	for (const node of children) {
@@ -678,6 +802,11 @@ export function normalize_children(children, context) {
 	return normalized;
 }
 
+/**
+ * @param {RippleNode} node
+ * @param {RippleNode[]} normalized
+ * @param {TransformContext} context
+ */
 function normalize_child(node, normalized, context) {
 	if (node.type === 'EmptyStatement') {
 		return;
@@ -694,9 +823,17 @@ function normalize_child(node, normalized, context) {
 	}
 }
 
+/**
+ * Builds a getter for a tracked identifier
+ * @param {Identifier} node
+ * @param {TransformContext} context
+ * @returns {Expression | Identifier}
+ */
 export function build_getter(node, context) {
 	const state = context.state;
 
+	if (!context.path) return node;
+
 	for (let i = context.path.length - 1; i >= 0; i -= 1) {
 		const binding = state.scope.get(node.name);
 		const transform = binding?.transform;
@@ -714,6 +851,12 @@ export function build_getter(node, context) {
 	return node;
 }
 
+/**
+ * Determines the namespace for child elements
+ * @param {string} element_name
+ * @param {string} current_namespace
+ * @returns {string}
+ */
 export function determine_namespace_for_children(element_name, current_namespace) {
 	if (element_name === 'foreignObject') {
 		return 'html';

package/src/runtime/index-client.js

@@ -47,6 +47,7 @@ export {
 	track,
 	track_split as trackSplit,
 	untrack,
+	tick,
 } from './internal/client/runtime.js';
 
 export { TrackedArray } from './array.js';

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

@@ -8,14 +8,11 @@ import { assign_nodes, create_fragment_from_html } from './template.js';
 /**
  * Renders dynamic HTML content into the DOM by inserting it before the anchor node.
  * Manages the lifecycle of HTML blocks, removing old content and inserting new content.
- * 
- * TODO handle SVG/MathML
- * 
  * @param {ChildNode} node
  * @param {() => string} get_html
  * @returns {void}
  */
-export function html(node, get_html) {
+export function html(node, get_html, svg = false, mathml = false) {
 	/** @type {ChildNode} */
 	var anchor = node;
 	/** @type {string} */
@@ -25,17 +22,30 @@ export function html(node, get_html) {
 		var block = /** @type {Block} */ (active_block);
 		html = get_html() + '';
 
+		if (svg) html = `<svg>${html}</svg>`;
+		else if (mathml) html = `<math>${html}</math>`;
+
 		if (block.s !== null && block.s.start !== null) {
-			remove_block_dom(block.s.start, /** @type {Node} */ (block.s.end));
+			remove_block_dom(block.s.start, /** @type {Node} */(block.s.end));
 			block.s.start = block.s.end = null;
 		}
 
 		if (html === '') return;
-		/** @type {DocumentFragment} */
+		/** @type {DocumentFragment | Element} */
 		var node = create_fragment_from_html(html);
 
-		assign_nodes(/** @type {Node } */ (first_child(node)), /** @type {Node} */ (node.lastChild));
+		if (svg || mathml) {
+			node = /** @type {Element} */(first_child(node));
+		}
+
+		assign_nodes(/** @type {Element} */(first_child(node)), /** @type {Element} */(node.lastChild));
 
-    anchor.before(node);
+		if (svg || mathml) {
+			while (first_child(node)) {
+				anchor.before(/** @type {Element} */(first_child(node)));
+			}
+		} else {
+			anchor.before(node);
+		}
 	});
 }

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

@@ -46,6 +46,7 @@ export {
 	exclude_from_object,
 	derived,
 	maybe_tracked,
+	tick,
 } from './runtime.js';
 
 export { composite } from './composite.js';

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

@@ -1,43 +1,66 @@
 /** @import { Block } from '#client' */
 
-import { branch, destroy_block, render } from './blocks.js';
+import { branch, destroy_block, remove_block_dom, render } from './blocks.js';
 import { UNINITIALIZED } from './constants.js';
 import { handle_root_events } from './events.js';
 import { create_text } from './operations.js';
+import { active_block } from './runtime.js';
 
 /**
- * @param {any} _ 
- * @param {{ target: Element, children: (anchor: Node) => void }} props
+ * @param {any} _
+ * @param {{ target: Element, children: (anchor: Node, props: {}, block: Block) => void }} props
  * @returns {void}
  */
 export function Portal(_, props) {
-  /** @type {Element | symbol} */
-  let target = UNINITIALIZED;
-  /** @type {((anchor: Node) => void) | symbol} */
-  let children = UNINITIALIZED;
-  /** @type {Block | null} */
-  var b = null;
-  /** @type {Text | null} */
-  var anchor = null;
-
-  render(() => {
-    if (target === (target = props.target)) return;
-    if (children === (children = props.children)) return;
-
-    if (b !== null) {
-      destroy_block(b);
-    }
-
-    anchor = create_text();
-    /** @type {Element} */ (target).append(anchor);
-
-    const cleanup_events = handle_root_events(/** @type {Element} */ (target));
-
-    b = branch(() => /** @type {(anchor: Node) => void} */ (children)(/** @type {Text} */ (anchor)));
-
-    return () => {
-      cleanup_events();
-      /** @type {Text} */ (anchor).remove();
-    };
-  });
+	/** @type {Element | symbol} */
+	let target = UNINITIALIZED;
+	/** @type {((anchor: Node, props: {}, block: Block) => void) | symbol} */
+	let children = UNINITIALIZED;
+	/** @type {Block | null} */
+	var b = null;
+	/** @type {Text | null} */
+	var anchor = null;
+	/** @type {Node | null} */
+	var dom_start = null;
+	/** @type {Node | null} */
+	var dom_end = null;
+
+	render(() => {
+		if (target === (target = props.target)) return;
+		if (children === (children = props.children)) return;
+
+		if (b !== null) {
+			destroy_block(b);
+		}
+
+		if (anchor !== null) {
+			anchor.remove();
+		}
+
+		dom_start = dom_end = null;
+
+		anchor = create_text();
+		/** @type {Element} */ (target).append(anchor);
+
+		const cleanup_events = handle_root_events(/** @type {Element} */ (target));
+
+		var block = /** @type {Block} */ (active_block);
+
+		b = branch(() => {
+			if (typeof children === 'function') {
+				children(/** @type {Text} */ (anchor), {}, block);
+			}
+		});
+
+		dom_start = b?.s?.start;
+		dom_end = b?.s?.end;
+
+		return () => {
+			cleanup_events();
+			/** @type {Text} */ (anchor).remove();
+			if (dom_start && dom_end) {
+				remove_block_dom(dom_start, dom_end);
+			}
+		};
+	});
 }

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

@@ -16,6 +16,7 @@ import {
 } from '../../../utils/events.js';
 import { get } from './runtime.js';
 import { clsx } from 'clsx';
+import { normalize_css_property_name } from '../../../utils/normalize_css_property_name.js';
 
 /**
  * @param {Text} text
@@ -85,13 +86,42 @@ export function set_attribute(element, attribute, value) {
 
   if (value == null) {
     element.removeAttribute(attribute);
-  } else if (typeof value !== 'string' && get_setters(element).includes(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);
   }
 }
 
+/**
+ * @param {HTMLElement} element
+ * @param {HTMLElement['style']} newStyles
+ */
+export function apply_styles(element, newStyles) {
+	const style = element.style;
+	const new_properties = new Set();
+
+	for(const [property, value] of Object.entries(newStyles)) {
+		const normalized_property = normalize_css_property_name(property);
+		const normalized_value = String(value);
+
+		if (style.getPropertyValue(normalized_property) !== normalized_value) {
+			style.setProperty(normalized_property, normalized_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);
+		}
+	}
+}
+
 /**
  * @param {Element} element
  * @param {Record<string, any>} attributes