@e280/sly 0.2.0-8 → 0.2.0

package/s/spa/plumbing/primitives.ts

@@ -0,0 +1,85 @@
+
+import {ev, ob} from "@e280/stz"
+import {Op} from "../../ops/op.js"
+import {ResolvedRoute, Route, Params, Routes} from "./types.js"
+
+export function eraseWindowHash() {
+	const {pathname, search} = window.location
+	history.replaceState(null, "", pathname + search)
+}
+
+export function normalizeHash(hash: string) {
+	const homeEquivalents = [/^$/, /^#$/, /^#\/$/]
+	return (homeEquivalents.some(regex => regex.test(hash)))
+		? "#/"
+		: hash
+}
+
+export class HashNormalizer {
+	constructor(public location: Location) {}
+
+	get hash() {
+		const hash = normalizeHash(this.location.hash)
+		if (hash === "#/") eraseWindowHash()
+		return hash
+	}
+
+	set hash(hash: string) {
+		this.location.hash = hash
+	}
+}
+
+export class Navigable<P extends any[] = any[]> {
+	static all<R extends Routes>(
+			routes: R,
+			getRoute: () => Route | null,
+			navigate: (hash: string) => Promise<ResolvedRoute>,
+		): {[K in keyof R]: Navigable<Params<R[K]>>} {
+
+		return ob(routes).map(route => new this(
+			route,
+			() => (getRoute() === route),
+			async(...params: any[]) => navigate(route.hasher.make(...params)),
+		)) as any
+	}
+
+	constructor(
+		public route: Route<P>,
+		private isActive: () => boolean,
+		public go: (...params: P) => Promise<ResolvedRoute<P>>,
+	) {}
+
+	get active() {
+		return this.isActive()
+	}
+
+	hash(...params: P) {
+		return this.route.hasher.make(...params)
+	}
+}
+
+export function resolveRoute<R extends Routes>(
+		hash: string,
+		routes: R,
+	): ResolvedRoute | null {
+
+	for (const key in routes) {
+		const route = routes[key]
+		const params = route.hasher.parse(hash)
+		if (params) {
+			return {
+				key,
+				route,
+				params,
+				op: Op.promise(route.fn(...params))
+			}
+		}
+	}
+
+	return null
+}
+
+export function onHashChange(fn: (event: HashChangeEvent) => void) {
+	return ev(window, {hashchange: fn})
+}
+

package/s/spa/plumbing/router-core.ts

@@ -0,0 +1,49 @@
+
+import {signal} from "@e280/strata"
+import type {Content} from "../../view/types.js"
+import {Navigable, normalizeHash, resolveRoute} from "./primitives.js"
+import {Hashbearer, Navigables, ResolvedRoute, Routes} from "./types.js"
+
+export class RouterCore<R extends Routes> {
+	readonly nav: Navigables<R>
+	readonly $resolved = signal<ResolvedRoute | null>(null)
+
+	constructor(
+			public readonly routes: R,
+			public readonly location: Hashbearer,
+		) {
+
+		this.nav = Navigable.all(
+			routes,
+			() => this.route,
+			async hash => {
+				this.location.hash = hash
+				const resolved = await this.refresh()
+				if (!resolved) throw new Error(`route failed "${hash}"`)
+				return resolved
+			},
+		)
+	}
+
+	get hash() {
+		return normalizeHash(this.location.hash)
+	}
+
+	get content(): Content | null {
+		return this.$resolved.get()?.op.value ?? null
+	}
+
+	get route() {
+		return this.$resolved.get()?.route ?? null
+	}
+
+	async refresh(hash?: string) {
+		if (hash !== undefined) this.location.hash = hash
+		hash = this.hash
+		const resolved = resolveRoute(hash, this.routes)
+		await this.$resolved.set(resolved)
+		await resolved?.op
+		return resolved
+	}
+}
+

package/s/spa/plumbing/types.ts

@@ -0,0 +1,45 @@
+
+import type {Op} from "../../ops/op.js"
+import type {Navigable} from "./primitives.js"
+import type {Content} from "../../view/types.js"
+import type {Loader} from "../../loaders/types.js"
+
+export type RouterOptions<R extends Routes> = {
+	routes: R
+	auto?: boolean
+	location?: Hashbearer
+	loader?: Loader
+	notFound?: () => Content
+}
+
+export type Hashbearer = {hash: string}
+
+export type Hasher<Params extends any[]> = {
+	parse: (hash: string) => (Params | null)
+	make: (...params: Params) => string
+}
+
+export type Route<P extends any[] = any[]> = {
+	hasher: Hasher<P>
+	fn: (...params: P) => Promise<Content>
+}
+
+export type Routes = {[key: string]: Route}
+
+export type Params<X extends (Route | Navigable)> = (
+	X extends Route<infer P> ? P :
+	X extends Navigable<infer P> ? P :
+	never
+)
+
+export type ResolvedRoute<P extends any[] = any[]> = {
+	key: string
+	route: Route<P>
+	params: P
+	op: Op<Content>
+}
+
+export type Navigables<R extends Routes> = {
+	[K in keyof R]: Navigable<Params<R[K]>>
+}
+

package/s/spa/router.ts

@@ -0,0 +1,49 @@
+
+import {disposer} from "@e280/stz"
+import {Content} from "../view/types.js"
+import {Loader} from "../loaders/types.js"
+import {loaders} from "../loaders/index.js"
+import {RouterCore} from "./plumbing/router-core.js"
+import {RouterOptions, Routes} from "./plumbing/types.js"
+import {HashNormalizer, onHashChange} from "./plumbing/primitives.js"
+
+export class Router<R extends Routes> extends RouterCore<R> {
+	loader: Loader
+	notFound: () => Content
+	readonly dispose = disposer()
+	#lastHash: string
+
+	constructor(options: RouterOptions<R>) {
+		super(
+			options.routes,
+			options.location ?? new HashNormalizer(window.location),
+		)
+		const {auto = true} = options
+		this.loader = options.loader ?? loaders.make()
+		this.notFound = options.notFound ?? (() => null)
+		this.#lastHash = this.hash
+		if (auto) {
+			this.listen()
+			this.refresh()
+		}
+	}
+
+	render() {
+		const resolved = this.$resolved.get()
+		return resolved === null
+			? this.notFound()
+			: this.loader(resolved.op, content => content)
+	}
+
+	listen() {
+		const dispose = onHashChange(() => {
+			const hash = this.hash
+			const isChanged = hash !== this.#lastHash
+			this.#lastHash = hash
+			if (isChanged) this.refresh()
+		})
+		this.dispose.schedule(dispose)
+		return dispose
+	}
+}
+

package/s/spa/spa.test.ts

@@ -0,0 +1,91 @@
+
+import {Science, test, expect} from "@e280/science"
+import {route} from "./plumbing/braces.js"
+import {Routes} from "./plumbing/types.js"
+import {RouterCore} from "./plumbing/router-core.js"
+
+async function setup<R extends Routes>(routes: R) {
+	const location = {hash: ""}
+	const router = new RouterCore(routes, location)
+	return {location, router}
+}
+
+export default Science.suite({
+	inits: Science.suite({
+		"#/": test(async() => {
+			const {location, router} = await setup({
+				home: route("#/", async() => "123"),
+			})
+			expect(router.content).is(null)
+			location.hash = "#/"
+			await router.refresh()
+			expect(router.content).is("123")
+		}),
+
+		"#/hello/world": test(async() => {
+			const {location, router} = await setup({
+				helloWorld: route("#/hello/world", async() => "123"),
+			})
+			expect(router.content).is(null)
+			location.hash = "#/hello/world"
+			await router.refresh()
+			expect(router.content).is("123")
+		}),
+
+		"#/item/a123": test(async() => {
+			const {location, router} = await setup({
+				item: route("#/item/{id}", async({id}) => `content ${id}`),
+			})
+			location.hash = "#/item/a123"
+			await router.refresh()
+			expect(router.content).is("content a123")
+		}),
+
+		"#/item/a123/lol should miss": test(async() => {
+			const {location, router} = await setup({
+				item: route("#/item/{id}", async({id}) => `content ${id}`),
+			})
+			location.hash = "#/item/a123/lol"
+			await router.refresh()
+			expect(router.content).is(null)
+		}),
+
+		"#/left/{mid}/right extraction": test(async() => {
+			const {location, router} = await setup({
+				item: route("#/left/{mid}/right", async({mid}) => `content ${mid}`),
+			})
+			location.hash = "#/left/middle/right"
+			await router.refresh()
+			expect(router.content).is("content middle")
+		}),
+
+		"#/not-found-lol": test(async() => {
+			const {location, router} = await setup({
+				helloWorld: route("#/hello/world", async() => "123"),
+			})
+			location.hash = "#/not-found-lol"
+			await router.refresh()
+			expect(router.content).is(null)
+		}),
+	}),
+
+	nav: Science.suite({
+		"home to item and back": test(async() => {
+			const {location, router} = await setup({
+				home: route("#/", async() => `home`),
+				item: route("#/item/{id}", async({id}) => `item ${id}`),
+			})
+			location.hash = "#/"
+
+			await router.refresh()
+			expect(router.content).is("home")
+
+			await router.nav.item.go({id: "x234"})
+			expect(router.content).is("item x234")
+
+			await router.nav.home.go()
+			expect(router.content).is("home")
+		}),
+	}),
+})
+

package/s/tests.test.ts

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

package/s/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/view/types.ts

@@ -0,0 +1,39 @@
+
+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>
+		)
+	}
+}
+
+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
+

