@e280/sly 0.2.5 → 0.3.0-1

package/s/view/light.ts

@@ -0,0 +1,50 @@
+
+import {microbounce} from "@e280/stz"
+
+import {View} from "./types.js"
+import {LightCx} from "./parts/cx.js"
+import {hooks} from "./hooks/plumbing/hooks.js"
+import {Reactivity} from "./parts/reactivity.js"
+import {Hookscope} from "./hooks/plumbing/hookscope.js"
+import {AsyncDirective, directive, Part} from "lit/async-directive.js"
+
+export function light<Props extends any[]>(view: View<Props>) {
+	return directive(class D extends AsyncDirective {
+		#props!: Props
+		#cx = new LightCx(microbounce(() => {
+			if (!this.#props) throw new Error("cannot render before props")
+			if (this.isConnected) {
+				const content = this.render(...this.#props)
+				this.setValue(content)
+				this.#cx.doneRender()
+			}
+		}))
+		#hookscope = new Hookscope(this.#cx)
+		#reactivity = new Reactivity()
+
+		update(part: Part, props: any[]) {
+			const ret = super.update(part, props)
+			if (this.isConnected) this.#cx.doneRender()
+			return ret
+		}
+
+		render(...props: Props) {
+			this.#props = props
+			return this.#reactivity.observe(
+				() => hooks.wrap(this.#hookscope, () => view(...this.#props)),
+				this.#cx.render,
+			)
+		}
+
+		disconnected() {
+			this.#hookscope.mounts.unmountAll()
+			this.#reactivity.clear()
+		}
+
+		reconnected() {
+			this.#hookscope.mounts.remountAll()
+			this.#cx.render()
+		}
+	}) as View<Props>
+}
+

package/s/view/parts/apply-attrs.ts

@@ -0,0 +1,22 @@
+
+import {ViewAttr, ViewAttrs} from "../types.js"
+
+export function applyAttrs(element: HTMLElement, attrs: ViewAttrs) {
+	for (const [name, value] of Object.entries(attrs))
+		applyAttr(element, name, value)
+}
+
+function applyAttr(element: HTMLElement, name: string, value: ViewAttr) {
+	const existing = element.getAttribute(name)
+	const v = coerce(value)
+	if (v === existing) return
+	if (v === null) element.removeAttribute(name)
+	else element.setAttribute(name, v)
+}
+
+function coerce(value: ViewAttr) {
+	if (typeof value === "string") return value
+	else if (typeof value === "number") return value.toString()
+	return value ? "" : null
+}
+

package/s/view/parts/apply-styles.ts

@@ -0,0 +1,21 @@
+
+import {adoptStyles, CSSResultGroup, CSSResultOrNative, getCompatibleStyle} from "lit"
+
+export function applyStyles(shadow: ShadowRoot, styles?: CSSResultGroup) {
+	adoptStyles(shadow, prepareStyles(styles))
+}
+
+function prepareStyles(styles?: CSSResultGroup): Array<CSSResultOrNative> {
+	const elementStyles = []
+
+	if (Array.isArray(styles)) {
+		const set = new Set((styles as Array<unknown>).flat(Infinity).reverse())
+		for (const s of set)
+			elementStyles.unshift(getCompatibleStyle(s as CSSResultOrNative))
+	}
+	else if (styles !== undefined)
+		elementStyles.push(getCompatibleStyle(styles))
+
+	return elementStyles
+}
+

package/s/view/parts/cx.ts

@@ -0,0 +1,26 @@
+
+import {defer} from "@e280/stz"
+
+export class LightCx {
+	count = 0
+	rendered = defer<void>()
+
+	constructor(public render: () => Promise<void>) {}
+
+	doneRender() {
+		this.count++
+		this.rendered.resolve()
+		this.rendered = defer()
+	}
+}
+
+export class ShadowCx extends LightCx {
+	constructor(
+			render: () => Promise<void>,
+			public host: HTMLElement,
+			public shadow: ShadowRoot,
+		) {
+		super(render)
+	}
+}
+

package/s/view/parts/reactivity.ts

@@ -0,0 +1,22 @@
+
+import {tracker} from "@e280/strata"
+
+export class Reactivity {
+	#stoppers: (() => void)[] = []
+
+	clear() {
+		this.#stoppers.forEach(stop => stop())
+		this.#stoppers = []
+	}
+
+	observe<X>(fn: () => X, rerender: () => Promise<void>) {
+		const {seen, result} = tracker.observe(fn)
+		this.clear()
+		for (const item of seen) {
+			const stop = tracker.subscribe(item, rerender)
+			this.#stoppers.push(stop)
+		}
+		return result
+	}
+}
+

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

@@ -0,0 +1,8 @@
+
+export class SlyShadow extends HTMLElement {
+	connectedCallback() {
+		if (!this.hasAttribute("view"))
+			this.setAttribute("view", "")
+	}
+}
+

package/s/view/shadow.ts

