@e280/sly 0.2.0-8 → 0.2.0-9

package/s/views/base-element.ts

@@ -1,12 +1,12 @@
 
+import {debounce} from "@e280/stz"
 import {CSSResultGroup} from "lit"
-import {tracker} from "@e280/strata"
-import {debounce, MapG} from "@e280/stz"
 
 import {dom} from "../dom/dom.js"
 import {Content} from "./types.js"
-import {onAttrChange} from "../dom/attributes.js"
+import {Reactor} from "./utils/reactor.js"
 import {applyStyles} from "./utils/apply-styles.js"
+import {AttrWatcher} from "./utils/attr-watcher.js"
 import {Use, _disconnect, _reconnect, _wrap} from "./use.js"
 
 export abstract class BaseElement extends HTMLElement {
@@ -15,7 +15,8 @@ export abstract class BaseElement extends HTMLElement {
 
 	#use: Use
 	#mounts = 0
-	#tracking = new MapG<any, () => void>
+	#reactor = new Reactor()
+	#attrWatcher = new AttrWatcher(this, () => this.update())
 
 	constructor() {
 		super()
@@ -32,15 +33,13 @@ export abstract class BaseElement extends HTMLElement {
 
 	updateNow = () => {
 		this.#use[_wrap](() => {
-			const {result, seen} = tracker.observe(() => this.render(this.#use))
-
-			dom.render(this.shadow, result)
-
-			for (const item of seen)
-				this.#tracking.guarantee(
-					item,
-					() => tracker.subscribe(item, this.update),
-				)
+			dom.render(
+				this.shadow,
+				this.#reactor.effect(
+					() => this.render(this.#use),
+					this.update,
+				),
+			)
 		})
 	}
 
@@ -56,29 +55,14 @@ export abstract class BaseElement extends HTMLElement {
 		else {
 			this.#use[_reconnect]()
 		}
-		this.#attrListening.start()
+		this.#attrWatcher.start()
 		this.#mounts++
 	}
 
 	disconnectedCallback() {
-		this.#attrListening.stop()
 		this.#use[_disconnect]()
-		for (const untrack of this.#tracking.values())
-			untrack()
-		this.#tracking.clear()
+		this.#reactor.clear()
+		this.#attrWatcher.stop()
 	}
-
-	#attrListening = (() => {
-		let stopper: (() => void) | undefined
-		const start = () => {
-			if (stopper) stopper()
-			stopper = onAttrChange(this, () => this.update)
-		}
-		const stop = () => {
-			if (stopper) stopper()
-			stopper = undefined
-		}
-		return {start, stop}
-	})()
 }
 

package/s/views/types.ts

@@ -1,5 +1,4 @@
 
-import {Constructor} from "@e280/stz"
 import {DirectiveResult} from "lit/directive.js"
 import {CSSResultGroup, TemplateResult} from "lit"
 
@@ -8,16 +7,26 @@ import {Use} from "./use.js"
 export type Content = TemplateResult | DirectiveResult | HTMLElement | string | null | undefined | void | Content[]
 export type AttrValue = string | boolean | number | undefined | null | void
 
-export type Component<Props extends any[] = []> = {
-	render(...props: Props): void
+export type Component<Mix extends {} = {}> = Mix & {
+	renderNow(): void
+	render: () => void
 } & HTMLElement
 
-export type ComponentFn = (use: Use) => Content
-export type ViewFn<Props extends any[]> = (use: Use) => (...props: Props) => Content
+export type ComponentClass<Mix extends {}, Props extends any[]> = {
+	view: View<Props>
+	new(): Component<Mix>
+}
+
+export type ViewRenderFn<Props extends any[]> = (use: Use) => (...props: Props) => Content
 export type BasicView<Props extends any[]> = (...props: Props) => DirectiveResult<any>
+
 export type View<Props extends any[]> = BasicView<Props> & {
 	props: (...props: Props) => ViewChain
-	component: (...props: Props) => Constructor<Component>
+	component: <Mix extends {}>(init?: (component: Component<Mix>) => void) => {
+		props: (fn: (component: Component<Mix>) => Props) => (
+			ComponentClass<Mix, Props>
+		)
+	}
 }
 
 export type ViewSettings = ShadowRootInit & {

package/s/views/use.ts

@@ -5,15 +5,17 @@ import {signal, SignalOptions} from "@e280/strata/signals"
 
 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 {AttrSpec, onAttrChange} from "../dom/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>()
@@ -38,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
@@ -65,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(() => dom.attrs(this.element, spec))
-	}
-
 	once<V>(fn: () => V) {
 		return this.#values.guarantee(this.#position++, fn) as V
 	}

package/s/views/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/views/utils/reactor.ts

@@ -0,0 +1,23 @@
+
+import {MapG} from "@e280/stz"
+import {tracker} from "@e280/strata"
+
+export class Reactor {
+	#map = new MapG<any, () => void>()
+
+	constructor() {}
+
+	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/views/view.ts

@@ -1,22 +1,23 @@
 
 import {render} from "lit"
-import {debounce, MapG} from "@e280/stz"
+import {debounce} from "@e280/stz"
 import {directive} from "lit/directive.js"
-import {tracker} from "@e280/strata/tracker"
 import {AsyncDirective} from "lit/async-directive.js"
 
-import {register} from "../dom/register.js"
+import {Reactor} from "./utils/reactor.js"
+import {register} from "../dom/parts/register.js"
 import {applyAttrs} from "./utils/apply-attrs.js"
+import {AttrWatcher} from "./utils/attr-watcher.js"
 import {applyStyles} from "./utils/apply-styles.js"
 import {Use, _wrap, _disconnect, _reconnect} from "./use.js"
-import {AttrValue, ComponentFn, Content, View, ViewFn, ViewSettings, ViewContext} from "./types.js"
+import {AttrValue, Content, View, ViewRenderFn, ViewSettings, ViewContext, Component, ComponentClass} from "./types.js"
 
 export const view = setupView({mode: "open"})
 export class SlyView extends HTMLElement {}
 register({SlyView}, {soft: true, upgrade: true})
 
 function setupView(settings: ViewSettings) {
-	function view<Props extends any[]>(fn: ViewFn<Props>): View<Props> {
+	function view<Props extends any[]>(fn: ViewRenderFn<Props>): View<Props> {
 		type Situation = {
 			getElement: () => HTMLElement
 			isComponent: boolean
@@ -25,9 +26,16 @@ function setupView(settings: ViewSettings) {
 		const make = (situation: Situation) => class ViewDirective extends AsyncDirective {
 			#element = situation.getElement()
 			#shadow = this.#element.attachShadow(settings)
+			#reactor = new Reactor()
 			#renderDebounced = debounce(0, () => this.#renderNow())
-			#tracking = new MapG<any, () => void>
 			#params!: {context: ViewContext, props: Props}
+			#attrWatcher = new AttrWatcher(this.#element, () => {
+				const is_view_responsible_for_rerendering = (
+					!situation.isComponent
+				)
+				if (is_view_responsible_for_rerendering)
+					this.#renderDebounced()
+			})
 
 			#use = new Use(
 				this.#element,
@@ -52,18 +60,14 @@ function setupView(settings: ViewSettings) {
 					// apply html attributes
 					applyAttrs(this.#element, context.attrs)
 
-					// render the template, tracking strata items
-					const {result, seen} = tracker.observe(() => this.#fn(...props))
+					// render the template and track reactivity
+					const content = this.#reactor.effect(
+						() => this.#fn(...props),
+						this.#renderDebounced,
+					)
 
 					// inject the template
-					render(result, this.#shadow)
-
-					// reacting to changes
-					for (const item of seen)
-						this.#tracking.guarantee(
-							item,
-							() => tracker.subscribe(item, async() => this.#renderDebounced()),
-						)
+					render(content, this.#shadow)
 
 					// inject content into light dom
 					if (!situation.isComponent)
@@ -74,18 +78,21 @@ function setupView(settings: ViewSettings) {
 			render(context: ViewContext, props: Props) {
 				this.#params = {context, props}
 				this.#renderNow()
-				return situation.isComponent ? null : this.#element
+				this.#attrWatcher.start()
+				return situation.isComponent
+					? null
+					: this.#element
 			}
 
 			disconnected() {
 				this.#use[_disconnect]()
-				for (const untrack of this.#tracking.values())
-					untrack()
-				this.#tracking.clear()
+				this.#reactor.clear()
+				this.#attrWatcher.stop()
 			}
 
 			reconnected() {
 				this.#use[_reconnect]()
+				this.#attrWatcher.start()
 			}
 		}
 
@@ -122,29 +129,57 @@ function setupView(settings: ViewSettings) {
 			return chain
 		}
 
-		rendy.component = (...props: Props) => class ViewComponent extends HTMLElement {
-			#context = freshViewContext()
-			#directive = directive(
-				make({
-					getElement: () => this,
-					isComponent: true,
-				})
-			)
-			connectedCallback() {
-				this.render(...props)
-			}
-			render(...props: Props) {
-				if (this.isConnected)
-					render(this.#directive(this.#context, props), this)
-			}
-		}
+		rendy.component = <Mix extends {} = {}>(
+				init: (component: Component<Mix>) => void = () => {}
+			) => ({
+			props: (propsFn: (component: Component<Mix>) => Props) => {
+				return class VComponent extends HTMLElement implements Component {
+					static view = rendy
+					#context = freshViewContext()
+					#directive = directive(
+						make({
+							getElement: () => this,
+							isComponent: true,
+						})
+					)
+					#attrWatcher = new AttrWatcher(this, () => this.render())
+					constructor() {
+						super()
+						init(this as any)
+					}
+					connectedCallback() {
+						this.#attrWatcher.start()
+						this.renderNow()
+					}
+					disconnectedCallback() {
+						this.#attrWatcher.stop()
+						this.#reactor.clear()
+					}
+					#reactor = new Reactor()
+					render = debounce(0, () => this.renderNow())
+					renderNow() {
+						if (this.isConnected) {
+							const props = this.#reactor.effect(
+								() => propsFn(this as any),
+								this.render,
+							)
+							render(this.#directive(this.#context, props), this)
+						}
+					}
+				} as any as ComponentClass<Mix, Props>
+			},
+		})
 
 		return rendy
 	}
 
-	view.declare = view
+	view.render = view
 	view.settings = (settings2: Partial<ViewSettings>) => setupView({...settings, ...settings2})
-	view.component = (fn: ComponentFn) => view(use => () => fn(use)).component()
+	view.component = <Mix extends {}>(initFn?: (component: Component<Mix>) => void) => ({
+		props: <Props extends any[]>(propsFn: (component: Component<Mix>) => Props) => ({
+			render: (fn: ViewRenderFn<Props>) => view(fn).component<Mix>(initFn).props(propsFn),
+		}),
+	})
 	return view
 }
 

package/x/demo/demo.bundle.js

@@ -1,11 +1,21 @@
+import { nap, repeat } from "@e280/stz";
 import { dom } from "../dom/dom.js";
 import { DemoView } from "./views/demo.js";
 import { CounterView } from "./views/counter.js";
+import { DivineElement } from "./views/divine.js";
 import { IncrediElement } from "./views/incredi.js";
 dom.in(".demo").render(DemoView());
 dom.register({
     IncrediElement,
-    DemoCounter: CounterView.component(1),
+    DivineElement,
+    DemoCounter: CounterView
+        .component()
+        .props(c => [dom.attrs(c).number.initial ?? 0]),
+});
+const divine = dom("divine-element");
+repeat(async () => {
+    await nap(1000);
+    divine.$speed.value++;
 });
 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,GAAG,EAAC,MAAM,eAAe,CAAA;AACjC,OAAO,EAAC,QAAQ,EAAC,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAA;AAEjD,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAA;AAElC,GAAG,CAAC,QAAQ,CAAC;IACZ,cAAc;IACd,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CACrC,CAAC,CAAA;AAEF,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,EAAE,MAAM,EAAC,MAAM,WAAW,CAAA;AACrC,OAAO,EAAC,GAAG,EAAC,MAAM,eAAe,CAAA;AACjC,OAAO,EAAC,QAAQ,EAAC,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAA;AAEjD,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAA;AAElC,GAAG,CAAC,QAAQ,CAAC;IACZ,cAAc;IACd,aAAa;IACb,WAAW,EAAE,WAAW;SACtB,SAAS,EAAE;SACX,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;CAChD,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,GAAG,CAAgB,gBAAgB,CAAC,CAAA;AAEnD,MAAM,CAAC,KAAK,IAAG,EAAE;IAChB,MAAM,GAAG,CAAC,IAAI,CAAC,CAAA;IACf,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;AACtB,CAAC,CAAC,CAAA;AAEF,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}