diff --git a/site/content/docs/03-runtime/01-svelte.md b/site/content/docs/03-runtime/01-svelte.md index 8df7f93936..44bc672cfa 100644 --- a/site/content/docs/03-runtime/01-svelte.md +++ b/site/content/docs/03-runtime/01-svelte.md @@ -6,6 +6,8 @@ The `svelte` package exposes [lifecycle functions](/tutorial/onmount) and the [c ## `onMount` +> EXPORT_SNIPPET: svelte#onMount + ```js onMount(callback: () => void) ``` @@ -48,6 +50,8 @@ If a function is returned from `onMount`, it will be called when the component i ## `beforeUpdate` +> EXPORT_SNIPPET: svelte#beforeUpdate + ```js beforeUpdate(callback: () => void) ``` @@ -68,6 +72,8 @@ Schedules a callback to run immediately before the component is updated after an ## `afterUpdate` +> EXPORT_SNIPPET: svelte#afterUpdate + ```js afterUpdate(callback: () => void) ``` @@ -88,6 +94,8 @@ Schedules a callback to run immediately after the component has been updated. ## `onDestroy` +> EXPORT_SNIPPET: svelte#onDestroy + ```js onDestroy(callback: () => void) ``` @@ -108,6 +116,8 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl ## `tick` +> EXPORT_SNIPPET: svelte#tick + ```js promise = tick(); ``` @@ -128,6 +138,8 @@ Returns a promise that resolves once any pending state changes have been applied ## `setContext` +> EXPORT_SNIPPET: svelte#setContext + ```js @@ -150,6 +162,8 @@ Like lifecycle functions, this must be called during component initialisation. ## `getContext` +> EXPORT_SNIPPET: svelte#getContext + ```js context: any = getContext(key: any) ``` @@ -166,6 +180,8 @@ Retrieves the context that belongs to the closest parent component with the spec ## `hasContext` +> EXPORT_SNIPPET: svelte#hasContext + ```js hasContext = hasContext(key: any) ``` @@ -184,6 +200,8 @@ Checks whether a given `key` has been set in the context of a parent component. ## `getAllContexts` +> EXPORT_SNIPPET: svelte#getAllContexts + ```js contexts: Map = getAllContexts() ``` @@ -200,6 +218,8 @@ Retrieves the whole context map that belongs to the closest parent component. Mu ## `createEventDispatcher` +> EXPORT_SNIPPET: svelte#createEventDispatcher + ```js dispatch: ((name: string, detail?: any, options?: DispatchOptions) => boolean) = createEventDispatcher(); ``` diff --git a/sites/svelte.dev/src/lib/server/docs/render.js b/sites/svelte.dev/src/lib/server/docs/render.js index 5db1dfce3c..d4f7166a2d 100644 --- a/sites/svelte.dev/src/lib/server/docs/render.js +++ b/sites/svelte.dev/src/lib/server/docs/render.js @@ -64,6 +64,16 @@ export function replace_placeholders(content) { }) .join('')}`; }) + .replace(/> EXPORT_SNIPPET: (.+?)#(.+)?$/gm, (_, name, id) => { + const module = modules.find((module) => module.name === name); + if (!module) throw new Error(`Could not find module ${name}`); + + if (id) { + const exported = module.exports.find((t) => t.name === id); + + return `
${fence(exported.snippet)}
`; + } + }) .replace('> MODULES', () => { return modules .map((module) => {