Skip to content

Commit fb46233

Browse files
ampledampled
committed
i should commit more often
1 parent b105ac9 commit fb46233

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+868
-346
lines changed

‎package-lock.json

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
},
5757
"dependencies": {
5858
"@neodrag/svelte": "^2.0.6",
59+
"fast-deep-equal": "^3.1.3",
5960
"highlight.js": "^11.10.0",
6061
"lz-string": "^1.5.0"
6162
}

‎src/doclib/Code.svelte

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script>
2+
import hljs from 'highlight.js/lib/core'
3+
import xml from 'highlight.js/lib/languages/xml'
4+
import javascript from 'highlight.js/lib/languages/javascript'
5+
// import svelte from 'highlight.js/lib/languages/svelte'
6+
import 'highlight.js/styles/base16/dracula.min.css'
7+
8+
const instance = hljs.newInstance()
9+
// hljs.configure({ classPrefix: '' })
10+
instance.registerLanguage('xml', xml)
11+
instance.registerLanguage('javascript', javascript)
12+
13+
let { code } = $props()
14+
15+
let highlighted = $derived(instance.highlight(code, { language: 'xml' }))
16+
</script>
17+
18+
<pre class="hljs">{@html highlighted.value}<div class="label">example</div>
19+
</pre>
20+
21+
<style>
22+
pre {
23+
position: relative;
24+
border-radius: 8px;
25+
border: 1px solid var(--border-color);
26+
background-color: var(--bg-code);
27+
padding: 1.25em;
28+
font-size: 12px;
29+
}
30+
31+
.label {
32+
position: absolute;
33+
top: 0;
34+
right: 0;
35+
border-radius: 0 8px 0 8px;
36+
background-color: var(--bg-lighter);
37+
border-left: 1px solid var(--border-color);
38+
border-bottom: 1px solid var(--border-color);
39+
padding: 0.5em;
40+
}
41+
</style>

‎src/doclib/examples/HTMLElements.svelte

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<script lang="ts">
2+
import { Inspect } from '$lib/index.js'
3+
4+
import Code from '../Code.svelte'
5+
import code from './promises.txt?raw'
6+
7+
let div = $state()
8+
let activeElement: (typeof document)['activeElement'] = $state(null)
9+
10+
let width = $state(300)
11+
let classes = $state('')
12+
let testid = $state('demo-div')
13+
14+
$inspect(classes)
15+
</script>
16+
17+
<svelte:document bind:activeElement />
18+
19+
<div class="flex col">
20+
<h2>HTML Elements</h2>
21+
<p>inspect attributes of html elemenets</p>
22+
23+
<div class="flex row" style="width: 100%">
24+
<!-- <Code {code} /> -->
25+
<div class="flex col">
26+
<div
27+
bind:this={div}
28+
class="demo-div {classes}"
29+
style="width: {width}px;"
30+
data-testid={testid}
31+
>
32+
<label>
33+
testid
34+
<input type="text" bind:value={testid} />
35+
</label>
36+
<label>
37+
width
38+
<input type="number" bind:value={width} step="12" />
39+
</label>
40+
<label>
41+
extra class
42+
<select bind:value={classes}>
43+
<option></option>
44+
<option>red</option>
45+
<option>blue</option>
46+
<option>radius</option>
47+
</select>
48+
</label>
49+
</div>
50+
<Inspect value={div} name="htmlElement" theme="drak" style="flex-basis: 100%" expandAll />
51+
<Inspect
52+
value={activeElement}
53+
name="activeElement"
54+
theme="drak"
55+
style="flex-basis: 100%"
56+
expandAll
57+
/>
58+
</div>
59+
</div>
60+
</div>
61+
62+
<style>
63+
.demo-div {
64+
background-color: cadetblue;
65+
transition: all 0.2s ease-in-out;
66+
display: flex;
67+
flex-flow: row wrap;
68+
justify-content: flex-start;
69+
align-items: flex-start;
70+
height: 150px;
71+
72+
input {
73+
max-width: 50%;
74+
}
75+
76+
&.red {
77+
background-color: pink;
78+
color: black;
79+
}
80+
81+
&.blue {
82+
background-color: lightblue;
83+
color: white;
84+
}
85+
86+
&.radius {
87+
border-radius: 16px;
88+
}
89+
}
90+
</style>

