@e280/sly 0.2.5 → 0.3.0-10

package/s/_archive/view/index.ts

@@ -0,0 +1,7 @@
+
+export * from "./utils/parts/chain.js"
+export * from "./utils/parts/sly-view.js"
+export * from "./utils/contextualize.js"
+export * from "./types.js"
+export * from "./view.js"
+

package/s/_archive/view/types.ts

@@ -0,0 +1,45 @@
+
+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"
+
+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 ViewProps<V extends View<any>> = (
+	V extends View<infer Props>
+		? Props
+		: never
+)
+
+export type ComponentClass<B extends Constructor<BaseElement>, Props extends any[]> = {
+	view: View<Props>
+	new(): InstanceType<B>
+} & B
+
+export type NakedView<Props extends any[]> = {
+	host: HTMLElement
+	render: (...props: Props) => void
+}
+

package/s/demo/demo.bundle.ts

@@ -1,14 +1,11 @@
 
 import {dom} from "../dom/dom.js"
-import {CounterComponent} from "./views/counter.js"
-import {DemoComponent} from "./views/demo.js"
-import {FastcountElement} from "./views/fastcount.js"
+import {Demo} from "./views/demo.js"
+import {TimeLight} from "./views/time-light.js"
+import {TimeShadow} from "./views/time-shadow.js"
 
-dom.register({
-	DemoComponent,
-	CounterComponent,
-	FastcountElement,
-})
+dom.register({TimeShadow, TimeLight})
 
+dom.render(dom(".demo"), Demo())
 console.log("🦝 sly")
 

package/s/demo/views/counter-light.ts

@@ -0,0 +1,13 @@
+
+import {html} from "lit"
+import {light, useSignal} from "../../view/index.js"
+
+export const CounterLight = light((start: number) => {
+	const $count = useSignal(start)
+	const increment = () => $count.value++
+
+	return html`
+		<button @click="${increment}">${$count()}</button>
+	`
+})
+

package/s/demo/views/counter-shadow.ts

@@ -0,0 +1,16 @@
+
+import {css, html} from "lit"
+import {shadow, useName, useCss, useSignal} from "../../view/index.js"
+
+export const CounterShadow = shadow((start: number) => {
+	useName("counter-shadow")
+	useCss(css`:host{display:inline-block} button{color:cyan}`)
+
+	const $count = useSignal(start)
+	const increment = () => $count.value++
+
+	return html`
+		<button @click="${increment}">${$count()}</button>
+	`
+})
+

package/s/demo/views/demo.ts

@@ -1,34 +1,38 @@
 
 import {css, html} from "lit"
-
-import {view} from "../../view/view.js"
-import {CounterView} from "./counter.js"
 import {LoadersView} from "./loaders.js"
-import {MountingTest} from "./mounting.js"
-import {cssReset} from "../../base/css-reset.js"
+import {CounterLight} from "./counter-light.js"
+import {CounterShadow} from "./counter-shadow.js"
+import {cssReset, shadow, useName, useStyles} from "../../view/index.js"
 
-export class DemoComponent extends (view.component(use => {
-	use.name("demo")
-	use.styles(cssReset, styles)
+export const Demo = shadow(() => {
+	useName("demo")
+	useStyles(cssReset, styles)
 
 	return html`
-		${MountingTest()}
+		<p>light ${CounterLight(123)}</p>
+
+		<p>
+			shadow ${CounterShadow.with({
+				props: [234],
+				attrs: {"data-lol": 555},
+				children: html`<p>hello</p>`,
+			})}
+		</p>
 
-		${CounterView
-			.props(768, 3)
-			.children("view")
-			.render()}
+		<time-shadow></time-shadow>
+		<time-light></time-light>
 
 		${LoadersView()}
 	`
-})) {}
+})
 
 const styles = css`
-:host {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 1em;
-}
+	:host {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1em;
+	}
 `
 

package/s/demo/views/loaders.ts

