svelte/documentation/docs/04-compiler-and-api/02-client-side-component-ap...

---
title: 'Client-side component API'
---

## Creating a component

```ts
// @filename: ambiend.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';

declare global {
	class Component extends SvelteComponent {}
	var options: ComponentConstructorOptions<Record<string, any>>;
}

// @filename: index.ts
// ---cut---
const component = new Component(options);
```

A client-side component — that is, a component compiled with `generate: 'dom'` (or the `generate` option left unspecified) is a JavaScript class.

```ts
// @filename: ambiend.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';

declare module './App.svelte' {
	class Component extends SvelteComponent {}
	export default Component;
}

// @filename: index.ts
// ---cut---
import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		// assuming App.svelte contains something like
		// `export let answer`:
		answer: 42
	}
});
```

The following initialisation options can be provided:

| option    | default     | description                                                                                          |
| --------- | ----------- | ---------------------------------------------------------------------------------------------------- |
| `target`  | **none**    | An `HTMLElement` or `ShadowRoot` to render to. This option is required                               |
| `anchor`  | `null`      | A child of `target` to render the component immediately before                                       |
| `props`   | `{}`        | An object of properties to supply to the component                                                   |
| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component                             |
| `hydrate` | `false`     | See below                                                                                            |
| `intro`   | `false`     | If `true`, will play transitions on initial render, rather than waiting for subsequent state changes |

Existing children of `target` are left where they are.

