eliminate client dependencies from server code

Author: Rich-Harris

packages/svelte/src/index-server.js

@@ -1,5 +1,5 @@
 import { current_component } from './internal/server/context.js';
-import { noop } from './internal/common.js';
+import { noop } from './internal/shared/utils.js';
 
 /** @param {() => void} fn */
 export function onDestroy(fn) {
@@ -13,7 +13,7 @@ export {
 	noop as onMount,
 	noop as flushSync,
 	run as untrack
-} from './internal/common.js';
+} from './internal/shared/utils.js';
 
 export function createEventDispatcher() {
 	return noop;

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

@@ -1,4 +1,4 @@
-import { is_promise } from '../../../common.js';
+import { is_promise } from '../../../shared/utils.js';
 import {
 	current_component_context,
 	flush_sync,

packages/svelte/src/internal/client/dom/elements/transitions.js

@@ -1,4 +1,4 @@
-import { noop } from '../../../common.js';
+import { noop } from '../../../shared/utils.js';
 import { effect } from '../../reactivity/effects.js';
 import { current_effect, untrack } from '../../runtime.js';
 import { raf } from '../../timing.js';

packages/svelte/src/internal/client/dom/legacy/lifecycle.js

@@ -1,4 +1,4 @@
-import { run, run_all } from '../../../common.js';
+import { run, run_all } from '../../../shared/utils.js';
 import { user_pre_effect, user_effect } from '../../reactivity/effects.js';
 import {
 	current_component_context,

packages/svelte/src/internal/client/dom/task.js

@@ -1,4 +1,4 @@
-import { run_all } from '../../common.js';
+import { run_all } from '../../shared/utils.js';
 
 let is_task_queued = false;
 let is_raf_queued = false;

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

@@ -120,15 +120,10 @@ export {
 	hasContext
 } from './runtime.js';
 export {
-	add_snippet_symbol,
-	validate_component,
 	validate_dynamic_component,
-	validate_dynamic_element_tag,
 	validate_each_keys,
 	validate_prop_bindings,
-	validate_snippet,
-	validate_store,
-	validate_void_dynamic_element
+	validate_store
 } from './validate.js';
 export { raf } from './timing.js';
 export { proxy, unstate } from './proxy.js';
@@ -140,4 +135,11 @@ export {
 	$window as window,
 	$document as document
 } from './dom/operations.js';
-export { noop } from '../common.js';
+export { noop } from '../shared/utils.js';
+export {
+	add_snippet_symbol,
+	validate_component,
+	validate_dynamic_element_tag,
+	validate_snippet,
+	validate_void_dynamic_element
+} from '../shared/validate.js';

packages/svelte/src/internal/client/reactivity/effects.js

@@ -27,7 +27,7 @@ import {
 	ROOT_EFFECT
 } from '../constants.js';
 import { set } from './sources.js';
-import { noop } from '../../common.js';
+import { noop } from '../../shared/utils.js';
 import { remove } from '../dom/reconciler.js';
 
 /**

packages/svelte/src/internal/client/reactivity/store.js

@@ -1,5 +1,5 @@
 import { subscribe_to_store } from '../../../store/utils.js';
-import { noop } from '../../common.js';
+import { noop } from '../../shared/utils.js';
 import { UNINITIALIZED } from '../../../constants.js';
 import { get, untrack } from '../runtime.js';
 import { effect } from './effects.js';
@@ -10,7 +10,7 @@ import { mutable_source, set } from './sources.js';
  * signal that will be updated when the store is. The store references container is needed to
  * track reassignments to stores and to track the correct component context.
  * @template V
- * @param {import('#client').Store<V> | null | undefined} store
+ * @param {import('#shared').Store<V> | null | undefined} store
  * @param {string} store_name
  * @param {import('#client').StoreReferencesContainer} stores
  * @returns {V}
@@ -46,7 +46,7 @@ export function store_get(store, store_name, stores) {
  * Unsubscribe from a store if it's not the same as the one in the store references container.
  * We need this in addition to `store_get` because someone could unsubscribe from a store but
  * then never subscribe to the new one (if any), causing the subscription to stay open wrongfully.
- * @param {import('#client').Store<any> | null | undefined} store
+ * @param {import('#shared').Store<any> | null | undefined} store
  * @param {string} store_name
  * @param {import('#client').StoreReferencesContainer} stores
  */
@@ -65,7 +65,7 @@ export function store_unsub(store, store_name, stores) {
 
 /**
  * @template V
- * @param {import('#client').Store<V> | null | undefined} store
+ * @param {import('#shared').Store<V> | null | undefined} store
  * @param {import('#client').Source<V>} source
  */
 function connect_store_to_signal(store, source) {
@@ -80,7 +80,7 @@ function connect_store_to_signal(store, source) {
 /**
  * Sets the new value of a store and returns that value.
  * @template V
- * @param {import('#client').Store<V>} store
+ * @param {import('#shared').Store<V>} store
  * @param {V} value
  * @returns {V}
  */
@@ -116,7 +116,7 @@ export function unsubscribe_on_destroy(stores) {
 
 /**
  * Updates a store with a new value.
- * @param {import('#client').Store<V>} store  the store to update
+ * @param {import('#shared').Store<V>} store  the store to update
  * @param {any} expression  the expression that mutates the store
  * @param {V} new_value  the new store value
  * @template V
@@ -127,7 +127,7 @@ export function mutate_store(store, expression, new_value) {
 }
 
 /**
- * @param {import('#client').Store<number>} store
+ * @param {import('#shared').Store<number>} store
  * @param {number} store_value
  * @param {1 | -1} [d]
  * @returns {number}
@@ -138,7 +138,7 @@ export function update_store(store, store_value, d = 1) {
 }
 
 /**
- * @param {import('#client').Store<number>} store
+ * @param {import('#shared').Store<number>} store
  * @param {number} store_value
  * @param {1 | -1} [d]
  * @returns {number}

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

@@ -1,4 +1,4 @@
-import { noop } from '../common.js';
+import { noop } from '../shared/utils.js';
 
 const is_client = typeof window !== 'undefined';
 

packages/svelte/src/internal/client/types.d.ts

@@ -1,14 +1,10 @@
+import type { Store } from '#shared';
 import { STATE_SYMBOL } from './constants.js';
 import type { Effect, Source, Value } from './reactivity/types.js';
 
 type EventCallback = (event: Event) => boolean;
 export type EventCallbackMap = Record<string, EventCallback | EventCallback[]>;
 
-export type Store<V> = {
-	subscribe: (run: (value: V) => void) => () => void;
-	set(value: V): void;
-};
-
 // For all the core internal objects, we use single-character property strings.
 // This not only reduces code-size and parsing, but it also improves the performance
 // when the JS VM JITs the code.
@@ -43,8 +39,6 @@ export type ComponentContext = {
 		/** onMount callbacks */
 		m: Array<() => any>;
 	};
-	// TODO move this to a separate server component context object
-	ondestroy: null | Array<() => void>;
 };
 
 export type Equals = (this: Value, value: unknown) => boolean;

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

@@ -42,27 +42,6 @@ export function validate_dynamic_component(component_fn) {
 	}
 }
 
-/**
- * @param {() => string} tag_fn
- * @returns {void}
- */
-export function validate_void_dynamic_element(tag_fn) {
-	const tag = tag_fn();
-	if (tag && is_void(tag)) {
-		// eslint-disable-next-line no-console
-		console.warn(`<svelte:element this="${tag}"> is self-closing and cannot have content.`);
-	}
-}
-
-/** @param {() => unknown} tag_fn */
-export function validate_dynamic_element_tag(tag_fn) {
-	const tag = tag_fn();
-	const is_string = typeof tag === 'string';
-	if (tag && !is_string) {
-		throw new Error('<svelte:element> expects "this" attribute to be a string.');
-	}
-}
-
 /**
  * @param {() => any} collection
  * @param {(item: any, index: number) => string} key_fn
@@ -103,41 +82,6 @@ export function loop_guard(timeout) {
 	};
 }
 
-const snippet_symbol = Symbol.for('svelte.snippet');
-
-/**
- * @param {any} fn
- */
-export function add_snippet_symbol(fn) {
-	fn[snippet_symbol] = true;
-	return fn;
-}
-
-/**
- * Validate that the function handed to `{@render ...}` is a snippet function, and not some other kind of function.
- * @param {any} snippet_fn
- */
-export function validate_snippet(snippet_fn) {
-	if (snippet_fn && snippet_fn[snippet_symbol] !== true) {
-		throw new Error(
-			'The argument to `{@render ...}` must be a snippet function, not a component or some other kind of function. ' +
-				'If you want to dynamically render one snippet or another, use `$derived` and pass its result to `{@render ...}`.'
-		);
-	}
-	return snippet_fn;
-}
-
-/**
- * Validate that the function behind `<Component />` isn't a snippet.
- * @param {any} component_fn
- */
-export function validate_component(component_fn) {
-	if (component_fn?.[snippet_symbol] === true) {
-		throw new Error('A snippet must be rendered with `{@render ...}`');
-	}
-	return component_fn;
-}
-
 /**
  * @param {Record<string, any>} $$props
  * @param {string[]} bindable

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

@@ -1,4 +1,4 @@
-import { is_promise, noop } from '../common.js';
+import { is_promise, noop } from '../shared/utils.js';
 import { subscribe_to_store } from '../../store/utils.js';
 import {
 	DOMBooleanAttributes,
@@ -10,8 +10,6 @@ import { DEV } from 'esm-env';
 import { UNINITIALIZED } from '../../constants.js';
 import { current_component, pop, push } from './context.js';
 
-export * from '../client/validate.js';
-
 /**
  * @typedef {{
  * 	tag: string;
@@ -419,7 +417,7 @@ export function merge_styles(style_attribute, style_directive) {
  * @template V
  * @param {Record<string, [any, any, any]>} store_values
  * @param {string} store_name
- * @param {import('../client/types.js').Store<V> | null | undefined} store
+ * @param {import('#shared').Store<V> | null | undefined} store
  * @returns {V}
  */
 export function store_get(store_values, store_name, store) {
@@ -456,7 +454,7 @@ export function validate_store(store, name) {
 /**
  * Sets the new value of a store and returns that value.
  * @template V
- * @param {import('../client/types.js').Store<V>} store
+ * @param {import('#shared').Store<V>} store
  * @param {V} value
  * @returns {V}
  */
@@ -470,7 +468,7 @@ export function store_set(store, value) {
  * @template V
  * @param {Record<string, [any, any, any]>} store_values
  * @param {string} store_name
- * @param {import('../client/types.js').Store<V>} store
+ * @param {import('#shared').Store<V>} store
  * @param {any} expression
  */
 export function mutate_store(store_values, store_name, store, expression) {
@@ -481,7 +479,7 @@ export function mutate_store(store_values, store_name, store, expression) {
 /**
  * @param {Record<string, [any, any, any]>} store_values
  * @param {string} store_name
- * @param {import('../client/types.js').Store<number>} store
+ * @param {import('#shared').Store<number>} store
  * @param {1 | -1} [d]
  * @returns {number}
  */
@@ -494,7 +492,7 @@ export function update_store(store_values, store_name, store, d = 1) {
 /**
  * @param {Record<string, [any, any, any]>} store_values
  * @param {string} store_name
- * @param {import('../client/types.js').Store<number>} store
+ * @param {import('#shared').Store<number>} store
  * @param {1 | -1} [d]
  * @returns {number}
  */
@@ -658,3 +656,11 @@ export function once(get_value) {
 }
 
 export { push, pop } from './context.js';
+
+export {
+	add_snippet_symbol,
+	validate_component,
+	validate_dynamic_element_tag,
+	validate_snippet,
+	validate_void_dynamic_element
+} from '../shared/validate.js';

packages/svelte/src/internal/shared/types.d.ts

@@ -0,0 +1,4 @@
+export type Store<V> = {
+	subscribe: (run: (value: V) => void) => () => void;
+	set(value: V): void;
+};

packages/svelte/src/internal/common.js renamed to packages/svelte/src/internal/shared/utils.js

@@ -0,0 +1,57 @@
+import { is_void } from '../../compiler/phases/1-parse/utils/names.js';
+
+const snippet_symbol = Symbol.for('svelte.snippet');
+
+/**
+ * @param {any} fn
+ */
+export function add_snippet_symbol(fn) {
+	fn[snippet_symbol] = true;
+	return fn;
+}
+
+/**
+ * Validate that the function handed to `{@render ...}` is a snippet function, and not some other kind of function.
+ * @param {any} snippet_fn
+ */
+export function validate_snippet(snippet_fn) {
+	if (snippet_fn && snippet_fn[snippet_symbol] !== true) {
+		throw new Error(
+			'The argument to `{@render ...}` must be a snippet function, not a component or some other kind of function. ' +
+				'If you want to dynamically render one snippet or another, use `$derived` and pass its result to `{@render ...}`.'
+		);
+	}
+	return snippet_fn;
+}
+
+/**
+ * Validate that the function behind `<Component />` isn't a snippet.
+ * @param {any} component_fn
+ */
+export function validate_component(component_fn) {
+	if (component_fn?.[snippet_symbol] === true) {
+		throw new Error('A snippet must be rendered with `{@render ...}`');
+	}
+	return component_fn;
+}
+
+/**
+ * @param {() => string} tag_fn
+ * @returns {void}
+ */
+export function validate_void_dynamic_element(tag_fn) {
+	const tag = tag_fn();
+	if (tag && is_void(tag)) {
+		// eslint-disable-next-line no-console
+		console.warn(`<svelte:element this="${tag}"> is self-closing and cannot have content.`);
+	}
+}
+
+/** @param {() => unknown} tag_fn */
+export function validate_dynamic_element_tag(tag_fn) {
+	const tag = tag_fn();
+	const is_string = typeof tag === 'string';
+	if (tag && !is_string) {
+		throw new Error('<svelte:element> expects "this" attribute to be a string.');
+	}
+}

packages/svelte/src/internal/shared/validate.js

@@ -1,4 +1,4 @@
-import { noop, run_all } from '../internal/common.js';
+import { noop, run_all } from '../internal/shared/utils.js';
 import { subscribe_to_store } from './utils.js';
 
 /**

packages/svelte/src/store/index.js

@@ -1,4 +1,4 @@
-import { noop } from '../internal/common.js';
+import { noop } from '../internal/shared/utils.js';
 
 /**
  * @template T