@e280/sly 0.2.0-8 → 0.2.0

package/s/dom/attrs/parts/on-attrs.ts

@@ -0,0 +1,8 @@
+
+/** respond when any attribute changes on the html element */
+export function onAttrs(element: HTMLElement, fn: () => void) {
+	const observer = new MutationObserver(fn)
+	observer.observe(element, {attributes: true})
+	return () => observer.disconnect()
+}
+

package/s/dom/dom.ts

@@ -1,70 +1,33 @@
 
 import {render} from "lit"
-import {register} from "./register.js"
-import {Content} from "../views/types.js"
-import {attributes, AttrSpec, AttrTypes} from "./attributes.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<A extends AttrSpec>(spec: A) {
-		return attributes(this.element as HTMLElement, spec)
-	}
+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 {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 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.attrs = attributes
+dom.el = el
+dom.elmer = elmer
+dom.mk = mk
+dom.events = eve
+dom.attrs = attrs
 dom.register = register
 dom.render = (container: Renderable, ...content: Content[]) => {
 	return render(content, container)

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/{register.ts → parts/register.ts}

@@ -1,14 +1,6 @@
 
 import {dashify} from "./dashify.js"
-
-export type HTMLElementClasses = {
-	[key: string]: {new(...args: any[]): HTMLElement}
-}
-
-export type RegistrationOptions = {
-	soft: boolean
-	upgrade: boolean
-}
+import {HTMLElementClasses, RegisterOptions} from "../types.js"
 
 /**
  * register custom elements (web components) to the dom
@@ -24,7 +16,7 @@ export type RegistrationOptions = {
  */
 export function register<E extends HTMLElementClasses>(
 		elements: E,
-		options: Partial<RegistrationOptions> = {},
+		options: Partial<RegisterOptions> = {},
 	) {
 
 	const {

package/s/dom/types.ts

@@ -0,0 +1,50 @@
+
+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
+	| typeof Boolean
+)
+
+export type AttrType<H extends AttrKind> = (
+	H extends typeof String
+		? string | undefined
+
+	: H extends typeof Number
+		? number | undefined
+
+	: H extends typeof Boolean
+		? boolean
+
+	: never
+)
+
+export type AttrSpec = {
+	[key: string]: AttrKind
+}
+
+export type AttrTypes<A extends AttrSpec> = {
+	[P in keyof A]: AttrType<A[P]>
+}
+
+export type Attrs = ReturnType<typeof attrs>
+
+// register
+
+export type HTMLElementClasses = {
+	[key: string]: {new(...args: any[]): HTMLElement}
+}
+
+export type RegisterOptions = {
+	soft: boolean
+	upgrade: boolean
+}
+

package/s/index.html.ts

@@ -29,9 +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>
-		<demo-counter>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,22 +1,9 @@
 
-export * from "./dom/attributes.js"
-export * from "./dom/dashify.js"
-export * from "./dom/dom.js"
-export * from "./dom/register.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 "./dom/attributes.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,
+	}
+}
+