ripple 0.2.7 → 0.2.9

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

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

@@ -67,7 +67,6 @@ function RipplePlugin(config) {
 			}
 
 			jsx_parseExpressionContainer() {
-				const tok = this.acornTypeScript.tokTypes;
 				let node = this.startNode();
 				this.next();
 
@@ -136,13 +135,6 @@ function RipplePlugin(config) {
 								this.raise(t.start, 'attributes must only be assigned a non-empty expression'),
 							t
 						);
-					// case tt.bracketL:
-					// 	var t = this.jsx_parseTupleContainer();
-					// 	return (
-					// 		'JSXEmptyExpression' === t.expression.type &&
-					// 			this.raise(t.start, 'attributes must only be assigned a non-empty expression'),
-					// 		t
-					// 	);
 					case tok.jsxTagStart:
 					case tt.string:
 						return this.parseExprAtom();
@@ -294,7 +286,10 @@ function RipplePlugin(config) {
 						case 62: // '>'
 						case 125: {
 							// '}'
-							if (ch === 125 && (this.#path.length === 0 || this.#path.at(-1)?.type === 'Component')) {
+							if (
+								ch === 125 &&
+								(this.#path.length === 0 || this.#path.at(-1)?.type === 'Component')
+							) {
 								return original.readToken.call(this, ch);
 							}
 							this.raise(
@@ -364,12 +359,8 @@ function RipplePlugin(config) {
 
 				if (element.selfClosing) {
 					this.#path.pop();
-					if (
-						this.type !== tok.jsxTagStart &&
-						this.type?.keyword !== 'for' &&
-						this.type?.keyword !== 'try'
-					) {
-						// Eat the closing `/>`
+
+					if (this.type.label === '</>/<=/>=') {
 						this.pos--;
 						this.next();
 					}
@@ -400,6 +391,13 @@ function RipplePlugin(config) {
 					} else {
 						this.parseTemplateBody(element.children);
 					}
+					const tokContexts = this.acornTypeScript.tokContexts;
+
+					const curContext = this.curContext();
+
+					if (curContext === tokContexts.tc_expr) {
+						this.context.pop();
+					}
 				}
 
 				this.finishNode(element, 'Element');

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

@@ -806,10 +806,12 @@ const visitors = {
 		const binding = context.state.scope.get(left.name);
 		const transformers = left && binding?.transform;
 
-		if (left === argument && transformers?.update) {
-			// we don't need to worry about ownership_invalid_mutation here, because
-			// we're not mutating but reassigning
-			return transformers.update(node);
+		if (left === argument ) {
+			if (transformers?.update) {
+				return transformers.update(node);
+			} else if (binding.kind === 'prop') {
+				throw new Error('Cannot update component prop property, component props are not writable');
+			}
 		}
 
 		context.next();

package/src/runtime/index.js

@@ -37,3 +37,5 @@ export { keyed } from './internal/client/for.js';
 export { user_effect as effect } from './internal/client/blocks.js';
 
 export { Portal } from './internal/client/portal.js';
+
+export { ref } from './internal/client/runtime.js';

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

@@ -19,6 +19,7 @@ import {
 	run_block,
 	run_teardown,
 	schedule_update,
+	set_property,
 } from './runtime';
 import { suspend } from './try';
 
@@ -69,19 +70,29 @@ export function async(fn) {
 }
 
 export function use(element, get_fn) {
-	var fn = undefined;
+	var use_obj = undefined;
 	var e;
+	var current_block = active_block;
 
 	return block(RENDER_BLOCK, () => {
-		if (fn !== (fn = get_fn())) {
+		if (use_obj !== (use_obj = get_fn())) {
 			if (e) {
 				destroy_block(e);
 				e = null;
 			}
 
-			if (fn) {
+			if (use_obj) {
 				e = branch(() => {
-					effect(() => fn(element));
+					effect(() => {
+						if (typeof use_obj === 'function') {
+							return use_obj(element);
+						} else {
+							set_property(use_obj, '$current', element, current_block);
+							return () => {
+								set_property(use_obj, '$current', null, current_block);
+							};
+						}
+					});
 				});
 			}
 		}

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

@@ -46,8 +46,7 @@ export function for_block(node, get_collection, render_fn, flags) {
 				: array_from(collection);
 
 		if (array[TRACKED_OBJECT] !== undefined) {
-			// TODO we previously assigned array to this, but why?
-			get_all_elements(collection);
+			array = get_all_elements(collection);
 			collection.$length;
 		}
 

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

@@ -936,3 +936,16 @@ export function pop_component() {
 export function use_prop() {
 	return Symbol(USE_PROP);
 }
+
+export function ref(value) {
+	var block = active_block || active_scope;
+	if (!block) {
+		throw new Error('ref() must be called within a component or reactive context');
+	}
+
+	// Create a tracked object with a $current property
+	var ref_obj = { $current: value };
+
+	// Make the $current property reactive
+	return tracked_object(ref_obj, ['$current'], block);
+}

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

@@ -0,0 +1,81 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`for statements > render a simple dynamic array 1`] = `
+<div>
+  <!---->
+  <div
+    class="Item 1"
+  >
+    Item 1
+  </div>
+  <div
+    class="Item 2"
+  >
+    Item 2
+  </div>
+  <div
+    class="Item 3"
+  >
+    Item 3
+  </div>
+  <!---->
+  <button>
+    Add Item
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > render a simple dynamic array 2`] = `
+<div>
+  <!---->
+  <div
+    class="Item 1"
+  >
+    Item 1
+  </div>
+  <div
+    class="Item 2"
+  >
+    Item 2
+  </div>
+  <div
+    class="Item 3"
+  >
+    Item 3
+  </div>
+  <div
+    class="Item 4"
+  >
+    Item 4
+  </div>
+  <!---->
+  <button>
+    Add Item
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > render a simple static array 1`] = `
+<div>
+  <!---->
+  <div
+    class="Item 1"
+  >
+    Item 1
+  </div>
+  <div
+    class="Item 2"
+  >
+    Item 2
+  </div>
+  <div
+    class="Item 3"
+  >
+    Item 3
+  </div>
+  <!---->
+  
+</div>
+`;

package/tests/composite.test.ripple

@@ -21,6 +21,32 @@ describe('composite components', () => {
 		container = null;
 	});
 
+	it('renders composite components', () => {
+		component Button({ $count }) {
+			<div>{$count}</div>
+		}
+
+		component App() {
+			let $count = 0;
+			<button onClick={() => $count++}>{'Increment'}</button>
+			<Button $count={$count} />
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toBe('1');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toBe('2');
+	});
+
 	it('renders composite components with object state', () => {
 		component Button({ obj }) {
 			<button class='count2' onClick={() => {

package/tests/for.test.ripple

@@ -0,0 +1,58 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+
+import { mount, flushSync, array } from 'ripple';
+
+describe('for statements', () => {
+	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('render a simple static array', () => {
+		component App() {
+			const items = ['Item 1', 'Item 2', 'Item 3'];
+
+			for (const item of items) {
+				<div class={item}>{item}</div>
+			}
+		}
+
+		render(App);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('render a simple dynamic array', () => {
+		component App() {
+			const items = array('Item 1', 'Item 2', 'Item 3');
+
+			for (const item of items) {
+				<div class={item}>{item}</div>
+			}
+
+			<button onClick={() => items.push(`Item ${items.$length + 1}`)}>{"Add Item"}</button>
+		}
+
+		render(App);
+		expect(container).toMatchSnapshot();
+
+    const button = container.querySelector('button');
+    button.click();
+    flushSync();
+
+    expect(container).toMatchSnapshot();
+	});
+});

package/tests/ref.test.ripple

@@ -0,0 +1,52 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+
+import { mount, flushSync, ref } from 'ripple';
+
+describe('ref', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+	});
+
+	it('creates a reactive ref with initial value', () => {
+		component TestRef() {
+			let $count = 5;
+			<div><span id='count'>{$count}</span></div>
+		}
+
+		render(TestRef);
+
+		expect(container.querySelector('#count').textContent).toBe('5');
+	});
+
+	it('updates when ref value changes', () => {
+		component TestRef() {
+			let $count = 0;
+			<div>
+				<span id='count'>{$count}</span>
+				<button id='btn' onClick={() => $count++}>{'Increment'}</button>
+			</div>
+		}
+
+		render(TestRef);
+
+		expect(container.querySelector('#count').textContent).toBe('0');
+
+		container.querySelector('#btn').click();
+		flushSync();
+
+		expect(container.querySelector('#count').textContent).toBe('1');
+	});
+});

package/types/index.d.ts

@@ -10,3 +10,9 @@ export declare function untrack<T>(fn: () => T): T;
 export declare function flushSync<T>(fn: () => T): T;
 
 export declare function effect(fn: (() => void) | (() => () => void)): void;
+
+export interface Ref<T> {
+	$current: T;
+}
+
+export declare function ref<T>(value: T): Ref<T>;