ripple 0.2.91 → 0.2.93

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

@@ -32,7 +32,7 @@ import {
 	get_own_property_symbols,
 	is_array,
 	is_tracked_object,
-  object_keys,
+	object_keys,
 } from './utils.js';
 
 const FLUSH_MICROTASK = 0;
@@ -46,6 +46,8 @@ export let active_reaction = null;
 export let active_scope = null;
 /** @type {null | Component} */
 export let active_component = null;
+/** @type {boolean} */
+export let is_mutating_allowed = true;
 
 /** @type {Map<Tracked, any>} */
 var old_values = new Map();
@@ -170,6 +172,7 @@ function run_derived(computed) {
 	var previous_tracking = tracking;
 	var previous_dependency = active_dependency;
 	var previous_component = active_component;
+  var previous_is_mutating_allowed = is_mutating_allowed;
 
 	try {
 		active_block = computed.b;
@@ -177,6 +180,7 @@ function run_derived(computed) {
 		tracking = true;
 		active_dependency = null;
 		active_component = computed.co;
+    is_mutating_allowed = false;
 
 		destroy_computed_children(computed);
 
@@ -191,6 +195,7 @@ function run_derived(computed) {
 		tracking = previous_tracking;
 		active_dependency = previous_dependency;
 		active_component = previous_component;
+    is_mutating_allowed = previous_is_mutating_allowed;
 	}
 }
 
@@ -407,7 +412,7 @@ function is_tracking_dirty(tracking) {
 		var tracked = tracking.t;
 
 		if ((tracked.f & DERIVED) !== 0) {
-			update_derived(/** @type {Derived} **/ (tracked));
+			update_derived(/** @type {Derived} **/(tracked));
 		}
 
 		if (tracked.c > tracking.c) {
@@ -467,7 +472,7 @@ export function async_computed(fn, block) {
 		}
 
 		promise.then((v) => {
-			if (parent && is_destroyed(/** @type {Block} */ (parent))) {
+			if (parent && is_destroyed(/** @type {Block} */(parent))) {
 				return;
 			}
 			if (promise === current && t.v !== v) {
@@ -503,6 +508,21 @@ export function async_computed(fn, block) {
 	});
 }
 
+/**
+ * @template V
+ * @param {Function} fn 
+ * @param {V} v 
+ */
+function trigger_track_get(fn, v) {
+  var previous_is_mutating_allowed = is_mutating_allowed;
+  try {
+    is_mutating_allowed = false;
+    return untrack(() => fn(v));
+  } finally {
+    is_mutating_allowed = previous_is_mutating_allowed;
+  }
+}
+
 /**
  * @param {() => any} fn
  * @returns {[any, Tracked[] | null]}
@@ -602,6 +622,13 @@ function flush_queued_root_blocks(root_blocks) {
 	}
 }
 
+/**
+ * @returns {Promise<void>}
+ */
+export async function tick() {
+	return new Promise((f) => requestAnimationFrame(() => f()));
+}
+
 /**
  * @returns {void}
  */
@@ -702,8 +729,8 @@ export function get_derived(computed) {
 		register_dependency(computed);
 	}
 	var get = computed.a.get;
-	if (get) {
-		computed.v = get(computed.v);
+	if (get !== undefined) {
+		computed.v = trigger_track_get(get, computed.v);
 	}
 
 	return computed.v;
@@ -719,7 +746,7 @@ export function get(tracked) {
 	}
 
 	return (tracked.f & DERIVED) !== 0
-		? get_derived(/** @type {Derived} */ (tracked))
+		? get_derived(/** @type {Derived} */(tracked))
 		: get_tracked(tracked);
 }
 
@@ -735,8 +762,8 @@ export function get_tracked(tracked) {
 		value = old_values.get(tracked);
 	}
 	var get = tracked.a.get;
-	if (get) {
-		value = get(value);
+	if (get !== undefined) {
+		value = trigger_track_get(get, value);
 	}
 	return value;
 }
@@ -747,6 +774,10 @@ export function get_tracked(tracked) {
  * @param {Block} block
  */
 export function set(tracked, value, block) {
+  if (!is_mutating_allowed) {
+    throw new Error('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
+  }
+
 	var old_value = tracked.v;
 
 	if (value !== old_value) {
@@ -760,9 +791,9 @@ export function set(tracked, value, block) {
 			}
 		}
 
-		var set = tracked.a.set;
-		if (set) {
-			value = set(value, old_value);
+		let set = tracked.a.set;
+		if (set !== undefined) {
+			value = untrack(() => set(value, old_value));
 		}
 
 		tracked.v = value;
@@ -838,10 +869,10 @@ export function spread_props(fn, block) {
 				const obj = get_derived(computed);
 				return obj[property];
 			},
-      has(target, property) {
-        const obj = get_derived(computed);
-        return property in obj;
-      },
+			has(target, property) {
+				const obj = get_derived(computed);
+				return property in obj;
+			},
 			ownKeys() {
 				const obj = get_derived(computed);
 				return Reflect.ownKeys(obj);
@@ -1086,15 +1117,15 @@ export function fallback(value, fallback) {
  * @returns {Record<string | symbol, unknown>}
  */
 export function exclude_from_object(obj, exclude_keys) {
-  var keys = object_keys(obj);
+	var keys = object_keys(obj);
 	/** @type {Record<string | symbol, unknown>} */
 	var new_obj = {};
 
-  for (const key of keys) {
-    if (!exclude_keys.includes(key)) {
-      new_obj[key] = obj[key];
-    }
-  }
+	for (const key of keys) {
+		if (!exclude_keys.includes(key)) {
+			new_obj[key] = obj[key];
+		}
+	}
 
 	for (const symbol of get_own_property_symbols(obj)) {
 		var ref_fn = obj[symbol];
@@ -1121,7 +1152,7 @@ export async function maybe_tracked(v) {
 		} else {
 			value = await async_computed(async () => {
 				return await get_tracked(v);
-			}, /** @type {Block} */ (active_block));
+			}, /** @type {Block} */(active_block));
 		}
 	} else {
 		value = await v;

package/src/utils/normalize_css_property_name.js

@@ -0,0 +1,23 @@
+/** @type {Map<string, string>} */
+const normalized_properties_cache = new Map();
+
+/**
+ * Takes a camelCased string and returns a hyphenated string
+ * @param {string} str
+ * @returns {string}
+ * @example
+ * normalize_css_property_name('backgroundColor') // 'background-color'
+ */
+export function normalize_css_property_name(str) {
+	if (str.startsWith('--')) return str;
+
+	let normalized_result = normalized_properties_cache.get(str);
+	if (normalized_result != null) {
+		return normalized_result;
+	}
+
+	normalized_result = str.replace(/[A-Z]/g, m => '-' + m.toLowerCase());
+	normalized_properties_cache.set(str, normalized_result);
+
+	return normalized_result;
+}

package/tests/client/basic.test.ripple

@@ -1,10 +1,11 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, effect, track, trackSplit } from 'ripple';
+import { mount, flushSync, effect, track, trackSplit, untrack, tick } from 'ripple';
 import { compile } from 'ripple/compiler';
 import { TRACKED_ARRAY } from '../../src/runtime/internal/client/constants.js';
 
 describe('basic client', () => {
 	let container;
+	let error;
 
 	function render(component) {
 		mount(component, {
@@ -15,11 +16,13 @@ describe('basic client', () => {
 	beforeEach(() => {
 		container = document.createElement('div');
 		document.body.appendChild(container);
+		error = undefined;
 	});
 
 	afterEach(() => {
 		document.body.removeChild(container);
 		container = null;
+		error = undefined;
 	});
 
 	it('render static text', () => {
@@ -266,6 +269,107 @@ describe('basic client', () => {
 		expect(div.style.fontWeight).toBe('bold');
 	});
 
+	it('render style attribute as dynamic object', () => {
+		component Basic() {
+			let color = track('red');
+
+			<button onClick={() => { @color = @color === 'red' ? 'blue' : 'red' }}>{'Change Color'}</button>
+			<div style={{
+				color: @color,
+				fontWeight: 'bold',
+			}}>{'Dynamic Style'}</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const div = container.querySelector('div');
+
+		expect(div.style.color).toBe('red');
+		expect(div.style.fontWeight).toBe('bold');
+
+		button.click();
+		flushSync();
+
+		expect(div.style.color).toBe('blue');
+		expect(div.style.fontWeight).toBe('bold');
+	});
+
+	it('render tracked variable as style attribute', () => {
+		component Basic() {
+			let style = track({ color: 'red', fontWeight: 'bold' });
+
+			function toggleColor() {
+				@style = { ...@style, color: @style.color === 'red' ? 'blue' : 'red' };
+			}
+
+			<button onClick={toggleColor}>{'Change Color'}</button>
+			<div style={@style}>{'Dynamic Style'}</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const div = container.querySelector('div');
+
+		expect(div.style.color).toBe('red');
+		expect(div.style.fontWeight).toBe('bold');
+
+		button.click();
+		flushSync();
+
+		expect(div.style.color).toBe('blue');
+		expect(div.style.fontWeight).toBe('bold');
+	});
+
+	it('render tracked object as style attribute', () => {
+		component Basic() {
+			let style = #{ color: 'red', fontWeight: 'bold' };
+
+			function toggleColor() {
+				@style.color = @style.color === 'red' ? 'blue' : 'red';
+			}
+
+			<button onClick={toggleColor}>{'Change Color'}</button>
+			<div style={{ ...@style }}>{'Dynamic Style'}</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const div = container.querySelector('div');
+
+		expect(div.style.color).toBe('red');
+		expect(div.style.fontWeight).toBe('bold');
+
+		button.click();
+		flushSync();
+
+		expect(div.style.color).toBe('blue');
+		expect(div.style.fontWeight).toBe('bold');
+	});
+
+	it('render spread attributes with style and class', () => {
+		component Basic() {
+			const attributes = {
+				style: { color: 'red', fontWeight: 'bold' },
+				class: ['foo', false && 'bar'],
+			};
+
+			<div {...attributes}>{'Attributes with style and class'}</div>
+		}
+
+		render(Basic);
+
+		const div = container.querySelector('div');
+
+		expect(div.style.color).toBe('red');
+		expect(div.style.fontWeight).toBe('bold');
+
+		expect(div.classList.contains('foo')).toBe(true);
+		expect(div.classList.contains('bar')).toBe(false);
+	});
+
 	it('render spread props without duplication', () => {
 		component App() {
 			const checkBoxProp = {name:'car'}
@@ -1637,5 +1741,107 @@ describe('basic client', () => {
 		render(App);
 		expect(container).toMatchSnapshot();
 	});
+
+	it('tick function', async () => {
+		let resolve;
+		const promise = new Promise((res) => (resolve = res));
+
+		component Basic() {
+			let value = track(0);
+			effect(() => {
+				untrack(() => {
+					@value++;
+					tick().then(() => resolve());
+				});
+			});
+			<p>{@value}</p>
+		}
+		render(Basic);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+		await promise;
+		expect(p.textContent).toBe('1');
+	});
+
+	it('errors on mutating tracked value inside computed track() evaluation', () => {
+		component Basic() {
+			let count = track(0);
+
+			const doubled = track(() => {
+				try {
+					@count *= 2;
+				} catch (e) {
+					error = e.message;
+				}
+			});
+
+			<p>{@doubled}</p>
+		}
+
+		render(Basic);
+
+		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
+	});
+
+	it('errors on mutating tracked value inside untrack() in computed track() evaluation', () => {
+		component Basic() {
+			let count = track(0);
+
+			const doubled = track(() => {
+				try {
+					untrack(() => {
+						@count *= 2;
+					});
+				} catch (e) {
+					error = e.message;
+				}
+			});
+
+			<p>{@doubled}</p>
+		}
+
+		render(Basic);
+
+		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
+	});
+
+	it("errors on mutating a tracked variable in track() getter", () => {
+		component Basic() {
+			let count = track(0);
+
+			const doubled = track(0, (value) => {
+				try {
+					@count += 1;
+				} catch (e) {
+					error = e.message;
+				}
+				return value;
+			});
+
+			<p>{@doubled}</p>
+		}
+
+		render(Basic);
+
+		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
+	});
+
+	it("doesn't error on mutating a tracked variable in track() setter", () => {
+		component Basic() {
+			let count = track(0);
+
+			const doubled = track(0, undefined, (value) => {
+				@count += value;
+				return value;
+			});
+
+			<p>{@doubled}</p>
+		}
+
+		render(Basic);
+
+		expect(error).toBe(undefined);
+	});
 });
 

package/tests/client/compiler.test.ripple

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, TrackedArray, track } from 'ripple';
-import { parse } from 'ripple/compiler'
+import { parse, compile } from 'ripple/compiler'
 
 describe('compiler success tests', () => {
   let container;
@@ -280,4 +280,98 @@ describe('compiler success tests', () => {
 
 		render(App);
 	});
+
+	describe('attribute name handling', () => {
+		it('generates valid JavaScript for component props with hyphenated attributes', () => {
+			const source = `
+			component Child(props) {
+				<div />
+			}
+			
+			export default component App() {
+				<Child data-scope="test" aria-label="accessible" class="valid" />
+			}`;
+
+			const result = compile(source, 'test.ripple', { mode: 'client' });
+			
+			// Should contain properly quoted hyphenated properties and unquoted valid identifiers
+			expect(result.js.code).toMatch(/'data-scope': "test"/);
+			expect(result.js.code).toMatch(/'aria-label': "accessible"/);
+			expect(result.js.code).toMatch(/class: "valid"/);
+		});
+
+		it('generates valid JavaScript for all types of hyphenated attributes', () => {
+			const testCases = [
+				{ attr: 'data-testid="value"', expected: /'data-testid': "value"/ },
+				{ attr: 'aria-label="label"', expected: /'aria-label': "label"/ },
+				{ attr: 'data-custom-attr="custom"', expected: /'data-custom-attr': "custom"/ },
+				{ attr: 'ng-if="condition"', expected: /'ng-if': "condition"/ },
+			];
+
+			testCases.forEach(({ attr, expected }) => {
+				const source = `
+				component Child(props) { <div /> }
+				export default component App() { <Child ${attr} /> }`;
+
+				const result = compile(source, 'test.ripple', { mode: 'client' });
+				expect(result.js.code).toMatch(expected);
+			});
+		});
+
+		it('handles mixed valid and invalid attribute identifiers correctly', () => {
+			const source = `
+			component Child(props) {
+				<div />
+			}
+			
+			export default component App() {
+				<Child 
+					validProp="valid"
+					class="valid"
+					id="valid"
+					data-invalid="invalid"
+					aria-invalid="invalid"
+					custom-prop="invalid"
+				/>
+			}`;
+
+			const result = compile(source, 'test.ripple', { mode: 'client' });
+			
+			// Valid identifiers should not be quoted
+			expect(result.js.code).toMatch(/validProp: "valid"/);
+			expect(result.js.code).toMatch(/class: "valid"/);
+			expect(result.js.code).toMatch(/id: "valid"/);
+			
+			// Invalid identifiers (with hyphens) should be quoted
+			expect(result.js.code).toMatch(/'data-invalid': "invalid"/);
+			expect(result.js.code).toMatch(/'aria-invalid': "invalid"/);
+			expect(result.js.code).toMatch(/'custom-prop': "invalid"/);
+		});
+
+		it('ensures generated code is syntactically valid JavaScript', () => {
+			const source = `
+			component Child(props) {
+				<div />
+			}
+			
+			export default component App() {
+				<Child data-scope="test" />
+			}`;
+
+			const result = compile(source, 'test.ripple', { mode: 'client' });
+			
+			// Extract the props object from the generated code and test it's valid JavaScript
+			const match = result.js.code.match(/Child\([^,]+,\s*(\{[^}]+\})/);
+			expect(match).toBeTruthy();
+			
+			const propsObject = match[1];
+			expect(() => {
+				// Test that the object literal is syntactically valid
+				new Function(`return ${propsObject}`);
+			}).not.toThrow();
+			
+			// Also verify it contains the expected quoted property
+			expect(propsObject).toMatch(/'data-scope': "test"/);
+		});
+	});
 });

package/tests/client/html.test.ripple

@@ -49,4 +49,32 @@ describe('html directive', () => {
 
     expect(container).toMatchSnapshot();
   });
-});
+
+	it('renders the correct namespace for child svg element when html is surrounded by <svg>', () => {
+		component App() {
+			let str = '<circle r="45" cx="50" cy="50" fill="red" />';
+
+			<svg height="100" width="100">{html str}</svg>
+		}
+
+		render(App);
+
+		const circle = container.querySelector('circle');
+		expect(circle.namespaceURI).toBe('http://www.w3.org/2000/svg');
+	});
+
+	it('renders the correct namespace for child math element when html is surrounded by <math>', () => {
+		component App() {
+			let str = '<mi>x</mi><mo>+</mo><mi>y</mi>';
+
+			<math>{html str}</math>;
+		}
+
+		render(App);
+
+		const mi = container.querySelector('mi');
+		const mo = container.querySelector('mo');
+		expect(mi.namespaceURI).toBe('http://www.w3.org/1998/Math/MathML');
+		expect(mo.namespaceURI).toBe('http://www.w3.org/1998/Math/MathML');
+	});
+});