ripple 0.3.74 → 0.3.77

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # ripple
 
+## 0.3.77
+
+### Patch Changes
+
+- Updated dependencies
+  [[`d14ec84`](https://github.com/Ripple-TS/ripple/commit/d14ec84f26233e514be9e59ffc94e61db5089587),
+  [`921fb9c`](https://github.com/Ripple-TS/ripple/commit/921fb9ce6485db41527b631f5236b7abbac74986),
+  [`1693c9e`](https://github.com/Ripple-TS/ripple/commit/1693c9e6daf1421e71171fe3c50e37adfc858b69)]:
+  - @tsrx/core@0.1.25
+  - @tsrx/ripple@0.1.25
+
+## 0.3.76
+
+### Patch Changes
+
+- [#1229](https://github.com/Ripple-TS/ripple/pull/1229)
+  [`6fd49c9`](https://github.com/Ripple-TS/ripple/commit/6fd49c9dd737e889844e254763f66e13ea4a7241)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Replace the removed `<@...>`
+  dynamic tag syntax with runtime `Dynamic` helpers. Ripple now exports `Dynamic`
+  and reuses its composite runtime path for dynamic elements/components, while
+  React, Preact, Solid, and Vue expose target-specific `Dynamic` helpers with
+  typed `is` props.
+
+  React, Preact, Solid, and Vue now mark imported runtime `Dynamic` elements
+  during shared JSX analysis so scoped CSS classes are applied through aliases
+  without treating local components named `Dynamic` as runtime elements.
+
+  Dynamic component prop forwarding now uses a shared core runtime helper that
+  excludes the internal `is` prop without snapshotting getter-backed reactive
+  props.
+
+  The TSRX parser, transforms, analyzers, prettier support, and related tests no
+  longer recognize dynamic tag syntax. Stale JSX identifier `tracked` plumbing
+  from that parser path has also been removed.
+
+- Updated dependencies
+  [[`6fd49c9`](https://github.com/Ripple-TS/ripple/commit/6fd49c9dd737e889844e254763f66e13ea4a7241)]:
+  - @tsrx/core@0.1.24
+  - @tsrx/ripple@0.1.24
+
+## 0.3.75
+
+### Patch Changes
+
+- Updated dependencies
+  [[`9eb4819`](https://github.com/Ripple-TS/ripple/commit/9eb4819cede6da7e93cbcd2bdf284bcb42d40464),
+  [`88a254c`](https://github.com/Ripple-TS/ripple/commit/88a254c69953a5ace33bc10047f11052ec598672),
+  [`ba3a7f6`](https://github.com/Ripple-TS/ripple/commit/ba3a7f6485ea163e60cc0750a8e8b06b50728009),
+  [`ac6f358`](https://github.com/Ripple-TS/ripple/commit/ac6f3582ca0b2814004439c882d6aa735c8afe50),
+  [`4c5f992`](https://github.com/Ripple-TS/ripple/commit/4c5f992b9a11e1f26abee476a6add89f959169bc),
+  [`78ffa8d`](https://github.com/Ripple-TS/ripple/commit/78ffa8d90fd01e85bf34e5c6adef0e51caae8da7),
+  [`16560cb`](https://github.com/Ripple-TS/ripple/commit/16560cb466430bdbe8749d9491bc79e69e58d02c),
+  [`186b3b2`](https://github.com/Ripple-TS/ripple/commit/186b3b2557761ff06c9056bf2e0b7ab8c7692477),
+  [`4be6e54`](https://github.com/Ripple-TS/ripple/commit/4be6e54bbfee20927adca473648a94aa173d7d77),
+  [`2b67f83`](https://github.com/Ripple-TS/ripple/commit/2b67f83d7ed7eab7a39bc33524fcf73f737d977e),
+  [`9918c52`](https://github.com/Ripple-TS/ripple/commit/9918c52e954f2b8e1a994892e7c555e8277f2d59),
+  [`e8493be`](https://github.com/Ripple-TS/ripple/commit/e8493be0b3489f402105297251e1919c103c2360),
+  [`c424675`](https://github.com/Ripple-TS/ripple/commit/c424675102a9edd4f1e356fb6db30124a9c2d885)]:
+  - @tsrx/core@0.1.23
+  - @tsrx/ripple@0.1.23
+
 ## 0.3.74
 
 ### 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.74",
+  "version": "0.3.77",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -74,8 +74,8 @@
     "clsx": "^2.1.1",
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "0.1.22",
-    "@tsrx/ripple": "0.1.22"
+    "@tsrx/core": "0.1.25",
+    "@tsrx/ripple": "0.1.25"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/jsx-runtime.d.ts

@@ -8,8 +8,8 @@ export type { RefValue } from '#public';
  * renderable TSRX values when used in expression positions.
  */
 
-// Ripple components don't return JSX elements - they're imperative
-export type ComponentType<P = {}> = (props: P) => void;
+// Ripple components are usually imperative, but helpers can return TSRX values.
+export type ComponentType<P = {}> = (props: P) => void | TSRXElement;
 
 /**
  * Create a JSX element (for elements with children)

package/src/runtime/dynamic-client.js

@@ -0,0 +1,33 @@
+/** @import { Block } from '#client' */
+
+import { composite } from './internal/client/composite.js';
+import { with_block } from './internal/client/runtime.js';
+import { tsrx_element } from './element.js';
+
+/**
+ * @typedef {Function | string | null | undefined | false} DynamicTarget
+ * @typedef {{ is?: DynamicTarget, [key: string]: any }} DynamicProps
+ */
+
+/**
+ * @param {DynamicProps} props
+ * @returns {import('./element.js').TSRXElement}
+ */
+export function Dynamic(props) {
+	return tsrx_element(
+		/**
+		 * @param {Node} anchor
+		 * @param {Block | null} block
+		 */
+		(anchor, block) => {
+			const render_dynamic = () =>
+				composite(() => /** @type {DynamicTarget} */ (props?.is), anchor, props || {}, 'is');
+
+			if (block !== null) {
+				with_block(block, render_dynamic);
+			} else {
+				render_dynamic();
+			}
+		},
+	);
+}

package/src/runtime/dynamic-server.js

@@ -0,0 +1,80 @@
+import { is_void_element } from '@tsrx/core/runtime/html';
+import { exclude_prop_from_object } from '@tsrx/core/runtime/language-helpers';
+import {
+	escape,
+	get,
+	is_tsrx_element,
+	output_push,
+	render_component,
+	render_tsrx_element,
+	spread_attrs,
+	spread_inner_html,
+} from './internal/server/index.js';
+import { tsrx_element } from './element.js';
+
+/**
+ * @param {any} value
+ * @returns {void}
+ */
+function render_child(value) {
+	value = get(value);
+
+	if (is_tsrx_element(value)) {
+		render_tsrx_element(value);
+	} else if (Array.isArray(value)) {
+		for (const item of value) {
+			render_child(item);
+		}
+	} else if (value != null) {
+		output_push(escape(value));
+	}
+}
+
+/**
+ * @param {string} tag
+ * @param {Record<string, any>} props
+ * @returns {void}
+ */
+function render_element(tag, props) {
+	output_push(`<${tag}`);
+	output_push(spread_attrs(props, undefined, 'is'));
+
+	if (is_void_element(tag)) {
+		output_push(' />');
+		return;
+	}
+
+	output_push('>');
+
+	const inner_html = spread_inner_html(props);
+	if (inner_html !== undefined) {
+		output_push(inner_html);
+	} else {
+		render_child(props.children);
+	}
+
+	output_push(`</${tag}>`);
+}
+
+/**
+ * @param {{ is?: Function | string | null | undefined | false, [key: string]: any }} props
+ * @returns {import('./element.js').TSRXElement}
+ */
+export function Dynamic(props) {
+	return tsrx_element(() => {
+		const component = get(props?.is);
+		if (component == null || component === false) {
+			return;
+		}
+
+		const dynamic_props = props || {};
+
+		if (typeof component === 'function') {
+			render_component(component, exclude_prop_from_object(dynamic_props, 'is'));
+		} else if (is_tsrx_element(component)) {
+			throw new TypeError('Invalid component type: received a TSRXElement value.');
+		} else {
+			render_element(String(component), dynamic_props);
+		}
+	});
+}

package/src/runtime/index-client.js

@@ -183,6 +183,8 @@ export { user_effect as effect } from './internal/client/blocks.js';
 
 export { Portal } from './internal/client/portal.js';
 
+export { Dynamic } from './dynamic-client.js';
+
 export { ref_prop as createRefKey } from './internal/client/runtime.js';
 
 export { isRefProp } from '@tsrx/core/runtime/ref';

package/src/runtime/index-server.js

@@ -68,6 +68,8 @@ export const bindNode = noop;
 export const bindOffsetWidth = noop;
 export const bindOffsetHeight = noop;
 
+export { Dynamic } from './dynamic-server.js';
+
 /**
  * Portal component noop for server-side rendering.
  * Portals are client-only and do not render on the server.

package/src/runtime/internal/client/blocks.js

@@ -85,9 +85,10 @@ export function render(fn, state, flags = 0) {
  * @param {any} element
  * @param {any} fn
  * @param {number} [flags]
+ * @param {string} [exclude_prop]
  */
-export function render_spread(element, fn, flags = 0) {
-	return block(RENDER_BLOCK | flags, apply_element_spread(element, fn));
+export function render_spread(element, fn, flags = 0, exclude_prop) {
+	return block(RENDER_BLOCK | flags, apply_element_spread(element, fn, exclude_prop));
 }
 
 /**

package/src/runtime/internal/client/composite.js

@@ -1,5 +1,6 @@
 /** @import { Block } from '#client' */
 
+import { exclude_prop_from_object } from '@tsrx/core/runtime/language-helpers';
 import { branch, destroy_block, render, render_spread } from './blocks.js';
 import { COMPOSITE_BLOCK, DEFAULT_NAMESPACE, NAMESPACE_URI } from './constants.js';
 import { hydrate_next, hydrating } from './hydration.js';
@@ -9,13 +10,14 @@ import { is_tsrx_element } from '../../element.js';
 import { render_component } from './component.js';
 
 /**
- * @typedef {((anchor: Node, props: Record<string, any>, block: Block | null) => void)} ComponentFunction
- * @param {() => ComponentFunction | keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap | keyof MathMLElementTagNameMap} get_component
+ * @typedef {Function | string | null | undefined | false} CompositeTarget
+ * @param {() => CompositeTarget} get_component
  * @param {Node} node
  * @param {Record<string, any>} props
+ * @param {string} [exclude_prop]
  * @returns {void}
  */
-export function composite(get_component, node, props) {
+export function composite(get_component, node, props, exclude_prop) {
 	if (hydrating) {
 		// During hydration, `node` may already point at the first real SSR node
 		// (e.g. layout children). Only skip forward when we are on an empty
@@ -42,7 +44,10 @@ export function composite(get_component, node, props) {
 			if (typeof component === 'function') {
 				// Handle as regular component
 				b = branch(() => {
-					render_component(component, anchor, props);
+					const component_props = exclude_prop
+						? exclude_prop_from_object(props, exclude_prop)
+						: props;
+					render_component(component, anchor, component_props);
 				});
 			} else if (is_tsrx_element(component)) {
 				throw new TypeError('Invalid component type: received a TSRXElement value.');
@@ -69,7 +74,7 @@ export function composite(get_component, node, props) {
 						};
 					}
 
-					render_spread(element, () => props || {});
+					render_spread(element, () => props || {}, 0, exclude_prop);
 
 					if (is_tsrx_element(props?.children)) {
 						var child_anchor = document.createComment('');
@@ -84,7 +89,7 @@ export function composite(get_component, node, props) {
 				};
 
 				if (ns !== active_namespace) {
-					// support top-level dynamic element svg/math <@tag />
+					// support top-level dynamic element svg/math tags
 					b = branch(() => with_ns(ns, run));
 				} else {
 					b = branch(run);

package/src/runtime/internal/client/render.js

@@ -253,9 +253,10 @@ export function set_selected(element, selected) {
 /**
  * @param {Element} element
  * @param {() => Record<string | symbol, any>} fn
+ * @param {string} [exclude_prop]
  * @returns {() => void}
  */
-export function apply_element_spread(element, fn) {
+export function apply_element_spread(element, fn, exclude_prop) {
 	/** @type {Record<string | symbol, any>} */
 	var prev = {};
 	/** @type {Record<string | symbol, Block | undefined>} */
@@ -304,6 +305,8 @@ export function apply_element_spread(element, fn) {
 		var current_ref_props = {};
 
 		for (const key in next) {
+			if (key === exclude_prop) continue;
+
 			const ref_fn = next[key];
 			if (!is_ref_prop(ref_fn)) {
 				continue;
@@ -352,7 +355,7 @@ export function apply_element_spread(element, fn) {
 		/** @type {typeof prev} */
 		const current = {};
 		for (const key in next) {
-			if (key === 'children') continue;
+			if (key === 'children' || key === exclude_prop) continue;
 
 			let value = next[key];
 			if (is_ref_prop(value)) {

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

@@ -1244,18 +1244,25 @@ function get_styles(styles) {
 /**
  * @param {Record<string, any>} attrs
  * @param {string | undefined} css_hash
+ * @param {string} [exclude_prop]
  * @returns {string}
  */
-export function spread_attrs(attrs, css_hash) {
+export function spread_attrs(attrs, css_hash, exclude_prop) {
 	let attr_str = '';
 	let name;
 
+	if (css_hash === undefined && Object.prototype.hasOwnProperty.call(attrs, '#class')) {
+		css_hash = attrs['#class'];
+	}
+
 	for (name in attrs) {
 		var value = attrs[name];
 
 		if (
 			name === 'children' ||
 			name === 'innerHTML' ||
+			name === '#class' ||
+			name === exclude_prop ||
 			typeof value === 'function' ||
 			is_tsrx_element(value)
 		)

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

@@ -5,7 +5,7 @@ import type {
 	Component,
 	PropsWithChildrenOptional,
 } from 'ripple';
-import { flushSync, track } from 'ripple';
+import { Dynamic, flushSync, track } from 'ripple';
 import { did_error } from '../capture-error.js';
 
 describe('basic client > components & composition', () => {
@@ -503,7 +503,7 @@ describe('basic client > components & composition', () => {
 		function App() @{
 			let &[Content] = track(() => Noop);
 			<>
-				<@Content />
+				<Dynamic is={Content} />
 				<button onClick={() => (Content = Op)}>{'Show Op'}</button>
 			</>
 		}

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

@@ -39,23 +39,25 @@ describe('basic client > styling', () => {
 	});
 
 	it('renders with keyframes in styling scoped to component', () => {
-		const source = `export function Basic() { return <>
-			<div>
-				<p>{'Styled paragraph'}</p>
-			</div>
+		const source = `export function Basic() @{
+			<>
+				<div>
+					<p>{'Styled paragraph'}</p>
+				</div>
 
-			<style>
-				div {
-					animation-name: anim;
-				}
+				<style>
+					div {
+						animation-name: anim;
+					}
 
-				@keyframes anim {}
+					@keyframes anim {}
 
-				p {
-					animation-name: anim;
-				}
-			</style>
-		</>; }`;
+					p {
+						animation-name: anim;
+					}
+				</style>
+			</>
+		}`;
 
 		const { css } = compile(source, 'test.tsrx');
 		const name = css.match(/@keyframes\s+([a-zA-Z0-9_-]+)\s*\{/)[1];

package/tests/client/composite/composite.dynamic-components.test.tsrx

@@ -1,14 +1,14 @@
-import { flushSync, track } from 'ripple';
+import { Dynamic, flushSync, track } from 'ripple';
 
 describe('composite > dynamic components', () => {
-	it('supports rendering composite components using <@component> syntax', () => {
+	it('supports rendering composite components using <Dynamic is={component}> syntax', () => {
 		function basic() @{
 			<div>{'Basic Component'}</div>
 		}
 
 		function App() @{
 			const tracked_basic = track(() => basic);
-			<@tracked_basic />
+			<Dynamic is={tracked_basic} />
 		}
 
 		render(App);
@@ -28,7 +28,7 @@ describe('composite > dynamic components', () => {
 				tracked_basic,
 			};
 			const comp = obj.tracked_basic;
-			<@comp />
+			<Dynamic is={comp} />
 		}
 
 		render(App);
@@ -49,7 +49,7 @@ describe('composite > dynamic components', () => {
 			};
 			let &[inner] = track(obj);
 			const comp = inner.tracked_basic;
-			<@comp />
+			<Dynamic is={comp} />
 		}
 
 		render(App);
@@ -58,6 +58,24 @@ describe('composite > dynamic components', () => {
 		expect(container.textContent).toBe('Basic Component');
 	});
 
+	it('does not pass is to dynamic component props', () => {
+		function Child(props) @{
+			<div>
+				{props.is === undefined && !('is' in props) ? 'hidden' : 'leaked'}
+			</div>
+		}
+
+		function App() @{
+			const component = track(() => Child);
+			<Dynamic is={component} label="child" />
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.textContent).toBe('hidden');
+	});
+
 	it('handles dynamic component switching', () => {
 		function Child1() @{
 			<div>{'I am child 1'}</div>
@@ -71,7 +89,7 @@ describe('composite > dynamic components', () => {
 			let &[thing] = track(() => Child1);
 			<>
 				<div id="container">
-					<@thing />
+					<Dynamic is={thing} />
 				</div>
 				<button
 					onClick={() => (thing = thing === Child1 ? Child2 : Child1)}

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

@@ -463,7 +463,7 @@ function Child1() @{
 		'handles sibling combinators with dynamic component and :global before scoped elements',
 		() => {
 			const source = `
-import { track } from 'ripple';
+import { Dynamic, track } from 'ripple';
 
 export function Test({ children }) @{
 	const DynamicComponent = track(() => Child1);
@@ -471,7 +471,7 @@ export function Test({ children }) @{
 		<div>
 			<p class="before">{'before'}</p>
 
-			<@DynamicComponent />
+			<Dynamic is={DynamicComponent} />
 
 			<p class="foo">
 				<span>{'foo'}</span>
@@ -512,7 +512,7 @@ function Child1() @{
 		'handles sibling combinators with dynamic element or regular element and :global before scoped elements',
 		() => {
 			const source = `
-import { track } from 'ripple';
+import { Dynamic, track } from 'ripple';
 
 export function Test({ children, classes }) @{
 	const dynamicElement = track('div');
@@ -520,7 +520,7 @@ export function Test({ children, classes }) @{
 		<div>
 			<p class="before">{'before'}</p>
 			// Use Dynamic Element but it's the same with a regular one
-			<@dynamicElement class={classes} />
+			<Dynamic is={dynamicElement} class={classes} />
 
 			<p class="foo">
 				<span>{'foo'}</span>

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

@@ -1,4 +1,4 @@
-import { track } from 'ripple';
+import { Dynamic, track } from 'ripple';
 import { compile } from '@tsrx/ripple';
 
 const external_styles = <style>
@@ -75,7 +75,7 @@ describe('style class maps', () => {
 		it('allows style expression classes on child components with children', () => {
 			const source = `
 function Child({ className }) @{
-	<div class={className}>"hello world"</div>
+	<div class={className}>hello world</div>
 }
 function App() @{
 	const styles = <style>
@@ -84,7 +84,7 @@ function App() @{
 		}
 	</style>;
 
-		<Child className={styles.container}>"hello world"</Child>
+		<Child className={styles.container}>hello world</Child>
 }`;
 
 			expect(() => compile(source, 'test.tsrx')).not.toThrow();
@@ -104,7 +104,7 @@ function App() @{
 
 				let dynamic = track(() => Child);
 				<div class="wrapper">
-					<@dynamic cls={styles.text} />
+					<Dynamic is={dynamic} cls={styles.text} />
 				</div>
 			}