slight refactor

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -399,6 +399,11 @@ export default class InlineComponentWrapper extends Wrapper {
 			return b`${name}.$on("${handler.name}", ${snippet});`;
 		});
 
+		const mount_target = has_css_custom_properties ? css_custom_properties_wrapper : (parent_node || '#target');
+		const mount_anchor = has_css_custom_properties ? 'null' : (parent_node ? 'null' : '#anchor');
+		const to_claim = parent_nodes && this.renderer.options.hydratable;
+		let claim_nodes = parent_nodes;
+
 		if (this.node.name === 'svelte:component') {
 			const switch_value = block.get_unique_name('switch_value');
 			const switch_props = block.get_unique_name('switch_props');
@@ -421,10 +426,6 @@ export default class InlineComponentWrapper extends Wrapper {
 				}
 			}
 
-			this.create_claim_chunk(block, parent_nodes, name, css_custom_properties_wrapper);
-
-			this.create_mount_chunk(block, parent_node, name, css_custom_properties_wrapper);
-
 			block.chunks.init.push(b`
 				var ${switch_value} = ${snippet};
 
@@ -447,6 +448,14 @@ export default class InlineComponentWrapper extends Wrapper {
 				b`if (${name}) @create_component(${name}.$$.fragment);`
 			);
 
+			block.chunks.mount.push(b`if (${name}) @mount_component(${name}, ${mount_target}, ${mount_anchor});`);
+			if (css_custom_properties_wrapper) this.create_css_custom_properties_wrapper_mount_chunk(block, parent_node, css_custom_properties_wrapper);
+
+			if (to_claim) {
+				if (css_custom_properties_wrapper) claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper);
+				block.chunks.claim.push(b`if (${name}) @claim_component(${name}.$$.fragment, ${claim_nodes});`);
+			}
+
 			if (updates.length) {
 				block.chunks.update.push(b`
 					${updates}
@@ -454,7 +463,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			}
 
 			const tmp_anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
-			const anchor = css_custom_properties_wrapper ? 'null' : tmp_anchor;
+			const anchor = has_css_custom_properties ? 'null' : tmp_anchor;
 			const update_mount_node = has_css_custom_properties ? css_custom_properties_wrapper : this.get_update_mount_node(tmp_anchor);
 
 			block.chunks.update.push(b`
@@ -516,9 +525,13 @@ export default class InlineComponentWrapper extends Wrapper {
 			}
 			block.chunks.create.push(b`@create_component(${name}.$$.fragment);`);
 
-			this.create_claim_chunk(block, parent_nodes, name, css_custom_properties_wrapper);
+			if (css_custom_properties_wrapper) this.create_css_custom_properties_wrapper_mount_chunk(block, parent_node, css_custom_properties_wrapper);
+			block.chunks.mount.push(b`@mount_component(${name}, ${mount_target}, ${mount_anchor});`);
 
-			this.create_mount_chunk(block, parent_node, name, css_custom_properties_wrapper);
+			if (to_claim) {
+				if (css_custom_properties_wrapper) claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper);
+				block.chunks.claim.push(b`@claim_component(${name}.$$.fragment, ${claim_nodes});`);
+			}
 
 			block.chunks.intro.push(b`
 				@transition_in(${name}.$$.fragment, #local);
@@ -541,56 +554,35 @@ export default class InlineComponentWrapper extends Wrapper {
 		}
 	}
 
-	private create_mount_chunk(
+	private create_css_custom_properties_wrapper_mount_chunk(
 		block: Block,
 		parent_node: Identifier,
-		name: Identifier,
 		css_custom_properties_wrapper: Identifier | null
 	) {
-			if (css_custom_properties_wrapper) {
+			if (parent_node) {
-				if (parent_node) {
+				block.chunks.mount.push(b`@append(${parent_node}, ${css_custom_properties_wrapper})`);
-					block.chunks.mount.push(b`@append(${parent_node}, ${css_custom_properties_wrapper})`);
+				if (is_head(parent_node)) {
-					if (is_head(parent_node)) {
+					block.chunks.destroy.push(b`@detach(${css_custom_properties_wrapper});`);
-						block.chunks.destroy.push(b`@detach(${css_custom_properties_wrapper});`);
-					}
-				} else {
-					block.chunks.mount.push(b`@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
-					// TODO we eventually need to consider what happens to elements
-					// that belong to the same outgroup as an outroing element...
-					block.chunks.destroy.push(b`if (detaching && ${name}) @detach(${css_custom_properties_wrapper});`);
 				}
-			}
-
-			const target = css_custom_properties_wrapper || parent_node || '#target';
-			const anchor = css_custom_properties_wrapper ? 'null' : (parent_node ? 'null' : '#anchor');
-			if (this.node.name === 'svelte:component') {
-				block.chunks.mount.push(b`if (${name}) @mount_component(${name}, ${target}, ${anchor});`);
 			} else {
-				block.chunks.mount.push(b`@mount_component(${name}, ${target}, ${anchor});`);
+				block.chunks.mount.push(b`@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
+				// TODO we eventually need to consider what happens to elements
+				// that belong to the same outgroup as an outroing element...
+				block.chunks.destroy.push(b`if (detaching && ${this.var}) @detach(${css_custom_properties_wrapper});`);
 			}
 	}
 
-	private create_claim_chunk(
+	private create_css_custom_properties_wrapper_claim_chunk(
 		block: Block,
 		parent_nodes: Identifier,
-		name: Identifier,
 		css_custom_properties_wrapper: Identifier | null
 	) {
-		if (parent_nodes && this.renderer.options.hydratable) {
+		const nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
-			let nodes = parent_nodes;
+		block.chunks.claim.push(b`
-			if (css_custom_properties_wrapper) {
+			${css_custom_properties_wrapper} = @claim_element(${parent_nodes}, "DIV", { style: true })
-				nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
+			var ${nodes} = @children(${css_custom_properties_wrapper});
-				block.chunks.claim.push(b`
+		`);
-					${css_custom_properties_wrapper} = @claim_element(${parent_nodes}, "DIV", { style: true })
+		return nodes;
-					var ${nodes} = @children(${css_custom_properties_wrapper});
-				`);
-			}
-			if (this.node.name === 'svelte:component') {
-				block.chunks.claim.push(b`if (${name}) @claim_component(${name}.$$.fragment, ${nodes});`);
-			} else {
-				block.chunks.claim.push(b`@claim_component(${name}.$$.fragment, ${nodes});`);
-			}
-		}
 	}
 
 	private set_css_custom_properties(