Skip to content

Commit 78d5375

Browse files
chase-moskalchase-moskal
committed
rework: loaders
1 parent 11bcb00 commit 78d5375

File tree

8 files changed

+224
-67
lines changed

8 files changed

+224
-67
lines changed

‎s/demo/demo.bundle.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11

2+
import {css, html} from "lit"
23
import {nap, repeat} from "@e280/stz"
3-
import {css, html, render} from "lit"
44

55
import {$} from "../features/dom/dollar.js"
66
import {view} from "../features/views/view.js"
77
import {cssReset} from "../features/views/css-reset.js"
8-
import {loady} from "../features/loady/ascii-loader.js"
8+
import {anims, makeLoader} from "../features/op/loader/make-loader.js"
99

1010
console.log("🦝 sly")
1111

@@ -18,6 +18,8 @@ const styles = css`
1818
}
1919
`
2020

21+
export const loader = makeLoader(anims.aesthetic3)
22+
2123
const MyView = view(use => (greeting: string) => {
2224
use.name("my-view")
2325
use.styles(cssReset, styles)
@@ -38,15 +40,15 @@ const MyView = view(use => (greeting: string) => {
3840

3941
return html`
4042
<p>${greeting} <slot></slot> ${count()}</p>
41-
<p>${loady.dots(op, () => "op loaded")}</p>
43+
<p>${loader(op, () => "op loaded")}</p>
4244
`
4345
})
4446

45-
render(
47+
$.render(
48+
$(".demo"),
4649
MyView
4750
.attr("class", "incredi")
4851
.children("world")
4952
.props("hello"),
50-
$(".demo"),
5153
)
5254

‎s/features/loady/ascii-loader.ts‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎s/features/loady/parts/ascii-loader.ts‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎s/features/op/loader/make-loader.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
import {Op} from "../op.js"
3+
import {braille} from "./parts/anims.js"
4+
import {Content} from "../../views/types.js"
5+
import {ErrorDisplay} from "./parts/error-display.js"
6+
7+
export * as anims from "./parts/anims.js"
8+
9+
export type Loader = <V>(op: Op<V>, ready: (value: V) => Content) => Content
10+
11+
export const errorDisplay = (error: any) => ErrorDisplay(error)
12+
13+
export function makeLoader(
14+
loading: () => Content = braille,
15+
error: (error: any) => Content = errorDisplay,
16+
): Loader {
17+
18+
return (op, ready) => op.select({loading, ready, error})
19+
}
20+

‎s/features/op/loader/parts/anims.ts‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
2+
import {AsciiAnim} from "./ascii-anim.js"
3+
import {Content} from "../../../views/types.js"
4+
5+
export function ascii(hz: number, frames: string[]): () => Content {
6+
return () => AsciiAnim({hz, frames})
7+
}
8+
9+
const hz = 20
10+
11+
export const spinner = ascii(hz, [
12+
"|",
13+
"/",
14+
"-",
15+
"\\",
16+
])
17+
18+
export const braille = ascii(hz, [
19+
"⠈",
20+
"⠐",
21+
"⠠",
22+
"⢀",
23+
"⡀",
24+
"⠄",
25+
"⠂",
26+
"⠁",
27+
])
28+
29+
export const aesthetic = ascii(hz, [
30+
"▱▱▱▱▱",
31+
"▰▱▱▱▱",
32+
"▰▰▱▱▱",
33+
"▰▰▰▱▱",
34+
"▰▰▰▰▱",
35+
"▰▰▰▰▰",
36+
"▰▰▰▰▰",
37+
"▱▰▰▰▰",
38+
"▱▱▰▰▰",
39+
"▱▱▱▰▰",
40+
"▱▱▱▱▰",
41+
])
42+
43+
export const aesthetic2 = ascii(hz, [
44+
"▰▱▱▱▱",
45+
"▰▱▱▱▱",
46+
"▱▰▱▱▱",
47+
"▱▱▰▱▱",
48+
"▱▱▱▰▱",
49+
"▱▱▱▱▰",
50+
"▱▱▱▱▰",
51+
"▱▱▱▰▱",
52+
"▱▱▰▱▱",
53+
"▱▰▱▱▱",
54+
])
55+
56+
export const aesthetic3 = ascii(hz, [
57+
"▱▱▰▱▱",
58+
"▱▱▱▰▱",
59+
"▱▱▱▰▰",
60+
"▱▱▱▰▰",
61+
"▱▱▱▱▰",
62+
"▱▱▱▱▰",
63+
"▱▱▱▱▰",
64+
"▱▱▱▰▰",
65+
"▱▱▱▰▰",
66+
"▱▱▱▰▱",
67+
"▱▱▰▱▱",
68+
"▱▰▱▱▱",
69+
"▰▰▱▱▱",
70+
"▰▰▱▱▱",
71+
"▰▱▱▱▱",
72+
"▰▱▱▱▱",
73+
"▰▱▱▱▱",
74+
"▰▰▱▱▱",
75+
"▰▰▱▱▱",
76+
"▱▰▱▱▱",
77+
])
78+
79+
export const clock = ascii(hz, [
80+
"🕐",
81+
"🕑",
82+
"🕒",
83+
"🕓",
84+
"🕔",
85+
"🕕",
86+
"🕖",
87+
"🕗",
88+
"🕘",
89+
"🕙",
90+
"🕚",
91+
"🕛",
92+
])
93+
94+
export const fistbump = ascii(hz, [
95+
"🤜 🤛",
96+
"🤜 🤛",
97+
"🤜 🤛",
98+
" 🤜 🤛 ",
99+
" 🤜🤛 ",
100+
" 🤜🤛 ",
101+
" 🤜💥🤛 ",
102+
"🤜 💥 🤛",
103+
"🤜 ✨ 🤛",
104+
"🤜 ✨ 🤛",
105+
])
106+
107+
export const pie = ascii(hz, [
108+
"◷",
109+
"◶",
110+
"◵",
111+
"◴",
112+
])
113+
114+
export const cylon = ascii(hz, [
115+
"=----",
116+
"-=---",
117+
"--=--",
118+
"---=-",
119+
"----=",
120+
"----=",
121+
"---=-",
122+
"--=--",
123+
"-=---",
124+
"=----",
125+
])
126+
127+
export const slider = ascii(hz, [
128+
"o----",
129+
"-o---",
130+
"--o--",
131+
"---o-",
132+
"----o",
133+
"----o",
134+
"---o-",
135+
"--o--",
136+
"-o---",
137+
"o----",
138+
])
139+
140+
export const scrubber = ascii(hz, [
141+
":....",
142+
":....",
143+
"::...",
144+
".::..",
145+
"..::.",
146+
"...::",
147+
"....:",
148+
"....:",
149+
"...::",
150+
"..::.",
151+
".::..",
152+
"::...",
153+
])
154+
155+
export const pulse = ascii(hz, [
156+
".....",
157+
".....",
158+
"..:..",
159+
".:::.",
160+
".:::.",
161+
":::::",
162+
":::::",
163+
".:::.",
164+
".:::.",
165+
"..:..",
166+
])
167+
168+
export const binary = ascii(hz, [
169+
"11111",
170+
"01111",
171+
"10111",
172+
"11011",
173+
"11101",
174+
"11110",
175+
"11111",
176+
"11110",
177+
"11101",
178+
"11011",
179+
"10111",
180+
"01111",
181+
])
182+

s/features/loady/parts/ascii-anim.ts renamed to s/features/op/loader/parts/ascii-anim.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,31 @@
22
import {css} from "lit"
33
import {nap, repeat} from "@e280/stz"
44

5-
import {view} from "../../views/view.js"
6-
import {cssReset} from "../../views/css-reset.js"
5+
import {view} from "../../../views/view.js"
6+
import {cssReset} from "../../../views/css-reset.js"
77

88
const style = css`
99
:host {
1010
font-family: monospace;
11+
white-space: pre;
1112
}
1213
`
1314

14-
export const AsciiAnim = view(use => (hz: number, anim: string[]) => {
15+
export const AsciiAnim = view(use => ({hz, frames}: {
16+
hz: number,
17+
frames: string[],
18+
}) => {
19+
1520
use.name("loading")
1621
use.styles(cssReset, style)
1722
const frame = use.signal(0)
1823

1924
use.mount(() => repeat(async() => {
2025
await nap(1000 / hz)
2126
const next = frame() + 1
22-
frame(next >= anim.length ? 0 : next)
27+
frame(next >= frames.length ? 0 : next)
2328
}))
2429

25-
return anim.at(frame())
30+
return frames.at(frame())
2631
})
2732

s/features/loady/parts/error-display.ts renamed to s/features/op/loader/parts/error-display.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
import {css, html} from "lit"
3-
import {view} from "../../views/view.js"
4-
import {cssReset} from "../../views/css-reset.js"
3+
import {view} from "../../../views/view.js"
4+
import {cssReset} from "../../../views/css-reset.js"
55

66
const style = css`
77
:host {
@@ -11,7 +11,7 @@ const style = css`
1111
`
1212

1313
export const ErrorDisplay = view(use => (error: any) => {
14-
use.name("loading")
14+
use.name("error")
1515
use.styles(cssReset, style)
1616

1717
if (typeof error === "string")

‎s/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ export * from "./features/dom/dollar.js"
44
export * from "./features/dom/register.js"
55
export * from "./features/dom/types.js"
66

7-
export * from "./features/loady/ascii-loader.js"
8-
export * from "./features/loady/parts/error-display.js"
7+
export * from "./features/op/loader/make-loader.js"
8+
export * from "./features/op/loader/parts/error-display.js"
99

1010
export * from "./features/op/op.js"
1111
export * from "./features/op/pod.js"

0 commit comments

Comments
 (0)