ripple 0.2.90 → 0.2.92

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/date.test.ripple

@@ -0,0 +1,392 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, TrackedDate, track } from 'ripple';
+
+describe('TrackedDate', () => {
+	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('handles getTime() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1);
+			let time = track(() => date.getTime());
+
+			<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
+			<pre>{@time}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+		const initialTime = container.querySelector('pre').textContent;
+
+		button.click();
+		flushSync();
+
+		const newTime = container.querySelector('pre').textContent;
+		expect(newTime).not.toBe(initialTime);
+		expect(parseInt(newTime)).toBeGreaterThan(parseInt(initialTime));
+	});
+
+	it('handles getFullYear() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 5, 15);
+			let year = track(() => date.getFullYear());
+
+			<button onClick={() => date.setFullYear(2030)}>{'Change Year'}</button>
+			<pre>{@year}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('2025');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('2030');
+	});
+
+	it('handles getMonth() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 15);
+			let month = track(() => date.getMonth());
+
+			<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
+			<pre>{@month}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('0');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('11');
+	});
+
+	it('handles getDate() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1);
+			let day = track(() => date.getDate());
+
+			<button onClick={() => date.setDate(15)}>{'Change Day'}</button>
+			<pre>{@day}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('1');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('15');
+	});
+
+	it('handles getDay() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1);
+			let dayOfWeek = track(() => date.getDay());
+
+			<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
+			<pre>{@dayOfWeek}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('3');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('4');
+	});
+
+	it('handles getHours() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1, 10, 30, 0);
+			let hours = track(() => date.getHours());
+
+			<button onClick={() => date.setHours(15)}>{'Change to 3 PM'}</button>
+			<pre>{@hours}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('10');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('15');
+	});
+
+	it('handles getMinutes() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1, 10, 15, 0);
+			let minutes = track(() => date.getMinutes());
+
+			<button onClick={() => date.setMinutes(45)}>{'Change Minutes'}</button>
+			<pre>{@minutes}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('15');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('45');
+	});
+
+	it('handles getSeconds() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1, 10, 15, 30);
+			let seconds = track(() => date.getSeconds());
+
+			<button onClick={() => date.setSeconds(45)}>{'Change Seconds'}</button>
+			<pre>{@seconds}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+
+		expect(container.querySelector('pre').textContent).toBe('30');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('45');
+	});
+
+	it('handles toISOString() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1, 12, 0, 0);
+			let isoString = track(() => date.toISOString());
+
+			<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
+			<pre>{@isoString}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+		const initialISO = container.querySelector('pre').textContent;
+
+		expect(initialISO).toContain('2025');
+
+		button.click();
+		flushSync();
+
+		const newISO = container.querySelector('pre').textContent;
+
+		// Just verify that the ISO string changed after the year was updated
+		expect(newISO).not.toBe(initialISO);
+		expect(newISO.length).toBeGreaterThan(0);
+	});
+
+	it('handles toDateString() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1);
+			let dateString = track(() => date.toDateString());
+
+			<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
+			<pre>{@dateString}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+		const initialDateString = container.querySelector('pre').textContent;
+
+		expect(initialDateString).toContain('Jan');
+
+		button.click();
+		flushSync();
+
+		const newDateString = container.querySelector('pre').textContent;
+		expect(newDateString).toContain('Dec');
+		expect(newDateString).not.toBe(initialDateString);
+	});
+
+	it('handles valueOf() with reactive updates', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1);
+			let valueOf = track(() => date.valueOf());
+
+			<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
+			<pre>{@valueOf}</pre>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+		const initialValue = parseInt(container.querySelector('pre').textContent);
+
+		button.click();
+		flushSync();
+
+		const newValue = parseInt(container.querySelector('pre').textContent);
+		expect(newValue).toBeGreaterThan(initialValue);
+		expect(newValue - initialValue).toBe(24 * 60 * 60 * 1000);
+	});
+
+	it('handles multiple get methods reacting to same setTime change', () => {
+		component DateTest() {
+			let date = new TrackedDate(2025, 0, 1, 10, 30, 15);
+			let year = track(() => date.getFullYear());
+			let month = track(() => date.getMonth());
+			let day = track(() => date.getDate());
+			let hours = track(() => date.getHours());
+
+			<button onClick={() => date.setTime(new Date(2026, 5, 15, 14, 45, 30).getTime())}>{'Change All'}</button>
+			<div>
+				{'Year: '}
+				{@year}
+			</div>
+			<div>
+				{'Month: '}
+				{@month}
+			</div>
+			<div>
+				{'Day: '}
+				{@day}
+			</div>
+			<div>
+				{'Hours: '}
+				{@hours}
+			</div>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+		const divs = container.querySelectorAll('div');
+
+		expect(divs[0].textContent).toBe('Year: 2025');
+		expect(divs[1].textContent).toBe('Month: 0');
+		expect(divs[2].textContent).toBe('Day: 1');
+		expect(divs[3].textContent).toBe('Hours: 10');
+
+		button.click();
+		flushSync();
+
+		expect(divs[0].textContent).toBe('Year: 2026');
+		expect(divs[1].textContent).toBe('Month: 5');
+		expect(divs[2].textContent).toBe('Day: 15');
+		expect(divs[3].textContent).toBe('Hours: 14');
+	});
+
+	it('handles constructor with different parameter combinations', () => {
+		component DateTest() {
+			let dateNow = new TrackedDate();
+			let dateFromString = new TrackedDate('2025-01-01');
+			let dateFromNumbers = new TrackedDate(2025, 0, 1);
+			let dateFromTimestamp = new TrackedDate(1735689600000);
+
+			let nowYear = track(() => dateNow.getFullYear());
+			let stringYear = track(() => dateFromString.getFullYear());
+			let numbersYear = track(() => dateFromNumbers.getFullYear());
+			let timestampYear = track(() => dateFromTimestamp.getFullYear());
+
+			<div>
+				{'Now: '}
+				{@nowYear}
+			</div>
+			<div>
+				{'String: '}
+				{@stringYear}
+			</div>
+			<div>
+				{'Numbers: '}
+				{@numbersYear}
+			</div>
+			<div>
+				{'Timestamp: '}
+				{@timestampYear}
+			</div>
+		}
+
+		render(DateTest);
+
+		const divs = container.querySelectorAll('div');
+		const currentYear = new Date().getFullYear();
+
+		expect(parseInt(divs[0].textContent.split(': ')[1])).toBe(currentYear);
+
+		// String date parsing may vary by timezone, just check it's a reasonable year
+		const stringYear = parseInt(divs[1].textContent.split(': ')[1]);
+		expect(stringYear).toBeGreaterThanOrEqual(2024);
+		expect(stringYear).toBeLessThanOrEqual(2025);
+		expect(divs[2].textContent).toBe('Numbers: 2025');
+
+		// Timestamp parsing may also vary by timezone
+		const timestampYear = parseInt(divs[3].textContent.split(': ')[1]);
+		expect(timestampYear).toBeGreaterThanOrEqual(2024);
+		expect(timestampYear).toBeLessThanOrEqual(2025);
+	});
+
+	it('handles get methods with arguments non-memoized', () => {
+		component DateTest() {
+			let date = new TrackedDate();
+			let localeDateString = track(() => date.toLocaleDateString('en-US'));
+			let localeTimeString = track(() => date.toLocaleTimeString('en-US'));
+
+			<button onClick={() => date.setFullYear(date.getFullYear() + 1)}>{'Next Year'}</button>
+			<div>
+				{'Date: '}
+				{@localeDateString}
+			</div>
+			<div>
+				{'Time: '}
+				{@localeTimeString}
+			</div>
+		}
+
+		render(DateTest);
+
+		const button = container.querySelector('button');
+		const divs = container.querySelectorAll('div');
+		const initialDate = divs[0].textContent;
+		const initialTime = divs[1].textContent;
+
+		button.click();
+		flushSync();
+
+		const newDate = divs[0].textContent;
+		const newTime = divs[1].textContent;
+
+		expect(newDate).not.toBe(initialDate);
+		expect(newTime).toBe(initialTime);
+	});
+});

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');
+	});
+});