package/s/view/utils/contextualize.ts

@@ -0,0 +1,45 @@
+
+import {DropFirst, ob} from "@e280/stz"
+import {ComponentClass, View, ViewProps} from "../types.js"
+
+export function contextualizeView<C, V extends View<any>>(
+		context: C,
+		view: V,
+	): View<DropFirst<ViewProps<V>>> {
+	return view.transmute((...p: any[]) => [context, ...p]) as any
+}
+
+export function contextualizeViews<C, Vs extends Record<string, View<any>>>(
+		context: C,
+		views: Vs,
+	): {[K in keyof Vs]: View<DropFirst<ViewProps<Vs[K]>>>} {
+
+	return ob(views)
+		.map(view => contextualizeView(context, view))
+}
+
+export function getViews<
+		Cs extends Record<string, ComponentClass<any, any>>
+	>(components: Cs) {
+
+	return ob(components).map(C => C.view as any) as {
+		[K in keyof Cs]: Cs[K]["view"]
+	}
+}
+
+export function contextualizeComponents<
+		C,
+		Cs extends Record<string, ComponentClass<any, any>>
+	>(context: C, originalComponents: Cs) {
+
+	return ob(originalComponents).map((Cons: any) => class extends Cons {
+		context = context
+		static view = contextualizeView(context, super.view) as any
+	}) as any as {
+		[K in keyof Cs]: {
+			view: View<DropFirst<ViewProps<Cs[K]["view"]>>>
+			new(): InstanceType<{context: C} & Cs[K]>
+		} & Cs[K]
+	}
+}
+

