@e280/sly 0.3.0-7 → 0.3.0-9

package/README.md

@@ -23,12 +23,13 @@ npm install lit @e280/sly @e280/strata @e280/stz
 <a id="views"></a>
 
 ## 🎭 views
-> *"flourish in the light.. or thrive in the darkness"*
+> *reactive lit-html views*
 
+- 🔮 [**see codepen demo,**](https://codepen.io/editor/ChaseMoskal/pen/019cd681-722b-7f51-a961-bc16e3d524a9) plain html (no build!)
 - 🌗 **light or shadow,** render nakedly on the page, or within a cozy shadow bubble
 - 🪝 **hooks-based,** familiar react-style [hooks](#hooks)
 - ⚡ **auto-reactive,** views magically rerender on [strata](https://github.com/e280/strata)-compatible state changes
-- 🪶 **no compile step,** just god's honest javascript via [lit](https://lit.dev/)-html tagged-template-literals
+- 🪶 **no compile step,** just god's honest javascript via [lit](https://lit.dev/)-html tagged-templates
 - 🧩 **not web components,** no dom registration needed, just vibes and good typings
 
 ```ts
@@ -41,7 +42,7 @@ export const MyShadowView = shadow(() => html`<p>shrouded in darkness</p>`)
 ```
 
 ### 🌞 light views
-> *"just pretend it's react, without jsx"*
+> *just pretend it's like react!*
 
 - **define a light view**
     ```ts
@@ -64,12 +65,9 @@ export const MyShadowView = shadow(() => html`<p>shrouded in darkness</p>`)
       ${MyCounter(123)}
     `)
     ```
-    - light views have no host element, rendered output looks like:
-        ```html
-        <h1>my cool counter demo</h1>
-        <button>123</button>
-        ```
-- **light views are naked,** they don't have a containing host element
+- **remember, light views are naked.**  
+    so they don't have a containing host element,  
+    and they can't have their own styles.  
 
 ### 🌚 shadow views
 > *each shadow view gets its own cozy [shadow-dom](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) bubble and supports [slotting](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots)*
@@ -132,6 +130,24 @@ export const MyShadowView = shadow(() => html`<p>shrouded in darkness</p>`)
     const MyShadowView = customShadow(() => html`<p>shrouded in darkness</p>`)
     ```
 
+### 🍨 web components
+> *web-native custom elements*
+
+- **they use hooks like the views, but they don't take props**
+    ```ts
+    import {html} from "lit"
+    import {lightElement, shadowElement} from "@e280/sly"
+
+    const MyLight = lightElement(() => html`hello`)
+    const MyShadow = shadowElement(() => html`hello`)
+
+    dom.register({MyLight, MyShadow})
+    ```
+    ```html
+    <my-light></my-light>
+    <my-shadow></my-shadow>
+    ```
+
 
 
 <br/><br/>
@@ -164,6 +180,16 @@ you must not call these hooks under if-conditionals, or for-loops, or inside cal
     ```ts
     const shadow = useShadow()
     ```
+- **useAttrs,** access host element attributes (and rerender on attr changes)
+    ```ts
+    const attrs = useAttrs({
+      name: String,
+      count: Number,
+      active: Boolean,
+    })
+
+    attrs.count = 123 // set the attr
+    ```
 
 ### 🌞 universal hooks
 - **useState,** react-like hook to create some reactive state (we prefer signals)
@@ -313,7 +339,7 @@ import {Pod, podium, Op, loaders} from "@e280/sly"
     podium.value(["ready", 123])
       // 123
     ```
-- see more at [podium.ts](./s/ops/podium.ts)
+- see more at [podium.ts](./s/op/podium.ts)
 
 ### 🫛 ops: nice pod ergonomics
 - an `Op<V>` wraps a pod with a strata signal for reactivity

package/package.json

@@ -1,50 +1,43 @@
 {
 	"name": "@e280/sly",
-	"version": "0.3.0-7",
+	"version": "0.3.0-9",
 	"description": "web shadow views",
 	"license": "MIT",
 	"type": "module",
+	"files": [
+		"x",
+		"s"
+	],
 	"main": "./x/index.js",
 	"exports": {
 		".": "./x/index.js",
 		"./dom": "./x/dom/index.js",
-		"./loaders": "./x/loaders/index.js",
+		"./loader": "./x/loader/index.js",
 		"./loot": "./x/loot/index.js",
-		"./ops": "./x/ops/index.js",
+		"./op": "./x/op/index.js",
 		"./view": "./x/view/index.js"
 	},
-	"files": [
-		"x",
-		"s"
-	],
+	"scripts": {
+		"build": "rm -rf x && mkdir x && ln -s '$(realpath s)' x/s && ln -s '$(realpath assets)' x/assets && tsc && scute -v",
+		"start": "octo 'tsc -w' 'scute -wv' 'node --watch x/test.js' 'http-server x'",
+		"count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +",
+		"test": "node x/test.js"
+	},
 	"peerDependencies": {
 		"lit": "^3.3.2"
 	},
 	"dependencies": {
-		"@e280/strata": "^0.3.0-1",
+		"@e280/strata": "^0.3.0-2",
 		"@e280/stz": "^0.2.24"
 	},
 	"devDependencies": {
+		"@e280/octo": "^0.1.0-12",
 		"@e280/science": "^0.1.8",
-		"@e280/scute": "^0.2.2",
+		"@e280/scute": "^0.3.0-1",
 		"http-server": "^14.1.1",
 		"npm-run-all": "^4.1.5",
 		"typescript": "^5.9.3"
 	},
-	"scripts": {
-		"build": "run-s _clean _ln _tsc _scute",
-		"start": "octo 'scute -vw' 'tsc -w' 'node --watch x/tests.test.js' 'http-server x'",
-		"count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +",
-		"test": "node x/tests.test.js",
-		"test-inspect": "node inspect x/tests.test.js",
-		"_clean": "rm -rf x && mkdir x",
-		"_tsc": "tsc",
-		"_scute": "scute -v",
-		"_ln": "run-s _ln:s _ln:assets",
-		"_ln:s": "ln -s \"$(realpath s)\" x/s",
-		"_ln:assets": "ln -s \"$(realpath assets)\" x/assets",
-		"_lnx:stz": "rm -rf node_modules/@e280/stz && ln -s \"$(realpath ../stz)\" node_modules/@e280/stz"
-	},
 	"author": "Chase Moskal <chasemoskal@gmail.com>",
 	"homepage": "https://github.com/e280/sly#readme",
 	"repository": {
@@ -55,9 +48,10 @@
 		"url": "https://github.com/e280/sly/issues"
 	},
 	"keywords": [
+		"lit",
+		"views",
 		"shadow views",
 		"shadow dom",
-		"components",
-		"lit"
+		"components"
 	]
 }

package/s/demo/demo.bundle.ts

@@ -1,6 +1,10 @@
 
 import {dom} from "../dom/dom.js"
 import {Demo} from "./views/demo.js"
+import {TimeLight} from "./views/time-light.js"
+import {TimeShadow} from "./views/time-shadow.js"
+
+dom.register({TimeShadow, TimeLight})
 
 dom.render(dom(".demo"), Demo())
 console.log("🦝 sly")

package/s/demo/views/demo.ts

@@ -20,6 +20,9 @@ export const Demo = shadow(() => {
 			})}
 		</p>
 
+		<time-shadow></time-shadow>
+		<time-light></time-light>
+
 		${LoadersView()}
 	`
 })

