incredi: full circle view->component->view omg!

Author: chase-moskal

s/demo/demo.bundle.ts

@@ -3,15 +3,19 @@ import {dom} from "../dom/dom.js"
 import {DemoView} from "./views/demo.js"
 import {CounterView} from "./views/counter.js"
 import {IncrediElement} from "./views/incredi.js"
+import {BackwardsElement} from "./views/backwards.js"
 
 dom.in(".demo").render(DemoView())
 
 dom.register({
 	IncrediElement,
+	BackwardsElement,
 	DemoCounter: CounterView.component(el => [
 		dom.attrs(el).number.initial ?? 0,
 	]),
 })
 
+dom<BackwardsElement>("backwards-element").speed = 2
+
 console.log("🦝 sly")
 

s/demo/views/backwards.ts

@@ -0,0 +1,20 @@
+
+import {html} from "lit"
+import {view} from "../../views/view.js"
+
+export class BackwardsElement extends view
+	.component<{speed?: number}>()
+	.props<[speed: number]>(el => [el.speed ?? 1])
+	.declare(use => speed => {
+
+	const $count = use.signal(0)
+	const increment = () => $count($count() + speed)
+
+	return html`
+		<span>${$count()}</span>
+		<button @click="${increment}">+${speed}</button>
+	`
+}) {}
+
+export const BackwardsView = BackwardsElement.view
+

s/demo/views/demo.ts

@@ -3,6 +3,7 @@ import {css, html} from "lit"
 import {view} from "../../views/view.js"
 import {CounterView} from "./counter.js"
 import {LoadersView} from "./loaders.js"
+import {BackwardsView} from "./backwards.js"
 import {cssReset} from "../../views/css-reset.js"
 
 export const DemoView = view(use => () => {
@@ -11,6 +12,7 @@ export const DemoView = view(use => () => {
 
 	return html`
 		${CounterView.props(2).children("view").render()}
+		${BackwardsView(3)}
 		${LoadersView()}
 	`
 })

s/demo/views/incredi.ts

@@ -8,6 +8,7 @@ import {BaseElement} from "../../views/base-element.js"
 
 export class IncrediElement extends BaseElement {
 	static styles = css`span{color:orange}`
+
 	attrs = dom.attrs(this).spec({value: Number})
 	something = {whatever: "rofl"}
 

s/index.html.ts

@@ -30,6 +30,7 @@ export default ssg.page(import.meta.url, async orb => ({
 		<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
 		<p class=lil>v${orb.packageVersion()}</p>
 		<incredi-element></incredi-element>
+		<backwards-element></backwards-element>
 		<demo-counter initial="-1">component</demo-counter>
 		<div class=demo></div>
 	`,

s/views/types.ts

@@ -1,5 +1,4 @@
 
-import {Constructor} from "@e280/stz"
 import {DirectiveResult} from "lit/directive.js"
 import {CSSResultGroup, TemplateResult} from "lit"
 
@@ -8,15 +7,24 @@ import {Use} from "./use.js"
 export type Content = TemplateResult | DirectiveResult | HTMLElement | string | null | undefined | void | Content[]
 export type AttrValue = string | boolean | number | undefined | null | void
 
-export type Elmix<Mix extends Partial<ViewComponent>> = Mix & ViewComponent & HTMLElement
+export type ViewComponent<Mix extends {} = {}> = Mix & {
+	renderNow(): void
+	render: () => void
+} & HTMLElement
+
+export type ViewComponentClass<Mix extends {}, Props extends any[]> = {
+	view: View<Props>
+	new(): ViewComponent<Mix>
+}
 
 export type ComponentFn = (use: Use) => Content
 export type ViewFn<Props extends any[]> = (use: Use) => (...props: Props) => Content
 export type BasicView<Props extends any[]> = (...props: Props) => DirectiveResult<any>
+
 export type View<Props extends any[]> = BasicView<Props> & {
 	props: (...props: Props) => ViewChain
-	component: <Mix extends Partial<ViewComponent>>(fn: (el: Elmix<Mix>) => Props) => (
-		(Constructor<Elmix<Mix>> & typeof HTMLElement)
+	component: <Mix extends {}>(fn: (el: ViewComponent<Mix>) => Props) => (
+		ViewComponentClass<Mix, Props>
 	)
 }
 
@@ -38,8 +46,3 @@ export type ViewContext = {
 	attrs: Record<string, AttrValue>
 }
 
-export type ViewComponent = {
-	renderNow(): void
-	render: () => void
-} & HTMLElement
-

s/views/view.ts

@@ -1,6 +1,6 @@
 
 import {render} from "lit"
-import {Constructor, debounce, MapG} from "@e280/stz"
+import {debounce, MapG} from "@e280/stz"
 import {directive} from "lit/directive.js"
 import {tracker} from "@e280/strata/tracker"
 import {AsyncDirective} from "lit/async-directive.js"
@@ -10,7 +10,7 @@ import {applyAttrs} from "./utils/apply-attrs.js"
 import {AttrWatcher} from "./utils/attr-watcher.js"
 import {applyStyles} from "./utils/apply-styles.js"
 import {Use, _wrap, _disconnect, _reconnect} from "./use.js"
-import {AttrValue, Content, View, ViewFn, ViewSettings, ViewContext, ViewComponent, Elmix} from "./types.js"
+import {AttrValue, Content, View, ViewFn, ViewSettings, ViewContext, ViewComponent, ViewComponentClass} from "./types.js"
 
 export const view = setupView({mode: "open"})
 export class SlyView extends HTMLElement {}
@@ -135,8 +135,9 @@ function setupView(settings: ViewSettings) {
 			return chain
 		}
 
-		rendy.component = <El extends Partial<ViewComponent>>(fn: (el: El) => Props) => {
+		rendy.component = <Mix extends {} = {}>(fn: (el: Mix) => Props) => {
 			return class VComponent extends HTMLElement implements ViewComponent {
+				static view = rendy
 				#context = freshViewContext()
 				#directive = directive(
 					make({
@@ -159,17 +160,17 @@ function setupView(settings: ViewSettings) {
 						render(this.#directive(this.#context, props), this)
 					}
 				}
-			} as any as (Constructor<El> & typeof HTMLElement)
+			} as any as ViewComponentClass<Mix, Props>
 		}
 
 		return rendy
 	}
 
 	view.declare = view
 	view.settings = (settings2: Partial<ViewSettings>) => setupView({...settings, ...settings2})
-	view.component = <Mix extends Partial<ViewComponent>>() => ({
-		props: <Props extends any[]>(elfn: (el: Elmix<Mix>) => Props) => ({
-			declare: (fn: ViewFn<Props>) => view(fn).component(elfn)
+	view.component = <Mix extends {}>() => ({
+		props: <Props extends any[]>(elfn: (el: ViewComponent<Mix>) => Props) => ({
+			declare: (fn: ViewFn<Props>) => view(fn).component(elfn),
 		}),
 	})
 	return view