You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/documentation/docs/04-compiler-and-api/02-client-side-component-ap...

254 lines
6.7 KiB

---
title: 'Client-side component API'
---
## Creating a component
```ts
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @errors: 2554
// @filename: ambient.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
declare global {
class Component extends SvelteComponent {}
var options: ComponentConstructorOptions<Record<string, any>>;
}
// @filename: index.ts
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @errors: 2554
// ---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
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @errors: 2554
// @filename: ambient.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
declare module './App.svelte' {
class Component extends SvelteComponent {}
export default Component;
}
// @filename: index.ts
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @errors: 2554
// ---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#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
/// file: index.js
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @filename: ambient.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
declare module './App.svelte' {
class Component extends SvelteComponent {}
export default Component;
}
// @filename: index.ts
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @errors: 2322 2554
// ---cut---
import App from './App.svelte';
const app = new App({
target: document.querySelector('#server-rendered-html'),
hydrate: true
});
```
## `$set`
```ts
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @filename: ambient.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
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @filename: ambient.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
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @filename: ambient.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
/// file: index.js
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @filename: ambient.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
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @filename: ambient.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
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @filename: ambient.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
declare global {
class Component extends SvelteComponent {}
var component: Component;
}
export {}
// @filename: index.ts
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @errors: 2339
// ---cut---
component.prop;
```
```js
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @filename: ambient.d.ts
import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
declare global {
class Component extends SvelteComponent {}
var component: Component;
var value: unknown;
}
export {}
// @filename: index.ts
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @errors: 2339
// ---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
/// file: index.js
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @filename: ambient.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
update type generation script (#8712) * chore: playground (#8648) * initialize playground * pnpm up * tidy up git ignore * remove fluff * format * rm readme * fix jsconfig error * add skip-worktree instructions * reload hack * simplify * use rollup * ughh * add flag for SSR * ... * simplify further * configure launch.json * add debugger info to readme * remove vm modules flag * use replaceAll instead of replace * tidy up * fix: make it run * add watch to launch config * Generate type declarations with `dts-buddy` (#8702) * use dts-buddy * remove debug output * remove existing type generation script * fix package.json * update gitignore * bump dts-buddy * remove unused action entry point * add svelte/compiler and svelte/types/compiler/preprocess modules * bump dts-buddy * annoying * changeset * bump dts-buddy * get rid of .d.ts files * another one * Update packages/svelte/package.json Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> * fix: export ComponentType (#8694) * fix: export ComponentType * ughh * changeset * fix: derived types (#8700) * fix: derived store types * changeset * Version Packages (next) (#8709) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * update type generation script * remove unused stuff * fix: changeset publish script isn't called release anymore (#8711) * chore: remove prepare script (#8713) * chore: fix release workflow (#8716) * More readable, Fix $$_attributes * Fix types (#8727) * put comment in right place * bump dts-buddy --------- Co-authored-by: Rich Harris <git@rich-harris.dev> * build types * add svelte/compiler types * remove prepare script * fix * typo * squelch errors * Add svelte and kit to twoslash's types field * squelch more stuff * Add errors to account for new types * Remove deps * formatting tweak * fix linting, maybe * the hell * gah * Fix types a bit * bump dts-buddy * pnpm generate in dev mode * Cache again * reduce index * bump dts-buddy * remove comment --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dominik G <dominik.goepel@gmx.de> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago
// @errors: 2339
// ---cut---
console.log(component.count);
component.count += 1;
```