ripple 0.3.17 → 0.3.18

package/tests/client/basic/__snapshots__/basic.rendering.test.tsrx.snap

@@ -0,0 +1,59 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic client > rendering & text > basic operations 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    5
+  </div>
+  <div>
+    2
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > rendering & text > renders semi-dynamic text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > rendering & text > renders simple JS expression logic correctly 1`] = `
+<div>
+  <div>
+    {"0":"Test"}
+  </div>
+  <div>
+    1
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > rendering & text > renders static text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > rendering & text > should handle lexical scopes correctly 1`] = `
+<div>
+  <section>
+    Nested scope variable
+    <!---->
+  </section>
+  
+</div>
+`;

package/tests/client/basic/{basic.components.test.rsrx → basic.components.test.tsrx}

@@ -496,7 +496,11 @@ describe('basic client > components & composition', () => {
 
 		component App() {
 			const extra = { id: '1', children: 'from spread' };
-			<Card children="explicit" {...extra} />
+			<Card
+				// @ts-expect-error children specified more than once
+				children="explicit"
+				{...extra}
+			/>
 		}
 
 		render(App);
@@ -516,4 +520,50 @@ describe('basic client > components & composition', () => {
 		render(App);
 		expect(container.querySelector('.card').textContent).toBe('explicit');
 	});
+
+	it('renders components declared inside composite element children', () => {
+		component Wrapper(props: PropsWithChildren<{}>) {
+			<div class="wrapper">{props.children}</div>
+		}
+
+		component App() {
+			<Wrapper>
+				component Inner() {
+					<span class="inner">{'inner content'}</span>
+				}
+
+				<Inner />
+			</Wrapper>
+		}
+
+		render(App);
+		expect(container.querySelector('.wrapper .inner').textContent).toBe('inner content');
+	});
+
+	it('renders nested components declared inside composite children with prop passing', () => {
+		component Wrapper(props: PropsWithChildren<{}>) {
+			<div class="wrapper">{props.children}</div>
+		}
+
+		component App() {
+			<Wrapper>
+				component Z() {
+					<div class="z">{'I am Z'}</div>
+				}
+
+				component Child(&{ Z }: { Z: Component }) {
+					<div class="child">
+						{'Child Component: '}
+						<Z />
+					</div>
+				}
+
+				<Child {Z} />
+			</Wrapper>
+		}
+
+		render(App);
+		expect(container.querySelector('.wrapper .child').textContent).toBe('Child Component: I am Z');
+		expect(container.querySelector('.wrapper .z').textContent).toBe('I am Z');
+	});
 });

package/tests/client/basic/{basic.errors.test.rsrx → basic.errors.test.tsrx}

@@ -47,7 +47,7 @@ describe('basic client > errors', () => {
 	<div></span>
 }`;
 		expect(() => {
-			compile(malformedCode, 'test.ripple');
+			compile(malformedCode, 'test.tsrx');
 		}).toThrow('Expected closing tag to match opening tag');
 	});
 
@@ -57,7 +57,7 @@ describe('basic client > errors', () => {
 }`;
 
 		expect(() => {
-			compile(malformedCode, 'test.ripple');
+			compile(malformedCode, 'test.tsrx');
 		}).toThrow('Unclosed tag');
 	});
 
@@ -69,7 +69,7 @@ describe('basic client > errors', () => {
 		`;
 
 		expect(() => {
-			compile(code, 'test.ripple');
+			compile(code, 'test.tsrx');
 		}).not.toThrow();
 	});
 
