chore: move some code around (#10767)

* move <svelte:component> code

* move <svelte:element> code

* unused import

* move <svelte:head> code

* unused import

* unused import

* typo

* move snippet code, remove blocks.js

* move CSS props code

* move html code

* remove unused import

---------

Co-authored-by: Rich Harris <[email protected]>

Author: Rich-Harris

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -1895,7 +1895,7 @@ export const template_visitors = {
 
 		if (is_reactive) {
 			context.state.after_update.push(
-				b.stmt(b.call('$.snippet_effect', b.thunk(snippet_function), ...args))
+				b.stmt(b.call('$.snippet', b.thunk(snippet_function), ...args))
 			);
 		} else {
 			context.state.after_update.push(

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

@@ -0,0 +1,65 @@
+import { namespace_svg } from '../../../../constants.js';
+import { current_hydration_fragment, hydrate_block_anchor, hydrating } from '../../hydration.js';
+import { empty } from '../../operations.js';
+import { render_effect } from '../../reactivity/effects.js';
+import { insert, remove } from '../../reconciler.js';
+
+/**
+ * @param {Element | Text | Comment} anchor
+ * @param {boolean} is_html
+ * @param {() => Record<string, string>} props
+ * @param {(anchor: Element | Text | Comment) => any} component
+ * @returns {void}
+ */
+export function css_props(anchor, is_html, props, component) {
+	hydrate_block_anchor(anchor);
+
+	/** @type {HTMLElement | SVGElement} */
+	let tag;
+
+	/** @type {Text | Comment} */
+	let component_anchor;
+
+	if (hydrating) {
+		// Hydration: css props element is surrounded by a ssr comment ...
+		tag = /** @type {HTMLElement | SVGElement} */ (current_hydration_fragment[0]);
+		// ... and the child(ren) of the css props element is also surround by a ssr comment
+		component_anchor = /** @type {Comment} */ (tag.firstChild);
+	} else {
+		if (is_html) {
+			tag = document.createElement('div');
+			tag.style.display = 'contents';
+		} else {
+			tag = document.createElementNS(namespace_svg, 'g');
+		}
+
+		insert(tag, null, anchor);
+		component_anchor = empty();
+		tag.appendChild(component_anchor);
+	}
+
+	component(component_anchor);
+
+	/** @type {Record<string, string>} */
+	let current_props = {};
+
+	const effect = render_effect(() => {
+		const next_props = props();
+
+		for (const key in current_props) {
+			if (!(key in next_props)) {
+				tag.style.removeProperty(key);
+			}
+		}
+
+		for (const key in next_props) {
+			tag.style.setProperty(key, next_props[key]);
+		}
+
+		current_props = next_props;
+	});
+
+	effect.ondestroy = () => {
+		remove(tag);
+	};
+}

packages/svelte/src/internal/client/dom/blocks/css-props.js

@@ -0,0 +1,29 @@
+import { render_effect } from '../../reactivity/effects.js';
+import { reconcile_html, remove } from '../../reconciler.js';
+
+/**
+ * @param {Element | Text | Comment} dom
+ * @param {() => string} get_value
+ * @param {boolean} svg
+ * @returns {void}
+ */
+export function html(dom, get_value, svg) {
+	/** @type {import('#client').TemplateNode | import('#client').TemplateNode[]} */
+	let html_dom;
+
+	/** @type {string} */
+	let value;
+
+	const effect = render_effect(() => {
+		if (value !== (value = get_value())) {
+			if (html_dom) remove(html_dom);
+			html_dom = reconcile_html(dom, value, svg);
+		}
+	});
+
+	effect.ondestroy = () => {
+		if (html_dom) {
+			remove(html_dom);
+		}
+	};
+}

packages/svelte/src/internal/client/dom/blocks/html.js

@@ -0,0 +1,40 @@
+import { SNIPPET_BLOCK } from '../../constants.js';
+import { render_effect } from '../../reactivity/effects.js';
+import { remove } from '../../reconciler.js';
+import { current_block, untrack } from '../../runtime.js';
+
+/**
+ * @param {() => Function | null | undefined} get_snippet
+ * @param {Node} node
+ * @param {(() => any)[]} args
+ * @returns {void}
+ */
+export function snippet(get_snippet, node, ...args) {
+	/** @type {import('#client').SnippetBlock} */
+	const block = {
+		// dom
+		d: null,
+		// parent
+		p: /** @type {import('#client').Block} */ (current_block),
+		// effect
+		e: null,
+		// transition
+		r: null,
+		// type
+		t: SNIPPET_BLOCK
+	};
+
+	render_effect(() => {
+		// Only rerender when the snippet function itself changes,
+		// not when an eagerly-read prop inside the snippet function changes
+		const snippet = get_snippet();
+		if (snippet) {
+			untrack(() => snippet(node, ...args));
+		}
+		return () => {
+			if (block.d !== null) {
+				remove(block.d);
+			}
+		};
+	}, block);
+}

packages/svelte/src/internal/client/dom/blocks/snippet.js

@@ -0,0 +1,147 @@
+import { DYNAMIC_COMPONENT_BLOCK } from '../../constants.js';
+import { hydrate_block_anchor } from '../../hydration.js';
+import { destroy_effect, render_effect } from '../../reactivity/effects.js';
+import { remove } from '../../reconciler.js';
+import { current_block, execute_effect } from '../../runtime.js';
+import { trigger_transitions } from '../../transitions.js';
+
+/**
+ * @template P
+ * @param {Comment} anchor_node
+ * @param {() => (props: P) => void} component_fn
+ * @param {(component: (props: P) => void) => void} render_fn
+ * @returns {void}
+ */
+export function component(anchor_node, component_fn, render_fn) {
+	/** @type {import('#client').DynamicComponentBlock} */
+	const block = {
+		// dom
+		d: null,
+		// effect
+		e: null,
+		// parent
+		p: /** @type {import('#client').Block} */ (current_block),
+		// transition
+		r: null,
+		// type
+		t: DYNAMIC_COMPONENT_BLOCK
+	};
+
+	/** @type {null | import('#client').Render} */
+	let current_render = null;
+	hydrate_block_anchor(anchor_node);
+
+	/** @type {null | ((props: P) => void)} */
+	let component = null;
+
+	block.r =
+		/**
+		 * @param {import('#client').Transition} transition
+		 * @returns {void}
+		 */
+		(transition) => {
+			const render = /** @type {import('#client').Render} */ (current_render);
+			const transitions = render.s;
+			transitions.add(transition);
+			transition.f(() => {
+				transitions.delete(transition);
+				if (transitions.size === 0) {
+					// If the current render has changed since, then we can remove the old render
+					// effect as it's stale.
+					if (current_render !== render && render.e !== null) {
+						if (render.d !== null) {
+							remove(render.d);
+							render.d = null;
+						}
+						destroy_effect(render.e);
+						render.e = null;
+					}
+				}
+			});
+		};
+
+	const create_render_effect = () => {
+		/** @type {import('#client').Render} */
+		const render = {
+			d: null,
+			e: null,
+			s: new Set(),
+			p: current_render
+		};
+
+		// Managed effect
+		render.e = render_effect(
+			() => {
+				const current = block.d;
+				if (current !== null) {
+					remove(current);
+					block.d = null;
+				}
+				if (component) {
+					render_fn(component);
+				}
+				render.d = block.d;
+				block.d = null;
+			},
+			block,
+			true
+		);
+
+		current_render = render;
+	};
+
+	const render = () => {
+		const render = current_render;
+
+		if (render === null) {
+			create_render_effect();
+			return;
+		}
+
+		const transitions = render.s;
+
+		if (transitions.size === 0) {
+			if (render.d !== null) {
+				remove(render.d);
+				render.d = null;
+			}
+			if (render.e) {
+				execute_effect(render.e);
+			} else {
+				create_render_effect();
+			}
+		} else {
+			create_render_effect();
+			trigger_transitions(transitions, 'out');
+		}
+	};
+
+	const component_effect = render_effect(
+		() => {
+			const next_component = component_fn();
+			if (component !== next_component) {
+				component = next_component;
+				render();
+			}
+		},
+		block,
+		false
+	);
+
+	component_effect.ondestroy = () => {
+		let render = current_render;
+		while (render !== null) {
+			const dom = render.d;
+			if (dom !== null) {
+				remove(dom);
+			}
+			const effect = render.e;
+			if (effect !== null) {
+				destroy_effect(effect);
+			}
+			render = render.p;
+		}
+	};
+
+	block.e = component_effect;
+}