ripple 0.2.215 → 0.3.0

package/tests/client/for.test.ripple

@@ -1,4 +1,4 @@
-import { flushSync, TrackedArray, track } from 'ripple';
+import { flushSync, RippleArray } from 'ripple';
 
 describe('for statements', () => {
 	it('renders a simple static array', () => {
@@ -17,7 +17,7 @@ describe('for statements', () => {
 
 	it('renders a simple dynamic array', () => {
 		component App() {
-			const items = new TrackedArray('Item 1', 'Item 2', 'Item 3');
+			const items = #ripple['Item 1', 'Item 2', 'Item 3'];
 
 			for (const item of items) {
 				<div class={item}>{item}</div>
@@ -39,7 +39,7 @@ describe('for statements', () => {
 
 	it('correctly handles intermediate statements in for block', () => {
 		component App() {
-			const items = new TrackedArray(1, 2, 3);
+			const items = #ripple[1, 2, 3];
 
 			<div>
 				for (const item of items) {
@@ -68,7 +68,7 @@ describe('for statements', () => {
 
 	it('correctly handles the index in a for...of loop', () => {
 		component App() {
-			const items = new TrackedArray('a', 'b', 'c');
+			const items = #ripple['a', 'b', 'c'];
 
 			<div>
 				for (let item of items; index i) {
@@ -101,7 +101,7 @@ describe('for statements', () => {
 
 	it('correctly handles keyed for...of loops', () => {
 		component App() {
-			let items = track([
+			let items = #ripple.track([
 				{ id: 1, text: 'Item 1' },
 				{ id: 2, text: 'Item 2' },
 				{ id: 3, text: 'Item 3' },
@@ -134,9 +134,9 @@ describe('for statements', () => {
 
 	it('keyed for over derived updates sibling text nodes', () => {
 		component App() {
-			let count = track(0);
+			let count = #ripple.track(0);
 
-			const items = track(
+			const items = #ripple.track(
 				() => Array.from({ length: @count }).map((_, id) => ({ id, label: `Item ${id}` })),
 			);
 
@@ -173,9 +173,42 @@ describe('for statements', () => {
 		expect(container.querySelectorAll('.item').length).toBe(2);
 	});
 
+	it('keyed for with 32+ items: full reversal updates values via Map path', () => {
+		component App() {
+			let items = track(Array.from({ length: 40 }, (_, i) => ({ id: i, text: `Item ${i}` })));
+
+			<div>
+				for (let item of @items; index idx; key item.id) {
+					<span class="item">{idx + ':' + item.text}</span>
+				}
+			</div>
+
+			<button
+				onClick={() => {
+					@items = @items.toReversed();
+				}}
+			>
+				{'Reverse'}
+			</button>
+		}
+
+		render(App);
+
+		const getTexts = () => Array.from(container.querySelectorAll('.item')).map(
+			(el) => el.textContent,
+		);
+
+		expect(getTexts()).toEqual(Array.from({ length: 40 }, (_, i) => `${i}:Item ${i}`));
+
+		container.querySelector('button').click();
+		flushSync();
+
+		expect(getTexts()).toEqual(Array.from({ length: 40 }, (_, i) => `${i}:Item ${39 - i}`));
+	});
+
 	it('handles updating with new objects with same key', () => {
 		component App() {
-			let items = track([
+			let items = #ripple.track([
 				{ id: 1, text: 'Item 1' },
 				{ id: 2, text: 'Item 2' },
 				{ id: 3, text: 'Item 3' },
@@ -211,4 +244,39 @@ describe('for statements', () => {
 
 		expect(container).toMatchSnapshot();
 	});
+
+	it('ref-based for with 32+ items: remove from start with shared refs via Map path', () => {
+		const objects = Array.from({ length: 50 }, (_, i) => ({ id: i, text: `Obj ${i}` }));
+
+		component App() {
+			let items = track(objects.slice());
+
+			<div>
+				for (const item of @items) {
+					<span class="item">{item.text}</span>
+				}
+			</div>
+
+			<button
+				onClick={() => {
+					@items = objects.slice(15).reverse();
+				}}
+			>
+				{'Trim and reverse'}
+			</button>
+		}
+
+		render(App);
+
+		const getTexts = () => Array.from(container.querySelectorAll('.item')).map(
+			(el) => el.textContent,
+		);
+
+		expect(getTexts()).toEqual(objects.map((o) => o.text));
+
+		container.querySelector('button').click();
+		flushSync();
+
+		expect(getTexts()).toEqual(objects.slice(15).reverse().map((o) => o.text));
+	});
 });

package/tests/client/function-overload.test.ripple

@@ -1,6 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, flushSync } from 'ripple';
-
 import { test } from './function-overload-import.ripple';
 
 describe('function overload import tests', () => {

package/tests/client/head.test.ripple

@@ -1,4 +1,4 @@
-import { flushSync, track } from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('head elements', () => {
 	let originalTitle: string;
@@ -29,7 +29,7 @@ describe('head elements', () => {
 
 	it('renders reactive title element', () => {
 		component App() {
-			let title = track('Initial Title');
+			let title = #ripple.track('Initial Title');
 
 			<head>
 				<title>{@title}</title>
@@ -61,7 +61,7 @@ describe('head elements', () => {
 
 	it('renders title with template literal', () => {
 		component App() {
-			let name = track('World');
+			let name = #ripple.track('World');
 
 			<head>
 				<title>{`Hello ${@name}!`}</title>
@@ -90,7 +90,7 @@ describe('head elements', () => {
 
 	it('renders title with computed value', () => {
 		component App() {
-			let count = track(0);
+			let count = #ripple.track(0);
 			let prefix = 'Count: ';
 
 			<head>
@@ -122,7 +122,7 @@ describe('head elements', () => {
 
 	it('handles multiple title updates', () => {
 		component App() {
-			let step = track(1);
+			let step = #ripple.track(1);
 
 			<head>
 				<title>{`Step ${@step} of 3`}</title>
@@ -172,8 +172,8 @@ describe('head elements', () => {
 
 	it('renders title with conditional content', () => {
 		component App() {
-			let showPrefix = track(true);
-			let title = track('Main Page');
+			let showPrefix = #ripple.track(true);
+			let title = #ripple.track('Main Page');
 
 			<head>
 				<title>{@showPrefix ? 'App - ' + @title : @title}</title>

package/tests/client/html.test.ripple

@@ -1,4 +1,4 @@
-import { flushSync, track } from 'ripple';
+import { flushSync } from 'ripple';
 
 describe('html directive', () => {
 	it('renders static html', () => {
@@ -14,7 +14,7 @@ describe('html directive', () => {
 
 	it('renders dynamic html', () => {
 		component App() {
-			let str = track('<div>Test</div>');
+			let str = #ripple.track('<div>Test</div>');
 
 			{html @str}