ripple 0.2.41 → 0.2.43

package/tests/basic.test.ripple

@@ -70,6 +70,24 @@ 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 dynamic class attribute', () => {
 		component Basic() {
 			let $active = false;
@@ -145,6 +163,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 +393,7 @@ describe('basic', () => {
 			let $focusCount = 0;
 			let $clickCount = 0;
 
-			<button 
+			<button
 				onFocus={() => $focusCount++}
 				onClick={() => $clickCount++}
 			>{'Test Button'}</button>
@@ -465,7 +508,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 +586,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 +698,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 +961,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

@@ -1,5 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, RippleArray } from 'ripple';
+import { parse } from 'ripple/compiler'
 
 describe('compiler success tests', () => {
   let container;
@@ -20,6 +21,30 @@ describe('compiler success tests', () => {
 		container = null;
 	});
 
+	
+	it('Parses style content correctly', () => {
+		const source = `export component App() {
+  <div id="myid" class="myclass">{"Hello World"}</div>
+  
+  <style>#style</style>
+}`;
+		const style1 = '.myid {color: green }';
+		const style2 = '#myid {color: green }';
+		const style3 = 'div {color: green }';
+		
+		let input = source.replace('#style', style1);
+		let ast = parse(input);
+		expect(ast.body[0].declaration.css.source).toEqual(style1);
+
+		input = source.replace('#style', style2);
+		ast = parse(input);
+		expect(ast.body[0].declaration.css.source).toEqual(style2);
+
+		input = source.replace('#style', style3);
+		ast = parse(input);
+		expect(ast.body[0].declaration.css.source).toEqual(style3);
+	});
+
   it('renders without crashing', () => {
 		component App() {
 			let foo;
@@ -153,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);
+	});
+});