@e280/sly 0.2.0-2 → 0.2.0-21

package/s/dom/dom.ts

@@ -1,23 +1,38 @@
 
 import {render} from "lit"
-import {register} from "./register.js"
-import {Content} from "../views/types.js"
-import {Queryable, Renderable} from "./types.js"
+import {el} from "./parts/el.js"
+import {AttrSpec} from "./types.js"
+import {attrs} from "./attrs/attrs.js"
+import {Content} from "../view/types.js"
+import {eve, EveSpec} from "./parts/eve.js"
+import {register} from "./parts/register.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>(elementOrSelector: E | string) {
-		return new Dom(
-			typeof elementOrSelector === "string"
-				? this.require<E>(elementOrSelector)
-				: elementOrSelector
+	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(`$1 ${selector} not found`)
+		if (!e) throw new Error(`element not found (${selector})`)
 		return e
 	}
 
@@ -32,20 +47,35 @@ export class Dom<C extends Queryable> {
 	render(...content: Content[]) {
 		return render(content, this.element as Renderable)
 	}
-}
 
-export function dom(selector: string) {
-	return new Dom(document).require(selector)
+	attrs() {
+		return attrs(this.element as HTMLElement)
+	}
+
+	events(spec: EveSpec) {
+		return eve(this.element, spec)
+	}
 }
 
-const doc = new Dom(document)
-dom.register = register
-dom.render = (container: Renderable, ...content: Content[]) => {
-	return render(content, 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)
 }
 
+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.el = el
+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/el.ts

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

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

@@ -1,11 +1,6 @@
 
 import {dashify} from "./dashify.js"
-import {HTMLElementClasses} from "./types.js"
-
-export type RegistrationOptions = {
-	soft: boolean
-	upgrade: boolean
-}
+import {HTMLElementClasses, RegisterOptions} from "../types.js"
 
 /**
  * register custom elements (web components) to the dom
@@ -21,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

@@ -1,8 +1,45 @@
 
-export type Renderable = HTMLElement | ShadowRoot | DocumentFragment
-export type Queryable = HTMLElement | ShadowRoot | Element | Document | DocumentFragment
+import {attrs} from "./attrs/attrs.js"
+
+// attrs
+
+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,8 +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>
-		<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,20 +1,9 @@
 
-export * from "./dom/dashify.js"
-export * from "./dom/register.js"
-export * from "./dom/types.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/attributes.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,9 @@
+
+export * as anims 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,3 @@
+
+export * as loaders 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

@@ -2,9 +2,9 @@
 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"
+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,6 +17,7 @@ export const AsciiAnim = view(use => ({hz, frames}: {
 
 	use.name("loading")
 	use.styles(cssReset, style)
+
 	const frame = use.signal(0)
 
 	use.mount(() => repeat(async() => {

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/drag-and-drops.ts

@@ -0,0 +1,82 @@
+
+import {signal} from "@e280/strata"
+import {Drops} from "./drops.js"
+import {outsideCurrentTarget} from "./helpers.js"
+
+/** respond to user dragging-and-dropping things around on a webpage */
+export class DragAndDrops<Draggy, Droppy> {
+
+	/** what is currently being dragged */
+	$draggy = signal<Draggy | undefined>(undefined)
+
+	/** what dropzone are we curently hovering over */
+	$droppy = signal<Droppy | undefined>(undefined)
+
+	constructor(private params: {
+
+		/** accept a dropped item that was declared within this system */
+		acceptDrop: (event: DragEvent, draggy: Draggy, droppy: Droppy) => void
+
+		/** also accept drops on the side */
+		backchannelDrops?: Drops
+	}) {}
+
+	get dragging() {
+		return this.$draggy()
+	}
+
+	get hovering() {
+		return this.$droppy()
+	}
+
+	/** make event listeners to attach to your dragzone(s) */
+	dragzone = (getDraggy: () => Draggy) => ({
+		draggable: "true",
+
+		dragstart: (_: DragEvent) => {
+			this.$draggy.value = getDraggy()
+		},
+
+		dragend: (_: DragEvent) => {
+			this.$draggy.value = undefined
+			this.$droppy.value = undefined
+		},
+	})
+
+	/** make event listeners to attach to your dropzones(s) */
+	dropzone = (getDroppy: () => Droppy) => ({
+		dragenter: (_: DragEvent) => {},
+
+		dragover: (event: DragEvent) => {
+			event.preventDefault()
+			if (this.$draggy())
+				this.$droppy.value = getDroppy()
+			else
+				this.params.backchannelDrops?.dragover(event)
+		},
+
+		dragleave: (event: DragEvent) => {
+			if (outsideCurrentTarget(event))
+				this.$droppy.value = undefined
+			this.params.backchannelDrops?.dragleave(event)
+		},
+
+		drop: (event: DragEvent) => {
+			event.preventDefault()
+			const {acceptDrop} = this.params
+			const draggy = this.$draggy()
+			const droppy = this.$droppy()
+			try {
+				if (draggy && droppy)
+					acceptDrop(event, draggy, droppy)
+				else
+					this.params.backchannelDrops?.drop(event)
+			}
+			finally {
+				this.$draggy.value = undefined
+				this.$droppy.value = undefined
+			}
+		},
+	})
+}
+

