@e280/sly 0.2.5 → 0.3.0-10

package/s/view/hooks/use-attrs.ts

@@ -0,0 +1,28 @@
+
+import {useRef} from "./use-ref.js"
+import {dom} from "../../dom/dom.js"
+import {useOnce} from "./use-once.js"
+import {useMount} from "./use-mount.js"
+import {AttrSpec} from "../../dom/types.js"
+import {useHost, useRender, useRendered} from "./use-cx.js"
+
+export function useAttrs<A extends AttrSpec>(spec: A) {
+	const host = useHost()
+	const rerender = useRender()
+	const ourChanges = useRef(new Set<string>())
+
+	useMount(() => dom.attrs(host).on(records => {
+		for (const record of records) {
+			if (ourChanges.current.has(record.attributeName!)) continue
+			rerender()
+			break
+		}
+	}))
+
+	useRendered().then(() => ourChanges.current.clear())
+
+	return useOnce(() => dom.attrs(host).spec(spec, {
+		beforeSet: key => ourChanges.current.add(key),
+	}))
+}
+

package/s/view/hooks/use-css.ts

@@ -0,0 +1,14 @@
+
+import {CSSResultGroup} from "lit"
+import {useShadow} from "./use-cx.js"
+import {useOnce} from "./use-once.js"
+import {applyStyles} from "../parts/apply-styles.js"
+
+/** attach stylesheets to the shadow root */
+export function useCss(...styles: CSSResultGroup[]) {
+	const shadow = useShadow()
+	useOnce(() => applyStyles(shadow, styles))
+}
+
+export const useStyles = useCss
+

package/s/view/hooks/use-cx.ts

@@ -0,0 +1,41 @@
+
+import {ShadowCx} from "../parts/cx.js"
+import {hooks} from "./plumbing/hooks.js"
+
+function useCx() {
+	const {scope} = hooks.increment()
+	return scope.cx
+}
+
+function useShadowCx() {
+	const cx = useCx()
+	if (!(cx instanceof ShadowCx))
+		throw new Error("this hook only works on shadow views (but was called in a light view)")
+	return cx
+}
+
+/** return the current count of how many times this view has been rendered (starts at 0) */
+export function useCount() {
+	return useCx().count
+}
+
+/** return a function that triggers the view to rerender */
+export function useRender() {
+	return useCx().render
+}
+
+/** return a promise that resolves after the next render is complete */
+export function useRendered() {
+	return useCx().rendered.promise
+}
+
+/** return the shadow view's host element */
+export function useHost() {
+	return useShadowCx().host
+}
+
+/** return the shadow root */
+export function useShadow() {
+	return useShadowCx().shadow
+}
+

package/s/view/hooks/use-life.ts

@@ -0,0 +1,17 @@
+
+import {useRef} from "./use-ref.js"
+import {useMount} from "./use-mount.js"
+
+/** mount/unmount lifecycle, but also return a value */
+export function useLife<Value>(fn: () => [value: Value, dispose: () => void]) {
+	const ref = useRef<Value>(undefined as Value)
+
+	useMount(() => {
+		const [value, dispose] = fn()
+		ref.current = value
+		return dispose
+	})
+
+	return ref.current
+}
+

package/s/view/hooks/use-mount.ts

