npm - @e280/sly - Versions diffs - 0.2.0-2 → 0.2.0-4 - Mend

@e280/sly 0.2.0-2 → 0.2.0-4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/README.md +93 -13
package/package.json +1 -1
package/s/demo/demo.bundle.ts +6 -1
package/s/demo/views/demo.ts +1 -0
package/s/demo/views/incredi.ts +28 -0
package/s/dom/dom.ts +25 -13
package/s/index.html.ts +1 -0
package/s/index.ts +2 -0
package/s/ops/op.ts +2 -2
package/s/views/attributes.ts +6 -6
package/s/views/base-element.ts +84 -0
package/s/views/use.ts +3 -3
package/s/views/view.ts +4 -4
package/x/demo/demo.bundle.js +5 -1
package/x/demo/demo.bundle.js.map +1 -1
package/x/demo/demo.bundle.min.js +17 -14
package/x/demo/demo.bundle.min.js.map +4 -4
package/x/demo/views/demo.js +1 -0
package/x/demo/views/demo.js.map +1 -1
package/x/demo/views/incredi.d.ts +12 -0
package/x/demo/views/incredi.js +21 -0
package/x/demo/views/incredi.js.map +1 -0
package/x/dom/dom.d.ts +6 -5
package/x/dom/dom.js +19 -11
package/x/dom/dom.js.map +1 -1
package/x/index.d.ts +2 -0
package/x/index.html +3 -2
package/x/index.html.js +1 -0
package/x/index.html.js.map +1 -1
package/x/index.js +2 -0
package/x/index.js.map +1 -1
package/x/ops/op.d.ts +2 -2
package/x/ops/op.js +2 -2
package/x/ops/op.js.map +1 -1
package/x/views/attributes.d.ts +1 -1
package/x/views/attributes.js +5 -5
package/x/views/attributes.js.map +1 -1
package/x/views/base-element.d.ts +14 -0
package/x/views/base-element.js +62 -0
package/x/views/base-element.js.map +1 -0
package/x/views/use.d.ts +1 -1
package/x/views/use.js +2 -2
package/x/views/use.js.map +1 -1
package/x/views/view.js +4 -4
package/x/views/view.js.map +1 -1

package/README.md CHANGED Viewed

@@ -9,6 +9,7 @@ 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
 - 🧪 **testing page** — https://sly.e280.org/
@@ -267,6 +268,85 @@ view(use => () => html`<p>hello world</p>`)
+<br/><br/>
+## 🦝🪵 sly base element
+> *the classic experience*
+so views are great, and they can be converted into components..
+..but views have one drawback — you can't actually expose properties on the element instance itself.
+that's where `BaseElement` comes in.
+it's a proper class-based element, but it lets you have the same `use` hooks that views enjoy.
+### 🪵 base element setup
+- **import stuff**
+    ```ts
+    import {BaseElement, Use, attributes, dom} from "@e280/sly"
+    import {html, css} from "lit"
+    ```
+- **declare your element class**
+    ```ts
+    export class MyElement extends BaseElement {
+      static styles = css`span{color:orange}`
+      // custom property
+      start = 10
+      // custom attributes
+      attrs = attributes(this, {
+        multiply: Number
+      })
+      // custom methods
+      hello() {
+        return "world"
+      }
+      render(use: Use) {
+        const $count = use.signal(1)
+        const increment = () => $count.value++
+        const {start} = this
+        const {multiply = 1} = this.attrs
+        const result = start + (multiply * $count())
+        return html`
+          <span>${result}</span>
+          <button @click="${increment}">+</button>
+        `
+      }
+    }
+    ```
+- **register your element to the dom**
+    ```ts
+    dom.register({MyElement})
+    ```
+### 🪵 base element usage
+- **place the element in your html body**
+    ```html
+    <body>
+      <my-element></my-element>
+    </body>
+    ```
+- **now you can interact with it**
+    ```ts
+    const myElement = dom<MyElement>("my-element")
+    // js property
+    myElement.start = 100
+    // html attributes
+    myElement.attr.multiply = 2
+    // methods
+    myElement.hello()
+      // "world"
+    ```
 <br/><br/>
 ## 🦝🪄 sly dom
