@e280/sly 0.2.0-0 → 0.2.0-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())
 	}
 

package/s/{views → ui/base}/use.ts

@@ -1,18 +1,21 @@
 
 import {CSSResultGroup} from "lit"
 import {defer, MapG} from "@e280/stz"
-import {signal} from "@e280/strata/signals"
+import {signal, SignalOptions} from "@e280/strata/signals"
 
-import {Op} from "../ops/op.js"
+import {Op} from "../../ops/op.js"
+import {dom} from "../../dom/dom.js"
+import {Attrs} from "../../dom/types.js"
 import {Mounts} from "./utils/mounts.js"
 import {applyStyles} from "./utils/apply-styles.js"
-import {attributes, AttrSpec, onAttrChange} from "./attributes.js"
 
 export const _wrap = Symbol()
 export const _disconnect = Symbol()
 export const _reconnect = Symbol()
 
 export class Use {
+	attrs: Attrs
+
 	#runs = 0
 	#position = 0
 	#values = new MapG<number, any>()
@@ -37,11 +40,13 @@ export class Use {
 	}
 
 	constructor(
-		public element: HTMLElement,
-		public shadow: ShadowRoot,
-		public renderNow: () => void,
-		public render: () => Promise<void>,
-	) {}
+			public element: HTMLElement,
+			public shadow: ShadowRoot,
+			public renderNow: () => void,
+			public render: () => Promise<void>,
+		) {
+		this.attrs = dom.attrs(this.element)
+	}
 
 	get renderCount() {
 		return this.#runs
@@ -64,11 +69,6 @@ export class Use {
 		return this.styles(...styles)
 	}
 
-	attrs<A extends AttrSpec>(spec: A) {
-		this.mount(() => onAttrChange(this.element, this.render))
-		return this.once(() => attributes(this.element, spec))
-	}
-
 	once<V>(fn: () => V) {
 		return this.#values.guarantee(this.#position++, fn) as V
 	}
@@ -94,15 +94,33 @@ export class Use {
 	op = (() => {
 		const that = this
 		function op<V>(f: () => Promise<V>) {
-			return that.once(() => Op.fn(f))
+			return that.once(() => Op.load(f))
 		}
-		op.fn = op as (<V>(f: () => Promise<V>) => Op<V>)
+		op.load = op as (<V>(f: () => Promise<V>) => Op<V>)
 		op.promise = <V>(p: Promise<V>) => this.once(() => Op.promise(p))
 		return op
 	})()
 
-	signal<V>(value: V) {
-		return this.once(() => signal<V>(value))
+	signal = (() => {
+		const that = this
+		function sig<V>(value: V, options?: Partial<SignalOptions>) {
+			return that.once(() => signal<V>(value, options))
+		}
+		sig.derived = function derived<V>(formula: () => V, options?: Partial<SignalOptions>) {
+			return that.once(() => signal.derived<V>(formula, options))
+		}
+		sig.lazy = function lazy<V>(formula: () => V, options?: Partial<SignalOptions>) {
+			return that.once(() => signal.lazy<V>(formula, options))
+		}
+		return sig
+	})()
+
+	derived<V>(formula: () => V, options?: Partial<SignalOptions>) {
+		return this.once(() => signal.derived<V>(formula, options))
+	}
+
+	lazy<V>(formula: () => V, options?: Partial<SignalOptions>) {
+		return this.once(() => signal.lazy<V>(formula, options))
 	}
 }
 

package/s/ui/base/utils/attr-watcher.ts

@@ -0,0 +1,22 @@
+
+import {dom} from "../../../dom/dom.js"
+
+export class AttrWatcher {
+	#stopper: (() => void) | undefined
+
+	constructor(
+		private element: HTMLElement,
+		private response: () => void,
+	) {}
+
+	start() {
+		if (!this.#stopper)
+			this.#stopper = dom.attrs(this.element).on(this.response)
+	}
+
+	stop() {
+		if (this.#stopper) this.#stopper()
+		this.#stopper = undefined
+	}
+}
+

package/s/ui/base/utils/reactor.ts

@@ -0,0 +1,21 @@
+
+import {MapG} from "@e280/stz"
+import {tracker} from "@e280/strata"
+
+export class Reactor {
+	#map = new MapG<any, () => void>()
+
+	effect<R>(collect: () => R, respond: () => Promise<void>) {
+		const {seen, result} = tracker.observe(collect)
+		for (const item of seen)
+			this.#map.guarantee(item, () => tracker.subscribe(item, respond))
+		return result
+	}
+
+	clear() {
+		for (const dispose of this.#map.values())
+			dispose()
+		this.#map.clear()
+	}
+}
+

package/s/ui/base-element.ts

@@ -0,0 +1,76 @@
+
+import {debounce} from "@e280/stz"
+import {CSSResultGroup} from "lit"
+
+import {dom} from "../dom/dom.js"
+import {Content} from "./types.js"
+import {Reactor} from "./base/utils/reactor.js"
+import {AttrWatcher} from "./base/utils/attr-watcher.js"
+import {applyStyles} from "./base/utils/apply-styles.js"
+import {Use, _disconnect, _reconnect, _wrap} from "./base/use.js"
+
+export class BaseElement extends HTMLElement {
+	static styles: CSSResultGroup | undefined
+
+	readonly shadow: ShadowRoot
+
+	#use: Use
+	#mountCount = 0
+	#reactor = new Reactor()
+	#attrWatcher = new AttrWatcher(this, () => this.update())
+
+	/** create the shadow root. override this if you want to change the shadow root settings. */
+	createShadow() {
+		return this.attachShadow({mode: "open"})
+	}
+
+	constructor() {
+		super()
+		this.shadow = this.createShadow()
+		this.#use = new Use(
+			this,
+			this.shadow,
+			this.updateNow,
+			this.update,
+		)
+	}
+
+	/** return some content to render. */
+	render(_use: Use): Content {}
+
+	/** immediately perform a fresh render into the shadow root. */
+	updateNow = () => {
+		this.#use[_wrap](() => {
+			dom.render(
+				this.shadow,
+				this.#reactor.effect(
+					() => this.render(this.#use),
+					this.update,
+				),
+			)
+		})
+	}
+
+	/** request a rerender which will happen soon (debounced). */
+	update = debounce(0, this.updateNow)
+	
+	connectedCallback() {
+		if (this.#mountCount === 0) {
+			const styles = (this.constructor as any).styles
+			if (styles) applyStyles(this.shadow, styles)
+			this.updateNow()
+		}
+		else {
+			this.#use[_reconnect]()
+		}
+		this.#attrWatcher.start()
+		this.#mountCount++
+	}
+
+	disconnectedCallback() {
+		this.#use[_disconnect]()
+		this.#reactor.clear()
+		this.#attrWatcher.stop()
+	}
+}
+

package/s/ui/types.ts

@@ -0,0 +1,33 @@
+
+import {TemplateResult} from "lit"
+import {Constructor} from "@e280/stz"
+import {DirectiveResult} from "lit/directive.js"
+
+import {Use} from "./base/use.js"
+import {ViewChain} from "./view/parts/chain.js"
+import {BaseElement} from "./base-element.js"
+
+export type Content = TemplateResult | DirectiveResult | HTMLElement | string | null | undefined | void | Content[]
+export type AttrValue = string | boolean | number | undefined | null | void
+
+export type ViewFn<Props extends any[]> = (
+	(use: Use) =>
+	(...props: Props) =>
+	Content
+)
+
+export type View<Props extends any[]> = {
+	(...props: Props): DirectiveResult
+	props: (...props: Props) => ViewChain<Props>
+	component: <B extends Constructor<BaseElement>>(Base: B) => {
+		props: (propFn: (component: InstanceType<B>) => Props) => (
+			ComponentClass<B, Props>
+		)
+	}
+}
+
+export type ComponentClass<B extends Constructor<BaseElement>, Props extends any[]> = {
+	view: View<Props>
+	new(): InstanceType<B>
+} & B
+

package/s/ui/view/make-component.ts

@@ -0,0 +1,33 @@
+
+import {Constructor} from "@e280/stz"
+import {Use} from "../base/use.js"
+import {ComponentClass, ViewFn} from "../types.js"
+import {makeView} from "./make-view.js"
+import {Reactor} from "../base/utils/reactor.js"
+import {BaseElement} from "../base-element.js"
+
+/** make a component from a BaseElement and a view. */
+export function makeComponent<B extends Constructor<BaseElement>, Props extends any[]>(
+		settings: ShadowRootInit,
+		Base: B,
+		propFn: (component: InstanceType<B>) => Props,
+		viewFn: ViewFn<Props>,
+	) {
+
+	return class Component extends Base {
+		static view = makeView(viewFn, settings)
+		#reactor = new Reactor()
+
+		createShadow() {
+			return this.attachShadow(settings)
+		}
+
+		render(use: Use) {
+			return viewFn(use)(...this.#reactor.effect(
+				() => propFn(this as any),
+				() => this.update(),
+			))
+		}
+	} as any as ComponentClass<B, Props>
+}
+

package/s/ui/view/make-view.ts

@@ -0,0 +1,40 @@
+
+import {Constructor} from "@e280/stz"
+import {DirectiveResult} from "lit/async-directive.js"
+import {View, ViewFn} from "../types.js"
+import {ViewChain} from "./parts/chain.js"
+import {ViewContext} from "./parts/context.js"
+import {makeComponent} from "./make-component.js"
+import {BaseElement} from "../base-element.js"
+import {makeViewDirective} from "./parts/directive.js"
+
+export function makeView<Props extends any[]>(
+		viewFn: ViewFn<Props>,
+		settings: ShadowRootInit,
+	): View<Props> {
+
+	const renderDirective = makeViewDirective(viewFn, settings)
+
+	function v(...props: Props): DirectiveResult {
+		return renderDirective(new ViewContext(props))
+	}
+
+	v.props = (...props: Props) => new ViewChain(
+		new ViewContext(props),
+		renderDirective,
+	)
+
+	v.component = <B extends Constructor<BaseElement>>(Base: B) => ({
+		props: (propFn: (component: InstanceType<B>) => Props) => (
+			makeComponent<B, Props>(
+				settings,
+				Base,
+				propFn,
+				viewFn,
+			)
+		)
+	})
+
+	return v
+}
+

package/s/{views/utils → ui/view/parts}/apply-attrs.ts

@@ -1,16 +1,13 @@
 
-import {AttrValue} from "../types.js"
+import {AttrValue} from "../../types.js"
 
 export function applyAttrs(
 		element: HTMLElement,
-		attrs: Record<string, AttrValue>,
+		attrs: Map<string, AttrValue>,
 	) {
 
 	for (const [key, value] of Object.entries(attrs)) {
-		if (value === undefined)
-			element.removeAttribute(key)
-
-		else if (value === null)
+		if (value === undefined || value === null)
 			element.removeAttribute(key)
 
 		else if (typeof value === "string")
@@ -27,7 +24,7 @@ export function applyAttrs(
 		}
 
 		else
-			console.warn(`invalid attribute type ${key} is ${typeof value}`)
+			console.warn(`invalid attribute "${key}" type is "${typeof value}"`)
 	}
 }
 

package/s/ui/view/parts/capsule.ts

@@ -0,0 +1,67 @@
+
+import {debounce} from "@e280/stz"
+import {ViewFn} from "../../types.js"
+import {SlyView} from "./sly-view.js"
+import {dom} from "../../../dom/dom.js"
+import {ViewContext} from "./context.js"
+import {applyAttrs} from "./apply-attrs.js"
+import {Reactor} from "../../base/utils/reactor.js"
+import {AttrWatcher} from "../../base/utils/attr-watcher.js"
+import {_disconnect, _reconnect, _wrap, Use} from "../../base/use.js"
+
+/** controls the rendering of view context into an element. */
+export class ViewCapsule<Props extends any[]> {
+	#element = SlyView.make()
+	#reactor = new Reactor()
+
+	#use: Use
+	#shadow: ShadowRoot
+	#context!: ViewContext<Props>
+	#attrWatcher = new AttrWatcher(this.#element, () => this.#renderDebounced())
+
+	constructor(
+			private viewFn: ViewFn<Props>,
+			private settings: ShadowRootInit,
+		) {
+		this.#shadow = this.#element.attachShadow(this.settings)
+		this.#use = new Use(
+			this.#element,
+			this.#shadow,
+			this.#renderNow,
+			this.#renderDebounced,
+		)
+	}
+
+	update(context: ViewContext<Props>) {
+		this.#context = context
+		this.#renderNow()
+		return this.#element
+	}
+
+	#renderNow = () => {
+		this.#use[_wrap](() => {
+			const content = this.#reactor.effect(
+				() => this.viewFn(this.#use)(...this.#context.props),
+				() => this.#renderDebounced(),
+			)
+			applyAttrs(this.#element, this.#context.attrs)
+			dom.render(this.#shadow, content)
+			dom.render(this.#element, this.#context.children)
+			this.#attrWatcher.start()
+		})
+	}
+
+	#renderDebounced = debounce(0, this.#renderNow)
+
+	disconnected() {
+		this.#use[_disconnect]()
+		this.#reactor.clear()
+		this.#attrWatcher.stop()
+	}
+
+	reconnected() {
+		this.#use[_reconnect]()
+		this.#attrWatcher.start()
+	}
+}
+

