simplify

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -1003,30 +1003,24 @@ function serialize_inline_component(node, expression, context) {
 		node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic);
 
 	if (custom_css_props.length > 0) {
-		statement = b.stmt(
-			b.call(
-				'$.css_props',
-				b.id('$$payload'),
-				b.literal(context.state.namespace === 'svg' ? false : true),
-				b.object(custom_css_props),
-				b.thunk(b.block([statement])),
-				dynamic && b.true // TODO do we need the preceding anchor for dynamic components?
+		context.state.template.push(
+			b.stmt(
+				b.call(
+					'$.css_props',
+					b.id('$$payload'),
+					b.literal(context.state.namespace === 'svg' ? false : true),
+					b.object(custom_css_props),
+					b.thunk(b.block([statement]))
+				)
 			)
 		);
-	}
-
-	if (dynamic) {
-		if (custom_css_props.length === 0) {
-			context.state.template.push(block_open);
-		}
-
-		context.state.template.push(statement);
 	} else {
 		context.state.template.push(statement);
-	}
 
-	if (custom_css_props.length === 0 && !context.state.skip_hydration_boundaries) {
-		context.state.template.push(block_close);
+		if (!context.state.skip_hydration_boundaries) {
+			// TODO do we need this at all, for non-dynamic components?
+			context.state.template.push(block_close);
+		}
 	}
 }
 

packages/svelte/src/internal/client/dom/blocks/svelte-component.js

@@ -11,10 +11,6 @@ import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
  * @returns {void}
  */
 export function component(anchor, get_component, render_fn) {
-	if (hydrating) {
-		hydrate_next();
-	}
-
 	/** @type {C} */
 	let component;
 

packages/svelte/src/internal/client/render.js

@@ -6,7 +6,7 @@ import {
 	HYDRATION_START,
 	PassiveDelegatedEvents
 } from '../../constants.js';
-import { flush_sync, push, pop, current_component_context } from './runtime.js';
+import { flush_sync, push, pop, current_component_context, current_effect } from './runtime.js';
 import { effect_root, branch } from './reactivity/effects.js';
 import {
 	hydrate_next,
@@ -21,6 +21,7 @@ import { reset_head_anchor } from './dom/blocks/svelte-head.js';
 import * as w from './warnings.js';
 import * as e from './errors.js';
 import { validate_component } from '../shared/validate.js';
+import { assign_nodes } from './dom/template.js';
 
 /** @type {Set<string>} */
 export const all_registered_events = new Set();
@@ -144,12 +145,12 @@ export function hydrate(component, options) {
 		return flush_sync(() => {
 			set_hydrating(true);
 
-			var anchor = target.firstChild;
+			var anchor = /** @type {import('#client').TemplateNode} */ (target.firstChild);
 			while (
 				anchor &&
 				(anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== HYDRATION_START)
 			) {
-				anchor = anchor.nextSibling;
+				anchor = /** @type {import('#client').TemplateNode} */ (anchor.nextSibling);
 			}
 
 			if (!anchor) {
@@ -258,11 +259,21 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
 				/** @type {any} */ (props).$$events = events;
 			}
 
+			if (hydrating) {
+				assign_nodes(/** @type {import('#client').TemplateNode} */ (anchor), null);
+			}
+
 			should_intro = intro;
 			// @ts-expect-error the public typings are not what the actual function looks like
 			component = Component(anchor, props) || {};
 			should_intro = true;
 
+			if (hydrating) {
+				/** @type {import('#client').Effect & { nodes: import('#client').EffectNodes }} */ (
+					current_effect
+				).nodes.end = hydrate_node;
+			}
+
 			if (context) {
 				pop();
 			}

packages/svelte/src/internal/server/index.js

@@ -166,19 +166,15 @@ export function attr(name, value, is_boolean = false) {
  * @param {boolean} is_html
  * @param {Record<string, string>} props
  * @param {() => void} component
- * @param {boolean} dynamic
  * @returns {void}
  */
-export function css_props(payload, is_html, props, component, dynamic) {
+export function css_props(payload, is_html, props, component) {
 	const styles = style_object_to_string(props);
 	if (is_html) {
 		payload.out += `<div style="display: contents; ${styles}">`;
 	} else {
 		payload.out += `<g style="${styles}">`;
 	}
-	if (dynamic) {
-		payload.out += `<!---->`;
-	}
 	component();
 	if (is_html) {
 		payload.out += `<!----></div>`;