ripple 0.2.89 → 0.2.91

package/package.json

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

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

@@ -455,10 +455,31 @@ function RipplePlugin(config) {
 			jsx_parseExpressionContainer() {
 				let node = this.startNode();
 				this.next();
+				let tracked = false;
+
+				if (this.value === 'html') {
+					node.html = true;
+					this.next();
+					if (this.type === tt.braceR) {
+						this.raise(
+							this.start,
+							'"html" is a Ripple keyword and must be used in the form {html some_content}',
+						);
+					}
+					if (this.type.label === '@') {
+						this.next(); // consume @
+						tracked = true;
+					}
+				}
 
 				node.expression =
 					this.type === tt.braceR ? this.jsx_parseEmptyExpression() : this.parseExpression();
 				this.expect(tt.braceR);
+
+				if (tracked && node.expression.type === 'Identifier') {
+					node.expression.tracked = true;
+				}
+
 				return this.finishNode(node, 'JSXExpressionContainer');
 			}
 
@@ -954,7 +975,8 @@ function RipplePlugin(config) {
 
 				if (this.type.label === '{') {
 					const node = this.jsx_parseExpressionContainer();
-					node.type = 'Text';
+					node.type = node.html ? 'Html' : 'Text';
+					delete node.html;
 					body.push(node);
 				} else if (this.type.label === '}') {
 					return;

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

@@ -46,8 +46,7 @@ function add_ripple_internal_import(context) {
 
 function visit_function(node, context) {
 	if (context.state.to_ts) {
-		context.next(context.state);
-		return;
+		return context.next(context.state);
 	}
 	const metadata = node.metadata;
 	const state = context.state;
@@ -133,9 +132,7 @@ function visit_title_element(node, context) {
 			),
 		);
 	} else {
-		context.state.init.push(
-			b.stmt(b.assignment('=', b.id('_$_.document.title'), result)),
-		);
+		context.state.init.push(b.stmt(b.assignment('=', b.id('_$_.document.title'), result)));
 	}
 }
 
@@ -346,7 +343,7 @@ const visitors = {
 
 			return b.new(
 				b.id('TrackedObject'),
-				b.object(node.properties.map((prop) => context.visit(prop)))
+				b.object(node.properties.map((prop) => context.visit(prop))),
 			);
 		}
 
@@ -723,9 +720,10 @@ const visitors = {
 					const metadata = { tracking: false, await: false };
 					let expression = visit(class_attribute.value, { ...state, metadata });
 
-					const hash_arg = node.metadata.scoped && state.component.css
-						? b.literal(state.component.css.hash)
-						: undefined;
+					const hash_arg =
+						node.metadata.scoped && state.component.css
+							? b.literal(state.component.css.hash)
+							: undefined;
 					const is_html = context.state.metadata.namespace === 'html' && node.id.name !== 'svg';
 
 					if (metadata.tracking) {
@@ -897,7 +895,11 @@ const visitors = {
 				}),
 			];
 
-			return b.function(node.id, node.params, b.block(body_statements));
+			return b.function(
+				node.id,
+				node.params.map((param) => context.visit(param, { ...context.state, metadata })),
+				b.block(body_statements),
+			);
 		}
 
 		let props = b.id('__props');
@@ -1001,8 +1003,7 @@ const visitors = {
 
 	UpdateExpression(node, context) {
 		if (context.state.to_ts) {
-			context.next();
-			return;
+			return context.next();
 		}
 		const argument = node.argument;
 
@@ -1048,8 +1049,7 @@ const visitors = {
 
 	ForOfStatement(node, context) {
 		if (!is_inside_component(context)) {
-			context.next();
-			return;
+			return context.next();
 		}
 		const is_controlled = node.is_controlled;
 		const index = node.index;
@@ -1091,8 +1091,7 @@ const visitors = {
 
 	IfStatement(node, context) {
 		if (!is_inside_component(context)) {
-			context.next();
-			return;
+			return context.next();
 		}
 		context.state.template.push('<!>');
 
@@ -1175,8 +1174,7 @@ const visitors = {
 
 	TryStatement(node, context) {
 		if (!is_inside_component(context)) {
-			context.next();
-			return;
+			return context.next();
 		}
 		context.state.template.push('<!>');
 
@@ -1311,6 +1309,9 @@ function transform_ts_child(node, context) {
 
 	if (node.type === 'Text') {
 		state.init.push(b.stmt(visit(node.expression, { ...state })));
+	} else if (node.type === 'Html') {
+		// 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;
 		const children = [];
@@ -1330,12 +1331,25 @@ function transform_ts_child(node, context) {
 				if (attr.type === 'Attribute') {
 					const metadata = { await: false };
 					const name = visit(attr.name, { ...state, metadata });
-					const value = visit(attr.value, { ...state, metadata });
-					const jsx_name = b.jsx_id(name.name);
-					if (name.name === 'children') {
+					const value =
+						attr.value === null ? b.literal(true) : visit(attr.value, { ...state, metadata });
+
+					// Handle both regular identifiers and tracked identifiers
+					let prop_name;
+					if (name.type === 'Identifier') {
+						prop_name = name.name;
+					} else if (name.type === 'MemberExpression' && name.object.type === 'Identifier') {
+						// For tracked attributes like {@count}, use the original name
+						prop_name = name.object.name;
+					} else {
+						prop_name = attr.name.name || 'unknown';
+					}
+
+					const jsx_name = b.jsx_id(prop_name);
+					if (prop_name === 'children') {
 						has_children_props = true;
 					}
-					jsx_name.loc = name.loc;
+					jsx_name.loc = attr.name.loc || name.loc;
 
 					return b.jsx_attribute(jsx_name, b.jsx_expression_container(value));
 				} else if (attr.type === 'SpreadAttribute') {
@@ -1469,7 +1483,7 @@ function transform_ts_child(node, context) {
 
 		state.init.push(b.try(try_body, catch_handler, finally_block));
 	} else if (node.type === 'Component') {
-		const component = visit(node, context.state);
+		const component = visit(node, state);
 
 		state.init.push(component);
 	} else {
@@ -1491,6 +1505,7 @@ function transform_children(children, context) {
 				node.type === 'IfStatement' ||
 				node.type === 'TryStatement' ||
 				node.type === 'ForOfStatement' ||
+				node.type === 'Html' ||
 				(node.type === 'Element' &&
 					(node.id.type !== 'Identifier' || !is_element_dom_element(node))),
 		) ||
@@ -1585,6 +1600,14 @@ function transform_children(children, context) {
 				visit(node, { ...state, flush_node, namespace: state.namespace });
 			} else if (node.type === 'HeadElement') {
 				visit(node, { ...state, flush_node, namespace: state.namespace });
+			} else if (node.type === 'Html') {
+				const metadata = { tracking: false, await: false };
+				const expression = visit(node.expression, { ...state, metadata });
+
+				context.state.template.push('<!>');
+
+				const id = flush_node();
+				state.update.push(b.stmt(b.call('_$_.html', id, b.thunk(expression))));
 			} else if (node.type === 'Text') {
 				const metadata = { tracking: false, await: false };
 				const expression = visit(node.expression, { ...state, metadata });
@@ -1633,7 +1656,7 @@ function transform_children(children, context) {
 		visit_head_element(head_element, context);
 	}
 
-	if (context.state.inside_head) { 
+	if (context.state.inside_head) {
 		const title_element = children.find(
 			(node) =>
 				node.type === 'Element' && node.id.type === 'Identifier' && node.id.name === 'title',
@@ -1676,7 +1699,12 @@ function transform_body(body, { visit, state }) {
 	transform_children(body, { visit, state: body_state, root: true });
 
 	if (body_state.update.length > 0) {
-		body_state.init.push(b.stmt(b.call('_$_.render', b.thunk(b.block(body_state.update)))));
+		if (state.to_ts) {
+			// In TypeScript mode, just add the update statements directly
+			body_state.init.push(...body_state.update);
+		} else {
+			body_state.init.push(b.stmt(b.call('_$_.render', b.thunk(b.block(body_state.update)))));
+		}
 	}
 
 	return [...body_state.setup, ...body_state.init, ...body_state.final];

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

@@ -7,14 +7,87 @@ export const mapping_data = {
 	navigation: true,
 };
 
+/**
+ * Helper to find a meaningful token boundary by looking for word boundaries, 
+ * punctuation, or whitespace
+ * @param {string} text
+ * @param {number} start
+ * @param {number} direction
+ */
+function findTokenBoundary(text, start, direction = 1) {
+	if (start < 0 || start >= text.length) return start;
+	
+	let pos = start;
+	/** @param {string} c */
+	const isAlphaNum = (c) => /[a-zA-Z0-9_$]/.test(c);
+	
+	// If we're at whitespace or punctuation, find the next meaningful character
+	while (pos >= 0 && pos < text.length && /\s/.test(text[pos])) {
+		pos += direction;
+	}
+	
+	if (pos < 0 || pos >= text.length) return start;
+	
+	// If we're in the middle of a word/identifier, find the boundary
+	if (isAlphaNum(text[pos])) {
+		if (direction > 0) {
+			while (pos < text.length && isAlphaNum(text[pos])) pos++;
+		} else {
+			while (pos >= 0 && isAlphaNum(text[pos])) pos--;
+			pos++; // Adjust back to start of token
+		}
+	} else {
+		// For punctuation, just move one character in the given direction
+		pos += direction;
+	}
+	
+	return Math.max(0, Math.min(text.length, pos));
+}
+
+/**
+ * Check if source and generated content are meaningfully similar
+ * @param {string} sourceContent
+ * @param {string} generatedContent
+ */
+function isValidMapping(sourceContent, generatedContent) {
+	// Remove whitespace for comparison
+	const cleanSource = sourceContent.replace(/\s+/g, '');
+	const cleanGenerated = generatedContent.replace(/\s+/g, '');
+	
+	// If either is empty, skip
+	if (!cleanSource || !cleanGenerated) return false;
+	
+	// Skip obvious template transformations that don't make sense to map
+	const templateTransforms = [
+		/^\{.*\}$/, // Curly brace expressions
+		/^<.*>$/, // HTML tags
+		/^\(\(\)\s*=>\s*\{$/, // Generated function wrappers
+		/^\}\)\(\)\}$/, // Generated function closures
+	];
+	
+	for (const transform of templateTransforms) {
+		if (transform.test(cleanSource) || transform.test(cleanGenerated)) {
+			return false;
+		}
+	}
+	
+	// Check if content is similar (exact match, or generated contains source)
+	if (cleanSource === cleanGenerated) return true;
+	if (cleanGenerated.includes(cleanSource)) return true;
+	if (cleanSource.includes(cleanGenerated) && cleanGenerated.length > 2) return true;
+	
+	return false;
+}
+
 /**
  * Convert esrap SourceMap to Volar mappings
- * @param {object} source_map
+ * @param {{ mappings: string }} source_map
  * @param {string} source
  * @param {string} generated_code
  * @returns {object}
  */
 export function convert_source_map_to_mappings(source_map, source, generated_code) {
+	/** @type {Array<{sourceOffsets: number[], generatedOffsets: number[], lengths: number[], data: any}>} */
 	const mappings = [];
 
 	// Decode the VLQ mappings from esrap
@@ -22,6 +95,7 @@ export function convert_source_map_to_mappings(source_map, source, generated_cod
 
 	let generated_offset = 0;
 	const generated_lines = generated_code.split('\n');
+	const source_lines = source.split('\n');
 
 	// Process each line of generated code
 	for (let generated_line = 0; generated_line < generated_lines.length; generated_line++) {
@@ -38,7 +112,6 @@ export function convert_source_map_to_mappings(source_map, source, generated_cod
 			}
 
 			// Calculate source offset
-			const source_lines = source.split('\n');
 			let source_offset = 0;
 			for (let i = 0; i < Math.min(source_line, source_lines.length - 1); i++) {
 				source_offset += source_lines[i].length + 1; // +1 for newline
@@ -48,41 +121,125 @@ export function convert_source_map_to_mappings(source_map, source, generated_cod
 			// Calculate generated offset
 			const current_generated_offset = generated_offset + generated_column;
 
-			// Determine segment length (look ahead to next mapping or end of line)
-			const next_mapping = line_mappings[line_mappings.indexOf(mapping) + 1];
-			let segment_length = next_mapping
-				? next_mapping[0] - generated_column
-				: Math.max(1, line.length - generated_column);
-
-			// Determine the actual segment content
-			const generated_content = generated_code.substring(
-				current_generated_offset,
-				current_generated_offset + segment_length,
-			);
-			const source_content = source.substring(source_offset, source_offset + segment_length);
-
-			// Skip mappings for RefAttribute syntax to avoid overlapping sourcemaps
-			if (source_content.includes('{ref ') || source_content.match(/\{\s*ref\s+/)) {
-				continue;
+			// Find meaningful token boundaries for source content
+			const source_token_end = findTokenBoundary(source, source_offset, 1);
+			const source_token_start = findTokenBoundary(source, source_offset, -1);
+			
+			// Find meaningful token boundaries for generated content  
+			const generated_token_end = findTokenBoundary(generated_code, current_generated_offset, 1);
+			const generated_token_start = findTokenBoundary(generated_code, current_generated_offset, -1);
+			
+			// Extract potential source content (prefer forward boundary but try both directions)
+			let best_source_content = source.substring(source_offset, source_token_end);
+			let best_generated_content = generated_code.substring(current_generated_offset, generated_token_end);
+			
+			// Try different segment boundaries to find the best match
+			const candidates = [
+				// Forward boundaries
+				{
+					source: source.substring(source_offset, source_token_end),
+					generated: generated_code.substring(current_generated_offset, generated_token_end)
+				},
+				// Backward boundaries
+				{
+					source: source.substring(source_token_start, source_offset + 1),
+					generated: generated_code.substring(generated_token_start, current_generated_offset + 1)
+				},
+				// Single character
+				{
+					source: source.charAt(source_offset),
+					generated: generated_code.charAt(current_generated_offset)
+				},
+				// Try to find exact matches in nearby content
+			];
+			
+			// Look for the best candidate match
+			let best_match = null;
+			for (const candidate of candidates) {
+				if (isValidMapping(candidate.source, candidate.generated)) {
+					best_match = candidate;
+					break;
+				}
 			}
-
-			// Fix for children mapping: when generated content is "children",
-			// it should only map to the component name in the source, not include attributes
-			if (generated_content === 'children') {
-				// Look for the component name in the source content
-				const component_name_match = source_content.match(/^(\w+)/);
-				if (component_name_match) {
-					const component_name = component_name_match[1];
-					segment_length = component_name.length;
+			
+			// If no good match found, try extracting identifiers/keywords
+			if (!best_match) {
+				const sourceIdMatch = source.substring(source_offset).match(/^[a-zA-Z_$][a-zA-Z0-9_$]*/);
+				const generatedIdMatch = generated_code.substring(current_generated_offset).match(/^[a-zA-Z_$][a-zA-Z0-9_$]*/);
+				
+				if (sourceIdMatch && generatedIdMatch && sourceIdMatch[0] === generatedIdMatch[0]) {
+					best_match = {
+						source: sourceIdMatch[0],
+						generated: generatedIdMatch[0]
+					};
 				}
 			}
-
-			mappings.push({
-				sourceOffsets: [source_offset],
-				generatedOffsets: [current_generated_offset],
-				lengths: [segment_length],
-				data: mapping_data,
-			});
+			
+		// Handle special cases for Ripple keywords that might not have generated equivalents
+		if (!best_match || best_match.source.length === 0) {
+			continue;
+		}
+		
+		// Special handling for Ripple-specific syntax that may be omitted in generated code
+		const sourceAtOffset = source.substring(source_offset, source_offset + 10);
+		if (sourceAtOffset.includes('index ')) {
+			// For the 'index' keyword, create a mapping even if there's no generated equivalent
+			const indexMatch = sourceAtOffset.match(/index\s+/);
+			if (indexMatch) {
+				best_match = {
+					source: indexMatch[0].trim(),
+					generated: '' // Empty generated content for keywords that are transformed away
+				};
+			}
+		}
+		
+		// Skip if we still don't have a valid source match
+		if (!best_match || best_match.source.length === 0) {
+			continue;
+		}
+		
+		// Skip mappings for complex RefAttribute syntax to avoid overlapping sourcemaps,
+		// but allow simple 'ref' keyword mappings for IntelliSense
+		if (best_match.source.includes('{ref ') && best_match.source.length > 10) {
+			// Skip complex ref expressions like '{ref (node) => { ... }}'
+			continue;
+		}
+		
+		// Allow simple 'ref' keyword mappings for IntelliSense
+		if (best_match.source.trim() === 'ref' && best_match.generated.length === 0) {
+			// This is just the ref keyword, allow it for syntax support
+			// but map it to current position since there's no generated equivalent
+		}
+			
+		// Calculate actual offsets and lengths for the best match
+		let actual_source_offset, actual_generated_offset;
+		
+		if (best_match.generated.length > 0) {
+			actual_source_offset = source.indexOf(best_match.source, source_offset - best_match.source.length);
+			actual_generated_offset = generated_code.indexOf(best_match.generated, current_generated_offset - best_match.generated.length);
+		} else {
+			// For keywords with no generated equivalent, use the exact source position
+			actual_source_offset = source_offset;
+			actual_generated_offset = current_generated_offset; // Map to current position in generated code
+		}
+		
+		// Use the match we found, but fall back to original positions if indexOf fails
+		const final_source_offset = actual_source_offset !== -1 ? actual_source_offset : source_offset;
+		const final_generated_offset = actual_generated_offset !== -1 ? actual_generated_offset : current_generated_offset;			// Avoid duplicate mappings by checking if we already have this exact mapping
+			const isDuplicate = mappings.some(existing => 
+				existing.sourceOffsets[0] === final_source_offset &&
+				existing.generatedOffsets[0] === final_generated_offset &&
+				existing.lengths[0] === best_match.source.length
+			);
+			
+			if (!isDuplicate) {
+				mappings.push({
+					sourceOffsets: [final_source_offset],
+					generatedOffsets: [final_generated_offset],
+					lengths: [best_match.source.length],
+					data: mapping_data,
+				});
+			}
 		}
 
 		// Add line length + 1 for newline (except for last line)
@@ -92,6 +249,9 @@ export function convert_source_map_to_mappings(source_map, source, generated_cod
 		}
 	}
 
+	// Sort mappings by source offset for better organization
+	mappings.sort((a, b) => a.sourceOffsets[0] - b.sourceOffsets[0]);
+
 	return {
 		code: generated_code,
 		mappings,

package/src/runtime/date.js

@@ -0,0 +1,73 @@
+/** @import { Block, Derived } from '#client' */
+import { safe_scope, tracked, get, derived, set } from './internal/client/runtime.js';
+
+var init = false;
+
+export class TrackedDate extends Date {
+	#time;
+	/** @type {Map<keyof Date, Derived>} */
+	#deriveds = new Map();
+	/** @type {Block} */
+	#block;
+
+	/** @param {any[]} params */
+	constructor(...params) {
+		// @ts-ignore
+		super(...params);
+
+		var block = this.#block = safe_scope();
+		this.#time = tracked(super.getTime(), block);
+
+		if (!init) this.#init();
+	}
+
+	#init() {
+		init = true;
+
+		var proto = TrackedDate.prototype;
+		var date_proto = Date.prototype;
+
+		var methods = /** @type {Array<keyof Date & string>} */ (
+			Object.getOwnPropertyNames(date_proto)
+		);
+
+		for (const method of methods) {
+			if (method.startsWith('get') || method.startsWith('to') || method === 'valueOf') {
+				// @ts-ignore
+				proto[method] = function (...args) {
+					// don't memoize if there are arguments
+					// @ts-ignore
+					if (args.length > 0) {
+						get(this.#time);
+						// @ts-ignore
+						return date_proto[method].apply(this, args);
+					}
+
+					var d = this.#deriveds.get(method);
+
+					if (d === undefined) {
+						d = derived(() => {
+							get(this.#time);
+							// @ts-ignore
+							return date_proto[method].apply(this, args);
+						}, this.#block);
+
+						this.#deriveds.set(method, d);
+					}
+
+					return get(d);
+				};
+			}
+
+			if (method.startsWith('set')) {
+				// @ts-ignore
+				proto[method] = function (...args) {
+					// @ts-ignore
+					var result = date_proto[method].apply(this, args);
+					set(this.#time, date_proto.getTime.call(this), this.#block);
+					return result;
+				};
+			}
+		}
+	}
+}

package/src/runtime/index-client.js

@@ -15,38 +15,38 @@ export { jsx, jsxs, Fragment } from '../jsx-runtime.js';
  * @returns {() => void}
  */
 export function mount(component, options) {
-  init_operations();
+	init_operations();
 
-  const props = options.props || {};
-  const target = options.target;
-  const anchor = create_anchor();
+	const props = options.props || {};
+	const target = options.target;
+	const anchor = create_anchor();
 
-  // Clear target content in case of SSR
-  if (target.firstChild) {
-    target.textContent = '';
-  }
+	// Clear target content in case of SSR
+	if (target.firstChild) {
+		target.textContent = '';
+	}
 
-  target.append(anchor);
+	target.append(anchor);
 
-  const cleanup_events = handle_root_events(target);
+	const cleanup_events = handle_root_events(target);
 
-  const _root = root(() => {
-    component(anchor, props, active_block);
-  });
+	const _root = root(() => {
+		component(anchor, props, active_block);
+	});
 
-  return () => {
-    cleanup_events();
-    destroy_block(_root);
-  };
+	return () => {
+		cleanup_events();
+		destroy_block(_root);
+	};
 }
 
 export { create_context as createContext } from './internal/client/context.js';
 
 export {
-  flush_sync as flushSync,
-  track,
-  track_split as trackSplit,
-  untrack,
+	flush_sync as flushSync,
+	track,
+	track_split as trackSplit,
+	untrack,
 } from './internal/client/runtime.js';
 
 export { TrackedArray } from './array.js';
@@ -57,6 +57,8 @@ export { TrackedSet } from './set.js';
 
 export { TrackedMap } from './map.js';
 
+export { TrackedDate } from './date.js';
+
 export { keyed } from './internal/client/for.js';
 
 export { user_effect as effect } from './internal/client/blocks.js';

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

@@ -318,6 +318,20 @@ export function is_destroyed(target_block) {
 	return true;
 }
 
+/**
+ * @param {Node | null} node
+ * @param {Node} end
+ */
+export function remove_block_dom(node, end) {
+  while (node !== null) {
+    /** @type {Node | null} */
+    var next = node === end ? null : next_sibling(node);
+
+    /** @type {Element | Text | Comment} */ (node).remove();
+    node = next;
+  }
+}
+
 /**
  * @param {Block} block
  * @param {boolean} [remove_dom]
@@ -330,16 +344,7 @@ export function destroy_block(block, remove_dom = true) {
 
 	if ((remove_dom && (f & (BRANCH_BLOCK | ROOT_BLOCK)) !== 0) || (f & HEAD_BLOCK) !== 0) {
 		var s = block.s;
-		var node = s.start;
-		var end = s.end;
-
-		while (node !== null) {
-			var next = node === end ? null : next_sibling(node);
-
-			node.remove();
-			node = next;
-		}
-
+    remove_block_dom(s.start, s.end);
 		removed = true;
 	}
 

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

@@ -0,0 +1,41 @@
+/** @import { Block } from '#client' */
+
+import { remove_block_dom, render } from './blocks.js';
+import { first_child } from './operations.js';
+import { active_block } from './runtime.js';
+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) {
+	/** @type {ChildNode} */
+	var anchor = node;
+	/** @type {string} */
+	var html = '';
+
+	render(() => {
+		var block = /** @type {Block} */ (active_block);
+		html = get_html() + '';
+
+		if (block.s !== null && block.s.start !== null) {
+			remove_block_dom(block.s.start, /** @type {Node} */ (block.s.end));
+			block.s.start = block.s.end = null;
+		}
+
+		if (html === '') return;
+		/** @type {DocumentFragment} */
+		var node = create_fragment_from_html(html);
+
+		assign_nodes(/** @type {Node } */ (first_child(node)), /** @type {Node} */ (node.lastChild));
+
+    anchor.before(node);
+	});
+}

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

@@ -64,4 +64,6 @@ export { tracked_object } from '../../object.js';
 
 export { head } from './head.js';
 
-export { script } from './script.js';
+export { script } from './script.js';
+
+export { html } from './html.js';

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

@@ -35,7 +35,7 @@ export function assign_nodes(start, end) {
  * @param {boolean} use_mathml_namespace - Whether to use MathML namespace.
  * @returns {DocumentFragment}
  */
-function create_fragment_from_html(html, use_svg_namespace = false, use_mathml_namespace = false) {
+export function create_fragment_from_html(html, use_svg_namespace = false, use_mathml_namespace = false) {
   if (use_svg_namespace) {
     return from_namespace(html, 'svg');
   }

package/tests/client/__snapshots__/html.test.ripple.snap

@@ -0,0 +1,40 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`html directive > renders dynamic html 1`] = `
+<div>
+  <!---->
+  <div>
+    Test
+  </div>
+  <!---->
+  <button>
+    Update
+  </button>
+  
+</div>
+`;
+
+exports[`html directive > renders dynamic html 2`] = `
+<div>
+  <!---->
+  <div>
+    Updated
+  </div>
+  <!---->
+  <button>
+    Update
+  </button>
+  
+</div>
+`;
+
+exports[`html directive > renders static html 1`] = `
+<div>
+  <!---->
+  <div>
+    Test
+  </div>
+  <!---->
+  
+</div>
+`;

package/tests/client/date.test.ripple

@@ -0,0 +1,392 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, TrackedDate, track } from 'ripple';
+
+describe('TrackedDate', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container,
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+	});
+
+	it('handles getTime() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1);
+			let time = track(() => date.getTime());
+
+			<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
+			<pre>{@time}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+		const initialTime = container.querySelector('pre').textContent;
+
+		button.click();
+		flushSync();
+
+		const newTime = container.querySelector('pre').textContent;
+		expect(newTime).not.toBe(initialTime);
+		expect(parseInt(newTime)).toBeGreaterThan(parseInt(initialTime));
+	});
+
+	it('handles getFullYear() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 5, 15);
+			let year = track(() => date.getFullYear());
+
+			<button onClick={() => date.setFullYear(2030)}>{'Change Year'}</button>
+			<pre>{@year}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('2025');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('2030');
+	});
+
+	it('handles getMonth() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 15);
+			let month = track(() => date.getMonth());
+
+			<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
+			<pre>{@month}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('0');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('11');
+	});
+
+	it('handles getDate() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1);
+			let day = track(() => date.getDate());
+
+			<button onClick={() => date.setDate(15)}>{'Change Day'}</button>
+			<pre>{@day}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('1');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('15');
+	});
+
+	it('handles getDay() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1);
+			let dayOfWeek = track(() => date.getDay());
+
+			<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
+			<pre>{@dayOfWeek}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('3');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('4');
+	});
+
+	it('handles getHours() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1, 10, 30, 0);
+			let hours = track(() => date.getHours());
+
+			<button onClick={() => date.setHours(15)}>{'Change to 3 PM'}</button>
+			<pre>{@hours}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('10');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('15');
+	});
+
+	it('handles getMinutes() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1, 10, 15, 0);
+			let minutes = track(() => date.getMinutes());
+
+			<button onClick={() => date.setMinutes(45)}>{'Change Minutes'}</button>
+			<pre>{@minutes}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('15');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('45');
+	});
+
+	it('handles getSeconds() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1, 10, 15, 30);
+			let seconds = track(() => date.getSeconds());
+
+			<button onClick={() => date.setSeconds(45)}>{'Change Seconds'}</button>
+			<pre>{@seconds}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('30');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('45');
+	});
+
+	it('handles toISOString() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1, 12, 0, 0);
+			let isoString = track(() => date.toISOString());
+
+			<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
+			<pre>{@isoString}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+		const initialISO = container.querySelector('pre').textContent;
+
+		expect(initialISO).toContain('2025');
+
+		button.click();
+		flushSync();
+
+		const newISO = container.querySelector('pre').textContent;
+
+		// Just verify that the ISO string changed after the year was updated
+		expect(newISO).not.toBe(initialISO);
+		expect(newISO.length).toBeGreaterThan(0);
+	});
+
+	it('handles toDateString() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1);
+			let dateString = track(() => date.toDateString());
+
+			<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
+			<pre>{@dateString}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+		const initialDateString = container.querySelector('pre').textContent;
+
+		expect(initialDateString).toContain('Jan');
+
+		button.click();
+		flushSync();
+
+		const newDateString = container.querySelector('pre').textContent;
+		expect(newDateString).toContain('Dec');
+		expect(newDateString).not.toBe(initialDateString);
+	});
+
+	it('handles valueOf() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1);
+			let valueOf = track(() => date.valueOf());
+
+			<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
+			<pre>{@valueOf}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+		const initialValue = parseInt(container.querySelector('pre').textContent);
+
+		button.click();
+		flushSync();
+
+		const newValue = parseInt(container.querySelector('pre').textContent);
+		expect(newValue).toBeGreaterThan(initialValue);
+		expect(newValue - initialValue).toBe(24 * 60 * 60 * 1000);
+	});
+
+	it('handles multiple get methods reacting to same setTime change', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1, 10, 30, 15);
+			let year = track(() => date.getFullYear());
+			let month = track(() => date.getMonth());
+			let day = track(() => date.getDate());
+			let hours = track(() => date.getHours());
+
+			<button onClick={() => date.setTime(new Date(2026, 5, 15, 14, 45, 30).getTime())}>{'Change All'}</button>
+			<div>
+				{'Year: '}
+				{@year}
+			</div>
+			<div>
+				{'Month: '}
+				{@month}
+			</div>
+			<div>
+				{'Day: '}
+				{@day}
+			</div>
+			<div>
+				{'Hours: '}
+				{@hours}
+			</div>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+		const divs = container.querySelectorAll('div');
+
+		expect(divs[0].textContent).toBe('Year: 2025');
+		expect(divs[1].textContent).toBe('Month: 0');
+		expect(divs[2].textContent).toBe('Day: 1');
+		expect(divs[3].textContent).toBe('Hours: 10');
+
+		button.click();
+		flushSync();
+
+		expect(divs[0].textContent).toBe('Year: 2026');
+		expect(divs[1].textContent).toBe('Month: 5');
+		expect(divs[2].textContent).toBe('Day: 15');
+		expect(divs[3].textContent).toBe('Hours: 14');
+	});
+
+	it('handles constructor with different parameter combinations', () => {
+		component DateTest() {
+			let dateNow = new TrackedDate();
+			let dateFromString = new TrackedDate('2025-01-01');
+			let dateFromNumbers = new TrackedDate(2025, 0, 1);
+			let dateFromTimestamp = new TrackedDate(1735689600000);
+
+			let nowYear = track(() => dateNow.getFullYear());
+			let stringYear = track(() => dateFromString.getFullYear());
+			let numbersYear = track(() => dateFromNumbers.getFullYear());
+			let timestampYear = track(() => dateFromTimestamp.getFullYear());
+
+			<div>
+				{'Now: '}
+				{@nowYear}
+			</div>
+			<div>
+				{'String: '}
+				{@stringYear}
+			</div>
+			<div>
+				{'Numbers: '}
+				{@numbersYear}
+			</div>
+			<div>
+				{'Timestamp: '}
+				{@timestampYear}
+			</div>
+		}
+
+		render(DateTest);
+
+		const divs = container.querySelectorAll('div');
+		const currentYear = new Date().getFullYear();
+
+		expect(parseInt(divs[0].textContent.split(': ')[1])).toBe(currentYear);
+
+		// String date parsing may vary by timezone, just check it's a reasonable year
+		const stringYear = parseInt(divs[1].textContent.split(': ')[1]);
+		expect(stringYear).toBeGreaterThanOrEqual(2024);
+		expect(stringYear).toBeLessThanOrEqual(2025);
+		expect(divs[2].textContent).toBe('Numbers: 2025');
+
+		// Timestamp parsing may also vary by timezone
+		const timestampYear = parseInt(divs[3].textContent.split(': ')[1]);
+		expect(timestampYear).toBeGreaterThanOrEqual(2024);
+		expect(timestampYear).toBeLessThanOrEqual(2025);
+	});
+
+	it('handles get methods with arguments non-memoized', () => {
+		component DateTest() {
+			let date = new TrackedDate();
+			let localeDateString = track(() => date.toLocaleDateString('en-US'));
+			let localeTimeString = track(() => date.toLocaleTimeString('en-US'));
+
+			<button onClick={() => date.setFullYear(date.getFullYear() + 1)}>{'Next Year'}</button>
+			<div>
+				{'Date: '}
+				{@localeDateString}
+			</div>
+			<div>
+				{'Time: '}
+				{@localeTimeString}
+			</div>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+		const divs = container.querySelectorAll('div');
+		const initialDate = divs[0].textContent;
+		const initialTime = divs[1].textContent;
+
+		button.click();
+		flushSync();
+
+		const newDate = divs[0].textContent;
+		const newTime = divs[1].textContent;
+
+		expect(newDate).not.toBe(initialDate);
+		expect(newTime).toBe(initialTime);
+	});
+});

package/tests/client/html.test.ripple

@@ -0,0 +1,52 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, track } from 'ripple';
+
+describe('html directive', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+	});
+
+  it('renders static html', () => {
+    component App() {
+      let str = '<div>Test</div>';
+
+      {html str}
+    }
+
+    render(App);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders dynamic html', () => {
+    component App() {
+      let str = track('<div>Test</div>');
+
+      {html @str}
+
+      <button onClick={() => { @str = '<div>Updated</div>'; }}>{'Update'}</button>
+    }
+
+    render(App);
+    expect(container).toMatchSnapshot();
+
+    const button = container.querySelector('button');
+    button.click();
+    flushSync();
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/types/index.d.ts

@@ -12,13 +12,13 @@ export declare function flushSync<T>(fn: () => T): T;
 export declare function effect(fn: (() => void) | (() => () => void)): void;
 
 export interface TrackedArrayConstructor {
-  new <T>(...elements: T[]): TrackedArray<T>;   // must be used with `new`
-  from<T>(arrayLike: ArrayLike<T>): TrackedArray<T>;
-  of<T>(...items: T[]): TrackedArray<T>;
-  fromAsync<T>(iterable: AsyncIterable<T>): Promise<TrackedArray<T>>;
+	new <T>(...elements: T[]): TrackedArray<T>;   // must be used with `new`
+	from<T>(arrayLike: ArrayLike<T>): TrackedArray<T>;
+	of<T>(...items: T[]): TrackedArray<T>;
+	fromAsync<T>(iterable: AsyncIterable<T>): Promise<TrackedArray<T>>;
 }
 
-export interface TrackedArray<T> extends Array<T> {}
+export interface TrackedArray<T> extends Array<T> { }
 
 export declare const TrackedArray: TrackedArrayConstructor;
 
@@ -38,10 +38,12 @@ export declare class TrackedSet<T> extends Set<T> {
 	symmetricDifference(other: TrackedSet<T> | Set<T>): TrackedSet<T>;
 	union(other: TrackedSet<T> | Set<T>): TrackedSet<T>;
 	toJSON(): T[];
+	#private;
 }
 
 export declare class TrackedMap<K, V> extends Map<K, V> {
 	toJSON(): [K, V][];
+	#private;
 }
 
 // Compiler-injected runtime symbols (for Ripple component development)
@@ -74,17 +76,17 @@ export type Tracked<V> = { '#v': V };
 export type Props<K extends PropertyKey = any, V = unknown> = Record<K, V>;
 export type PropsWithExtras<T extends object> = Props & T & Record<string, unknown>;
 export type PropsWithChildren<T extends object = {}> =
-  Expand<Omit<Props, 'children'> & { children: Component } & T>;
+	Expand<Omit<Props, 'children'> & { children: Component } & T>;
 
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
 type PickKeys<T, K extends readonly (keyof T)[]> =
-  { [I in keyof K]: Tracked<T[K[I] & keyof T]> };
+	{ [I in keyof K]: Tracked<T[K[I] & keyof T]> };
 
 type RestKeys<T, K extends readonly (keyof T)[]> = Expand<Omit<T, K[number]>>;
 
 type SplitResult<T extends Props, K extends readonly (keyof T)[]> =
-  [...PickKeys<T, K>, Tracked<RestKeys<T, K>>];
+	[...PickKeys<T, K>, Tracked<RestKeys<T, K>>];
 
 export declare function track<V>(value?: V | (() => V), get?: (v: V) => V, set?: (next: V, prev: V) => V): Tracked<V>;
 
@@ -129,33 +131,38 @@ export function on(
 ): () => void;
 
 export type TrackedObjectShallow<T> = {
-  [K in keyof T]: T[K] | Tracked<T[K]>;
+	[K in keyof T]: T[K] | Tracked<T[K]>;
 };
 
 export type TrackedObjectDeep<T> =
-  T extends string | number | boolean | null | undefined | symbol | bigint
-    ? T | Tracked<T>
-    : T extends TrackedArray<infer U>
-      ? TrackedArray<U> | Tracked<TrackedArray<U>>
-    : T extends TrackedSet<infer U>
-      ? TrackedSet<U> | Tracked<TrackedSet<U>>
-    : T extends TrackedMap<infer K, infer V>
-      ? TrackedMap<K, V> | Tracked<TrackedMap<K, V>>
-    : T extends Array<infer U>
-      ? Array<TrackedObjectDeep<U>> | Tracked<Array<TrackedObjectDeep<U>>>
-    : T extends Set<infer U>
-      ? Set<TrackedObjectDeep<U>> | Tracked<Set<TrackedObjectDeep<U>>>
-    : T extends Map<infer K, infer V>
-      ? Map<TrackedObjectDeep<K>, TrackedObjectDeep<V>> |
-        Tracked<Map<TrackedObjectDeep<K>, TrackedObjectDeep<V>>>
-    : T extends object
-      ? { [K in keyof T]: TrackedObjectDeep<T[K]> | Tracked<TrackedObjectDeep<T[K]>> }
-    : T | Tracked<T>;
+	T extends string | number | boolean | null | undefined | symbol | bigint
+	? T | Tracked<T>
+	: T extends TrackedArray<infer U>
+	? TrackedArray<U> | Tracked<TrackedArray<U>>
+	: T extends TrackedSet<infer U>
+	? TrackedSet<U> | Tracked<TrackedSet<U>>
+	: T extends TrackedMap<infer K, infer V>
+	? TrackedMap<K, V> | Tracked<TrackedMap<K, V>>
+	: T extends Array<infer U>
+	? Array<TrackedObjectDeep<U>> | Tracked<Array<TrackedObjectDeep<U>>>
+	: T extends Set<infer U>
+	? Set<TrackedObjectDeep<U>> | Tracked<Set<TrackedObjectDeep<U>>>
+	: T extends Map<infer K, infer V>
+	? Map<TrackedObjectDeep<K>, TrackedObjectDeep<V>> |
+	Tracked<Map<TrackedObjectDeep<K>, TrackedObjectDeep<V>>>
+	: T extends object
+	? { [K in keyof T]: TrackedObjectDeep<T[K]> | Tracked<TrackedObjectDeep<T[K]>> }
+	: T | Tracked<T>;
 
 export type TrackedObject<T extends object> = T & {};
 
 export interface TrackedObjectConstructor {
-  new <T extends object>(obj: T): TrackedObject<T>;
+	new <T extends object>(obj: T): TrackedObject<T>;
 }
 
 export declare const TrackedObject: TrackedObjectConstructor;
+
+export class SvelteDate extends Date {
+	constructor(...params: any[]);
+	#private;
+}