ripple 0.2.115 → 0.2.118

package/tests/client/basic/basic.styling.test.ripple

@@ -0,0 +1,63 @@
+import { compile } from 'ripple/compiler';
+
+describe('basic client > styling', () => {
+	it('renders with styling scoped to component', () => {
+		component Basic() {
+			<div class='styled-container'>
+				<h1>{'Styled heading'}</h1>
+				<p class='text'>{'Styled paragraph'}</p>
+			</div>
+
+			<style>
+				.styled-container {
+					background-color: rgb(0, 0, 255);
+					padding: 16px;
+				}
+
+				h1 {
+					color: rgb(255, 255, 255);
+					font-size: 32px;
+				}
+
+				.text {
+					color: rgb(200, 200, 200);
+					font-size: 14px;
+				}
+			</style>
+		}
+
+		render(Basic);
+
+		const styledContainer = container.querySelector('.styled-container');
+		const heading = styledContainer.querySelector('h1');
+		const paragraph = styledContainer.querySelector('.text');
+
+		expect(styledContainer).toBeTruthy();
+		expect(heading.textContent).toBe('Styled heading');
+		expect(paragraph.textContent).toBe('Styled paragraph');
+	});
+
+	it('renders with keyframes in styling scoped to component', () => {
+		const source = `export component Basic() {
+			<div>
+				<p>{'Styled paragraph'}</p>
+			</div>
+
+			<style>
+				div {
+					animation-name: anim;
+				}
+
+				@keyframes anim {}
+
+				p {
+					animation-name: anim;
+				}
+			</style>
+		}`;
+
+		const { css } = compile(source, 'test.ripple');
+		const name = css.match(/@keyframes\s+([a-zA-Z0-9_-]+)\s*\{/)[1];
+		expect(css.match(new RegExp(name, 'g'))?.length).toEqual(3);
+	});
+});

package/tests/client/basic/basic.utilities.test.ripple

@@ -0,0 +1,25 @@
+import { track, effect, untrack, tick } from 'ripple';
+
+describe('basic client > utilities', () => {
+	it('tick function', async () => {
+		let resolve: () => void;
+		const promise = new Promise<void>((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');
+	});
+});

package/tests/client/boundaries.test.ripple

@@ -1,25 +1,6 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, effect, track } from 'ripple';
+import { flushSync, effect, track } from 'ripple';
 
 describe('passing reactivity between boundaries tests', () => {
-	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('can pass reactivity between functions with simple arrays and destructuring', () => {
     let log: string[] = [];
 
@@ -66,7 +47,7 @@ describe('passing reactivity between boundaries tests', () => {
   it('can pass reactivity between functions with simple objects and destructuring', () => {
     let log: string[] = [];
 
-    function createDouble({ count }) {
+    function createDouble({ count }: { count: Tracked<number> }) {
       const double = track(() => @count * 2);
 
       effect(() => {

package/tests/client/compiler/__snapshots__/compiler.assignments.test.ripple.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler > assignments > compiles tracked values in effect with assignment expression 1`] = `"state.count = _$_.get(count);"`;
+
+exports[`compiler > assignments > compiles tracked values in effect with update expressions 1`] = `
+"_$_.with_scope(__block, () => untrack(() => {
+			state.preIncrement = _$_.update_pre(count, __block);
+			state.postIncrement = _$_.update(count, __block);
+			state.preDecrement = _$_.update_pre(count, __block, -1);
+			state.postDecrement = _$_.update(count, __block, -1);
+		}));"
+`;

package/tests/client/compiler/__snapshots__/compiler.typescript.test.ripple.snap

@@ -0,0 +1,22 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler > typescript > compiles TSInstantiationExpression 1`] = `
+"import * as _$_ from 'ripple/internal/client';
+
+function makeBox(value) {
+	return { value };
+}
+
+const makeStringBox = (makeBox);
+const stringBox = makeStringBox('abc');
+const ErrorMap = (Map);
+const errorMap = new ErrorMap();"
+`;
+
+exports[`compiler > typescript > removes type assertions from function parameters and leaves default values 1`] = `
+"import * as _$_ from 'ripple/internal/client';
+
+function getString(e = 'test') {
+	return e;
+}"
+`;

package/tests/client/compiler/compiler.assignments.test.ripple

@@ -0,0 +1,112 @@
+import { track, TrackedArray } from 'ripple';
+import { compile } from 'ripple/compiler';
+
+describe('compiler > assignments', () => {
+	it('properly handles JS assignments, reads and updates to array indices', () => {
+		const logs: (number | undefined)[] = [];
+
+		component App() {
+			let items: number[] = [];
+			let tracked_items = track<number[]>([]);
+			let items2 = new Array();
+			let items3 = new TrackedArray<number>();
+			let i = 0;
+
+			logs.push(items[0]);
+			logs.push(items[i]);
+			logs.push(@tracked_items[0]);
+			logs.push(@tracked_items[i]);
+			logs.push(items2[0]);
+			logs.push(items2[i]);
+			logs.push(items3[0]);
+			logs.push(items3[i]);
+
+			items[0] = 123;
+			items[i] = 123;
+			@tracked_items[0] = 123;
+			@tracked_items[i] = 123;
+			items2[0] = 123;
+			items2[i] = 123;
+			items3[0] = 123;
+			items3[i] = 123;
+
+			logs.push(items[0]);
+			logs.push(items[i]);
+			logs.push(@tracked_items[0]);
+			logs.push(@tracked_items[i]);
+			logs.push(items2[0]);
+			logs.push(items2[i]);
+			logs.push(items3[0]);
+			logs.push(items3[i]);
+
+			items[0]++;
+			items[i]++;
+			@tracked_items[0]++;
+			@tracked_items[i]++;
+			items2[0]++;
+			items2[i]++;
+			items3[0]++;
+			items3[i]++;
+
+			logs.push(items[0]);
+			logs.push(items[i]);
+			logs.push(@tracked_items[0]);
+			logs.push(@tracked_items[i]);
+			logs.push(items2[0]);
+			logs.push(items2[i]);
+			logs.push(items3[0]);
+			logs.push(items3[i]);
+
+			logs.push(--items[0]);
+			logs.push(--items[i]);
+			logs.push(--@tracked_items[0]);
+			logs.push(--@tracked_items[i]);
+			logs.push(--items2[0]);
+			logs.push(--items2[i]);
+			logs.push(--items3[0]);
+			logs.push(--items3[i]);
+		}
+
+		render(App);
+
+		expect(logs).toEqual([
+			undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined,
+			123, 123, 123, 123, 123, 123, 123, 123,
+			125, 125, 125, 125, 125, 125, 125, 125,
+			124, 123, 124, 123, 124, 123, 124, 123
+		]);
+	});
+
+	it('compiles tracked values in effect with assignment expression', () => {
+		const source = `component App() {
+let count = track(0);
+
+effect(() => {
+	state.count = @count;
+})
+}`;
+		const result = compile(source, 'test.ripple');
+		// Extract just the effect callback body
+		const effectMatch = result.js.code.match(/effect\(\(\) => \{([^}]+)\}\)/s);
+		expect(effectMatch?.[1].trim()).toMatchSnapshot();
+	});
+
+	it('compiles tracked values in effect with update expressions', () => {
+		const source = `component App() {
+let count = track(5);
+
+effect(() => {
+	untrack(() => {
+		state.preIncrement = ++@count;
+		state.postIncrement = @count++;
+		state.preDecrement = --@count;
+		state.postDecrement = @count--;
+	});
+})
+}`;
+		const result = compile(source, 'test.ripple');
+		// Extract just the effect callback body
+		const effectMatch = result.js.code.match(/effect\(\(\) => \{([\s\S]+?)\n\t\}\)\)/);
+		expect(effectMatch?.[1].trim()).toMatchSnapshot();
+	});
+});

package/tests/client/compiler/compiler.attributes.test.ripple

@@ -0,0 +1,95 @@
+import { parse, compile } from 'ripple/compiler';
+
+describe('compiler > attributes', () => {
+		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/compiler/compiler.basic.test.ripple

@@ -0,0 +1,203 @@
+import { parse, compile } from 'ripple/compiler';
+
+describe('compiler > basics', () => {
+	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;
+			let bar;
+			let baz;
+
+			foo = {};
+			foo = {'test': 0};
+			foo['abc'] = 123;
+
+			bar = { 'def': 456 };
+
+			baz = { 'ghi': 789 };
+			baz['jkl'] = 987;
+		}
+
+		render(App);
+	});
+
+	it('renders without crashing using < character', () => {
+	component App() {
+		function bar() {
+			for (let i = 0; i < 10; i++) {
+				// do nothing
+			}
+			const x = 1 < 1;
+		}
+
+		let x = 5 < 10
+
+		<div>{x}</div>
+	}
+
+		render(App);
+	});
+
+	it('renders lexical blocks without crashing', () => {
+		component App() {
+			<div>
+				const a = 1;
+				<div>
+					const b = 1;
+				</div>
+				<div>
+					const b = 1;
+				</div>
+			</div>
+			<div>
+				const a = 2;
+				<div>
+					const b = 1;
+				</div>
+			</div>
+		}
+
+		render(App);
+	});
+
+	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);
+	});
+
+	it('renders without crashing using object destructuring', () => {
+		component App() {
+			const obj = { a: 1, b: 2, c: 3 };
+			const { a, b, ...rest } = obj;
+
+			<div>
+				{'a '}{a} {'b '} {b} {'rest '} {JSON.stringify(rest)}
+
+				<div>
+
+				</div>
+			</div>
+		}
+
+		render(App);
+	});
+
+	it('renders without crashing using object destructuring #2', () => {
+		component App() {
+			const obj = { a: 1, b: 2, c: 3 };
+			const { a, b, ...rest } = obj;
+
+			{'a '}{a} {'b '} {b} {'rest '} {JSON.stringify(rest)}
+
+			<div>
+
+			</div>
+		}
+
+		render(App);
+	});
+
+	it('should not fail with random TS syntax', () => {
+		function tagFn() {
+			return null;
+		}
+
+		function Wrapper() {
+			return {
+				unwrap: function<T>() {
+					return null as unknown as T;
+				}
+			}
+		}
+
+		component App() {
+			let x: number[] = [] as number[];
+
+			const n = new Wrapper<number>().unwrap<string>();
+
+			const tagResult = tagFn`value`;
+
+			interface Node<T> {
+				value: T;
+			}
+
+			class Box<T> {
+				value: T;
+
+				method<T>(): T {
+				return this.value;
+				}
+			}
+
+			let flag = true;
+
+			const s = flag ? new Box<number>() : new Box<string>();
+		}
+
+		render(App);
+	});
+
+	it('compiles without needing semicolons between statements and JSX', () => {
+		const source = `export component App() {
+	<div>const code4 = 4
+
+	const code3 = 3
+		<div>
+			<div>
+				const code = 1
+			</div>
+			const code2 = 2
+		</div>
+	</div>
+}`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+	});
+});

package/tests/client/compiler/compiler.regex.test.ripple

@@ -0,0 +1,87 @@
+describe('compiler > regex', () => {
+	it('renders without crashing using regex literals in method calls', () => {
+		component App() {
+			let text = 'Hello <span>world</span> and <div>content</div>';
+
+			// Test various regex patterns in method calls that previously failed
+			let matchResult = text.match(/<span>/);
+			let replaceResult = text.replace(/<div>/g, '[DIV]');
+			let searchResult = text.search(/<span>/);
+
+			// Test regex literals in variable assignments (should work)
+			let spanRegex = /<span>/g;
+			let divRegex = /<div.*?>/;
+
+			// Test more complex regex patterns
+			let complexMatch = text.match(/<[^>]*>/g);
+			let htmlTags = text.replace(/<(\/*)(\w+)[^>]*>/g, '[$1$2]');
+
+			// Test edge cases with multiple angle brackets
+			let multiAngle = '<<test>> <span>content</span>'.match(/<span>/);
+
+			<div>
+				<span>{String(matchResult)}</span>
+				<span>{replaceResult}</span>
+				<span>{String(searchResult)}</span>
+				<span>{String(spanRegex)}</span>
+				<span>{String(divRegex)}</span>
+				<span>{String(complexMatch)}</span>
+				<span>{htmlTags}</span>
+				<span>{String(multiAngle)}</span>
+			</div>
+		}
+
+		render(App);
+
+		const matchResult = container.querySelectorAll('span')[0];
+		const replaceResult = container.querySelectorAll('span')[1];
+		const searchResult = container.querySelectorAll('span')[2];
+		const spanRegex = container.querySelectorAll('span')[3];
+		const divRegex = container.querySelectorAll('span')[4];
+		const complexMatch = container.querySelectorAll('span')[5];
+		const htmlTags = container.querySelectorAll('span')[6];
+		const multiAngle = container.querySelectorAll('span')[7];
+
+		expect(matchResult.textContent).toBe('<span>');
+		expect(replaceResult.textContent).toBe('Hello <span>world</span> and [DIV]content</div>');
+		expect(searchResult.textContent).toBe('6');
+		expect(spanRegex.textContent).toBe('/<span>/g');
+		expect(divRegex.textContent).toBe('/<div.*?>/');
+		expect(complexMatch.textContent).toBe('<span>,</span>,<div>,</div>');
+		expect(htmlTags.textContent).toBe('Hello [span]world[/span] and [div]content[/div]');
+		expect(multiAngle.textContent).toBe('<span>');
+	});
+
+	it('renders without crashing mixing regex and JSX syntax', () => {
+		component App() {
+			let htmlString = '<p>Paragraph</p><div>Content</div>';
+
+			// Mix of regex parsing and legitimate JSX
+			let paragraphs = htmlString.match(/<p[^>]*>.*?<\/p>/g);
+			let cleaned = htmlString.replace(/<\/?[^>]+>/g, '');
+			let splitArray = htmlString.split(/<\/?\w+>/g).filter(s => s.trim());
+
+			<div class='container'>
+				<span class='result'>{String(paragraphs)}</span>
+				<span class='cleaned'>{cleaned}</span>
+				<p>{'This is real JSX'}</p>
+				<div><span>
+					{'Split result: '}
+					{splitArray.join(', ')}
+				</span></div>
+			</div>
+		}
+
+		render(App);
+
+		const result = container.querySelector('.result');
+		const cleaned = container.querySelector('.cleaned');
+		const jsxParagraph = container.querySelector('p');
+		const splitResult = container.querySelector('.container > div > span');
+
+		expect(result.textContent).toBe('<p>Paragraph</p>');
+		expect(cleaned.textContent).toBe('ParagraphContent');
+		expect(jsxParagraph.textContent).toBe('This is real JSX');
+		expect(splitResult.textContent).toBe('Split result: Paragraph, Content');
+	});
+});

package/tests/client/compiler/compiler.typescript.test.ripple

@@ -0,0 +1,29 @@
+import { compile } from 'ripple/compiler';
+
+describe('compiler > typescript', () => {
+	it('compiles TSInstantiationExpression', () => {
+		const source =
+`function makeBox<T>(value: T) {
+	return { value };
+}
+const makeStringBox = makeBox<string>;
+const stringBox = makeStringBox('abc');
+const ErrorMap = Map<string, Error>;
+const errorMap = new ErrorMap();`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+
+		expect(result.js.code).toMatchSnapshot();
+	});
+
+	it('removes type assertions from function parameters and leaves default values', () => {
+		const source = `
+function getString(e: string = 'test') {
+	return e;
+}`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+
+		expect(result.js.code).toMatchSnapshot();
+	});
+});