You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/internal-mechanism.md
+42-42
Original file line number
Diff line number
Diff line change
@@ -38,23 +38,26 @@ For example, if you enter `*.svelte` template to listen for input events:
38
38
39
39
```svelte
40
40
<script lang="ts">
41
-
function inputHandler() {
42
-
// process
43
-
}
41
+
function inputHandler() {
42
+
// process
43
+
}
44
44
</script>
45
-
<input on:input={inputHandler}>
45
+
46
+
<input on:input={inputHandler} />
46
47
```
47
48
48
49
Parse the following virtual script code as a script:
49
50
50
51
```ts
51
-
52
-
function inputHandler () {
53
-
// process
54
-
}
55
-
;function $_render1(){
56
-
57
-
(inputHandler) as ((e:'input'extendskeyofHTMLElementEventMap?HTMLElementEventMap['input'] :CustomEvent<any>) =>void );
52
+
function inputHandler() {
53
+
// process
54
+
}
55
+
function $_render1() {
56
+
inputHandleras (
57
+
e:"input"extendskeyofHTMLElementEventMap
58
+
?HTMLElementEventMap["input"]
59
+
:CustomEvent<any>,
60
+
) =>void;
58
61
}
59
62
```
60
63
@@ -78,25 +81,24 @@ For example, when using `{#each}` and `{@const}`:
78
81
79
82
```svelte
80
83
<script lang="ts">
81
-
const array = [1, 2, 3]
84
+
const array = [1, 2, 3];
82
85
</script>
86
+
83
87
{#each array as e}
84
-
{@const ee = e * 2}
85
-
{ee}
88
+
{@const ee = e * 2}
89
+
{ee}
86
90
{/each}
87
91
```
88
92
89
93
Parse the following virtual script code as a script:
90
94
91
95
```ts
92
-
93
-
const array = [1, 2, 3]
94
-
;function $_render1(){
95
-
96
-
Array.from(array).forEach((e) => {
96
+
const array = [1, 2, 3];
97
+
function $_render1() {
98
+
Array.from(array).forEach((e) => {
97
99
const ee =e*2;
98
-
(ee);
99
-
});
100
+
ee;
101
+
});
100
102
}
101
103
```
102
104
@@ -122,10 +124,10 @@ TypeScript's type inference is pretty good, so parsing Svelte as-is gives some w
122
124
e.g.
123
125
124
126
```ts
125
-
exportlet foo: { bar:number } |null=null
127
+
exportlet foo: { bar:number } |null=null;
126
128
127
129
$: console.log(foo&&foo.bar);
128
-
// ^ never type
130
+
// ^ never type
129
131
```
130
132
131
133
(You can see it on [TypeScript Online Playground](https://www.typescriptlang.org/play?#code/KYDwDg9gTgLgBAG2PAZhCAuOBvOAjAQyiwDsBXAWz2CjgF84AfOchBOAXhbLYFgAoAQBIsAYwgkAzhCQA6BBADmACjQQ4AMg1w1swlACUAbgFwz5i5YsB6a3AB6LYADcacGAE8wwAUA))
@@ -139,13 +141,13 @@ For example:
139
141
140
142
```svelte
141
143
<script lang="ts">
142
-
export let foo: { bar: number } | null = null
144
+
export let foo: { bar: number } | null = null;
143
145
144
-
$: console.log(foo && foo.bar);
146
+
$: console.log(foo && foo.bar);
145
147
146
-
$: r = foo && foo.bar;
148
+
$: r = foo && foo.bar;
147
149
148
-
$: ({ bar: n } = foo || { bar: 42 });
150
+
$: ({ bar: n } = foo || { bar: 42 });
149
151
</script>
150
152
151
153
{foo && foo.bar}
@@ -154,26 +156,24 @@ $: ({ bar: n } = foo || { bar: 42 });
154
156
Parse the following virtual script code as a script:
155
157
156
158
```ts
157
-
158
-
exportlet foo: { bar:number } |null=null
159
+
exportlet foo: { bar:number } |null=null;
159
160
160
-
$: function $_reactiveStatementScopeFunction1(){
161
-
console.log(foo&&foo.bar);
161
+
$: function $_reactiveStatementScopeFunction1(){
162
+
console.log(foo&&foo.bar);
162
163
}
163
164
164
-
$: let r =$_reactiveVariableScopeFunction2();
165
-
function $_reactiveVariableScopeFunction2(){
166
-
let $_tmpVar3;
167
-
return ($_tmpVar3=foo&&foo.bar);
165
+
$: let r =$_reactiveVariableScopeFunction2();
166
+
function $_reactiveVariableScopeFunction2(){
167
+
let $_tmpVar3;
168
+
return ($_tmpVar3=foo&&foo.bar);
168
169
}
169
170
170
-
$: let { bar: n } =$_reactiveVariableScopeFunction4();
171
-
function $_reactiveVariableScopeFunction4(){
172
-
let $_tmpVar5;
173
-
return ($_tmpVar5=foo|| { bar: 42 });
171
+
$: let { bar: n } =$_reactiveVariableScopeFunction4();
0 commit comments