@@ -277,51 +357,51 @@ import {dom} from "@e280/sly"
 ```
 ### 🪄 dom queries
-- require an element
+- `require` an element
     ```ts
     dom(".demo")
       // HTMLElement (or throws)
     ```
-- maybe get an element
+- `maybe` get an element
     ```ts
     dom.maybe(".demo")
       // HTMLElement | undefined
     ```
-- select all elements
+- `select` all elements
     ```ts
     dom.all(".demo ul li")
       // HTMLElement[]
     ```
-- within a specific container
+- `in` the scope of an element
     ```ts
-    dom.in(element).require("li")
+    dom(element).require("li")
       // HTMLElement (or throws)
     ```
     ```ts
-    dom.in(element).maybe("li")
+    dom(element).maybe("li")
       // HTMLElement | undefined
     ```
     ```ts
-    dom.in(element).all("li")
+    dom(element).all("li")
       // HTMLElement[]
     ```
 ### 🪄 dom utilities
-- register web components
+- `register` web components
     ```ts
     dom.register({MyComponent, AnotherCoolComponent})
       // <my-component>
       // <another-cool-component>
     ```
-- render content into an element
+- `render` content into an element
     ```ts
-    dom.render(element, html`<p>hello world</p>`)
+    dom(element).render(html`<p>hello world</p>`)
     ```
     ```ts
-    dom.in(element).render(html`<p>hello world</p>`)
+    dom.in(".demo").render(html`<p>hello world</p>`)
     ```
     ```ts
-    dom.in(".demo").render(html`<p>hello world</p>`)
+    dom.render(element, html`<p>hello world</p>`)
     ```
@@ -383,7 +463,7 @@ import {Pod, podium, Op, makeLoader, anims} from "@e280/sly"
     ```
 - 🔥 create an op that calls and tracks an async fn
     ```ts
-    const op = Op.fn(async() => {
+    const op = Op.load(async() => {
       await nap(4000)
       return 123
     })

package/package.json CHANGED Viewed

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

package/s/demo/demo.bundle.ts CHANGED Viewed

@@ -2,9 +2,14 @@
 import {dom} from "../dom/dom.js"
 import {DemoView} from "./views/demo.js"
 import {CounterView} from "./views/counter.js"
+import {IncrediElement} from "./views/incredi.js"
 dom.in(".demo").render(DemoView())
-dom.register({DemoCounter: CounterView.component(1)})
+dom.register({
+	IncrediElement,
+	DemoCounter: CounterView.component(1),
+})
 console.log("🦝 sly")

package/s/demo/views/demo.ts CHANGED Viewed

@@ -19,6 +19,7 @@ const styles = css`
 :host {
 	display: flex;
 	flex-direction: column;
+	align-items: center;
 	gap: 1em;
 }
 `

package/s/demo/views/incredi.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import {css, html} from "lit"
+import {nap, repeat} from "@e280/stz"
+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})
+	something = {whatever: "rofl"}
+	render(use: Use) {
+		const {value = 1} = this.attrs
+		const $count = use.signal(0)
+		use.mount(() => repeat(async() => {
+			await nap(10)
+			await $count($count() + 1)
+		}))
+		return html`
+			<span>${$count() * value}</span>
+		`
+	}
+}

package/s/dom/dom.ts CHANGED Viewed

@@ -4,20 +4,29 @@ import {register} from "./register.js"
 import {Content} from "../views/types.js"
 import {Queryable, Renderable} from "./types.js"
+function require<E extends Element>(
+		container: Queryable,
+		selector: string,
+	) {
+	const e = container.querySelector<E>(selector)
+	if (!e) throw new Error(`element not found (${selector})`)
+	return e
+}
 export class Dom<C extends Queryable> {
 	constructor(public element: C) {}
-	in<E extends HTMLElement>(elementOrSelector: E | string) {
-		return new Dom(
-			typeof elementOrSelector === "string"
-				? this.require<E>(elementOrSelector)
-				: elementOrSelector
+	in<E extends HTMLElement>(selectorOrElement: string | E) {
+		return new Dom<E>(
+			(typeof selectorOrElement === "string")
+				? require(this.element, selectorOrElement) as E
+				: selectorOrElement
 		)
 	}
 	require<E extends Element = HTMLElement>(selector: string) {
 		const e = this.element.querySelector<E>(selector)
-		if (!e) throw new Error(`$1 ${selector} not found`)
+		if (!e) throw new Error(`element not found (${selector})`)
 		return e
 	}
@@ -34,18 +43,21 @@ export class Dom<C extends Queryable> {
 	}
 }
-export function dom(selector: string) {
-	return new Dom(document).require(selector)
+export function dom<E extends Queryable>(selector: string): E
+export function dom<E extends Queryable>(element: E): Dom<E>
+export function dom<E extends Queryable>(selectorOrElement: string | E): E | Dom<E> {
+	return (typeof selectorOrElement === "string")
+		? require(document, selectorOrElement) as E
+		: new Dom(selectorOrElement)
 }
 const doc = new Dom(document)
-dom.register = register
-dom.render = (container: Renderable, ...content: Content[]) => {
-	return render(content, container)
-}
 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.register = register
+dom.render = (container: Renderable, ...content: Content[]) => {
+	return render(content, container)
+}

package/s/index.html.ts CHANGED Viewed

@@ -29,6 +29,7 @@ export default ssg.page(import.meta.url, async orb => ({
 		<h1>sly testing page</h1>
 		<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>
 		<demo-counter>component</demo-counter>
 		<div class=demo></div>
 	`,