package/tests/client/portal.test.ripple

@@ -0,0 +1,167 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, Portal, track, flushSync } from 'ripple';
+
+describe('Portal', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container,
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		// Remove container
+		document.body.removeChild(container);
+
+		// Clean up any leftover portal content from document.body
+		const portals = document.body.querySelectorAll('.test-portal');
+		portals.forEach(el => el.remove());
+	});
+
+	it('renders portal content to target element', () => {
+		const target = document.createElement('div');
+		document.body.appendChild(target);
+
+		component TestPortal() {
+			<Portal target={target}><div class='test-portal'>{'Portal works!'}</div></Portal>
+		}
+
+		render(TestPortal);
+
+		// Portal content should be in the target, not in container
+		expect(container.querySelector('.test-portal')).toBeNull();
+		expect(target.querySelector('.test-portal')).toBeTruthy();
+		expect(target.querySelector('.test-portal').textContent).toBe('Portal works!');
+
+		document.body.removeChild(target);
+	});
+
+	it('renders portal content to document.body', () => {
+		component TestPortal() {
+			<Portal target={document.body}><div class='test-portal'>{'In document.body!'}</div></Portal>
+		}
+
+		render(TestPortal);
+
+		// Should not be in container
+		expect(container.querySelector('.test-portal')).toBeNull();
+
+		// Should be in document.body
+		expect(document.body.querySelector('.test-portal')).toBeTruthy();
+		expect(document.body.querySelector('.test-portal').textContent).toBe('In document.body!');
+	});
+
+	it('cleans up portal content when destroyed via conditional rendering', () => {
+		component TestPortal() {
+			let open = track(true);
+
+			if (@open) {
+				<Portal target={document.body}><div class='test-portal'>{'Conditional content'}</div></Portal>
+			}
+
+			<button onClick={() => @open = false}>{'Close'}</button>
+		}
+
+		render(TestPortal);
+
+		// Initially portal content should be present
+		expect(document.body.querySelector('.test-portal')).toBeTruthy();
+
+		// Click close button to destroy portal
+		container.querySelector('button').click();
+		flushSync();
+
+		// Portal content should be cleaned up
+		expect(document.body.querySelector('.test-portal')).toBeNull();
+	});
+
+	it('opens and closes portal via conditional rendering', () => {
+		component TestPortal() {
+			let open = track(false);
+
+			if (@open) {
+				<Portal target={document.body}><div class='test-portal'>
+					{'Content'}
+					<button onClick={() => @open = false}>{'Close'}</button>
+				</div></Portal>
+			}
+
+			if (!@open) {
+				<button onClick={() => @open = true}>{'Open'}</button>
+			}
+		}
+
+		render(TestPortal);
+
+		// Open the portal
+		container.querySelector('button').click();
+		flushSync();
+		expect(document.body.querySelector('.test-portal')).toBeTruthy();
+
+		// Close the portal - this should work without errors
+		expect(() => {
+			document.body.querySelector('button').click();
+			flushSync();
+		}).not.toThrow();
+
+		// Portal content should be cleaned up
+		expect(document.body.querySelector('.test-portal')).toBeNull();
+	});
+
+	it('handles multiple portals simultaneously', () => {
+		const target1 = document.createElement('div');
+		const target2 = document.createElement('div');
+		target1.id = 'multi-target1';
+		target2.id = 'multi-target2';
+		document.body.appendChild(target1);
+		document.body.appendChild(target2);
+
+		component TestMultiPortal() {
+			<Portal target={target1}><div class='test-portal'>{'Portal 1 content'}</div></Portal>
+
+			<Portal target={target2}><div class='test-portal'>{'Portal 2 content'}</div></Portal>
+		}
+
+		render(TestMultiPortal);
+
+		// Both portals should render in their respective targets
+		expect(target1.querySelector('.test-portal')).toBeTruthy();
+		expect(target1.querySelector('.test-portal').textContent).toBe('Portal 1 content');
+
+		expect(target2.querySelector('.test-portal')).toBeTruthy();
+		expect(target2.querySelector('.test-portal').textContent).toBe('Portal 2 content');
+
+		document.body.removeChild(target1);
+		document.body.removeChild(target2);
+	});
+
+	it('handles portal with reactive content', () => {
+		component TestReactivePortal() {
+			let count = track(0);
+
+			<Portal target={document.body}><div class='test-portal'>
+				{'Count: '}
+				{String(@count)}
+				<button onClick={() => @count++}>{'Increment'}</button>
+			</div></Portal>
+		}
+
+		render(TestReactivePortal);
+
+		const portalElement = document.body.querySelector('.test-portal');
+		expect(portalElement).toBeTruthy();
+		expect(portalElement.textContent).toContain('Count: 0');
+
+		// Click increment button
+		portalElement.querySelector('button').click();
+		flushSync();
+
+		expect(portalElement.textContent).toContain('Count: 1');
+	});
+});