@e280/sly 0.2.0-9 → 0.2.0

package/s/dom/attrs/parts/attr-spec.ts

@@ -1,6 +1,6 @@
 
+import {attrGet, attrSet} from "./attr-fns.js"
 import {AttrSpec, AttrTypes} from "../../types.js"
-import {attrFns} from "./attr-fns.js"
 
 /** specify available html attributes and their types and create a proxy accessor */
 export const attrSpec = <A extends AttrSpec>(
@@ -10,18 +10,18 @@ export const attrSpec = <A extends AttrSpec>(
 
 	get: (_target, key: string) => {
 		switch (spec[key]) {
-			case String: return attrFns.get.string(e, key)
-			case Number: return attrFns.get.number(e, key)
-			case Boolean: return attrFns.get.boolean(e, key)
+			case String: return attrGet.string(e, key)
+			case Number: return attrGet.number(e, key)
+			case Boolean: return attrGet.boolean(e, key)
 			default: throw new Error(`invalid attribute type for "${key}"`)
 		}
 	},
 
 	set: (_target, key: string, value: any) => {
 		switch (spec[key]) {
-			case String: return attrFns.set.string(e, key, value)
-			case Number: return attrFns.set.number(e, key, value)
-			case Boolean: return attrFns.set.boolean(e, key, value)
+			case String: return attrSet.string(e, key, value)
+			case Number: return attrSet.number(e, key, value)
+			case Boolean: return attrSet.boolean(e, key, value)
 			default: throw new Error(`invalid attribute type for "${key}"`)
 		}
 	},

package/s/dom/dom.ts

@@ -1,70 +1,32 @@
 
 import {render} from "lit"
-import {AttrSpec} from "./types.js"
+import {el} from "./parts/el.js"
+import {mk} from "./parts/mk.js"
+import {eve} from "./parts/eve.js"
 import {attrs} from "./attrs/attrs.js"
-import {Content} from "../views/types.js"
+import {elmer} from "./parts/elmer.js"
+import {Content} from "../view/types.js"
+import {Dom} from "./parts/dom-scope.js"
 import {register} from "./parts/register.js"
+import {Queryable, Renderable} from "./types.js"
+import {queryAll, queryMaybe, queryRequire} from "./parts/queries.js"
 
-export type Renderable = HTMLElement | ShadowRoot | DocumentFragment
-export type Queryable = HTMLElement | ShadowRoot | Element | Document | DocumentFragment
-
-function require<E extends Element>(
-		container: Queryable,
-		selector: string,
-	) {
-	const e = container.querySelector<E>(selector)
-	if (!e) throw new Error(`element not found (${selector})`)
-	return e
-}
-
-export class Dom<C extends Queryable> {
-	constructor(public element: C) {}
-
-	in<E extends HTMLElement>(selectorOrElement: string | E) {
-		return new Dom<E>(
-			(typeof selectorOrElement === "string")
-				? require(this.element, selectorOrElement) as E
-				: selectorOrElement
-		)
-	}
-
-	require<E extends Element = HTMLElement>(selector: string) {
-		const e = this.element.querySelector<E>(selector)
-		if (!e) throw new Error(`element not found (${selector})`)
-		return e
-	}
-
-	maybe<E extends Element = HTMLElement>(selector: string) {
-		return this.element.querySelector<E>(selector)
-	}
-
-	all<E extends Element = HTMLElement>(selector: string) {
-		return Array.from(this.element.querySelectorAll<E>(selector))
-	}
-
-	render(...content: Content[]) {
-		return render(content, this.element as Renderable)
-	}
-
-	attrs() {
-		return attrs(this.element as HTMLElement)
-	}
+export function dom<E extends Element>(selector: string, container: Queryable = document): E {
+	return queryRequire<E>(selector, container)
 }
 
-export function dom<E extends Queryable>(selector: string): E
-export function dom<E extends Queryable>(element: E): Dom<E>
-export function dom<E extends Queryable>(selectorOrElement: string | E): E | Dom<E> {
-	return (typeof selectorOrElement === "string")
-		? require(document, selectorOrElement) as E
-		: new Dom(selectorOrElement)
+dom.in = <E extends HTMLElement>(selectorOrElement: string | E, container: Queryable = document) => {
+	return new Dom(container).in(selectorOrElement)
 }
 
-const doc = new Dom(document)
-dom.in = doc.in.bind(doc)
-dom.require = doc.require.bind(doc)
-dom.maybe = doc.maybe.bind(doc)
-dom.all = doc.all.bind(doc)
+dom.require = queryRequire
+dom.maybe = queryMaybe
+dom.all = queryAll
 
+dom.el = el
+dom.elmer = elmer
+dom.mk = mk
+dom.events = eve
 dom.attrs = attrs
 dom.register = register
 dom.render = (container: Renderable, ...content: Content[]) => {

package/s/dom/index.ts

@@ -0,0 +1,4 @@
+
+export * from "./types.js"
+export * from "./dom.js"
+

package/s/dom/parts/dom-scope.ts

@@ -0,0 +1,46 @@
+
+import {render} from "lit"
+import {eve, EveSpec} from "./eve.js"
+import {attrs} from "../attrs/attrs.js"
+import {Content} from "../../view/types.js"
+import {Attrs, Queryable, Renderable} from "../types.js"
+import {queryAll, queryMaybe, queryRequire} from "./queries.js"
+
+export class Dom<C extends Queryable> {
+	#attrs?: Attrs
+
+	constructor(public element: C) {}
+
+	in<E extends HTMLElement>(selectorOrElement: string | E) {
+		return new Dom<E>(
+			(typeof selectorOrElement === "string")
+				? queryRequire(selectorOrElement, this.element) as E
+				: selectorOrElement
+		)
+	}
+
+	require<E extends Element = HTMLElement>(selector: string) {
+		return queryRequire<E>(selector, this.element)
+	}
+
+	maybe<E extends Element = HTMLElement>(selector: string) {
+		return queryMaybe<E>(selector, this.element)
+	}
+
+	all<E extends Element = HTMLElement>(selector: string) {
+		return queryAll<E>(selector, this.element)
+	}
+
+	render(...content: Content[]) {
+		return render(content, this.element as Renderable)
+	}
+
+	get attrs(): Attrs {
+		return this.#attrs ??= attrs(this.element as HTMLElement)
+	}
+
+	events(spec: EveSpec) {
+		return eve(this.element, spec)
+	}
+}
+

package/s/dom/parts/el.ts

@@ -0,0 +1,14 @@
+
+import {AttrValue} from "../types.js"
+import {attrSet} from "../attrs/parts/attr-fns.js"
+
+export function el<E extends HTMLElement>(
+		tagName: string,
+		attrs: Record<string, AttrValue> = {},
+	) {
+
+	const element = document.createElement(tagName) as E
+	attrSet.record(element, attrs)
+	return element
+}
+

package/s/dom/parts/elmer.ts

@@ -0,0 +1,38 @@
+
+import {AttrValue} from "../types.js"
+import {attrSet} from "../attrs/parts/attr-fns.js"
+
+export function elmer<E extends HTMLElement = HTMLElement>(tagName: string) {
+	return new Elmer<E>(tagName)
+}
+
+export class Elmer<E extends HTMLElement = HTMLElement> {
+	#attrs = new Map<string, AttrValue>()
+	#children: (Node | string)[] = []
+
+	constructor(public tagName: string) {}
+
+	attr(key: string, value: AttrValue = true) {
+		this.#attrs.set(key, value)
+		return this
+	}
+
+	attrs(record: Record<string, AttrValue>) {
+		for (const [key, value] of Object.entries(record))
+			this.attr(key, value)
+		return this
+	}
+
+	children(...elements: (Node | string)[]) {
+		this.#children.push(...elements)
+		return this
+	}
+
+	done() {
+		const element = document.createElement(this.tagName)
+		attrSet.entries(element, this.#attrs)
+		element.append(...this.#children)
+		return element as E
+	}
+}
+

package/s/dom/parts/eve.ts

@@ -0,0 +1,24 @@
+
+export type EveFn = (event: any) => void
+export type EveConfig = [options: AddEventListenerOptions, fn: EveFn]
+export type EveHandler = EveFn | EveConfig
+export type EveSpec = {[eventName: string]: EveHandler}
+
+export function eve(target: EventTarget, events: EveSpec) {
+	let detachers: (() => void)[] = []
+
+	for (const [eventName, handler] of Object.entries(events)) {
+		if (typeof handler === "function") {
+			target.addEventListener(eventName, handler)
+			detachers.push(() => target.removeEventListener(eventName, handler))
+		}
+		else {
+			const [options, fn] = handler
+			target.addEventListener(eventName, fn, options)
+			detachers.push(() => target.removeEventListener(eventName, fn))
+		}
+	}
+
+	return () => detachers.forEach(d => d())
+}
+

package/s/dom/parts/mk.ts

@@ -0,0 +1,9 @@
+
+import {render, TemplateResult} from "lit"
+
+export function mk<E extends Element = HTMLElement>(template: TemplateResult) {
+	const fragment = document.createDocumentFragment()
+	render(template, fragment)
+	return fragment.firstElementChild as E
+}
+

package/s/dom/parts/queries.ts

@@ -0,0 +1,26 @@
+
+import {Queryable} from "../types.js"
+
+export function queryRequire<E extends Element>(
+		selector: string,
+		container: Queryable = document,
+	) {
+	const e = container.querySelector<E>(selector)
+	if (!e) throw new Error(`element not found (${selector})`)
+	return e
+}
+
+export function queryMaybe<E extends Element>(
+		selector: string,
+		container: Queryable = document,
+	) {
+	return container.querySelector<E>(selector)
+}
+
+export function queryAll<E extends Element>(
+		selector: string,
+		container: Queryable = document,
+	) {
+	return Array.from(container.querySelectorAll<E>(selector))
+}
+

package/s/dom/types.ts

@@ -1,8 +1,13 @@
 
 import {attrs} from "./attrs/attrs.js"
 
+export type Renderable = HTMLElement | ShadowRoot | DocumentFragment
+export type Queryable = HTMLElement | ShadowRoot | Element | Document | DocumentFragment
+
 // attrs
 
+export type AttrValue = string | boolean | number | undefined | null | void
+
 export type AttrKind = (
 	| typeof String
 	| typeof Number

package/s/index.html.ts

@@ -29,10 +29,10 @@ export default ssg.page(import.meta.url, async orb => ({
 		<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>
-		<incredi-element></incredi-element>
-		<divine-element></divine-element>
-		<demo-counter initial="-1">component</demo-counter>
-		<div class=demo></div>
+
+		<fastcount-element></fastcount-element>
+		<counter-component start=280 step=2>component</counter-component>
+		<demo-component></demo-component>
 	`,
 }))
 

package/s/index.ts

@@ -1,19 +1,9 @@
 
-export * from "./dom/types.js"
-export * from "./dom/dom.js"
-
-export * from "./ops/loaders/make-loader.js"
-export * from "./ops/loaders/parts/ascii-anim.js"
-export * from "./ops/loaders/parts/error-display.js"
-export * from "./ops/op.js"
-export * from "./ops/podium.js"
-export * from "./ops/types.js"
-
-export * as loot from "./loot/index.js"
-
-export * from "./views/base-element.js"
-export * from "./views/css-reset.js"
-export * from "./views/types.js"
-export * from "./views/use.js"
-export * from "./views/view.js"
+export * from "./base/index.js"
+export * from "./dom/index.js"
+export * from "./loaders/index.js"
+export * from "./loot/index.js"
+export * from "./ops/index.js"
+export * from "./spa/index.js"
+export * from "./view/index.js"
 

package/s/loaders/index.barrel.ts

@@ -0,0 +1,10 @@
+
+export * as anims from "./parts/anims.js"
+export type * from "./parts/anims.js"
+export * from "./parts/ascii-anim.js"
+export * from "./parts/error-display.js"
+export * from "./make.js"
+export * from "./mock.js"
+export * from "./types.js"
+
+

package/s/loaders/index.ts

@@ -0,0 +1,4 @@
+
+export * as loaders from "./index.barrel.js"
+export type * from "./index.barrel.js"
+

package/s/loaders/make.ts

@@ -0,0 +1,14 @@
+
+import {Loader} from "./types.js"
+import {earth} from "./parts/anims.js"
+import type {Content} from "../view/types.js"
+import {ErrorDisplay} from "./parts/error-display.js"
+
+export function make(
+		loading: () => Content = earth,
+		error: (error: any) => Content = (error: any) => ErrorDisplay(error),
+	): Loader {
+
+	return (op, ready) => op.select({loading, ready, error})
+}
+

package/s/loaders/mock.ts

@@ -0,0 +1,11 @@
+
+import {Loader} from "./types.js"
+
+export function mock(): Loader {
+	return (op, ready) => op.select({
+		ready,
+		loading: () => `[loading]`,
+		error: () => `[error]`,
+	})
+}
+

package/s/{ops/loaders → loaders}/parts/anims.ts

@@ -1,6 +1,6 @@
 
 import {makeAsciiAnim} from "./ascii-anim.js"
-import {Content} from "../../../views/types.js"
+import type {Content} from "../../view/types.js"
 
 const fast = 20
 const mid = 10

package/s/{ops/loaders → loaders}/parts/ascii-anim.ts

@@ -1,10 +1,10 @@
 
 import {css} from "lit"
-import {nap, repeat} from "@e280/stz"
+import {nap, cycle} from "@e280/stz"
 
-import {view} from "../../../views/view.js"
-import {Content} from "../../../views/types.js"
-import {cssReset} from "../../../views/css-reset.js"
+import {view} from "../../view/view.js"
+import {Content} from "../../view/types.js"
+import {cssReset} from "../../base/css-reset.js"
 
 export function makeAsciiAnim(hz: number, frames: string[]): () => Content {
 	return () => AsciiAnim({hz, frames})
@@ -17,9 +17,10 @@ export const AsciiAnim = view(use => ({hz, frames}: {
 
 	use.name("loading")
 	use.styles(cssReset, style)
+
 	const frame = use.signal(0)
 
-	use.mount(() => repeat(async() => {
+	use.mount(() => cycle(async() => {
 		await nap(1000 / hz)
 		const next = frame.get() + 1
 		frame.set(next >= frames.length ? 0 : next)

package/s/{ops/loaders → loaders}/parts/error-display.ts

@@ -1,7 +1,7 @@
 
 import {css, html} from "lit"
-import {view} from "../../../views/view.js"
-import {cssReset} from "../../../views/css-reset.js"
+import {view} from "../../view/view.js"
+import {cssReset} from "../../base/css-reset.js"
 
 export const ErrorDisplay = view(use => (error: any) => {
 	use.name("error")

package/s/loaders/types.ts

@@ -0,0 +1,6 @@
+
+import type {Op} from "../ops/op.js"
+import type {Content} from "../view/types.js"
+
+export type Loader = <V>(op: Op<V>, ready: (value: V) => Content) => Content
+

package/s/loot/index.barrel.ts

@@ -0,0 +1,5 @@
+
+export * from "./drag-and-drops.js"
+export * from "./drops.js"
+export * from "./helpers.js"
+

package/s/loot/index.ts

@@ -1,5 +1,4 @@
 
-export * from "./drag-and-drops.js"
-export * from "./drops.js"
-export * from "./helpers.js"
+export * as loot from "./index.barrel.js"
+export type * from "./index.barrel.js"
 

package/s/ops/index.ts

@@ -0,0 +1,5 @@
+
+export * from "./op.js"
+export * from "./podium.js"
+export * from "./types.js"
+

package/s/ops/op.ts

@@ -69,6 +69,7 @@ export class Op<V> {
 			return value
 		}
 		catch (error) {
+			console.error(error)
 			if (count === this.#count)
 				await this.setError(error)
 		}

package/s/spa/index.barrel.ts

@@ -0,0 +1,6 @@
+
+export {route} from "./plumbing/braces.js"
+export type {Navigable} from "./plumbing/primitives.js"
+export {RouterOptions, Hasher, Route, Routes, Navigables, Params} from "./plumbing/types.js"
+export {Router} from "./router.js"
+

package/s/spa/index.ts

@@ -0,0 +1,4 @@
+
+export * as spa from "./index.barrel.js"
+export type * from "./index.barrel.js"
+

package/s/spa/plumbing/braces.ts

@@ -0,0 +1,76 @@
+
+import {Hasher, Route} from "./types.js"
+import type {Content} from "../../view/types.js"
+
+type ParamKeys<S extends string> =
+	S extends `${string}{${infer P}}${infer R}` ? (string & P) | ParamKeys<R> : never
+
+type ParamsOf<S extends string> =
+	[ParamKeys<S>] extends [never] ? {} : { [K in ParamKeys<S>]: string }
+
+type ParamsTuple<S extends string> =
+	keyof ParamsOf<S> extends never ? [] : [ParamsOf<S>]
+
+export function hasher<S extends string>(spec: S): Hasher<ParamsTuple<S>> {
+	if (!spec.startsWith("#/"))
+		throw new Error(`hash route spec must start with "#/"`)
+
+	const specparts = spec.split("/")
+	const braceregex = /\{([^\}\/]+)\}/
+
+	function parse(hash: string): ParamsTuple<S> | null {
+		if (!hash.startsWith("#/"))
+			throw new Error(`hash must start with "#/"`)
+
+		const hashparts = hash.split("/")
+		const params: Record<string, string> = {}
+
+		if (hashparts.length !== specparts.length)
+			return null
+
+		for (const [index, specpart] of specparts.entries()) {
+			const hashpart = hashparts.at(index)
+			if (hashpart === undefined) return null
+			const bracematch = specpart.match(braceregex)
+			try {
+				if (bracematch) params[bracematch[1]] = decodeURIComponent(hashpart)
+				else if (hashpart !== specpart) return null
+			}
+			catch {
+				return null
+			}
+		}
+
+		return (Object.keys(params).length === 0)
+			? ([] as ParamsTuple<S>)
+			: ([params as ParamsOf<S>] as ParamsTuple<S>)
+	}
+
+	function make(...[braces]: any[]): string {
+		const get = (param: string) => {
+			const p = param as any
+			if (p in braces) return braces[p]
+			else throw new Error(`missing param "${p}"`)
+		}
+		return specparts.map(specpart => {
+			const bracematch = specpart.match(braceregex)
+			return bracematch
+				? encodeURIComponent(get(bracematch[1]))
+				: specpart
+		}).join("/")
+	}
+
+	return {parse, make}
+}
+
+export function route<S extends string>(
+		spec: S,
+		fn: (...params: ParamsTuple<S>) => Promise<Content>,
+	): Route<ParamsTuple<S>> {
+
+	return {
+		hasher: hasher(spec),
+		fn,
+	}
+}
+

package/s/spa/plumbing/primitives.ts

@@ -0,0 +1,85 @@
+
+import {ev, ob} from "@e280/stz"
+import {Op} from "../../ops/op.js"
+import {ResolvedRoute, Route, Params, Routes} from "./types.js"
+
+export function eraseWindowHash() {
+	const {pathname, search} = window.location
+	history.replaceState(null, "", pathname + search)
+}
+
+export function normalizeHash(hash: string) {
+	const homeEquivalents = [/^$/, /^#$/, /^#\/$/]
+	return (homeEquivalents.some(regex => regex.test(hash)))
+		? "#/"
+		: hash
+}
+
+export class HashNormalizer {
+	constructor(public location: Location) {}
+
+	get hash() {
+		const hash = normalizeHash(this.location.hash)
+		if (hash === "#/") eraseWindowHash()
+		return hash
+	}
+
+	set hash(hash: string) {
+		this.location.hash = hash
+	}
+}
+
+export class Navigable<P extends any[] = any[]> {
+	static all<R extends Routes>(
+			routes: R,
+			getRoute: () => Route | null,
+			navigate: (hash: string) => Promise<ResolvedRoute>,
+		): {[K in keyof R]: Navigable<Params<R[K]>>} {
+
+		return ob(routes).map(route => new this(
+			route,
+			() => (getRoute() === route),
+			async(...params: any[]) => navigate(route.hasher.make(...params)),
+		)) as any
+	}
+
+	constructor(
+		public route: Route<P>,
+		private isActive: () => boolean,
+		public go: (...params: P) => Promise<ResolvedRoute<P>>,
+	) {}
+
+	get active() {
+		return this.isActive()
+	}
+
+	hash(...params: P) {
+		return this.route.hasher.make(...params)
+	}
+}
+
+export function resolveRoute<R extends Routes>(
+		hash: string,
+		routes: R,
+	): ResolvedRoute | null {
+
+	for (const key in routes) {
+		const route = routes[key]
+		const params = route.hasher.parse(hash)
+		if (params) {
+			return {
+				key,
+				route,
+				params,
+				op: Op.promise(route.fn(...params))
+			}
+		}
+	}
+
+	return null
+}
+
+export function onHashChange(fn: (event: HashChangeEvent) => void) {
+	return ev(window, {hashchange: fn})
+}
+