chore: clarify usage of `accessors` (#10522)

pull/10535/head
Rich Harris 2 years ago committed by GitHub
parent fbb8839aba
commit 73830596b5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -276,7 +276,7 @@ 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]
*/
@ -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];
}
});
});

@ -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?.();
}
/**

@ -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) {

@ -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 */

@ -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;
}

@ -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: {

Loading…
Cancel
Save