@e280/sly 0.2.4 → 0.3.0-1

package/s/{base → _archive/base}/element.ts

@@ -1,5 +1,6 @@
 
 import {debounce} from "@e280/stz"
+import type {RootPart} from "lit-html"
 import {CSSResultGroup} from "lit"
 
 import {dom} from "../dom/dom.js"
@@ -18,6 +19,7 @@ export class BaseElement extends HTMLElement {
 	#mountCount = 0
 	#reactor = new Reactor()
 	#attrWatcher = new AttrWatcher(this, () => this.update())
+	#part?: RootPart
 
 	/** create the shadow root. override this if you want to change the shadow root settings. */
 	createShadow() {
@@ -41,7 +43,7 @@ export class BaseElement extends HTMLElement {
 	/** immediately perform a fresh render into the shadow root. */
 	updateNow = () => {
 		this.#use[_wrap](() => {
-			dom.render(
+			this.#part = dom.render(
 				this.shadow,
 				this.#reactor.effect(
 					() => this.render(this.#use),
@@ -62,15 +64,16 @@ export class BaseElement extends HTMLElement {
 		}
 		else {
 			this.#use[_reconnect]()
+			this.#part?.setConnected(true)
 		}
 		this.#attrWatcher.start()
 		this.#mountCount++
 	}
 
 	disconnectedCallback() {
+		this.#part?.setConnected(false)
 		this.#use[_disconnect]()
 		this.#reactor.clear()
 		this.#attrWatcher.stop()
 	}
 }
-

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/{view → _archive/view}/utils/parts/capsule.ts

@@ -1,4 +1,5 @@
 
+import {RootPart} from "lit"
 import {debounce} from "@e280/stz"
 import {ViewFn} from "../../types.js"
 import {dom} from "../../../dom/dom.js"
@@ -17,6 +18,8 @@ export class ViewCapsule<Props extends any[]> {
 	#shadow: ShadowRoot
 	#context!: ViewContext<Props>
 	#attrWatcher: AttrWatcher
+	#partShadow?: RootPart
+	#partElement?: RootPart
 
 	constructor(
 			host: HTMLElement,
@@ -47,8 +50,8 @@ export class ViewCapsule<Props extends any[]> {
 				() => this.#renderDebounced(),
 			)
 			attrSet.entries(this.#element, this.#context.attrs)
-			dom.render(this.#shadow, content)
-			dom.render(this.#element, this.#context.children)
+			this.#partShadow = dom.render(this.#shadow, content)
+			this.#partElement = dom.render(this.#element, this.#context.children)
 			this.#attrWatcher.start()
 		})
 	}
@@ -56,6 +59,8 @@ export class ViewCapsule<Props extends any[]> {
 	#renderDebounced = debounce(0, this.#renderNow)
 
 	disconnected() {
+		this.#partShadow?.setConnected(false)
+		this.#partElement?.setConnected(false)
 		this.#use[_disconnect]()
 		this.#reactor.clear()
 		this.#attrWatcher.stop()
@@ -64,6 +69,8 @@ export class ViewCapsule<Props extends any[]> {
 	reconnected() {
 		this.#use[_reconnect]()
 		this.#attrWatcher.start()
+		this.#partShadow?.setConnected(true)
+		this.#partElement?.setConnected(true)
 	}
 }
 

package/s/demo/demo.bundle.ts

@@ -1,14 +1,7 @@
 
 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")
 

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,29 +1,35 @@
 
 import {css, html} from "lit"
-
-import {view} from "../../view/view.js"
-import {CounterView} from "./counter.js"
 import {LoadersView} from "./loaders.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 const Demo = shadow(() => {
+	useName("demo")
+	useStyles(cssReset, styles)
 
-export class DemoComponent extends (view.component(use => {
-	use.name("demo")
-	use.styles(cssReset, styles)
 	return html`
-		${CounterView
-			.props(768, 3)
-			.children("view")
-			.render()}
+		<p>light ${CounterLight(123)}</p>
+
+		<p>
+			shadow ${CounterShadow.with({
+				props: [234],
+				attrs: {"data-lol": 555},
+				children: html`<p>hello</p>`,
+			})}
+		</p>
+
 		${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 {shadow} from "../../view/shadow.js"
 import {loaders} from "../../loaders/index.js"
-import {cssReset} from "../../base/css-reset.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/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 "./loot/index.js"
 export * from "./ops/index.js"
-export * from "./spa/index.js"
 export * from "./view/index.js"
 

package/s/loaders/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/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/loaders/parts/error-display.ts

@@ -1,11 +1,11 @@
 
 import {css, html} from "lit"
-import {view} from "../../view/view.js"
-import {cssReset} from "../../base/css-reset.js"
+import {shadow} from "../../view/shadow.js"
+import {cssReset, useName, useStyles} from "../../view/index.js"
 
-export const ErrorDisplay = view(use => (error: any) => {
-	use.name("error")
-	use.styles(cssReset, style)
+export const ErrorDisplay = shadow((error: any) => {
+	useName("error")
+	useStyles(cssReset, style)
 
 	if (typeof error === "string")
 		return error
@@ -18,9 +18,9 @@ export const ErrorDisplay = view(use => (error: any) => {
 })
 
 const style = css`
-:host {
-	font-family: monospace;
-	color: red;
-}
+	:host {
+		font-family: monospace;
+		color: red;
+	}
 `
 

package/s/tests.test.ts

@@ -1,8 +1,5 @@
 
 import {Science} from "@e280/science"
-import spa from "./spa/spa.test.js"
 
-await Science.run({
-	spa,
-})
+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/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) {}
+}
+

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.value = value
+		return dispose
+	})
+
+	return ref.value
+}
+

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 "../../ops/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>(value: Value) {
+	return useOnce(() => new Ref(value))
+}
+
+export class Ref<Value> {
+	constructor(public value: 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))
+}
+