ripple 0.2.33 → 0.2.35

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.33",
+  "version": "0.2.35",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -8,6 +8,7 @@ import {
 	is_ripple_import,
 	is_tracked_computed_property,
 	is_tracked_name,
+	is_void_element,
 } from '../../utils.js';
 import { extract_paths } from '../../../utils/ast.js';
 import is_reference from 'is-reference';
@@ -432,6 +433,8 @@ const visitors = {
 		const attribute_names = new Set();
 
 		if (is_dom_element) {
+			const is_void = is_void_element(node.id.name);
+
 			if (state.elements) {
 				state.elements.push(node);
 			}
@@ -468,6 +471,14 @@ const visitors = {
 					);
 				}
 			}
+
+			if (is_void && node.children.length > 0) {
+				error(
+					`The <${node.id.name}> element is a void element and cannot have children`,
+					state.analysis.module.filename,
+					node,
+				);
+			}
 		} else {
 			for (const attr of node.attributes) {
 				if (attr.type === 'Attribute') {

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

@@ -21,6 +21,7 @@ import {
 	is_inside_call_expression,
 	is_tracked_computed_property,
 	is_value_static,
+	is_void_element,
 } from '../../utils.js';
 import is_reference from 'is-reference';
 import { extract_paths, object } from '../../../utils/ast.js';
@@ -148,6 +149,45 @@ const visitors = {
 			return context.next();
 		}
 
+		// Handle array methods that access the array
+		if (
+			callee.type === 'MemberExpression' &&
+			!callee.optional &&
+			callee.property.type === 'Identifier'
+		) {
+			const name = callee.property.name;
+			if (
+				// TODO support the missing array methods
+				name === 'reduce' ||
+				name === 'map' ||
+				name === 'forEach' ||
+				name === 'join' ||
+				name === 'includes' ||
+				name === 'indexOf' ||
+				name === 'lastIndexOf' ||
+				name === 'filter' ||
+				name === 'every' ||
+				name === 'some' ||
+				name === 'toSpliced' ||
+				name === 'toSorted' ||
+				name === 'toString' ||
+				name === 'values' ||
+				name === 'entries'
+			) {
+				return b.call(
+					'$.with_scope',
+					b.id('__block'),
+					b.thunk(
+						b.call(
+							'$.array_' + name,
+							context.visit(callee.object),
+							...node.arguments.map((arg) => context.visit(arg)),
+						),
+					),
+				);
+			}
+		}
+
 		return b.call(
 			'$.with_scope',
 			b.id('__block'),
@@ -399,6 +439,7 @@ const visitors = {
 		if (is_dom_element) {
 			let class_attribute = null;
 			const local_updates = [];
+			const is_void = is_void_element(node.id.name);
 
 			state.template.push(`<${node.id.name}`);
 
@@ -590,7 +631,14 @@ const visitors = {
 			const init = [];
 			const update = [];
 
-			transform_children(node.children, { visit, state: { ...state, init, update }, root: false });
+			if (!is_void) {
+				transform_children(node.children, {
+					visit,
+					state: { ...state, init, update },
+					root: false,
+				});
+				state.template.push(`</${node.id.name}>`);
+			}
 
 			update.push(...local_updates);
 
@@ -601,8 +649,6 @@ const visitors = {
 			if (update.length > 0) {
 				state.init.push(b.stmt(b.call('$.render', b.thunk(b.block(update)))));
 			}
-
-			state.template.push(`</${node.id.name}>`);
 		} else {
 			const id = state.flush_node();
 
@@ -975,43 +1021,37 @@ const visitors = {
 	},
 
 	ArrayExpression(node, context) {
-		// const elements = [];
-		// const tracked = [];
-		// let i = 0;
-
-		// for (const element of node.elements) {
-		// 	if (element === null) {
-		// 		elements.push(null);
-		// 	} else if (element.type === 'Element') {
-		// 		const metadata = { tracking: false, await: false };
-		// 		const tracked_element = context.visit(element, { ...context.state, metadata });
-
-		// 		if (metadata.tracking) {
-		// 			tracked.push(b.literal(i));
-		// 			elements.push(tracked_element);
-		// 		} else {
-		// 			elements.push(tracked_element);
-		// 		}
-		// 	} else if (element.type === 'SpreadElement') {
-		// 		const metadata = { tracking: false, await: false };
-		// 		const tracked_element = context.visit(element, { ...context.state, metadata });
-
-		// 		if (metadata.tracking) {
-		// 			tracked.push(b.spread(tracked_element.argument));
-		// 			elements.push(tracked_element);
-		// 		} else {
-		// 			elements.push(tracked_element);
-		// 		}
-		// 	} else {
-		// 		const metadata = { tracking: false, await: false };
-		// 		elements.push(context.visit(element, { ...context.state, metadata }));
-		// 	}
-		// 	i++;
-		// }
-
-		// if (tracked.length > 0) {
-		// 	return b.call('$.tracked_object', { ...node, elements }, b.array(tracked), b.id('__block'));
-		// }
+		// TODO we can bail out of all of this if we know we're inside a computed fn expression
+		// as the reactivity will hold from the reference of the $ binding itself
+		const elements = [];
+		const tracked = [];
+		let i = 0;
+
+		for (const element of node.elements) {
+			if (element === null) {
+				elements.push(null);
+			} else if (element.type === 'Identifier' && is_tracked_name(element.name)) {
+				const metadata = { tracking: false, await: false };
+				const tracked_identifier = context.visit(element, { ...context.state, metadata });
+
+				if (metadata.tracking) {
+					tracked.push(b.literal(i));
+					elements.push(
+						b.call('$.computed_property', b.thunk(tracked_identifier), b.id('__block')),
+					);
+				} else {
+					elements.push(tracked_identifier);
+				}
+			} else {
+				const metadata = { tracking: false, await: false };
+				elements.push(context.visit(element, { ...context.state, metadata }));
+			}
+			i++;
+		}
+
+		if (tracked.length > 0) {
+			return b.call('$.tracked_object', { ...node, elements }, b.array(tracked), b.id('__block'));
+		}
 
 		context.next();
 	},

package/src/compiler/utils.js

@@ -3,6 +3,33 @@ import * as b from '../utils/builders.js';
 
 const regex_return_characters = /\r/g;
 
+const VOID_ELEMENT_NAMES = [
+	'area',
+	'base',
+	'br',
+	'col',
+	'command',
+	'embed',
+	'hr',
+	'img',
+	'input',
+	'keygen',
+	'link',
+	'meta',
+	'param',
+	'source',
+	'track',
+	'wbr'
+];
+
+/**
+ * Returns `true` if `name` is of a void element
+ * @param {string} name
+ */
+export function is_void_element(name) {
+	return VOID_ELEMENT_NAMES.includes(name) || name.toLowerCase() === '!doctype';
+}
+
 const RESERVED_WORDS = [
 	'arguments',
 	'await',

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

@@ -0,0 +1,352 @@
+import { TRACKED_OBJECT } from './constants';
+import { get_property } from './runtime';
+
+const array_proto = Array.prototype;
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @param {(previousValue: T, currentValue: T, currentIndex: number, array: Array<T>) => T} callback
+ * @param {T} initial_value
+ * @returns {T}
+ */
+export function array_reduce(array, callback, initial_value) {
+	// @ts-expect-error
+	var tracked_properties = array[TRACKED_OBJECT];
+
+	if (tracked_properties === undefined || array.reduce !== array_proto.reduce) {
+		return array.reduce(callback, initial_value);
+	}
+
+	let accumulator = initial_value;
+
+	for (let i = 0; i < array.length; i++) {
+		accumulator = callback(accumulator, get_property(array, i), i, array);
+	}
+
+	return accumulator;
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @param {string} [separator]
+ * @returns {string}
+ */
+export function array_join(array, separator) {
+	// @ts-expect-error
+	var tracked_properties = array[TRACKED_OBJECT];
+	if (tracked_properties === undefined || array.join !== array_proto.join) {
+		return array.join(separator);
+	}
+
+	let result = '';
+	for (let i = 0; i < array.length; i++) {
+		if (i > 0 && separator !== undefined) {
+			result += separator;
+		}
+		result += String(get_property(array, i));
+	}
+
+	return result;
+}
+
+/**
+ * @template T
+ * @template U
+ * @param {Array<T>} array
+ * @param {(value: T, index: number, array: Array<T>) => U} callback
+ * @returns {Array<U>}
+ */
+export function array_map(array, callback) {
+	// @ts-expect-error
+	var tracked_properties = array[TRACKED_OBJECT];
+	if (tracked_properties === undefined || array.map !== array_proto.map) {
+		return array.map(callback);
+	}
+
+	const result = [];
+	for (let i = 0; i < array.length; i++) {
+		if (i in array) {
+			result[i] = callback(get_property(array, i), i, array);
+		}
+	}
+
+	return result;
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @param {(value: T, index: number, array: Array<T>) => boolean} callback
+ * @returns {Array<T>}
+ */
+export function array_filter(array, callback) {
+	// @ts-expect-error
+	var tracked_properties = array[TRACKED_OBJECT];
+	if (tracked_properties === undefined || array.filter !== array_proto.filter) {
+		return array.filter(callback);
+	}
+
+	const result = [];
+	for (let i = 0; i < array.length; i++) {
+		if (i in array) {
+			const value = get_property(array, i);
+			if (callback(value, i, array)) {
+				result.push(value);
+			}
+		}
+	}
+
+	return result;
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @param {(value: T, index: number, array: Array<T>) => boolean} callback
+ * @returns {void}
+ */
+export function array_forEach(array, callback) {
+	// @ts-expect-error
+	var tracked_properties = array[TRACKED_OBJECT];
+	if (tracked_properties === undefined || array.forEach !== array_proto.forEach) {
+		return array.forEach(callback);
+	}
+
+	for (let i = 0; i < array.length; i++) {
+		if (i in array) {
+			callback(get_property(array, i), i, array);
+		}
+	}
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @param {T} value
+ * @returns {boolean}
+ */
+export function array_includes(array, value) {
+	// @ts-expect-error
+	var tracked_properties = array[TRACKED_OBJECT];
+	if (tracked_properties === undefined || array.includes !== array_proto.includes) {
+		return array.includes(value);
+	}
+
+	for (let i = 0; i < array.length; i++) {
+		if (i in array && get_property(array, i) === value) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @param {T} value
+ * @returns {number}
+ */
+export function array_indexOf(array, value) {
+	// @ts-expect-error
+	var tracked_properties = array[TRACKED_OBJECT];
+	if (tracked_properties === undefined || array.indexOf !== array_proto.indexOf) {
+		return array.indexOf(value);
+	}
+
+	for (let i = 0; i < array.length; i++) {
+		if (i in array && get_property(array, i) === value) {
+			return i;
+		}
+	}
+
+	return -1;
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @param {T} value
+ * @returns {number}
+ */
+export function array_lastIndexOf(array, value) {
+	// @ts-expect-error
+	var tracked_properties = array[TRACKED_OBJECT];
+	if (tracked_properties === undefined || array.lastIndexOf !== array_proto.lastIndexOf) {
+		return array.lastIndexOf(value);
+	}
+
+	for (let i = array.length - 1; i >= 0; i--) {
+		if (i in array && get_property(array, i) === value) {
+			return i;
+		}
+	}
+
+	return -1;
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @param {(value: T, index: number, array: Array<T>) => boolean} callback
+ * @returns {boolean}
+ */
+export function array_every(array, callback) {
+  // @ts-expect-error
+  var tracked_properties = array[TRACKED_OBJECT];
+  if (tracked_properties === undefined || array.every !== array_proto.every) {
+    return array.every(callback);
+  }
+
+  for (let i = 0; i < array.length; i++) {
+    if (i in array && !callback(get_property(array, i), i, array)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @param {(value: T, index: number, array: Array<T>) => boolean} callback
+ * @returns {boolean}
+ */
+export function array_some(array, callback) {
+  // @ts-expect-error
+  var tracked_properties = array[TRACKED_OBJECT];
+  if (tracked_properties === undefined || array.some !== array_proto.some) {
+    return array.some(callback);
+  }
+
+  for (let i = 0; i < array.length; i++) {
+    if (i in array && callback(get_property(array, i), i, array)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @returns {string}
+ */
+export function array_toString(array) {
+  // @ts-expect-error
+  var tracked_properties = array[TRACKED_OBJECT];
+  if (tracked_properties === undefined || array.toString !== array_proto.toString) {
+    return array.toString();
+  }
+
+  let result = '';
+  for (let i = 0; i < array.length; i++) {
+    if (i > 0) {
+      result += ',';
+    }
+    if (i in array) {
+      result += String(get_property(array, i));
+    }
+  }
+
+  return result;
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @param {((a: T, b: T) => number) | undefined} compare_fn
+ * @returns {Array<T>}
+ */
+export function array_toSorted(array, compare_fn) {
+  // @ts-expect-error
+  var tracked_properties = array[TRACKED_OBJECT];
+  if (tracked_properties === undefined || array.toSorted !== array_proto.toSorted) {
+    return array.toSorted(compare_fn);
+  }
+
+  const result = [];
+  for (let i = 0; i < array.length; i++) {
+    if (i in array) {
+      result.push(get_property(array, i));
+    }
+  }
+
+  return result.sort(compare_fn);
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @param {number} start
+ * @param {number} delete_count
+ * @param {...T} items
+ * @returns {Array<T>}
+ */
+export function array_toSpliced(array, start, delete_count, ...items) {
+  // @ts-expect-error
+  var tracked_properties = array[TRACKED_OBJECT];
+  if (tracked_properties === undefined || array.toSpliced !== array_proto.toSpliced) {
+    return array.toSpliced(start, delete_count, ...items);
+  }
+
+  const result = [];
+  for (let i = 0; i < array.length; i++) {
+    if (i in array) {
+      result.push(get_property(array, i));
+    }
+  }
+
+  result.splice(start, delete_count, ...items);
+
+  return result;
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @returns {IterableIterator<T>}
+ */
+export function array_values(array) {
+  // @ts-expect-error
+  var tracked_properties = array[TRACKED_OBJECT];
+  if (tracked_properties === undefined || array.values !== array_proto.values) {
+    return array.values();
+  }
+
+  const result = [];
+  for (let i = 0; i < array.length; i++) {
+    if (i in array) {
+      result.push(get_property(array, i));
+    }
+  }
+
+  return result[Symbol.iterator]();
+}
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @returns {IterableIterator<[number, T]>}
+ */
+export function array_entries(array) {
+	// @ts-expect-error
+	var tracked_properties = array[TRACKED_OBJECT];
+	if (tracked_properties === undefined || array.entries !== array_proto.entries) {
+		return array.entries();
+	}
+
+	/** @type {Array<[number, T]>} */
+	const result = [];
+	for (let i = 0; i < array.length; i++) {
+		if (i in array) {
+			result.push([i, get_property(array, i)]);
+		}
+	}
+
+	return result[Symbol.iterator]();
+}

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

@@ -46,6 +46,24 @@ export {
 	exclude_from_object,
 } from './runtime.js';
 
+export {
+	array_reduce,
+	array_join,
+	array_map,
+	array_filter,
+	array_forEach,
+	array_includes,
+	array_indexOf,
+	array_lastIndexOf,
+	array_every,
+	array_some,
+	array_toString,
+	array_toSorted,
+	array_toSpliced,
+	array_values,
+	array_entries,
+} from './array.js';
+
 export { for_block as for } from './for.js';
 
 export { if_block as if } from './if.js';

package/tests/basic.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync } from 'ripple';
+import { mount, flushSync, effect } from 'ripple';
 
 describe('basic', () => {
 	let container;
@@ -832,4 +832,70 @@ describe('basic', () => {
 		expect(paragraphs[0].className).toBe('parent-class');
 		expect(paragraphs[1].className).toBe('nested-class');
 	});
+
+	it('basic reactivity with standard arrays should work', () => {
+		let logs = [];
+
+		component App() {
+			let $first = 0;
+			let $second = 0;
+			const arr = [$first, $second];
+
+			const $total = arr.reduce((a, b) => a + b, 0);
+
+			<button onClick={() => { $first++; }}>{'first:' + $first}</button>
+			<button onClick={() => { $second++; }}>{'second: ' + $second}</button>
+
+			effect(() => {
+				let _arr = [];
+
+				arr.forEach((item) => {
+					_arr.push(item);
+				});
+
+				logs.push(_arr.join(', '));
+			});
+
+			effect(() => {
+				if (arr.includes(1)) {
+					logs.push('arr includes 1');
+				}
+			});
+
+			<div>{'Sum: ' + $total}</div>
+			<div>{'Comma Separated: ' + arr.join(', ')}</div>
+			<div>{'Number to string: ' + arr.map(a => String(a))}</div>
+			<div>{'Even numbers: ' + arr.filter(a => a % 2 === 0)}</div>
+		}
+
+		render(App);
+		flushSync();
+
+		const buttons = container.querySelectorAll('button');
+		const divs = container.querySelectorAll('div');
+
+		expect(divs[0].textContent).toBe('Sum: 0');
+		expect(divs[1].textContent).toBe('Comma Separated: 0, 0');
+		expect(divs[2].textContent).toBe('Number to string: 0,0');
+		expect(divs[3].textContent).toBe('Even numbers: 0,0');
+		expect(logs).toEqual(['0, 0']);
+
+		buttons[0].click();
+		flushSync();
+
+		expect(divs[0].textContent).toBe('Sum: 1');
+		expect(divs[1].textContent).toBe('Comma Separated: 1, 0');
+		expect(divs[2].textContent).toBe('Number to string: 1,0');
+		expect(divs[3].textContent).toBe('Even numbers: 0');
+		expect(logs).toEqual(['0, 0', '1, 0', 'arr includes 1']);
+
+		buttons[1].click();
+		flushSync();
+
+		expect(divs[0].textContent).toBe('Sum: 2');
+		expect(divs[1].textContent).toBe('Comma Separated: 1, 1');
+		expect(divs[2].textContent).toBe('Number to string: 1,1');
+		expect(divs[3].textContent).toBe('Even numbers: ');
+		expect(logs).toEqual(['0, 0', '1, 0', 'arr includes 1', '1, 1']);
+	})
 });