@e280/sly 0.0.0-3 → 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/types.ts

@@ -4,11 +4,18 @@ import {CSSResultGroup, TemplateResult} from "lit"
 
 import {Use} from "./use.js"
 
-export type Content = TemplateResult | DirectiveResult | HTMLElement | string | null | undefined | void
+export type Content = TemplateResult | DirectiveResult | HTMLElement | string | null | undefined | void | Content[]
 export type AttrValue = string | boolean | number | undefined | null | void
 
 export type ViewFn<Props extends any[]> = (use: Use) => (...props: Props) => Content
-export type View<Props extends any[]> = (...props: Props) => DirectiveResult<any>
+export type BasicView<Props extends any[]> = (...props: Props) => DirectiveResult<any>
+export type View<Props extends any[]> = BasicView<Props> & {
+	props: View<Props>
+	with: (w: Partial<ViewWith>) => View<Props>
+	children: (...children: Content[]) => View<Props>
+	attrs: (attrs: Record<string, AttrValue>) => View<Props>
+	attr: (name: string, value: AttrValue) => View<Props>
+}
 
 export type ViewSettings = ShadowRootInit & {
 	tag?: string

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,29 +48,39 @@ export class Use {
 		return this.#rendered.promise
 	}
 
-	once<V>(fn: () => V) {
-		return this.#values.guarantee(this.#position++, fn) as V
+	name(name: string) {
+		this.once(() => this.element.setAttribute("view", name))
 	}
 
 	styles(...styles: CSSResultGroup[]) {
 		this.once(() => applyStyles(this.shadow, styles))
 	}
 
-	name(name: string) {
-		this.once(() => this.element.setAttribute("view", name))
+	once<V>(fn: () => V) {
+		return this.#values.guarantee(this.#position++, fn) as V
 	}
 
-	signal<V>(value: V) {
-		return this.once(() => signal<V>(value))
+	mount(fn: () => () => void) {
+		return this.once(() => this.#mounts.mount(fn))
 	}
 
-	mount(mount: () => () => void) {
-		return this.once(() => this.#mounts.mount(mount))
+	life<V>(fn: () => [result: V, dispose: () => void]) {
+		let r: V | undefined
+		this.mount(() => {
+			const [result, dispose] = fn()
+			r = result
+			return dispose
+		})
+		return r as V
 	}
 
 	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) {
+		return this.once(() => signal<V>(value))
 	}
 }
 

package/s/features/views/view.ts

@@ -9,7 +9,7 @@ import {register} from "../dom/register.js"
 import {applyAttrs} from "./utils/apply-attrs.js"
 import {applyStyles} from "./utils/apply-styles.js"
 import {Use, _wrap, _disconnect, _reconnect} from "./use.js"
-import {AttrValue, Content, ViewFn, ViewSettings, ViewWith} from "./types.js"
+import {AttrValue, Content, View, ViewFn, ViewSettings, ViewWith} from "./types.js"
 
 export const view = setupView({mode: "open"})
 export class SlyView extends HTMLElement {}
@@ -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
 			}
 
@@ -71,12 +78,12 @@ function setupView(settings: ViewSettings) {
 			}
 		}
 
-		function setupDirective(w: ViewWith) {
+		function setupDirective(w: ViewWith): View<Props> {
 			const r = directive(ViewDirective)
 			const rend = (...props: Props): DirectiveResult<any> => r(w, props)
 			rend.props = rend
 			rend.with = (w2: Partial<ViewWith>) => setupDirective({...w, ...w2})
-			rend.children = (children: Content) => setupDirective({...w, children})
+			rend.children = (...children: Content[]) => setupDirective({...w, children})
 			rend.attrs = (attrs: Record<string, AttrValue>) => setupDirective({...w, attrs})
 			rend.attr = (name: string, value: AttrValue) => setupDirective({
 				...w,

package/s/index.html.ts

@@ -2,7 +2,7 @@
 import {ssg, html} from "@e280/scute"
 
 const title = "sly"
-const description = "shadow views lit framework"
+const description = "mischievous shadow views"
 const domain = "sly.e280.org"
 const favicon = "/assets/favicon.png"
 
@@ -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"