chore: tidy up, highlight deprecations in reference docs (#209)

fixes #165

Author: Rich-Harris

apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md

@@ -45,6 +45,11 @@ If a function is returned from `onMount`, it will be called when the component i
 
 ## `onDestroy`
 
+Schedules a callback to run immediately before the component is unmounted.
+
+Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the
+only one that runs inside a server-side component.
+
 <div class="ts-block">
 
 ```dts
@@ -53,6 +58,8 @@ function onDestroy(fn: () => any): void;
 
 </div>
 
+
+
 Schedules a callback to run immediately before the component is unmounted.
 
 Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the only one that runs inside a server-side component.

apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md

@@ -28,6 +28,12 @@ import {
 
 ## afterUpdate
 
+<blockquote class="tag deprecated">
+
+Use `$effect` instead — see https://svelte-5-preview.vercel.app/docs/deprecations#beforeupdate-and-afterupdate
+
+</blockquote>
+
 Schedules a callback to run immediately after the component has been updated.
 
 The first time the callback runs will be after the initial `onMount`.
@@ -42,8 +48,16 @@ function afterUpdate(fn: () => void): void;
 
 </div>
 
+
+
 ## beforeUpdate
 
+<blockquote class="tag deprecated">
+
+Use `$effect.pre` instead — see https://svelte-5-preview.vercel.app/docs/deprecations#beforeupdate-and-afterupdate
+
+</blockquote>
+
 Schedules a callback to run immediately before the component is updated after any state change.
 
 The first time the callback runs will be before the initial `onMount`.
@@ -58,8 +72,16 @@ function beforeUpdate(fn: () => void): void;
 
 </div>
 
+
+
 ## createEventDispatcher
 
+<blockquote class="tag deprecated">
+
+Use callback props and/or the `$host()` rune instead — see https://svelte-5-preview.vercel.app/docs/deprecations#createeventdispatcher
+
+</blockquote>
+
 Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs#template-syntax-component-directives-on-eventname).
 Event dispatchers are functions that can take two arguments: `name` and `detail`.
 
@@ -88,6 +110,8 @@ function createEventDispatcher<
 
 </div>
 
+
+
 ## createRawSnippet
 
 Create a snippet programmatically
@@ -105,6 +129,8 @@ function createRawSnippet<Params extends unknown[]>(
 
 </div>
 
+
+
 ## flushSync
 
 Synchronously flushes any pending state changes and those that result from it.
@@ -117,6 +143,8 @@ function flushSync(fn?: (() => void) | undefined): void;
 
 </div>
 
+
+
 ## getAllContexts
 
 Retrieves the whole context map that belongs to the closest parent component.
@@ -133,6 +161,8 @@ function getAllContexts<
 
 </div>
 
+
+
 ## getContext
 
 Retrieves the context that belongs to the closest parent component with the specified `key`.
@@ -146,6 +176,8 @@ function getContext<T>(key: any): T;
 
 </div>
 
+
+
 ## hasContext
 
 Checks whether a given `key` has been set in the context of a parent component.
@@ -159,6 +191,8 @@ function hasContext(key: any): boolean;
 
 </div>
 
+
+
 ## hydrate
 
 Hydrates a component on the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component
@@ -195,6 +229,8 @@ function hydrate<
 
 </div>
 
+
+
 ## mount
 
 Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component.
@@ -232,6 +268,8 @@ function mount<
 
 </div>
 
+
+
 ## onDestroy
 
 Schedules a callback to run immediately before the component is unmounted.
@@ -247,6 +285,8 @@ function onDestroy(fn: () => any): void;
 
 </div>
 
+
+
 ## onMount
 
 The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM.
@@ -270,6 +310,8 @@ function onMount<T>(
 
 </div>
 
+
+
 ## setContext
 
 Associates an arbitrary `context` object with the current component and the specified `key`
@@ -286,6 +328,8 @@ function setContext<T>(key: any, context: T): T;
 
 </div>
 
+
+
 ## tick
 
 Returns a promise that resolves once any pending state changes have been applied.
@@ -298,6 +342,8 @@ function tick(): Promise<void>;
 
 </div>
 
+
+
 ## unmount
 
 Unmounts a component that was previously mounted using `mount` or `hydrate`.
@@ -310,6 +356,8 @@ function unmount(component: Record<string, any>): void;
 
 </div>
 
+
+
 ## untrack
 
 Use `untrack` to prevent something from being treated as an `$effect`/`$derived` dependency.
@@ -324,6 +372,8 @@ function untrack<T>(fn: () => T): T;
 
 </div>
 
+
+
 ## Component
 
 Can be used to create strongly typed Svelte components.
@@ -403,8 +453,7 @@ element?: typeof HTMLElement;
 The custom element version of the component. Only present if compiled with the `customElement` compiler option
 
 </div>
-</div>
-</div>
+</div></div>
 
 ## ComponentConstructorOptions
 
@@ -504,8 +553,7 @@ $$inline?: boolean;
 ```
 
 <div class="ts-block-property-details"></div>
-</div>
-</div>
+</div></div>
 
 ## ComponentEvents
 
@@ -524,7 +572,6 @@ type ComponentEvents<Comp extends SvelteComponent> =
 		: never;
 ```
 
-
 </div>
 
 ## ComponentInternals
@@ -537,7 +584,6 @@ Internal implementation details that vary between environments
 type ComponentInternals = Branded<{}, 'ComponentInternals'>;
 ```
 
-
 </div>
 
 ## ComponentProps
@@ -582,7 +628,6 @@ type ComponentProps<
 			: never;
 ```
 
-
 </div>
 
 ## ComponentType
@@ -610,7 +655,6 @@ type ComponentType<
 };
 ```
 
-
 </div>
 
 ## EventDispatcher
@@ -636,8 +680,7 @@ interface EventDispatcher<
 ```
 
 <div class="ts-block-property-details"></div>
-</div>
-</div>
+</div></div>
 
 ## Snippet
 
@@ -670,8 +713,7 @@ interface Snippet<Parameters extends unknown[] = []> {/*…*/}
 ```
 
 <div class="ts-block-property-details"></div>
-</div>
-</div>
+</div></div>
 
 ## SvelteComponent
 
@@ -789,8 +831,7 @@ for more info.
 </div>
 
 </div>
-</div>
-</div>
+</div></div>
 
 ## SvelteComponentTyped
 
@@ -810,7 +851,6 @@ class SvelteComponentTyped<
 > extends SvelteComponent<Props, Events, Slots> {}
 ```
 
-
 </div>
 
 

apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-action.md

@@ -42,8 +42,7 @@ interface Action<
 ```
 
 <div class="ts-block-property-details"></div>
-</div>
-</div>
+</div></div>
 
 ## ActionReturn
 
@@ -100,7 +99,6 @@ destroy?: () => void;
 ```
 
 <div class="ts-block-property-details"></div>
-</div>
-</div>
+</div></div>
 
 

apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-animate.md

@@ -32,6 +32,8 @@ function flip(
 
 </div>
 
+
+
 ## AnimationConfig
 
 <div class="ts-block">
@@ -83,8 +85,7 @@ tick?: (t: number, u: number) => void;
 ```
 
 <div class="ts-block-property-details"></div>
-</div>
-</div>
+</div></div>
 
 ## FlipParams
 
@@ -119,7 +120,6 @@ easing?: (t: number) => number;
 ```
 
 <div class="ts-block-property-details"></div>
-</div>
-</div>
+</div></div>