@e280/sly 0.2.0-3 → 0.2.0-30

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

@@ -0,0 +1,29 @@
+
+import {attrGet, attrSet} from "./attr-fns.js"
+import {AttrSpec, AttrTypes} from "../../types.js"
+
+/** specify available html attributes and their types and create a proxy accessor */
+export const attrSpec = <A extends AttrSpec>(
+		e: HTMLElement,
+		spec: A,
+	) => new Proxy(spec, {
+
+	get: (_target, key: string) => {
+		switch (spec[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 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}"`)
+		}
+	},
+}) as any as AttrTypes<A>
+

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,51 +1,35 @@
 
 import {render} from "lit"
-import {register} from "./register.js"
-import {Content} from "../views/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 {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 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
-		)
-	}
-
-	require<E extends Element = HTMLElement>(selector: string) {
-		const e = this.element.querySelector<E>(selector)
-		if (!e) throw new Error(`$1 ${selector} not found`)
-		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)
-	}
+export function dom<E extends Element>(selector: string, container: Queryable = document): E {
+	return queryRequire<E>(selector, container)
 }
 
-export function dom(selector: string) {
-	return new Dom(document).require(selector)
+dom.in = <E extends HTMLElement>(selectorOrElement: string | E, container: Queryable = document) => {
+	return new Dom(container).in(selectorOrElement)
 }
 
-const doc = new Dom(document)
+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[]) => {
 	return render(content, container)
 }
 
-dom.in = doc.in.bind(doc)
-dom.require = doc.require.bind(doc)
-dom.maybe = doc.maybe.bind(doc)
-dom.all = doc.all.bind(doc)
-

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,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,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,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,21 +1,9 @@
 
-export * from "./dom/dashify.js"
-export * from "./dom/dom.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,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/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,4 @@
 
-export * from "./drag-drop.js"
-export * from "./drop.js"
-export * from "./helpers.js"
+export * as loot from "./index.barrel.js"
+export type * from "./index.barrel.js"