msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
6 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File

10
packages/svelte/src/internal/client/custom-element.js
Unescape View File

@ -276,7 +276,7 @@ function get_custom_elements_slots(element) {
* @param {any} Component A Svelte component function * @param {any} Component A Svelte component function
* @param {Record<string, CustomElementPropDefinition>} props_definition The props to observe * @param {Record<string, CustomElementPropDefinition>} props_definition The props to observe
* @param {string[]} slots The slots to create * @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 {boolean} use_shadow_dom Whether to use shadow DOM
* @param {(ce: new () => HTMLElement) => new () => HTMLElement} [extend] * @param {(ce: new () => HTMLElement) => new () => HTMLElement} [extend]
*/ */
@ -284,7 +284,7 @@ export function create_custom_element(
Component, Component,
props_definition, props_definition,
slots, slots,
accessors, exports,
use_shadow_dom, use_shadow_dom,
extend extend
) { ) {
@ -311,10 +311,10 @@ export function create_custom_element(
} }
}); });
}); });
accessors.forEach((accessor) => { exports.forEach((property) => {
define_property(Class.prototype, accessor, { define_property(Class.prototype, property, {
get() { get() {
return this.$$c?.[accessor]; return this.$$c?.[property];
} }
}); });
}); });

24
packages/svelte/src/internal/client/render.js
Unescape View File

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

6
packages/svelte/src/internal/client/runtime.js
Unescape View File

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

4
packages/svelte/src/internal/client/types.d.ts vendored
Unescape View File

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

2
packages/svelte/src/main/main-client.js
Unescape View File

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

4
packages/svelte/types/index.d.ts vendored
Unescape View File

@ -328,7 +328,7 @@ declare module 'svelte' {
*/ */
export function createRoot(): void; 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: { 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; intro?: boolean | undefined;
}): Exports; }): 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: { 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: {

Write Preview
Loading…
Cancel
Save