ripple 0.2.43 → 0.2.45

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is a TypeScript UI framework for the web",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.43",
+  "version": "0.2.45",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -38,6 +38,82 @@ function RipplePlugin(config) {
 				return null;
 			}
 
+			// Override getTokenFromCode to handle @ as an identifier prefix
+			getTokenFromCode(code) {
+				if (code === 64) { // '@' character
+					// Look ahead to see if this is followed by a valid identifier character
+					if (this.pos + 1 < this.input.length) {
+						const nextChar = this.input.charCodeAt(this.pos + 1);
+						// Check if the next character can start an identifier
+						if ((nextChar >= 65 && nextChar <= 90) || // A-Z
+							(nextChar >= 97 && nextChar <= 122) || // a-z
+							nextChar === 95 || nextChar === 36) { // _ or $
+							
+							// Check if we're in an expression context
+							// In JSX expressions, inside parentheses, assignments, etc.
+							// we want to treat @ as an identifier prefix rather than decorator
+							const currentType = this.type;
+							const inExpression = this.exprAllowed || 
+								currentType === tt.braceL || // Inside { }
+								currentType === tt.parenL || // Inside ( )
+								currentType === tt.eq || // After =
+								currentType === tt.comma || // After ,
+								currentType === tt.colon || // After :
+								currentType === tt.question || // After ?
+								currentType === tt.logicalOR || // After ||
+								currentType === tt.logicalAND; // After &&
+							
+							if (inExpression) {
+								return this.readAtIdentifier();
+							}
+						}
+					}
+				}
+				return super.getTokenFromCode(code);
+			}
+
+			// Read an @ prefixed identifier
+			readAtIdentifier() {
+				const start = this.pos;
+				this.pos++; // skip '@'
+				
+				// Read the identifier part manually
+				let word = '';
+				while (this.pos < this.input.length) {
+					const ch = this.input.charCodeAt(this.pos);
+					if ((ch >= 65 && ch <= 90) || // A-Z
+						(ch >= 97 && ch <= 122) || // a-z
+						(ch >= 48 && ch <= 57) || // 0-9
+						ch === 95 || ch === 36) { // _ or $
+						word += this.input[this.pos++];
+					} else {
+						break;
+					}
+				}
+				
+				if (word === '') {
+					this.raise(start, 'Invalid @ identifier');
+				}
+				
+				// Return the full identifier including @
+				return this.finishToken(tt.name, '@' + word);
+			}
+
+			// Override parseIdent to mark @ identifiers as tracked
+			parseIdent(liberal) {
+				const node = super.parseIdent(liberal);
+				if (node.name && node.name.startsWith('@')) {
+					node.name = node.name.slice(1); // Remove the '@' for internal use
+					node.tracked = true;
+					node.start++;
+					const prev_pos = this.pos;
+					this.pos = node.start;
+					node.loc.start = this.curPosition();
+					this.pos = prev_pos;
+				}
+				return node;
+			}
+
 			parseExportDefaultDeclaration() {
 				// Check if this is "export default component"
 				if (this.value === 'component') {
@@ -139,15 +215,14 @@ function RipplePlugin(config) {
 				}
 
 				if (this.eat(tt.braceL)) {
-					if (this.type.label === '@') {
+					if (this.value === 'ref') {
 						this.next();
-						if (this.value !== 'use') {
-							this.unexpected();
+						if (this.type === tt.braceR) {
+							this.raise(this.start, '"ref" is a Ripple keyword and must be used in the form {ref fn}');
 						}
-						this.next();
 						node.argument = this.parseMaybeAssign();
 						this.expect(tt.braceR);
-						return this.finishNode(node, 'UseAttribute');
+						return this.finishNode(node, 'RefAttribute');
 					} else if (this.type === tt.ellipsis) {
 						this.expect(tt.ellipsis);
 						node.argument = this.parseMaybeAssign();

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

@@ -118,12 +118,34 @@ const visitors = {
 		if (
 			is_reference(node, /** @type {Node} */ (parent)) &&
 			context.state.metadata?.tracking === false &&
-			is_tracked_name(node.name) &&
+			is_tracked_name(node) &&
 			binding?.node !== node
 		) {
 			context.state.metadata.tracking = true;
 		}
 
+		if (
+			is_reference(node, /** @type {Node} */ (parent)) &&
+			node.tracked &&
+			binding?.node !== node
+		) {
+			if (context.state.metadata?.tracking === false) {
+				context.state.metadata.tracking = true;
+			}
+			binding.transform = {
+				read_tracked: (node) => b.call('$.get_tracked', node),
+				assign_tracked: (node, value) => b.call('$.set', node, value, b.id('__block')),
+				update_tracked: (node) => {
+					return b.call(
+						node.prefix ? '$.update_pre' : '$.update',
+						node.argument,
+						b.id('__block'),
+						node.operator === '--' && b.literal(-1),
+					);
+				},
+			};
+		}
+
 		context.next();
 	},
 

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

@@ -405,7 +405,9 @@ function attribute_matches(node, name, expected_value, operator, case_insensitiv
 		if (attribute.type === 'SpreadAttribute') return true;
 
 		if (attribute.type !== 'Attribute') continue;
-		if (attribute.name.name.toLowerCase() !== name.toLowerCase()) continue;
+
+		const lowerCaseName = name.toLowerCase();
+		if (![lowerCaseName, `$${lowerCaseName}`].includes(attribute.name.name.toLowerCase())) continue;
 
 		if (expected_value === null) return true;
 

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

@@ -72,10 +72,15 @@ function build_getter(node, context) {
 
 	for (let i = context.path.length - 1; i >= 0; i -= 1) {
 		const binding = state.scope.get(node.name);
+		const transform = binding?.transform;
 
 		// don't transform the declaration itself
-		if (node !== binding?.node && binding?.transform?.read) {
-			return binding.transform.read(node, context.state?.metadata?.spread, context.visit);
+		if (node !== binding?.node) {
+			const read_fn = transform?.read || (node.tracked && transform?.read_tracked);
+
+			if (read_fn) {
+				return read_fn(node, context.state?.metadata?.spread, context.visit);
+			}
 		}
 	}
 
@@ -100,7 +105,7 @@ const visitors = {
 			const binding = context.state.scope.get(node.name);
 			if (
 				context.state.metadata?.tracking === false &&
-				is_tracked_name(node.name) &&
+				(is_tracked_name(node.name) || node.tracked) &&
 				binding?.node !== node
 			) {
 				context.state.metadata.tracking = true;
@@ -135,6 +140,18 @@ const visitors = {
 			context.state.metadata.tracking = true;
 		}
 
+		if (
+			!context.state.to_ts &&
+			callee.type === 'Identifier' &&
+			callee.name === 'tracked' &&
+			is_ripple_import(callee, context)
+		) {
+			return {
+				...node,
+				arguments: [...node.arguments.map((arg) => context.visit(arg)), b.id('__block')],
+			};
+		}
+
 		if (
 			!is_inside_component(context, true) ||
 			context.state.to_ts ||
@@ -199,8 +216,8 @@ const visitors = {
 							callee.optional ? b.true : undefined,
 							node.optional ? b.true : undefined,
 							...node.arguments.map((arg) => context.visit(arg)),
-						)
-					)
+						),
+					),
 				);
 			}
 		}
@@ -508,9 +525,10 @@ const visitors = {
 
 			if (is_spreading) {
 				// For spread attributes, store just the actual value, not the full attribute string
-				const actual_value = is_boolean_attribute(name) && value === true 
-					? b.literal(true) 
-					: b.literal(value === true ? '' : value);
+				const actual_value =
+					is_boolean_attribute(name) && value === true
+						? b.literal(true)
+						: b.literal(value === true ? '' : value);
 				spread_attributes.push(b.prop('init', b.literal(name), actual_value));
 			} else {
 				state.template.push(attr_value);
@@ -665,9 +683,9 @@ const visitors = {
 					}
 				} else if (attr.type === 'SpreadAttribute') {
 					spread_attributes.push(b.spread(b.call('$.spread_object', visit(attr.argument, state))));
-				} else if (attr.type === 'UseAttribute') {
+				} else if (attr.type === 'RefAttribute') {
 					const id = state.flush_node();
-					state.init.push(b.stmt(b.call('$.use', id, b.thunk(visit(attr.argument, state)))));
+					state.init.push(b.stmt(b.call('$.ref', id, b.thunk(visit(attr.argument, state)))));
 				}
 			}
 
@@ -770,8 +788,8 @@ const visitors = {
 							),
 						),
 					);
-				} else if (attr.type === 'UseAttribute') {
-					props.push(b.prop('init', b.call('$.use_prop'), visit(attr.argument, state), true));
+				} else if (attr.type === 'RefAttribute') {
+					props.push(b.prop('init', b.call('$.ref_prop'), visit(attr.argument, state), true));
 				} else if (attr.type === 'AccessorAttribute') {
 					// # means it's an accessor to the runtime
 					tracked.push(b.literal('#' + attr.name.name));
@@ -1002,7 +1020,10 @@ const visitors = {
 
 		if (left.type === 'MemberExpression') {
 			// need to capture setting length of array to throw a runtime error
-			if (left.property.type === 'Identifier' && (is_tracked_name(left.property.name) || left.property.name === 'length')) {
+			if (
+				left.property.type === 'Identifier' &&
+				(is_tracked_name(left.property.name) || left.property.name === 'length')
+			) {
 				if (left.property.name !== '$length') {
 					return b.call(
 						'$.set_property',
@@ -1058,8 +1079,9 @@ const visitors = {
 		const transformers = left && binding?.transform;
 
 		if (left === argument) {
-			if (transformers?.update) {
-				return transformers.update(node);
+			const update_fn = transformers?.update || transformers?.update_tracked;
+			if (update_fn) {
+				return update_fn(node);
 			}
 		}
 
@@ -1299,7 +1321,11 @@ const visitors = {
 	},
 
 	TemplateLiteral(node, context) {
-		const expressions = node.expressions.map(expr => context.visit(expr));
+		if (node.expressions.length === 0) {
+			return b.literal(node.quasis[0].value.cooked);
+		}
+
+		const expressions = node.expressions.map((expr) => context.visit(expr));
 		return b.template(node.quasis, expressions);
 	},
 
@@ -1409,12 +1435,12 @@ function transform_ts_child(node, context) {
 		const children = [];
 		let has_children_props = false;
 
-		// Filter out UseAttributes and handle them separately
-		const use_attributes = [];
+		// Filter out RefAttributes and handle them separately
+		const ref_attributes = [];
 		const attributes = node.attributes
 			.filter((attr) => {
-				if (attr.type === 'UseAttribute') {
-					use_attributes.push(attr);
+				if (attr.type === 'RefAttribute') {
+					ref_attributes.push(attr);
 					return false;
 				}
 				return true;
@@ -1438,10 +1464,10 @@ function transform_ts_child(node, context) {
 				}
 			});
 
-		// Add UseAttribute references separately for sourcemap purposes
-		for (const use_attr of use_attributes) {
+		// Add RefAttribute references separately for sourcemap purposes
+		for (const ref_attr of ref_attributes) {
 			const metadata = { await: false };
-			const argument = visit(use_attr.argument, { ...state, metadata });
+			const argument = visit(ref_attr.argument, { ...state, metadata });
 			state.init.push(b.stmt(argument));
 		}
 

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

@@ -61,8 +61,8 @@ export function convert_source_map_to_mappings(source_map, source, generated_cod
 			);
 			const source_content = source.substring(source_offset, source_offset + segment_length);
 
-			// Skip mappings for UseAttribute syntax to avoid overlapping sourcemaps
-			if (source_content.includes('{@use ') || source_content.match(/\{\s*@use\s+/)) {
+			// Skip mappings for RefAttribute syntax to avoid overlapping sourcemaps
+			if (source_content.includes('{ref ') || source_content.match(/\{\s*ref\s+/)) {
 				continue;
 			}
 

package/src/compiler/utils.js

@@ -19,7 +19,7 @@ const VOID_ELEMENT_NAMES = [
 	'param',
 	'source',
 	'track',
-	'wbr'
+	'wbr',
 ];
 
 /**
@@ -564,19 +564,21 @@ export function build_assignment(operator, left, right, context) {
 	const transform = binding.transform;
 
 	// reassignment
-	if (
-		(object === left || (left.type === 'MemberExpression' && left.computed && operator === '=')) &&
-		transform?.assign
-	) {
-		let value = /** @type {Expression} */ (
-			context.visit(build_assignment_value(operator, left, right))
-		);
+	if (object === left || (left.type === 'MemberExpression' && left.computed && operator === '=')) {
+		const assign_fn = transform?.assign || transform?.assign_tracked;
+		if (assign_fn) {
+			let value = /** @type {Expression} */ (
+				context.visit(build_assignment_value(operator, left, right))
+			);
 
-		return transform.assign(
-			object,
-			value,
-			left.type === 'MemberExpression' && left.computed ? context.visit(left.property) : undefined,
-		);
+			return assign_fn(
+				object,
+				value,
+				left.type === 'MemberExpression' && left.computed
+					? context.visit(left.property)
+					: undefined,
+			);
+		}
 	}
 
 	// mutation

package/src/runtime/array.js

@@ -1,8 +1,11 @@
-import { TRACKED_OBJECT, ARRAY_SET_INDEX_AT } from './internal/client/constants.js';
+import { TRACKED_OBJECT, ARRAY_SET_INDEX_AT, MAX_ARRAY_LENGTH } from './internal/client/constants.js';
 import { get, safe_scope, set, tracked } from './internal/client/runtime.js';
 import { is_ripple_array } from './internal/client/utils.js';
 /** @import { Block, Tracked } from '#client' */
 
+/** @type {unique symbol} */
+const INIT_AFTER_NEW = Symbol();
+
 /** @type {(symbol | string | any)[]} */
 const introspect_methods = [
 	'concat',
@@ -36,7 +39,7 @@ const introspect_methods = [
 	'with',
 ];
 
-let init = false;
+let is_proto_set = false;
 
 /**
  * @template T
@@ -45,6 +48,8 @@ let init = false;
 export class RippleArray extends Array {
 	/** @type {Array<Tracked>} */
 	#tracked_elements = [];
+	/** @type {Tracked} */
+	// @ts-expect-error
 	#tracked_index;
 
     /**
@@ -55,11 +60,11 @@ export class RippleArray extends Array {
      * @returns {RippleArray<U>}
      */
 	static from(arrayLike, mapFn, thisArg) {
-		return new RippleArray(...(
-			mapFn ?
+		var arr = mapFn ?
 			Array.from(arrayLike, mapFn, thisArg)
-        	: Array.from(arrayLike)
-		));
+        	: Array.from(arrayLike);
+
+		return get_instance_from_static(arr);
 	}
 
     /**
@@ -70,11 +75,30 @@ export class RippleArray extends Array {
      * @returns {Promise<RippleArray<U>>}
      */
 	static async fromAsync(arrayLike, mapFn, thisArg) {
-		return new RippleArray(...(
-			mapFn ?
+		var block = safe_scope();
+		// create empty array to get the right scope
+		var result = new RippleArray();
+
+		var arr = mapFn ?
 			await Array.fromAsync(arrayLike, mapFn, thisArg)
 			: await Array.fromAsync(arrayLike)
-		));
+
+		var first = get_first_if_length(arr);
+
+		if (first) {
+			result[0] = first;
+		} else {
+			result.length = arr.length;
+			for (let i = 0; i < arr.length; i++) {
+				if (i in arr) {
+					result[i] = arr[i];
+				}
+			}
+		}
+
+		result[INIT_AFTER_NEW](block);
+
+		return result
 	}
 
     /**
@@ -83,7 +107,9 @@ export class RippleArray extends Array {
      * @returns {RippleArray<U>}
      */
 	static of(...elements) {
-		return new RippleArray(...elements);
+		var arr = Array.of(...elements);
+
+		return get_instance_from_static(arr);
 	}
 
 	/**
@@ -92,24 +118,33 @@ export class RippleArray extends Array {
 	constructor(...elements) {
 		super(...elements);
 
-		var block = safe_scope();
-		var tracked_elements = this.#tracked_elements;
+		this[INIT_AFTER_NEW]();
 
-		for (var i = 0; i < this.length; i++) {
-			if (!(i in this)) {
-				continue;
+		if (!is_proto_set) {
+			is_proto_set = true;
+			this.#set_proto();
+		}
+	}
+
+	[INIT_AFTER_NEW](block = safe_scope()) {
+		if (this.length !== 0) {
+			var tracked_elements = this.#tracked_elements;
+			for (var i = 0; i < this.length; i++) {
+				if (!(i in this)) {
+					continue;
+				}
+				tracked_elements[i] = tracked(this[i], block);
 			}
-			tracked_elements[i] = tracked(this[i], block);
 		}
-		this.#tracked_index = tracked(this.length, block);
 
-		if (!init) {
-			init = true;
-			this.#init();
+		if (!this.#tracked_index) {
+			this.#tracked_index = tracked(this.length, block);
+		} else if (this.#tracked_index.v !== this.length) {
+			set(this.#tracked_index, this.length, block);
 		}
 	}
 
-	#init() {
+	#set_proto() {
 		var proto = RippleArray.prototype;
 		var array_proto = Array.prototype;
 
@@ -138,7 +173,7 @@ export class RippleArray extends Array {
 				// the caller reruns on length changes
 				this.$length;
 				// the caller reruns on element changes
-				get_all_elements(this);
+				establish_trackable_deps(this);
 				return result;
 			};
 		}
@@ -564,14 +599,72 @@ export class RippleArray extends Array {
 export function get_all_elements(array) {
 	/** @type {Tracked[]} */
 	var tracked_elements = /** @type {Tracked[]} */ (array[TRACKED_OBJECT]);
-	var arr = [];
+	// pre-allocate to support holey arrays
+	var result = new Array(array.length);
+
+	for (var i = 0; i < array.length; i++) {
+		if (tracked_elements[i] !== undefined) {
+			get(tracked_elements[i]);
+		}
+
+		if (i in array) {
+			result[i] = array[i];
+		}
+	}
+
+	return result;
+}
+
+/**
+ * @template T
+ * @param {RippleArray<T>} array
+ * @returns {void}
+ */
+function establish_trackable_deps (array) {
+	var tracked_elements = array[TRACKED_OBJECT];
 
 	for (var i = 0; i < tracked_elements.length; i++) {
 		if (tracked_elements[i] !== undefined) {
 			get(tracked_elements[i]);
 		}
-		arr.push(array[i]);
+	}
+}
+
+/**
+ * @template T
+ * @param {T[]} array
+ * @returns {RippleArray<T>}
+ */
+function get_instance_from_static(array) {
+	/** @type RippleArray<T> */
+	var result;
+	/** @type {T | void} */
+	var first = get_first_if_length(array);
+
+	if (first) {
+		result = new RippleArray();
+		result[0] = first;
+		result[INIT_AFTER_NEW]();
+	} else {
+		result = new RippleArray(...array);
 	}
 
-	return arr;
+	return result;
+}
+
+/**
+ * @template T
+ * @param {T[]} array
+ * @returns {T | void}
+ */
+function get_first_if_length (array) {
+	var first = array[0];
+
+	if (
+		array.length === 1 && (0 in array) && Number.isInteger(first)
+		&& /** @type {number} */ (first) >= 0
+		&& /** @type {number} */ (first) <= MAX_ARRAY_LENGTH
+	) {
+		return first;
+	}
 }

package/src/runtime/index.js

@@ -36,7 +36,7 @@ export function mount(component, options) {
 
 export { create_context as createContext } from './internal/client/context.js';
 
-export { flush_sync as flushSync, untrack, deferred } from './internal/client/runtime.js';
+export { flush_sync as flushSync, untrack, deferred, tracked } from './internal/client/runtime.js';
 
 export { RippleArray } from './array.js';
 
@@ -50,3 +50,4 @@ export { user_effect as effect } from './internal/client/blocks.js';
 
 export { Portal } from './internal/client/portal.js';
 
+export { ref_prop as createRefKey } from './internal/client/runtime.js';

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

@@ -99,23 +99,23 @@ export function async(fn) {
  * @param {() => (element: Element) => (void | (() => void))} get_fn
  * @returns {Block}
  */
-export function use(element, get_fn) {
+export function ref(element, get_fn) {
 	/** @type {(element: Element) => (void | (() => void) | undefined)} */
-	var use_fn;
+	var ref_fn;
 	/** @type {Block | null} */
 	var e;
 
 	return block(RENDER_BLOCK, () => {
-		if (use_fn !== (use_fn = get_fn())) {
+		if (ref_fn !== (ref_fn = get_fn())) {
 			if (e) {
 				destroy_block(e);
 				e = null;
 			}
 
-			if (use_fn) {
+			if (ref_fn) {
 				e = branch(() => {
 					effect(() => {
-						return use_fn(element);
+						return ref_fn(element);
 					});
 				});
 			}

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

@@ -19,8 +19,11 @@ export var DESTROYED = 1 << 17;
 export var LOGIC_BLOCK = FOR_BLOCK | IF_BLOCK | TRY_BLOCK;
 
 export var UNINITIALIZED = Symbol();
-export var TRACKED_OBJECT = Symbol();
+/** @type {unique symbol} */
+export const TRACKED_OBJECT = Symbol();
 export var SPREAD_OBJECT = Symbol();
 export var COMPUTED_PROPERTY = Symbol();
-export var USE_PROP = '@use';
-export var ARRAY_SET_INDEX_AT = Symbol();
+export var REF_PROP = 'ref';
+/** @type {unique symbol} */
+export const ARRAY_SET_INDEX_AT = Symbol();
+export const MAX_ARRAY_LENGTH = 2**32 - 1;

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

@@ -9,7 +9,7 @@ export {
 	set_selected,
 } from './render.js';
 
-export { render, render_spread, async, use } from './blocks.js';
+export { render, render_spread, async, ref } from './blocks.js';
 
 export { event, delegate } from './events.js';
 
@@ -42,7 +42,7 @@ export {
 	push_component,
 	pop_component,
 	untrack,
-	use_prop,
+	ref_prop,
 	fallback,
 	exclude_from_object,
 } from './runtime.js';

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

@@ -1,5 +1,5 @@
-import { destroy_block, use } from './blocks';
-import { USE_PROP } from './constants';
+import { destroy_block, ref } from './blocks';
+import { REF_PROP } from './constants';
 import { get_descriptors, get_own_property_symbols, get_prototype_of } from './utils';
 
 export function set_text(text, value) {
@@ -174,16 +174,16 @@ export function apply_element_spread(element, fn) {
 		}
 
 		for (const symbol of get_own_property_symbols(next)) {
-			var use_fn = next[symbol];
+			var ref_fn = next[symbol];
 
-			if (symbol.description === USE_PROP && (!prev || use_fn !== prev[symbol])) {
+			if (symbol.description === REF_PROP && (!prev || ref_fn !== prev[symbol])) {
 				if (effects[symbol]) {
 					destroy_block(effects[symbol]);
 				}
-				effects[symbol] = use(element, () => use_fn);
+				effects[symbol] = ref(element, () => ref_fn);
 			}
 
-			next[symbol] = use_fn;
+			next[symbol] = ref_fn;
 		}
 
 		set_attributes(element, next);

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

@@ -25,7 +25,7 @@ import {
 	TRACKED_OBJECT,
 	TRY_BLOCK,
 	UNINITIALIZED,
-	USE_PROP,
+	REF_PROP,
 	ARRAY_SET_INDEX_AT,
 } from './constants';
 import { capture, suspend } from './try.js';
@@ -260,6 +260,7 @@ export function run_block(block) {
  * @returns {Tracked}
  */
 export function tracked(v, b) {
+	// TODO: now we expose tracked, we should likely block access in DEV somehow
 	return {
 		b,
 		c: 0,
@@ -1203,8 +1204,8 @@ export function pop_component() {
 	active_component = component.p;
 }
 
-export function use_prop() {
-	return Symbol(USE_PROP);
+export function ref_prop() {
+	return Symbol(REF_PROP);
 }
 
 /**

package/tests/array.test.ripple

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, flushSync, effect, untrack, RippleArray } from 'ripple';
-import { ARRAY_SET_INDEX_AT } from '../src/runtime/internal/client/constants.js';
+import { ARRAY_SET_INDEX_AT, MAX_ARRAY_LENGTH } from '../src/runtime/internal/client/constants.js';
 
 describe('RippleArray', () => {
 	let container;
@@ -1244,37 +1244,34 @@ describe('RippleArray', () => {
 		expect(container.querySelector('pre').textContent).toBe('Cannot set length on RippleArray, use $length instead');
 	});
 
-	('fromAsync' in Array.prototype ? describe : describe.skip)('RippleArray fromAsync', () => {
+	('fromAsync' in Array.prototype ? describe : describe.skip)('RippleArray fromAsync', async () => {
 		it('handles static fromAsync method with reactivity', async () => {
-			component ArrayTest() {
-				let itemsPromise = RippleArray.fromAsync(Promise.resolve([1, 2, 3]));
-				let items = null;
-				let error = null;
-
+			component Parent() {
 				try {
-					items = await itemsPromise;
-				} catch (e) {
-					error = e.message;
+					<ArrayTest />
+				} async {
+					<div>{'Loading placeholder...'}</div>
 				}
+			}
+
+			component ArrayTest() {
+				let items = await RippleArray.fromAsync([1, 2, 3]);
 
 				<button onClick={() => {
-				if (items) items.push(4);
+					if (items) items.push(4);
 				}}>{'add item'}</button>
-				<pre>{error ? 'Error: ' + error : 'Loaded'}</pre>
-				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
+
+				<pre>{JSON.stringify(items)}</pre>
 			}
 
-			render(ArrayTest);
+			render(Parent);
 
-			// Wait for promise to resolve
-			await new Promise(resolve => setTimeout(resolve, 50));
+			await new Promise(resolve => setTimeout(resolve, 0));
 			flushSync();
 
 			const addButton = container.querySelector('button');
 
-			// Check that the promise resolved correctly
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('Loaded');
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3]');
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
 
 			// Test adding an item to the async-created array
 			addButton.click();
@@ -1284,33 +1281,35 @@ describe('RippleArray', () => {
 		});
 
 		it('handles static fromAsync method with mapping function', async () => {
+			component Parent() {
+				try {
+					<ArrayTest />
+				} async {
+					<div>{'Loading placeholder...'}</div>
+				}
+			}
+
 			component ArrayTest() {
-				let itemsPromise = RippleArray.fromAsync(
-				Promise.resolve([1, 2, 3]),
-				x => x * 2
+				let items = await RippleArray.fromAsync(
+					[1, 2, 3],
+					x => x * 2
 				);
-				let items = null;
-
-				items = await itemsPromise;
 
 				<button onClick={() => {
-				if (items) items.push(8);
+					if (items) items.push(8);
 				}}>{'add item'}</button>
 				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
 			}
 
-			render(ArrayTest);
+			render(Parent);
 
-			// Wait for promise to resolve
-			await new Promise(resolve => setTimeout(resolve, 50));
+			await new Promise(resolve => setTimeout(resolve, 0));
 			flushSync();
 
 			const addButton = container.querySelector('button');
 
-			// Check that the promise resolved correctly with mapping applied
 			expect(container.querySelector('pre').textContent).toBe('[2,4,6]');
 
-			// Test adding an item to the async-created array
 			addButton.click();
 			flushSync();
 
@@ -1318,13 +1317,20 @@ describe('RippleArray', () => {
 		});
 
 		it('handles error in fromAsync method', async () => {
+			component Parent() {
+				try {
+					<ArrayTest />
+				} async {
+					<div>{'Loading placeholder...'}</div>
+				}
+			}
+
 			component ArrayTest() {
-				let itemsPromise = RippleArray.fromAsync(Promise.reject(new Error('Async error')));
 				let items = null;
 				let error = null;
 
 				try {
-					items = await itemsPromise;
+					items = await RippleArray.fromAsync(Promise.reject(new Error('Async error')));
 				} catch (e) {
 					error = e.message;
 				}
@@ -1333,13 +1339,11 @@ describe('RippleArray', () => {
 				<pre>{items ? JSON.stringify(items) : 'No items'}</pre>
 			}
 
-			render(ArrayTest);
+			render(Parent);
 
-			// Wait for promise to reject
-			await new Promise(resolve => setTimeout(resolve, 50));
+			await new Promise(resolve => setTimeout(resolve, 0));
 			flushSync();
 
-			// Check that the error was caught correctly
 			expect(container.querySelectorAll('pre')[0].textContent).toBe('Error: Async error');
 			expect(container.querySelectorAll('pre')[1].textContent).toBe('No items');
 		});
@@ -1463,6 +1467,90 @@ describe('RippleArray', () => {
 			expect(container.querySelectorAll('pre')[5].textContent).toBe('items[4]: 4');
 		});
 	});
+
+	describe('Creates RippleArray with a single element', () => {
+		it('specifies int', () => {
+			component ArrayTest() {
+				let items = new RippleArray(3);
+				<pre>{JSON.stringify(items)}</pre>
+				<pre>{items.$length}</pre>
+			}
+
+			render(ArrayTest);
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[null,null,null]');
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+		});
+
+		it('errors on exceeding max array size', () => {
+			component ArrayTest() {
+				let error = null;
+
+				try {
+					new RippleArray(MAX_ARRAY_LENGTH + 1);
+				} catch (e) {
+					error = e.message;
+				}
+
+				<pre>{error}</pre>
+			}
+
+			render(ArrayTest);
+
+			expect(container.querySelector('pre').textContent).toBe('Invalid array length');
+		});
+
+		it('specifies int using static from method', () => {
+			component ArrayTest() {
+				let items = RippleArray.from([4]);
+				<pre>{JSON.stringify(items)}</pre>
+				<pre>{items.$length}</pre>
+			}
+
+			render(ArrayTest);
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[4]');
+			// expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+		});
+
+		it('specifies int using static of method', () => {
+			component ArrayTest() {
+				let items = RippleArray.of(5);
+				<pre>{JSON.stringify(items)}</pre>
+				<pre>{items.$length}</pre>
+			}
+
+			render(ArrayTest);
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[5]');
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+		});
+
+		('fromAsync' in Array.prototype ? it : it.skip)('specifies int using static fromAsync method', async () => {
+			component Parent() {
+				try {
+					<ArrayTest />
+				} async {
+					<div>{'Loading placeholder...'}</div>
+				}
+			}
+
+			component ArrayTest() {
+				const items = await RippleArray.fromAsync([6]);
+
+				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
+				<pre>{items ? items.$length : ''}</pre>
+			}
+
+			render(Parent);
+
+			await new Promise(resolve => setTimeout(resolve, 0));
+			flushSync();
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[6]');
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+		});
+	});
 });
 
 

package/tests/basic.test.ripple

@@ -88,12 +88,39 @@ describe('basic', () => {
 		expect(container.querySelector('div').textContent).toEqual('');
 	});
 
+	it('render tick template literal for nested children', () => {
+		component Child({ $level, $children }) {
+			if($level == 1) {
+				<h1><$children /></h1>
+			}
+			if($level == 2) {
+				<h2><$children /></h2>
+			}
+			if($level == 3) {
+				<h3><$children /></h3>
+			}
+		}
+
+		component App() {
+			<Child $level={1}>{`Heading 1`} </Child>
+		}
+
+		render(App);
+		expect(container.querySelector('h1').textContent).toEqual('Heading 1');
+	});
+
 	it('render dynamic class attribute', () => {
 		component Basic() {
 			let $active = false;
 
 			<button onClick={() => $active = !$active}>{'Toggle'}</button>
 			<div $class={$active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
+
+			<style>
+				.active {
+					color: green;
+				}
+			</style>
 		}
 
 		render(Basic);
@@ -101,17 +128,17 @@ describe('basic', () => {
 		const button = container.querySelector('button');
 		const div = container.querySelector('div');
 
-		expect(div.className).toBe('inactive');
-
+		expect(Array.from(div.classList).some(className => className.startsWith('ripple-'))).toBe(true);
+		expect(div.classList.contains('inactive')).toBe(true);
+		
 		button.click();
 		flushSync();
-
-		expect(div.className).toBe('active');
+		expect(div.classList.contains('active')).toBe(true);
 
 		button.click();
 		flushSync();
 
-		expect(div.className).toBe('inactive');
+		expect(div.classList.contains('inactive')).toBe(true);
 	});
 
 	it('render dynamic id attribute', () => {

package/tests/{decorators.test.ripple → ref.test.ripple}

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, flushSync, RippleArray } from 'ripple';
 
-describe('@use element decorators', () => {
+describe('refs', () => {
 	let container;
 
 	function render(component) {
@@ -24,7 +24,7 @@ describe('@use element decorators', () => {
 		let div;
 
 		component Component() {
-			<div {@use (node) => { div = node; }}>{'Hello World'}</div>
+			<div {ref (node) => { div = node; }}>{'Hello World'}</div>
 		}
 		render(Component);
 		flushSync();
@@ -37,11 +37,11 @@ describe('@use element decorators', () => {
 		component Component() {
 			let items = RippleArray.from([1, 2, 3]);
 
-			function ref(node) {
+			function componentRef(node) {
 				_node = node;
 			}
 
-			<Child {@use ref} {items} />
+			<Child {ref componentRef} {items} />
 		}
 
 		component Child(props) {

package/types/index.d.ts

@@ -79,3 +79,5 @@ declare global {
         // Add other runtime functions as needed for TypeScript analysis
     };
 }
+
+export declare function createRefKey(): symbol;