ripple 0.2.42 → 0.2.44

package/tests/basic.test.ripple

@@ -70,6 +70,45 @@ describe('basic', () => {
 		expect(container.querySelector('div').textContent).toEqual('Hello Ripple');
 	});
 
+	it('render empty string literal', () => {
+		component Basic() {
+			<div>{''}</div>
+		}
+
+		render(Basic);
+		expect(container.querySelector('div').textContent).toEqual('');
+	});
+
+	it('render empty template literal', () => {
+		component Basic() {
+			<div>{``}</div>
+		}
+
+		render(Basic);
+		expect(container.querySelector('div').textContent).toEqual('');
+	});
+
+	it('render tick template literal for nested children', () => {
+		component Child({ $level, $children }) {
+			if($level == 1) {
+				<h1><$children /></h1>
+			}
+			if($level == 2) {
+				<h2><$children /></h2>
+			}
+			if($level == 3) {
+				<h3><$children /></h3>
+			}
+		}
+
+		component App() {
+			<Child $level={1}>{`Heading 1`} </Child>
+		}
+
+		render(App);
+		expect(container.querySelector('h1').textContent).toEqual('Heading 1');
+	});
+
 	it('render dynamic class attribute', () => {
 		component Basic() {
 			let $active = false;
@@ -145,6 +184,31 @@ describe('basic', () => {
 		expect(div.style.fontWeight).toBe('bold');
 	});
 
+	it('render spread props without duplication', () => {
+		component App() {
+			const checkBoxProp = {name:'car'}
+
+			<div>
+				<input {...checkBoxProp} type="checkbox" id="vehicle1" value="Bike" />
+			</div>
+		}
+
+		render(App);
+
+		const input = container.querySelector('input');
+		const html = container.innerHTML;
+		
+		expect(input.getAttribute('name')).toBe('car');
+		expect(input.getAttribute('type')).toBe('checkbox');
+		expect(input.getAttribute('id')).toBe('vehicle1');
+		expect(input.getAttribute('value')).toBe('Bike');
+		
+		expect(html).not.toContain('type="checkbox"type="checkbox"');
+		expect(html).not.toContain('value="Bike"value="Bike"');
+		
+		expect(container).toMatchSnapshot();
+	});
+
 	it('render dynamic boolean attributes', () => {
 		component Basic() {
 			let $disabled = false;
@@ -350,7 +414,7 @@ describe('basic', () => {
 			let $focusCount = 0;
 			let $clickCount = 0;
 
-			<button 
+			<button
 				onFocus={() => $focusCount++}
 				onClick={() => $clickCount++}
 			>{'Test Button'}</button>
@@ -465,7 +529,7 @@ describe('basic', () => {
 	it('renders with computed reactive state', () => {
 		component Basic() {
 			let $count = 5;
-			
+
 			<div class='count'>{$count}</div>
 			<div class='doubled'>{$count * 2}</div>
 			<div class='is-even'>{$count % 2 === 0 ? 'Even' : 'Odd'}</div>
@@ -543,7 +607,7 @@ describe('basic', () => {
 
 			<button onClick={() => $showContent = !$showContent}>{'Toggle Content'}</button>
 			<button onClick={() => $userRole = $userRole === 'guest' ? 'admin' : 'guest'}>{'Toggle Role'}</button>
-			
+
 			<div class='content'>
 				if ($showContent) {
 					if ($userRole === 'admin') {
@@ -655,7 +719,7 @@ describe('basic', () => {
 			<div class='counter'>{$counter}</div>
 			<div class='parity'>{$isEven ? 'Even' : 'Odd'}</div>
 			<div class='history-count'>{$history.length}</div>
-			
+
 			<button class='inc-btn' onClick={handleIncrement}>{'+'}</button>
 			<button class='dec-btn' onClick={handleDecrement}>{'-'}</button>
 			<button class='reset-btn' onClick={handleReset}>{'Reset'}</button>
@@ -918,4 +982,116 @@ describe('basic', () => {
 		expect(divs[3].textContent).toBe('Even numbers: ');
 		expect(logs).toEqual(['0, 0', '1, 0', 'arr includes 1', '1, 1']);
 	});
+
+	it('it retains this context with bracketed prop functions and keeps original chaining', () => {
+		component App() {
+			const SYMBOL_PROP = Symbol();
+			let $hasError = false;
+			const obj = {
+				$count: 0,
+				increment() {
+					this.$count++;
+				},
+				[SYMBOL_PROP]() {
+					this.$count++;
+				},
+				arr: [() => obj.$count++, () => obj.$count--],
+			};
+
+			const obj2 = null;
+
+			<button onClick={() => obj['increment']()}>{'Increment'}</button>
+			<button onClick={() => obj[SYMBOL_PROP]()}>{'Increment'}</button>
+			<button
+				onClick={() => {
+					$hasError = false;
+					try {
+						obj['nonexistent']();
+					} catch {
+						$hasError = true;
+					}
+				}}
+			>{'Nonexistent'}</button>
+			<button
+				onClick={() => {
+					$hasError = false;
+					try {
+						obj['nonexistent']?.();
+					} catch {
+						$hasError = true;
+					}
+				}}
+			>{'Nonexistent chaining'}</button>
+			<button
+				onClick={() => {
+					$hasError = false;
+					try {
+						obj2['nonexistent']();
+					} catch {
+						$hasError = true;
+					}
+				}}
+			>{'Object null'}</button>
+			<button
+				onClick={() => {
+					$hasError = false;
+					try {
+						obj2?.['nonexistent']?.();
+					} catch {
+						$hasError = true;
+					}
+				}}
+			>{'Object null chained'}</button>
+			<button onClick={() => obj.arr[obj.arr.length - 1]()}>{'BinaryExpression prop'}</button>
+
+			<span>{obj.$count}</span>
+			<span>{$hasError}</span>
+		}
+
+		render(App);
+
+		const button1 = container.querySelectorAll('button')[0];
+		const button2 = container.querySelectorAll('button')[1];
+		const button3 = container.querySelectorAll('button')[2];
+		const button4 = container.querySelectorAll('button')[3];
+		const button5 = container.querySelectorAll('button')[4];
+		const button6 = container.querySelectorAll('button')[5];
+		const button7 = container.querySelectorAll('button')[6];
+
+		const countSpan = container.querySelectorAll('span')[0];
+		const errorSpan = container.querySelectorAll('span')[1];
+
+		expect(countSpan.textContent).toBe('0');
+		expect(errorSpan.textContent).toBe('false');
+
+		button1.click();
+		flushSync();
+
+		expect(countSpan.textContent).toBe('1');
+
+		button2.click();
+		flushSync();
+
+		expect(countSpan.textContent).toBe('2');
+
+		button3.click();
+		flushSync();
+		expect(errorSpan.textContent).toBe('true');
+
+		button4.click();
+		flushSync();
+		expect(errorSpan.textContent).toBe('false');
+
+		button5.click();
+		flushSync();
+		expect(errorSpan.textContent).toBe('true');
+
+		button6.click();
+		flushSync();
+		expect(errorSpan.textContent).toBe('false');
+
+		button7.click();
+		flushSync();
+		expect(countSpan.textContent).toBe('1');
+	});
 });

package/tests/compiler.test.ripple

@@ -178,4 +178,34 @@ describe('compiler success tests', () => {
 			124, 123, 124, 123, 124, 123, 124, 123
 		]);
 	});
-});
+
+	it('renders without crashing using mapped types', () => {
+		component App() {
+			type RecordKey = 'test';
+			type RecordValue = { a: string, b: number };
+
+			const config: Record<RecordKey, RecordValue> = {
+				test: {
+					a: 'test',
+					b: 1
+				},
+			};
+
+			const config2: { [key in RecordKey]: RecordValue } = {
+				test: {
+					a: 'test2',
+					b: 2
+				}
+			}
+
+			const config3: { [key: RecordKey]: RecordValue } = {
+				test: {
+					a: 'test3',
+					b: 3
+				}
+			}
+		}
+
+		render(App);
+	});
+});

package/tests/{decorators.test.ripple → ref.test.ripple}

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, flushSync, RippleArray } from 'ripple';
 
-describe('@use element decorators', () => {
+describe('refs', () => {
 	let container;
 
 	function render(component) {
@@ -24,7 +24,7 @@ describe('@use element decorators', () => {
 		let div;
 
 		component Component() {
-			<div {@use (node) => { div = node; }}>{'Hello World'}</div>
+			<div {ref (node) => { div = node; }}>{'Hello World'}</div>
 		}
 		render(Component);
 		flushSync();
@@ -37,11 +37,11 @@ describe('@use element decorators', () => {
 		component Component() {
 			let items = RippleArray.from([1, 2, 3]);
 
-			function ref(node) {
+			function componentRef(node) {
 				_node = node;
 			}
 
-			<Child {@use ref} {items} />
+			<Child {ref componentRef} {items} />
 		}
 
 		component Child(props) {

package/types/index.d.ts

@@ -79,3 +79,5 @@ declare global {
         // Add other runtime functions as needed for TypeScript analysis
     };
 }
+
+export declare function createRefKey(): symbol;