package/s/loot/{drop.ts → drops.ts}

@@ -1,10 +1,10 @@
 
 import {signal} from "@e280/strata"
-import {dragIsOutsideCurrentTarget} from "./helpers.js"
+import {outsideCurrentTarget} from "./helpers.js"
 
-/** dropzone that accepts dropped stuff like files */
-export class Drop {
-	#$indicator = signal(false)
+/** dropzone that accepts user-dropped stuff like files */
+export class Drops {
+	$indicator = signal(false)
 
 	constructor(private params: {
 
@@ -15,28 +15,19 @@ export class Drop {
 		acceptDrop: (event: DragEvent) => void
 	}) {}
 
-	get indicator() {
-		return this.#$indicator.value
-	}
-
-	resetIndicator = () => {
-		this.#$indicator.value = false
-	}
-
 	dragover = (event: DragEvent) => {
 		event.preventDefault()
-		if (this.params.predicate(event))
-			this.#$indicator.value = true
+		this.$indicator.value = this.params.predicate(event)
 	}
 
 	dragleave = (event: DragEvent) => {
-		if (dragIsOutsideCurrentTarget(event))
-			this.#$indicator.value = false
+		if (outsideCurrentTarget(event))
+			this.$indicator.value = false
 	}
 
 	drop = (event: DragEvent) => {
 		event.preventDefault()
-		this.#$indicator.value = false
+		this.$indicator.value = false
 		if (this.params.predicate(event))
 			this.params.acceptDrop(event)
 	}

package/s/loot/helpers.ts

@@ -1,18 +1,18 @@
 
-export function dragHasFiles(event: DragEvent) {
+export function hasFiles(event: DragEvent) {
 	return !!(
 		event.dataTransfer &&
 		event.dataTransfer.types.includes("Files")
 	)
 }
 
-export function droppedFiles(event: DragEvent) {
+export function files(event: DragEvent) {
 	return event.dataTransfer
 		? Array.from(event.dataTransfer.files)
 		: []
 }
 
-export function dragIsOutsideCurrentTarget(event: DragEvent) {
+export function outsideCurrentTarget(event: DragEvent) {
 	const isCursorOutsideViewport = !event.relatedTarget || (
 		event.clientX === 0 &&
 		event.clientY === 0

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,3 @@
 
-export * from "./drag-drop.js"
-export * from "./drop.js"
-export * from "./helpers.js"
+export * as loot 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

@@ -16,7 +16,7 @@ export class Op<V> {
 		return op
 	}
 
-	static fn<V>(fn: () => Promise<V>) {
+	static load<V>(fn: () => Promise<V>) {
 		return this.promise(fn())
 	}
 
@@ -69,12 +69,13 @@ export class Op<V> {
 			return value
 		}
 		catch (error) {
+			console.error(error)
 			if (count === this.#count)
 				await this.setError(error)
 		}
 	}
 
-	async fn(fn: () => Promise<V>) {
+	async load(fn: () => Promise<V>) {
 		return this.promise(fn())
 	}
 

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,3 @@
+
+export * as spa 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,
+	}
+}
+