The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](/docs/svelte-compiler#svelte-compile). Hydration of `<head>` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `<head>` so that the component knows which elements it's responsible for removing during hydration.

Whereas children of `target` are normally left alone, `hydrate: true` will cause any children to be removed. For that reason, the `anchor` option cannot be used alongside `hydrate: true`.

The existing DOM doesn't need to match the component — Svelte will 'repair' the DOM as it goes.

```ts
// @filename: ambiend.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';

declare module './App.svelte' {
	class Component extends SvelteComponent {}
	export default Component;
}

// @filename: index.ts
// @errors: 2322
// ---cut---
import App from './App.svelte';

const app = new App({
	target: document.querySelector('#server-rendered-html'),
	hydrate: true
});
```

## `$set`

```ts
// @filename: ambiend.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';

declare global {
	class Component extends SvelteComponent {}
	var component: Component;
	var props: Record<string, any>;
}

export {};

// @filename: index.ts
// ---cut---
component.$set(props);
```

Programmatically sets props on an instance. `component.$set({ x: 1 })` is equivalent to `x = 1` inside the component's `<script>` block.

Calling this method schedules an update for the next microtask — the DOM is _not_ updated synchronously.

```ts
// @filename: ambiend.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';

declare global {
	class Component extends SvelteComponent {}
	var component: Component;
}

export {};

// @filename: index.ts
// ---cut---
component.$set({ answer: 42 });
```

## `$on`

```ts
// @filename: ambiend.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';

declare global {
	class Component extends SvelteComponent {}
	var component: Component;
	var ev: string;
	var callback: (event: CustomEvent) => void;
}

export {};

// @filename: index.ts
// ---cut---
component.$on(ev, callback);
```

Causes the `callback` function to be called whenever the component dispatches an `event`.

A function is returned that will remove the event listener when called.

```ts
// @filename: ambiend.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';

declare global {
	class Component extends SvelteComponent {}
	var component: Component;
}

export {};

// @filename: index.ts
// ---cut---
const off = component.$on('selected', (event) => {
	console.log(event.detail.selection);
});

off();
```

## `$destroy`

```js
// @filename: ambiend.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';

declare global {
	class Component extends SvelteComponent {}
	var component: Component;
}

export {}

// @filename: index.ts
// ---cut---
component.$destroy();
```

Removes a component from the DOM and triggers any `onDestroy` handlers.

## Component props

```js
// @filename: ambiend.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';

declare global {
	class Component extends SvelteComponent {}
	var component: Component;
}

export {}

// @filename: index.ts
// ---cut---
component.prop;
```

```js
// @filename: ambiend.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';

declare global {
	class Component extends SvelteComponent {}
	var component: Component;
	var value: unknown;
}

export {}

// @filename: index.ts
// ---cut---
component.prop = value;
```

If a component is compiled with `accessors: true`, each instance will have getters and setters corresponding to each of the component's props. Setting a value will cause a _synchronous_ update, rather than the default async update caused by `component.$set(...)`.

By default, `accessors` is `false`, unless you're compiling as a custom element.

```js
// @filename: ambiend.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';

declare global {
	class Component extends SvelteComponent {}
	var component: Component;
	var props: Record<string, any>;
}

export {}

// @filename: index.ts
// ---cut---
console.log(component.count);
component.count += 1;
```
-												feat(site-2): Split docs (#8435)

* Update links

* Move blog to site/content

* Update site/content/docs/02-component-format.md

* Fix docs links

* Add global prettierrc

* Auto format

* Fix git merge artifact

* Fix errors

* Update html to svelte(remaining ones)

* Add 2 blog posts

* Modify prettierrc

* Minor design fix

* Switch package lock to spaces, prettier ignore

* Regenerate package lock

* prettier format

* Push

* Remove console.logs

* Minor fixes

* Fix search

* Fix heading <code> style

* Fix search some more

* Code cleanup

* Update deps

* Move content around

* Allow drafts

* Redirect logic

* Don't render anything on docs if /docs

* Shorten the regex patterns

* Fix some more

* Hack the build into working

* Modernize docs links

* Add content to introduction

* Modify the content

* fix content links

* Reduce duplication in redirect regex

* Differences from Kit page

* Fix link

* Make OnThisPage visible on all docs

* Misc changes

* Move differences page to introduction

* Run prettier

* Prerender examples api routes

* Modify introdution page

* replace positions of readonly and get

* Minor blog style enhancement

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
											
										
										
											2 years ago
+								---
 								title: 'Client-side component API'
 								---
 								## Creating a component
-												feat(site-2): TS in docs (#8452)

* Commit

* Push working type generation code

* Fix type gen script invocation

* Delete type-info.js

* Change build script

* Recreate package lock

* mkdir generated

* Add type references to some pages

* Add TS-able snippets to docs examples

* Fix some stuff

* Add types to individual functions

* Add to store page

* Refactor compile-types.js

* Move ts sourcefile stuff to compile-types

* Remove commented code

* Half attempt at export aliases

* Add

* Fix, add disclaimer for svelte/internal

* Disable /docs prerendering

* Remove internals page

* Remove redundant stuff

* Make search work with it

* Fix compile types logic

* Add file: comment,

* Add two-slash to docs pages

* Get type links working

* Remove console.log

* Add action module

* Fix actions logic

* Make compile-types logic more robust

* Bump site-kit

* Fix gitignore

* Use moduleResolution bundler

* Don't apply shiki-twoslash to auto generated code snippets from render

* Recreate package lock

* Make TSbpage undraft

* Fix svelte component types

* Remove console.log

* No more sveltekit

* Make regex smarter

* Update sites/svelte.dev/scripts/type-gen/compile-types.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Rebuild package lock

* Remove commented out code

* Update deps

* Remove $$_attributes

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
											
										
										
											1 year ago
+								```ts
 								// @filename: ambiend.d.ts
 								import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 								declare global {
 									class Component extends SvelteComponent {}
 									var options: ComponentConstructorOptions<Record<string, any>>;
 								}
 								// @filename: index.ts
 								// ---cut---
-												feat(site-2): Split docs (#8435)

* Update links

* Move blog to site/content

* Update site/content/docs/02-component-format.md

* Fix docs links

* Add global prettierrc

* Auto format

* Fix git merge artifact

* Fix errors

* Update html to svelte(remaining ones)

* Add 2 blog posts

* Modify prettierrc

* Minor design fix

* Switch package lock to spaces, prettier ignore

* Regenerate package lock

* prettier format

* Push

* Remove console.logs

* Minor fixes

* Fix search

* Fix heading <code> style

* Fix search some more

* Code cleanup

* Update deps

* Move content around

* Allow drafts

* Redirect logic

* Don't render anything on docs if /docs

* Shorten the regex patterns

* Fix some more

* Hack the build into working

* Modernize docs links

* Add content to introduction

* Modify the content

* fix content links

* Reduce duplication in redirect regex

* Differences from Kit page

* Fix link

* Make OnThisPage visible on all docs

* Misc changes

* Move differences page to introduction

* Run prettier

* Prerender examples api routes

* Modify introdution page

* replace positions of readonly and get

* Minor blog style enhancement

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
											
										
										
											2 years ago
+								const component = new Component(options);
 								```
 								A client-side component — that is, a component compiled with `generate: 'dom'` (or the `generate` option left unspecified) is a JavaScript class.
-												feat(site-2): TS in docs (#8452)

* Commit

* Push working type generation code

* Fix type gen script invocation

* Delete type-info.js

* Change build script

* Recreate package lock

* mkdir generated

* Add type references to some pages

* Add TS-able snippets to docs examples

* Fix some stuff

* Add types to individual functions

* Add to store page

* Refactor compile-types.js

* Move ts sourcefile stuff to compile-types

* Remove commented code

* Half attempt at export aliases

* Add

* Fix, add disclaimer for svelte/internal

* Disable /docs prerendering

* Remove internals page

* Remove redundant stuff

* Make search work with it

* Fix compile types logic

* Add file: comment,

* Add two-slash to docs pages

* Get type links working

* Remove console.log

* Add action module

* Fix actions logic

* Make compile-types logic more robust

* Bump site-kit

* Fix gitignore

* Use moduleResolution bundler

* Don't apply shiki-twoslash to auto generated code snippets from render

* Recreate package lock

* Make TSbpage undraft

* Fix svelte component types

* Remove console.log

* No more sveltekit

* Make regex smarter

* Update sites/svelte.dev/scripts/type-gen/compile-types.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Rebuild package lock

* Remove commented out code

* Update deps

* Remove $$_attributes

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
											
										
										
											1 year ago
+								```ts
 								// @filename: ambiend.d.ts
 								import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 								declare module './App.svelte' {
 									class Component extends SvelteComponent {}
 									export default Component;
 								}
 								// @filename: index.ts
 								// ---cut---
-												feat(site-2): Split docs (#8435)

* Update links

* Move blog to site/content

* Update site/content/docs/02-component-format.md

* Fix docs links

* Add global prettierrc

* Auto format

* Fix git merge artifact

* Fix errors

* Update html to svelte(remaining ones)

* Add 2 blog posts

* Modify prettierrc

* Minor design fix

* Switch package lock to spaces, prettier ignore

* Regenerate package lock

* prettier format

* Push

* Remove console.logs

* Minor fixes

* Fix search

* Fix heading <code> style

* Fix search some more

* Code cleanup

* Update deps

* Move content around

* Allow drafts

* Redirect logic

* Don't render anything on docs if /docs

* Shorten the regex patterns

* Fix some more

* Hack the build into working

* Modernize docs links

* Add content to introduction

* Modify the content

* fix content links

* Reduce duplication in redirect regex

* Differences from Kit page

* Fix link

* Make OnThisPage visible on all docs

* Misc changes

* Move differences page to introduction

* Run prettier

* Prerender examples api routes

* Modify introdution page

* replace positions of readonly and get

* Minor blog style enhancement

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
											
										
										
											2 years ago
+								import App from './App.svelte';
 								const app = new App({
 									target: document.body,
 									props: {
 										// assuming App.svelte contains something like
 										// `export let answer`:
 										answer: 42
 									}
 								});
 								```
 								The following initialisation options can be provided:
 								| option    | default     | description                                                                                          |
 								| --------- | ----------- | ---------------------------------------------------------------------------------------------------- |
 								| `target`  | **none**    | An `HTMLElement` or `ShadowRoot` to render to. This option is required                               |
 								| `anchor`  | `null`      | A child of `target` to render the component immediately before                                       |
 								| `props`   | `{}`        | An object of properties to supply to the component                                                   |
 								| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component                             |
 								| `hydrate` | `false`     | See below                                                                                            |
 								| `intro`   | `false`     | If `true`, will play transitions on initial render, rather than waiting for subsequent state changes |
 								Existing children of `target` are left where they are.
 								The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](/docs/svelte-compiler#svelte-compile). Hydration of `<head>` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `<head>` so that the component knows which elements it's responsible for removing during hydration.
 								Whereas children of `target` are normally left alone, `hydrate: true` will cause any children to be removed. For that reason, the `anchor` option cannot be used alongside `hydrate: true`.
 								The existing DOM doesn't need to match the component — Svelte will 'repair' the DOM as it goes.
-												feat(site-2): TS in docs (#8452)

* Commit

* Push working type generation code

* Fix type gen script invocation

* Delete type-info.js

* Change build script

* Recreate package lock

* mkdir generated

* Add type references to some pages

* Add TS-able snippets to docs examples

* Fix some stuff

* Add types to individual functions

* Add to store page

* Refactor compile-types.js

* Move ts sourcefile stuff to compile-types

* Remove commented code

* Half attempt at export aliases

* Add

* Fix, add disclaimer for svelte/internal

* Disable /docs prerendering

* Remove internals page

* Remove redundant stuff

* Make search work with it

* Fix compile types logic

* Add file: comment,

* Add two-slash to docs pages

* Get type links working

* Remove console.log

* Add action module

* Fix actions logic

* Make compile-types logic more robust

* Bump site-kit

* Fix gitignore

* Use moduleResolution bundler

* Don't apply shiki-twoslash to auto generated code snippets from render

* Recreate package lock

* Make TSbpage undraft

* Fix svelte component types

* Remove console.log

* No more sveltekit

* Make regex smarter

* Update sites/svelte.dev/scripts/type-gen/compile-types.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Rebuild package lock

* Remove commented out code

* Update deps

* Remove $$_attributes

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
											
										
										
											1 year ago
+								```ts
 								// @filename: ambiend.d.ts
 								import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 								declare module './App.svelte' {
 									class Component extends SvelteComponent {}
 									export default Component;
 								}
 								// @filename: index.ts
 								// @errors: 2322
 								// ---cut---
-												feat(site-2): Split docs (#8435)

* Update links

* Move blog to site/content

* Update site/content/docs/02-component-format.md

* Fix docs links

* Add global prettierrc

* Auto format

* Fix git merge artifact

* Fix errors

* Update html to svelte(remaining ones)

* Add 2 blog posts

* Modify prettierrc

* Minor design fix

* Switch package lock to spaces, prettier ignore

* Regenerate package lock

* prettier format

* Push

* Remove console.logs

* Minor fixes

* Fix search

* Fix heading <code> style

* Fix search some more

* Code cleanup

* Update deps

* Move content around

* Allow drafts

* Redirect logic

* Don't render anything on docs if /docs

* Shorten the regex patterns

* Fix some more

* Hack the build into working

* Modernize docs links

* Add content to introduction

* Modify the content

* fix content links

* Reduce duplication in redirect regex

* Differences from Kit page

* Fix link

* Make OnThisPage visible on all docs

* Misc changes

* Move differences page to introduction

* Run prettier

* Prerender examples api routes

* Modify introdution page

* replace positions of readonly and get

* Minor blog style enhancement

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
											
										
										
											2 years ago
+								import App from './App.svelte';
 								const app = new App({
 									target: document.querySelector('#server-rendered-html'),
 									hydrate: true
 								});
 								```
 								## `$set`
-												feat(site-2): TS in docs (#8452)

* Commit

* Push working type generation code

* Fix type gen script invocation

* Delete type-info.js

* Change build script

* Recreate package lock

* mkdir generated

* Add type references to some pages

* Add TS-able snippets to docs examples

* Fix some stuff

* Add types to individual functions

* Add to store page

* Refactor compile-types.js

* Move ts sourcefile stuff to compile-types

* Remove commented code

* Half attempt at export aliases

* Add

* Fix, add disclaimer for svelte/internal

* Disable /docs prerendering

* Remove internals page

* Remove redundant stuff

* Make search work with it

* Fix compile types logic

* Add file: comment,

* Add two-slash to docs pages

* Get type links working

* Remove console.log

* Add action module

* Fix actions logic

* Make compile-types logic more robust

* Bump site-kit

* Fix gitignore

* Use moduleResolution bundler

* Don't apply shiki-twoslash to auto generated code snippets from render

* Recreate package lock

* Make TSbpage undraft

* Fix svelte component types

* Remove console.log

* No more sveltekit

* Make regex smarter

* Update sites/svelte.dev/scripts/type-gen/compile-types.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Rebuild package lock

* Remove commented out code

* Update deps

* Remove $$_attributes

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
											
										
										
											1 year ago
+								```ts
 								// @filename: ambiend.d.ts
 								import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 								declare global {
 									class Component extends SvelteComponent {}
 									var component: Component;
 									var props: Record<string, any>;
 								}
 								export {};
 								// @filename: index.ts
 								// ---cut---
-												feat(site-2): Split docs (#8435)

* Update links

* Move blog to site/content

* Update site/content/docs/02-component-format.md

* Fix docs links

* Add global prettierrc

* Auto format

* Fix git merge artifact

* Fix errors

* Update html to svelte(remaining ones)

* Add 2 blog posts

* Modify prettierrc

* Minor design fix

* Switch package lock to spaces, prettier ignore

* Regenerate package lock

* prettier format

* Push

* Remove console.logs

* Minor fixes

* Fix search

* Fix heading <code> style

* Fix search some more

* Code cleanup

* Update deps

* Move content around

* Allow drafts

* Redirect logic

* Don't render anything on docs if /docs

* Shorten the regex patterns

* Fix some more

* Hack the build into working

* Modernize docs links

* Add content to introduction

* Modify the content

* fix content links

* Reduce duplication in redirect regex

* Differences from Kit page

* Fix link

* Make OnThisPage visible on all docs

* Misc changes

* Move differences page to introduction

* Run prettier

* Prerender examples api routes

* Modify introdution page

* replace positions of readonly and get

* Minor blog style enhancement

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
											
										
										
											2 years ago
+								component.$set(props);
 								```
 								Programmatically sets props on an instance. `component.$set({ x: 1 })` is equivalent to `x = 1` inside the component's `<script>` block.
 								Calling this method schedules an update for the next microtask — the DOM is _not_ updated synchronously.
-												feat(site-2): TS in docs (#8452)

* Commit

* Push working type generation code

* Fix type gen script invocation

* Delete type-info.js

* Change build script

* Recreate package lock

* mkdir generated

* Add type references to some pages

* Add TS-able snippets to docs examples

* Fix some stuff

* Add types to individual functions

* Add to store page

* Refactor compile-types.js

* Move ts sourcefile stuff to compile-types

* Remove commented code

* Half attempt at export aliases

* Add

* Fix, add disclaimer for svelte/internal

* Disable /docs prerendering

* Remove internals page

* Remove redundant stuff

* Make search work with it

* Fix compile types logic

* Add file: comment,

* Add two-slash to docs pages

* Get type links working

* Remove console.log

* Add action module

* Fix actions logic

* Make compile-types logic more robust

* Bump site-kit

* Fix gitignore

* Use moduleResolution bundler

* Don't apply shiki-twoslash to auto generated code snippets from render

* Recreate package lock

* Make TSbpage undraft

* Fix svelte component types

* Remove console.log

* No more sveltekit

* Make regex smarter

* Update sites/svelte.dev/scripts/type-gen/compile-types.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Rebuild package lock

* Remove commented out code

* Update deps

* Remove $$_attributes

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
											
										
										
											1 year ago
+								```ts
 								// @filename: ambiend.d.ts
 								import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 								declare global {
 									class Component extends SvelteComponent {}
 									var component: Component;
 								}
 								export {};
 								// @filename: index.ts
 								// ---cut---
-												feat(site-2): Split docs (#8435)

* Update links

* Move blog to site/content

* Update site/content/docs/02-component-format.md

* Fix docs links

* Add global prettierrc

* Auto format

* Fix git merge artifact

* Fix errors

* Update html to svelte(remaining ones)

* Add 2 blog posts

* Modify prettierrc

* Minor design fix

* Switch package lock to spaces, prettier ignore

* Regenerate package lock

* prettier format

* Push

* Remove console.logs

* Minor fixes

* Fix search

* Fix heading <code> style

* Fix search some more

* Code cleanup

* Update deps

* Move content around

* Allow drafts

* Redirect logic

* Don't render anything on docs if /docs

* Shorten the regex patterns

* Fix some more

* Hack the build into working

* Modernize docs links

* Add content to introduction

* Modify the content

* fix content links

* Reduce duplication in redirect regex

* Differences from Kit page

* Fix link

* Make OnThisPage visible on all docs

* Misc changes

* Move differences page to introduction

* Run prettier

* Prerender examples api routes

* Modify introdution page

* replace positions of readonly and get

* Minor blog style enhancement

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
											
										
										
											2 years ago
+								component.$set({ answer: 42 });
 								```
 								## `$on`
-												feat(site-2): TS in docs (#8452)

* Commit

* Push working type generation code

* Fix type gen script invocation

* Delete type-info.js

* Change build script

* Recreate package lock

* mkdir generated

* Add type references to some pages

* Add TS-able snippets to docs examples

* Fix some stuff

* Add types to individual functions

* Add to store page

* Refactor compile-types.js

* Move ts sourcefile stuff to compile-types

* Remove commented code

* Half attempt at export aliases

* Add

* Fix, add disclaimer for svelte/internal

* Disable /docs prerendering

* Remove internals page

* Remove redundant stuff

* Make search work with it

* Fix compile types logic

* Add file: comment,

* Add two-slash to docs pages

* Get type links working

* Remove console.log

* Add action module

* Fix actions logic

* Make compile-types logic more robust

* Bump site-kit

* Fix gitignore

* Use moduleResolution bundler

* Don't apply shiki-twoslash to auto generated code snippets from render

* Recreate package lock

* Make TSbpage undraft

* Fix svelte component types

* Remove console.log

* No more sveltekit

* Make regex smarter

* Update sites/svelte.dev/scripts/type-gen/compile-types.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Rebuild package lock

* Remove commented out code

* Update deps

* Remove $$_attributes

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
											
										
										
											1 year ago
+								```ts
 								// @filename: ambiend.d.ts
 								import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 								declare global {
 									class Component extends SvelteComponent {}
 									var component: Component;
 									var ev: string;
 									var callback: (event: CustomEvent) => void;
 								}
 								export {};
 								// @filename: index.ts
 								// ---cut---
 								component.$on(ev, callback);
-												feat(site-2): Split docs (#8435)

* Update links

* Move blog to site/content

* Update site/content/docs/02-component-format.md

* Fix docs links

* Add global prettierrc

* Auto format

* Fix git merge artifact

* Fix errors

* Update html to svelte(remaining ones)

* Add 2 blog posts

* Modify prettierrc

* Minor design fix

* Switch package lock to spaces, prettier ignore

* Regenerate package lock

* prettier format

* Push

* Remove console.logs

* Minor fixes

* Fix search

* Fix heading <code> style

* Fix search some more

* Code cleanup

* Update deps

* Move content around

* Allow drafts

* Redirect logic

* Don't render anything on docs if /docs

* Shorten the regex patterns

* Fix some more

* Hack the build into working

* Modernize docs links

* Add content to introduction

* Modify the content

* fix content links

* Reduce duplication in redirect regex

* Differences from Kit page

* Fix link

* Make OnThisPage visible on all docs

* Misc changes

* Move differences page to introduction

* Run prettier

* Prerender examples api routes

* Modify introdution page

* replace positions of readonly and get

* Minor blog style enhancement

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
											
										
										
											2 years ago
+								```
 								Causes the `callback` function to be called whenever the component dispatches an `event`.
 								A function is returned that will remove the event listener when called.
-												feat(site-2): TS in docs (#8452)

* Commit

* Push working type generation code

* Fix type gen script invocation

* Delete type-info.js

* Change build script

* Recreate package lock

* mkdir generated

* Add type references to some pages

* Add TS-able snippets to docs examples

* Fix some stuff

* Add types to individual functions

* Add to store page

* Refactor compile-types.js

* Move ts sourcefile stuff to compile-types

* Remove commented code

* Half attempt at export aliases

* Add

* Fix, add disclaimer for svelte/internal

* Disable /docs prerendering

* Remove internals page

* Remove redundant stuff

* Make search work with it

* Fix compile types logic

* Add file: comment,

* Add two-slash to docs pages

* Get type links working

* Remove console.log

* Add action module

* Fix actions logic

* Make compile-types logic more robust

* Bump site-kit

* Fix gitignore

* Use moduleResolution bundler

* Don't apply shiki-twoslash to auto generated code snippets from render

* Recreate package lock

* Make TSbpage undraft

* Fix svelte component types

* Remove console.log

* No more sveltekit

* Make regex smarter

* Update sites/svelte.dev/scripts/type-gen/compile-types.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Rebuild package lock

* Remove commented out code

* Update deps

* Remove $$_attributes

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
											
										
										
											1 year ago
+								```ts
 								// @filename: ambiend.d.ts
 								import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 								declare global {
 									class Component extends SvelteComponent {}
 									var component: Component;
 								}
 								export {};
 								// @filename: index.ts
 								// ---cut---
 								const off = component.$on('selected', (event) => {
-												feat(site-2): Split docs (#8435)

* Update links

* Move blog to site/content

* Update site/content/docs/02-component-format.md

* Fix docs links

* Add global prettierrc

* Auto format

* Fix git merge artifact

* Fix errors

* Update html to svelte(remaining ones)

* Add 2 blog posts

* Modify prettierrc

* Minor design fix

* Switch package lock to spaces, prettier ignore

* Regenerate package lock

* prettier format

* Push

* Remove console.logs

* Minor fixes

* Fix search

* Fix heading <code> style

* Fix search some more

* Code cleanup

* Update deps

* Move content around

* Allow drafts

* Redirect logic

* Don't render anything on docs if /docs

* Shorten the regex patterns

* Fix some more

* Hack the build into working

* Modernize docs links

* Add content to introduction

* Modify the content

* fix content links

* Reduce duplication in redirect regex

* Differences from Kit page

* Fix link

* Make OnThisPage visible on all docs

* Misc changes

* Move differences page to introduction

* Run prettier

* Prerender examples api routes

* Modify introdution page

* replace positions of readonly and get

* Minor blog style enhancement

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
											
										
										
											2 years ago
+									console.log(event.detail.selection);
 								});
 								off();
 								```
 								## `$destroy`
 								```js
-												feat(site-2): TS in docs (#8452)

* Commit

* Push working type generation code

* Fix type gen script invocation

* Delete type-info.js

* Change build script

* Recreate package lock

* mkdir generated

* Add type references to some pages

* Add TS-able snippets to docs examples

* Fix some stuff

* Add types to individual functions

* Add to store page

* Refactor compile-types.js

* Move ts sourcefile stuff to compile-types

* Remove commented code

* Half attempt at export aliases

* Add

* Fix, add disclaimer for svelte/internal

* Disable /docs prerendering

* Remove internals page

* Remove redundant stuff

* Make search work with it

* Fix compile types logic

* Add file: comment,

* Add two-slash to docs pages

* Get type links working

* Remove console.log

* Add action module

* Fix actions logic

* Make compile-types logic more robust

* Bump site-kit

* Fix gitignore

* Use moduleResolution bundler

* Don't apply shiki-twoslash to auto generated code snippets from render

* Recreate package lock

* Make TSbpage undraft

* Fix svelte component types

* Remove console.log

* No more sveltekit

* Make regex smarter

* Update sites/svelte.dev/scripts/type-gen/compile-types.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Rebuild package lock

* Remove commented out code

* Update deps

* Remove $$_attributes

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
											
										
										
											1 year ago
+								// @filename: ambiend.d.ts
 								import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 								declare global {
 									class Component extends SvelteComponent {}
 									var component: Component;
 								}
 								export {}
 								// @filename: index.ts
 								// ---cut---
-												feat(site-2): Split docs (#8435)

* Update links

* Move blog to site/content

* Update site/content/docs/02-component-format.md

* Fix docs links

* Add global prettierrc

* Auto format

* Fix git merge artifact

* Fix errors

* Update html to svelte(remaining ones)

* Add 2 blog posts

* Modify prettierrc

* Minor design fix

* Switch package lock to spaces, prettier ignore

* Regenerate package lock

* prettier format

* Push

* Remove console.logs

* Minor fixes

* Fix search

* Fix heading <code> style

* Fix search some more

* Code cleanup

* Update deps

* Move content around

* Allow drafts

* Redirect logic

* Don't render anything on docs if /docs

* Shorten the regex patterns

* Fix some more

* Hack the build into working

* Modernize docs links

* Add content to introduction

* Modify the content

* fix content links

* Reduce duplication in redirect regex

* Differences from Kit page

* Fix link

* Make OnThisPage visible on all docs

* Misc changes

* Move differences page to introduction

* Run prettier

* Prerender examples api routes

* Modify introdution page

* replace positions of readonly and get

* Minor blog style enhancement

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
											
										
										
											2 years ago
+								component.$destroy();
 								```
 								Removes a component from the DOM and triggers any `onDestroy` handlers.
 								## Component props
 								```js
-												feat(site-2): TS in docs (#8452)

* Commit

* Push working type generation code

* Fix type gen script invocation

* Delete type-info.js

* Change build script

* Recreate package lock

* mkdir generated

* Add type references to some pages

* Add TS-able snippets to docs examples

* Fix some stuff

* Add types to individual functions

* Add to store page

* Refactor compile-types.js

* Move ts sourcefile stuff to compile-types

* Remove commented code

* Half attempt at export aliases

* Add

* Fix, add disclaimer for svelte/internal

* Disable /docs prerendering

* Remove internals page

* Remove redundant stuff

* Make search work with it

* Fix compile types logic

* Add file: comment,

* Add two-slash to docs pages

* Get type links working

* Remove console.log

* Add action module

* Fix actions logic

* Make compile-types logic more robust

* Bump site-kit

* Fix gitignore

* Use moduleResolution bundler

* Don't apply shiki-twoslash to auto generated code snippets from render

* Recreate package lock

* Make TSbpage undraft

* Fix svelte component types

* Remove console.log

* No more sveltekit

* Make regex smarter

* Update sites/svelte.dev/scripts/type-gen/compile-types.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Rebuild package lock

* Remove commented out code

* Update deps

* Remove $$_attributes

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
											
										
										
											1 year ago
+								// @filename: ambiend.d.ts
 								import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 								declare global {
 									class Component extends SvelteComponent {}
 									var component: Component;
 								}
 								export {}
 								// @filename: index.ts
 								// ---cut---
-												feat(site-2): Split docs (#8435)

* Update links

* Move blog to site/content

* Update site/content/docs/02-component-format.md

* Fix docs links

* Add global prettierrc

* Auto format

* Fix git merge artifact

* Fix errors

* Update html to svelte(remaining ones)

* Add 2 blog posts

* Modify prettierrc

* Minor design fix

* Switch package lock to spaces, prettier ignore

* Regenerate package lock

* prettier format

* Push

* Remove console.logs

* Minor fixes

* Fix search

* Fix heading <code> style

* Fix search some more

* Code cleanup

* Update deps

* Move content around

* Allow drafts

* Redirect logic

* Don't render anything on docs if /docs

* Shorten the regex patterns

* Fix some more

* Hack the build into working

* Modernize docs links

* Add content to introduction

* Modify the content

* fix content links

* Reduce duplication in redirect regex

* Differences from Kit page

* Fix link

* Make OnThisPage visible on all docs

* Misc changes

* Move differences page to introduction

* Run prettier

* Prerender examples api routes

* Modify introdution page

* replace positions of readonly and get

* Minor blog style enhancement

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
											
										
										
											2 years ago
+								component.prop;
 								```
 								```js
-												feat(site-2): TS in docs (#8452)

* Commit

* Push working type generation code

* Fix type gen script invocation

* Delete type-info.js

* Change build script

* Recreate package lock

* mkdir generated

* Add type references to some pages

* Add TS-able snippets to docs examples

* Fix some stuff

* Add types to individual functions

* Add to store page

* Refactor compile-types.js

* Move ts sourcefile stuff to compile-types

* Remove commented code

* Half attempt at export aliases

* Add

* Fix, add disclaimer for svelte/internal

* Disable /docs prerendering

* Remove internals page

* Remove redundant stuff

* Make search work with it

* Fix compile types logic

* Add file: comment,

* Add two-slash to docs pages

* Get type links working

* Remove console.log

* Add action module

* Fix actions logic

* Make compile-types logic more robust

* Bump site-kit

* Fix gitignore

* Use moduleResolution bundler

* Don't apply shiki-twoslash to auto generated code snippets from render

* Recreate package lock

* Make TSbpage undraft

* Fix svelte component types

* Remove console.log

* No more sveltekit

* Make regex smarter

* Update sites/svelte.dev/scripts/type-gen/compile-types.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Rebuild package lock

* Remove commented out code

* Update deps

* Remove $$_attributes

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
											
										
										
											1 year ago
+								// @filename: ambiend.d.ts
 								import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 								declare global {
 									class Component extends SvelteComponent {}
 									var component: Component;
 									var value: unknown;
 								}
 								export {}
 								// @filename: index.ts
 								// ---cut---
-												feat(site-2): Split docs (#8435)

* Update links

* Move blog to site/content

* Update site/content/docs/02-component-format.md

* Fix docs links

* Add global prettierrc

* Auto format

* Fix git merge artifact

* Fix errors

* Update html to svelte(remaining ones)

* Add 2 blog posts

* Modify prettierrc

* Minor design fix

* Switch package lock to spaces, prettier ignore

* Regenerate package lock

* prettier format

* Push

* Remove console.logs

* Minor fixes

* Fix search

* Fix heading <code> style

* Fix search some more

* Code cleanup

* Update deps

* Move content around

* Allow drafts

* Redirect logic

* Don't render anything on docs if /docs

* Shorten the regex patterns

* Fix some more

* Hack the build into working

* Modernize docs links

* Add content to introduction

* Modify the content

* fix content links

* Reduce duplication in redirect regex

* Differences from Kit page

* Fix link

* Make OnThisPage visible on all docs

* Misc changes

* Move differences page to introduction

* Run prettier

* Prerender examples api routes

* Modify introdution page

* replace positions of readonly and get

* Minor blog style enhancement

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
											
										
										
											2 years ago
+								component.prop = value;
 								```
 								If a component is compiled with `accessors: true`, each instance will have getters and setters corresponding to each of the component's props. Setting a value will cause a _synchronous_ update, rather than the default async update caused by `component.$set(...)`.
 								By default, `accessors` is `false`, unless you're compiling as a custom element.
 								```js
-												feat(site-2): TS in docs (#8452)

* Commit

* Push working type generation code

* Fix type gen script invocation

* Delete type-info.js

* Change build script

* Recreate package lock

* mkdir generated

* Add type references to some pages

* Add TS-able snippets to docs examples

* Fix some stuff

* Add types to individual functions

* Add to store page

* Refactor compile-types.js

* Move ts sourcefile stuff to compile-types

* Remove commented code

* Half attempt at export aliases

* Add

* Fix, add disclaimer for svelte/internal

* Disable /docs prerendering

* Remove internals page

* Remove redundant stuff

* Make search work with it

* Fix compile types logic

* Add file: comment,

* Add two-slash to docs pages

* Get type links working

* Remove console.log

* Add action module

* Fix actions logic

* Make compile-types logic more robust

* Bump site-kit

* Fix gitignore

* Use moduleResolution bundler

* Don't apply shiki-twoslash to auto generated code snippets from render

* Recreate package lock

* Make TSbpage undraft

* Fix svelte component types

* Remove console.log

* No more sveltekit

* Make regex smarter

* Update sites/svelte.dev/scripts/type-gen/compile-types.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Rebuild package lock

* Remove commented out code

* Update deps

* Remove $$_attributes

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
											
										
										
											1 year ago
+								// @filename: ambiend.d.ts
 								import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 								declare global {
 									class Component extends SvelteComponent {}
 									var component: Component;
 									var props: Record<string, any>;
 								}
 								export {}
 								// @filename: index.ts
 								// ---cut---
 								console.log(component.count);
 								component.count += 1;
-												feat(site-2): Split docs (#8435)

* Update links

* Move blog to site/content

* Update site/content/docs/02-component-format.md

* Fix docs links

* Add global prettierrc

* Auto format

* Fix git merge artifact

* Fix errors

* Update html to svelte(remaining ones)

* Add 2 blog posts

* Modify prettierrc

* Minor design fix

* Switch package lock to spaces, prettier ignore

* Regenerate package lock

* prettier format

* Push

* Remove console.logs

* Minor fixes

* Fix search

* Fix heading <code> style

* Fix search some more

* Code cleanup

* Update deps

* Move content around

* Allow drafts

* Redirect logic

* Don't render anything on docs if /docs

* Shorten the regex patterns

* Fix some more

* Hack the build into working

* Modernize docs links

* Add content to introduction

* Modify the content

* fix content links

* Reduce duplication in redirect regex

* Differences from Kit page

* Fix link

* Make OnThisPage visible on all docs

* Misc changes

* Move differences page to introduction

* Run prettier

* Prerender examples api routes

* Modify introdution page

* replace positions of readonly and get

* Minor blog style enhancement

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
											
										
										
											2 years ago
+								```