diff --git a/.changeset/cyan-kings-wait.md b/.changeset/cyan-kings-wait.md new file mode 100644 index 0000000000..8381b6305c --- /dev/null +++ b/.changeset/cyan-kings-wait.md @@ -0,0 +1,5 @@ +--- +'svelte': minor +--- + +feat: add `beforeMount` callback to `MountOptions` diff --git a/packages/svelte/src/index.d.ts b/packages/svelte/src/index.d.ts index a1782f5b61..7fd64c15c8 100644 --- a/packages/svelte/src/index.d.ts +++ b/packages/svelte/src/index.d.ts @@ -333,6 +333,10 @@ export type MountOptions = Record * Can be accessed via `getContext()` at the component level. */ context?: Map; + /** + * A function invoked before the component is mounted but after the component context has been initialized. + */ + beforeMount?: () => void; /** * Whether or not to play transitions on initial render. * @default true diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js index c76f0b1ce7..2472bc3025 100644 --- a/packages/svelte/src/internal/client/render.js +++ b/packages/svelte/src/internal/client/render.js @@ -158,7 +158,10 @@ const document_listeners = new Map(); * @param {MountOptions} options * @returns {Exports} */ -function _mount(Component, { target, anchor, props = {}, events, context, intro = true }) { +function _mount( + Component, + { target, anchor, props = {}, beforeMount, events, context, intro = true } +) { init_operations(); /** @type {Set} */ @@ -208,12 +211,16 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro pending: () => {} }, (anchor_node) => { - if (context) { + if (context || beforeMount) { push({}); - var ctx = /** @type {ComponentContext} */ (component_context); - ctx.c = context; + if (context) { + var ctx = /** @type {ComponentContext} */ (component_context); + ctx.c = context; + } } + beforeMount?.(); + if (events) { // We can't spread the object or else we'd lose the state proxy stuff, if it is one /** @type {any} */ (props).$$events = events; @@ -241,7 +248,7 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro } } - if (context) { + if (context || beforeMount) { pop(); } } diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 730e0ff655..6a9ffa7121 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -332,6 +332,10 @@ declare module 'svelte' { * Can be accessed via `getContext()` at the component level. */ context?: Map; + /** + * A function invoked before the component is mounted but after the component context has been initialized. + */ + beforeMount?: () => void; /** * Whether or not to play transitions on initial render. * @default true