package/s/ui/view/parts/chain.ts

@@ -0,0 +1,33 @@
+
+import {DirectiveResult} from "lit/async-directive.js"
+import {ViewContext} from "./context.js"
+import {AttrValue, Content} from "../../types.js"
+
+/** provides fluent chaining interface for adding context to rendering a view, think view.props().attr().children().render() */
+export class ViewChain<Props extends any[]> {
+	#render: (context: ViewContext<Props>) => DirectiveResult
+	#context: ViewContext<Props>
+
+	constructor(
+			context: ViewContext<Props>,
+			renderDirective: (context: ViewContext<Props>) => DirectiveResult,
+		) {
+		this.#context = context
+		this.#render = renderDirective
+	}
+
+	attr(key: string, value: AttrValue) {
+		this.#context.attrs.set(key, value)
+		return this
+	}
+
+	children(...contents: Content[]) {
+		this.#context.children.push(...contents)
+		return this
+	}
+
+	render() {
+		return this.#render(this.#context)
+	}
+}
+

package/s/ui/view/parts/context.ts

@@ -0,0 +1,10 @@
+
+import {AttrValue, Content} from "../../types.js"
+
+/** the information we need to render a view. */
+export class ViewContext<Props extends any[]> {
+	attrs = new Map<string, AttrValue>()
+	children: Content[] = []
+	constructor(public props: Props) {}
+}
+

