chore: simplify internal DOM operations (#11741)

* chore: simplify internal DOM operations * chore: simplify internal DOM operations * chore: simplify internal DOM operations
sveltejs · May 23, 2024 · 401c8b2 · 401c8b2
1 parent 4411584
commit 401c8b2
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 91 deletions.
diff --git a/packages/svelte/src/internal/client/dom/elements/class.js b/packages/svelte/src/internal/client/dom/elements/class.js
@@ -1,5 +1,4 @@
 import { hydrating } from '../hydration.js';
-import { set_class_name } from '../operations.js';
 
 /**
  * @param {SVGElement} dom
@@ -83,7 +82,7 @@ export function set_class(dom, value) {
 		if (value == null) {
 			dom.removeAttribute('class');
 		} else {
-			set_class_name(dom, next_class_name);
+			dom.className = next_class_name;
 		}
 
 		// @ts-expect-error need to add __className to patched prototype

diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
@@ -1,5 +1,4 @@
 import { hydrate_anchor, hydrate_nodes, hydrating } from './hydration.js';
-import { get_descriptor } from '../utils.js';
 import { DEV } from 'esm-env';
 import { init_array_prototype_warnings } from '../dev/equality.js';
 
@@ -15,24 +14,6 @@ var element_prototype;
 /** @type {Text} */
 var text_prototype;
 
-/** @type {typeof Node.prototype.appendChild} */
-var append_child_method;
-
-/** @type {typeof Node.prototype.cloneNode} */
-var clone_node_method;
-
-/** @type {(this: Node) => ChildNode | null} */
-var first_child_get;
-
-/** @type {(this: Node) => ChildNode | null} */
-var next_sibling_get;
-
-/** @type {(this: Node, text: string ) => void} */
-var text_content_set;
-
-/** @type {(this: Element, class_name: string) => void} */
-var class_name_set;
-
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /**
  * @type {Window}
@@ -56,9 +37,6 @@ export function init_operations() {
 	element_prototype = Element.prototype;
 	text_prototype = Text.prototype;
 
-	append_child_method = node_prototype.appendChild;
-	clone_node_method = node_prototype.cloneNode;
-
 	$window = window;
 	$document = document;
 
@@ -80,47 +58,6 @@ export function init_operations() {
 
 		init_array_prototype_warnings();
 	}
-
-	first_child_get = /** @type {(this: Node) => ChildNode | null} */ (
-		// @ts-ignore
-		get_descriptor(node_prototype, 'firstChild').get
-	);
-
-	next_sibling_get = /** @type {(this: Node) => ChildNode | null} */ (
-		// @ts-ignore
-		get_descriptor(node_prototype, 'nextSibling').get
-	);
-
-	text_content_set = /** @type {(this: Node, text: string ) => void} */ (
-		// @ts-ignore
-		get_descriptor(node_prototype, 'textContent').set
-	);
-
-	class_name_set = /** @type {(this: Element, class_name: string) => void} */ (
-		// @ts-ignore
-		get_descriptor(element_prototype, 'className').set
-	);
-}
-
-/**
- * @template {Element} E
- * @template {Node} T
- * @param {E} element
- * @param {T} child
- */
-export function append_child(element, child) {
-	append_child_method.call(element, child);
-}
-
-/**
- * @template {Node} N
- * @param {N} node
- * @param {boolean} deep
- * @returns {N}
- */
-/*#__NO_SIDE_EFFECTS__*/
-export function clone_node(node, deep) {
-	return /** @type {N} */ (clone_node_method.call(node, deep));
 }
 
 /** @returns {Text} */
@@ -135,7 +72,7 @@ export function empty() {
  */
 /*#__NO_SIDE_EFFECTS__*/
 export function child(node) {
-	const child = first_child_get.call(node);
+	const child = node.firstChild;
 	if (!hydrating) return child;
 
 	// Child can be null if we have an element with a single child, like `<p>{text}</p>`, where `text` is empty
@@ -155,7 +92,7 @@ export function child(node) {
 export function first_child(fragment, is_text) {
 	if (!hydrating) {
 		// when not hydrating, `fragment` is a `DocumentFragment` (the result of calling `open_frag`)
-		return first_child_get.call(/** @type {DocumentFragment} */ (fragment));
+		return /** @type {DocumentFragment} */ (fragment).firstChild;
 	}
 
 	// when we _are_ hydrating, `fragment` is an array of nodes
@@ -181,7 +118,7 @@ export function first_child(fragment, is_text) {
  */
 /*#__NO_SIDE_EFFECTS__*/
 export function sibling(node, is_text = false) {
-	const next_sibling = next_sibling_get.call(node);
+	const next_sibling = node.nextSibling;
 
 	if (!hydrating) {
 		return next_sibling;
@@ -205,23 +142,13 @@ export function sibling(node, is_text = false) {
 	return hydrate_anchor(/** @type {Node} */ (next_sibling));
 }
 
-/**
- * @template {Element} N
- * @param {N} node
- * @param {string} class_name
- * @returns {void}
- */
-export function set_class_name(node, class_name) {
-	class_name_set.call(node, class_name);
-}
-
 /**
  * @template {Node} N
  * @param {N} node
  * @returns {void}
  */
 export function clear_text_content(node) {
-	text_content_set.call(node, '');
+	node.textContent = '';
 }
 
 /** @param {string} name */

diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
@@ -1,5 +1,5 @@
 import { hydrate_nodes, hydrating } from './hydration.js';
-import { clone_node, empty } from './operations.js';
+import { empty } from './operations.js';
 import { create_fragment_from_html } from './reconciler.js';
 import { current_effect } from '../runtime.js';
 import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../constants.js';
@@ -55,7 +55,7 @@ export function template(content, flags) {
 			node = create_fragment_from_html(content);
 			if (!is_fragment) node = /** @type {Node} */ (node.firstChild);
 		}
-		var clone = use_import_node ? document.importNode(node, true) : clone_node(node, true);
+		var clone = use_import_node ? document.importNode(node, true) : node.cloneNode(true);
 
 		push_template_node(
 			is_fragment
@@ -122,7 +122,7 @@ export function svg_template(content, flags) {
 			}
 		}
 
-		var clone = clone_node(node, true);
+		var clone = node.cloneNode(true);
 
 		push_template_node(
 			is_fragment
@@ -189,7 +189,7 @@ export function mathml_template(content, flags) {
 			}
 		}
 
-		var clone = clone_node(node, true);
+		var clone = node.cloneNode(true);
 
 		push_template_node(
 			is_fragment

diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
@@ -1,11 +1,5 @@
 import { DEV } from 'esm-env';
-import {
-	append_child,
-	clear_text_content,
-	create_element,
-	empty,
-	init_operations
-} from './dom/operations.js';
+import { clear_text_content, create_element, empty, init_operations } from './dom/operations.js';
 import { HYDRATION_ERROR, HYDRATION_START, PassiveDelegatedEvents } from '../../constants.js';
 import { flush_sync, push, pop, current_component_context } from './runtime.js';
 import { effect_root, branch } from './reactivity/effects.js';
@@ -330,7 +324,8 @@ export async function append_styles(target, style_sheet_id, styles) {
 		const style = create_element('style');
 		style.id = style_sheet_id;
 		style.textContent = styles;
-		append_child(/** @type {Document} */ (append_styles_to).head || append_styles_to, style);
+		const target = /** @type {Document} */ (append_styles_to).head || append_styles_to;
+		target.appendChild(style);
 	}
 }