ripple 0.2.115 → 0.2.118

package/tests/client/compiler.test.ripple

@@ -1,541 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, TrackedArray, track } from 'ripple';
-import { parse, compile } from 'ripple/compiler'
-
-describe('compiler success 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('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('render 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('properly handles JS assignments, reads and updates to array indices', () => {
-		const logs = [];
-
-		component App() {
-			let items = [];
-			let tracked_items = track([]);
-			let items2 = new Array();
-			let items3 = new TrackedArray();
-			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('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);
-	});
-
-	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"/);
-		});
-	});
-
-	describe('regex handling', () => {
-		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');
-		});
-	});
-
-	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();
-	});
-
-	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();
-	});
-
-	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' });
-	});
-});