@@ -0,0 +1,30 @@
+
+import {useOnce} from "./use-once.js"
+import {hooks} from "./plumbing/hooks.js"
+
+export function useMount(fn: () => () => void) {
+	const {scope} = hooks.increment()
+	return useOnce(() => scope.mounts.mount(fn))
+}
+
+export class Mounts {
+	#mounters: (() => () => void)[] = []
+	#unmounters: (() => void)[] = []
+
+	mount(mount: () => () => void) {
+		this.#mounters.push(mount)
+		this.#unmounters.push(mount())
+	}
+
+	unmountAll() {
+		for (const unmount of this.#unmounters)
+			unmount()
+		this.#unmounters = []
+	}
+
+	remountAll() {
+		for (const mount of this.#mounters)
+			this.#unmounters.push(mount())
+	}
+}
+

package/s/view/hooks/use-name.ts

@@ -0,0 +1,10 @@
+
+import {useHost} from "./use-cx.js"
+import {useOnce} from "./use-once.js"
+
+/** sets the host element's "data-view" attribute */
+export function useName(name = "") {
+	const host = useHost()
+	useOnce(() => host.setAttribute("view", name))
+}
+

package/s/view/hooks/use-once.ts

@@ -0,0 +1,9 @@
+
+import {hooks} from "./plumbing/hooks.js"
+
+/** run the fn only one time */
+export function useOnce<Value>(fn: () => Value) {
+	const {scope, position} = hooks.increment()
+	return scope.values.guarantee(position, fn) as Value
+}
+

package/s/view/hooks/use-op.ts

@@ -0,0 +1,12 @@
+
+import {Op} from "../../op/op.js"
+import {useOnce} from "./use-once.js"
+
+export function useOp<Value>(fn: () => Promise<Value>) {
+	return useOnce(() => Op.load(fn))
+}
+
+export function useOpPromise<Value>(promise: Promise<Value>) {
+	return useOnce(() => Op.promise(promise))
+}
+

package/s/view/hooks/use-ref.ts

@@ -0,0 +1,11 @@
+
+import {useOnce} from "./use-once.js"
+
+export function useRef<Value>(initial: Value) {
+	return useOnce(() => new Ref(initial))
+}
+
+export class Ref<Value> {
+	constructor(public current: Value) {}
+}
+

package/s/view/hooks/use-signal.ts

@@ -0,0 +1,16 @@
+
+import {signal} from "@e280/strata"
+import {useOnce} from "./use-once.js"
+
+export function useSignal<Value>(value: Value) {
+	return useOnce(() => signal(value))
+}
+
+export function useDerived<Value>(fn: () => Value) {
+	return useOnce(() => signal.derived(fn))
+}
+
+export function useLazy<Value>(fn: () => Value) {
+	return useOnce(() => signal.lazy(fn))
+}
+

package/s/view/hooks/use-state.ts

@@ -0,0 +1,20 @@
+
+import {useRef} from "./use-ref.js"
+import {useRender} from "./use-cx.js"
+
+export function useState<Value>(value: Value) {
+	const render = useRender()
+	const ref = useRef(value)
+
+	const set = (next: Value | ((prev: Value) => Value)) => {
+		const value = typeof next === "function"
+			? (next as (prev: Value) => Value)(ref.current)
+			: next
+		if (Object.is(value, ref.current)) return
+		ref.current = value
+		render()
+	}
+
+	return [ref.current, set] as const
+}
+

package/s/view/hooks/use-wake.ts

@@ -0,0 +1,8 @@
+
+import {useLife} from "./use-life.js";
+
+/** run the fn whenever the view is mounted */
+export function useWake<Value>(fn: () => Value) {
+	return useLife(() => [fn(), () => {}])
+}
+

package/s/view/index.ts

@@ -1,7 +1,25 @@
 
-export * from "./utils/parts/chain.js"
-export * from "./utils/parts/sly-view.js"
-export * from "./utils/contextualize.js"
+export * from "./common/css-reset.js"
+export * from "./common/sly-shadow.js"
+
+export * from "./elements/light.js"
+export * from "./elements/shadow.js"
+
+export * from "./hooks/use-attrs.js"
+export * from "./hooks/use-css.js"
+export * from "./hooks/use-cx.js"
+export * from "./hooks/use-life.js"
+export * from "./hooks/use-mount.js"
+export * from "./hooks/use-name.js"
+export * from "./hooks/use-once.js"
+export * from "./hooks/use-op.js"
+export * from "./hooks/use-ref.js"
+export * from "./hooks/use-signal.js"
+export * from "./hooks/use-state.js"
+export * from "./hooks/use-cx.js"
+export * from "./hooks/use-wake.js"
+
+export * from "./light.js"
+export * from "./shadow.js"
 export * from "./types.js"
-export * from "./view.js"
 

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

@@ -0,0 +1,93 @@
+
+import {microbounce} from "@e280/stz"
+import {render as litRender} from "lit"
+
+import {ShadowCx} from "./parts/cx.js"
+import {hooks} from "./hooks/plumbing/hooks.js"
+import {SlyShadow} from "./common/sly-shadow.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 shadowSetup(): ShadowSetup {
+	SlyShadow.register()
+	const host = document.createElement("sly-shadow")
+	const shadow = host.attachShadow({mode: "open"})
+	return {host, shadow}
+}
+
+export function shadow<Props extends any[]>(view: View<Props>) {
+	return rawShadow(shadowSetup, view)
+}
+
+shadow.setup = (setup: () => ShadowSetup) => (
+	<Props extends any[]>(view: View<Props>) => (
+		rawShadow(setup, view)
+	)
+)
+
+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,8 @@
 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";
+import { TimeLight } from "./views/time-light.js";
+import { TimeShadow } from "./views/time-shadow.js";
+dom.register({ TimeShadow, TimeLight });
+dom.render(dom(".demo"), 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;AACpC,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAA;AAEjD,GAAG,CAAC,QAAQ,CAAC,EAAC,UAAU,EAAE,SAAS,EAAC,CAAC,CAAA;AAErC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;AAChC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}