@e280/sly 0.2.0-1 → 0.2.0-10

package/s/demo/views/demo.ts

@@ -1,24 +1,28 @@
 
 import {css, html} from "lit"
-import {view} from "../../views/view.js"
+
+import {view} from "../../ui/view.js"
 import {CounterView} from "./counter.js"
 import {LoadersView} from "./loaders.js"
-import {cssReset} from "../../views/css-reset.js"
+import {cssReset} from "../../ui/base/css-reset.js"
 
-export const DemoView = view(use => () => {
+export class DemoComponent extends (view.component(use => {
 	use.name("demo")
 	use.styles(cssReset, styles)
-
 	return html`
-		${CounterView.props(2).children("view").render()}
+		${CounterView
+			.props(768, 3)
+			.children("view")
+			.render()}
 		${LoadersView()}
 	`
-})
+})) {}
 
 const styles = css`
 :host {
 	display: flex;
 	flex-direction: column;
+	align-items: center;
 	gap: 1em;
 }
 `

package/s/demo/views/fastcount.ts

@@ -0,0 +1,29 @@
+
+import {css, html} from "lit"
+import {nap, repeat} from "@e280/stz"
+
+import {dom} from "../../dom/dom.js"
+import {Use} from "../../ui/base/use.js"
+import {BaseElement} from "../../ui/base-element.js"
+
+export class FastcountElement extends BaseElement {
+	static styles = css`span{color:orange}`
+
+	attrs = dom.attrs(this).spec({value: Number})
+	something = {whatever: "rofl"}
+
+	render(use: Use) {
+		const {value = 1} = this.attrs
+		const $count = use.signal(0)
+
+		use.mount(() => repeat(async() => {
+			await nap(10)
+			await $count($count() + 1)
+		}))
+
+		return html`
+			<span>${$count() * value}</span>
+		`
+	}
+}
+

package/s/demo/views/loaders.ts

@@ -1,8 +1,8 @@
 
 import {css, html} from "lit"
 import {Op} from "../../ops/op.js"
-import {view} from "../../views/view.js"
-import {cssReset} from "../../views/css-reset.js"
+import {view} from "../../ui/view.js"
+import {cssReset} from "../../ui/base/css-reset.js"
 import {anims, makeLoader} from "../../ops/loaders/make-loader.js"
 
 export const LoadersView = view(use => () => {

package/s/dom/attrs/attrs.ts

@@ -0,0 +1,21 @@
+
+import {AttrSpec} from "../types.js"
+import {onAttrs} from "./parts/on-attrs.js"
+import {attrFns} from "./parts/attr-fns.js"
+import {attrSpec} from "./parts/attr-spec.js"
+import {AttrProxies} from "./parts/attr-proxies.js"
+
+export function attrs(element: HTMLElement) {
+	const proxies = new AttrProxies(element)
+	return {
+		string: proxies.string,
+		number: proxies.number,
+		boolean: proxies.boolean,
+		on: (fn: () => void) => onAttrs(element, fn),
+		spec: <A extends AttrSpec>(spec: A) => attrSpec(element, spec),
+	}
+}
+
+attrs.get = attrFns.get
+attrs.set = attrFns.set
+

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

@@ -0,0 +1,38 @@
+
+/** fns for getting and setting html attributes of various types */
+export const attrFns = {
+	get: {
+		string: (e: HTMLElement, key: string) => {
+			return e.getAttribute(key) ?? undefined
+		},
+		number: (e: HTMLElement, key: string) => {
+			const raw = e.getAttribute(key)
+			return (raw === null || !raw)
+				? undefined
+				: Number(raw)
+		},
+		boolean: (e: HTMLElement, key: string) => {
+			const raw = e.getAttribute(key)
+			return raw !== null
+		},
+	},
+
+	set: {
+		string: (e: HTMLElement, key: string, value: string | undefined) => {
+			if (value === undefined) e.removeAttribute(key)
+			else e.setAttribute(key, value)
+			return true
+		},
+		number: (e: HTMLElement, key: string, value: number | undefined) => {
+			if (value === undefined) e.removeAttribute(key)
+			else e.setAttribute(key, value.toString())
+			return true
+		},
+		boolean: (e: HTMLElement, key: string, value: boolean | undefined) => {
+			if (value) e.setAttribute(key, "")
+			else e.removeAttribute(key)
+			return true
+		},
+	},
+}
+

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

@@ -0,0 +1,35 @@
+
+import {attrFns} from "./attr-fns.js"
+
+/** a typed proxy accessor for html attributes */
+export class AttrProxies {
+	constructor(public element: HTMLElement) {}
+
+	string = new Proxy({}, {
+		get: (_t, key: string) => (
+			attrFns.get.string(this.element, key)
+		),
+		set: (_t, key: string, value: string | undefined) => (
+			attrFns.set.string(this.element, key, value)
+		),
+	}) as Record<string, string | undefined>
+
+	number = new Proxy({}, {
+		get: (_t, key: string) => (
+			attrFns.get.number(this.element, key)
+		),
+		set: (_t, key: string, value: number | undefined) => (
+			attrFns.set.number(this.element, key, value)
+		),
+	}) as Record<string, number | undefined>
+
+	boolean = new Proxy({}, {
+		get: (_t, key: string) => (
+			attrFns.get.boolean(this.element, key)
+		),
+		set: (_t, key: string, value: boolean | undefined) => (
+			attrFns.set.boolean(this.element, key, value)
+		),
+	}) as Record<string, boolean | undefined>
+}
+

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

@@ -0,0 +1,29 @@
+
+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>(
+		e: HTMLElement,
+		spec: A,
+	) => new Proxy(spec, {
+
+	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)
+			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)
+			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,23 +1,36 @@
 
 import {render} from "lit"
-import {register} from "./register.js"
-import {Content} from "../views/types.js"
-import {Queryable, Renderable} from "./types.js"
+import {AttrSpec} from "./types.js"
+import {attrs} from "./attrs/attrs.js"
+import {Content} from "../ui/types.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 +45,29 @@ 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)
+	}
 }
 