package/s/view/utils/make-component.ts

@@ -0,0 +1,34 @@
+
+import {Constructor} from "@e280/stz"
+import {Use} from "../../base/use.js"
+import {makeView} from "./make-view.js"
+import {BaseElement} from "../../base/element.js"
+import {Reactor} from "../../base/utils/reactor.js"
+import {ComponentClass, ViewFn} from "../types.js"
+
+/** make a component from a BaseElement and a view. */
+export function makeComponent<B extends Constructor<BaseElement>, Props extends any[]>(
+		settings: ShadowRootInit,
+		Base: B,
+		propFn: (component: InstanceType<B>) => Props,
+		viewFn: ViewFn<Props>,
+	) {
+
+	return class Component extends Base {
+		static view = makeView(viewFn, settings)
+		#reactor = new Reactor()
+
+		createShadow() {
+			return this.attachShadow(settings)
+		}
+
+		render(use: Use) {
+			// reactor is tracking the propFn
+			return viewFn(use)(...this.#reactor.effect(
+				() => propFn(this as any),
+				() => this.update(),
+			))
+		}
+	} as any as ComponentClass<B, Props>
+}
+

package/s/view/utils/make-view.ts

@@ -0,0 +1,48 @@
+
+import {Constructor} from "@e280/stz"
+import {DirectiveResult} from "lit/async-directive.js"
+import {View, ViewFn} from "../types.js"
+import {ViewChain} from "./parts/chain.js"
+import {BaseElement} from "../../base/element.js"
+import {ViewContext} from "./parts/context.js"
+import {makeComponent} from "./make-component.js"
+import {makeViewDirective} from "./parts/directive.js"
+
+export function makeView<Props extends any[]>(
+		viewFn: ViewFn<Props>,
+		settings: ShadowRootInit,
+	): View<Props> {
+
+	const renderDirective = makeViewDirective(viewFn, settings)
+
+	function v(...props: Props): DirectiveResult {
+		return renderDirective(new ViewContext(props))
+	}
+
+	v.props = (...props: Props) => new ViewChain(
+		new ViewContext(props),
+		renderDirective,
+	)
+
+	v.transmute = <PropsB extends any[]>(convert: (...propsB: PropsB) => Props) => {
+		const viewFnB: ViewFn<PropsB> = use => {
+			const viewFnA2 = viewFn(use)
+			return (...propsB) => viewFnA2(...convert(...propsB))
+		}
+		return makeView<PropsB>(viewFnB, settings)
+	}
+
+	v.component = <B extends Constructor<BaseElement>>(Base: B = BaseElement as any) => ({
+		props: (propFn: (component: InstanceType<B>) => Props) => (
+			makeComponent<B, Props>(
+				settings,
+				Base,
+				propFn,
+				viewFn,
+			)
+		)
+	})
+
+	return v
+}
+

