@e280/sly 0.2.0-5 → 0.2.0-7

package/README.md

@@ -4,15 +4,14 @@
 # 🦝 sly
 > *mischievous shadow views*
 
-[@e280](https://e280.org/)'s shiny, tasteful, incredible new [lit](https://lit.dev/)-based toolkit for frontend web developers.  
-sly replaces its predecessor, [slate](https://github.com/benevolent-games/slate).  
+[@e280](https://e280.org/)'s shiny new [lit](https://lit.dev/)-based frontend lib for webdevs. *(sly replaces its predecessor, [slate](https://github.com/benevolent-games/slate))*
 
-- 🍋 **views** — hooks-based, shadow-dom'd, componentizable
-- 🪄 **dom** — the "it's not jquery" multitool
-- 🪵 **base element** — for a more classical experience
-- 🫛 **ops** — tools for async operations and loading spinners
-- 🪙 **loot** — drag-and-drop facilities
-- 🧪 **testing page** — https://sly.e280.org/
+- 🍋 [**views**](#views) — hooks-based, shadow-dom'd, componentizable
+- 🪵 [**base element**](#base-element) — for a more classical experience
+- 🪄 [**dom**](#dom) — the "it's not jquery" multitool
+- 🫛 [**ops**](#ops) — tools for async operations and loading spinners
+- 🪙 [**loot**](#loot) — drag-and-drop facilities
+- 🧪 testing page — https://sly.e280.org/
 
 
 
@@ -25,14 +24,15 @@ npm install @e280/sly lit
 ```
 
 > [!NOTE]
-> - 🔥 [lit](https://lit.dev/) for html rendering
+> - 🔥 [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) is our ts standard library
-> - 🐢 [scute](https://github.com/e280/scute) is our buildy-bundly-buddy
+> - 🏂 [@e280/stz](https://github.com/e280/stz), our ts standard library
+> - 🐢 [@e280/scute](https://github.com/e280/scute), our buildy-bundly-buddy
 
 
 
 <br/><br/>
+<a id="views"></a>
 
 ## 🦝🍋 sly views
 > *views are the crown jewel of sly.. shadow-dom'd.. hooks-based.. "ergonomics"..*
@@ -151,9 +151,9 @@ import {html, css} from "lit"
     // write the signal
     $count(2)
     ```
-    - `derive` signals
+    - `derived` signals
         ```ts
-        const $product = use.derive(() => $count() * $whatever())
+        const $product = use.derived(() => $count() * $whatever())
         ```
     - `lazy` signals
         ```ts
@@ -198,7 +198,8 @@ import {html, css} from "lit"
 
     v // 123
     ```
-- **use.attrs** — ergonomic typed html attribute access
+- **use.attrs** — ergonomic typed html attribute access  
+    *(see [dom.attrs](#dom.attrs) for more details)*
     ```ts
     const attrs = use.attrs({
       name: String,
@@ -211,14 +212,6 @@ import {html, css} from "lit"
     attrs.count // 123
     attrs.active // true
     ```
-    ```ts
-    attrs.name = "zenky"
-    attrs.count = 124
-    attrs.active = false // removes html attr
-    ```
-    ```ts
-    attrs.name = undefined // removes the attr
-    ```
 - **use.render** — rerender the view (debounced)
     ```ts
     use.render()
@@ -269,12 +262,13 @@ import {html, css} from "lit"
 
 
 <br/><br/>
+<a id="base-element"></a>
 
 ## 🦝🪵 sly base element
 > *the classic experience*
 
 ```ts
-import {BaseElement, Use, attributes, dom} from "@e280/sly"
+import {BaseElement, Use, dom} from "@e280/sly"
 import {html, css} from "lit"
 ```
 
@@ -294,7 +288,7 @@ base element enjoys the same `use` hooks as views.
       start = 10
 
       // custom attributes
-      attrs = attributes(this, {
+      attrs = dom.attrs(this, {
         multiply: Number,
       })
 
@@ -338,7 +332,7 @@ base element enjoys the same `use` hooks as views.
     myElement.start = 100
 
     // html attributes
-    myElement.attr.multiply = 2
+    myElement.attrs.multiply = 2
 
     // methods
     myElement.hello()
@@ -348,6 +342,7 @@ base element enjoys the same `use` hooks as views.
 
 
 <br/><br/>
+<a id="dom"></a>
 
 ## 🦝🪄 sly dom
 > *the "it's not jquery!" multitool*
@@ -403,10 +398,33 @@ import {dom} from "@e280/sly"
     ```ts
     dom.render(element, html`<p>hello world</p>`)
     ```
+- `attrs` <a id="dom.attrs"></a> to setup a type-happy html attribute helper
+    ```ts
+    const attrs = dom.attrs(element, {
+      name: String,
+      count: Number,
+      active: Boolean,
+    })
+    ```
+    ```ts
+    attrs.name // "chase"
+    attrs.count // 123
+    attrs.active // true
+    ```
+    ```ts
+    attrs.name = "zenky"
+    attrs.count = 124
+    attrs.active = false // removes html attr
+    ```
+    ```ts
+    attrs.name = undefined // removes the attr
+    attrs.count = undefined // removes the attr
+    ```
 
 
 
 <br/><br/>
+<a id="ops"></a>
 
 ## 🦝🫛 sly ops
 > *tools for async operations and loading spinners*
@@ -536,12 +554,14 @@ import {Pod, podium, Op, makeLoader, anims} from "@e280/sly"
 
 
 <br/><br/>
+<a id="loot"></a>
 
 ## 🦝🪙 loot
 > *drag-and-drop facilities*
 
 ```ts
-import {loot, ev, view} from "@e280/sly"
+import {loot, view, dom} from "@e280/sly"
+import {ev} from "@e280/stz"
 ```
 
 ### 🪙 `loot.Drops`
@@ -571,18 +591,20 @@ import {loot, ev, view} from "@e280/sly"
       ```
   - **vanilla-js whole-page example**
       ```ts
-      // attach listeners to accept drops and stuff
+      // attach listeners to the body
       ev(document.body, {
         dragover: drops.dragover,
         dragleave: drops.dragleave,
         drop: drops.drop,
       })
 
-      // update indicator attribute on body
-      drops.$indicator.on(indicator => {
-        if (indicator) document.body.setAttribute("data-indicator", "")
-        else document.body.removeAttribute("data-indicator")
+      // sly attribute handler for the body
+      const attrs = dom.attrs(document.body, {
+        "data-indicator": Boolean,
       })
+
+      // sync the data-indicator attribute
+      drops.$indicator.on(bool => attrs["data-indicator"] = bool)
       ```
 - **flashy css indicator for the dropzone,** so the user knows your app is eager to accept the drop
     ```css
@@ -593,7 +615,7 @@ import {loot, ev, view} from "@e280/sly"
 
 ### 🪙 `loot.DragAndDrops`
 > *setup drag-and-drops between items within your page*
-- **declare types for your grabbable and hoverable things**
+- **declare types for your draggy and droppy things**
     ```ts
     // money that can be picked up and dragged
     type Money = {value: number}
@@ -611,8 +633,7 @@ import {loot, ev, view} from "@e280/sly"
       },
     })
     ```
-- **attach dragzone listeners**  
-    (there can be many dragzones...)
+- **attach dragzone listeners** (there can be many dragzones...)
     ```ts
     view(use => () => {
       const money = use.once((): Money => ({value: 280}))
@@ -628,8 +649,7 @@ import {loot, ev, view} from "@e280/sly"
       `
     })
     ```
-- **attach dropzone listeners**  
-    (there can be many dropzones...)
+- **attach dropzone listeners** (there can be many dropzones...)
     ```ts
     view(use => () => {
       const bag = use.once((): Bag => ({id: 1}))
@@ -656,8 +676,13 @@ import {loot, ev, view} from "@e280/sly"
 
 
 <br/><br/>
+<a id="e280"></a>
 
 ## 🦝🧑‍💻 sly is by e280
 reward us with github stars  
 build with us at https://e280.org/ but only if you're cool  
 
+
+
+<br/><br/>
+

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@e280/sly",
-	"version": "0.2.0-5",
+	"version": "0.2.0-7",
 	"description": "web shadow views",
 	"license": "MIT",
 	"type": "module",

package/s/demo/views/counter.ts

@@ -20,7 +20,7 @@ export const CounterView = view(use => (initial: number) => {
 	const increment = () => $count.value++
 
 	const $product = use.signal
-		.derive(() => $count() * $seconds())
+		.derived(() => $count() * $seconds())
 
 	return html`
 		<slot></slot>

package/s/demo/views/incredi.ts

@@ -2,13 +2,13 @@
 import {css, html} from "lit"
 import {nap, repeat} from "@e280/stz"
 
+import {dom} from "../../dom/dom.js"
 import {Use} from "../../views/use.js"
-import {attributes} from "../../views/attributes.js"
 import {BaseElement} from "../../views/base-element.js"
 
 export class IncrediElement extends BaseElement {
 	static styles = css`span{color:orange}`
-	attrs = attributes(this, {value: Number})
+	attrs = dom.attrs(this, {value: Number})
 	something = {whatever: "rofl"}
 
 	render(use: Use) {

package/s/dom/dom.ts

@@ -2,7 +2,10 @@
 import {render} from "lit"
 import {register} from "./register.js"
 import {Content} from "../views/types.js"
-import {Queryable, Renderable} from "./types.js"
+import {attributes, AttrSpec, AttrTypes} from "./attributes.js"
+
+export type Renderable = HTMLElement | ShadowRoot | DocumentFragment
+export type Queryable = HTMLElement | ShadowRoot | Element | Document | DocumentFragment
 
 function require<E extends Element>(
 		container: Queryable,
@@ -41,6 +44,10 @@ export class Dom<C extends Queryable> {
 	render(...content: Content[]) {
 		return render(content, this.element as Renderable)
 	}
+
+	attrs<A extends AttrSpec>(spec: A) {
+		return attributes(this.element as HTMLElement, spec)
+	}
 }
 
 export function dom<E extends Queryable>(selector: string): E
@@ -56,6 +63,8 @@ dom.in = doc.in.bind(doc)
 dom.require = doc.require.bind(doc)
 dom.maybe = doc.maybe.bind(doc)
 dom.all = doc.all.bind(doc)
+
+dom.attrs = attributes
 dom.register = register
 dom.render = (container: Renderable, ...content: Content[]) => {
 	return render(content, container)

package/s/dom/register.ts

@@ -1,6 +1,9 @@
 
 import {dashify} from "./dashify.js"
-import {HTMLElementClasses} from "./types.js"
+
+export type HTMLElementClasses = {
+	[key: string]: {new(...args: any[]): HTMLElement}
+}
 
 export type RegistrationOptions = {
 	soft: boolean

package/s/index.ts

@@ -1,8 +1,8 @@
 
+export * from "./dom/attributes.js"
 export * from "./dom/dashify.js"
 export * from "./dom/dom.js"
 export * from "./dom/register.js"
-export * from "./dom/types.js"
 
 export * from "./ops/loaders/make-loader.js"
 export * from "./ops/loaders/parts/ascii-anim.js"
@@ -13,7 +13,7 @@ export * from "./ops/types.js"
 
 export * as loot from "./loot/index.js"
 
-export * from "./views/attributes.js"
+export * from "./dom/attributes.js"
 export * from "./views/base-element.js"
 export * from "./views/css-reset.js"
 export * from "./views/types.js"

package/s/views/base-element.ts

@@ -5,7 +5,7 @@ import {debounce, MapG} from "@e280/stz"
 
 import {dom} from "../dom/dom.js"
 import {Content} from "./types.js"
-import {onAttrChange} from "./attributes.js"
+import {onAttrChange} from "../dom/attributes.js"
 import {applyStyles} from "./utils/apply-styles.js"
 import {Use, _disconnect, _reconnect, _wrap} from "./use.js"
 

package/s/views/use.ts

@@ -4,9 +4,10 @@ import {defer, MapG} from "@e280/stz"
 import {signal, SignalOptions} from "@e280/strata/signals"
 
 import {Op} from "../ops/op.js"
+import {dom} from "../dom/dom.js"
 import {Mounts} from "./utils/mounts.js"
 import {applyStyles} from "./utils/apply-styles.js"
-import {attributes, AttrSpec, onAttrChange} from "./attributes.js"
+import {AttrSpec, onAttrChange} from "../dom/attributes.js"
 
 export const _wrap = Symbol()
 export const _disconnect = Symbol()
@@ -66,7 +67,7 @@ export class Use {
 
 	attrs<A extends AttrSpec>(spec: A) {
 		this.mount(() => onAttrChange(this.element, this.render))
-		return this.once(() => attributes(this.element, spec))
+		return this.once(() => dom.attrs(this.element, spec))
 	}
 
 	once<V>(fn: () => V) {
@@ -106,8 +107,8 @@ export class Use {
 		function sig<V>(value: V, options?: Partial<SignalOptions>) {
 			return that.once(() => signal<V>(value, options))
 		}
-		sig.derive = function derive<V>(formula: () => V, options?: Partial<SignalOptions>) {
-			return that.once(() => signal.derive<V>(formula, options))
+		sig.derived = function derived<V>(formula: () => V, options?: Partial<SignalOptions>) {
+			return that.once(() => signal.derived<V>(formula, options))
 		}
 		sig.lazy = function lazy<V>(formula: () => V, options?: Partial<SignalOptions>) {
 			return that.once(() => signal.lazy<V>(formula, options))
@@ -115,8 +116,8 @@ export class Use {
 		return sig
 	})()
 
-	derive<V>(formula: () => V, options?: Partial<SignalOptions>) {
-		return this.once(() => signal.derive<V>(formula, options))
+	derived<V>(formula: () => V, options?: Partial<SignalOptions>) {
+		return this.once(() => signal.derived<V>(formula, options))
 	}
 
 	lazy<V>(formula: () => V, options?: Partial<SignalOptions>) {