@e280/sly 0.0.0-4 → 0.0.0-5

package/s/features/op/loaders/parts/anims.ts

@@ -0,0 +1,277 @@
+
+import {makeAsciiAnim} from "./ascii-anim.js"
+import {Content} from "../../../views/types.js"
+
+const hz = 20
+
+export const spinner = makeAsciiAnim(hz, [
+	"|",
+	"/",
+	"-",
+	"\\",
+])
+
+export const braille = makeAsciiAnim(hz, [
+	"⠈",
+	"⠐",
+	"⠠",
+	"⢀",
+	"⡀",
+	"⠄",
+	"⠂",
+	"⠁",
+])
+
+export const arrow = makeAsciiAnim(hz, [
+	"←",
+	"↖",
+	"↑",
+	"↗",
+	"→",
+	"↘",
+	"↓",
+	"↙",
+])
+
+export const arrow2 = makeAsciiAnim(hz, [
+	"⬆️",
+	"↗️",
+	"➡️",
+	"↘️",
+	"⬇️",
+	"↙️",
+	"⬅️",
+	"↖️",
+])
+
+export const bar = makeAsciiAnim(hz, [
+	"▰▱▱▱▱",
+	"▰▱▱▱▱",
+	"▱▰▱▱▱",
+	"▱▱▰▱▱",
+	"▱▱▱▰▱",
+	"▱▱▱▱▰",
+	"▱▱▱▱▰",
+	"▱▱▱▰▱",
+	"▱▱▰▱▱",
+	"▱▰▱▱▱",
+])
+
+export const bar2 = makeAsciiAnim(hz, [
+	"▱▱▰▱▱",
+	"▱▱▱▰▱",
+	"▱▱▱▰▰",
+	"▱▱▱▰▰",
+	"▱▱▱▱▰",
+	"▱▱▱▱▰",
+	"▱▱▱▱▰",
+	"▱▱▱▰▰",
+	"▱▱▱▰▰",
+	"▱▱▱▰▱",
+	"▱▱▰▱▱",
+	"▱▰▱▱▱",
+	"▰▰▱▱▱",
+	"▰▰▱▱▱",
+	"▰▱▱▱▱",
+	"▰▱▱▱▱",
+	"▰▱▱▱▱",
+	"▰▰▱▱▱",
+	"▰▰▱▱▱",
+	"▱▰▱▱▱",
+])
+
+export const bar3 = makeAsciiAnim(hz, [
+	"▰▱▱▱▱",
+	"▰▱▱▱▱",
+	"▰▰▱▱▱",
+	"▰▰▰▱▱",
+	"▱▰▰▰▱",
+	"▱▱▰▰▰",
+	"▱▱▱▰▰",
+	"▱▱▱▱▰",
+	"▱▱▱▱▰",
+	"▱▱▱▰▰",
+	"▱▱▰▰▰",
+	"▱▰▰▰▱",
+	"▰▰▰▱▱",
+	"▰▰▱▱▱",
+])
+
+export const bar4 = makeAsciiAnim(hz, [
+	"▱▱▱▱▱",
+	"▰▱▱▱▱",
+	"▰▰▱▱▱",
+	"▰▰▰▱▱",
+	"▰▰▰▰▱",
+	"▰▰▰▰▰",
+	"▰▰▰▰▰",
+	"▱▰▰▰▰",
+	"▱▱▰▰▰",
+	"▱▱▱▰▰",
+	"▱▱▱▱▰",
+])
+
+export const pie = makeAsciiAnim(hz, [
+	"◷",
+	"◶",
+	"◵",
+	"◴",
+])
+
+export const cylon = makeAsciiAnim(hz, [
+	"=----",
+	"-=---",
+	"--=--",
+	"---=-",
+	"----=",
+	"----=",
+	"---=-",
+	"--=--",
+	"-=---",
+	"=----",
+])
+
+export const slider = makeAsciiAnim(hz, [
+	"o----",
+	"-o---",
+	"--o--",
+	"---o-",
+	"----o",
+	"----o",
+	"---o-",
+	"--o--",
+	"-o---",
+	"o----",
+])
+
+export const scrubber = makeAsciiAnim(hz, [
+	":....",
+	":....",
+	"::...",
+	".::..",
+	"..::.",
+	"...::",
+	"....:",
+	"....:",
+	"...::",
+	"..::.",
+	".::..",
+	"::...",
+])
+
+export const pulse = makeAsciiAnim(hz, [
+	".....",
+	".....",
+	"..:..",
+	".:::.",
+	".:::.",
+	":::::",
+	":::::",
+	"::.::",
+	":...:",
+])
+
+export const bin = makeAsciiAnim(hz, [
+	"000",
+	"100",
+	"110",
+	"111",
+	"011",
+	"001",
+])
+
+export const binary = makeAsciiAnim(hz, [
+	"11111",
+	"01111",
+	"00111",
+	"10011",
+	"11001",
+	"01100",
+	"00110",
+	"10011",
+	"11001",
+	"11100",
+	"11110",
+])
+
+export const binary2 = makeAsciiAnim(hz, [
+	"11111",
+	"01111",
+	"10111",
+	"11011",
+	"11101",
+	"11110",
+	"11111",
+	"11110",
+	"11101",
+	"11011",
+	"10111",
+	"01111",
+])
+
+export const clock = makeAsciiAnim(hz, [
+	"🕐",
+	"🕑",
+	"🕒",
+	"🕓",
+	"🕔",
+	"🕕",
+	"🕖",
+	"🕗",
+	"🕘",
+	"🕙",
+	"🕚",
+	"🕛",
+])
+
+export const fistbump = makeAsciiAnim(hz, [
+	"🤜    🤛",
+	"🤜    🤛",
+	"🤜    🤛",
+	" 🤜  🤛 ",
+	"  🤜🤛  ",
+	"  🤜🤛  ",
+	" 🤜💥🤛 ",
+	"🤜 💥 🤛",
+	"🤜 ✨ 🤛",
+	"🤜 ✨ 🤛",
+])
+
+export const earth = makeAsciiAnim(4, [
+	"🌎",
+	"🌏",
+	"🌍",
+])
+
+export const lock = makeAsciiAnim(4, [
+	"🔓",
+	"🔒",
+])
+
+export const bright = makeAsciiAnim(4, [
+	"🔅",
+	"🔆",
+])
+
+export const speaker = makeAsciiAnim(4, [
+	"🔈",
+	"🔈",
+	"🔉",
+	"🔊",
+	"🔊",
+	"🔉",
+])
+
+export const moon = makeAsciiAnim(10, [
+	"🌑",
+	"🌑",
+	"🌑",
+	"🌘",
+	"🌗",
+	"🌖",
+	"🌕",
+	"🌔",
+	"🌓",
+	"🌒",
+])
+

