Skip to content

Commit fdcee0b

Browse files
eye-waveeye-wave
committed
feat: update docs page
1 parent ba26d74 commit fdcee0b

20 files changed

+243
-112
lines changed

‎bun.lockb‎

-1.78 KB
Binary file not shown.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
"lint-staged": "^15.2.10",
5252
"prettier": "^3.3.3",
5353
"prettier-plugin-svelte": "^3.2.7",
54-
"publint": "^0.2.11",
54+
"publint": "^0.2.12",
5555
"shiki": "^1.22.0",
5656
"simple-git-hooks": "^2.11.1",
5757
"svelte": "^5.1.0",

‎src/lib/Knob.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
2-
import { normalize, format, unnormalizeToString, unnormalizeToNumber } from './params.js';
2+
import { normalize, format, unnormalizeToString, unnormalizeToNumber } from './params';
33
import { spring } from 'svelte/motion';
4-
import type { EnumParam, FloatParam } from './params.js';
4+
import type { EnumParam, FloatParam } from './params';
55
66
interface Props {
77
style?: string;

‎src/lib/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Reexport your entry components here
2-
export * from './params.js';
2+
export * from './params';
33
import Knob from './Knob.svelte';
44

55
export { Knob };

‎src/lib/params.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import type { EnumParam } from './params/enum-param.js';
2-
import type { FloatParam } from './params/float-param.js';
1+
import type { EnumParam } from './params/enum-param';
2+
import type { FloatParam } from './params/float-param';
33

4-
import * as ENUM from './params/enum-param.js';
5-
import * as FLOAT from './params/float-param.js';
4+
import * as ENUM from './params/enum-param';
5+
import * as FLOAT from './params/float-param';
66

7-
export { createEnumParam, type EnumParam, type Variant } from './params/enum-param.js';
8-
export { createFloatParam, type FloatParam } from './params/float-param.js';
7+
export { createEnumParam, type EnumParam, type Variant } from './params/enum-param';
8+
export { createFloatParam, type FloatParam } from './params/float-param';
99

10-
export * from './params/range.js';
10+
export * from './params/range';
1111

1212
export type Param = EnumParam<readonly string[]> | FloatParam;
1313

‎src/lib/params/float-param.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { type Range } from './range.js';
1+
import { type Range } from './range';
22

33
export type FloatParam = {
44
type: 'float-param';

‎src/routes/+page.svelte‎

Lines changed: 23 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,31 @@
11
<script lang="ts">
2-
// remove next
32
import CopyPaste from './CopyPaste.svelte';
4-
import {
5-
createEnumParam,
6-
createFloatParam,
7-
createRange,
8-
type Variant,
9-
Knob
10-
} from '$lib/index.js';
11-
12-
const basicParam = createFloatParam(createRange('lin', 0, 100));
13-
const freqParam = createFloatParam(createRange('log', 20, 20_000));
14-
const gainParam = createFloatParam(createRange('log', -30, 30, Math.E));
15-
const qParam = createFloatParam(createRange('log', 0.01, 30, 2));
16-
const smoothParam = createFloatParam(createRange('lin', 0, 100));
17-
const snapParam = createFloatParam(createRange('lin', 0, 2000));
18-
const enumParam = createEnumParam(['🍍', '🍉', '🍌', '🍎', '🥭', '🍇', '🥝', '🍋'] as const);
19-
const filterParam = createEnumParam(['LP 12dB', 'HP 12dB', 'HP 24dB', 'BP 24dB'] as const);
20-
const oscParam = createEnumParam(['Sine', 'Triangle', 'Square', 'Sawtooth', 'Noise'] as const);
21-
22-
const snapPoints = Array.from({ length: 5 }, (_, i) => i * 500);
23-
24-
let basicValue = 0;
25-
let freqValue = 20;
26-
let gainValue = 20;
27-
let qValue = 0;
28-
let smoothValue = 0;
29-
let snapValue = 0;
30-
let enumValue: Variant<typeof enumParam> = '🍎';
31-
let filterValue: Variant<typeof filterParam> = 'HP 24dB';
32-
let oscValue: Variant<typeof oscParam> = 'Square';
3+
import LazyComponent from './LazyComponent.svelte';
334
</script>
345

356
<div class="grid">
367
<h1 class="example"># svelte-knobs</h1>
378

389
<div class="example">
3910
<h2>Basic</h2>
40-
<Knob param={basicParam} bind:value={basicValue} label="Volume" unit="%" />
11+
<LazyComponent component={() => import('./examples/BasicKnob.svelte')} />
4112

4213
<p>A basic knob with a linear parameter.</p>
14+
<CopyPaste>%import('./examples/BasicKnob.svelte')%</CopyPaste>
4315
</div>
4416

4517
<div class="example">
4618
<h2>Logarithmic</h2>
47-
<Knob param={freqParam} bind:value={freqValue} label="Frequency" unit="hz" />
48-
<Knob param={gainParam} bind:value={gainValue} label="Gain" unit="dB" decimalDigits={1} />
49-
<Knob param={qParam} bind:value={qValue} label="Q" unit="dB" decimalDigits={2} />
19+
<LazyComponent component={() => import('./examples/LogarithmicKnob.svelte')} />
5020

5121
<p>A knob with logarithmic scaling (default base is 10).</p>
22+
<CopyPaste>%import('./examples/LogarithmicKnob.svelte')%</CopyPaste>
5223
</div>
5324

5425
<div class="example">
5526
<h2>Smoothness</h2>
5627

57-
<h3>Smooth</h3>
58-
<Knob param={smoothParam} bind:value={smoothValue} label="Amount" unit="%" stiffness={0.1} />
59-
60-
<h3>Stiff</h3>
61-
<Knob param={smoothParam} bind:value={smoothValue} label="Amount" unit="%" stiffness={1} />
28+
<LazyComponent component={() => import('./examples/SmoothKnob.svelte')} />
6229

6330
<p>
6431
Knobs use <code>spring</code> function from <code>svelte/motion</code> under the hood,
@@ -69,31 +36,28 @@
6936
Additionally, due to how Svelte's binding works, you can use the same parameter and value for
7037
multiple knobs simultaneously.
7138
</p>
39+
40+
<CopyPaste>%import('./examples/SmoothKnob.svelte')%</CopyPaste>
7241
</div>
7342

7443
<div class="example">
7544
<h2>Snap Points</h2>
76-
<Knob
77-
param={snapParam}
78-
bind:value={snapValue}
79-
snapValues={snapPoints}
80-
snapThreshold={0.1}
81-
label="Release"
82-
unit="ms"
83-
/>
45+
46+
<LazyComponent component={() => import('./examples/SnapPoints.svelte')} />
8447

8548
<p>
8649
You can define specific points where the knob should snap and control the snapping strength by
8750
adjusting the <code>snapThreshold</code> property.
8851
</p>
8952
<p><i>Note: This works only with </i><code>FloatParam</code><i> values.</i></p>
53+
54+
<CopyPaste>%import('./examples/SnapPoints.svelte')%</CopyPaste>
9055
</div>
9156

9257
<div class="example">
9358
<h2>Enum Parameter</h2>
94-
<Knob param={enumParam} bind:value={enumValue} label="Fruit" />
95-
<Knob param={filterParam} bind:value={filterValue} label="Filter Type" />
96-
<Knob param={oscParam} bind:value={oscValue} label="Oscillator Type" />
59+
60+
<LazyComponent component={() => import('./examples/EnumParam.svelte')} />
9761

9862
<p>
9963
An example of how <code>EnumParam</code> works: due to the way TypeScript functions, we need
@@ -106,52 +70,35 @@
10670
</p>
10771
<p>For instance:</p>
10872
<code>const fruitParam = createEnumParam(['🍍', '🍉', '🍌', '🥝', '🍋'] as const);</code>
73+
74+
<CopyPaste>%import('./examples/EnumParam.svelte')%</CopyPaste>
10975
</div>
11076

11177
<div class="example">
11278
<h2>Disabled</h2>
11379

114-
<Knob param={basicParam} value={58} disabled />
80+
<LazyComponent component={() => import('./examples/DisabledKnob.svelte')} />
11581

11682
<p>
11783
Just like <code>{'<button>'}</code> and other interactive HTML elements,
11884
<code>{'<Knob />'}</code> can also be disabled.
11985
</p>
86+
87+
<CopyPaste>%import('./examples/DisabledKnob.svelte')%</CopyPaste>
12088
</div>
12189

12290
<div class="example">
12391
<h2>Colors</h2>
12492

125-
<Knob param={basicParam} value={24} label="Svelte theme" colors={{ arc: '#ff3e00' }} />
126-
<Knob
127-
param={basicParam}
128-
value={48}
129-
label="Light theme"
130-
colors={{
131-
arc: '#4292d3',
132-
bg: '#eef'
133-
}}
134-
style="color:#000"
135-
/>
136-
<Knob
137-
onChange={console.log}
138-
param={basicParam}
139-
value={64}
140-
label="Disabled color"
141-
colors={{ disabled: '#ccc' }}
142-
disabled
143-
/>
93+
<LazyComponent component={() => import('./examples/ColoredKnobs.svelte')} />
14494

14595
<p>
14696
Of course, <code>{'<Knob />'}</code> colors can be customized to look however you want.
14797
<b>Disclaimer</b>: Font and thumb colors are based on the current font color.
14898
</p>
149-
</div>
150-
</div>
15199

152-
<div class="code">
153-
<h2>Code for this Demo:</h2>
154-
<CopyPaste>%self%</CopyPaste>
100+
<CopyPaste>%import('./examples/ColoredKnobs.svelte')%</CopyPaste>
101+
</div>
155102
</div>
156103

157104
<style>
@@ -168,7 +115,7 @@
168115
padding: 2rem;
169116
display: flex;
170117
flex-direction: column;
171-
max-width: 600px;
118+
max-width: 720px;
172119
margin: 0 auto;
173120
gap: 8px;
174121
}

‎src/routes/CopyPaste.svelte‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,24 +59,28 @@
5959
</div>
6060

6161
<style>
62-
:global(pre.shiki) {
62+
:global(pre.shiki) {
6363
box-sizing: border-box;
64+
border-radius: 8px;
65+
overflow: scroll;
6466
padding: 1rem;
6567
}
6668
6769
:global(.shiki > code) {
6870
text-wrap: wrap;
71+
tab-size: 2;
6972
}
7073
7174
.code-container {
75+
width: 100%;
7276
position: relative;
7377
margin-bottom: 1rem;
7478
}
7579
7680
.copy-button {
7781
position: absolute;
78-
top: 2.5rem;
79-
right: 1rem;
82+
top: 3rem;
83+
right: 0.5rem;
8084
padding: 0.5rem;
8185
border: none;
8286
border-radius: 0.375rem;

‎src/routes/Hello.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
hi!

‎src/routes/LazyComponent.svelte‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script>
2+
import { viewport } from './viewport';
3+
4+
let { width = 400, height = 200, component } = $props();
5+
6+
let isShowingComponent = $state(false);
7+
let componentPromise = $state();
8+
</script>
9+
10+
{#if !isShowingComponent}
11+
<div
12+
style:width="{width}px"
13+
style:height="{height}px"
14+
use:viewport
15+
onenterViewport={() => {
16+
console.log('Lazy component is now vissible');
17+
componentPromise = component();
18+
isShowingComponent = true;
19+
}}
20+
>
21+
Loading ...
22+
</div>
23+
{:else}
24+
{#await componentPromise}
25+
<div style:width="{width}px" style:height="{height}px">Loading ...</div>
26+
{:then { default: Component }}
27+
<Component />
28+
{/await}
29+
{/if}

0 commit comments

Comments
 (0)