@@ -0,0 +1,93 @@
+
+import {microbounce} from "@e280/stz"
+import {render as litRender} from "lit"
+
+import {dom} from "../dom/dom.js"
+import {ShadowCx} from "./parts/cx.js"
+import {SlyShadow} from "./parts/sly-shadow.js"
+import {hooks} from "./hooks/plumbing/hooks.js"
+import {Reactivity} from "./parts/reactivity.js"
+import {applyAttrs} from "./parts/apply-attrs.js"
+import {Hookscope} from "./hooks/plumbing/hookscope.js"
+import {View, Placement, ShadowSetup, ShadowView} from "./types.js"
+import {AsyncDirective, directive, PartInfo} from "lit/async-directive.js"
+
+export function shadow<Props extends any[]>(view: View<Props>) {
+	const setupFn = (): ShadowSetup => {
+		dom.register({SlyShadow}, {soft: true})
+		const host = document.createElement("sly-shadow")
+		const shadow = host.attachShadow({mode: "open"})
+		return {host, shadow}
+	}
+	return rawShadow(setupFn, view)
+}
+
+shadow.config = (setupFn: () => ShadowSetup) => (
+	<Props extends any[]>(view: View<Props>) => (
+		rawShadow(setupFn, view)
+	)
+)
+
+export function rawShadow<Props extends any[]>(
+		setup: () => ShadowSetup,
+		view: View<Props>,
+	) {
+
+	const directiveFn = directive(class extends AsyncDirective {
+		#cx
+		#hookscope
+		#props!: Props
+		#reactivity = new Reactivity()
+
+		constructor(part: PartInfo) {
+			super(part)
+			const {host, shadow} = setup()
+			const rerender = microbounce(() => {
+				if (!this.#props) throw new Error("cannot render before props")
+				if (!this.isConnected) return
+				const content = this.#renderContent(this.#props)
+				litRender(content, this.#cx.shadow)
+				this.#cx.doneRender()
+			})
+			this.#cx = new ShadowCx(rerender, host, shadow)
+			this.#hookscope = new Hookscope(this.#cx)
+		}
+
+		#renderContent(props: Props) {
+			this.#props = props
+			return this.#reactivity.observe(
+				() => hooks.wrap(this.#hookscope, () => view(...this.#props)),
+				this.#cx.render,
+			)
+		}
+
+		render({props, children, attrs}: Placement<Props>) {
+			const {host} = this.#cx
+			if (!this.isConnected) return host
+			if (attrs) applyAttrs(host, attrs)
+			litRender(children, this.#cx.host)
+			litRender(this.#renderContent(props), this.#cx.shadow)
+			this.#cx.doneRender()
+			return host
+		}
+
+		disconnected() {
+			this.#hookscope.mounts.unmountAll()
+			this.#reactivity.clear()
+		}
+
+		reconnected() {
+			this.#hookscope.mounts.remountAll()
+			this.#cx.render()
+		}
+	}) as ShadowView<[Placement<Props>]>
+
+	function shadowView(...props: Props) {
+		return directiveFn({props})
+	}
+
+	shadowView.with = directiveFn
+
+	return shadowView as ShadowView<Props>
+}
+

package/s/view/types.ts

@@ -1,45 +1,26 @@
 
 import {TemplateResult} from "lit"
-import {Constructor} from "@e280/stz"
-import {DirectiveResult} from "lit/directive.js"
-
-import {Use} from "../base/use.js"
-import {BaseElement} from "../base/element.js"
-import {ViewChain} from "./utils/parts/chain.js"
+import {DirectiveResult} from "lit/async-directive.js"
 
 export type Content = TemplateResult | DirectiveResult | HTMLElement | string | null | undefined | void | Content[]
 
-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>
-	transmute: <PropsB extends any[]>(convert: (...propsB: PropsB) => Props) => View<PropsB>
-	component: <B extends Constructor<BaseElement>>(Base?: B) => {
-		props: (propFn: (component: InstanceType<B>) => Props) => (
-			ComponentClass<B, Props>
-		)
-	}
-	naked: (host: HTMLElement) => NakedView<Props>
-}
+export type View<Props extends any[]> = (...props: Props) => Content
 
-export type ViewProps<V extends View<any>> = (
-	V extends View<infer Props>
-		? Props
-		: never
-)
+export type ViewAttr = string | number | boolean
+export type ViewAttrs = Record<string, ViewAttr>
 
-export type ComponentClass<B extends Constructor<BaseElement>, Props extends any[]> = {
-	view: View<Props>
-	new(): InstanceType<B>
-} & B
+export type Placement<Props extends any[]> = {
+	props: Props
+	children?: Content
+	attrs?: ViewAttrs
+}
+
+export type ShadowView<Props extends any[]> = View<Props> & {
+	with: (placement: Placement<Props>) => Content
+}
 
-export type NakedView<Props extends any[]> = {
+export type ShadowSetup = {
 	host: HTMLElement
-	render: (...props: Props) => void
+	shadow: ShadowRoot
 }
 

package/x/demo/demo.bundle.js

@@ -1,11 +1,5 @@
 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,
-});
+import { Demo } from "./views/demo.js";
+dom.in(".demo").render(Demo());
 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,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"}
+{"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,IAAI,EAAC,MAAM,iBAAiB,CAAA;AAEpC,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAA;AAC9B,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}