ripple 0.2.99 → 0.2.101

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.99",
+  "version": "0.2.101",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -34,8 +34,8 @@
       "default": "./src/server/index.js"
     },
     "./compiler": {
-      "types": "./types/index.d.ts",
-      "require": "./compiler/index.js",
+      "types": "./src/compiler/index.d.ts",
+      "require": "./src/compiler/index.js",
       "default": "./src/compiler/index.js"
     },
     "./validator": {

package/src/compiler/index.d.ts

@@ -0,0 +1,66 @@
+import type { Program } from 'estree';
+
+// ============================================================================
+// Compiler API Exports
+// ============================================================================
+/**
+ * Result of compilation operation
+ */
+export interface CompileResult {
+	/** The transformed AST */
+	ast: Program;
+	/** The generated JavaScript code with source map */
+	js: {
+		code: string;
+		map: any;
+	};
+	/** The generated CSS */
+	css: string;
+}
+
+/**
+ * Result of Volar mappings compilation
+ */
+export interface VolarMappingsResult {
+	/** Array of code mappings for Volar integration */
+	[key: string]: any;
+}
+
+/**
+ * Compilation options
+ */
+export interface CompileOptions {
+	/** Compilation mode: 'client' or 'server' */
+	mode?: 'client' | 'server';
+}
+
+/**
+ * Parse Ripple source code to ESTree AST
+ * @param source - The Ripple source code to parse
+ * @returns The parsed ESTree Program AST
+ */
+export function parse(source: string): Program;
+
+/**
+ * Compile Ripple source code to JS/CSS output
+ * @param source - The Ripple source code to compile
+ * @param filename - The filename for source map generation
+ * @param options - Compilation options (mode: 'client' or 'server')
+ * @returns The compilation result with AST, JS, and CSS
+ */
+export function compile(
+	source: string,
+	filename: string,
+	options?: CompileOptions,
+): CompileResult;
+
+/**
+ * Compile Ripple source to Volar mappings for editor integration
+ * @param source - The Ripple source code
+ * @param filename - The filename for source map generation
+ * @returns Volar mappings object for editor integration
+ */
+export function compile_to_volar_mappings(
+	source: string,
+	filename: string,
+): VolarMappingsResult;

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

@@ -11,7 +11,6 @@ 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 {
@@ -1027,9 +1026,6 @@ const visitors = {
 		if (index != null) {
 			flags |= IS_INDEXED;
 		}
-		if (key != null) {
-			flags |= IS_KEYED;
-		}
 
 		// do only if not controller
 		if (!is_controlled) {
@@ -1039,12 +1035,11 @@ 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(
 				b.call(
-					'_$_.for',
+					key != null ? '_$_.for_keyed' : '_$_.for',
 					id,
 					b.thunk(context.visit(node.right)),
 					b.arrow(
@@ -1057,7 +1052,7 @@ const visitors = {
 						),
 					),
 					b.literal(flags),
-					is_keyed ? b.arrow(index ? [pattern, index] : [pattern], context.visit(key)) : undefined,
+					key != null ? b.arrow(index ? [pattern, index] : [pattern], context.visit(key)) : undefined,
 				),
 			),
 		);

package/src/compiler/types/index.d.ts

@@ -32,10 +32,6 @@ import type {
 	Pattern,
 } from 'estree';
 
-export interface CompileResult {
-	// TODO
-}
-
 /**
  * Parse error information
  */
@@ -298,4 +294,4 @@ export interface DelegatedEventResult {
 	hoisted: boolean;
 	/** The hoisted function */
 	function?: FunctionExpression | FunctionDeclaration | ArrowFunctionExpression;
-}
+}

package/src/constants.js

@@ -2,7 +2,6 @@ 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 IS_KEYED = 1 << 4;
 export const TEMPLATE_SVG_NAMESPACE = 1 << 5;
 export const TEMPLATE_MATHML_NAMESPACE = 1 << 6;
 

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

@@ -1,6 +1,6 @@
-/** @import { Block, Tracked } from '#client' */
+/** @import { Block } from '#client' */
 
-import { IS_CONTROLLED, IS_INDEXED, IS_KEYED } from '../../../constants.js';
+import { IS_CONTROLLED, IS_INDEXED } 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';
@@ -83,6 +83,34 @@ function collection_to_array(collection) {
 	return array;
 }
 
+/**
+ * @template V
+ * @param {Element} node
+ * @param {() => V[] | Iterable<V>} get_collection
+ * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {number} flags
+ * @returns {void}
+ */
+export function for_block(node, get_collection, render_fn, flags) {
+	var is_controlled = (flags & IS_CONTROLLED) !== 0;
+	var is_indexed = (flags & IS_INDEXED) !== 0;
+	var anchor = /** @type {Element | Text} */ (node);
+
+	if (is_controlled) {
+		anchor = node.appendChild(create_text());
+	}
+
+	render(() => {
+		var block = /** @type {Block} */ (active_block);
+		var collection = get_collection();
+		var array = collection_to_array(collection);
+
+		untrack(() => {
+			reconcile_by_ref(anchor, block, array, render_fn, is_controlled, is_indexed);
+		});
+	}, FOR_BLOCK);
+}
+
 /**
  * @template V
  * @template K
@@ -93,10 +121,9 @@ function collection_to_array(collection) {
  * @param {(item: V) => K} [get_key]
  * @returns {void}
  */
-export function for_block(node, get_collection, render_fn, flags, get_key) {
+export function for_block_keyed(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) {
@@ -107,12 +134,17 @@ export function for_block(node, get_collection, render_fn, flags, get_key) {
 		var block = /** @type {Block} */ (active_block);
 		var collection = get_collection();
 		var array = collection_to_array(collection);
-		if (is_keyed) {
-			array = keyed(block, array, /** @type {(item: V) => K} */ (get_key));
-		}
 
 		untrack(() => {
-			reconcile(anchor, block, array, render_fn, is_controlled, is_indexed);
+			reconcile_by_key(
+				anchor,
+				block,
+				array,
+				render_fn,
+				is_controlled,
+				is_indexed,
+				/** @type {(item: V) => K} */ (get_key),
+			);
 		});
 	}, FOR_BLOCK);
 }
@@ -145,15 +177,17 @@ function update_index(block, index) {
 
 /**
  * @template V
+ * @template K
  * @param {Element | Text} anchor
  * @param {Block} block
  * @param {V[]} b
  * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
  * @param {boolean} is_controlled
  * @param {boolean} is_indexed
+ * @param {(item: V) => K} get_key
  * @returns {void}
  */
-function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
+function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed, get_key) {
 	var state = block.s;
 
 	// Variables used in conditional branches - declare with initial values
@@ -180,6 +214,275 @@ function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
 		state = block.s = {
 			array: [],
 			blocks: [],
+			keys: null,
+		};
+	}
+
+	var a = state.array;
+	var a_length = a.length;
+	var b_length = b.length;
+	var j = 0;
+
+	// Fast-path for clear
+	if (is_controlled && b_length === 0) {
+		if (a_length > 0) {
+			reconcile_fast_clear(anchor, block, b);
+		}
+		return;
+	}
+	var b_blocks = Array(b_length);
+	var b_keys = b.map(get_key);
+
+	// Fast-path for create
+	if (a_length === 0) {
+		for (; j < b_length; j++) {
+			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed);
+		}
+		state.array = b;
+		state.blocks = b_blocks;
+		state.keys = b_keys;
+		return;
+	}
+
+	var a_blocks = state.blocks;
+	var a_keys = state.keys;
+	var a_val = a[j];
+	var b_val = b[j];
+	var a_key = a_keys[j];
+	var b_key = b_keys[j];
+	var a_end = a_length - 1;
+	var b_end = b_length - 1;
+	var b_block;
+
+	outer: {
+		while (a_key === b_key) {
+			a[j] = b_val;
+			b_block = b_blocks[j] = a_blocks[j];
+			if (is_indexed) {
+				update_index(b_block, j);
+			}
+			++j;
+			if (j > a_end || j > b_end) {
+				break outer;
+			}
+			a_val = a[j];
+			b_val = b[j];
+		}
+
+		a_val = a[a_end];
+		b_val = b[b_end];
+		a_key = a_keys[a_end];
+		b_key = b_keys[b_end];
+
+		while (a_key === b_key) {
+			a[a_end] = b_val;
+			b_block = b_blocks[b_end] = a_blocks[a_end];
+			if (is_indexed) {
+				update_index(b_block, b_end);
+			}
+			a_end--;
+			b_end--;
+			if (j > a_end || j > b_end) {
+				break outer;
+			}
+			a_val = a[a_end];
+			b_val = b[b_end];
+			a_key = a_keys[a_end];
+			b_key = b_keys[b_end];
+		}
+	}
+
+	var fast_path_removal = false;
+
+	if (j > a_end) {
+		if (j <= b_end) {
+			while (j <= b_end) {
+				b_val = b[j];
+				var target = j >= a_length ? anchor : a_blocks[j].s.start;
+				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed);
+				j++;
+			}
+		}
+	} else if (j > b_end) {
+		while (j <= a_end) {
+			destroy_block(a_blocks[j++]);
+		}
+	} else {
+		a_start = j;
+		b_start = j;
+		a_left = a_end - j + 1;
+		b_left = b_end - j + 1;
+		sources = new Int32Array(b_left + 1);
+		moved = false;
+		pos = 0;
+		patched = 0;
+		i = 0;
+
+		fast_path_removal = is_controlled && a_left === a_length;
+
+		// When sizes are small, just loop them through
+		if (b_length < 4 || (a_left | b_left) < 32) {
+			for (i = a_start; i <= a_end; ++i) {
+				a_val = a[i];
+				a_key = a_keys[i];
+				if (patched < b_left) {
+					for (j = b_start; j <= b_end; j++) {
+						b_val = b[j];
+						b_key = b_keys[j];
+						if (a_key === b_key) {
+							sources[j - b_start] = i + 1;
+							if (fast_path_removal) {
+								fast_path_removal = false;
+								while (a_start < i) {
+									destroy_block(a_blocks[a_start++]);
+								}
+							}
+							if (pos > j) {
+								moved = true;
+							} else {
+								pos = j;
+							}
+							b_block = b_blocks[j] = a_blocks[i];
+							if (is_indexed) {
+								update_index(b_block, j);
+							}
+							++patched;
+							break;
+						}
+					}
+					if (!fast_path_removal && j > b_end) {
+						destroy_block(a_blocks[i]);
+					}
+				} else if (!fast_path_removal) {
+					destroy_block(a_blocks[i]);
+				}
+			}
+		} else {
+			var map = new Map();
+
+			for (i = b_start; i <= b_end; ++i) {
+				map.set(b_keys[i], i);
+			}
+
+			for (i = a_start; i <= a_end; ++i) {
+				a_val = a[i];
+				a_key = a_keys[i];
+
+				if (patched < b_left) {
+					j = map.get(a_key);
+
+					if (j !== undefined) {
+						if (fast_path_removal) {
+							fast_path_removal = false;
+							while (i > a_start) {
+								destroy_block(a[a_start++]);
+							}
+						}
+						sources[j - b_start] = i + 1;
+						if (pos > j) {
+							moved = true;
+						} else {
+							pos = j;
+						}
+						block = b_blocks[j] = a_blocks[i];
+						if (is_indexed) {
+							update_index(block, j);
+						}
+						++patched;
+					} else if (!fast_path_removal) {
+						destroy_block(a_blocks[i]);
+					}
+				} else if (!fast_path_removal) {
+					destroy_block(a_blocks[i]);
+				}
+			}
+		}
+	}
+
+	if (fast_path_removal) {
+		reconcile_fast_clear(anchor, block, []);
+		reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed, get_key);
+		return;
+	} else if (moved) {
+		var next_pos = 0;
+		var seq = lis_algorithm(sources);
+		j = seq.length - 1;
+
+		for (i = b_left - 1; i >= 0; i--) {
+			if (sources[i] === 0) {
+				pos = i + b_start;
+				b_val = b[pos];
+				next_pos = pos + 1;
+
+				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed);
+			} else if (j < 0 || i !== seq[j]) {
+				pos = i + b_start;
+				b_val = b[pos];
+				next_pos = pos + 1;
+
+				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				move(b_blocks[pos], target);
+			} else {
+				j--;
+			}
+		}
+	} else if (patched !== b_left) {
+		for (i = b_left - 1; i >= 0; i--) {
+			if (sources[i] === 0) {
+				pos = i + b_start;
+				b_val = b[pos];
+				next_pos = pos + 1;
+
+				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed);
+			}
+		}
+	}
+
+	state.array = b;
+	state.blocks = b_blocks;
+	state.keys = b_keys;
+}
+
+/**
+ * @template V
+ * @param {Element | Text} anchor
+ * @param {Block} block
+ * @param {V[]} b
+ * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {boolean} is_controlled
+ * @param {boolean} is_indexed
+ * @returns {void}
+ */
+function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed) {
+	var state = block.s;
+
+	// Variables used in conditional branches - declare with initial values
+	/** @type {number} */
+	var a_start = 0;
+	/** @type {number} */
+	var b_start = 0;
+	/** @type {number} */
+	var a_left = 0;
+	/** @type {number} */
+	var b_left = 0;
+	/** @type {Int32Array} */
+	var sources = new Int32Array(0);
+	/** @type {boolean} */
+	var moved = false;
+	/** @type {number} */
+	var pos = 0;
+	/** @type {number} */
+	var patched = 0;
+	/** @type {number} */
+	var i = 0;
+
+	if (state === null) {
+		state = block.s = {
+			array: [],
+			blocks: [],
+			keys: null,
 		};
 	}
 
@@ -337,7 +640,6 @@ function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
 						} else {
 							pos = j;
 						}