package/s/index.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 export * from "./dom/dashify.js"
+export * from "./dom/dom.js"
 export * from "./dom/register.js"
 export * from "./dom/types.js"
@@ -13,6 +14,7 @@ export * from "./ops/types.js"
 export * as loot from "./loot/index.js"
 export * from "./views/attributes.js"
+export * from "./views/base-element.js"
 export * from "./views/css-reset.js"
 export * from "./views/types.js"
 export * from "./views/use.js"

package/s/ops/op.ts CHANGED Viewed

@@ -16,7 +16,7 @@ export class Op<V> {
 		return op
 	}
-	static fn<V>(fn: () => Promise<V>) {
+	static load<V>(fn: () => Promise<V>) {
 		return this.promise(fn())
 	}
@@ -74,7 +74,7 @@ export class Op<V> {
 		}
 	}
-	async fn(fn: () => Promise<V>) {
+	async load(fn: () => Promise<V>) {
 		return this.promise(fn())
 	}

package/s/views/attributes.ts CHANGED Viewed

@@ -26,6 +26,12 @@ export type AttrTypes<A extends AttrSpec> = {
 	[P in keyof A]: AttrType<A[P]>
 }
+export function onAttrChange(element: HTMLElement, fn: () => void) {
+	const observer = new MutationObserver(fn)
+	observer.observe(element, {attributes: true})
+	return () => observer.disconnect()
+}
 export const attributes = <A extends AttrSpec>(
 		element: HTMLElement,
 		spec: A,
@@ -81,9 +87,3 @@ export const attributes = <A extends AttrSpec>(
 }) as any as AttrTypes<A>
-export function onAttrChange(element: HTMLElement, fn: () => void) {
-	const observer = new MutationObserver(fn)
-	observer.observe(element, {attributes: true})
-	return () => observer.disconnect()
-}

package/s/views/base-element.ts ADDED Viewed

@@ -0,0 +1,84 @@
+import {CSSResultGroup} from "lit"
+import {tracker} from "@e280/strata"
+import {debounce, MapG} from "@e280/stz"
+import {dom} from "../dom/dom.js"
+import {Content} from "./types.js"
+import {onAttrChange} from "./attributes.js"
+import {applyStyles} from "./utils/apply-styles.js"
+import {Use, _disconnect, _reconnect, _wrap} from "./use.js"
+export abstract class BaseElement extends HTMLElement {
+	static styles: CSSResultGroup | undefined
+	readonly shadow: ShadowRoot
+	#use: Use
+	#mounts = 0
+	#tracking = new MapG<any, () => void>
+	constructor() {
+		super()
+		this.shadow = this.attachShadow({mode: "open"})
+		this.#use = new Use(
+			this,
+			this.shadow,
+			this.updateNow,
+			this.update,
+		)
+	}
+	abstract render(use: Use): Content
+	updateNow = () => {
+		this.#use[_wrap](() => {
+			const {result, seen} = tracker.observe(() => this.render(this.#use))
+			dom.render(this.shadow, result)
+			for (const item of seen)
+				this.#tracking.guarantee(
+					item,
+					() => tracker.subscribe(item, this.update),
+				)
+		})
+	}
+	update = debounce(0, this.updateNow)
+	connectedCallback() {
+		if (this.#mounts === 0) {
+			const styles = (this.constructor as any).styles
+			if (styles)
+				applyStyles(this.shadow, styles)
+			this.updateNow()
+		}
+		else {
+			this.#use[_reconnect]()
+		}
+		this.#attrListening.start()
+		this.#mounts++
+	}
+	disconnectedCallback() {
+		this.#attrListening.stop()
+		this.#use[_disconnect]()
+		for (const untrack of this.#tracking.values())
+			untrack()
+		this.#tracking.clear()
+	}
+	#attrListening = (() => {
+		let stopper: (() => void) | undefined
+		const start = () => {
+			if (stopper) stopper()
+			stopper = onAttrChange(this, () => this.update)
+		}
+		const stop = () => {
+			if (stopper) stopper()
+			stopper = undefined
+		}
+		return {start, stop}
+	})()
+}

