ripple 0.2.82 → 0.2.83

package/package.json

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

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

@@ -75,6 +75,21 @@ function RipplePlugin(config) {
           }
         }
 
+        if (code === 35) {
+          // # character
+          // Look ahead to see if this is followed by [ for tuple syntax
+          if (this.pos + 1 < this.input.length) {
+            const nextChar = this.input.charCodeAt(this.pos + 1);
+            if (nextChar === 91) { // [ character
+              // This is a tuple literal #[
+              // Consume both # and [
+              ++this.pos; // consume #
+              ++this.pos; // consume [
+              return this.finishToken(tt.bracketL, '#[');
+            }
+          }
+        }
+
         if (code === 64) {
           // @ character
           // Look ahead to see if this is followed by a valid identifier character
@@ -161,6 +176,50 @@ function RipplePlugin(config) {
         return node;
       }
 
+      parseExprAtom(refDestructuringErrors, forNew, forInit) {
+        // Check if this is a tuple literal starting with #[
+        if (this.type === tt.bracketL && this.value === '#[') {
+          return this.parseTrackedArrayExpression();
+        }
+        
+        return super.parseExprAtom(refDestructuringErrors, forNew, forInit);
+      }
+
+      parseTrackedArrayExpression() {
+        const node = this.startNode();
+        this.next(); // consume the '#['
+        
+        node.elements = [];
+        
+        // Parse array elements similar to regular array parsing
+        let first = true;
+        while (!this.eat(tt.bracketR)) {
+          if (!first) {
+            this.expect(tt.comma);
+            if (this.afterTrailingComma(tt.bracketR)) break;
+          } else {
+            first = false;
+          }
+          
+          if (this.type === tt.comma) {
+            // Hole in array
+            node.elements.push(null);
+          } else if (this.type === tt.ellipsis) {
+            // Spread element
+            const element = this.parseSpread();
+            node.elements.push(element);
+            if (this.type === tt.comma && this.input.charCodeAt(this.pos) === 93) {
+              this.raise(this.pos, "Trailing comma is not permitted after the rest element");
+            }
+          } else {
+            // Regular element
+            node.elements.push(this.parseMaybeAssign(false));
+          }
+        }
+        
+        return this.finishNode(node, 'TrackedArrayExpression');
+      }
+
       parseExportDefaultDeclaration() {
         // Check if this is "export default component"
         if (this.value === 'component') {

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

@@ -269,6 +269,27 @@ const visitors = {
 		);
 	},
 
+	TrackedArrayExpression(node, context) {
+		if (context.state.to_ts) {
+			if (!context.state.imports.has(`import { TrackedArray } from 'ripple'`)) {
+				context.state.imports.add(`import { TrackedArray } from 'ripple'`);
+			}
+
+			return b.new(
+				b.call(
+					b.member(b.id('TrackedArray'), b.id('from')),
+					node.elements.map((el) => context.visit(el)),
+				),
+			);
+		}
+
+		return b.call(
+			'_$_.tracked_array',
+			b.array(node.elements.map((el) => context.visit(el))),
+			b.id('__block'),
+		);
+	},
+
 	MemberExpression(node, context) {
 		const parent = context.path.at(-1);
 

package/src/runtime/array.js

@@ -287,3 +287,7 @@ const methods_returning_arrays = new Set([
   'toSpliced',
   'with',
 ]);
+
+export function tracked_array(elements, block) {
+  return proxy({ elements, block, from_static: true });
+}

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

@@ -52,3 +52,5 @@ export { if_block as if } from './if.js';
 export { try_block as try, aborted } from './try.js';
 
 export { template, append } from './template.js';
+
+export { tracked_array } from '../../array.js';

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

@@ -326,17 +326,23 @@ export function track(v, o, b) {
 	/** @type {Record<PropertyKey, any | null>} */
 	var descriptors = get_descriptors(v);
 
-	for (let i = 0, key, t; i < list.length; i++) {
+	for (let i = 0, key, t, exists = true; i < list.length; i++) {
 		key = list[i];
 
 		if (is_tracked_object(v[key])) {
 			t = v[key];
 		} else {
-			t = define_property(tracked(undefined, b), 'v', descriptors[key]);
+			t = tracked(undefined, b);
+			exists = !!descriptors[key];
+			if (exists) {
+				t = define_property(t, 'v', descriptors[key]);
+			}
 		}
 
 		out[i] = t;
-		descriptors[key] = null;
+		if (exists) {
+			descriptors[key] = null;
+		}
 	}
 
 	var props = Reflect.ownKeys(descriptors);

package/src/utils/builders.js

@@ -790,4 +790,5 @@ export {
   null_instane as null,
   debugger_builder as debugger,
   try_builder as try,
+  new_builder as new,
 };

package/tests/client/basic.test.ripple

@@ -379,8 +379,7 @@ describe('basic client', () => {
 		expect(container.querySelector('.count').textContent).toBe('0');
 	});
 
-	// TODO
-	it.skip('renders multiple reactive lexical blocks with complexity', () => {
+	it('renders multiple reactive lexical blocks with complexity', () => {
 
 		component Basic() {
 			const count = 'count';
@@ -1276,12 +1275,7 @@ describe('basic client', () => {
 		let logs = [];
 
 		component App() {
-			let count = track(0, {
-				set(v) {
-					logs.push('inside setter');
-					return v;
-				}
-			});
+			let count = track(0);
 			let name = track('Click Me');
 
 			function buttonRef(el) {
@@ -1294,9 +1288,11 @@ describe('basic client', () => {
 			<Child
 				class="my-button"
 				onClick={() => @name === 'Click Me' ? @name = 'Clicked' : @name = 'Click Me'}
-				{count}
+				{@count}
 				{ref buttonRef}
-			>{@name}</Child>;
+			>{@name}</Child>
+
+			<button onClick={() => @count++}>{'Increment Count'}</button>
 		}
 
 		component Child(props: PropsWithChildren<{ count: Tracked<number> }>) {
@@ -1306,7 +1302,6 @@ describe('basic client', () => {
 				<button {...@rest}><@children /></button>
 			}
 			<pre>{@count}</pre>
-			<button onClick={() => @count++}>{'Increment Count'}</button>
 		}
 
 		render(App);
@@ -1327,12 +1322,11 @@ describe('basic client', () => {
 
 		expect(buttonClickMe.textContent).toBe('Clicked');
 		expect(countPre.textContent).toBe('1');
-		expect(logs).toEqual(['ref called','inside setter']);
 
 		buttonIncrement.click();
 		flushSync();
 
-		expect(logs).toEqual(['ref called','inside setter','inside setter','cleanup ref']);
+		expect(logs).toEqual(['ref called','cleanup ref']);
 	});
 
 	it('errors on invalid value as null for track with split', () => {
@@ -1393,6 +1387,26 @@ describe('basic client', () => {
 		expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
 	});
 
+	it('returns undefined for non-existent props in track with split', () => {
+		component App() {
+			const [a, b, rest] = track({a: 1, c: 1}, { split: ['a', 'b'] });
+
+			<pre>{@a}</pre>
+			<pre>{String(@b)}</pre>
+			<pre>{@rest.c}</pre>
+		}
+
+		render(App);
+
+		const preA = container.querySelectorAll('pre')[0];
+		const preB = container.querySelectorAll('pre')[1];
+		const preC = container.querySelectorAll('pre')[2];
+
+		expect(preA.textContent).toBe('1');
+		expect(preB.textContent).toBe('undefined');
+		expect(preC.textContent).toBe('1');
+	});
+
 	it('returns the same tracked object if plain track is called with a tracked object', () => {
 		component App() {
 			const t = track({a: 1, b: 2, c: 3});