package/s/demo/views/loaders.ts

@@ -1,8 +1,8 @@
 
 import {css, html} from "lit"
-import {Op} from "../../ops/op.js"
+import {Op} from "../../op/op.js"
 import {shadow} from "../../view/shadow.js"
-import {loaders} from "../../loaders/index.js"
+import {loaders} from "../../loader/index.js"
 import {cssReset, useName, useOnce, useStyles} from "../../view/index.js"
 
 export const LoadersView = shadow(() => {

package/s/demo/views/time-light.ts

@@ -0,0 +1,19 @@
+
+import {html} from "lit"
+import {cycle, nap} from "@e280/stz"
+import {useMount, useSignal} from "../../view/index.js"
+import {lightElement} from "../../view/elements/light.js"
+
+export class TimeLight extends lightElement(() => {
+	const $time = useSignal(Date.now())
+
+	useMount(() => cycle(async() => {
+		await nap(100)
+		$time(Date.now())
+	}))
+
+	return html`
+		<p>${$time()}</p>
+	`
+}) {}
+

package/s/demo/views/time-shadow.ts

@@ -0,0 +1,22 @@
+
+import {css, html} from "lit"
+import {cycle, nap} from "@e280/stz"
+import {shadowElement} from "../../view/elements/shadow.js"
+import {useCss, useMount, useName, useSignal} from "../../view/index.js"
+
+export class TimeShadow extends shadowElement(() => {
+	useName("time-shadow")
+	useCss(css`:host{display:inline-block} button{color:cyan}`)
+
+	const $time = useSignal(Date.now())
+
+	useMount(() => cycle(async() => {
+		await nap(100)
+		$time(Date.now())
+	}))
+
+	return html`
+		<p>${$time()}</p>
+	`
+}) {}
+

package/s/index.ts

@@ -1,7 +1,7 @@
 
 export * from "./dom/index.js"
-export * from "./loaders/index.js"
+export * from "./loader/index.js"
 export * from "./loot/index.js"
-export * from "./ops/index.js"
+export * from "./op/index.js"
 export * from "./view/index.js"
 

package/s/{loaders → loader}/index.barrel.ts

@@ -1,6 +1,5 @@
 
 export * as anims from "./parts/anims.js"
-export type * from "./parts/anims.js"
 export * from "./parts/ascii-anim.js"
 export * from "./parts/error-display.js"
 export * from "./make.js"

package/s/{loaders → loader}/index.ts

@@ -1,4 +1,3 @@
 
 export * as loaders from "./index.barrel.js"
-export type * from "./index.barrel.js"
 

package/s/{loaders → loader}/types.ts

@@ -1,5 +1,5 @@
 
-import type {Op} from "../ops/op.js"
+import type {Op} from "../op/op.js"
 import type {Content} from "../view/types.js"
 
 export type Loader = <V>(op: Op<V>, ready: (value: V) => Content) => Content

package/s/view/elements/light.ts

@@ -0,0 +1,14 @@
+
+import {render} from "lit"
+import {light} from "../light.js"
+import {Content} from "../types.js"
+
+export function lightElement(view: () => Content) {
+	const fn = light(view)
+
+	return class extends HTMLElement {
+		connectedCallback() { render(fn(), this) }
+		disconnectedCallback() { render(null, this) }
+	}
+}
+

package/s/view/elements/shadow.ts

@@ -0,0 +1,52 @@
+
+import {microbounce} from "@e280/stz"
+import {render as litRender} from "lit"
+import {Content} from "../types.js"
+import {ShadowCx} from "../parts/cx.js"
+import {hooks} from "../hooks/plumbing/hooks.js"
+import {Reactivity} from "../parts/reactivity.js"
+import {Hookscope} from "../hooks/plumbing/hookscope.js"
+
+export function shadowElement(view: () => Content) {
+	return class extends HTMLElement {
+		#cx
+		#hookscope
+		#reactivity = new Reactivity()
+		#shadow = this.attachShadow({mode: "open"})
+
+		constructor() {
+			super()
+			const rerender = microbounce(() => {
+				if (!this.isConnected) return
+				const content = this.#renderContent()
+				litRender(content, this.#cx.shadow)
+				this.#cx.doneRender()
+			})
+			this.#cx = new ShadowCx(rerender, this, this.#shadow)
+			this.#hookscope = new Hookscope(this.#cx)
+		}
+
+		#renderContent() {
+			return this.#reactivity.observe(
+				() => hooks.wrap(this.#hookscope, () => view()),
+				this.#cx.render,
+			)
+		}
+
+		render() {
+			litRender(this.#renderContent(), this.#cx.shadow)
+			this.#cx.doneRender()
+		}
+
+		connectedCallback() {
+			this.#hookscope.mounts.remountAll()
+			this.#cx.render()
+		}
+
+		disconnectedCallback() {
+			this.#hookscope.mounts.unmountAll()
+			this.#reactivity.clear()
+		}
+	}
+}
+

package/s/view/hooks/use-attrs.ts

@@ -0,0 +1,14 @@
+
+import {dom} from "../../dom/dom.js"
+import {useOnce} from "./use-once.js"
+import {useMount} from "./use-mount.js"
+import {AttrSpec} from "../../dom/types.js"
+import {useHost, useRender} from "./use-cx.js"
+
+export function useAttrs<A extends AttrSpec>(spec: A) {
+	const host = useHost()
+	const rerender = useRender()
+	useMount(() => dom.attrs(host).on(rerender))
+	return useOnce(() => dom.attrs(host).spec(spec))
+}
+

package/s/view/hooks/use-op.ts

@@ -1,5 +1,5 @@
 
-import {Op} from "../../ops/op.js"
+import {Op} from "../../op/op.js"
 import {useOnce} from "./use-once.js"
 
 export function useOp<Value>(fn: () => Promise<Value>) {

package/s/view/index.ts

@@ -2,6 +2,10 @@
 export * from "./common/css-reset.js"
 export * from "./common/sly-shadow.js"
 
+export * from "./elements/light.js"
+export * from "./elements/shadow.js"
+
+export * from "./hooks/use-attrs.js"
 export * from "./hooks/use-css.js"
 export * from "./hooks/use-cx.js"
 export * from "./hooks/use-life.js"

package/x/demo/demo.bundle.js

@@ -1,5 +1,8 @@
 import { dom } from "../dom/dom.js";
 import { Demo } from "./views/demo.js";
+import { TimeLight } from "./views/time-light.js";
+import { TimeShadow } from "./views/time-shadow.js";
+dom.register({ TimeShadow, TimeLight });
 dom.render(dom(".demo"), Demo());
 console.log("🦝 sly");
 //# sourceMappingURL=demo.bundle.js.map

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

@@ -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,IAAI,EAAC,MAAM,iBAAiB,CAAA;AAEpC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;AAChC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}
+{"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,IAAI,EAAC,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAA;AAEjD,GAAG,CAAC,QAAQ,CAAC,EAAC,UAAU,EAAE,SAAS,EAAC,CAAC,CAAA;AAErC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;AAChC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}