ripple 0.3.76 → 0.3.78

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # ripple
 
+## 0.3.78
+
+### Patch Changes
+
+- [#1240](https://github.com/Ripple-TS/ripple/pull/1240)
+  [`92982ee`](https://github.com/Ripple-TS/ripple/commit/92982ee5cd2e6d971b5b650ec1df70483c9716aa)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Render `<{expr}>` dynamic
+  tags directly through `_$_.composite` in the client production output instead of
+  lowering to the `Dynamic` helper component, and fix hydration of dynamic string
+  tags claiming the SSR-rendered element.
+
+- [#1241](https://github.com/Ripple-TS/ripple/pull/1241)
+  [`b826234`](https://github.com/Ripple-TS/ripple/commit/b8262342111a977ba5a0d44086154e386b06f4b9)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Remove the runtime `Dynamic`
+  component exports; dynamic rendering is the `<{expr}>` tag syntax. The `Dynamic`
+  type declarations remain so type-only output keeps type-checking, but the JS is
+  gone: React and Preact production output now lowers dynamic tags to a scoped
+  component alias (`const TsrxDynamic_N = expr;`), Ripple SSR uses the internal
+  `_$_.dynamic_element` helper, and the imported-`Dynamic` detection for scoped
+  CSS is removed (the element marking is now `metadata.dynamicElement`, set by the
+  dynamic-tag lowering).
+- Updated dependencies
+  [[`92982ee`](https://github.com/Ripple-TS/ripple/commit/92982ee5cd2e6d971b5b650ec1df70483c9716aa),
+  [`92982ee`](https://github.com/Ripple-TS/ripple/commit/92982ee5cd2e6d971b5b650ec1df70483c9716aa),
+  [`b826234`](https://github.com/Ripple-TS/ripple/commit/b8262342111a977ba5a0d44086154e386b06f4b9),
+  [`b826234`](https://github.com/Ripple-TS/ripple/commit/b8262342111a977ba5a0d44086154e386b06f4b9),
+  [`b826234`](https://github.com/Ripple-TS/ripple/commit/b8262342111a977ba5a0d44086154e386b06f4b9)]:
+  - @tsrx/ripple@0.1.26
+  - @tsrx/core@0.1.26
+
+## 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

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.76",
+  "version": "0.3.78",
   "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.24",
-    "@tsrx/ripple": "0.1.24"
+    "@tsrx/core": "0.1.26",
+    "@tsrx/ripple": "0.1.26"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/runtime/index-client.js

@@ -183,8 +183,6 @@ 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,8 +68,6 @@ 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/composite.js

@@ -3,7 +3,8 @@
 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';
+import { hydrate_node, hydrate_next, hydrating, set_hydrate_node } from './hydration.js';
+import { first_child } from './operations.js';
 import { active_block, active_namespace, get, with_ns } from './runtime.js';
 import { top_element_to_ns } from './utils.js';
 import { is_tsrx_element } from '../../element.js';
@@ -57,15 +58,22 @@ export function composite(get_component, node, props, exclude_prop) {
 				var run = () => {
 					var block = /** @type {Block} */ (active_block);
 
-					var element =
-						ns !== DEFAULT_NAMESPACE
-							? document.createElementNS(
-									NAMESPACE_URI[ns],
-									/** @type {keyof HTMLElementTagNameMap} */ (component),
-								)
-							: document.createElement(/** @type {keyof HTMLElementTagNameMap} */ (component));
+					/** @type {Element} */
+					var element;
+					if (hydrating) {
+						// Claim the SSR-rendered element instead of creating a new one.
+						element = /** @type {Element} */ (hydrate_node);
+					} else {
+						element =
+							ns !== DEFAULT_NAMESPACE
+								? document.createElementNS(
+										NAMESPACE_URI[ns],
+										/** @type {keyof HTMLElementTagNameMap} */ (component),
+									)
+								: document.createElement(/** @type {keyof HTMLElementTagNameMap} */ (component));
 
-					/** @type {ChildNode} */ (anchor).before(element);
+						/** @type {ChildNode} */ (anchor).before(element);
+					}
 
 					if (block.s === null) {
 						block.s = {
@@ -77,14 +85,28 @@ export function composite(get_component, node, props, exclude_prop) {
 					render_spread(element, () => props || {}, 0, exclude_prop);
 
 					if (is_tsrx_element(props?.children)) {
-						var child_anchor = document.createComment('');
-						element.appendChild(child_anchor);
+						/** @type {Node} */
+						var child_anchor;
+						if (hydrating) {
+							// The server renders children directly inside the element with no
+							// extra markers; descend the cursor so they claim those nodes.
+							child_anchor = /** @type {Node} */ (first_child(element));
+						} else {
+							child_anchor = document.createComment('');
+							element.appendChild(child_anchor);
+						}
 
 						if (ns !== DEFAULT_NAMESPACE) {
 							with_ns(ns, () => props.children.render(child_anchor, block));
 						} else {
 							props.children.render(child_anchor, block);
 						}
+
+						if (hydrating) {
+							// Reset the cursor to the claimed element so sibling traversal
+							// continues after it.
+							set_hydrate_node(element);
+						}
 					}
 				};
 

package/src/runtime/{dynamic-server.js → internal/server/dynamic.js}

@@ -9,8 +9,8 @@ import {
 	render_tsrx_element,
 	spread_attrs,
 	spread_inner_html,
-} from './internal/server/index.js';
-import { tsrx_element } from './element.js';
+} from './index.js';
+import { tsrx_element } from '../../element.js';
 
 /**
  * @param {any} value
@@ -58,9 +58,9 @@ function render_element(tag, props) {
 
 /**
  * @param {{ is?: Function | string | null | undefined | false, [key: string]: any }} props
- * @returns {import('./element.js').TSRXElement}
+ * @returns {import('../../element.js').TSRXElement}
  */
-export function Dynamic(props) {
+export function dynamic_element(props) {
 	return tsrx_element(() => {
 		const component = get(props?.is);
 		if (component == null || component === false) {

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

@@ -2037,3 +2037,5 @@ export function ripple_map(iterable) {
 export function fallback(value, fallback) {
 	return value === undefined ? fallback : value;
 }
+
+export { dynamic_element } from './dynamic.js';

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

@@ -5,7 +5,7 @@ import type {
 	Component,
 	PropsWithChildrenOptional,
 } from 'ripple';
-import { Dynamic, flushSync, track } from 'ripple';
+import { 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);
 			<>
-				<Dynamic is={Content} />
+				<{Content} />
 				<button onClick={() => (Content = Op)}>{'Show Op'}</button>
 			</>
 		}

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

@@ -1,14 +1,14 @@
-import { Dynamic, flushSync, track } from 'ripple';
+import { flushSync, track } from 'ripple';
 
 describe('composite > dynamic components', () => {
-	it('supports rendering composite components using <Dynamic is={component}> syntax', () => {
+	it('supports rendering composite components using dynamic tag syntax', () => {
 		function basic() @{
 			<div>{'Basic Component'}</div>
 		}
 
 		function App() @{
 			const tracked_basic = track(() => basic);
-			<Dynamic is={tracked_basic} />
+			<{tracked_basic} />
 		}
 
 		render(App);
@@ -28,7 +28,7 @@ describe('composite > dynamic components', () => {
 				tracked_basic,
 			};
 			const comp = obj.tracked_basic;
-			<Dynamic is={comp} />
+			<{comp} />
 		}
 
 		render(App);
@@ -49,7 +49,7 @@ describe('composite > dynamic components', () => {
 			};
 			let &[inner] = track(obj);
 			const comp = inner.tracked_basic;
-			<Dynamic is={comp} />
+			<{comp} />
 		}
 
 		render(App);
@@ -67,7 +67,7 @@ describe('composite > dynamic components', () => {
 
 		function App() @{
 			const component = track(() => Child);
-			<Dynamic is={component} label="child" />
+			<{component} label="child" />
 		}
 
 		render(App);
@@ -89,7 +89,7 @@ describe('composite > dynamic components', () => {
 			let &[thing] = track(() => Child1);
 			<>
 				<div id="container">
-					<Dynamic is={thing} />
+					<{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 { Dynamic, track } from 'ripple';
+import { 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>
 
-			<Dynamic is={DynamicComponent} />
+			<{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 { Dynamic, track } from 'ripple';
+import { 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
-			<Dynamic is={dynamicElement} class={classes} />
+			<{dynamicElement}  class={classes} />
 
 			<p class="foo">
 				<span>{'foo'}</span>

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

@@ -1,4 +1,4 @@
-import { Dynamic, track } from 'ripple';
+import { track } from 'ripple';
 import { compile } from '@tsrx/ripple';
 
 const external_styles = <style>
@@ -104,7 +104,7 @@ function App() @{
 
 				let dynamic = track(() => Child);
 				<div class="wrapper">
-					<Dynamic is={dynamic} cls={styles.text} />
+					<{dynamic} cls={styles.text} />
 				</div>
 			}
 

package/tests/client/dynamic-elements.test.tsrx

@@ -1,11 +1,11 @@
 import type { PropsWithExtras } from 'ripple';
-import { createRefKey, Dynamic, effect, flushSync, track } from 'ripple';
+import { createRefKey, effect, flushSync, track } from 'ripple';
 
 describe('dynamic DOM elements', () => {
 	it('renders static dynamic element', () => {
 		function App() @{
 			let tag = track('div');
-			<Dynamic is={tag}>{'Hello World'}</Dynamic>
+			<{tag}>{'Hello World'}</{tag}>
 		}
 		render(App);
 
@@ -17,7 +17,7 @@ describe('dynamic DOM elements', () => {
 	it('renders static dynamic element from a plain object with a tracked property', () => {
 		function App() @{
 			let obj = { tag: track('div') };
-			<Dynamic is={obj.tag}>{'Hello World'}</Dynamic>
+			<{obj.tag}>{'Hello World'}</{obj.tag}>
 		}
 		render(App);
 
@@ -30,7 +30,7 @@ describe('dynamic DOM elements', () => {
 		function App() @{
 			let obj = track({ tag: track('div') });
 			let tag = obj.value.tag;
-			<Dynamic is={tag}>{'Hello World'}</Dynamic>
+			<{tag}>{'Hello World'}</{tag}>
 		}
 		render(App);
 
@@ -45,7 +45,7 @@ describe('dynamic DOM elements', () => {
 			function App() @{
 				let obj = track({ tag: track('div') });
 				let tag = obj.value['tag'];
-				<Dynamic is={tag}>{'Hello World'}</Dynamic>
+				<{tag}>{'Hello World'}</{tag}>
 			}
 			render(App);
 
@@ -64,7 +64,7 @@ describe('dynamic DOM elements', () => {
 						tag = 'span';
 					}}
 				>{'Change Tag'}</button>
-				<Dynamic is={tag} id="dynamic">{'Hello World'}</Dynamic>
+				<{tag} id="dynamic">{'Hello World'}</{tag}>
 			</>
 		}
 		render(App);
@@ -88,7 +88,7 @@ describe('dynamic DOM elements', () => {
 	it('renders self-closing dynamic element', () => {
 		function App() @{
 			let tag = track('input');
-			<Dynamic is={tag} type="text" value="test" />
+			<{tag} type="text" value="test" />
 		}
 		render(App);
 
@@ -102,12 +102,7 @@ describe('dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			let &[className] = track('test-class');
-			<Dynamic
-				is={tag}
-				class={className}
-				id="test"
-				data-testid="dynamic-element"
-			>{'Content'}</Dynamic>
+			<{tag} class={className} id="test" data-testid="dynamic-element">{'Content'}</{tag}>
 		}
 		render(App);
 
@@ -122,9 +117,9 @@ describe('dynamic DOM elements', () => {
 		function App() @{
 			let outerTag = track('div');
 			let innerTag = track('span');
-			<Dynamic is={outerTag} class="outer">
-				<Dynamic is={innerTag} class="inner">{'Nested content'}</Dynamic>
-			</Dynamic>
+			<{outerTag} class="outer">
+				<{innerTag} class="inner">{'Nested content'}</{innerTag}>
+			</{outerTag}>
 		}
 		render(App);
 
@@ -141,10 +136,9 @@ describe('dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			let &[active] = track(true);
-			<Dynamic
-				is={tag}
+			<{tag}
 				class={{ active: active, 'dynamic-element': true }}
-			>{'Element with class object'}</Dynamic>
+			>{'Element with class object'}</{tag}>
 		}
 		render(App);
 
@@ -157,14 +151,13 @@ describe('dynamic DOM elements', () => {
 	it('handles dynamic element with style object', () => {
 		function App() @{
 			let tag = track('span');
-			<Dynamic
-				is={tag}
+			<{tag}
 				style={{
 					color: 'red',
 					fontSize: '16px',
 					fontWeight: 'bold',
 				}}
-			>{'Styled dynamic element'}</Dynamic>
+			>{'Styled dynamic element'}</{tag}>
 		}
 		render(App);
 
@@ -183,11 +176,7 @@ describe('dynamic DOM elements', () => {
 				'data-testid': 'spread-test',
 				class: 'spread-class',
 			};
-			<Dynamic
-				is={tag}
-				{...attrs}
-				data-extra="additional"
-			>{'Element with spread attributes'}</Dynamic>
+			<{tag} {...attrs} data-extra="additional">{'Element with spread attributes'}</{tag}>
 		}
 		render(App);
 
@@ -204,13 +193,12 @@ describe('dynamic DOM elements', () => {
 
 		function App() @{
 			let tag = track('article');
-			<Dynamic
-				is={tag}
+			<{tag}
 				ref={(node: HTMLElement) => {
 					capturedElement = node;
 				}}
 				id="ref-test"
-			>{'Element with ref'}</Dynamic>
+			>{'Element with ref'}</{tag}>
 		}
 		render(App);
 		flushSync();
@@ -234,8 +222,7 @@ describe('dynamic DOM elements', () => {
 				refAttrElement = input ?? null;
 				anonymousRefElement = state.anonymous ?? null;
 			});
-			<Dynamic
-				is={tag}
+			<{tag}
 				id="dynamic-ref-combo"
 				type="text"
 				ref={[
@@ -277,8 +264,7 @@ describe('dynamic DOM elements', () => {
 				refAttrElement = input ?? null;
 				anonymousRefElement = state.anonymous ?? null;
 			});
-			<Dynamic
-				is={dynamic}
+			<{dynamic}
 				ref={[
 					input,
 					state.anonymous,
@@ -322,8 +308,7 @@ describe('dynamic DOM elements', () => {
 						dynamic = dynamic === TextInput ? SearchInput : TextInput;
 					}}
 				>{'Change Component'}</button>
-				<Dynamic
-					is={dynamic}
+				<{dynamic}
 					ref={[
 						(node: HTMLInputElement | null) => {
 							refAttrElement = node;
@@ -373,7 +358,7 @@ describe('dynamic DOM elements', () => {
 				class: 'ref-element',
 				[createRefKey()]: elementRef,
 			};
-			<Dynamic is={tag} {...dynamicProps}>{'Element with spread ref'}</Dynamic>
+			<{tag} {...dynamicProps}>{'Element with spread ref'}</{tag}>
 		}
 		render(App);
 		flushSync();
@@ -397,15 +382,14 @@ describe('dynamic DOM elements', () => {
 						count++;
 					}}
 				>{'Increment'}</button>
-				<Dynamic
-					is={tag}
+				<{tag}
 					id={count % 2 ? 'even' : 'odd'}
 					class={count % 2 ? 'even-class' : 'odd-class'}
 					data-count={count}
 				>
 					{'Count: '}
 					{count}
-				</Dynamic>
+				</{tag}>
 			</>
 		}
 
@@ -445,7 +429,7 @@ describe('dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			<>
-				<Dynamic is={tag} class="test-class">{'Dynamic element'}</Dynamic>
+				<{tag} class="test-class">{'Dynamic element'}</{tag}>
 				<style>
 					.test-class {
 						color: red;
@@ -471,8 +455,7 @@ describe('dynamic DOM elements', () => {
 			let tag = track('button');
 			let &[count] = track(0);
 			<>
-				<Dynamic
-					is={tag}
+				<{tag}
 					class={count % 2 ? 'even' : 'odd'}
 					id={count % 2 ? 'even' : 'odd'}
 					onClick={() => {
@@ -481,7 +464,7 @@ describe('dynamic DOM elements', () => {
 				>
 					{'Count: '}
 					{count}
-				</Dynamic>
+				</{tag}>
 				<style>
 					.even {
 						background-color: green;
@@ -545,7 +528,7 @@ describe('dynamic DOM elements', () => {
 		}>) @{
 			const tag = track('button');
 			<>
-				<Dynamic is={tag} {...rest}>{rest.class}</Dynamic>
+				<{tag} {...rest}>{rest.class}</{tag}>
 				<style>
 					.even {
 						background-color: green;
@@ -603,9 +586,9 @@ describe('dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			<>
-				<Dynamic is={tag} class="scoped">
+				<{tag} class="scoped">
 					<p>{'Scoped dynamic element'}</p>
-				</Dynamic>
+				</{tag}>
 				<style>
 					.scoped {
 						color: blue;
@@ -626,9 +609,9 @@ describe('dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			<>
-				<Dynamic is={tag} class="scoped">
+				<{tag} class="scoped">
 					<p>{'Scoped dynamic element'}</p>
-				</Dynamic>
+				</{tag}>
 				<style>
 					div {
 						color: blue;
@@ -662,10 +645,10 @@ describe('dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			<>
-				<Dynamic is={tag} class="scoped">
+				<{tag} class="scoped">
 					<p>{'Scoped dynamic element'}</p>
 					<Child />
-				</Dynamic>
+				</{tag}>
 				<style>
 					div {
 						color: blue;
@@ -708,7 +691,7 @@ describe('dynamic DOM elements', () => {
 		function App() @{
 			let tag = track(() => Child);
 			<>
-				<Dynamic is={tag} />
+				<{tag} />
 				<style>
 					.child {
 						color: red;
@@ -734,7 +717,7 @@ describe('dynamic DOM elements', () => {
 
 		function Button(props: any) @{
 			const el = track('button');
-			<Dynamic is={el} {...props} />
+			<{el} {...props} />
 		}
 
 		function App() @{
@@ -774,7 +757,7 @@ describe('dynamic DOM elements', () => {
 
 		function Button(props: any) @{
 			const el = track('button');
-			<Dynamic is={el} {...props} />
+			<{el} {...props} />
 		}
 
 		function App() @{
@@ -819,7 +802,7 @@ describe('dynamic DOM elements', () => {
 
 		function Button(props: any) @{
 			const el = track('button');
-			<Dynamic is={el} {...props} />
+			<{el} {...props} />
 		}
 
 		function App() @{

package/tests/client/svg.test.tsrx

@@ -1,4 +1,4 @@
-import { Dynamic, track } from 'ripple';
+import { track } from 'ripple';
 import type { Component, PropsWithChildren, PropsWithExtras } from 'ripple';
 
 describe('SVG namespace handling', () => {
@@ -296,7 +296,7 @@ describe('SVG namespace handling', () => {
 		function App() @{
 			let &[dynTag] = track('polygon');
 			<SVG>
-				<Dynamic is={dynTag} points="0,0 30,0 15,10" />
+				<{dynTag} points="0,0 30,0 15,10" />
 			</SVG>
 		}
 
@@ -327,7 +327,7 @@ describe('SVG namespace handling', () => {
 		function App() @{
 			let &[Component] = track(() => Polygon);
 			<SVG>
-				<Dynamic is={Component} points="0,0 30,0 15,10" />
+				<{Component} points="0,0 30,0 15,10" />
 			</SVG>
 		}
 
@@ -343,25 +343,24 @@ describe('SVG namespace handling', () => {
 	it('should render SVG as a dynamic top element with any dynamic children elements', () => {
 		function SVG({ children }: PropsWithChildren<{}>) @{
 			let &[tag] = track('svg');
-			<Dynamic
-				is={tag}
+			<{tag}
 				width={100}
 				height={50}
 				fill="red"
 				viewBox="0 0 30 10"
 				preserveAspectRatio="none"
-			>{children}</Dynamic>
+			>{children}</{tag}>
 		}
 
 		function Polygon({ points }: PropsWithExtras<{ points: string }>) @{
 			let &[dynTag] = track('polygon');
-			<Dynamic is={dynTag} {points} />
+			<{dynTag} {points} />
 		}
 
 		function App() @{
 			let &[Component] = track(() => Polygon);
 			<SVG>
-				<Dynamic is={Component} points="0,0 30,0 15,10" />
+				<{Component} points="0,0 30,0 15,10" />
 			</SVG>
 		}
 

package/tests/client/try.test.tsrx

@@ -24,7 +24,8 @@ describe('try block with catch and pending', () => {
 				@try {
 					let &[data] = trackAsync(() => promise);
 					<p class="resolved">{data}</p>
-				} @pending {}
+				} @pending {
+				}
 				<span class="after">{'after'}</span>
 			</>
 		}

package/tests/hydration/compiled/client/composite.js

@@ -15,6 +15,9 @@ var root_11 = _$_.template(`<!>`, 1, 1);
 var root_10 = _$_.template(`<!>`, 1, 1);
 var root_13 = _$_.template(`<!>`, 1, 1);
 var root_12 = _$_.template(`<!>`, 1, 1);
+var root_14 = _$_.template(`<!>`, 1, 1);
+var root_16 = _$_.template(`<!>`, 1, 1);
+var root_15 = _$_.template(`<!>`, 1, 1);
 
 export function Layout(__props) {
 	return _$_.tsrx_element((__anchor, __block) => {
@@ -155,4 +158,43 @@ export function LayoutWithTextAroundChildren() {
 
 		_$_.append(__anchor, fragment_9);
 	});
+}
+
+export function DynamicTagElement() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const Tag = 'section';
+		var fragment_11 = root_14();
+		var node_10 = _$_.first_child_frag(fragment_11);
+
+		_$_.composite(() => Tag, node_10, {
+			class: "host",
+			children: _$_.tsrx_element((__anchor, __block) => {
+				var expression_3 = _$_.text('hello');
+
+				_$_.append(__anchor, expression_3);
+			})
+		});
+
+		_$_.append(__anchor, fragment_11);
+	});
+}
+
+export function DynamicTagComponent() {
+	return _$_.tsrx_element((__anchor, __block) => {
+		const Comp = SingleChild;
+		var fragment_12 = root_15();
+		var node_11 = _$_.first_child_frag(fragment_12);
+
+		_$_.render_component(Layout, node_11, {
+			children: _$_.tsrx_element((__anchor, __block) => {
+				var fragment_13 = root_16();
+				var node_12 = _$_.first_child_frag(fragment_13);
+
+				_$_.composite(() => Comp, node_12, {});
+				_$_.append(__anchor, fragment_13);
+			})
+		});
+
+		_$_.append(__anchor, fragment_12);
+	});
 }

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

@@ -201,6 +201,61 @@ export function LayoutWithTextAroundChildren() {
 					}
 				];
 
+				_$_.render_component(comp, ...args);
+			}
+		});
+	});
+}
+
+export function DynamicTagElement() {
+	return _$_.tsrx_element(() => {
+		const Tag = 'section';
+
+		_$_.regular_block(() => {
+			{
+				const comp = _$_.dynamic_element;
+
+				const args = [
+					{
+						is: Tag,
+						class: "host",
+						children: _$_.tsrx_element(() => {
+							return _$_.tsrx_element(() => {
+								_$_.output_push('hello');
+							});
+						})
+					}
+				];
+
+				_$_.render_component(comp, ...args);
+			}
+		});
+	});
+}
+
+export function DynamicTagComponent() {
+	return _$_.tsrx_element(() => {
+		const Comp = SingleChild;
+
+		_$_.regular_block(() => {
+			{
+				const comp = Layout;
+
+				const args = [
+					{
+						children: _$_.tsrx_element(() => {
+							return _$_.tsrx_element(() => {
+								{
+									const comp = _$_.dynamic_element;
+									const args = [{ is: Comp }];
+
+									_$_.render_component(comp, ...args);
+								}
+							});
+						})
+					}
+				];
+
 				_$_.render_component(comp, ...args);
 			}
 		});

package/tests/hydration/components/composite.tsrx

@@ -51,3 +51,15 @@ export function LayoutWithTextAroundChildren() @{
 		<SingleChild />
 	</TextWrappedLayout>
 }
+
+export function DynamicTagElement() @{
+	const Tag = 'section';
+	<{Tag} class="host">{'hello'}</{Tag}>
+}
+
+export function DynamicTagComponent() @{
+	const Comp = SingleChild;
+	<Layout>
+		<{Comp} />
+	</Layout>
+}

package/tests/hydration/composite.test.js

@@ -50,4 +50,19 @@ describe('hydration > composite', () => {
 		);
 		expect(container.querySelector('.layout')?.textContent).toBe('beforesingleafter');
 	});
+
+	it('hydrates a dynamic tag element', async () => {
+		await hydrateComponent(ServerComponents.DynamicTagElement, ClientComponents.DynamicTagElement);
+		expect(container.innerHTML).toBeHtml('<section class="host">hello</section>');
+	});
+
+	it('hydrates a dynamic tag component', async () => {
+		await hydrateComponent(
+			ServerComponents.DynamicTagComponent,
+			ClientComponents.DynamicTagComponent,
+		);
+		expect(container.innerHTML).toBeHtml(
+			'<div class="layout"><div class="single">single</div></div>',
+		);
+	});
 });

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

@@ -1,4 +1,4 @@
-import { Dynamic, track } from 'ripple';
+import { track } from 'ripple';
 import type {
 	Tracked,
 	PropsWithChildren,
@@ -331,7 +331,7 @@ describe('basic server > components & composition', () => {
 
 		function App() @{
 			let Content = track(() => Noop);
-			<Dynamic is={Content} />
+			<{Content} />
 		}
 
 		const { body } = await render(App);

package/tests/server/basic.test.tsrx

@@ -1,4 +1,4 @@
-import { Dynamic, Fragment, track } from 'ripple';
+import { Fragment, track } from 'ripple';
 import type { Tracked, PropsNoChildren } from 'ripple';
 
 describe('basic client', () => {
@@ -403,7 +403,7 @@ second
 		function Parent() @{
 			const count = track(10);
 			let DynamicChild = track(() => Child);
-			<Dynamic is={DynamicChild} {count} class={{ test: true }} />
+			<{DynamicChild} {count} class={{ test: true }} />
 		}
 
 		const { body } = await render(Parent);

package/tests/server/dynamic-elements.test.tsrx

@@ -1,11 +1,11 @@
 import type { DynamicProps, PropsWithExtras, TSRXElement } from 'ripple';
-import { createRefKey, Dynamic, track } from 'ripple';
+import { createRefKey, track } from 'ripple';
 
 describe('server dynamic DOM elements', () => {
 	it('renders static dynamic element', async () => {
 		function App() @{
 			let tag = track('div');
-			<Dynamic is={tag}>{'Hello World'}</Dynamic>
+			<{tag}>{'Hello World'}</{tag}>
 		}
 
 		const { body } = await render(App);
@@ -17,7 +17,7 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let obj = { tag: track('div') };
 			let tag = obj.tag;
-			<Dynamic is={tag}>{'Hello World'}</Dynamic>
+			<{tag}>{'Hello World'}</{tag}>
 		}
 
 		const { body } = await render(App);
@@ -36,7 +36,7 @@ describe('server dynamic DOM elements', () => {
 		}
 
 		function App() @{
-			<Dynamic is={Child} label="child" class="yo" />
+			<{Child} label="child" class="yo" />
 		}
 
 		const { body } = await render(App);
@@ -48,7 +48,7 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let obj = track({ tag: track('div') });
 			let tag = obj.value.tag;
-			<Dynamic is={tag}>{'Hello World'}</Dynamic>
+			<{tag}>{'Hello World'}</{tag}>
 		}
 
 		const { body } = await render(App);
@@ -62,7 +62,7 @@ describe('server dynamic DOM elements', () => {
 			function App() @{
 				let obj = track({ tag: track('div') });
 				let tag = obj.value['tag'];
-				<Dynamic is={tag}>{'Hello World'}</Dynamic>
+				<{tag}>{'Hello World'}</{tag}>
 			}
 
 			const { body } = await render(App);
@@ -74,7 +74,7 @@ describe('server dynamic DOM elements', () => {
 	it('renders self-closing dynamic element', async () => {
 		function App() @{
 			let tag = track('input');
-			<Dynamic is={tag} type="text" value="test" />
+			<{tag} type="text" value="test" />
 		}
 
 		const { body } = await render(App);
@@ -86,12 +86,7 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			let &[className] = track('test-class');
-			<Dynamic
-				is={tag}
-				class={className}
-				id="test"
-				data-testid="dynamic-element"
-			>{'Content'}</Dynamic>
+			<{tag} class={className} id="test" data-testid="dynamic-element">{'Content'}</{tag}>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -108,9 +103,9 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let outerTag = track('div');
 			let innerTag = track('span');
-			<Dynamic is={outerTag} class="outer">
-				<Dynamic is={innerTag} class="inner">{'Nested content'}</Dynamic>
-			</Dynamic>
+			<{outerTag} class="outer">
+				<{innerTag} class="inner">{'Nested content'}</{innerTag}>
+			</{outerTag}>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -128,10 +123,9 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			let &[active] = track(true);
-			<Dynamic
-				is={tag}
+			<{tag}
 				class={{ active: active, 'dynamic-element': true }}
-			>{'Element with class object'}</Dynamic>
+			>{'Element with class object'}</{tag}>
 		}
 
 		const { body } = await render(App);
@@ -146,14 +140,13 @@ describe('server dynamic DOM elements', () => {
 	it('handles dynamic element with style object', async () => {
 		function App() @{
 			let tag = track('span');
-			<Dynamic
-				is={tag}
+			<{tag}
 				style={{
 					color: 'red',
 					fontSize: '16px',
 					fontWeight: 'bold',
 				}}
-			>{'Styled dynamic element'}</Dynamic>
+			>{'Styled dynamic element'}</{tag}>
 		}
 
 		const { body } = await render(App);
@@ -174,11 +167,7 @@ describe('server dynamic DOM elements', () => {
 				'data-testid': 'spread-test',
 				class: 'spread-class',
 			};
-			<Dynamic
-				is={tag}
-				{...attrs}
-				data-extra="additional"
-			>{'Element with spread attributes'}</Dynamic>
+			<{tag} {...attrs} data-extra="additional">{'Element with spread attributes'}</{tag}>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -196,13 +185,12 @@ describe('server dynamic DOM elements', () => {
 
 		function App() @{
 			let tag = track('article');
-			<Dynamic
-				is={tag}
+			<{tag}
 				ref={(node: HTMLElement) => {
 					capturedElement = node;
 				}}
 				id="ref-test"
-			>{'Element with ref'}</Dynamic>
+			>{'Element with ref'}</{tag}>
 		}
 
 		const { body } = await render(App);
@@ -230,7 +218,7 @@ describe('server dynamic DOM elements', () => {
 				class: 'ref-element',
 				[createRefKey()]: elementRef,
 			};
-			<Dynamic is={tag} {...dynamicProps}>{'Element with spread ref'}</Dynamic>
+			<{tag} {...dynamicProps}>{'Element with spread ref'}</{tag}>
 		}
 
 		const { body } = await render(App);
@@ -249,7 +237,7 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			<>
-				<Dynamic is={tag} class="test-class">{'Dynamic element'}</Dynamic>
+				<{tag} class="test-class">{'Dynamic element'}</{tag}>
 				<style>
 					.test-class {
 						color: red;
@@ -277,7 +265,7 @@ describe('server dynamic DOM elements', () => {
 		}>) @{
 			const tag = track('button');
 			<>
-				<Dynamic is={tag} {...rest}>{rest.class}</Dynamic>
+				<{tag} {...rest}>{rest.class}</{tag}>
 				<style>
 					.even {
 						background-color: green;
@@ -314,9 +302,9 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			<>
-				<Dynamic is={tag} class="scoped">
+				<{tag} class="scoped">
 					<p>{'Scoped dynamic element'}</p>
-				</Dynamic>
+				</{tag}>
 				<style>
 					.scoped {
 						color: blue;
@@ -343,9 +331,9 @@ describe('server dynamic DOM elements', () => {
 			function App() @{
 				let tag = track('div');
 				<>
-					<Dynamic is={tag} class="scoped">
+					<{tag} class="scoped">
 						<p>{'Scoped dynamic element'}</p>
-					</Dynamic>
+					</{tag}>
 					<style>
 						div {
 							color: blue;
@@ -382,10 +370,10 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			<>
-				<Dynamic is={tag} class="scoped">
+				<{tag} class="scoped">
 					<p>{'Scoped dynamic element'}</p>
 					<Child />
-				</Dynamic>
+				</{tag}>
 				<style>
 					div {
 						color: blue;
@@ -430,7 +418,7 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let tag = track(() => Child);
 			<>
-				<Dynamic is={tag} />
+				<{tag} />
 				<style>
 					.child {
 						color: red;

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

@@ -1,4 +1,4 @@
-import { Dynamic, track } from 'ripple';
+import { track } from 'ripple';
 import { compile } from '@tsrx/ripple';
 
 const external_styles = <style>
@@ -178,7 +178,7 @@ describe('style class maps (server)', () => {
 
 			let dynamic = track(() => Child);
 			<div class="wrapper">
-				<Dynamic is={dynamic} cls={styles.text} />
+				<{dynamic} cls={styles.text} />
 			</div>
 		}
 
@@ -269,9 +269,9 @@ describe('style class maps (server)', () => {
 		function App() @{
 			const DynamicWrapper = track(() => Wrapper);
 			<>
-				<Dynamic is={DynamicWrapper}>
+				<{DynamicWrapper}>
 					<div class="green">{'Slotted child'}</div>
-				</Dynamic>
+				</{DynamicWrapper}>
 				<style>
 					.green {
 						color: green;

package/tests/server/try.test.tsrx

@@ -12,7 +12,8 @@ describe('try block with catch and pending (server)', () => {
 				<span>{'before'}</span>
 				@try {
 					<DataChild />
-				} @pending {}
+				} @pending {
+				}
 				<span>{'after'}</span>
 			</>
 		}

package/src/runtime/dynamic-client.js

@@ -1,33 +0,0 @@
-/** @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();
-			}
-		},
-	);
-}