package/s/ui/view/parts/directive.ts

@@ -0,0 +1,29 @@
+
+import {AsyncDirective, directive, DirectiveResult} from "lit/async-directive.js"
+import {ViewFn} from "../../types.js"
+import {ViewCapsule} from "./capsule.js"
+import {ViewContext} from "./context.js"
+
+/** creates a lit directive fn, which when called, emits a funky lit thing to inject in your html templates. */
+export function makeViewDirective<Props extends any[]>(
+		viewFn: ViewFn<Props>,
+		settings: ShadowRootInit,
+	) {
+
+	return directive(class ViewDirective extends AsyncDirective {
+		#capsule = new ViewCapsule(viewFn, settings)
+
+		render(context: ViewContext<Props>) {
+			return this.#capsule.update(context)
+		}
+
+		disconnected() {
+			this.#capsule.disconnected()
+		}
+
+		reconnected() {
+			this.#capsule.reconnected()
+		}
+	}) as (context: ViewContext<Props>) => DirectiveResult
+}
+

package/s/ui/view/parts/sly-view.ts

@@ -0,0 +1,15 @@
+
+import {dom} from "../../../dom/dom.js"
+
+/** <sly-view> element that views are rendered into. */
+export class SlyView extends HTMLElement {
+	static #registered = false
+	static make() {
+		if (!this.#registered) {
+			dom.register({SlyView}, {soft: true, upgrade: true})
+			this.#registered = true
+		}
+		return document.createElement("sly-view") as SlyView
+	}
+}
+