‎src/doclib/examples/Promises.svelte

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script lang="ts">
2+
import { Inspect } from '$lib/index.js'
3+
import { onMount } from 'svelte'
4+
import Code from '../Code.svelte'
5+
import code from './promises.txt?raw'
6+
7+
let promises = $state.raw<Record<string, Promise<any>>>()
8+
9+
function run() {
10+
// promises = {}
11+
promises = {
12+
neverResolve: new Promise(() => {}),
13+
resolveInAFew: new Promise((resolve) => {
14+
setTimeout(() => {
15+
resolve('yeah')
16+
}, 2000)
17+
}),
18+
rejectsInAFew: new Promise((_, reject) => {
19+
setTimeout(() => {
20+
reject(new Error('not today', { cause: new Error('dont wanna') }))
21+
}, 3500)
22+
}),
23+
}
24+
}
25+
26+
onMount(() => {
27+
run()
28+
})
29+
</script>
30+
31+
<div class="flex col">
32+
<h2>Promises</h2>
33+
<p>show status and eventual result of promises</p>
34+
35+
<div class="flex row" style="width: 100%">
36+
<Code {code} />
37+
{#if promises}
38+
<Inspect value={promises} name="promises" theme="drak" style="flex-basis: 100%" expandAll />
39+
<button onclick={run}>rerun</button>
40+
{/if}
41+
</div>
42+
</div>

‎src/doclib/examples/promises.txt

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script>
2+
import { Inspect } from '@eirikk/inspect'
3+
4+
let promises = {
5+
neverResolve: new Promise(() => {}),
6+
resolveInAFew: new Promise((resolve) => {
7+
setTimeout(() => {
8+
resolve('yeah')
9+
}, 2000)
10+
}),
11+
rejectsInAFew: new Promise((_, reject) => {
12+
setTimeout(() => {
13+
reject('nope')
14+
}, 3500)
15+
}),
16+
}
17+
</script>
18+
19+
<Inspect value={promises} name="promises" />

‎src/lib/Inspect.svelte

+23-8
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,18 @@
1313
import LZ from 'lz-string'
1414
import type { CustomComponents } from './types.js'
1515
import { browser } from '$app/environment'
16+
import { prefersReducedMotion } from 'svelte/motion'
1617
1718
type InspectProps = {
1819
value?: any
1920
name?: string
20-
rawIndent?: number
2121
showLength?: boolean
2222
showTypes?: boolean
2323
stringCollapse?: number
2424
savecollapse?: 'localStorage' | 'sessionStorage'
2525
noanimate?: boolean
26+
quotes?: 'single' | 'double'
27+
expandAll?: boolean
2628
theme?: string
2729
draggable?: boolean
2830
customComponents?: CustomComponents
@@ -34,35 +36,39 @@
3436
showLength = true,
3537
showTypes = true,
3638
savecollapse = 'localStorage',
37-
stringCollapse = undefined,
39+
quotes = 'single',
40+
expandAll = false,
41+
stringCollapse = 0,
3842
noanimate = false,
3943
class: classValue = '',
40-
theme = 'drak',
44+
theme = 'cotton-candy',
4145
draggable = false,
4246
customComponents = {},
4347
...rest
4448
}: InspectProps = $props()
4549
46-
let options = createOptions(() => ({
50+
let options = createOptions({
4751
showLength,
4852
showTypes,
4953
stringCollapse,
5054
draggable,
5155
noanimate,
5256
customComponents,
5357
theme,
54-
}))
58+
expandAll,
59+
})
5560
5661
$effect(() => {
57-
options.value = {
62+
options.setOptions({
5863
showLength,
5964
showTypes,
6065
stringCollapse,
6166
draggable,
6267
noanimate,
6368
customComponents,
6469
theme,
65-
}
70+
expandAll,
71+
})
6672
})
6773
6874
setContext('json-inspect', options)
@@ -73,7 +79,8 @@
7379
const v = localStorage.getItem('[svelte-value-inspect]' + name)
7480
if (v) {
7581
try {
76-
initialState = JSON.parse(LZ.decompress(v))
82+
// initialState = JSON.parse(LZ.decompress(v))
83+
initialState = JSON.parse(v)
7784
} catch (e) {
7885
console.warn('[Svelte Value Inspect] Could not restore saved state')
7986
}
@@ -113,9 +120,12 @@
113120
loadDraggable()
114121
}
115122
})
123+
124+
let fixedBottom = $state(false)
116125
</script>
117126

118127
<!-- {#if browser} -->
128+
<!-- {#if initialState} -->
119129
<svelte:boundary>
120130
{#snippet failed(error, reset)}
121131
{#if error instanceof Error}
@@ -130,11 +140,16 @@
130140
in:fade
131141
class:noanimate={options.value.noanimate}
132142
class="ampled-json-inspect {classValue} {options.value.theme}"
143+
class:fixedBottom
133144
use:getAction={() => ({ handle: '.handle', disabled: !options.value.draggable })}
134145
{...rest}
135146
>
136147
<Options />
137148
<div class="body">
149+
<!-- <button
150+
style="position: absolute; top:0; left: 0;"
151+
onclick={() => (fixedBottom = !fixedBottom)}>&rArr;</button
152+
> -->
138153
{#if options.value.draggable}
139154
<div class="handle">&vellip;</div>
140155
{/if}

‎src/lib/action.ts/update-flash.svelte.ts

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { untrack } from 'svelte'
2+
import type { Action } from 'svelte/action'
3+
import equal from 'fast-deep-equal'
4+
5+
export const flashOnUpdate: Action<HTMLElement, () => unknown> = (element, value) => {
6+
let prevValue = value()
7+
let timeout = $state<number>()
8+
9+
const originalColor = element.style.color
10+
11+
element.style.transition = ''
12+
13+
flash() // SEE TODO extract key and dash/collapse button out of titlebar/onelineview
14+
15+
function flash() {
16+
// element.style.transition = 'color 200ms ease-out'
17+
18+
element.style.color = 'var(--bg-light)'
19+
if (timeout) window.clearTimeout(timeout)
20+
21+
timeout = window.setTimeout(() => {
22+
element.style.transition = 'color 200ms ease-out'
23+
24+
element.style.color = originalColor
25+
// element.style.transition = ''
26+
}, 200)
27+
}
28+
29+
$effect(() => {
30+
const newVal = value()
31+
// let prevValue = newVal;
32+
33+
untrack(() => {
34+
// const prev = $state.snapshot(prevValue)
35+
36+
// if (typeof newVal === 'string' || prevValue == null || newVal == null) {
37+
// console.log(prevValue, newVal)
38+
// }
39+
40+
if (!equal(prevValue, newVal)) {
41+
flash()
42+
prevValue = newVal
43+
}
44+
})
45+
})
46+
}

0 commit comments

Comments
 (0)