package/s/view/utils/parts/capsule.ts

@@ -0,0 +1,67 @@
+
+import {debounce} from "@e280/stz"
+import {ViewFn} from "../../types.js"
+import {SlyView} from "./sly-view.js"
+import {dom} from "../../../dom/dom.js"
+import {ViewContext} from "./context.js"
+import {Reactor} from "../../../base/utils/reactor.js"
+import {attrSet} from "../../../dom/attrs/parts/attr-fns.js"
+import {AttrWatcher} from "../../../base/utils/attr-watcher.js"
+import {_disconnect, _reconnect, _wrap, Use} from "../../../base/use.js"
+
+/** controls the rendering of view context into an element. */
+export class ViewCapsule<Props extends any[]> {
+	#element = SlyView.make()
+	#reactor = new Reactor()
+
+	#use: Use
+	#shadow: ShadowRoot
+	#context!: ViewContext<Props>
+	#attrWatcher = new AttrWatcher(this.#element, () => this.#renderDebounced())
+
+	constructor(
+			private viewFn: ViewFn<Props>,
+			private settings: ShadowRootInit,
+		) {
+		this.#shadow = this.#element.attachShadow(this.settings)
+		this.#use = new Use(
+			this.#element,
+			this.#shadow,
+			this.#renderNow,
+			this.#renderDebounced,
+		)
+	}
+
+	update(context: ViewContext<Props>) {
+		this.#context = context
+		this.#renderNow()
+		return this.#element
+	}
+
+	#renderNow = () => {
+		this.#use[_wrap](() => {
+			const content = this.#reactor.effect(
+				() => this.viewFn(this.#use)(...this.#context.props),
+				() => this.#renderDebounced(),
+			)
+			attrSet.entries(this.#element, this.#context.attrs)
+			dom.render(this.#shadow, content)
+			dom.render(this.#element, this.#context.children)
+			this.#attrWatcher.start()
+		})
+	}
+
+	#renderDebounced = debounce(0, this.#renderNow)
+
+	disconnected() {
+		this.#use[_disconnect]()
+		this.#reactor.clear()
+		this.#attrWatcher.stop()
+	}
+
+	reconnected() {
+		this.#use[_reconnect]()
+		this.#attrWatcher.start()
+	}
+}
+

