From 73830596b5961c4dc399d0c8d207889001c5adab Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 19 Feb 2024 04:25:56 -0500 Subject: [PATCH] chore: clarify usage of `accessors` (#10522) --- .../src/internal/client/custom-element.js | 10 ++++---- packages/svelte/src/internal/client/render.js | 24 +++++++++---------- .../svelte/src/internal/client/runtime.js | 6 ++--- .../svelte/src/internal/client/types.d.ts | 4 ++-- packages/svelte/src/main/main-client.js | 2 +- packages/svelte/types/index.d.ts | 4 ++-- 6 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/svelte/src/internal/client/custom-element.js b/packages/svelte/src/internal/client/custom-element.js index 2502a58676..5374d6ba77 100644 --- a/packages/svelte/src/internal/client/custom-element.js +++ b/packages/svelte/src/internal/client/custom-element.js @@ -276,7 +276,7 @@ function get_custom_elements_slots(element) { * @param {any} Component A Svelte component function * @param {Record} 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] */ @@ -284,7 +284,7 @@ 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]; } }); }); diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js index 84b7c529b1..db2cee8e01 100644 --- a/packages/svelte/src/internal/client/render.js +++ b/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} Props * @template {Record} 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} Props * @template {Record} Exports @@ -2932,7 +2932,7 @@ export function hydrate(component, options) { * @template {Record} Props * @template {Record} Exports * @template {Record} Events - * @param {import('../../main/public.js').ComponentType>} component + * @param {import('../../main/public.js').ComponentType>} 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} 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?.(); } /** diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js index e099bc7993..dbcffed933 100644 --- a/packages/svelte/src/internal/client/runtime.js +++ b/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) { diff --git a/packages/svelte/src/internal/client/types.d.ts b/packages/svelte/src/internal/client/types.d.ts index 7d34789d3b..937028a84e 100644 --- a/packages/svelte/src/internal/client/types.d.ts +++ b/packages/svelte/src/internal/client/types.d.ts @@ -40,8 +40,8 @@ export type ComponentContext = { d: null | Signal[]; /** props */ s: Record; - /** accessors */ - a: Record | null; + /** exports (and props, if `accessors: true`) */ + x: Record | null; /** effects */ e: null | Array; /** mounted */ diff --git a/packages/svelte/src/main/main-client.js b/packages/svelte/src/main/main-client.js index b7c242fb82..1b2ba77725 100644 --- a/packages/svelte/src/main/main-client.js +++ b/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; } diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 38c303b94e..db6efb9fb4 100644 --- a/packages/svelte/types/index.d.ts +++ b/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, Exports extends Record, Events extends Record>(component: ComponentType>, 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, Exports extends Record, Events extends Record>(component: ComponentType>, options: {