1
1
<script lang =" ts" >
2
2
import { compile , jsonquery , parse , stringify } from ' @jsonquerylang/jsonquery'
3
+ import { isTextFormat } from ' ./typeguards' ;
3
4
import Button from ' ./Button.svelte'
4
5
import Playground from ' ./Playground.svelte'
5
- import { examples } from ' ./data/examples'
6
+ import { examples , type Example } from ' ./data/examples'
6
7
import { loadLocalStorage , saveLocalStorage } from ' ./runes/localStorageState.svelte'
7
8
import type { QueryText } from ' ./types'
8
9
@@ -15,6 +16,7 @@ const keyInput = 'playground-input'
15
16
const keyQuery = ' playground-query'
16
17
const keyQueryTab = ' playground-query-tab'
17
18
19
+ let name = $state (examples [0 ].name )
18
20
let input = $state (loadLocalStorage (keyInput , examples [0 ].input ))
19
21
// biome-ignore lint/style/useConst: must be let for Svelte
20
22
let queryTab: ' text' | ' json' = $state (loadLocalStorage (keyQueryTab , ' text' ))
@@ -24,19 +26,30 @@ $effect(() => saveLocalStorage(keyInput, input))
24
26
$effect (() => saveLocalStorage (keyQuery , query ))
25
27
$effect (() => saveLocalStorage (keyQueryTab , queryTab ))
26
28
27
- function loadExample(example : { input : string ; query : string } ) {
29
+ function loadExample(example : Example ) {
28
30
input = example .input
29
31
query = { textFormat: example .query }
32
+ name = example .name
30
33
}
34
+
35
+ const activeExample = $derived (
36
+ examples .find (
37
+ (example ) =>
38
+ example .input === input &&
39
+ isTextFormat (query ) &&
40
+ example .query === query .textFormat
41
+ )
42
+ );
31
43
</script >
32
44
33
45
<div class =" examples" >
34
46
<div class =" examples-inner" >
35
47
{#each examples as example }
36
- <Button class ="example" onclick ={() => loadExample (example )}>{example .name }</Button >
48
+ <Button class ="example { activeExample === example ? ' active ' : ' ' } " onclick ={() => loadExample (example )}>{example .name }</Button >
37
49
{/each }
38
50
</div >
39
51
</div >
52
+
40
53
<Playground bind:input bind:query bind:queryTab />
41
54
42
55
<style >
0 commit comments