ripple 0.3.14 → 0.3.15

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # ripple
 
+## 0.3.15
+
+### Patch Changes
+
+- [`a14097a`](https://github.com/Ripple-TS/ripple/commit/a14097a688ad85c236a6619cef527c78787ab367)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Fix children prop precedence
+  when invoking components so that template children always win over an explicit
+  `children=` attribute, while still respecting JSX-like ordering between explicit
+  props and spreads when no template children are present.
+
+- Updated dependencies
+  [[`a14097a`](https://github.com/Ripple-TS/ripple/commit/a14097a688ad85c236a6619cef527c78787ab367)]:
+  - ripple@0.3.15
+
 ## 0.3.14
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -83,9 +83,9 @@
     "@volar/language-core": "~2.4.28",
     "vscode-languageserver-types": "^3.17.5",
     "@tsrx/core": "0.0.2",
-    "@tsrx/ripple": "0.0.2"
+    "@tsrx/ripple": "0.0.3"
   },
   "peerDependencies": {
-    "ripple": "0.3.14"
+    "ripple": "0.3.15"
   }
 }

package/tests/client/basic/basic.components.test.rsrx

@@ -1,6 +1,5 @@
 import type {
 	Tracked,
-	Props,
 	PropsWithChildren,
 	PropsWithExtras,
 	Component,
@@ -414,4 +413,107 @@ describe('basic client > components & composition', () => {
 			button.click();
 		}).not.toThrow();
 	});
+
+	it('renders explicit children prop without spread', () => {
+		component Card(props: PropsWithChildren<{}>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			<Card children="fallback text" />
+		}
+
+		render(App);
+		expect(container.querySelector('.card').textContent).toBe('fallback text');
+	});
+
+	it('renders explicit children before spread', () => {
+		component Card(props: PropsWithChildren<{ id: string }>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			const extra = { id: '1' };
+			<Card children="fallback text" {...extra} />
+		}
+
+		render(App);
+		expect(container.querySelector('.card').textContent).toBe('fallback text');
+	});
+
+	it('renders spread before explicit children', () => {
+		component Card(props: PropsWithChildren<{ id: string }>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			const extra = { id: '1' };
+			<Card {...extra} children="fallback text" />
+		}
+
+		render(App);
+		expect(container.querySelector('.card').textContent).toBe('fallback text');
+	});
+
+	it('template children override explicit children before spread', () => {
+		component Card(props: PropsWithChildren<{ id: string }>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			const extra = { id: '1' };
+			<Card children="fallback text" {...extra}>
+				<span>{'template content'}</span>
+			</Card>
+		}
+
+		render(App);
+		expect(container.querySelector('.card span').textContent).toBe('template content');
+		expect(container.querySelector('.card').textContent).toBe('template content');
+	});
+
+	it('template children override explicit children after spread', () => {
+		component Card(props: PropsWithChildren<{ id: string }>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			const extra = { id: '1' };
+			<Card {...extra} children="fallback text">
+				<span>{'template content'}</span>
+			</Card>
+		}
+
+		render(App);
+		expect(container.querySelector('.card span').textContent).toBe('template content');
+		expect(container.querySelector('.card').textContent).toBe('template content');
+	});
+
+	it('spread can override explicit children when no template children', () => {
+		component Card(props: PropsWithChildren<{ id: string }>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			const extra = { id: '1', children: 'from spread' };
+			<Card children="explicit" {...extra} />
+		}
+
+		render(App);
+		expect(container.querySelector('.card').textContent).toBe('from spread');
+	});
+
+	it('explicit children overrides spread children when it comes after', () => {
+		component Card(props: PropsWithChildren<{ id: string }>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			const extra = { id: '1', children: 'from spread' };
+			<Card {...extra} children="explicit" />
+		}
+
+		render(App);
+		expect(container.querySelector('.card').textContent).toBe('explicit');
+	});
 });

package/tests/client/compiler/compiler.basic.test.rsrx