-						b_val = b[j];
 						block = b_blocks[j] = a_blocks[i];
 						if (is_indexed) {
 							update_index(block, j);
@@ -355,7 +657,7 @@ function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
 
 	if (fast_path_removal) {
 		reconcile_fast_clear(anchor, block, []);
-		reconcile(anchor, block, b, render_fn, is_controlled, is_indexed);
+		reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed);
 		return;
 	} else if (moved) {
 		var next_pos = 0;
@@ -468,57 +770,3 @@ function lis_algorithm(arr) {
 
 	return seq;
 }
-
-/**
- * @template V
- * @template K
- * @param {Block} block
- * @param {V[] | Iterable<V>} collection
- * @param {(item: V) => K} key_fn
- * @returns {V[]}
- */
-function keyed(block, collection, key_fn) {
-	var b_array = collection_to_array(collection);
-	var b_keys = b_array.map(key_fn);
-
-	// We only need to do this in DEV
-	var b = new Set(b_keys);
-	if (b.size !== b_keys.length) {
-		throw new Error('Duplicate keys are not allowed');
-	}
-
-	var state = block.s;
-
-	if (state === null) {
-		// Make a clone of it so we don't mutate the original thereafter
-		return b_array.slice();
-	}
-
-	var a_array = state.array;
-	var a_blocks = state.blocks;
-	var a_keys = a_array.map(key_fn);
-	var a = new Map();
-
-	for (var i = 0; i < a_keys.length; i++) {
-		a.set(a_keys[i], i);
-	}
-
-	if (a.size !== a_keys.length) {
-		throw new Error('Duplicate keys are not allowed');
-	}
-
-	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) {
-			b_array[i] = a_array[index];
-		}
-	}
-
-	return b_array;
-}

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

