chore: move more element stuff (#10780)

Rich-Harris · web-flow · commit eb40417c36a2 · 2024-03-12T15:57:40.000-04:00
* move bindings

* move transitions

* move custom-elements.js

* move operations.js

* move hydration.js

* move reconciler.js

* move map stuff out of dom operations

* move action code

* move transition code

* missing imports

---------

Co-authored-by: Rich Harris &lt;rich.harris@vercel.com&gt;
diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -1,9 +1,9 @@
 import { is_promise } from '../../../common.js';
-import { hydrate_block_anchor } from '../../hydration.js';
-import { remove } from '../../reconciler.js';
+import { hydrate_block_anchor } from '../hydration.js';
+import { remove } from '../reconciler.js';
 import { current_block, execute_effect, flushSync } from '../../runtime.js';
 import { destroy_effect, render_effect } from '../../reactivity/effects.js';
-import { trigger_transitions } from '../../transitions.js';
+import { trigger_transitions } from '../elements/transitions.js';
 import { AWAIT_BLOCK, UNINITIALIZED } from '../../constants.js';
 
 /** @returns {import('../../types.js').AwaitBlock} */
diff --git a/packages/svelte/src/internal/client/dom/blocks/css-props.js b/packages/svelte/src/internal/client/dom/blocks/css-props.js
@@ -1,8 +1,8 @@
 import { namespace_svg } from '../../../../constants.js';
-import { current_hydration_fragment, hydrate_block_anchor, hydrating } from '../../hydration.js';
-import { empty } from '../../operations.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';
+import { insert, remove } from '../reconciler.js';
 
 /**
  * @param {Element | Text | Comment} anchor
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -13,14 +13,14 @@ import {
 	hydrate_block_anchor,
 	hydrating,
 	set_current_hydration_fragment
-} from '../../hydration.js';
-import { clear_text_content, empty, map_get, map_set } from '../../operations.js';
-import { insert, remove } from '../../reconciler.js';
+} from '../hydration.js';
+import { clear_text_content, empty } from '../operations.js';
+import { insert, remove } from '../reconciler.js';
 import { current_block, execute_effect } from '../../runtime.js';
 import { destroy_effect, render_effect } from '../../reactivity/effects.js';
 import { source, mutable_source, set } from '../../reactivity/sources.js';
-import { trigger_transitions } from '../../transitions.js';
-import { is_array, is_frozen } from '../../utils.js';
+import { trigger_transitions } from '../elements/transitions.js';
+import { is_array, is_frozen, map_get, map_set } from '../../utils.js';
 import { EACH_BLOCK, EACH_ITEM_BLOCK, STATE_SYMBOL } from '../../constants.js';
 
 const NEW_BLOCK = -1;
diff --git a/packages/svelte/src/internal/client/dom/blocks/html.js b/packages/svelte/src/internal/client/dom/blocks/html.js
@@ -1,5 +1,5 @@
 import { render_effect } from '../../reactivity/effects.js';
-import { reconcile_html, remove } from '../../reconciler.js';
+import { reconcile_html, remove } from '../reconciler.js';
 
 /**
  * @param {Element | Text | Comment} dom
diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js
@@ -4,11 +4,11 @@ import {
 	hydrate_block_anchor,
 	hydrating,
 	set_current_hydration_fragment
-} from '../../hydration.js';
-import { remove } from '../../reconciler.js';
+} from '../hydration.js';
+import { remove } from '../reconciler.js';
 import { current_block, execute_effect } from '../../runtime.js';
 import { destroy_effect, render_effect } from '../../reactivity/effects.js';
-import { trigger_transitions } from '../../transitions.js';
+import { trigger_transitions } from '../elements/transitions.js';
 
 /** @returns {import('../../types.js').IfBlock} */
 function create_if_block() {
diff --git a/packages/svelte/src/internal/client/dom/blocks/key.js b/packages/svelte/src/internal/client/dom/blocks/key.js
@@ -1,9 +1,9 @@
 import { UNINITIALIZED, KEY_BLOCK } from '../../constants.js';
-import { hydrate_block_anchor } from '../../hydration.js';
-import { remove } from '../../reconciler.js';
+import { hydrate_block_anchor } from '../hydration.js';
+import { remove } from '../reconciler.js';
 import { current_block, execute_effect } from '../../runtime.js';
 import { destroy_effect, render_effect } from '../../reactivity/effects.js';
-import { trigger_transitions } from '../../transitions.js';
+import { trigger_transitions } from '../elements/transitions.js';
 import { safe_not_equal } from '../../reactivity/equality.js';
 
 /** @returns {import('../../types.js').KeyBlock} */
diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js
@@ -1,6 +1,6 @@
 import { SNIPPET_BLOCK } from '../../constants.js';
 import { render_effect } from '../../reactivity/effects.js';
-import { remove } from '../../reconciler.js';
+import { remove } from '../reconciler.js';
 import { current_block, untrack } from '../../runtime.js';
 
 /**
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js b/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
@@ -1,9 +1,9 @@
 import { DYNAMIC_COMPONENT_BLOCK } from '../../constants.js';
-import { hydrate_block_anchor } from '../../hydration.js';
+import { hydrate_block_anchor } from '../hydration.js';
 import { destroy_effect, render_effect } from '../../reactivity/effects.js';
-import { remove } from '../../reconciler.js';
+import { remove } from '../reconciler.js';
 import { current_block, execute_effect } from '../../runtime.js';
-import { trigger_transitions } from '../../transitions.js';
+import { trigger_transitions } from '../elements/transitions.js';
 
 /**
  * @template P
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
@@ -1,9 +1,9 @@
 import { namespace_svg } from '../../../../constants.js';
 import { DYNAMIC_ELEMENT_BLOCK } from '../../constants.js';
-import { current_hydration_fragment, hydrate_block_anchor, hydrating } from '../../hydration.js';
-import { empty } from '../../operations.js';
+import { current_hydration_fragment, hydrate_block_anchor, hydrating } from '../hydration.js';
+import { empty } from '../operations.js';
 import { destroy_effect, render_effect } from '../../reactivity/effects.js';
-import { insert, remove } from '../../reconciler.js';
+import { insert, remove } from '../reconciler.js';
 import { current_block, execute_effect } from '../../runtime.js';
 import { is_array } from '../../utils.js';
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
@@ -4,10 +4,10 @@ import {
 	get_hydration_fragment,
 	hydrating,
 	set_current_hydration_fragment
-} from '../../hydration.js';
-import { empty } from '../../operations.js';
+} from '../hydration.js';
+import { empty } from '../operations.js';
 import { render_effect } from '../../reactivity/effects.js';
-import { remove } from '../../reconciler.js';
+import { remove } from '../reconciler.js';
 import { current_block } from '../../runtime.js';
 
 /**
diff --git a/packages/svelte/src/internal/client/dom/elements/actions.js b/packages/svelte/src/internal/client/dom/elements/actions.js
@@ -0,0 +1,53 @@
+import { effect } from '../../reactivity/effects.js';
+import { deep_read_state, untrack } from '../../runtime.js';
+
+/**
+ * @template P
+ * @param {Element} dom
+ * @param {(dom: Element, value?: P) => import('#client').ActionPayload<P>} action
+ * @param {() => P} [value_fn]
+ * @returns {void}
+ */
+export function action(dom, action, value_fn) {
+	/** @type {undefined | import('#client').ActionPayload<P>} */
+	var payload = undefined;
+	var needs_deep_read = false;
+
+	// Action could come from a prop, therefore could be a signal, therefore untrack
+	// TODO we could take advantage of this and enable https://github.com/sveltejs/svelte/issues/6942
+	effect(() => {
+		if (value_fn) {
+			var value = value_fn();
+			untrack(() => {
+				if (payload === undefined) {
+					payload = action(dom, value) || {};
+					needs_deep_read = !!payload?.update;
+				} else {
+					var update = payload.update;
+					if (typeof update === 'function') {
+						update(value);
+					}
+				}
+			});
+			// Action's update method is coarse-grained, i.e. when anything in the passed value changes, update.
+			// This works in legacy mode because of mutable_source being updated as a whole, but when using $state
+			// together with actions and mutation, it wouldn't notice the change without a deep read.
+			if (needs_deep_read) {
+				deep_read_state(value);
+			}
+		} else {
+			untrack(() => (payload = action(dom)));
+		}
+	});
+
+	effect(() => {
+		if (payload !== undefined) {
+			var destroy = payload.destroy;
+			if (typeof destroy === 'function') {
+				return () => {
+					/** @type {Function} */ (destroy)();
+				};
+			}
+		}
+	});
+}
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -1,8 +1,7 @@
 import { DEV } from 'esm-env';
-import { hydrating } from '../../hydration.js';
+import { hydrating } from '../hydration.js';
 import { render_effect } from '../../reactivity/effects.js';
-import { get_descriptors, object_assign } from '../../utils.js';
-import { map_get, map_set } from '../../operations.js';
+import { get_descriptors, map_get, map_set, object_assign } from '../../utils.js';
 import { AttributeAliases, DelegatedEvents, namespace_svg } from '../../../../constants.js';
 import { delegate } from './events.js';
 import { autofocus } from './misc.js';
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -1,6 +1,6 @@
 import { DEV } from 'esm-env';
-import { render_effect } from '../../reactivity/effects.js';
-import { stringify } from '../../render.js';
+import { render_effect } from '../../../reactivity/effects.js';
+import { stringify } from '../../../render.js';
 
 /**
  * @param {HTMLInputElement} input
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/media.js b/packages/svelte/src/internal/client/dom/elements/bindings/media.js
@@ -1,5 +1,5 @@
 import { hydrating } from '../../hydration.js';
-import { destroy_effect, managed_effect, render_effect } from '../../reactivity/effects.js';
+import { destroy_effect, managed_effect, render_effect } from '../../../reactivity/effects.js';
 import { listen } from './shared.js';
 
 /** @param {TimeRanges} ranges */
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/navigator.js b/packages/svelte/src/internal/client/dom/elements/bindings/navigator.js
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/props.js b/packages/svelte/src/internal/client/dom/elements/bindings/props.js
@@ -1,5 +1,5 @@
-import { render_effect } from '../../reactivity/effects.js';
-import { get_descriptor } from '../../utils.js';
+import { render_effect } from '../../../reactivity/effects.js';
+import { get_descriptor } from '../../../utils.js';
 
 /**
  * Makes an `export`ed (non-prop) variable available on the `$$props` object
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/select.js b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
@@ -1,4 +1,4 @@
-import { effect } from '../../reactivity/effects.js';
+import { effect } from '../../../reactivity/effects.js';
 
 /**
  * Selects the correct option(s) (depending on whether this is a multiple select)
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/shared.js b/packages/svelte/src/internal/client/dom/elements/bindings/shared.js
@@ -1,4 +1,4 @@
-import { render_effect } from '../../reactivity/effects.js';
+import { render_effect } from '../../../reactivity/effects.js';
 
 /**
  * Fires the handler once immediately (unless corresponding arg is set to `false`),
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/size.js b/packages/svelte/src/internal/client/dom/elements/bindings/size.js
@@ -1,5 +1,5 @@
-import { effect, render_effect } from '../../reactivity/effects.js';
-import { untrack } from '../../runtime.js';
+import { effect, render_effect } from '../../../reactivity/effects.js';
+import { untrack } from '../../../runtime.js';
 
 /**
  * Resize observer singleton.
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/this.js b/packages/svelte/src/internal/client/dom/elements/bindings/this.js
@@ -1,6 +1,6 @@
-import { STATE_SYMBOL } from '../../constants.js';
-import { effect } from '../../reactivity/effects.js';
-import { untrack } from '../../runtime.js';
+import { STATE_SYMBOL } from '../../../constants.js';
+import { effect } from '../../../reactivity/effects.js';
+import { untrack } from '../../../runtime.js';
 
 /**
  * @param {any} bound_value
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/universal.js b/packages/svelte/src/internal/client/dom/elements/bindings/universal.js
@@ -1,4 +1,4 @@
-import { render_effect } from '../../reactivity/effects.js';
+import { render_effect } from '../../../reactivity/effects.js';
 
 /**
  * @param {'innerHTML' | 'textContent' | 'innerText'} property
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/window.js b/packages/svelte/src/internal/client/dom/elements/bindings/window.js
@@ -1,4 +1,4 @@
-import { render_effect } from '../../reactivity/effects.js';
+import { render_effect } from '../../../reactivity/effects.js';
 import { listen } from './shared.js';
 
 /**
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,5 @@
-import { hydrating } from '../../hydration.js';
-import { set_class_name } from '../../operations.js';
+import { hydrating } from '../hydration.js';
+import { set_class_name } from '../operations.js';
 import { render_effect } from '../../reactivity/effects.js';
 
 /**
diff --git a/packages/svelte/src/internal/client/dom/elements/custom-element.js b/packages/svelte/src/internal/client/dom/elements/custom-element.js
@@ -1,7 +1,7 @@
-import { createClassComponent } from '../../legacy/legacy-client.js';
-import { destroy_effect, render_effect } from './reactivity/effects.js';
-import { open, close } from './dom/template.js';
-import { define_property } from './utils.js';
+import { createClassComponent } from '../../../../legacy/legacy-client.js';
+import { destroy_effect, render_effect } from '../../reactivity/effects.js';
+import { open, close } from '../template.js';
+import { define_property } from '../../utils.js';
 
 /**
  * @typedef {Object} CustomElementPropDefinition
diff --git a/packages/svelte/src/internal/client/dom/elements/misc.js b/packages/svelte/src/internal/client/dom/elements/misc.js
@@ -1,4 +1,4 @@
-import { hydrating } from '../../hydration.js';
+import { hydrating } from '../hydration.js';
 import { render_effect } from '../../reactivity/effects.js';
 import { current_block } from '../../runtime.js';
 
diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
diff --git a/packages/svelte/src/internal/client/dom/reconciler.js b/packages/svelte/src/internal/client/dom/reconciler.js
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
diff --git a/packages/svelte/src/internal/client/utils.js b/packages/svelte/src/internal/client/utils.js
diff --git a/packages/svelte/src/internal/index.js b/packages/svelte/src/internal/index.js