package/s/features/op/loaders/parts/ascii-anim.ts

@@ -0,0 +1,38 @@
+
+import {css} from "lit"
+import {nap, repeat} from "@e280/stz"
+
+import {view} from "../../../views/view.js"
+import {Content} from "../../../views/types.js"
+import {cssReset} from "../../../views/css-reset.js"
+
+export function makeAsciiAnim(hz: number, frames: string[]): () => Content {
+	return () => AsciiAnim({hz, frames})
+}
+
+export const AsciiAnim = view(use => ({hz, frames}: {
+		hz: number,
+		frames: string[],
+	}) => {
+
+	use.name("loading")
+	use.styles(cssReset, style)
+	const frame = use.signal(0)
+
+	use.mount(() => repeat(async() => {
+		await nap(1000 / hz)
+		const next = frame() + 1
+		frame(next >= frames.length ? 0 : next)
+	}))
+
+	return frames.at(frame())
+})
+
+const style = css`
+:host {
+	font-family: monospace;
+	white-space: pre;
+	user-select: none;
+}
+`
+

package/s/features/{loady → op/loaders}/parts/error-display.ts

@@ -1,17 +1,10 @@
 
 import {css, html} from "lit"
-import {view} from "../../views/view.js"
-import {cssReset} from "../../views/css-reset.js"
-
-const style = css`
-:host {
-	font-family: monospace;
-	color: red;
-}
-`
+import {view} from "../../../views/view.js"
+import {cssReset} from "../../../views/css-reset.js"
 
 export const ErrorDisplay = view(use => (error: any) => {
-	use.name("loading")
+	use.name("error")
 	use.styles(cssReset, style)
 
 	if (typeof error === "string")
@@ -24,3 +17,10 @@ export const ErrorDisplay = view(use => (error: any) => {
 		return `error`
 })
 
+const style = css`
+:host {
+	font-family: monospace;
+	color: red;
+}
+`
+

package/s/features/op/op.ts

@@ -1,26 +1,14 @@
 
 import {pub} from "@e280/stz"
-import {signal} from "@e280/strata/signals"
+import {Signal, signal} from "@e280/strata/signals"
 
-import {pod} from "./pod.js"
+import {podium} from "./podium.js"
 import {Pod, PodSelect} from "./types.js"
 
 export class Op<V> {
-	static loading() {
-		return new this()
-	}
-
-	static ready<V>(value: V) {
-		const op = new this<V>()
-		op.signal(["ready", value])
-		return op
-	}
-
-	static error(error: any) {
-		const op = new this()
-		op.signal(["error", error])
-		return op
-	}
+	static loading<V>() { return new this<V>() }
+	static ready<V>(value: V) { return new this<V>(["ready", value]) }
+	static error<V>(error: any) { return new this<V>(["error", error]) }
 
 	static promise<V>(promise: Promise<V>) {
 		const op = new this<V>()
@@ -32,10 +20,20 @@ export class Op<V> {
 		return this.promise(fn())
 	}
 
-	readonly signal = signal<Pod<V>>(["loading"])
+	static all<V>(...ops: Op<V>[]) {
+		const pods = ops.map(op => op.pod)
+		const pod = podium.all(...pods)
+		return new this(pod)
+	}
+
+	readonly signal: Signal<Pod<V>>
 	#resolve = pub<[V]>()
 	#reject = pub<[any]>()
 
+	constructor(pod: Pod<V> = ["loading"]) {
+		this.signal = signal<Pod<V>>(pod)
+	}
+
 	get wait() {
 		return new Promise((resolve, reject) => {
 			this.#resolve.next().then(resolve)
@@ -77,12 +75,32 @@ export class Op<V> {
 		return this.signal()
 	}
 
+	set pod(p: Pod<V>) {
+		this.signal(p)
+	}
+
 	get status() {
 		return this.signal()[0]
 	}
 
 	get value() {
-		return pod.value(this.signal())
+		return podium.value(this.signal())
+	}
+
+	get error() {
+		return podium.error(this.signal())
+	}
+
+	get isLoading() {
+		return this.status === "loading"
+	}
+
+	get isReady() {
+		return this.status === "ready"
+	}
+
+	get isError() {
+		return this.status === "error"
 	}
 
 	require() {
@@ -92,7 +110,11 @@ export class Op<V> {
 	}
 
 	select<R>(select: PodSelect<V, R>) {
-		return pod.select(this.signal(), select)
+		return podium.select(this.signal(), select)
+	}
+
+	morph<V2>(fn: (value: V) => V2) {
+		return new Op(podium.morph(this.pod, fn))
 	}
 }
 

package/s/features/op/podium.ts

@@ -0,0 +1,67 @@
+
+import {Pod, PodSelect} from "./types.js"
+
+export const podium = {
+	status: (p: Pod<any>) => p[0],
+
+	value: <V>(p: Pod<V>) => {
+		return p[0] === "ready"
+			? p[1]
+			: undefined
+	},
+
+	error: <V>(p: Pod<V>) => {
+		return p[0] === "error"
+			? p[1]
+			: undefined
+	},
+
+	select: <V, R>(p: Pod<V>, select: PodSelect<V, R>) => {
+		switch (p[0]) {
+			case "loading": return select.loading()
+			case "error": return select.error(p[1])
+			case "ready": return select.ready(p[1])
+			default: throw new Error("unknown op status")
+		}
+	},
+
+	morph: <A, B>(p: Pod<A>, fn: (a: A) => B): Pod<B> => {
+		return podium.select<A, Pod<B>>(p, {
+			loading: () => ["loading"],
+			error: error => ["error", error],
+			ready: a => ["ready", fn(a)],
+		})
+	},
+
+	all: <V>(...ps: Pod<V>[]): Pod<V[]> => {
+		const values: V[] = []
+		const errors: any[] = []
+		let loading = 0
+
+		for (const p of ps) {
+			switch (p[0]) {
+				case "loading":
+					loading++
+					break
+
+				case "ready":
+					values.push(p[1])
+					break
+
+				case "error":
+					errors.push(p[1])
+					break
+			}
+		}
+
+		if (errors.length > 0)
+			return ["error", errors]
+
+		else if (loading === 0)
+			return ["ready", values]
+
+		else
+			return ["loading"]
+	}
+}
+

package/s/features/views/use.ts

@@ -37,6 +37,7 @@ export class Use {
 	constructor(
 		public element: HTMLElement,
 		public shadow: ShadowRoot,
+		public render: () => void,
 	) {}
 
 	get renderCount() {
@@ -47,14 +48,14 @@ export class Use {
 		return this.#rendered.promise
 	}
 
-	styles(...styles: CSSResultGroup[]) {
-		this.once(() => applyStyles(this.shadow, styles))
-	}
-
 	name(name: string) {
 		this.once(() => this.element.setAttribute("view", name))
 	}
 
+	styles(...styles: CSSResultGroup[]) {
+		this.once(() => applyStyles(this.shadow, styles))
+	}
+
 	once<V>(fn: () => V) {
 		return this.#values.guarantee(this.#position++, fn) as V
 	}
@@ -74,8 +75,8 @@ export class Use {
 	}
 
 	op = {
-		promise: <V>(p: Promise<V>) => this.once(() => Op.promise(p)),
 		fn: <V>(f: () => Promise<V>) => this.once(() => Op.fn(f)),
+		promise: <V>(p: Promise<V>) => this.once(() => Op.promise(p)),
 	}
 
 	signal<V>(value: V) {

package/s/features/views/view.ts

@@ -20,7 +20,7 @@ function setupView(settings: ViewSettings) {
 		class ViewDirective extends AsyncDirective {
 			#element = document.createElement(settings.tag ?? "sly-view")
 			#shadow = this.#element.attachShadow(settings)
-			#use = new Use(this.#element, this.#shadow)
+			#use = new Use(this.#element, this.#shadow, () => this.#render())
 			#fn = (() => {
 				const fn2 = fn(this.#use)
 				this.#element.setAttribute("view", settings.name ?? "")
@@ -29,9 +29,13 @@ function setupView(settings: ViewSettings) {
 			})()
 
 			#tracking = new MapG<any, () => void>
+			#params!: {with: ViewWith, props: Props}
 
-			#render = debounce(0, (w: ViewWith, props: Props) => {
+			#render() {
+				if (!this.#params) return
 				if (!this.isConnected) return
+				const {with: w, props} = this.#params
+
 				this.#use[_wrap](() => {
 					// apply html attributes
 					applyAttrs(this.#element, w.attrs)
@@ -46,16 +50,19 @@ function setupView(settings: ViewSettings) {
 					for (const item of seen)
 						this.#tracking.guarantee(
 							item,
-							() => tracker.changed(item, async() => this.#render(w, props)),
+							() => tracker.changed(item, async() => this.#renderDebounced()),
 						)
 
 					// inject content into light dom
 					render(w.children, this.#element)
 				})
-			})
+			}
+
+			#renderDebounced = debounce(0, () => this.#render())
 
 			render(w: ViewWith, props: Props) {
-				this.#render(w, props)
+				this.#params = {with: w, props}
+				this.#render()
 				return this.#element
 			}
 

package/s/index.html.ts

@@ -26,10 +26,10 @@ export default ssg.page(import.meta.url, async orb => ({
 
 	body: html`
 		<img class=icon alt="" src="/assets/favicon.png"/>
-		<h1>sly</h1>
+		<h1>sly testing page</h1>
+		<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
 		<p class=lil>v${orb.packageVersion()}</p>
 		<div class=demo></div>
-		<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
 	`,
 }))
 

package/s/index.ts

@@ -4,11 +4,12 @@ export * from "./features/dom/dollar.js"
 export * from "./features/dom/register.js"
 export * from "./features/dom/types.js"
 
-export * from "./features/loady/ascii-loader.js"
-export * from "./features/loady/parts/error-display.js"
+export * from "./features/op/loaders/make-loader.js"
+export * from "./features/op/loaders/parts/ascii-anim.js"
+export * from "./features/op/loaders/parts/error-display.js"
 
 export * from "./features/op/op.js"
-export * from "./features/op/pod.js"
+export * from "./features/op/podium.js"
 export * from "./features/op/types.js"
 
 export * from "./features/views/css-reset.js"

package/x/demo/demo.bundle.js

@@ -1,39 +1,5 @@
-import { nap, repeat } from "@e280/stz";
-import { css, html, render } from "lit";
+import { DemoView } from "./views/demo.js";
 import { $ } from "../features/dom/dollar.js";
-import { view } from "../features/views/view.js";
-import { cssReset } from "../features/views/css-reset.js";
-import { loady } from "../features/loady/ascii-loader.js";
+$.render($(".demo"), DemoView());
 console.log("🦝 sly");
-const styles = css `
-:host {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	text-align: center;
-}
-`;
-const MyView = view(use => (greeting) => {
-    use.name("my-view");
-    use.styles(cssReset, styles);
-    const count = use.signal(0);
-    use.mount(() => repeat(async () => {
-        await nap(1000);
-        count.value++;
-    }));
-    use.once(() => use.rendered.then(() => {
-        console.log("slot", $("slot", use.shadow));
-    }));
-    const op = use.op.fn(async () => {
-        await nap(5000);
-    });
-    return html `
-		<p>${greeting} <slot></slot> ${count()}</p>
-		<p>${loady.dots(op, () => "op loaded")}</p>
-	`;
-});
-render(MyView
-    .attr("class", "incredi")
-    .children("world")
-    .props("hello"), $(".demo"));
 //# sourceMappingURL=demo.bundle.js.map

package/x/demo/demo.bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,MAAM,EAAC,MAAM,WAAW,CAAA;AACrC,OAAO,EAAC,GAAG,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,KAAK,CAAA;AAErC,OAAO,EAAC,CAAC,EAAC,MAAM,2BAA2B,CAAA;AAC3C,OAAO,EAAC,IAAI,EAAC,MAAM,2BAA2B,CAAA;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,gCAAgC,CAAA;AACvD,OAAO,EAAC,KAAK,EAAC,MAAM,mCAAmC,CAAA;AAEvD,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;AAErB,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;CAOjB,CAAA;AAED,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,QAAgB,EAAE,EAAE;IAC/C,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACnB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC5B,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAE3B,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,IAAG,EAAE;QAChC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAA;QACf,KAAK,CAAC,KAAK,EAAE,CAAA;IACd,CAAC,CAAC,CAAC,CAAA;IAEH,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE;QACrC,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;IAC3C,CAAC,CAAC,CAAC,CAAA;IAEH,MAAM,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,IAAG,EAAE;QAC9B,MAAM,GAAG,CAAC,IAAI,CAAC,CAAA;IAChB,CAAC,CAAC,CAAA;IAEF,OAAO,IAAI,CAAA;OACL,QAAQ,kBAAkB,KAAK,EAAE;OACjC,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC;EACtC,CAAA;AACF,CAAC,CAAC,CAAA;AAEF,MAAM,CACL,MAAM;KACJ,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC;KACxB,QAAQ,CAAC,OAAO,CAAC;KACjB,KAAK,CAAC,OAAO,CAAC,EAChB,CAAC,CAAC,OAAO,CAAC,CACV,CAAA"}
+{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAC,CAAC,EAAC,MAAM,2BAA2B,CAAA;AAE3C,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAA;AAEhC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}