@@ -51,7 +51,7 @@ export {
 
 export { composite } from './composite.js';
 
-export { for_block as for } from './for.js';
+export { for_block as for, for_block_keyed as for_keyed } from './for.js';
 
 export { if_block as if } from './if.js';
 

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

@@ -198,6 +198,46 @@ exports[`for statements > correctly handles the index in a for...of loop 3`] = `
 </div>
 `;
 
+exports[`for statements > handles reversing an array manually 1`] = `
+<div>
+  <!---->
+  <div>
+    0:Item 1
+  </div>
+  <div>
+    1:Item 2
+  </div>
+  <div>
+    2:Item 3
+  </div>
+  <!---->
+  <button>
+    Reverse
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > handles reversing an array manually 2`] = `
+<div>
+  <!---->
+  <div>
+    0:Item 3
+  </div>
+  <div>
+    1:Item 2
+  </div>
+  <div>
+    2:Item 1
+  </div>
+  <!---->
+  <button>
+    Reverse
+  </button>
+  
+</div>
+`;
+
 exports[`for statements > render a simple dynamic array 1`] = `
 <div>
   <!---->

package/tests/client/for.test.ripple

@@ -144,4 +144,39 @@ describe('for statements', () => {
 
 		expect(container).toMatchSnapshot();
 	});
+
+	it('handles reversing an array manually', () => {
+		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[0].id = 3;
+				@items[1].id = 2;
+				@items[2].id = 1;
+
+				@items = [
+					@items[0],
+					@items[1],
+					@items[2],
+				];
+			}}>{"Reverse"}</button>
+		}
+
+		render(App);
+		expect(container).toMatchSnapshot();
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(container).toMatchSnapshot();
+	})
 });