/
TypeScriptImports.svelte
134 lines (110 loc) · 3.59 KB
/
TypeScriptImports.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<script lang="ts" context="module">
import { storeModuleTemplateOnly, storeModuleScriptOnly } from "./store";
onlyUsedInModuleScript;
</script>
<script lang="ts">
// Some of these imports don't exist on disk, but they don't need to for this test.
import { fly } from "svelte/transition";
import { flip } from "svelte/animate";
import Nested from "./Nested.svelte";
import { hello } from "./script";
import { AValue, AType } from "./types";
import { storeTemplateOnly, storeScriptOnly, store0 } from "./store";
import { onlyUsedInModuleScript } from "./modulescript";
const ui = { MyNested: Nested };
const val: AType = "test1";
const prom: Promise<AType> = Promise.resolve("test2");
const arr: AType[] = ["test1", "test2"];
const isTest1 = (v: AType) => v === "test1";
const obj = {
fn: () => "test",
val: "test1" as const,
$in: "",
a: "$",
b: '$',
c: `$`
};
let inputVal: string;
const action = (node: Element, options: { id: string; }) => { node.id = options.id; };
const action2 = (node: Element) => { node.classList.add("test"); };
let nested: Nested;
let scrollY = 500;
let innerWidth = 500;
const duration = 200;
function onKeyDown(e: KeyboardEvent): void {
e.preventDefault();
}
$storeScriptOnly;
$storeModuleScriptOnly;
$store0;
// These shouldn't count as store values:
// $\\; $$; $§; $%; $°; $(; $); $[; $]; $<; $>; $ ; $^; $`; $"; $';
// These don't need to be tested explicitly, the test will throw and error
// at the TypeScript parsing stage if they are part of the false positives
</script>
<style>
.value { color: #ccc; }
</style>
<svelte:window on:keydown={onKeyDown} {scrollY} bind:innerWidth />
<svelte:body on:keydown={onKeyDown} />
<svelte:head>
<title>Title: {val}</title>
</svelte:head>
{$storeTemplateOnly}
{$storeModuleTemplateOnly}
<div>
<Nested let:var1 let:var2={var3}>
<Nested bind:this={nested} />
<Nested {...obj} />
<Nested {...{ var1, var3 }} />
<svelte:fragment slot="slot1" let:var4={var5}>
<Nested {...{ var5 }} />
</svelte:fragment>
<div slot="slot2" let:var6={var7}>
<Nested {...{ var7 }} />
</div>
<div slot="slot3">
<Nested {...{ val }} />
</div>
</Nested>
<svelte:component this={ui.MyNested} {val} on:keydown={onKeyDown} bind:inputVal />
<p class:value={!!inputVal}>{hello}</p>
<input bind:value={inputVal} use:action={{ id: val }} use:action2 />
{#if AValue && val}
<p class="value" transition:fly={{ duration }}>There is a value: {AValue}</p>
{/if}
{#if val && isTest1(val) && AValue && true && "test"}
<p class="value">There is a value: {AValue}</p>
{:else if obj.val && obj.fn() && isTest1(obj.val)}
<p class="value">There is a value: {AValue}</p>
{:else}
Else
{/if}
{#each arr as item (item)}
<p animate:flip={{ duration }}>{item}</p>
{/each}
{#each arr as item}
<p>{item}</p>
{:else}
<p>No items</p>
{/each}
{#await prom}
Loading...
{:then value}
<input type={val} {value} on:input={e => inputVal = e.currentTarget.value} />
{:catch err}
<p>Error: {err}</p>
{/await}
{#await prom then value}
<p>{value}</p>
{/await}
{#key val}
<p>Keyed {val}</p>
{/key}
<slot name="slot0" {inputVal}>
<p>{inputVal}</p>
</slot>
{@html val}
{@debug val, inputVal}
</div>
<!-- Some comment -->