@@ -5,7 +5,8 @@ title: 'Client-side component API'
5
5
## Creating a component
6
6
7
7
``` ts
8
- // @filename: ambiend.d.ts
8
+ // @errors: 2554
9
+ // @filename: ambient.d.ts
9
10
import { SvelteComponent , ComponentConstructorOptions } from ' svelte' ;
10
11
11
12
declare global {
@@ -14,14 +15,16 @@ declare global {
14
15
}
15
16
16
17
// @filename: index.ts
18
+ // @errors: 2554
17
19
// ---cut---
18
20
const component = new Component (options );
19
21
```
20
22
21
23
A client-side component — that is, a component compiled with ` generate: 'dom' ` (or the ` generate ` option left unspecified) is a JavaScript class.
22
24
23
25
``` ts
24
- // @filename: ambiend.d.ts
26
+ // @errors: 2554
27
+ // @filename: ambient.d.ts
25
28
import { SvelteComponent , ComponentConstructorOptions } from ' svelte' ;
26
29
27
30
declare module ' ./App.svelte' {
@@ -30,6 +33,7 @@ declare module './App.svelte' {
30
33
}
31
34
32
35
// @filename: index.ts
36
+ // @errors: 2554
33
37
// ---cut---
34
38
import App from ' ./App.svelte' ;
35
39
@@ -63,7 +67,7 @@ Whereas children of `target` are normally left alone, `hydrate: true` will cause
63
67
The existing DOM doesn't need to match the component — Svelte will 'repair' the DOM as it goes.
64
68
65
69
``` ts
66
- // @filename: ambiend .d.ts
70
+ // @filename: ambient .d.ts
67
71
import { SvelteComponent , ComponentConstructorOptions } from ' svelte' ;
68
72
69
73
declare module ' ./App.svelte' {
@@ -72,7 +76,7 @@ declare module './App.svelte' {
72
76
}
73
77
74
78
// @filename: index.ts
75
- // @errors: 2322
79
+ // @errors: 2322 2554
76
80
// ---cut---
77
81
import App from ' ./App.svelte' ;
78
82
@@ -85,7 +89,7 @@ const app = new App({
85
89
## ` $set `
86
90
87
91
``` ts
88
- // @filename: ambiend .d.ts
92
+ // @filename: ambient .d.ts
89
93
import { SvelteComponent , ComponentConstructorOptions } from ' svelte' ;
90
94
91
95
declare global {
@@ -106,7 +110,7 @@ Programmatically sets props on an instance. `component.$set({ x: 1 })` is equiva
106
110
Calling this method schedules an update for the next microtask — the DOM is _ not_ updated synchronously.
107
111
108
112
``` ts
109
- // @filename: ambiend .d.ts
113
+ // @filename: ambient .d.ts
110
114
import { SvelteComponent , ComponentConstructorOptions } from ' svelte' ;
111
115
112
116
declare global {
@@ -124,7 +128,7 @@ component.$set({ answer: 42 });
124
128
## ` $on `
125
129
126
130
``` ts
127
- // @filename: ambiend .d.ts
131
+ // @filename: ambient .d.ts
128
132
import { SvelteComponent , ComponentConstructorOptions } from ' svelte' ;
129
133
130
134
declare global {
@@ -146,7 +150,7 @@ Causes the `callback` function to be called whenever the component dispatches an
146
150
A function is returned that will remove the event listener when called.
147
151
148
152
``` ts
149
- // @filename: ambiend .d.ts
153
+ // @filename: ambient .d.ts
150
154
import { SvelteComponent , ComponentConstructorOptions } from ' svelte' ;
151
155
152
156
declare global {
@@ -168,7 +172,7 @@ off();
168
172
## ` $destroy `
169
173
170
174
``` js
171
- // @filename: ambiend .d.ts
175
+ // @filename: ambient .d.ts
172
176
import { SvelteComponent , ComponentConstructorOptions } from ' svelte' ;
173
177
174
178
declare global {
@@ -188,7 +192,7 @@ Removes a component from the DOM and triggers any `onDestroy` handlers.
188
192
## Component props
189
193
190
194
``` js
191
- // @filename: ambiend .d.ts
195
+ // @filename: ambient .d.ts
192
196
import { SvelteComponent , ComponentConstructorOptions } from ' svelte' ;
193
197
194
198
declare global {
@@ -199,12 +203,13 @@ declare global {
199
203
export {}
200
204
201
205
// @filename: index.ts
206
+ // @errors: 2339
202
207
// ---cut---
203
208
component .prop ;
204
209
```
205
210
206
211
``` js
207
- // @filename: ambiend .d.ts
212
+ // @filename: ambient .d.ts
208
213
import { SvelteComponent , ComponentConstructorOptions } from ' svelte' ;
209
214
210
215
declare global {
@@ -216,6 +221,7 @@ declare global {
216
221
export {}
217
222
218
223
// @filename: index.ts
224
+ // @errors: 2339
219
225
// ---cut---
220
226
component .prop = value;
221
227
```
@@ -225,7 +231,7 @@ If a component is compiled with `accessors: true`, each instance will have gette
225
231
By default, ` accessors ` is ` false ` , unless you're compiling as a custom element.
226
232
227
233
``` js
228
- // @filename: ambiend .d.ts
234
+ // @filename: ambient .d.ts
229
235
import { SvelteComponent , ComponentConstructorOptions } from ' svelte' ;
230
236
231
237
declare global {
@@ -237,6 +243,7 @@ declare global {
237
243
export {}
238
244
239
245
// @filename: index.ts
246
+ // @errors: 2339
240
247
// ---cut---
241
248
console .log (component .count );
242
249
component .count += 1 ;
0 commit comments