ripple 0.3.80 → 0.3.82

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # ripple
 
+## 0.3.82
+
+### Patch Changes
+
+- [`67f3794`](https://github.com/Ripple-TS/ripple/commit/67f3794d2f1ffd55dd23a47327d925d9a76a4171)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Accept a component function
+  as the `children` prop in `mount()` and `hydrate()`. Compiled component call
+  sites normalize `children` via `normalize_children`, but props passed through
+  the mount options skipped that step, so a plain component function would be
+  rendered as text. The same normalization is now applied to `options.props`,
+  which lets bootstrap code hydrate a layout with its page as `children` without
+  reaching into runtime internals.
+- Updated dependencies
+  [[`b104604`](https://github.com/Ripple-TS/ripple/commit/b10460473fec0ee68b4963cbc2a3d9d5bb3bc633)]:
+  - @tsrx/core@0.1.30
+  - @tsrx/ripple@0.1.30
+
+## 0.3.81
+
+### Patch Changes
+
+- Updated dependencies
+  [[`67de047`](https://github.com/Ripple-TS/ripple/commit/67de047d103f39673b25910e1a97760278820999),
+  [`3b6fb73`](https://github.com/Ripple-TS/ripple/commit/3b6fb73170d4ad6a383befdda951ce0da4fcbb46),
+  [`1c645c8`](https://github.com/Ripple-TS/ripple/commit/1c645c8f854df23bb1271b3402d1885616b525cd),
+  [`b1256fd`](https://github.com/Ripple-TS/ripple/commit/b1256fdb5bf279ee7dd20bf1a71dcfccc47e279c)]:
+  - @tsrx/core@0.1.29
+  - @tsrx/ripple@0.1.29
+
 ## 0.3.80
 
 ### 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.80",
+  "version": "0.3.82",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -67,15 +67,14 @@
     "#client": "./src/runtime/internal/client/types.d.ts",
     "#client/constants": "./src/internal/client/constants.js",
     "#server": "./src/runtime/internal/server/types.d.ts",
-    "#public": "./types/index.d.ts",
-    "#helpers": "./src/helpers.d.ts"
+    "#public": "./types/index.d.ts"
   },
   "dependencies": {
     "clsx": "^2.1.1",
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "0.1.28",
-    "@tsrx/ripple": "0.1.28"
+    "@tsrx/core": "0.1.30",
+    "@tsrx/ripple": "0.1.30"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/jsx-runtime.d.ts

@@ -1,5 +1,5 @@
 import type { AddEventObject, FragmentProps, RefKey, RefValue, TSRXElement } from '#public';
-import type { Nullable } from '#helpers';
+import type { Nullable } from '@tsrx/core/types/helpers';
 export type { RefValue } from '#public';
 
 /**

package/src/runtime/index-client.js

@@ -11,6 +11,7 @@ import { render_component } from './internal/client/component.js';
 import { create_anchor } from './internal/client/utils.js';
 import { try_block } from './internal/client/try.js';
 import { remove_ssr_css } from './internal/client/css.js';
+import { normalize_children } from './element.js';
 import {
 	clear_track_hash_reference,
 	hydrate_node,
@@ -57,6 +58,22 @@ function render_root_boundary(anchor, render_content, boundary) {
 	);
 }
 
+/**
+ * Apply the same children normalization that compiled component call sites
+ * get, so `mount`/`hydrate` accept a component function as the `children`
+ * prop.
+ *
+ * @param {Record<string, any> | undefined} props
+ * @returns {Record<string, any>}
+ */
+function normalize_props(props) {
+	if (props?.children != null) {
+		return { ...props, children: normalize_children(props.children) };
+	}
+
+	return props || {};
+}
+
 /**
  * @param {Function} component
  * @param {{ props?: Record<string, any>, target: HTMLElement, rootBoundary?: RootBoundaryOptions }} options
@@ -66,7 +83,7 @@ export function mount(component, options) {
 	init_operations();
 	remove_ssr_css();
 
-	const props = options.props || {};
+	const props = normalize_props(options.props);
 	const target = options.target;
 	const anchor = create_anchor();
 
@@ -104,7 +121,7 @@ export function hydrate(component, options) {
 	init_operations();
 	remove_ssr_css();
 
-	const props = options.props || {};
+	const props = normalize_props(options.props);
 	const target = options.target;
 	const was_hydrating = hydrating;
 	const previous_hydrate_node = hydrate_node;

package/src/runtime/internal/server/index.js

@@ -1,6 +1,6 @@
 /**
  * @import { Component, Dependency, Block, TryBlockWithCatch } from '#server';
- * @import { NestedArray } from '#helpers';
+ * @import { NestedArray } from '@tsrx/core/types/helpers';
  * @import { Props } from '#public';
  * @import { RenderResult, BaseRenderOptions, RenderStreamResult, Stream, StreamSink } from 'ripple/server';
  */

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

@@ -44,15 +44,15 @@ describe('compiler > basics', () => {
 		const style3 = 'div {color: green }';
 
 		let input = source.replace('__STYLE__', style1);
-		let ast = parse(input);
+		let ast = parse(input, 'App.tsrx');
 		expect(get_returned_tsrx(ast.body[0]).children.at(-1).children[0].source).toEqual(style1);
 
 		input = source.replace('__STYLE__', style2);
-		ast = parse(input);
+		ast = parse(input, 'App.tsrx');
 		expect(get_returned_tsrx(ast.body[0]).children.at(-1).children[0].source).toEqual(style2);
 
 		input = source.replace('__STYLE__', style3);
-		ast = parse(input);
+		ast = parse(input, 'App.tsrx');
 		expect(get_returned_tsrx(ast.body[0]).children.at(-1).children[0].source).toEqual(style3);
 	});
 
@@ -67,7 +67,7 @@ describe('compiler > basics', () => {
 	</>
 		}`;
 
-		const ast = parse(source);
+		const ast = parse(source, 'App.tsrx');
 		const elements = get_returned_tsrx(ast.body[0]).children.filter(
 			(node: AST.Node) => node.type === 'Element',
 		) as AST.Element[];
@@ -89,7 +89,7 @@ describe('compiler > basics', () => {
 	<div>{text markup}</div>
 		}`;
 
-		expect(() => parse(invalid_source)).toThrow();
+		expect(() => parse(invalid_source, 'App.tsrx')).toThrow();
 	});
 
 	it('optimizes string-shaped expressions as text nodes', () => {
@@ -192,7 +192,7 @@ export function App() @{
 				</>
 		}`;
 
-		const ast = parse(source);
+		const ast = parse(source, 'App.tsrx');
 		const declaration = (ast.body[0] as AST.VariableDeclaration).declarations[0];
 		const fragment = get_returned_tsrx(declaration) as any;
 
@@ -211,7 +211,7 @@ export function App() @{
 				</>
 		}`;
 
-		const ast = parse(source);
+		const ast = parse(source, 'App.tsrx');
 		const declaration = (ast.body[0] as AST.VariableDeclaration).declarations[0];
 		const fragment = get_returned_tsrx(declaration) as any;
 
@@ -1050,7 +1050,7 @@ function App() @{
 }
 `;
 
-		const ast = parse(source);
+		const ast = parse(source, 'App.tsrx');
 		const ast_json = JSON.stringify(ast);
 
 		expect(ast_json).toContain('"name":"effect"');
@@ -1223,7 +1223,7 @@ export function App() @{
 			const source = `function TodoList({ items }: { items: { text: string }[] }) @{
   <ul>var a = "123"</ul>
 			}`;
-			const ast = parse(source);
+			const ast = parse(source, 'App.tsrx');
 			const returned = get_returned_tsrx(ast.body[0]);
 			const ul =
 				returned.type === 'Element'
@@ -1262,6 +1262,6 @@ export function App() @{
 	<4;</ul>
 		}`;
 
-		expect(() => parse(source)).toThrow();
+		expect(() => parse(source, 'App.tsrx')).toThrow();
 	});
 });

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

@@ -270,5 +270,80 @@ export function App() @{
 			expect(code).toContain('highlight');
 			expect(code).toMatch(/tsrx-[a-z0-9]+ highlight/);
 		});
+
+		const unreachable_selectors_source = `
+export function App() @{
+	const styles = <style>
+		div {
+			color: red;
+		}
+		.parent .card {
+			font-weight: bold;
+		}
+		.card {
+			color: green;
+			&:hover {
+				color: blue;
+			}
+		}
+		:global(.badge) {
+			padding: 0;
+		}
+		:global(body) {
+			margin: 0;
+		}
+	</style>;
+
+	<div class={styles.card}>{'text'}</div>
+}`;
+
+		it('prunes style expression selectors the class map cannot reach in client mode', () => {
+			const { css, cssHash } = compile(unreachable_selectors_source, 'test.tsrx');
+
+			expect(css).toContain('/* (unused) div {');
+			expect(css).toContain('/* (unused) .parent .card {');
+			expect(css).toContain(`.card.${cssHash}`);
+			expect(css).toContain('&:hover {');
+			expect(css).toContain('.badge {');
+			expect(css).not.toContain(`.badge.${cssHash}`);
+			expect(css).toContain('/* (unused) :global(body) {');
+		});
+
+		it('prunes style expression selectors the class map cannot reach in server mode', () => {
+			const { css, cssHash } = compile(unreachable_selectors_source, 'test.tsrx', {
+				mode: 'server',
+			});
+
+			expect(css).toContain('/* (unused) div {');
+			expect(css).toContain('/* (unused) .parent .card {');
+			expect(css).toContain(`.card.${cssHash}`);
+			expect(css).toContain('&:hover {');
+			expect(css).toContain('.badge {');
+			expect(css).not.toContain(`.badge.${cssHash}`);
+			expect(css).toContain('/* (unused) :global(body) {');
+		});
+
+		it('keeps all selectors of a free-standing style block', () => {
+			const source = `
+export function App() @{
+	<>
+		<div class="card">{'text'}</div>
+
+		<style>
+			div {
+				color: red;
+			}
+			.card {
+				color: green;
+			}
+		</style>
+	</>
+}`;
+			const { css, cssHash } = compile(source, 'test.tsrx');
+
+			expect(css).not.toContain('(unused)');
+			expect(css).toContain(`div.${cssHash}`);
+			expect(css).toContain(`.card.${cssHash}`);
+		});
 	});
 });