@@ -81,7 +81,7 @@ describe('basic client > errors', () => {
 		`;
 
 		expect(() => {
-			compile(code, 'test.ripple');
+			compile(code, 'test.tsrx');
 		}).not.toThrow();
 	});
 
@@ -93,7 +93,7 @@ describe('basic client > errors', () => {
 		`;
 
 		expect(() => {
-			compile(code, 'test.ripple');
+			compile(code, 'test.tsrx');
 		}).toThrow(
 			'`children` cannot be called like a regular function. Render it with `{children}` or `{props.children}` instead.',
 		);
@@ -107,7 +107,7 @@ describe('basic client > errors', () => {
 		`;
 
 		expect(() => {
-			compile(code, 'test.ripple');
+			compile(code, 'test.tsrx');
 		}).toThrow(
 			'`children` cannot be called like a regular function. Render it with `{children}` or `{props.children}` instead.',
 		);
@@ -194,7 +194,7 @@ describe('basic client > errors', () => {
 			}
 		`;
 		expect(() => {
-			compile(code, 'test.ripple', { mode: 'client' });
+			compile(code, 'test.tsrx', { mode: 'client' });
 		}).toThrow('`await` is not allowed inside client components');
 	});
 
@@ -209,7 +209,7 @@ describe('basic client > errors', () => {
 			}
 		`;
 		expect(() => {
-			compile(code, 'test.ripple');
+			compile(code, 'test.tsrx');
 		}).toThrow('While loops are not supported in components.');
 	});
 
@@ -224,7 +224,7 @@ describe('basic client > errors', () => {
 			}
 		`;
 		expect(() => {
-			compile(code, 'test.ripple');
+			compile(code, 'test.tsrx');
 		}).toThrow('Do...while loops are not supported in components.');
 	});
 
@@ -242,7 +242,7 @@ describe('basic client > errors', () => {
 			}
 		`;
 		expect(() => {
-			compile(code, 'test.ripple');
+			compile(code, 'test.tsrx');
 		}).not.toThrow();
 	});
 
@@ -260,7 +260,7 @@ describe('basic client > errors', () => {
 			}
 		`;
 		expect(() => {
-			compile(code, 'test.ripple');
+			compile(code, 'test.tsrx');
 		}).not.toThrow();
 	});
 
@@ -272,7 +272,7 @@ describe('basic client > errors', () => {
 			}
 		`;
 		expect(() => {
-			compile(code, 'test.ripple');
+			compile(code, 'test.tsrx');
 		}).toThrow('identifiers starting with "_$_" are reserved');
 	});
 });

package/tests/client/basic/{basic.styling.test.rsrx → basic.styling.test.tsrx}

@@ -56,7 +56,7 @@ describe('basic client > styling', () => {
 			</style>
 		}`;
 
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 		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/compiler/__snapshots__/compiler.assignments.test.tsrx.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(lazy);"`;
+
+exports[`compiler > assignments > compiles tracked values in effect with update expressions 1`] = `
+"_$_.untrack(() => {
+			state.preIncrement = _$_.update_pre(lazy);
+			state.postIncrement = _$_.update(lazy);
+			state.preDecrement = _$_.update_pre(lazy, -1);
+			state.postDecrement = _$_.update(lazy, -1);
+		});"
+`;

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

@@ -0,0 +1,46 @@
+// 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 class TypeScript syntax from JS output 1`] = `
+"import * as _$_ from 'ripple/internal/client';
+
+class PrintEvent {
+	text;
+
+	constructor(text) {
+		this.text = text;
+	}
+}"
+`;
+
+exports[`compiler > typescript > removes class extends type arguments from JS output 1`] = `
+"import * as _$_ from 'ripple/internal/client';
+
+class StringMap extends Map {
+	constructor() {
+		var __block = _$_.scope();
+
+		super();
+	}
+}"
+`;
+
+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.rsrx → compiler.assignments.test.tsrx}

@@ -116,7 +116,7 @@ component App() {
 		state.count = count;
 	});
 }`;
-		const result = compile(source, 'test.ripple');
+		const result = compile(source, 'test.tsrx');
 		const effect_match = result.js.code.match(EFFECT_BODY_REGEX);
 		expect(effect_match?.[1].trim()).toMatchSnapshot();
 	});
