ripple 0.3.13 → 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/basic/basic.errors.test.rsrx

@@ -1,5 +1,5 @@
 import { flushSync, track, untrack } from 'ripple';
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('basic client > errors', () => {
 	it('renders with error handling simulation', () => {

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

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('basic client > styling', () => {
 	it('renders with styling scoped to component', () => {

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

@@ -1,5 +1,5 @@
 import { RippleArray, effect, track, untrack } from 'ripple';
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 const EFFECT_BODY_REGEX = /_\$\_\.effect\(\(\) => \{([\s\S]*?)\n\t\}\);/;
 

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

@@ -1,4 +1,4 @@
-import { parse, compile } from 'ripple/compiler';
+import { parse, compile } from '@tsrx/ripple';
 
 describe('compiler > attributes', () => {
 	it('generates valid JavaScript for component props with hyphenated attributes', () => {

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

@@ -1,5 +1,5 @@
-import { parse, compile, compile_to_volar_mappings } from 'ripple/compiler';
-import { obfuscate_identifier } from 'ripple/compiler/internal/identifier/utils';
+import { parse, compile, compile_to_volar_mappings } from '@tsrx/ripple';
+import { obfuscateIdentifier } from '@tsrx/core';
 import type * as AST from 'estree';
 
 function count_occurrences(string: string, subString: string): number {
@@ -59,7 +59,7 @@ describe('compiler > basics', () => {
 		const explicit_text = elements[1].children[0] as AST.TextNode;
 
 		expect(elements).toHaveLength(2);
-		expect(expression.type).toBe('RippleExpression');
+		expect(expression.type).toBe('TSRXExpression');
 		expect((expression.expression as AST.Identifier).name).toBe('markup');
 		expect(explicit_text.type).toBe('Text');
 		expect((explicit_text.expression as AST.Identifier).name).toBe('markup');
@@ -321,15 +321,15 @@ describe('compiler > basics', () => {
 	// `;
 	// 			const result = compile_to_volar_mappings(source, 'test.ripple').code;
 
-	// 			expect(count_occurrences(result, obfuscate_identifier('RippleArray'))).toBe(2);
+	// 			expect(count_occurrences(result, obfuscateIdentifier('RippleArray'))).toBe(2);
 	// 			expect(count_occurrences(result, 'TA')).toBe(1);
-	// 			expect(count_occurrences(result, obfuscate_identifier('RippleObject'))).toBe(2);
+	// 			expect(count_occurrences(result, obfuscateIdentifier('RippleObject'))).toBe(2);
 	// 			expect(count_occurrences(result, 'TO')).toBe(1);
-	// 			expect(count_occurrences(result, obfuscate_identifier('RippleSet'))).toBe(2);
+	// 			expect(count_occurrences(result, obfuscateIdentifier('RippleSet'))).toBe(2);
 	// 			expect(count_occurrences(result, 'TS')).toBe(1);
-	// 			expect(count_occurrences(result, obfuscate_identifier('RippleMap'))).toBe(2);
+	// 			expect(count_occurrences(result, obfuscateIdentifier('RippleMap'))).toBe(2);
 	// 			expect(count_occurrences(result, 'TM')).toBe(1);
-	// 			expect(count_occurrences(result, obfuscate_identifier('createRefKey'))).toBe(2);
+	// 			expect(count_occurrences(result, obfuscateIdentifier('createRefKey'))).toBe(2);
 	// 			expect(count_occurrences(result, 'crk')).toBe(1);
 	// 		},
 	// 	);
@@ -347,11 +347,11 @@ describe('compiler > basics', () => {
 	// `;
 	// 		const result = compile_to_volar_mappings(source, 'test.ripple').code;
 
-	// 		expect(count_occurrences(result, obfuscate_identifier('RippleArray'))).toBe(2);
-	// 		expect(count_occurrences(result, obfuscate_identifier('RippleObject'))).toBe(2);
-	// 		expect(count_occurrences(result, obfuscate_identifier('RippleSet'))).toBe(2);
-	// 		expect(count_occurrences(result, obfuscate_identifier('RippleMap'))).toBe(2);
-	// 		expect(count_occurrences(result, obfuscate_identifier('createRefKey'))).toBe(2);
+	// 		expect(count_occurrences(result, obfuscateIdentifier('RippleArray'))).toBe(2);
+	// 		expect(count_occurrences(result, obfuscateIdentifier('RippleObject'))).toBe(2);
+	// 		expect(count_occurrences(result, obfuscateIdentifier('RippleSet'))).toBe(2);
+	// 		expect(count_occurrences(result, obfuscateIdentifier('RippleMap'))).toBe(2);
+	// 		expect(count_occurrences(result, obfuscateIdentifier('createRefKey'))).toBe(2);
 	// 	});
 
 	it('prints longhand tracked property values in to_ts output while preserving [\'#v\']', () => {
@@ -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/client/compiler/compiler.tracked-access.test.rsrx

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('Compiler: Tracked Object Direct Access Checks', () => {
 	it('should error on direct access to __v of a tracked object', () => {

package/tests/client/compiler/compiler.try-in-function.test.rsrx

@@ -1,4 +1,4 @@
-import { compile_to_volar_mappings } from 'ripple/compiler';
+import { compile_to_volar_mappings } from '@tsrx/ripple';
 
 function count_occurrences(string: string, sub_string: string): number {
 	let count = 0;

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

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('compiler > typescript', () => {
 	it('compiles TSInstantiationExpression', () => {

package/tests/client/css/global-additional-cases.test.rsrx

@@ -1,5 +1,5 @@
 import { track } from 'ripple';
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('CSS :global additional use cases', () => {
 	it('handles :global as modifier with dot notation', () => {

package/tests/client/css/global-advanced-selectors.test.rsrx

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('CSS :global with advanced selectors', () => {
 	it('handles :global with ::slotted()', () => {

package/tests/client/css/global-at-rules.test.rsrx

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('CSS :global with @media and @supports', () => {
 	it('handles :global inside @media queries', () => {

package/tests/client/css/global-basic.test.rsrx

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('CSS :global basic tests', () => {
 	it('applies global selector to all elements', () => {

package/tests/client/css/global-classes-ids.test.rsrx

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('CSS :global with classes and IDs', () => {
 	it('handles :global with single class', () => {

package/tests/client/css/global-combinators.test.rsrx

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('CSS :global with combinators', () => {
 	it('handles :global with child combinator', () => {

package/tests/client/css/global-complex-nesting.test.rsrx

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('CSS :global with complex nesting', () => {
 	it('handles :global block with nested selectors', () => {

package/tests/client/css/global-edge-cases.test.rsrx

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('CSS :global edge cases', () => {
 	it('handles multiple :global selectors in one rule', () => {

package/tests/client/css/global-keyframes.test.rsrx

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('CSS :global with keyframes', () => {
 	it('handles -global- prefix for keyframes', () => {

package/tests/client/css/global-nested.test.rsrx

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('CSS :global nested blocks', () => {
 	it('handles nested global blocks', () => {

package/tests/client/css/global-pseudo.test.rsrx

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('CSS :global with pseudo-classes', () => {
 	it('handles :global with :has()', () => {

package/tests/client/css/global-scoping.test.rsrx

@@ -1,4 +1,4 @@
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('CSS :global scoping verification', () => {
 	it('verifies scoped styles are isolated', () => {

package/tests/client/css/style-identifier.test.rsrx

@@ -1,5 +1,5 @@
 import { track } from 'ripple';
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('#style identifier', () => {
 	describe('basic usage with components', () => {

package/tests/client/return.test.rsrx

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { flushSync, track } from 'ripple';
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('returns in prohibited scopes', () => {
 	it('throws error when return is used in module scope', () => {

package/tests/hydration/build-components.js

@@ -4,7 +4,7 @@
  * Or used as vitest globalSetup
  */
 
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 import { readFileSync, writeFileSync, mkdirSync, readdirSync } from 'fs';
 import { join, basename } from 'path';
 import { fileURLToPath } from 'url';

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/tests/server/style-identifier.test.rsrx

@@ -1,5 +1,5 @@
 import { track } from 'ripple';
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 describe('#style identifier (server)', () => {
 	describe('basic usage with components', () => {

package/tests/setup-server.js

@@ -1,6 +1,6 @@
 import { expect } from 'vitest';
 import { render } from 'ripple/server';
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 import { parseHTML } from 'linkedom';
 
 globalThis.render = render;

package/tests/utils/compiler-compat-config.test.js

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { compile } from 'ripple/compiler';
+import { compile } from '@tsrx/ripple';
 
 const source = `
 component App() {

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,