fix: prevent rendering <undefined> tags when children prop is not passed (#497)- Added null check in composite.js to prevent creating elements when component is undefined- Added test case to verify components without children don't render <undefined> tags- Fixes issue where <@children /> would create <undefined></undefined> when children prop is undefined (#589)

Author: Dreezy305

packages/ripple/src/runtime/internal/client/composite.js

@@ -1,7 +1,7 @@
 /** @import { Block } from '#client' */
 
 import { branch, destroy_block, render, render_spread } from './blocks.js';
-import { COMPOSITE_BLOCK, NAMESPACE_URI, DEFAULT_NAMESPACE } from './constants.js';
+import { COMPOSITE_BLOCK, DEFAULT_NAMESPACE, NAMESPACE_URI } from './constants.js';
 import { active_block, active_namespace, with_ns } from './runtime.js';
 import { top_element_to_ns } from './utils.js';
 
@@ -32,8 +32,8 @@ export function composite(get_component, node, props) {
 					var block = active_block;
 					/** @type {ComponentFunction} */ (component)(anchor, props, block);
 				});
-			} else {
-				// Custom element
+			} else if (component != null) {
+				// Custom element - only create if component is not null/undefined
 				var run = () => {
 					var block = /** @type {Block} */ (active_block);
 

packages/ripple/tests/client/bug-497.test.ripple

@@ -0,0 +1,33 @@
+import { track } from 'ripple';
+
+describe('bug reproduction #497', () => {
+	it('should not render <undefined> tag when children is not passed', () => {
+		component Span({ children, id: key = 2, ...props }) {
+			const renderredHtml = track('');
+			const refNode = (node) => {
+				console.log(node.outerHTML);
+				@renderredHtml = node.outerHTML;
+			};
+			<span {ref refNode} {...props}>
+				<@children />
+			</span>
+			{@renderredHtml}
+		}
+
+		component App() {
+			<Span class="red" />
+		}
+
+		render(App);
+
+		const span = container.querySelector('span');
+		const undefinedTag = container.querySelector('undefined');
+
+		expect(span).toBeTruthy();
+		expect(span.className).toBe('red');
+		// The bug: undefined tag should not exist
+		expect(undefinedTag).toBeNull();
+		// The span should not contain <undefined></undefined> in its HTML
+		expect(span.innerHTML).not.toContain('<undefined');
+	});
+});