ripple 0.2.98 → 0.2.100

package/package.json

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

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

@@ -461,14 +461,20 @@ function RipplePlugin(config) {
 
 					if (this.isContextual('index')) {
 						this.next(); // consume 'index'
-
-						if (this.type === tt.name) {
-							node.index = this.parseIdent();
-						} else {
+						node.index = this.parseExpression();
+						if (node.index.type !== 'Identifier') {
 							this.raise(this.start, 'Expected identifier after "index" keyword');
 						}
-					} else {
-						this.raise(this.start, 'Expected "index" keyword after semicolon in for-of loop');
+						this.eat(tt.semi);
+					}
+
+					if (this.isContextual('key')) {
+						this.next(); // consume 'key'
+						node.key = this.parseExpression();
+					}
+
+					if (this.isContextual('index')) {
+						this.raise(this.start, '"index" must come before "key" in for-of loop');
 					}
 				} else if (!isForIn) {
 					// Set index to null for standard for-of loops
@@ -858,7 +864,7 @@ function RipplePlugin(config) {
 				const element = this.startNode();
 				element.start = position.index;
 				element.loc.start = position;
-        element.metadata = {};
+				element.metadata = {};
 				element.type = 'Element';
 				this.#path.push(element);
 				element.children = [];

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

@@ -466,6 +466,14 @@ const visitors = {
 					if (attr.name.type === 'Identifier') {
 						attribute_names.add(attr.name);
 
+						if (attr.name.name === 'key') {
+							error(
+								'The `key` attribute is not a thing in Ripple, and cannot be used on DOM elements. If you are using a for loop, then use the `for (let item of items; key item.id)` syntax.',
+								state.analysis.module.filename,
+								attr,
+							);
+						}
+
 						if (is_event_attribute(attr.name.name)) {
 							const event_name = attr.name.name.slice(2).toLowerCase();
 							const handler = visit(attr.value, state);

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

@@ -11,6 +11,7 @@ import {
 	TEMPLATE_FRAGMENT,
 	TEMPLATE_SVG_NAMESPACE,
 	TEMPLATE_MATHML_NAMESPACE,
+	IS_KEYED,
 } from '../../../../constants.js';
 import { sanitize_template_string } from '../../../../utils/sanitize_template_string.js';
 import {
@@ -1020,11 +1021,15 @@ const visitors = {
 		}
 		const is_controlled = node.is_controlled;
 		const index = node.index;
+		const key = node.key;
 		let flags = is_controlled ? IS_CONTROLLED : 0;
 
-		if (index !== null) {
+		if (index != null) {
 			flags |= IS_INDEXED;
 		}
+		if (key != null) {
+			flags |= IS_KEYED;
+		}
 
 		// do only if not controller
 		if (!is_controlled) {
@@ -1034,6 +1039,7 @@ const visitors = {
 		const id = context.state.flush_node(is_controlled);
 		const pattern = node.left.declarations[0].id;
 		const body_scope = context.state.scopes.get(node.body);
+		const is_keyed = key && (flags & IS_KEYED) !== 0;
 
 		context.state.init.push(
 			b.stmt(
@@ -1051,6 +1057,7 @@ const visitors = {
 						),
 					),
 					b.literal(flags),
+					is_keyed ? b.arrow(index ? [pattern, index] : [pattern], context.visit(key)) : undefined,
 				),
 			),
 		);

package/src/constants.js

@@ -2,6 +2,7 @@ export const TEMPLATE_FRAGMENT = 1;
 export const TEMPLATE_USE_IMPORT_NODE = 1 << 1;
 export const IS_CONTROLLED = 1 << 2;
 export const IS_INDEXED = 1 << 3;
-export const TEMPLATE_SVG_NAMESPACE = 1 << 3;
-export const TEMPLATE_MATHML_NAMESPACE = 1 << 4;
+export const IS_KEYED = 1 << 4;
+export const TEMPLATE_SVG_NAMESPACE = 1 << 5;
+export const TEMPLATE_MATHML_NAMESPACE = 1 << 6;
 

package/src/runtime/index-client.js

@@ -60,8 +60,6 @@ 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';
 
 export { Portal } from './internal/client/portal.js';

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

@@ -1,6 +1,6 @@
-/** @import { Block } from '#client' */
+/** @import { Block, Tracked } from '#client' */
 
-import { IS_CONTROLLED, IS_INDEXED } from '../../../constants.js';
+import { IS_CONTROLLED, IS_INDEXED, IS_KEYED } from '../../../constants.js';
 import { branch, destroy_block, destroy_block_children, render } from './blocks.js';
 import { FOR_BLOCK, TRACKED_ARRAY } from './constants.js';
 import { create_text, next_sibling } from './operations.js';
@@ -69,14 +69,15 @@ function move(block, anchor) {
 /**
  * @template V
  * @param {V[] | Iterable<V>} collection
+ * @param {boolean} clone
  * @returns {V[]}
  */
-function collection_to_array(collection) {
+function collection_to_array(collection, clone) {
 	var array = is_array(collection) ? collection : collection == null ? [] : array_from(collection);
 
 	// If we are working with a tracked array, then we need to get a copy of
 	// the elements, as the array itself is proxied, and not useful in diffing
-	if (TRACKED_ARRAY in array) {
+	if (clone || TRACKED_ARRAY in array) {
 		array = array_from(array);
 	}
 
@@ -85,15 +86,18 @@ function collection_to_array(collection) {
 
 /**
  * @template V
+ * @template K
  * @param {Element} node
  * @param {() => V[] | Iterable<V>} get_collection
  * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
  * @param {number} flags
+ * @param {(item: V) => K} [get_key]
  * @returns {void}
  */
-export function for_block(node, get_collection, render_fn, flags) {
+export function for_block(node, get_collection, render_fn, flags, get_key) {
 	var is_controlled = (flags & IS_CONTROLLED) !== 0;
 	var is_indexed = (flags & IS_INDEXED) !== 0;
+	var is_keyed = (flags & IS_KEYED) !== 0;
 	var anchor = /** @type {Element | Text} */ (node);
 
 	if (is_controlled) {
@@ -103,7 +107,10 @@ export function for_block(node, get_collection, render_fn, flags) {
 	render(() => {
 		var block = /** @type {Block} */ (active_block);
 		var collection = get_collection();
-		var array = collection_to_array(collection);
+		var array = collection_to_array(collection, is_keyed);
+		if (is_keyed) {
+			array = keyed(block, array, /** @type {(item: V) => K} */ (get_key));
+		}
 
 		untrack(() => {
 			reconcile(anchor, block, array, render_fn, is_controlled, is_indexed);
@@ -321,9 +328,9 @@ function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
 					if (j !== undefined) {
 						if (fast_path_removal) {
 							fast_path_removal = false;
-							// while (i > a_start) {
-							//     destroy_block(a[a_start++]);
-							// }
+							while (i > a_start) {
+								destroy_block(a[a_start++]);
+							}
 						}
 						sources[j - b_start] = i + 1;
 						if (pos > j) {
@@ -396,7 +403,7 @@ function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
 let result;
 /** @type {Int32Array} */
 let p;
-let maxLen = 0;
+let max_len = 0;
 // https://en.wikipedia.org/wiki/Longest_increasing_subsequence
 /**
  * @param {Int32Array} arr
@@ -412,8 +419,8 @@ function lis_algorithm(arr) {
 	let c = 0;
 	var len = arr.length;
 
-	if (len > maxLen) {
-		maxLen = len;
+	if (len > max_len) {
+		max_len = len;
 		result = new Int32Array(len);
 		p = new Int32Array(len);
 	}
@@ -466,17 +473,12 @@ function lis_algorithm(arr) {
 /**
  * @template V
  * @template K
- * @param {V[] | Iterable<V>} collection
+ * @param {Block} block
+ * @param {V[]} b_array
  * @param {(item: V) => K} key_fn
  * @returns {V[]}
  */
-export function keyed(collection, key_fn) {
-	var block = active_block;
-	if (block === null || (block.f & FOR_BLOCK) === 0) {
-		throw new Error('keyed() must be used inside a for block');
-	}
-
-	var b_array = collection_to_array(collection);
+function keyed(block, b_array, key_fn) {
 	var b_keys = b_array.map(key_fn);
 
 	// We only need to do this in DEV
@@ -488,6 +490,7 @@ export function keyed(collection, key_fn) {
 	var state = block.s;
 
 	if (state === null) {
+		// Make a clone of it so we don't mutate the original thereafter
 		return b_array;
 	}
 
@@ -495,7 +498,7 @@ export function keyed(collection, key_fn) {
 	var a_keys = a_array.map(key_fn);
 	var a = new Map();
 
-	for (let i = 0; i < a_keys.length; i++) {
+	for (var i = 0; i < a_keys.length; i++) {
 		a.set(a_keys[i], i);
 	}
 
@@ -503,8 +506,12 @@ export function keyed(collection, key_fn) {
 		throw new Error('Duplicate keys are not allowed');
 	}
 
-	for (let i = 0; i < b_keys.length; i++) {
+	for (var i = 0; i < b_keys.length; i++) {
 		var b_val = b_keys[i];
+		// if the index is the key, skip
+		if (b_val === i) {
+			continue;
+		}
 		var index = a.get(b_val);
 
 		if (index !== undefined) {

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

@@ -1,49 +1,98 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`for statements > correctly handle the index in a for...of loop 1`] = `
+exports[`for statements > correctly handles intermediate statements in for block 1`] = `
 <div>
   <div>
     <div>
-      0 : a
+      <div>
+        1
+      </div>
+      <div>
+        1
+      </div>
     </div>
     <div>
-      1 : b
+      <div>
+        2
+      </div>
+      <div>
+        2
+      </div>
     </div>
     <div>
-      2 : c
+      <div>
+        3
+      </div>
+      <div>
+        3
+      </div>
     </div>
     
   </div>
   <button>
     Add Item
   </button>
-  <button>
-    Reverse
-  </button>
   
 </div>
 `;
 
-exports[`for statements > correctly handle the index in a for...of loop 2`] = `
+exports[`for statements > correctly handles intermediate statements in for block 2`] = `
 <div>
   <div>
     <div>
-      0 : a
+      <div>
+        1
+      </div>
+      <div>
+        1
+      </div>
     </div>
     <div>
-      1 : b
+      <div>
+        2
+      </div>
+      <div>
+        2
+      </div>
     </div>
     <div>
-      2 : c
+      <div>
+        3
+      </div>
+      <div>
+        3
+      </div>
     </div>
     <div>
-      3 : d
+      <div>
+        4
+      </div>
+      <div>
+        4
+      </div>
     </div>
     
   </div>
   <button>
     Add Item
   </button>
+  
+</div>
+`;
+
+exports[`for statements > correctly handles keyed for...of loops 1`] = `
+<div>
+  <!---->
+  <div>
+    0:Item 1
+  </div>
+  <div>
+    1:Item 2
+  </div>
+  <div>
+    2:Item 3
+  </div>
+  <!---->
   <button>
     Reverse
   </button>
@@ -51,20 +100,37 @@ exports[`for statements > correctly handle the index in a for...of loop 2`] = `
 </div>
 `;
 
-exports[`for statements > correctly handle the index in a for...of loop 3`] = `
+exports[`for statements > correctly handles keyed for...of loops 2`] = `
+<div>
+  <!---->
+  <div>
+    0:Item 3
+  </div>
+  <div>
+    1:Item 2
+  </div>
+  <div>
+    2:Item 1
+  </div>
+  <!---->
+  <button>
+    Reverse
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > correctly handles the index in a for...of loop 1`] = `
 <div>
   <div>
     <div>
-      0 : d
-    </div>
-    <div>
-      1 : c
+      0 : a
     </div>
     <div>
-      2 : b
+      1 : b
     </div>
     <div>
-      3 : a
+      2 : c
     </div>
     
   </div>
@@ -78,82 +144,56 @@ exports[`for statements > correctly handle the index in a for...of loop 3`] = `
 </div>
 `;
 
-exports[`for statements > correctly handles intermediate statements in for block 1`] = `
+exports[`for statements > correctly handles the index in a for...of loop 2`] = `
 <div>
   <div>
     <div>
-      <div>
-        1
-      </div>
-      <div>
-        1
-      </div>
+      0 : a
     </div>
     <div>
-      <div>
-        2
-      </div>
-      <div>
-        2
-      </div>
+      1 : b
     </div>
     <div>
-      <div>
-        3
-      </div>
-      <div>
-        3
-      </div>
+      2 : c
+    </div>
+    <div>
+      3 : d
     </div>
     
   </div>
   <button>
     Add Item
   </button>
+  <button>
+    Reverse
+  </button>
   
 </div>
 `;
 
-exports[`for statements > correctly handles intermediate statements in for block 2`] = `
+exports[`for statements > correctly handles the index in a for...of loop 3`] = `
 <div>
   <div>
     <div>
-      <div>
-        1
-      </div>
-      <div>
-        1
-      </div>
+      0 : d
     </div>
     <div>
-      <div>
-        2
-      </div>
-      <div>
-        2
-      </div>
+      1 : c
     </div>
     <div>
-      <div>
-        3
-      </div>
-      <div>
-        3
-      </div>
+      2 : b
     </div>
     <div>
-      <div>
-        4
-      </div>
-      <div>
-        4
-      </div>
+      3 : a
     </div>
     
   </div>
   <button>
     Add Item
   </button>
+  <button>
+    Reverse
+  </button>
   
 </div>
 `;

package/tests/client/composite.test.ripple

@@ -341,50 +341,6 @@ describe('composite components', () => {
 		component App() {
 			// Ambiguous generics vs JSX / less-than parsing scenarios
 
-			// 1. Simple "new" with generic (should NOT become an <Element>)
-			const a = new TrackedArray<number>();
-
-			// 2. Multi-line generic with newline after '<'
-			const b = new TrackedArray<
-				string
-			>();
-
-			// // 3. Member expression + generic
-			// class List<T> {
-			// 	items: T[];
-			// 	constructor() {
-			// 		this.items = [];
-			// 	}
-			// }
-			// class Containers {
-			// 	List<T>() {
-			// 		return new List<T>();
-			// 	}
-			// }
-
-			// const c = new Containers.List<string>();
-
-			// 4. Chained call with generic method
-			const someSource = new Array<number>(1, 2, 3);
-			const d = someSource.map<number>((x) => x * 2).filter<boolean>((x) => !!x);
-
-			// 5. Nested generics
-			const e = new Map<string, Promise<number>>();
-
-			// // 6. Generic after a call expression result
-			// function getBuilder<T>() {
-			// 	return {
-			// 		build<U>() {
-			// 			return {
-			// 				build<V>() {
-			// 					return 42;
-			// 				}
-			// 			};
-			// 		}
-			// 	};
-			// }
-			// const f = getBuilder()<ResultType>().build<number>();
-
 			// // 7. Generic following optional chaining
 			// const maybe = {};
 			// const g = maybe?.factory<number>()?.make<boolean>();
@@ -408,7 +364,7 @@ describe('composite components', () => {
 
 			// 10. JSX / Element should still work
 			<div class="still-works">
-				<span>{a.length}</span>
+				<span>{'Test'}</span>
 			</div>
 
 			// // 11. Generic function call vs Element: Identifier followed by generic args

package/tests/client/for.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, TrackedArray } from 'ripple';
+import { mount, flushSync, TrackedArray, track } from 'ripple';
 
 describe('for statements', () => {
 	let container;
@@ -85,7 +85,7 @@ describe('for statements', () => {
 		expect(container).toMatchSnapshot();
 	});
 
-	it('correctly handle the index in a for...of loop', () => {
+	it('correctly handles the index in a for...of loop', () => {
 		component App() {
 			const items = new TrackedArray('a', 'b', 'c');
 
@@ -115,4 +115,33 @@ describe('for statements', () => {
 
 		expect(container).toMatchSnapshot();
 	});
+
+	it('correctly handles keyed for...of loops', () => {
+		component App() {
+			let items = track([
+				{ id: 1, text: 'Item 1' },
+				{ id: 2, text: 'Item 2' },
+				{ id: 3, text: 'Item 3' },
+			]);
+
+			for (let item of @items; index i; key item.id) {
+				<div>{i + ':' + item.text}</div>
+			}
+
+			<button onClick={() => {
+				@items = @items.toReversed();
+			}}>{'Reverse'}</button>
+		}
+
+		render(App);
+
+		expect(container).toMatchSnapshot();
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container).toMatchSnapshot();
+	});
 });

package/tests/client/typescript-generics.test.ripple

@@ -0,0 +1,102 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount } from 'ripple';
+
+describe('generic patterns', () => {
+	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('tests simple generic function', () => {
+		component App() {
+			const e = new Map<string, Promise<number>>();
+			const a = new Array<number>();
+
+			const b = new Array<
+				string
+			>();
+
+			<div class="still-works">
+				<span>{'Test'}</span>
+			</div>
+
+			const someSource = new Array<number>(1, 2, 3);
+			const d = someSource.map<number>((x) => x * 2).filter<boolean>((x) => !!x);
+		}
+
+		render(App);
+	});
+
+	it('tests member expression)', () => {
+		component App() {
+			class List<T> {
+				items: T[];
+				constructor() {
+					this.items = [];
+				}
+			}
+
+			<div class="still-works">
+				<span>{'Test'}</span>
+			</div>
+
+			class Containers {
+				static List<T>() {
+					return new List<T>();
+				}
+			}
+
+			const c = Containers.List<string>();
+		}
+
+		render(App);
+	});
+
+	/**
+	 * Complex generics tests
+	 * These currently break the parser
+	 * We can't just use skip and then the tests are still parsed and compiled
+	 */
+	/*
+		describe('complex generics', () => {
+			it('tests after a call expression result', () => {
+				component App() {
+					function getBuilder() {
+						return <T>() => ({
+							build<U>(): { build<V>(): V; data: T; key: U } {
+								return {
+									build<V>(): V {
+										return 42 as V;
+									},
+									data: undefined as T,
+									key: undefined as U
+								};
+							}
+						});
+					}
+
+					<div class="still-works">
+						<span>{'Test'}</span>
+					</div>
+
+					type ResultType = string;
+
+					const f = getBuilder()<ResultType>().build<number>();
+				}
+			});
+		});
+ 	*/
+});