ripple 0.3.17 → 0.3.19

package/tests/hydration/compiled/server/html.js

@@ -189,7 +189,7 @@ export function HtmlInChildren() {
 
 			const args = [
 				{
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 						_$_.output_push('<div');
 						_$_.output_push(' class="vp-doc"');
@@ -227,7 +227,7 @@ export function HtmlInChildrenWithSiblings() {
 
 			const args = [
 				{
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 						_$_.output_push('<h1');
 						_$_.output_push('>');
@@ -274,7 +274,7 @@ export function MultipleHtmlInChildren() {
 
 			const args = [
 				{
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 						_$_.output_push('<div');
 						_$_.output_push(' class="doc"');
@@ -364,7 +364,7 @@ export function HtmlWithCommentsInChildren() {
 
 			const args = [
 				{
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 						_$_.output_push('<div');
 						_$_.output_push(' class="vp-doc"');
@@ -570,7 +570,7 @@ export function HtmlWithServerData() {
 						{ href: '#features', text: 'Features' }
 					],
 
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 						_$_.output_push('<div');
 						_$_.output_push(' class="vp-doc"');
@@ -608,7 +608,7 @@ export function HtmlWithClientDefaults() {
 
 			const args = [
 				{
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 						_$_.output_push('<div');
 						_$_.output_push(' class="vp-doc"');
@@ -646,7 +646,7 @@ export function HtmlWithUndefinedContent() {
 
 			const args = [
 				{
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 						_$_.output_push('<div');
 						_$_.output_push(' class="vp-doc"');
@@ -797,7 +797,7 @@ export function HtmlAfterSwitchInChildren() {
 
 			const args = [
 				{
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 
 						{
@@ -806,7 +806,7 @@ export function HtmlAfterSwitchInChildren() {
 							const args = [
 								{
 									level: 1,
-									children: _$_.ripple_element(function render_children() {
+									children: _$_.tsrx_element(function render_children() {
 										_$_.push_component();
 										_$_.output_push('Title');
 										_$_.pop_component();
@@ -986,7 +986,7 @@ function SideNav({ currentPath }) {
 						const args = [
 							{
 								title: "Getting Started",
-								children: _$_.ripple_element(function render_children() {
+								children: _$_.tsrx_element(function render_children() {
 									_$_.push_component();
 
 									{
@@ -1038,7 +1038,7 @@ function SideNav({ currentPath }) {
 						const args = [
 							{
 								title: "Guide",
-								children: _$_.ripple_element(function render_children() {
+								children: _$_.tsrx_element(function render_children() {
 									_$_.push_component();
 
 									{
@@ -1281,7 +1281,7 @@ export function ArticleWithChildrenThenSibling() {
 
 				const args = [
 					{
-						children: _$_.ripple_element(function render_children() {
+						children: _$_.tsrx_element(function render_children() {
 							_$_.push_component();
 							_$_.output_push('<h1');
 							_$_.output_push('>');
@@ -1384,7 +1384,7 @@ export function ArticleWithHtmlChildThenSibling() {
 
 				const args = [
 					{
-						children: _$_.ripple_element(function render_children() {
+						children: _$_.tsrx_element(function render_children() {
 							_$_.push_component();
 							_$_.output_push('<div');
 							_$_.output_push(' class="doc-content"');
@@ -1519,7 +1519,7 @@ export function InlineArticleWithHtmlChild() {
 
 			const args = [
 				{
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 						_$_.output_push('<div');
 						_$_.output_push(' class="doc-content"');
@@ -1753,7 +1753,7 @@ export function DocsLayoutWithData() {
 				{
 					editPath: "docs/styling.md",
 					nextLink: { href: '/next', text: 'Next' },
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 						_$_.output_push('<div');
 						_$_.output_push(' class="doc-content"');
@@ -1791,7 +1791,7 @@ export function DocsLayoutWithoutData() {
 
 			const args = [
 				{
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 						_$_.output_push('<div');
 						_$_.output_push(' class="doc-content"');
@@ -2073,7 +2073,7 @@ export function DocsLayoutExactWithData() {
 						{ href: '#usage', text: 'Usage' }
 					],
 
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 						_$_.output_push('<div');
 						_$_.output_push(' class="doc-content"');
@@ -2119,7 +2119,7 @@ export function DocsLayoutExactWithoutData() {
 					prevLink,
 					nextLink,
 					toc,
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 						_$_.output_push('<div');
 						_$_.output_push(' class="doc-content"');
@@ -2285,7 +2285,7 @@ export function NestedTemplateInLayout() {
 			const args = [
 				{
 					data: doc,
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 						_$_.output_push('<div');
 						_$_.output_push(' class="doc-content"');

package/tests/hydration/compiled/server/if-children.js

@@ -74,7 +74,7 @@ export function TestIfWithChildren() {
 
 			const args = [
 				{
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 
 						{
@@ -250,7 +250,7 @@ export function TestIfWithSiblingsAndChildren() {
 
 			const args = [
 				{
-					children: _$_.ripple_element(function render_children() {
+					children: _$_.tsrx_element(function render_children() {
 						_$_.push_component();
 
 						{

package/tests/hydration/compiled/server/portal.js

@@ -27,7 +27,7 @@ export function SimplePortal() {
 				const args = [
 					{
 						target: typeof document !== 'undefined' ? document.body : null,
-						children: _$_.ripple_element(function render_children() {
+						children: _$_.tsrx_element(function render_children() {
 							_$_.push_component();
 							_$_.output_push('<div');
 							_$_.output_push(' class="portal-content"');
@@ -84,7 +84,7 @@ export function ConditionalPortal() {
 					const args = [
 						{
 							target: typeof document !== 'undefined' ? document.body : null,
-							children: _$_.ripple_element(function render_children() {
+							children: _$_.tsrx_element(function render_children() {
 								_$_.push_component();
 								_$_.output_push('<div');
 								_$_.output_push(' class="portal-content"');
@@ -139,7 +139,7 @@ export function PortalWithMainContent() {
 				const args = [
 					{
 						target: typeof document !== 'undefined' ? document.body : null,
-						children: _$_.ripple_element(function render_children() {
+						children: _$_.tsrx_element(function render_children() {
 							_$_.push_component();
 							_$_.output_push('<div');
 							_$_.output_push(' class="portal-content"');
@@ -209,7 +209,7 @@ export function NestedContentWithPortal() {
 				const args = [
 					{
 						target: typeof document !== 'undefined' ? document.body : null,
-						children: _$_.ripple_element(function render_children() {
+						children: _$_.tsrx_element(function render_children() {
 							_$_.push_component();
 							_$_.output_push('<div');
 							_$_.output_push(' class="portal-content"');

package/tests/hydration/components/{html-in-template.rsrx → html-in-template.tsrx}

@@ -1,5 +1,5 @@
 // Test case for hydration error with {html} inside template elements
-// Reproduces issue from website-new/src/pages/docs/comparison.ripple
+// Reproduces issue from website-new/src/pages/docs/comparison.tsrx
 
 export component SimpleTemplateHtml() {
 	const data = 'test data';

package/tests/server/__snapshots__/compiler.test.tsrx.snap

@@ -0,0 +1,95 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler server block tests > compiles server block with with only supported types 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+export const _$_server_$_ = (() => {
+	var _$_server_$_ = {};
+
+	function something() {
+		return 'unexported function';
+	}
+
+	_$_server_$_.fetchUser = async function fetchUser(id) {
+		const response = await fetch(\`/api/user/\${id}\`);
+		const data = await response.json();
+
+		return data;
+	};
+
+	const fetchUserAlias = fetchUser;
+	const AliasForFetchUserAlias = fetchUserAlias;
+
+	{
+		_$_server_$_.AnotherAlias = AliasForFetchUserAlias;
+	}
+
+	{
+		_$_server_$_.func = function test() {
+			return 'test';
+		};
+	}
+
+	{
+		_$_server_$_.func2 = function () {
+			return 'test';
+		};
+	}
+
+	{
+		_$_server_$_.func3 = () => {
+			return 'test';
+		};
+	}
+
+	{
+		_$_server_$_.fetchUserAlias = fetchUserAlias;
+		_$_server_$_.AliasForFetchUserAlias = AliasForFetchUserAlias;
+	}
+
+	return _$_server_$_;
+})();"
+`;
+
+exports[`compiler typescript tests > compiles TSInstantiationExpression 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+function makeBox(value) {
+	return { value };
+}
+
+const makeStringBox = (makeBox);
+const stringBox = makeStringBox('abc');
+const ErrorMap = (Map);
+const errorMap = new ErrorMap();"
+`;
+
+exports[`compiler typescript tests > removes class TypeScript syntax from JS output 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+class PrintEvent {
+	text;
+
+	constructor(text) {
+		this.text = text;
+	}
+}"
+`;
+
+exports[`compiler typescript tests > removes class extends type arguments from JS output 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+class StringMap extends Map {
+	constructor() {
+		super();
+	}
+}"
+`;
+
+exports[`compiler typescript tests > removes type assertions from function parameters and leaves default values 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+function getString(e = 'test') {
+	return e;
+}"
+`;

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

@@ -349,4 +349,52 @@ describe('basic server > components & composition', () => {
 		const { document } = parseHtml(body);
 		expect(document.querySelector('.card').textContent).toBe('explicit');
 	});
+
+	it('renders components declared inside composite element children', async () => {
+		component Wrapper(props: PropsWithChildren<{}>) {
+			<div class="wrapper">{props.children}</div>
+		}
+
+		component App() {
+			<Wrapper>
+				component Inner() {
+					<span class="inner">{'inner content'}</span>
+				}
+
+				<Inner />
+			</Wrapper>
+		}
+
+		const { body } = await render(App);
+		const { document } = parseHtml(body);
+		expect(document.querySelector('.wrapper .inner').textContent).toBe('inner content');
+	});
+
+	it('renders nested components declared inside composite children with prop passing', async () => {
+		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>
+		}
+
+		const { body } = await render(App);
+		const { document } = parseHtml(body);
+		expect(document.querySelector('.wrapper .child').textContent).toBe('Child Component: I am Z');
+		expect(document.querySelector('.wrapper .z').textContent).toBe('I am Z');
+	});
 });

package/tests/server/{compiler.test.rsrx → compiler.test.tsrx}

@@ -8,7 +8,7 @@ const stringBox = makeStringBox('abc');
 const ErrorMap = Map<string, Error>;
 const errorMap = new ErrorMap();`;
 
-		const result = compile(source, 'test.ripple', { mode: 'server' });
+		const result = compile(source, 'test.tsrx', { mode: 'server' });
 
 		expect(result.js.code).toMatchSnapshot();
 	});
@@ -19,7 +19,7 @@ function getString(e: string = 'test') {
 	return e;
 }`;
 
-		const result = compile(source, 'test.ripple', { mode: 'server' });
+		const result = compile(source, 'test.tsrx', { mode: 'server' });
 
 		expect(result.js.code).toMatchSnapshot();
 	});
@@ -35,7 +35,7 @@ class PrintEvent implements BaseEvent {
 	}
 }`;
 
-		const result = compile(source, 'test.ripple', { mode: 'server' });
+		const result = compile(source, 'test.tsrx', { mode: 'server' });
 
 		expect(result.js.code).not.toContain('implements');
 		expect(result.js.code).toMatchSnapshot();
@@ -48,7 +48,7 @@ class PrintEvent implements BaseEvent {
 	}
 }`;
 
-		const result = compile(source, 'test.ripple', { mode: 'server' });
+		const result = compile(source, 'test.tsrx', { mode: 'server' });
 
 		expect(result.js.code).not.toContain('Map<string, string>');
 		expect(result.js.code).toContain('class StringMap extends Map');
@@ -61,7 +61,7 @@ export component Layout({ children }) {
 		<div>{children}</div>
 }`;
 
-		expect(() => compile(source, 'test.ripple', { mode: 'server' })).not.toThrow();
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).not.toThrow();
 	});
 
 	it('throws error for interpolating props.children as text in SSR mode', () => {
@@ -70,7 +70,7 @@ export component Layout(props) {
 	<div>{props.children}</div>
 }`;
 
-		expect(() => compile(source, 'test.ripple', { mode: 'server' })).not.toThrow();
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).not.toThrow();
 	});
 
 	it('throws error for calling children as a function in SSR mode', () => {
@@ -79,7 +79,7 @@ export component Layout({ children }) {
 	{children()}
 }`;
 
-		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrow(
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrow(
 			'`children` cannot be called like a regular function. Render it with `{children}` or `{props.children}` instead.',
 		);
 	});
@@ -90,7 +90,7 @@ export component Layout(props) {
 	{props.children()}
 }`;
 
-		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrow(
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrow(
 			'`children` cannot be called like a regular function. Render it with `{children}` or `{props.children}` instead.',
 		);
 	});
@@ -110,11 +110,11 @@ export component App() {
 }
 `;
 
-		const result = compile(source, 'test.ripple', { mode: 'server' }).js.code;
+		const result = compile(source, 'test.tsrx', { 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: _$_.ripple_element(');
+		expect(result).toContain('children: _$_.tsrx_element(');
 	});
 });
 
@@ -153,7 +153,7 @@ describe('compiler server block tests', () => {
 	export { fetchUserAlias, AliasForFetchUserAlias };
 }`;
 
-		const result = compile(source, 'test.ripple', { mode: 'server' });
+		const result = compile(source, 'test.tsrx', { mode: 'server' });
 		expect(result.js.code).toMatchSnapshot();
 	});
 
@@ -165,7 +165,7 @@ describe('compiler server block tests', () => {
 		export const { fn1, fn2 } = obj;
 }`;
 
-		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrowError();
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrowError();
 	});
 
 	it('throws error for unsupported exported array pattern in server block', () => {
@@ -176,7 +176,7 @@ describe('compiler server block tests', () => {
 		export const [fnarr1, fnarr2] = arr;
 }`;
 
-		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrowError();
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrowError();
 	});
 
 	it('throws error for unsupported exported member expression via object in server block', () => {
@@ -187,7 +187,7 @@ describe('compiler server block tests', () => {
 		export const objProp = obj.fn1;
 }`;
 
-		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrowError();
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrowError();
 	});
 
 	it('throws error for unsupported exported member expression via array in server block', () => {
@@ -198,7 +198,7 @@ describe('compiler server block tests', () => {
 		export const arrIndex0 = arr[0];
 }`;
 
-		expect(() => compile(source, 'test.ripple', { mode: 'server' })).toThrowError();
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrowError();
 	});
 
 	it('wraps children in normalize_children for explicit children prop passed to component', () => {
@@ -214,7 +214,7 @@ export component App() {
 }
 `;
 
-		const result = compile(source, 'test.ripple', { mode: 'server' }).js.code;
+		const result = compile(source, 'test.tsrx', { mode: 'server' }).js.code;
 
 		expect(result).toContain('_$_.normalize_children(');
 	});
@@ -232,7 +232,7 @@ export component App() {
 }
 `;
 
-		const result = compile(source, 'test.ripple', { mode: 'server' }).js.code;
+		const result = compile(source, 'test.tsrx', { mode: 'server' }).js.code;
 
 		expect(result).toContain('...props');
 	});