chore: clarify usage of accessors (#10522)

Author: Rich-Harris

packages/svelte/src/internal/client/custom-element.js

@@ -276,15 +276,15 @@ function get_custom_elements_slots(element) {
  * @param {any} Component  A Svelte component function
  * @param {Record<string, CustomElementPropDefinition>} props_definition  The props to observe
  * @param {string[]} slots  The slots to create
- * @param {string[]} accessors  Other accessors besides the ones for props the component has
+ * @param {string[]} exports  Explicitly exported values, other than props
  * @param {boolean} use_shadow_dom  Whether to use shadow DOM
  * @param {(ce: new () => HTMLElement) => new () => HTMLElement} [extend]
  */
 export function create_custom_element(
 	Component,
 	props_definition,
 	slots,
-	accessors,
+	exports,
 	use_shadow_dom,
 	extend
 ) {
@@ -311,10 +311,10 @@ export function create_custom_element(
 			}
 		});
 	});
-	accessors.forEach((accessor) => {
-		define_property(Class.prototype, accessor, {
+	exports.forEach((property) => {
+		define_property(Class.prototype, property, {
 			get() {
-				return this.$$c?.[accessor];
+				return this.$$c?.[property];
 			}
 		});
 	});

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

@@ -2836,7 +2836,7 @@ export function createRoot() {
 }
 
 /**
- * Mounts a component to the given target and returns the exports and potentially the accessors (if compiled with `accessors: true`) of the component
+ * Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component
  *
  * @template {Record<string, any>} Props
  * @template {Record<string, any>} Exports
@@ -2860,7 +2860,7 @@ export function mount(component, options) {
 }
 
 /**
- * Hydrates a component on the given target and returns the exports and potentially the accessors (if compiled with `accessors: true`) of the component
+ * Hydrates a component on the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component
  *
  * @template {Record<string, any>} Props
  * @template {Record<string, any>} Exports
@@ -2932,7 +2932,7 @@ export function hydrate(component, options) {
  * @template {Record<string, any>} Props
  * @template {Record<string, any>} Exports
  * @template {Record<string, any>} Events
- * @param {import('../../main/public.js').ComponentType<import('../../main/public.js').SvelteComponent<Props, Events>>} component
+ * @param {import('../../main/public.js').ComponentType<import('../../main/public.js').SvelteComponent<Props, Events>>} Component
  * @param {{
  * 		target: Node;
  * 		anchor: null | Text;
@@ -2944,14 +2944,14 @@ export function hydrate(component, options) {
  * 	}} options
  * @returns {Exports}
  */
-function _mount(component, options) {
+function _mount(Component, options) {
 	const registered_events = new Set();
 	const container = options.target;
 	const block = create_root_block(options.intro || false);
 
 	/** @type {Exports} */
 	// @ts-expect-error will be defined because the render effect runs synchronously
-	let accessors = undefined;
+	let component = undefined;
 
 	const effect = render_effect(
 		() => {
@@ -2961,7 +2961,7 @@ function _mount(component, options) {
 					options.context;
 			}
 			// @ts-expect-error the public typings are not what the actual function looks like
-			accessors = component(options.anchor, options.props || {}) || {};
+			component = Component(options.anchor, options.props || {}) || {};
 			if (options.context) {
 				pop();
 			}
@@ -3008,7 +3008,7 @@ function _mount(component, options) {
 	event_handle(array_from(all_registerd_events));
 	root_event_handles.add(event_handle);
 
-	mounted_components.set(accessors, () => {
+	mounted_components.set(component, () => {
 		for (const event_name of registered_events) {
 			container.removeEventListener(event_name, bound_event_listener);
 		}
@@ -3020,11 +3020,11 @@ function _mount(component, options) {
 		destroy_signal(/** @type {import('./types.js').EffectSignal} */ (block.e));
 	});
 
-	return accessors;
+	return component;
 }
 
 /**
- * References of the accessors of all components that were `mount`ed or `hydrate`d.
+ * References of the components that were mounted or hydrated.
  * Uses a `WeakMap` to avoid memory leaks.
  */
 let mounted_components = new WeakMap();
@@ -3034,12 +3034,12 @@ let mounted_components = new WeakMap();
  * @param {Record<string, any>} component
  */
 export function unmount(component) {
-	const destroy = mounted_components.get(component);
-	if (DEV && !destroy) {
+	const fn = mounted_components.get(component);
+	if (DEV && !fn) {
 		// eslint-disable-next-line no-console
 		console.warn('Tried to unmount a component that was not mounted.');
 	}
-	destroy?.();
+	fn?.();
 }
 
 /**

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

@@ -1884,8 +1884,8 @@ function on_destroy(fn) {
  */
 export function push(props, runes = false) {
 	current_component_context = {
-		// accessors
-		a: null,
+		// exports (and props, if `accessors: true`)
+		x: null,
 		// context
 		c: null,
 		// effects
@@ -1914,7 +1914,7 @@ export function pop(component) {
 	const context_stack_item = current_component_context;
 	if (context_stack_item !== null) {
 		if (component !== undefined) {
-			context_stack_item.a = component;
+			context_stack_item.x = component;
 		}
 		const effects = context_stack_item.e;
 		if (effects !== null) {

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

@@ -40,8 +40,8 @@ export type ComponentContext = {
 	d: null | Signal<any>[];
 	/** props */
 	s: Record<string, unknown>;
-	/** accessors */
-	a: Record<string, any> | null;
+	/** exports (and props, if `accessors: true`) */
+	x: Record<string, any> | null;
 	/** effects */
 	e: null | Array<EffectSignal>;
 	/** mounted */

packages/svelte/src/main/main-client.js

@@ -164,7 +164,7 @@ export function createEventDispatcher() {
 			// in a server (non-DOM) environment?
 			const event = create_custom_event(/** @type {string} */ (type), detail, options);
 			for (const fn of callbacks) {
-				fn.call(component_context.a, event);
+				fn.call(component_context.x, event);
 			}
 			return !event.defaultPrevented;
 		}

packages/svelte/types/index.d.ts

@@ -328,7 +328,7 @@ declare module 'svelte' {
 	 */
 	export function createRoot(): void;
 	/**
-	 * Mounts a component to the given target and returns the exports and potentially the accessors (if compiled with `accessors: true`) of the component
+	 * Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component
 	 *
 	 * */
 	export function mount<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>>(component: ComponentType<SvelteComponent<Props, Events, any>>, options: {
@@ -339,7 +339,7 @@ declare module 'svelte' {
 		intro?: boolean | undefined;
 	}): Exports;
 	/**
-	 * Hydrates a component on the given target and returns the exports and potentially the accessors (if compiled with `accessors: true`) of the component
+	 * Hydrates a component on the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component
 	 *
 	 * */
 	export function hydrate<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>>(component: ComponentType<SvelteComponent<Props, Events, any>>, options: {