-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.attrs = attrs
+dom.register = register
+dom.render = (container: Renderable, ...content: Content[]) => {
+	return render(content, container)
+}
+

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,19 +1,21 @@
 
-export * from "./dom/dashify.js"
-export * from "./dom/register.js"
 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 * 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 * as loot from "./loot/index.js"
+
+export * from "./ui/base/css-reset.js"
+export * from "./ui/base/use.js"
+export * from "./ui/view/parts/chain.js"
+export * from "./ui/view/parts/sly-view.js"
+export * from "./ui/base-element.js"
+export * from "./ui/types.js"
+export * from "./ui/view.js"
 

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

@@ -0,0 +1,35 @@
+
+import {signal} from "@e280/strata"
+import {outsideCurrentTarget} from "./helpers.js"
+
+/** dropzone that accepts user-dropped stuff like files */
+export class Drops {
+	$indicator = signal(false)
+
+	constructor(private params: {
+
+		/** whether or not the dragged item is acceptable for a drop */
+		predicate: (event: DragEvent) => boolean
+
+		/** fn to handle the drop of an acceptable item */
+		acceptDrop: (event: DragEvent) => void
+	}) {}
+
+	dragover = (event: DragEvent) => {
+		event.preventDefault()
+		this.$indicator.value = this.params.predicate(event)
+	}
+
+	dragleave = (event: DragEvent) => {
+		if (outsideCurrentTarget(event))
+			this.$indicator.value = false
+	}
+
+	drop = (event: DragEvent) => {
+		event.preventDefault()
+		this.$indicator.value = false
+		if (this.params.predicate(event))
+			this.params.acceptDrop(event)
+	}
+}
+

package/s/loot/helpers.ts

@@ -0,0 +1,31 @@
+
+export function hasFiles(event: DragEvent) {
+	return !!(
+		event.dataTransfer &&
+		event.dataTransfer.types.includes("Files")
+	)
+}
+
+export function files(event: DragEvent) {
+	return event.dataTransfer
+		? Array.from(event.dataTransfer.files)
+		: []
+}
+
+export function outsideCurrentTarget(event: DragEvent) {
+	const isCursorOutsideViewport = !event.relatedTarget || (
+		event.clientX === 0 &&
+		event.clientY === 0
+	)
+
+	if (isCursorOutsideViewport)
+		return true
+
+	const rect = (event.currentTarget as any).getBoundingClientRect()
+	const withinX = event.clientX >= rect.left && event.clientX <= rect.right
+	const withinY = event.clientY >= rect.top && event.clientY <= rect.bottom
+	const cursorOutsideCurrentTarget = !(withinX && withinY)
+
+	return cursorOutsideCurrentTarget
+}
+

package/s/loot/index.ts

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

package/s/ops/loaders/make-loader.ts

@@ -1,7 +1,7 @@
 
 import {Op} from "../op.js"
-import {braille} from "./parts/anims.js"
-import {Content} from "../../views/types.js"
+import {earth} from "./parts/anims.js"
+import {Content} from "../../ui/types.js"
 import {ErrorDisplay} from "./parts/error-display.js"
 
 export * as anims from "./parts/anims.js"
@@ -9,7 +9,7 @@ export * as anims from "./parts/anims.js"
 export type Loader = <V>(op: Op<V>, ready: (value: V) => Content) => Content
 
 export function makeLoader(
-		loading: () => Content = braille,
+		loading: () => Content = earth,
 		error: (error: any) => Content = (error: any) => ErrorDisplay(error),
 	): Loader {
 

package/s/ops/loaders/parts/anims.ts

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

package/s/ops/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 "../../../ui/view.js"
+import {Content} from "../../../ui/types.js"
+import {cssReset} from "../../../ui/base/css-reset.js"
 
 export function makeAsciiAnim(hz: number, frames: string[]): () => Content {
 	return () => AsciiAnim({hz, frames})

package/s/ops/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 "../../../ui/view.js"
+import {cssReset} from "../../../ui/base/css-reset.js"
 
 export const ErrorDisplay = view(use => (error: any) => {
 	use.name("error")

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())
 	}
 
@@ -74,7 +74,7 @@ export class Op<V> {
 		}
 	}
 
-	async fn(fn: () => Promise<V>) {
+	async load(fn: () => Promise<V>) {
 		return this.promise(fn())
 	}