ripple 0.3.84 → 0.3.85

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # ripple
 
+## 0.3.85
+
+### Patch Changes
+
+- [#1307](https://github.com/Ripple-TS/ripple/pull/1307)
+  [`f55466b`](https://github.com/Ripple-TS/ripple/commit/f55466bde65d0cff00c0c4525af9d68ae794ffd2)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Skip the wrapper anchor for
+  single control-flow / code-block / component root scopes. When a scope's entire
+  renderable output is a single `@if`, `@switch`, `@for`, `@try`, or static child
+  component — i.e. a component body, a control-flow branch, or a `@{}` body whose
+  only output after setup is one of these — the compiler now renders it directly
+  before the parent-provided `__anchor` instead of synthesizing a `<!>` fragment
+  wrapper and an extra append + clone. For deep recursive trees this measurably
+  cuts mount time and shrinks generated output; in the recursive-context benchmark
+  it brought mount DOM operations to one clone + one append per element (from
+  ~1.5×) and halved the comment-anchor nodes.
+
+  Hydration is preserved. The control-flow runtimes
+  (`if_block`/`switch_block`/`for_block`/`for_block_keyed`/`try_block`) capture
+  the SSR boundary marker and hand it to `append()` afterward, so the existing
+  context-aware cursor advance still runs — including for a root scope used as a
+  child of a composite/slot with following siblings. Single-component roots need
+  no runtime change at all, since a component's own content advances the hydration
+  cursor.
+
+  Also relaxes the compiler's text-expression detection: `string + anything` (e.g.
+  `{a + '|' + b}`) is now recognized as text and lowered to the fast `set_text`
+  path without requiring an explicit `as string`, since such an expression always
+  evaluates to a string in JS.
+
+- [#1307](https://github.com/Ripple-TS/ripple/pull/1307)
+  [`f55466b`](https://github.com/Ripple-TS/ripple/commit/f55466bde65d0cff00c0c4525af9d68ae794ffd2)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Scope the client flush
+  traversal to the updated subtree. Previously every flush walked the whole root
+  block tree to find dirty subscribers, so a deeply-scoped update (e.g. mutating
+  state read by only a small subtree) paid a cost proportional to the entire tree
+  rather than the affected branch. `flush_updates` now descends only along the
+  routing path to each directly-scheduled block and fully scans just that block's
+  subtree, where its subscribers live. A tracked read from outside its owner's
+  subtree (e.g. smuggled across sibling subtrees via a module-level variable) is
+  detected in `register_dependency` and transparently falls back to the original
+  full-tree scan, so behavior is unchanged.
+
+- Updated dependencies
+  [[`ba498cd`](https://github.com/Ripple-TS/ripple/commit/ba498cde76e9f83235ce91da825f403a28441bff),
+  [`313b351`](https://github.com/Ripple-TS/ripple/commit/313b3513e4a959dd80b546da41c798066c5ccb0f),
+  [`35ac700`](https://github.com/Ripple-TS/ripple/commit/35ac70052d79efae41bb1df2440fee3f052ca115),
+  [`bbe6e74`](https://github.com/Ripple-TS/ripple/commit/bbe6e7422c690558f0dfcb3abe5452d4f4cdde91),
+  [`0e9f523`](https://github.com/Ripple-TS/ripple/commit/0e9f52358a615c2fc7759544e96c43dccb533c86),
+  [`35ac700`](https://github.com/Ripple-TS/ripple/commit/35ac70052d79efae41bb1df2440fee3f052ca115),
+  [`35ac700`](https://github.com/Ripple-TS/ripple/commit/35ac70052d79efae41bb1df2440fee3f052ca115),
+  [`2b65285`](https://github.com/Ripple-TS/ripple/commit/2b65285bfcd4c6a0aa93d7fa0b25082e6ec74e1f),
+  [`35ac700`](https://github.com/Ripple-TS/ripple/commit/35ac70052d79efae41bb1df2440fee3f052ca115),
+  [`f55466b`](https://github.com/Ripple-TS/ripple/commit/f55466bde65d0cff00c0c4525af9d68ae794ffd2),
+  [`b887deb`](https://github.com/Ripple-TS/ripple/commit/b887debf5f47e63d73184ac218ec8b3542a5e21c),
+  [`3668c5f`](https://github.com/Ripple-TS/ripple/commit/3668c5fe9cdaca4862707d653d23af94780f42af),
+  [`bbc3843`](https://github.com/Ripple-TS/ripple/commit/bbc384387e33c538234be36c07cc4b30ef6ce136)]:
+  - @tsrx/ripple@0.1.33
+  - @tsrx/core@0.1.33
+
 ## 0.3.84
 
 ### 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.84",
+  "version": "0.3.85",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -73,8 +73,8 @@
     "clsx": "^2.1.1",
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "0.1.32",
-    "@tsrx/ripple": "0.1.32"
+    "@tsrx/core": "0.1.33",
+    "@tsrx/ripple": "0.1.33"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/constants.js

@@ -2,6 +2,10 @@ export const TEMPLATE_FRAGMENT = 1;
 export const TEMPLATE_USE_IMPORT_NODE = 1 << 1;
 export const IS_CONTROLLED = 1 << 2;
 export const IS_INDEXED = 1 << 3;
+// A @for whose component body is its sole root: renders before the parent
+// `__anchor` (sibling semantics, no `<!>` wrapper). Distinct from IS_CONTROLLED,
+// which renders inside a parent element.
+export const ROOT_CONTROLLED = 1 << 4;
 export const TEMPLATE_SVG_NAMESPACE = 1 << 5;
 export const TEMPLATE_MATHML_NAMESPACE = 1 << 6;
 

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

@@ -1,4 +1,4 @@
-/** @import { Block } from '#client' */
+/** @import { AppendIntoAnchor, Block } from '#client' */
 
 import { is_tsrx_element } from '../../element.js';
 import { render_value } from './expression.js';
@@ -6,7 +6,7 @@ import { active_block, pop_component, push_component } from './runtime.js';
 
 /**
  * @param {Function} fn
- * @param {Node} anchor
+ * @param {Node | AppendIntoAnchor} anchor
  * @param {Record<string, any>} props
  * @param {Block | null} [block=active_block]
  * @returns {void}
@@ -21,7 +21,7 @@ export function render_component(fn, anchor, props, block = active_block) {
 
 /**
  * @param {Function} fn
- * @param {Node} anchor
+ * @param {Node | AppendIntoAnchor} anchor
  * @param {Record<string, any>} props
  * @param {Block | null} [block=active_block]
  * @returns {void}

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

@@ -19,6 +19,10 @@ export var DERIVED = 1 << 18;
 export var DEFERRED = 1 << 19;
 export var PAUSED = 1 << 20;
 export var DESTROYED = 1 << 21;
+// Marks a block that was directly scheduled (the owner of a mutated tracked).
+// Its whole subtree is scanned for dirty subscribers during flush; blocks above
+// it are only traversed along the CONTAINS_UPDATE routing path.
+export var UPDATE_SOURCE = 1 << 22;
 
 export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | SWITCH_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;
 

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

@@ -1,10 +1,11 @@
 /** @import { Block, Tracked } from '#client' */
 
-import { IS_CONTROLLED, IS_INDEXED } from '../../../constants.js';
+import { IS_CONTROLLED, IS_INDEXED, ROOT_CONTROLLED } from '../../../constants.js';
 import { branch, destroy_block, destroy_block_children, render } from './blocks.js';
 import { FOR_BLOCK, TRACKED_ARRAY } from './constants.js';
 import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { create_text, get_first_child, get_last_child, next_sibling } from './operations.js';
+import { append } from './template.js';
 import { active_block, set, tracked, untrack } from './runtime.js';
 import { array_from, is_array } from '@tsrx/core/runtime/language-helpers';
 
@@ -121,7 +122,10 @@ function collection_to_array(collection) {
 export function for_block(node, get_collection, render_fn, flags, render_empty) {
 	var is_controlled = (flags & IS_CONTROLLED) !== 0;
 	var is_indexed = (flags & IS_INDEXED) !== 0;
+	var root_controlled = (flags & ROOT_CONTROLLED) !== 0;
 	var anchor = /** @type {Element | Text} */ (node);
+	/** @type {Node | undefined} */
+	var boundary;
 
 	if (is_controlled) {
 		if (hydrating) {
@@ -133,6 +137,9 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
 	}
 
 	if (hydrating) {
+		if (root_controlled) {
+			boundary = /** @type {Node} */ (hydrate_node);
+		}
 		hydrate_next();
 	}
 
@@ -153,6 +160,10 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
 		null,
 		FOR_BLOCK,
 	);
+
+	if (hydrating && root_controlled) {
+		append(/** @type {ChildNode} */ (node), /** @type {Node} */ (boundary));
+	}
 }
 
 /**
@@ -169,7 +180,10 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
 export function for_block_keyed(node, get_collection, render_fn, flags, get_key, render_empty) {
 	var is_controlled = (flags & IS_CONTROLLED) !== 0;
 	var is_indexed = (flags & IS_INDEXED) !== 0;
+	var root_controlled = (flags & ROOT_CONTROLLED) !== 0;
 	var anchor = /** @type {Element | Text} */ (node);
+	/** @type {Node | undefined} */
+	var boundary;
 
 	if (is_controlled) {
 		var parent_node = /** @type {Element} */ (node);
@@ -183,6 +197,9 @@ export function for_block_keyed(node, get_collection, render_fn, flags, get_key,
 	}
 
 	if (hydrating) {
+		if (root_controlled) {
+			boundary = /** @type {Node} */ (hydrate_node);
+		}
 		hydrate_next();
 	}
 
@@ -208,6 +225,10 @@ export function for_block_keyed(node, get_collection, render_fn, flags, get_key,
 		null,
 		FOR_BLOCK,
 	);
+
+	if (hydrating && root_controlled) {
+		append(/** @type {ChildNode} */ (node), /** @type {Node} */ (boundary));
+	}
 }
 
 /**

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

@@ -2,15 +2,27 @@
 
 import { branch, destroy_block, render } from './blocks.js';
 import { IF_BLOCK, UNINITIALIZED } from './constants.js';
-import { hydrate_next, hydrating } from './hydration.js';
+import { hydrate_next, hydrate_node, hydrating } from './hydration.js';
+import { append } from './template.js';
 
 /**
  * @param {Node} node
  * @param {(set_branch: (fn: (anchor: Node) => void, flag?: boolean) => void) => void} fn
+ * @param {boolean} [root_controlled] When true the block renders directly before
+ *   the component's `__anchor` (no synthesized `<!>` wrapper). During hydration
+ *   the SSR boundary start marker sits at the cursor; we hand it to `append()`
+ *   afterwards so it performs the same context-aware boundary advance the
+ *   eliminated wrapper's `append()` used to do.
  * @returns {void}
  */
-export function if_block(node, fn) {
+export function if_block(node, fn, root_controlled) {
+	/** @type {Node | undefined} */
+	var boundary;
+
 	if (hydrating) {
+		if (root_controlled) {
+			boundary = /** @type {Node} */ (hydrate_node);
+		}
 		hydrate_next();
 	}
 
@@ -52,4 +64,8 @@ export function if_block(node, fn) {
 		null,
 		IF_BLOCK,
 	);
+
+	if (hydrating && root_controlled) {
+		append(/** @type {ChildNode} */ (anchor), /** @type {Node} */ (boundary));
+	}
 }

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

@@ -2,6 +2,7 @@ export {
 	first_child as child,
 	first_child_frag,
 	next_sibling as sibling,
+	append_into,
 	document,
 	create_text,
 	init_operations,

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

@@ -1,3 +1,5 @@
+/** @import { AppendIntoAnchor } from '#client' */
+
 import { TEXT_NODE } from '../../../constants.js';
 import { hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { get_descriptor } from '@tsrx/core/runtime/language-helpers';
@@ -83,6 +85,29 @@ export function first_child(node, is_text) {
 	return child;
 }
 
+/**
+ * Anchor sentinel for all-component children: components render directly into
+ * `parent` instead of each inserting before a placeholder comment. `append()`
+ * detects the sentinel (no `nodeType`) and appendChild()s into `parent`. During
+ * hydration we descend the cursor into `parent` (mirroring first_child) so the
+ * first appended component adopts the server's first child of `parent`.
+ * @param {Node} parent
+ * @returns {AppendIntoAnchor}
+ */
+export function append_into(parent) {
+	if (hydrating) {
+		var child = get_first_child(/** @type {Node} */ (hydrate_node));
+
+		if (child === null) {
+			child = /** @type {Node} */ (hydrate_node).appendChild(create_text());
+		}
+
+		set_hydrate_node(child);
+	}
+
+	return { parent };
+}
+
 /**
  * @template {Node} N
  * @param {N} node

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

@@ -34,6 +34,7 @@ import {
 	SUSPENSE_REJECTED,
 	TRY_BLOCK,
 	DIRECT_CHILD_BLOCK,
+	UPDATE_SOURCE,
 } from './constants.js';
 import {
 	begin_boundary_request,
@@ -93,6 +94,12 @@ let is_micro_task_queued = false;
 let clock = 0;
 /** @type {Block[]} */
 let queued_root_blocks = [];
+// Flush normally only scans the subtree of each directly-scheduled block, since a
+// tracked's subscribers live inside the subtree of the block that owns it. If a
+// tracked is ever read from outside its owner's subtree (e.g. smuggled across
+// sibling subtrees via a module-level variable), that invariant breaks, so we
+// permanently fall back to scanning the whole root tree to stay correct.
+let disable_scoped_flush = false;
 /** @type {(() => void)[]} */
 let queued_microtasks = [];
 /** @type {number} */
@@ -939,22 +946,33 @@ function trigger_track_get(fn, v) {
 function flush_updates(root_block) {
 	/** @type {Block | null} */
 	var current = root_block;
-	var containing_update = null;
 	var pre_effects = [];
 	var other_blocks = [];
 	var effects = [];
-	var containing_update_head = null;
+	// The nearest enclosing directly-scheduled block ("update source"). While it is
+	// non-null we are inside a source's subtree and scan every descendant. Above
+	// sources we only follow the CONTAINS_UPDATE routing path, so sibling subtrees
+	// that contain no update are skipped. When scoping is disabled we treat the
+	// whole root tree as one source — the original full-tree scan.
+	/** @type {Block | null} */
+	var scope_root = disable_scoped_flush ? root_block : null;
 
 	while (current !== null) {
 		var flags = current.f;
+		var on_path = (flags & CONTAINS_UPDATE) !== 0;
 
-		if ((flags & CONTAINS_UPDATE) !== 0) {
+		if (on_path) {
 			current.f ^= CONTAINS_UPDATE;
-			containing_update_head = { v: containing_update, n: containing_update_head };
-			containing_update = current;
 		}
 
-		if ((flags & PAUSED) === 0 && containing_update !== null) {
+		if ((flags & UPDATE_SOURCE) !== 0) {
+			current.f ^= UPDATE_SOURCE;
+			if (scope_root === null) {
+				scope_root = current;
+			}
+		}
+
+		if ((flags & PAUSED) === 0 && (on_path || scope_root !== null)) {
 			if ((flags & PRE_EFFECT_BLOCK) !== 0) {
 				pre_effects.push(current);
 			} else if ((flags & EFFECT_BLOCK) !== 0) {
@@ -976,10 +994,8 @@ function flush_updates(root_block) {
 		current = current.next;
 
 		while (current === null && parent !== null) {
-			if (parent === containing_update) {
-				var head = /** @type {{ v: Block | null, n: any }} */ (containing_update_head);
-				containing_update = head.v;
-				containing_update_head = head.n;
+			if (parent === scope_root) {
+				scope_root = null;
 			}
 			current = parent.next;
 			parent = parent.p;
@@ -1115,6 +1131,10 @@ export function schedule_update(block) {
 	if (scheduler_mode === FLUSH_MICROTASK) {
 		queue_microtask();
 	}
+	// The scheduled block roots the subtree that flush_updates scans for dirty
+	// subscribers. Mark it even if it (or an ancestor) is already on a routing
+	// path, so the early return below still records it as a scan root.
+	block.f |= UPDATE_SOURCE;
 	let current = block;
 
 	while (current !== null) {
@@ -1134,6 +1154,38 @@ export function schedule_update(block) {
  * @param {Tracked | Derived} tracked
  */
 function register_dependency(tracked) {
+	if (!disable_scoped_flush && active_block !== null && active_block !== tracked.b) {
+		// Scoped flush only scans the owner's subtree for dirty subscribers, valid
+		// only while every subscriber lives inside it. The subscriber↔owner
+		// ancestry is structural and stable for a block's lifetime (its `.p` chain
+		// never changes — DOM moves don't reparent blocks), so we only need to
+		// verify *new* dependency edges: if this reaction already depended on
+		// `tracked` on its previous run (it's in the prior chain), the ancestry
+		// walk was already done — skip it. This keeps the (possibly deep) walk off
+		// the hot path for the common case of stable subscriptions.
+		var already_seen = false;
+		var prev_dep = active_reaction === null ? null : active_reaction.d;
+		while (prev_dep !== null) {
+			if (prev_dep.t === tracked) {
+				already_seen = true;
+				break;
+			}
+			prev_dep = prev_dep.n;
+		}
+
+		if (!already_seen) {
+			var owner = tracked.b;
+			/** @type {Block | null} */
+			var node = active_block;
+			while (node !== null && node !== owner) {
+				node = node.p;
+			}
+			if (node === null) {
+				disable_scoped_flush = true;
+			}
+		}
+	}
+
 	var dependency = active_dependency;
 
 	if (dependency === null) {

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

@@ -2,7 +2,7 @@
 
 import { branch, destroy_block, render } from './blocks.js';
 import { SWITCH_BLOCK } from './constants.js';
-import { hydrate_next, hydrating } from './hydration.js';
+import { hydrate_next, hydrate_node, hydrating } from './hydration.js';
 import { next_sibling } from './operations.js';
 import { append } from './template.js';
 
@@ -32,10 +32,20 @@ function move(block, anchor) {
 /**
  * @param {ChildNode} anchor
  * @param {() => ((anchor: ChildNode) => void)[] | null} fn
+ * @param {boolean} [root_controlled] When true the block renders before the
+ *   component's `__anchor` (no `<!>` wrapper); during hydration the SSR boundary
+ *   marker is handed to `append()` afterwards for the context-aware cursor
+ *   advance the eliminated wrapper used to perform.
  * @returns {void}
  */
-export function switch_block(anchor, fn) {
+export function switch_block(anchor, fn, root_controlled) {
+	/** @type {Node | undefined} */
+	var boundary;
+
 	if (hydrating) {
+		if (root_controlled) {
+			boundary = /** @type {Node} */ (hydrate_node);
+		}
 		hydrate_next();
 	}
 
@@ -82,4 +92,8 @@ export function switch_block(anchor, fn) {
 		null,
 		SWITCH_BLOCK,
 	);
+
+	if (hydrating && root_controlled) {
+		append(anchor, /** @type {Node} */ (boundary));
+	}
 }

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

@@ -1,4 +1,4 @@
-/** @import { Block } from '#client' */
+/** @import { AppendIntoAnchor, Block } from '#client' */
 
 import {
 	COMMENT_NODE,
@@ -137,7 +137,7 @@ export function template(content, flags, count = 1) {
 
 /**
  * Appends a DOM node before the anchor node.
- * @param {ChildNode} anchor - The anchor node.
+ * @param {ChildNode | AppendIntoAnchor} anchor - The anchor node.
  * @param {Node} dom - The DOM node to append.
  * @param {boolean} [skip_advance] - If true, don't advance hydrate_node (used when next() already positioned it).
  */
@@ -191,6 +191,14 @@ export function append(anchor, dom, skip_advance) {
 		hydrate_advance();
 		return;
 	}
+	if ('parent' in anchor) {
+		// Append-into-parent sentinel: an all-component-children element passes a
+		// `{ parent }` object (no `nodeType`) so each component's root appends as
+		// the host's last child instead of inserting before a placeholder comment.
+		// The block still self-marks its range via assign_nodes, so teardown works.
+		anchor.parent.appendChild(dom);
+		return;
+	}
 	anchor.before(/** @type {Node} */ (dom));
 }
 

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

@@ -9,7 +9,8 @@ import {
 	resume_block,
 } from './blocks.js';
 import { TRY_BLOCK } from './constants.js';
-import { hydrate_next, hydrating } from './hydration.js';
+import { hydrate_next, hydrate_node, hydrating } from './hydration.js';
+import { append } from './template.js';
 import {
 	active_block,
 	queue_microtask,
@@ -34,8 +35,10 @@ import {
  * @param {PendingFunction | null} [pending_fn=null]
  * @returns {void}
  */
-export function try_block(node, try_fn, catch_fn, pending_fn = null) {
+export function try_block(node, try_fn, catch_fn, pending_fn = null, root_controlled = false) {
 	var anchor = node;
+	/** @type {Node | undefined} */
+	var boundary;
 	var pending_count = 0;
 	var request_version = 0;
 	/** @type {Set<number>} */
@@ -316,12 +319,19 @@ export function try_block(node, try_fn, catch_fn, pending_fn = null) {
 		if (pending_fn !== null) {
 			has_resolved = true;
 		}
+		if (root_controlled) {
+			boundary = /** @type {Node} */ (hydrate_node);
+		}
 		hydrate_next(); // consume <!--[-->
 	}
 
 	try_block = create_try_block(() => {
 		resolved_branch = boundary_fn_running_block(() => try_fn(anchor));
 	}, state);
+
+	if (hydrating && root_controlled) {
+		append(/** @type {ChildNode} */ (node), /** @type {Node} */ (boundary));
+	}
 }
 
 /**

package/src/runtime/internal/client/types.d.ts

@@ -26,6 +26,10 @@ export type DeferredTrackedEntry = {
 	r: number; // request version id
 };
 
+export type AppendIntoAnchor = {
+	parent: Node;
+};
+
 export type Block = {
 	co: null | Component;
 	d: null | Dependency;

package/tests/client/__snapshots__/for.test.tsrx.snap

@@ -319,7 +319,6 @@ exports[`for statements > renders a simple dynamic array 2`] = `
 
 exports[`for statements > renders a simple static array 1`] = `
 <div>
-  <!---->
   <div
     class="Item 1"
   >
@@ -335,7 +334,6 @@ exports[`for statements > renders a simple static array 1`] = `
   >
     Item 3
   </div>
-  <!---->
   
 </div>
 `;

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

@@ -579,8 +579,11 @@ function App() @{
 `;
 		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
-		expect(result).toContain('const nested = <span class="nested-tsx">');
-		expect(result).toContain('return content;');
+		// An authored `<>…</>` is kept verbatim — both as a value (the `nested`
+		// initializer) and as the component's render output (`<>{content}</>`) —
+		// instead of unwrapping to its single child.
+		expect(result).toContain('const nested = <><span class="nested-tsx">');
+		expect(result).toContain('return <>{content}</>;');
 		expect(result).toContain('const content = <div class="native">');
 	});
 

package/tests/client/composite/__snapshots__/composite.render.test.tsrx.snap

@@ -2,7 +2,6 @@
 
 exports[`composite > render > correct handles passing through component props and children 1`] = `
 <div>
-  <!---->
   <div>
     <div>
       I am A
@@ -17,21 +16,18 @@ exports[`composite > render > correct handles passing through component props an
     </div>
     <!---->
   </div>
-  <!---->
   
 </div>
 `;
 
 exports[`composite > render > render simple text as children 1`] = `
 <div>
-  <!---->
   <button
     class="my-button"
   >
     Click Me
     <!---->
   </button>
-  <!---->
   
 </div>
 `;