package/s/views/use.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import {CSSResultGroup} from "lit"
 import {defer, MapG} from "@e280/stz"
-import {Derive, Lazy, Signal, signal, SignalOptions} from "@e280/strata/signals"
+import {signal, SignalOptions} from "@e280/strata/signals"
 import {Op} from "../ops/op.js"
 import {Mounts} from "./utils/mounts.js"
@@ -94,9 +94,9 @@ export class Use {
 	op = (() => {
 		const that = this
 		function op<V>(f: () => Promise<V>) {
-			return that.once(() => Op.fn(f))
+			return that.once(() => Op.load(f))
 		}
-		op.fn = op as (<V>(f: () => Promise<V>) => Op<V>)
+		op.load = op as (<V>(f: () => Promise<V>) => Op<V>)
 		op.promise = <V>(p: Promise<V>) => this.once(() => Op.promise(p))
 		return op
 	})()

package/s/views/view.ts CHANGED Viewed

@@ -46,11 +46,11 @@ function setupView(settings: ViewSettings) {
 			#renderNow() {
 				if (!this.#params) return
 				if (!this.isConnected) return
-				const {context: w, props} = this.#params
+				const {context, props} = this.#params
 				this.#use[_wrap](() => {
 					// apply html attributes
-					applyAttrs(this.#element, w.attrs)
+					applyAttrs(this.#element, context.attrs)
 					// render the template, tracking strata items
 					const {result, seen} = tracker.observe(() => this.#fn(...props))
@@ -67,12 +67,12 @@ function setupView(settings: ViewSettings) {
 					// inject content into light dom
 					if (!situation.isComponent)
-						render(w.children, this.#element)
+						render(context.children, this.#element)
 				})
 			}
 			render(context: ViewContext, props: Props) {
-				this.#params = {context: context, props}
+				this.#params = {context, props}
 				this.#renderNow()
 				return situation.isComponent ? null : this.#element
 			}

package/x/demo/demo.bundle.js CHANGED Viewed

@@ -1,7 +1,11 @@
 import { dom } from "../dom/dom.js";
 import { DemoView } from "./views/demo.js";
 import { CounterView } from "./views/counter.js";
+import { IncrediElement } from "./views/incredi.js";
 dom.in(".demo").render(DemoView());
-dom.register({ DemoCounter: CounterView.component(1) });
+dom.register({
+    IncrediElement,
+    DemoCounter: CounterView.component(1),
+});
 console.log("🦝 sly");
 //# sourceMappingURL=demo.bundle.js.map

package/x/demo/demo.bundle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,eAAe,CAAA;AACjC,OAAO,EAAC,QAAQ,EAAC,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;~~AAE9C~~,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAA;~~AAClC~~,GAAG,CAAC,QAAQ,CAAC,~~EAAC~~,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,~~EAAC,~~CAAC,CAAA;~~AAErD~~,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}
1	+ {"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,eAAe,CAAA;AACjC,OAAO,EAAC,QAAQ,EAAC,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAA;AAEjD,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAA;AAElC,GAAG,CAAC,QAAQ,CAAC;IACZ,cAAc;IACd,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CACrC,CAAC,CAAA;AAEF,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}