package/tests/server/style-identifier.test.tsrx

@@ -336,5 +336,65 @@ export function App() @{
 			expect(body).toMatch(/tsrx-[a-z0-9]+/);
 			expect(body).toContain('styled');
 		});
+
+		it('prunes style expression selectors the class map cannot reach', () => {
+			const source = `
+export function App() @{
+	const styles = <style>
+		div {
+			color: red;
+		}
+		.parent .card {
+			font-weight: bold;
+		}
+		.card {
+			color: green;
+			&:hover {
+				color: blue;
+			}
+		}
+		:global(.badge) {
+			padding: 0;
+		}
+		:global(body) {
+			margin: 0;
+		}
+	</style>;
+
+	<div class={styles.card}>{'text'}</div>
+}`;
+			const { css, cssHash } = compile(source, 'test.tsrx', { mode: 'server' });
+
+			expect(css).toContain('/* (unused) div {');
+			expect(css).toContain('/* (unused) .parent .card {');
+			expect(css).toContain(`.card.${cssHash}`);
+			expect(css).toContain('&:hover {');
+			expect(css).toContain('.badge {');
+			expect(css).not.toContain(`.badge.${cssHash}`);
+			expect(css).toContain('/* (unused) :global(body) {');
+		});
+
+		it('keeps all selectors of a free-standing style block', () => {
+			const source = `
+export function App() @{
+	<>
+		<div class="card">{'text'}</div>
+
+		<style>
+			div {
+				color: red;
+			}
+			.card {
+				color: green;
+			}
+		</style>
+	</>
+}`;
+			const { css, cssHash } = compile(source, 'test.tsrx', { mode: 'server' });
+
+			expect(css).not.toContain('(unused)');
+			expect(css).toContain(`div.${cssHash}`);
+			expect(css).toContain(`.card.${cssHash}`);
+		});
 	});
 });

package/tests/utils/ref-types.test.js

@@ -20,7 +20,7 @@ function get_diagnostics(source) {
 		paths: {
 			'@tsrx/core/runtime/ref': ['packages/tsrx/types/runtime/ref.d.ts'],
 			'@tsrx/core/types': ['packages/tsrx/types/index.d.ts'],
-			'#helpers': ['packages/ripple/src/helpers.d.ts'],
+			'@tsrx/core/types/helpers': ['packages/tsrx/types/helpers.d.ts'],
 			'#public': ['packages/ripple/types/index.d.ts'],
 			ripple: ['packages/ripple/types/index.d.ts'],
 			'ripple/jsx-runtime': ['packages/ripple/src/jsx-runtime.d.ts'],

package/src/helpers.d.ts

@@ -1,11 +0,0 @@
-export type RequireAllOrNone<T, K extends keyof T> =
-	| (T & Required<Pick<T, K>>)
-	| (T & { [P in K]?: never });
-
-export type RequiredPresent<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
-
-export type Nullable<T> = T | null;
-
-export type Nullish<T> = T | null | undefined;
-
-export type NestedArray<T> = (T | NestedArray<T>)[];