@@ -1,17 +1,17 @@
 
 import {css, html} from "lit"
-import {Op} from "../../ops/op.js"
-import {view} from "../../view/view.js"
-import {loaders} from "../../loaders/index.js"
-import {cssReset} from "../../base/css-reset.js"
+import {Op} from "../../op/op.js"
+import {shadow} from "../../view/shadow.js"
+import {loaders} from "../../loader/index.js"
+import {cssReset, useName, useOnce, useStyles} from "../../view/index.js"
 
-export const LoadersView = view(use => () => {
-	use.name("loaders")
-	use.styles(cssReset, styles)
+export const LoadersView = shadow(() => {
+	useName("loaders")
+	useStyles(cssReset, styles)
 
-	const op = use.once(() => Op.loading())
+	const op = useOnce(() => Op.loading())
 
-	const library = use.once(() =>
+	const library = useOnce(() =>
 		Object.entries(loaders.anims).map(([key, anim]) => ({
 			key,
 			loader: loaders.make(anim)

package/s/demo/views/time-light.ts

@@ -0,0 +1,19 @@
+
+import {html} from "lit"
+import {cycle, nap} from "@e280/stz"
+import {useMount, useSignal} from "../../view/index.js"
+import {lightElement} from "../../view/elements/light.js"
+
+export class TimeLight extends lightElement(() => {
+	const $time = useSignal(Date.now())
+
+	useMount(() => cycle(async() => {
+		await nap(100)
+		$time(Date.now())
+	}))
+
+	return html`
+		<p>${$time()}</p>
+	`
+}) {}
+

package/s/demo/views/time-shadow.ts

@@ -0,0 +1,22 @@
+
+import {css, html} from "lit"
+import {cycle, nap} from "@e280/stz"
+import {shadowElement} from "../../view/elements/shadow.js"
+import {useCss, useMount, useName, useSignal} from "../../view/index.js"
+
+export class TimeShadow extends shadowElement(() => {
+	useName("time-shadow")
+	useCss(css`:host{display:inline-block} button{color:cyan}`)
+
+	const $time = useSignal(Date.now())
+
+	useMount(() => cycle(async() => {
+		await nap(100)
+		$time(Date.now())
+	}))
+
+	return html`
+		<p>${$time()}</p>
+	`
+}) {}
+

package/s/dom/attrs/attrs.ts

@@ -1,9 +1,9 @@
 
 import {AttrSpec} from "../types.js"
 import {onAttrs} from "./parts/on-attrs.js"
-import {attrSpec} from "./parts/attr-spec.js"
 import {AttrProxies} from "./parts/attr-proxies.js"
 import {attrGet, attrSet} from "./parts/attr-fns.js"
+import {attrSpec, AttrSpecOptions} from "./parts/attr-spec.js"
 
 export function attrs(element: HTMLElement) {
 	const proxies = new AttrProxies(element)
@@ -11,8 +11,8 @@ export function attrs(element: HTMLElement) {
 		strings: proxies.strings,
 		numbers: proxies.numbers,
 		booleans: proxies.booleans,
-		on: (fn: () => void) => onAttrs(element, fn),
-		spec: <A extends AttrSpec>(spec: A) => attrSpec(element, spec),
+		on: (fn: MutationCallback) => onAttrs(element, fn),
+		spec: <A extends AttrSpec>(spec: A, options: AttrSpecOptions = {}) => attrSpec(element, spec, options),
 	}
 }
 

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

@@ -2,10 +2,16 @@
 import {attrGet, attrSet} from "./attr-fns.js"
 import {AttrSpec, AttrTypes} from "../../types.js"
 
+export type AttrSpecOptions = {
+	beforeSet?: (attrKey: string) => void
+	afterSet?: (attrKey: string) => void
+}
+
 /** specify available html attributes and their types and create a proxy accessor */
 export const attrSpec = <A extends AttrSpec>(
 		e: HTMLElement,
 		spec: A,
+		options: AttrSpecOptions = {},
 	) => new Proxy(spec, {
 
 	get: (_target, key: string) => {
@@ -18,11 +24,17 @@ export const attrSpec = <A extends AttrSpec>(
 	},
 
 	set: (_target, key: string, value: any) => {
-		switch (spec[key]) {
-			case String: return attrSet.string(e, key, value)
-			case Number: return attrSet.number(e, key, value)
-			case Boolean: return attrSet.boolean(e, key, value)
-			default: throw new Error(`invalid attribute type for "${key}"`)
+		try {
+			options.beforeSet?.(key)
+			switch (spec[key]) {
+				case String: return attrSet.string(e, key, value)
+				case Number: return attrSet.number(e, key, value)
+				case Boolean: return attrSet.boolean(e, key, value)
+				default: throw new Error(`invalid attribute type for "${key}"`)
+			}
+		}
+		finally {
+			options.afterSet?.(key)
 		}
 	},
 }) as any as AttrTypes<A>

package/s/dom/attrs/parts/on-attrs.ts

@@ -1,6 +1,6 @@
 
 /** respond when any attribute changes on the html element */
-export function onAttrs(element: HTMLElement, fn: () => void) {
+export function onAttrs(element: HTMLElement, fn: MutationCallback) {
 	const observer = new MutationObserver(fn)
 	observer.observe(element, {attributes: true})
 	return () => observer.disconnect()

package/s/dom/dom.ts

@@ -11,7 +11,7 @@ import {register} from "./parts/register.js"
 import {Queryable, Renderable} from "./types.js"
 import {queryAll, queryMaybe, queryRequire} from "./parts/queries.js"
 
-export function dom<E extends Element>(selector: string, container: Queryable = document): E {
+export function dom<E extends HTMLElement>(selector: string, container: Queryable = document) {
 	return queryRequire<E>(selector, container)
 }
 

package/s/index.html.ts

@@ -1,38 +1,35 @@
 
-import {ssg, html} from "@e280/scute"
+import {template, html, socialCard} from "@e280/scute"
 
-const title = "sly"
-const description = "mischievous shadow views"
-const domain = "sly.e280.org"
-const favicon = "/assets/favicon.png"
+export default template(import.meta.url, async orb => html`
+	<!doctype html>
+	<html>
+		<head>
+			<meta charset="utf-8"/>
+			<meta name="viewport" content="width=device-width,initial-scale=1"/>
+			<meta name="darkreader-lock"/>
+			<style>@layer base{html{background:#000}}</style>
 
-export default ssg.page(import.meta.url, async orb => ({
-	title,
-	js: "demo/demo.bundle.min.js",
-	css: "demo/demo.css",
-	favicon,
-	dark: true,
-	socialCard: {
-		themeColor: "#95ff7b",
-		title,
-		description,
-		siteName: "@e280/sly",
-		image: "https://" + domain + favicon,
-	},
+			<title>sly</title>
+			<link rel="icon" href="/assets/favicon.png"/>
+			<link rel="stylesheet" href="${orb.hashurl("demo/demo.css")}"/>
+			<script type="module" src="${orb.hashurl("demo/demo.bundle.min.js")}"></script>
 
-	head: html`
-		<meta name="example" value="whatever"/>
-	`,
-
-	body: html`
-		<img class=icon alt="" src="/assets/favicon.png"/>
-		<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>
-
-		<fastcount-element></fastcount-element>
-		<counter-component start=280 step=2>component</counter-component>
-		<demo-component></demo-component>
-	`,
-}))
+			${socialCard({
+				themeColor: "#95ff7b",
+				title: "sly",
+				description: "mischievous shadow views",
+				siteName: "@e280/sly",
+				image: "https://sly.e280.org/assets/favicon.png",
+			})}
+		</head>
+		<body>
+			<img class=icon alt="" src="/assets/favicon.png"/>
+			<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>
+			<div class="demo"></div>
+		</body>
+	</html>
+`)
 

package/s/index.ts

@@ -1,9 +1,7 @@
 
-export * from "./base/index.js"
 export * from "./dom/index.js"
-export * from "./loaders/index.js"
+export * from "./loader/index.js"
 export * from "./loot/index.js"
-export * from "./ops/index.js"
-export * from "./spa/index.js"
+export * from "./op/index.js"
 export * from "./view/index.js"
 

package/s/{loaders → loader}/index.barrel.ts

@@ -1,6 +1,5 @@
 
 export * as anims from "./parts/anims.js"
-export type * from "./parts/anims.js"
 export * from "./parts/ascii-anim.js"
 export * from "./parts/error-display.js"
 export * from "./make.js"

package/s/{loaders → loader}/index.ts

@@ -1,4 +1,3 @@
 
 export * as loaders from "./index.barrel.js"
-export type * from "./index.barrel.js"
 

package/s/{loaders → loader}/make.ts

@@ -1,7 +1,7 @@
 
 import {Loader} from "./types.js"
 import {earth} from "./parts/anims.js"
-import type {Content} from "../view/types.js"
+import {Content} from "../view/types.js"
 import {ErrorDisplay} from "./parts/error-display.js"
 
 export function make(

package/s/{loaders → loader}/parts/ascii-anim.ts

@@ -1,26 +1,24 @@
 
 import {css} from "lit"
 import {nap, cycle} from "@e280/stz"
-
-import {view} from "../../view/view.js"
 import {Content} from "../../view/types.js"
-import {cssReset} from "../../base/css-reset.js"
+import {cssReset, shadow, useMount, useName, useSignal, useStyles} from "../../view/index.js"
 
 export function makeAsciiAnim(hz: number, frames: string[]): () => Content {
 	return () => AsciiAnim({hz, frames})
 }
 
-export const AsciiAnim = view(use => ({hz, frames}: {
+export const AsciiAnim = shadow(({hz, frames}: {
 		hz: number,
 		frames: string[],
 	}) => {
 
-	use.name("loading")
-	use.styles(cssReset, style)
+	useName("loading")
+	useStyles(cssReset, style)
 
-	const frame = use.signal(0)
+	const frame = useSignal(0)
 
-	use.mount(() => cycle(async() => {
+	useMount(() => cycle(async() => {
 		await nap(1000 / hz)
 		const next = frame.get() + 1
 		frame.set(next >= frames.length ? 0 : next)

package/s/loader/parts/error-display.ts

@@ -0,0 +1,26 @@
+
+import {css, html} from "lit"
+import {shadow} from "../../view/shadow.js"
+import {cssReset, useName, useStyles} from "../../view/index.js"
+
+export const ErrorDisplay = shadow((error: any) => {
+	useName("error")
+	useStyles(cssReset, style)
+
+	if (typeof error === "string")
+		return error
+
+	else if (error instanceof Error)
+		return html`<strong>${error.name}:</strong> <span>${error.message}</span>`
+
+	else
+		return `error`
+})
+
+const style = css`
+	:host {
+		font-family: monospace;
+		color: red;
+	}
+`
+

package/s/{loaders → loader}/types.ts

@@ -1,5 +1,5 @@
 
-import type {Op} from "../ops/op.js"
+import type {Op} from "../op/op.js"
 import type {Content} from "../view/types.js"
 
 export type Loader = <V>(op: Op<V>, ready: (value: V) => Content) => Content

package/s/test.ts

@@ -0,0 +1,5 @@
+
+import {Science} from "@e280/science"
+
+await Science.run({})
+

package/s/view/common/css-reset.ts

@@ -0,0 +1,19 @@
+
+import {css, CSSResultGroup} from "lit"
+
+export const cssReset: CSSResultGroup = css`
+	* {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+
+		scrollbar-width: thin;
+		scrollbar-color: #888 transparent;
+	}
+
+	::-webkit-scrollbar { width: 8px; }
+	::-webkit-scrollbar-track { background: transparent; }
+	::-webkit-scrollbar-thumb { background: #888; border-radius: 1em; }
+	::-webkit-scrollbar-thumb:hover { background: #999; }
+`
+

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

@@ -0,0 +1,14 @@
+
+import {dom} from "../../dom/dom.js"
+
+export class SlyShadow extends HTMLElement {
+	static register() {
+		dom.register({SlyShadow}, {soft: true})
+	}
+
+	connectedCallback() {
+		if (!this.hasAttribute("view"))
+			this.setAttribute("view", "")
+	}
+}
+

package/s/view/elements/light.ts

@@ -0,0 +1,14 @@
+
+import {render} from "lit"
+import {light} from "../light.js"
+import {Content} from "../types.js"
+
+export function lightElement(view: () => Content) {
+	const fn = light(view)
+
+	return class extends HTMLElement {
+		connectedCallback() { render(fn(), this) }
+		disconnectedCallback() { render(null, this) }
+	}
+}
+

package/s/view/elements/shadow.ts

@@ -0,0 +1,52 @@
+
+import {microbounce} from "@e280/stz"
+import {render as litRender} from "lit"
+import {Content} from "../types.js"
+import {ShadowCx} from "../parts/cx.js"
+import {hooks} from "../hooks/plumbing/hooks.js"
+import {Reactivity} from "../parts/reactivity.js"
+import {Hookscope} from "../hooks/plumbing/hookscope.js"
+
+export function shadowElement(view: () => Content) {
+	return class extends HTMLElement {
+		#cx
+		#hookscope
+		#reactivity = new Reactivity()
+		#shadow = this.attachShadow({mode: "open"})
+
+		constructor() {
+			super()
+			const rerender = microbounce(() => {
+				if (!this.isConnected) return
+				const content = this.#renderContent()
+				litRender(content, this.#cx.shadow)
+				this.#cx.doneRender()
+			})
+			this.#cx = new ShadowCx(rerender, this, this.#shadow)
+			this.#hookscope = new Hookscope(this.#cx)
+		}
+
+		#renderContent() {
+			return this.#reactivity.observe(
+				() => hooks.wrap(this.#hookscope, () => view()),
+				this.#cx.render,
+			)
+		}
+
+		render() {
+			litRender(this.#renderContent(), this.#cx.shadow)
+			this.#cx.doneRender()
+		}
+
+		connectedCallback() {
+			this.#hookscope.mounts.remountAll()
+			this.#cx.render()
+		}
+
+		disconnectedCallback() {
+			this.#hookscope.mounts.unmountAll()
+			this.#reactivity.clear()
+		}
+	}
+}
+

package/s/view/hooks/plumbing/hooks.ts

@@ -0,0 +1,28 @@
+
+import {Hookscope} from "./hookscope.js"
+
+export class Hooks {
+	#scopes: Hookscope[] = []
+
+	get scope() {
+		const scope = this.#scopes.at(-1)
+		if (!scope) throw new Error("hooks must be called within a render fn")
+		return scope
+	}
+
+	increment() {
+		const scope = this.scope
+		const position = scope.position++
+		return {scope, position}
+	}
+
+	wrap<Ret>(scope: Hookscope, fn: () => Ret) {
+		scope.position = 0
+		this.#scopes.push(scope)
+		try { return fn() }
+		finally { this.#scopes.pop() }
+	}
+}
+
+export const hooks: Hooks = (globalThis as any)[Symbol.for("e280.hooks")] ??= new Hooks()
+

package/s/view/hooks/plumbing/hookscope.ts

@@ -0,0 +1,12 @@
+
+import {GMap} from "@e280/stz"
+import {Mounts} from "../use-mount.js"
+import {LightCx, ShadowCx} from "../../parts/cx.js"
+
+export class Hookscope {
+	position = 0
+	values = new GMap<number, any>()
+	mounts = new Mounts()
+	constructor(public cx: LightCx | ShadowCx) {}
+}
+