package/s/view/utils/parts/chain.ts

@@ -0,0 +1,40 @@
+
+import {Content} from "../../types.js"
+import {ViewContext} from "./context.js"
+import {AttrValue} from "../../../dom/types.js"
+import {DirectiveResult} from "lit/async-directive.js"
+
+/** provides fluent chaining interface for adding context to rendering a view, think view.props().attr().children().render() */
+export class ViewChain<Props extends any[]> {
+	#render: (context: ViewContext<Props>) => DirectiveResult
+	#context: ViewContext<Props>
+
+	constructor(
+			context: ViewContext<Props>,
+			renderDirective: (context: ViewContext<Props>) => DirectiveResult,
+		) {
+		this.#context = context
+		this.#render = renderDirective
+	}
+
+	attr(key: string, value: AttrValue = true) {
+		this.#context.attrs.set(key, value)
+		return this
+	}
+
+	attrs(record: Record<string, AttrValue>) {
+		for (const [key, value] of Object.entries(record))
+			this.#context.attrs.set(key, value)
+		return this
+	}
+
+	children(...contents: Content[]) {
+		this.#context.children.push(...contents)
+		return this
+	}
+
+	render() {
+		return this.#render(this.#context)
+	}
+}
+

package/s/view/utils/parts/context.ts

@@ -0,0 +1,11 @@
+
+import {Content} from "../../types.js"
+import {AttrValue} from "../../../dom/types.js"
+
+/** the information we need to render a view. */
+export class ViewContext<Props extends any[]> {
+	attrs = new Map<string, AttrValue>()
+	children: Content[] = []
+	constructor(public props: Props) {}
+}
+

package/s/view/utils/parts/directive.ts

@@ -0,0 +1,29 @@
+
+import {AsyncDirective, directive, DirectiveResult} from "lit/async-directive.js"
+import {ViewFn} from "../../types.js"
+import {ViewCapsule} from "./capsule.js"
+import {ViewContext} from "./context.js"
+
+/** creates a lit directive fn, which when called, emits a funky lit thing to inject in your html templates. */
+export function makeViewDirective<Props extends any[]>(
+		viewFn: ViewFn<Props>,
+		settings: ShadowRootInit,
+	) {
+
+	return directive(class ViewDirective extends AsyncDirective {
+		#capsule = new ViewCapsule(viewFn, settings)
+
+		render(context: ViewContext<Props>) {
+			return this.#capsule.update(context)
+		}
+
+		disconnected() {
+			this.#capsule.disconnected()
+		}
+
+		reconnected() {
+			this.#capsule.reconnected()
+		}
+	}) as (context: ViewContext<Props>) => DirectiveResult
+}
+

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

@@ -0,0 +1,15 @@
+
+import {dom} from "../../../dom/dom.js"
+
+/** <sly-view> element that views are rendered into. */
+export class SlyView extends HTMLElement {
+	static #registered = false
+	static make() {
+		if (!this.#registered) {
+			dom.register({SlyView}, {soft: true, upgrade: true})
+			this.#registered = true
+		}
+		return document.createElement("sly-view") as SlyView
+	}
+}
+