package/s/ui/view.ts

@@ -0,0 +1,24 @@
+
+import {Content, ViewFn} from "./types.js"
+import {makeView} from "./view/make-view.js"
+import {_disconnect, _reconnect, Use} from "./base/use.js"
+import { BaseElement } from "./base-element.js"
+
+export function view<Props extends any[]>(fn: ViewFn<Props>) {
+	return makeView(fn, {mode: "open"})
+}
+
+view.settings = (settings: ShadowRootInit) => ({
+	render: <Props extends any[]>(fn: ViewFn<Props>) => {
+		return makeView(fn, settings)
+	}
+})
+
+view.render = view
+
+view.component = (fn: (use: Use) => Content) => (
+	view(use => () => fn(use))
+		.component(BaseElement)
+		.props(() => [])
+)
+

package/x/demo/demo.bundle.js

@@ -1,7 +1,11 @@
-import { $ } from "../dom/dollar.js";
-import { DemoView } from "./views/demo.js";
-import { CounterView } from "./views/counter.js";
-$.render($(".demo"), DemoView());
-$.register({ DemoCounter: CounterView.component(1) });
+import { dom } from "../dom/dom.js";
+import { CounterComponent } from "./views/counter.js";
+import { DemoComponent } from "./views/demo.js";
+import { FastcountElement } from "./views/fastcount.js";
+dom.register({
+    DemoComponent,
+    CounterComponent,
+    FastcountElement,
+});
 console.log("🦝 sly");
 //# sourceMappingURL=demo.bundle.js.map

package/x/demo/demo.bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,CAAC,EAAC,MAAM,kBAAkB,CAAA;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAE9C,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAA;AAChC,CAAC,CAAC,QAAQ,CAAC,EAAC,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,EAAC,CAAC,CAAA;AAEnD,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}
+{"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,eAAe,CAAA;AACjC,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA;AAErD,GAAG,CAAC,QAAQ,CAAC;IACZ,aAAa;IACb,gBAAgB;IAChB,gBAAgB;CAChB,CAAC,CAAA;AAEF,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}