@e280/sly 0.0.0-8 → 0.0.0-9

package/README.md

@@ -24,8 +24,8 @@ npm install @e280/sly lit @e280/strata @e280/stz
 > [!NOTE]
 > - 🔥 [lit](https://lit.dev/) for html rendering
 > - ⛏️ [@e280/strata](https://github.com/e280/strata) for state management (signals, state trees)
-> - 🏂 *(optional)* [@e280/stz](https://github.com/e280/stz) stz is our ts standard library
-> - 🐢 *(optional)* [scute](https://github.com/e280/scute) is our buildy-bundly-buddy
+> - 🏂 [@e280/stz](https://github.com/e280/stz) *(optional)* stz is our ts standard library
+> - 🐢 [scute](https://github.com/e280/scute) *(optional)* is our buildy-bundly-buddy
 
 <br/>
 
@@ -44,7 +44,8 @@ web components are best for giving html authors access to your cool widgets.. an
 
 views automatically rerender whenever any state stuff from [@e280/strata](https://github.com/e280/strata) changes.
 
-🥷 views have a [shadow root](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), and support [slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots).. views have the good parts of web components, but they aren't cumbersome.
+🥷 views have a [shadow root](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), and support [slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots).  
+views have the good parts of web components, but they aren't cumbersome.
 
 ### 🍋 view example
 - **import some stuff**
@@ -130,7 +131,10 @@ views automatically rerender whenever any state stuff from [@e280/strata](https:
     ```
     - `$.register` automatically dashes the tag names (`MyComponent` becomes `<my-component>`)
 
-### 🍋 view "use" reference
+### 🍋 view "use" hooks reference
+- 👮 **follow the hooks rules**  
+    > just like [react hooks](https://react.dev/warnings/invalid-hook-call-warning), the execution order of sly's `use` hooks actually matters..  
+    > you must not call these hooks under `if` conditionals, or `for` loops, or in callbacks, or after a conditional `return` statement, or anything like that.. *otherwise, heed my warning: weird bad stuff will happen..*
 - **use.name** — set the "view" attr value, eg `<sly-view view="squarepants">`
     ```ts
     use.name("squarepants")
@@ -309,9 +313,8 @@ import {nap} from "@e280/stz"
 import {Pod, podium, Op, makeLoader, anims} from "@e280/sly"
 ```
 
-### 🫛 pods: loading/ready/error data
-- a pod represents an async operation
-- pods are simple json-serializable data
+### 🫛 pods: loading/ready/error
+- a pod represents an async operation in terms of json-serializable data
 - there are three kinds of `Pod<V>`
     ```ts
     // loading pod
@@ -368,8 +371,8 @@ import {Pod, podium, Op, makeLoader, anims} from "@e280/sly"
     ```
 - get pod info
     ```ts
-    op.status // "loading"
     op.pod // ["loading"]
+    op.status // "loading"
     op.value // undefined (or value if ready)
     ```
     ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/sly",
-	"version": "0.0.0-8",
+	"version": "0.0.0-9",
 	"description": "web shadow views",
 	"license": "MIT",
 	"type": "module",

package/s/ops/podium.ts

@@ -2,54 +2,54 @@
 import {Pod, PodSelect} from "./types.js"
 
 export const podium = {
-	status: (p: Pod<any>) => p[0],
+	status: (pod: Pod<any>) => pod[0],
 
-	value: <V>(p: Pod<V>) => {
-		return p[0] === "ready"
-			? p[1]
+	value: <V>(pod: Pod<V>) => {
+		return pod[0] === "ready"
+			? pod[1]
 			: undefined
 	},
 
-	error: <V>(p: Pod<V>) => {
-		return p[0] === "error"
-			? p[1]
+	error: <V>(pod: Pod<V>) => {
+		return pod[0] === "error"
+			? pod[1]
 			: undefined
 	},
 
-	select: <V, R>(p: Pod<V>, select: PodSelect<V, R>) => {
-		switch (p[0]) {
+	select: <V, R>(pod: Pod<V>, select: PodSelect<V, R>) => {
+		switch (pod[0]) {
 			case "loading": return select.loading()
-			case "error": return select.error(p[1])
-			case "ready": return select.ready(p[1])
+			case "error": return select.error(pod[1])
+			case "ready": return select.ready(pod[1])
 			default: throw new Error("unknown op status")
 		}
 	},
 
-	morph: <A, B>(p: Pod<A>, fn: (a: A) => B): Pod<B> => {
-		return podium.select<A, Pod<B>>(p, {
+	morph: <A, B>(pod: Pod<A>, fn: (a: A) => B): Pod<B> => {
+		return podium.select<A, Pod<B>>(pod, {
 			loading: () => ["loading"],
 			error: error => ["error", error],
 			ready: a => ["ready", fn(a)],
 		})
 	},
 
-	all: <V>(...ps: Pod<V>[]): Pod<V[]> => {
+	all: <V>(...pods: Pod<V>[]): Pod<V[]> => {
 		const values: V[] = []
 		const errors: any[] = []
 		let loading = 0
 
-		for (const p of ps) {
-			switch (p[0]) {
+		for (const pod of pods) {
+			switch (pod[0]) {
 				case "loading":
 					loading++
 					break
 
 				case "ready":
-					values.push(p[1])
+					values.push(pod[1])
 					break
 
 				case "error":
-					errors.push(p[1])
+					errors.push(pod[1])
 					break
 			}
 		}

package/s/views/use.ts

@@ -91,7 +91,7 @@ export class Use {
 		function op<V>(f: () => Promise<V>) {
 			return that.once(() => Op.fn(f))
 		}
-		op.fn = op
+		op.fn = op as (<V>(f: () => Promise<V>) => Op<V>)
 		op.promise = <V>(p: Promise<V>) => this.once(() => Op.promise(p))
 		return op
 	})()