@e280/sly 0.1.1 → 0.2.0-0

package/README.md

@@ -22,7 +22,6 @@ npm install @e280/sly lit
 ```
 
 > [!NOTE]
-> ecosystem buddies:
 > - 🔥 [lit](https://lit.dev/) for html rendering
 > - ⛏️ [@e280/strata](https://github.com/e280/strata) for state management (signals, state trees)
 > - 🏂 [@e280/stz](https://github.com/e280/stz) ***(optional)*** stz is our ts standard library
@@ -78,33 +77,34 @@ view(use => () => html`<p>hello world</p>`)
       // <my-counter></my-counter>
     ```
 
+### 🍋 view declaration settings
+- special settings for views at declaration-time
+    ```ts
+    export const CoolView = view
+      .settings({mode: "open", delegatesFocus: true})
+      .declare(use => (greeting: string) => {
+        return html`😎 ${greeting} <slot></slot>`
+      })
+    ```
+    - all [attachShadow params](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#parameters) (like `mode` and `delegatesFocus`) are valid `settings`
+    - note the `<slot></slot>` we'll use in the next example lol
+
 ### 🍋 view injection options
 - options for views at the template injection site
     ```ts
     $.render($(".app"), html`
       <h2>super cool example</h2>
-      ${CoolView
+
+      ${CoolView.props("hello")
         .attr("class", "hero")
         .children(html`<em>spongebob</em>`)
-        .props("hello")}
+        .render()}
     `)
     ```
+    - `props` — provide props and start a view chain
     - `attr` — set html attributes on the `<sly-view>` host element
     - `children` — nested content in the host element, can be [slotted](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots)
-    - `props` — finally inject the view by providing its props
-
-### 🍋 view declaration settings
-- special settings for views at declaration-time
-    ```ts
-    export const CoolView = view
-      .settings({mode: "open", delegatesFocus: true})
-      .view(use => (greeting: string) => {
-
-      return html`😎 ${greeting} <slot></slot>`
-    })
-    ```
-    - all [attachShadow params](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#parameters) (like `mode` and `delegatesFocus`) are valid `settings`
-    - note the `<slot></slot>` we'll use in the next example lol
+    - `render` — end the view chain and render the lit directive
 
 ### 🍋 web components
 - **build a component directly**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/sly",
-	"version": "0.1.1",
+	"version": "0.2.0-0",
 	"description": "web shadow views",
 	"license": "MIT",
 	"type": "module",
@@ -16,8 +16,8 @@
 		"lit": "^3.3.1"
 	},
 	"dependencies": {
-		"@e280/strata": "^0.1.0",
-		"@e280/stz": "^0.2.0-4"
+		"@e280/strata": "^0.2.0-0",
+		"@e280/stz": "^0.2.0"
 	},
 	"devDependencies": {
 		"@e280/science": "^0.1.1",

package/s/demo/views/counter.ts

@@ -14,19 +14,19 @@ export const CounterView = view(use => (initial: number) => {
 
 	use.mount(() => repeat(async() => {
 		const since = Date.now() - start
-		seconds(Math.floor(since / 1000))
+		seconds.set(Math.floor(since / 1000))
 	}))
 
 	const count = use.signal(initial)
-	const increment = () => count(count() + 1)
+	const increment = () => count.value++
 
 	return html`
 		<slot></slot>
 		<div>
-			<span>${seconds()}</span>
+			<span>${seconds.get()}</span>
 		</div>
 		<div>
-			<span>${count()}</span>
+			<span>${count.get()}</span>
 			<button @click="${increment}">+</button>
 		</div>
 	`

package/s/demo/views/demo.ts

@@ -10,7 +10,7 @@ export const DemoView = view(use => () => {
 	use.styles(cssReset, styles)
 
 	return html`
-		${CounterView.children("view")(2)}
+		${CounterView.props(2).children("view").render()}
 		${LoadersView()}
 	`
 })

package/s/ops/loaders/parts/ascii-anim.ts

@@ -21,11 +21,11 @@ export const AsciiAnim = view(use => ({hz, frames}: {
 
 	use.mount(() => repeat(async() => {
 		await nap(1000 / hz)
-		const next = frame() + 1
-		frame(next >= frames.length ? 0 : next)
+		const next = frame.get() + 1
+		frame.set(next >= frames.length ? 0 : next)
 	}))
 
-	return frames.at(frame())
+	return frames.at(frame.get())
 })
 
 const style = css`

package/s/ops/op.ts

@@ -46,16 +46,16 @@ export class Op<V> {
 	get finally() { return this.wait.finally.bind(this.wait) }
 
 	async setLoading() {
-		await this.signal(["loading"])
+		await this.signal.set(["loading"])
 	}
 
 	async setReady(value: V) {
-		await this.signal(["ready", value])
+		await this.signal.set(["ready", value])
 		await this.#resolve(value)
 	}
 
 	async setError(error: any) {
-		await this.signal(["error", error])
+		await this.signal.set(["error", error])
 		await this.#reject(error)
 	}
 
@@ -79,23 +79,23 @@ export class Op<V> {
 	}
 
 	get pod() {
-		return this.signal()
+		return this.signal.get()
 	}
 
 	set pod(p: Pod<V>) {
-		this.signal(p)
+		this.signal.set(p)
 	}
 
 	get status() {
-		return this.signal()[0]
+		return this.signal.get()[0]
 	}
 
 	get value() {
-		return podium.value(this.signal())
+		return podium.value(this.signal.get())
 	}
 
 	get error() {
-		return podium.error(this.signal())
+		return podium.error(this.signal.get())
 	}
 
 	get isLoading() {
@@ -111,13 +111,13 @@ export class Op<V> {
 	}
 
 	require() {
-		const pod = this.signal()
+		const pod = this.signal.get()
 		if (pod[0] !== "ready") throw new Error("required value not ready")
 		return pod[1]
 	}
 
 	select<R>(select: PodSelect<V, R>) {
-		return podium.select(this.signal(), select)
+		return podium.select(this.signal.get(), select)
 	}
 
 	morph<V2>(fn: (value: V) => V2) {

package/s/views/types.ts

@@ -16,11 +16,7 @@ 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: View<Props>
-	with: (w: Partial<ViewWith>) => View<Props>
-	children: (...children: Content[]) => View<Props>
-	attrs: (attrs: Record<string, AttrValue>) => View<Props>
-	attr: (name: string, value: AttrValue) => View<Props>
+	props: (...props: Props) => ViewChain
 	component: (...props: Props) => Constructor<Component>
 }
 
@@ -30,8 +26,15 @@ export type ViewSettings = ShadowRootInit & {
 	styles?: CSSResultGroup
 }
 
-export type ViewWith = {
-	children: Content
+export type ViewChain = {
+	children(...c: Content[]): ViewChain
+	attrs(a: Record<string, AttrValue>): ViewChain
+	attr(n: string, v: AttrValue): ViewChain
+	render(): DirectiveResult<any>
+}
+
+export type ViewContext = {
+	children: Content[]
 	attrs: Record<string, AttrValue>
 }
 

package/s/views/view.ts

@@ -1,22 +1,22 @@
 
 import {render} from "lit"
 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"
-import {directive, DirectiveResult} from "lit/directive.js"
 
 import {register} from "../dom/register.js"
 import {applyAttrs} from "./utils/apply-attrs.js"
 import {applyStyles} from "./utils/apply-styles.js"
 import {Use, _wrap, _disconnect, _reconnect} from "./use.js"
-import {AttrValue, ComponentFn, Content, View, ViewFn, ViewSettings, ViewWith} from "./types.js"
+import {AttrValue, ComponentFn, Content, View, ViewFn, ViewSettings, ViewContext} from "./types.js"
 
 export const view = setupView({mode: "open"})
 export class SlyView extends HTMLElement {}
 register({SlyView}, {soft: true, upgrade: true})
 
 function setupView(settings: ViewSettings) {
-	function view<Props extends any[]>(fn: ViewFn<Props>) {
+	function view<Props extends any[]>(fn: ViewFn<Props>): View<Props> {
 		type Situation = {
 			getElement: () => HTMLElement
 			isComponent: boolean
@@ -27,7 +27,7 @@ function setupView(settings: ViewSettings) {
 			#shadow = this.#element.attachShadow(settings)
 			#renderDebounced = debounce(0, () => this.#renderNow())
 			#tracking = new MapG<any, () => void>
-			#params!: {with: ViewWith, props: Props}
+			#params!: {context: ViewContext, props: Props}
 
 			#use = new Use(
 				this.#element,
@@ -46,7 +46,7 @@ function setupView(settings: ViewSettings) {
 			#renderNow() {
 				if (!this.#params) return
 				if (!this.isConnected) return
-				const {with: w, props} = this.#params
+				const {context: w, props} = this.#params
 
 				this.#use[_wrap](() => {
 					// apply html attributes
@@ -71,8 +71,8 @@ function setupView(settings: ViewSettings) {
 				})
 			}
 
-			render(w: ViewWith, props: Props) {
-				this.#params = {with: w, props}
+			render(context: ViewContext, props: Props) {
+				this.#params = {context: context, props}
 				this.#renderNow()
 				return situation.isComponent ? null : this.#element
 			}
@@ -94,40 +94,55 @@ function setupView(settings: ViewSettings) {
 			isComponent: false,
 		}))
 
-		function setupDirective(w: ViewWith): View<Props> {
-			const rend = (...props: Props): DirectiveResult<any> => d(w, props)
-			rend.props = rend
-			rend.with = (w2: Partial<ViewWith>) => setupDirective({...w, ...w2})
-			rend.children = (...children: Content[]) => setupDirective({...w, children})
-			rend.attrs = (attrs: Record<string, AttrValue>) => setupDirective({...w, attrs})
-			rend.attr = (name: string, value: AttrValue) => setupDirective({
-				...w,
-				attrs: {...w.attrs, [name]: value},
-			})
-			rend.component = (...props: Props) => class extends HTMLElement {
-				#directive = directive(make({
+		const freshViewContext = (): ViewContext => ({attrs: {}, children: []})
+	
+		function rendy(...props: Props) {
+			return d(freshViewContext(), props)
+		}
+
+		rendy.props = (...props: Props) => {
+			let ctx = freshViewContext()
+			const chain = {
+				children(...children: Content[]) {
+					ctx = {...ctx, children: [...ctx.children, ...children]}
+					return chain
+				},
+				attrs(attrs: Record<string, AttrValue>) {
+					ctx = {...ctx, attrs: {...ctx.attrs, ...attrs}}
+					return chain
+				},
+				attr(name: string, value: AttrValue) {
+					ctx = {...ctx, attrs: {...ctx.attrs, [name]: value}}
+					return chain
+				},
+				render() {
+					return d(ctx, props)
+				},
+			}
+			return chain
+		}
+
+		rendy.component = (...props: Props) => class extends HTMLElement {
+			#directive = directive(
+				make({
 					getElement: () => this,
 					isComponent: true,
-				}))
-				constructor() {
-					super()
-					this.render(...props)
-				}
-				render(...props: Props) {
-					if (this.isConnected)
-						render(this.#directive(w, props), this)
-				}
+				})
+			)
+			constructor() {
+				super()
+				this.render(...props)
+			}
+			render(...props: Props) {
+				if (this.isConnected)
+					render(this.#directive(freshViewContext(), props), this)
 			}
-			return rend
 		}
 
-		return setupDirective({
-			attrs: {},
-			children: null,
-		})
+		return rendy
 	}
 
-	view.view = view
+	view.declare = view
 	view.settings = (settings2: Partial<ViewSettings>) => setupView({...settings, ...settings2})
 	view.component = (fn: ComponentFn) => view(use => () => fn(use)).component()
 	return view