@@ -535,8 +535,9 @@ export component App() {
 
 		const result = compile(source, 'test.ripple', { 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: _$_.normalize_children(fallback) ?? _$_.ripple_element(');
+		expect(result).toContain('children: _$_.ripple_element(');
 	});
 
 	it('should not error on `this` MemberExpression with a UpdateExpression', () => {
@@ -654,4 +655,40 @@ export component App() {}`;
 
 		expect(result).toContain('class StringMap extends Map<string, string> {}');
 	});
+
+	it('wraps children in normalize_children for explicit children prop passed to component', () => {
+		const source = `
+component Card(props) {
+	<div>{props.children}</div>
+}
+
+export component App() {
+	const content = 'hello';
+
+	<Card children={content} />
+}
+`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' }).js.code;
+
+		expect(result).toContain('_$_.normalize_children(');
+	});
+
+	it('uses spread_props for spreads that may contain children', () => {
+		const source = `
+component Card(props) {
+	<div>{props.children}</div>
+}
+
+export component App() {
+	const props = { children: 'hello' };
+
+	<Card {...props} />
+}
+`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' }).js.code;
+
+		expect(result).toContain('_$_.spread_props(');
+	});
 });

package/tests/server/basic.components.test.rsrx

@@ -235,4 +235,118 @@ describe('basic server > components & composition', () => {
 
 		expect(document.querySelector('div')).toBeNull();
 	});
+
+	it('renders explicit children prop without spread', async () => {
+		component Card(props: PropsWithChildren<{}>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			<Card children="fallback text" />
+		}
+
+		const { body } = await render(App);
+		const { document } = parseHtml(body);
+		expect(document.querySelector('.card').textContent).toBe('fallback text');
+	});
+
+	it('renders explicit children before spread', async () => {
+		component Card(props: PropsWithChildren<{ id: string }>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			const extra = { id: '1' };
+			<Card children="fallback text" {...extra} />
+		}
+
+		const { body } = await render(App);
+		const { document } = parseHtml(body);
+		expect(document.querySelector('.card').textContent).toBe('fallback text');
+	});
+
+	it('renders spread before explicit children', async () => {
+		component Card(props: PropsWithChildren<{ id: string }>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			const extra = { id: '1' };
+			<Card {...extra} children="fallback text" />
+		}
+
+		const { body } = await render(App);
+		const { document } = parseHtml(body);
+		expect(document.querySelector('.card').textContent).toBe('fallback text');
+	});
+
+	it('template children override explicit children before spread', async () => {
+		component Card(props: PropsWithChildren<{ id: string }>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			const extra = { id: '1' };
+			<Card children="fallback text" {...extra}>
+				<span>{'template content'}</span>
+			</Card>
+		}
+
+		const { body } = await render(App);
+		const { document } = parseHtml(body);
+		expect(document.querySelector('.card span').textContent).toBe('template content');
+		expect(document.querySelector('.card').textContent).toBe('template content');
+	});
+
+	it('template children override explicit children after spread', async () => {
+		component Card(props: PropsWithChildren<{ id: string }>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			const extra = { id: '1' };
+			<Card {...extra} children="fallback text">
+				<span>{'template content'}</span>
+			</Card>
+		}
+
+		const { body } = await render(App);
+		const { document } = parseHtml(body);
+		expect(document.querySelector('.card span').textContent).toBe('template content');
+		expect(document.querySelector('.card').textContent).toBe('template content');
+	});
+
+	it('spread can override explicit children when no template children', async () => {
+		component Card(props: PropsWithChildren<{ id: string }>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			const extra = { id: '1', children: 'from spread' };
+			<Card
+				// @ts-ignore
+				children="explicit"
+				{...extra}
+			/>
+		}
+
+		const { body } = await render(App);
+		const { document } = parseHtml(body);
+		expect(document.querySelector('.card').textContent).toBe('from spread');
+	});
+
+	it('explicit children overrides spread children when it comes after', async () => {
+		component Card(props: PropsWithChildren<{ id: string }>) {
+			<div class="card">{props.children}</div>
+		}
+
+		component App() {
+			const extra = { id: '1', children: 'from spread' };
+			<Card {...extra} children="explicit" />
+		}
+
+		const { body } = await render(App);
+		const { document } = parseHtml(body);
+		expect(document.querySelector('.card').textContent).toBe('explicit');
+	});
 });

package/tests/server/compiler.test.rsrx

@@ -112,8 +112,9 @@ export component App() {
 
 		const result = compile(source, 'test.ripple', { mode: 'server' }).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: _$_.normalize_children(fallback) ?? _$_.ripple_element(');
+		expect(result).toContain('children: _$_.ripple_element(');
 	});
 });
 
@@ -199,4 +200,40 @@ describe('compiler server block tests', () => {
 
 		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrowError();
 	});
+
+	it('wraps children in normalize_children for explicit children prop passed to component', () => {
+		const source = `
+component Card(props) {
+	<div>{props.children}</div>
+}
+
+export component App() {
+	const content = 'hello';
+
+	<Card children={content} />
+}
+`;
+
+		const result = compile(source, 'test.ripple', { mode: 'server' }).js.code;
+
+		expect(result).toContain('_$_.normalize_children(');
+	});
+
+	it('passes spread through to component when spread may contain children', () => {
+		const source = `
+component Card(props) {
+	<div>{props.children}</div>
+}
+
+export component App() {
+	const props = { children: 'hello' };
+
+	<Card {...props} />
+}
+`;
+
+		const result = compile(source, 'test.ripple', { mode: 'server' }).js.code;
+
+		expect(result).toContain('...props');
+	});
 });

package/types/index.d.ts

@@ -8,7 +8,7 @@ export type RippleElement = {
 };
 
 /** Type for implicit children fragments rendered with `{children}`. */
-export type Children = RippleElement;
+export type Children = RippleElement | Component | string | number | boolean | null | undefined;
 
 export function mount(
 	component: Component,