@@ -135,7 +135,7 @@ component App() {
 		});
 	});
 }`;
-		const result = compile(source, 'test.ripple');
+		const result = compile(source, 'test.tsrx');
 		const effect_match = result.js.code.match(EFFECT_BODY_REGEX);
 		expect(effect_match?.[1].trim()).toMatchSnapshot();
 	});

package/tests/client/compiler/{compiler.attributes.test.rsrx → compiler.attributes.test.tsrx}

@@ -11,7 +11,7 @@ describe('compiler > attributes', () => {
 				<Child data-scope="test" aria-label="accessible" class="valid" />
 			}`;
 
-		const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
 		// Should contain properly quoted hyphenated properties and unquoted valid identifiers
 		expect(result.js.code).toMatch(/'data-scope': "test"/);
@@ -32,7 +32,7 @@ describe('compiler > attributes', () => {
 				component Child(props) { <div /> }
 				export default component App() { <Child ${attr} /> }`;
 
-			const result = compile(source, 'test.ripple', { mode: 'client' });
+			const result = compile(source, 'test.tsrx', { mode: 'client' });
 			expect(result.js.code).toMatch(expected);
 		});
 	});
@@ -54,7 +54,7 @@ describe('compiler > attributes', () => {
 				/>
 			}`;
 
-		const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
 		// Valid identifiers should not be quoted
 		expect(result.js.code).toMatch(/validProp: "valid"/);
@@ -77,7 +77,7 @@ describe('compiler > attributes', () => {
 				<Child data-scope="test" />
 			}`;
 
-		const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
 		// Extract the props object from the generated code and test it's valid JavaScript
 		const match = result.js.code.match(/Child\([^,]+,\s*(\{[^}]+\})/);

package/tests/client/compiler/{compiler.basic.test.rsrx → compiler.basic.test.tsrx}

@@ -64,7 +64,7 @@ describe('compiler > basics', () => {
 		expect(explicit_text.type).toBe('Text');
 		expect((explicit_text.expression as AST.Identifier).name).toBe('markup');
 
-		const { js } = compile(source, 'text-directive.ripple', { mode: 'client' });
+		const { js } = compile(source, 'text-directive.tsrx', { mode: 'client' });
 		expect(js.code).not.toContain('_$_.html');
 
 		const invalid_source = `export component App() {
@@ -262,7 +262,7 @@ describe('compiler > basics', () => {
 	</div>
 }`;
 
-		const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.tsrx', { mode: 'client' });
 	});
 
 	it('calculates fragment hop count after return-guard grouping', () => {
@@ -275,7 +275,7 @@ describe('compiler > basics', () => {
 	<div class="b">{'b'}</div>
 }`;
 
-		const { js } = compile(source, 'grouped-count.ripple', { mode: 'client' });
+		const { js } = compile(source, 'grouped-count.tsrx', { mode: 'client' });
 
 		expect(js.code).toMatch(/_\$_\.template\(`<!><!>`,\s*1,\s*2\)/);
 		expect(js.code).not.toMatch(/_\$_\.template\(`<!><!>`,\s*1,\s*3\)/);
@@ -295,7 +295,7 @@ describe('compiler > basics', () => {
 	// 	<div {ref () => {}} />
 	// }
 	// `;
-	// 			const result = compile_to_volar_mappings(source, 'test.ripple').code;
+	// 			const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 	// 			expect(count_occurrences(result, 'RippleArray')).toBe(1);
 	// 			expect(count_occurrences(result, 'RippleObject')).toBe(1);
@@ -319,7 +319,7 @@ describe('compiler > basics', () => {
 	// 	<div {ref () => {}} />
 	// }
 	// `;
-	// 			const result = compile_to_volar_mappings(source, 'test.ripple').code;
+	// 			const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 	// 			expect(count_occurrences(result, obfuscateIdentifier('RippleArray'))).toBe(2);
 	// 			expect(count_occurrences(result, 'TA')).toBe(1);
@@ -345,7 +345,7 @@ describe('compiler > basics', () => {
 	// 	<div {ref () => {}} />
 	// }
 	// `;
-	// 		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+	// 		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 	// 		expect(count_occurrences(result, obfuscateIdentifier('RippleArray'))).toBe(2);
 	// 		expect(count_occurrences(result, obfuscateIdentifier('RippleObject'))).toBe(2);
@@ -369,7 +369,7 @@ component App() {
 }
 `;
 
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(result).toMatch(/value:\s*value\.value/);
 	});
@@ -382,7 +382,7 @@ component App() {
 	const x = value;
 }
 `;
-		const track_result = compile_to_volar_mappings(track_source, 'test.ripple').code;
+		const track_result = compile_to_volar_mappings(track_source, 'test.tsrx').code;
 		expect(track_result).toContain('let [value, ...rest] = track(0);');
 		expect(track_result).toContain('const x = value;');
 		expect(track_result).not.toContain('let lazy = track(0)');
@@ -399,7 +399,7 @@ function use_nested({ value: &[count, tracked] }: { value: Tracked<number> }) {
 	return tracked;
 }
 `;
-		const { js } = compile(source, 'tracked-nested-lazy.ripple', { mode: 'client' });
+		const { js } = compile(source, 'tracked-nested-lazy.tsrx', { mode: 'client' });
 
 		// Nested lazy array should still use tracked tuple fast path from outer annotation.
 		expect(js.code).toContain('_$_.update(');
@@ -415,7 +415,7 @@ function use_tuple_rest({ value: [head, &[count, tracked]] }: { value: [number,
 	return tracked;
 }
 `;
-		const { js } = compile(source, 'tracked-nested-lazy-tuple-rest.ripple', { mode: 'client' });
+		const { js } = compile(source, 'tracked-nested-lazy-tuple-rest.tsrx', { mode: 'client' });
 
 		// Tuple rest element access should resolve to Tracked<number>, not Tracked<number>[].
 		expect(js.code).toContain('_$_.update(');
@@ -437,7 +437,7 @@ export component App(props: Props) {
 }
 `;
 
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(result).toContain('extends PolymorphicProps<\'div\'>');
 	});
@@ -460,7 +460,7 @@ export component App() {
 }
 `;
 
-		expect(() => compile_to_volar_mappings(source, 'test.ripple')).not.toThrow();
+		expect(() => compile_to_volar_mappings(source, 'test.tsrx')).not.toThrow();
 	});
 
 	it('should not error on having js below markup in the same scope', () => {
@@ -483,10 +483,10 @@ export component App() {
 	<div>{test}</div>
 }
 `;
-		expect(() => compile(code, 'test.ripple')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
-	it('rejects component declarations inside composite children', () => {
+	it('allows component declarations inside composite children', () => {
 		const source = `
 export component App() {
 	<ark.div class="host-class" data-value="42">
@@ -497,8 +497,22 @@ export component App() {
 }
 `;
 
-		expect(() => compile_to_volar_mappings(source, 'test.ripple')).toThrow(
-			/Component declarations cannot be used inside composite component children/,
+		expect(() => compile_to_volar_mappings(source, 'test.tsrx')).not.toThrow();
+	});
+
+	it('rejects parent element attributes referencing child-declared components', () => {
+		const source = `
+export component App() {
+	<Test {Z}>
+		component Z() {
+			<div>{'hello'}</div>
+		}
+	</Test>
+}
+`;
+
+		expect(() => compile(source, 'test.tsrx')).toThrow(
+			/Cannot use component 'Z' as a prop on its parent element/,
 		);
 	});
 
@@ -512,7 +526,7 @@ export component App() {
 	<ark.div class="host-class" data-value="42" {asChild} />
 }
 `;
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(result).toContain('<ark.div class="host-class" data-value="42" asChild={asChild}');
 		expect(result).not.toContain('children={() =>');
@@ -533,11 +547,11 @@ export component App() {
 }
 `;
 
-		const result = compile(source, 'test.ripple', { mode: 'client' }).js.code;
+		const result = compile(source, 'test.tsrx', { mode: 'client' }).js.code;
 
 		// Template children should take precedence - explicit children prop should be removed
 		expect((result.match(/children:/g) || []).length).toBe(1);
-		expect(result).toContain('children: _$_.ripple_element(');
+		expect(result).toContain('children: _$_.tsrx_element(');
 	});
 
 	it('should not error on `this` MemberExpression with a UpdateExpression', () => {
@@ -554,7 +568,7 @@ export component App() {
 	<div>{test.count}</div>
 }
 `;
-		expect(() => compile(code, 'test.ripple')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
 	it('should inject __block for track() calls inside class constructors', () => {
@@ -573,7 +587,7 @@ export component App() {
 	<div>{store.count}</div>
 }
 `;
-		const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.tsrx', { mode: 'client' });
 		const code = result.js.code;
 
 		// The constructor's compiled output should contain __block = _$_.scope()
@@ -611,11 +625,11 @@ export component App() {
 }
 `;
 
-		expect(() => compile(source, 'test.ripple')).toThrow(
+		expect(() => compile(source, 'test.tsrx')).toThrow(
 			'Identifier \'test\' has already been declared',
 		);
 
-		const result = compile_to_volar_mappings(source, 'test.ripple', { loose: true });
+		const result = compile_to_volar_mappings(source, 'test.tsrx', { loose: true });
 
 		expect(
 			result.errors.some(
@@ -629,7 +643,7 @@ export component App() {
 	<tsx:react>1
 }`;
 
-		expect(() => compile(source, 'test.ripple')).toThrow(
+		expect(() => compile(source, 'test.tsrx')).toThrow(
 			'Unclosed tag \'<tsx:react>\'. Expected \'</tsx:react>\' before end of component.',
 		);
 	});
@@ -639,9 +653,9 @@ export component App() {
 	<tsx:react>1
 }`;
 
-		expect(() => compile_to_volar_mappings(source, 'test.ripple', { loose: true })).not.toThrow();
+		expect(() => compile_to_volar_mappings(source, 'test.tsrx', { loose: true })).not.toThrow();
 
-		const result = compile_to_volar_mappings(source, 'test.ripple', { loose: true });
+		const result = compile_to_volar_mappings(source, 'test.tsrx', { loose: true });
 		expect(result.errors).toEqual([]);
 	});
 
@@ -649,9 +663,9 @@ export component App() {
 		const source = `class StringMap extends Map<string, string> {}
 export component App() {}`;
 
-		expect(() => compile_to_volar_mappings(source, 'test.ripple', { loose: true })).not.toThrow();
+		expect(() => compile_to_volar_mappings(source, 'test.tsrx', { loose: true })).not.toThrow();
 
-		const result = compile_to_volar_mappings(source, 'test.ripple', { loose: true }).code;
+		const result = compile_to_volar_mappings(source, 'test.tsrx', { loose: true }).code;
 
 		expect(result).toContain('class StringMap extends Map<string, string> {}');
 	});
@@ -669,7 +683,7 @@ export component App() {
 }
 `;
 
-		const result = compile(source, 'test.ripple', { mode: 'client' }).js.code;
+		const result = compile(source, 'test.tsrx', { mode: 'client' }).js.code;
 
 		expect(result).toContain('_$_.normalize_children(');
 	});
@@ -687,7 +701,7 @@ export component App() {
 }
 `;
 
-		const result = compile(source, 'test.ripple', { mode: 'client' }).js.code;
+		const result = compile(source, 'test.tsrx', { mode: 'client' }).js.code;
 
 		expect(result).toContain('_$_.spread_props(');
 	});