@e280/sly 0.3.0-1 → 0.3.0-2

package/README.md

@@ -10,7 +10,7 @@ npm install lit @e280/sly @e280/strata @e280/stz
 
 [@e280](https://e280.org/)'s new [lit](https://lit.dev/)-based frontend webdev library.
 
-- 🍋 [**#views**](#views) — hooks-based, shadow-dom'd, template-literal'd
+- 🎭 [**#views**](#views) — light-dom or shadow-dom reactive lit views
 - 🪝 [**#hooks**](#hooks) — full reference of available view hooks
 - 🫛 [**#ops**](#ops) — reactive tooling for async operations
 - ⏳ [**#loaders**](#loaders) — animated loading spinners for rendering ops
@@ -23,12 +23,13 @@ npm install lit @e280/sly @e280/strata @e280/stz
 <br/><br/>
 <a id="views"></a>
 
-## 🍋 views
-> *modern views.. in lightness, or darkness..*  
+## 🎭 views
+> *reactive views, light or shadow*  
 
 - 🪶 **no compile step** — just god's honest javascript, via [lit](https://lit.dev/)-html tagged-template-literals
 - ⚡ **reactive** — views auto-rerender whenever any [strata](https://github.com/e280/strata)-compatible state changes
-- 🪝 **hooks-based** — declarative rendering with [modern hooks](#hooks) familiar to react devs
+- 🪝 **hooks-based** — familiar react-style [hooks](#hooks)
+- 🌗 **light or shadow** — render directly in the dom, or inside a shadow-dom bubble
 
 ```ts
 import {html} from "lit"
@@ -58,7 +59,7 @@ export const MyShadowView = shadow(() => html`<p>shrouded in darkness</p>`)
     ```
 - **render it into the dom**
     ```ts
-    dom.in(".demo").render(html`
+    dom.render(dom(".demo"), html`
       <h1>my cool counter demo</h1>
       ${MyCounter(123)}
     `)
@@ -87,14 +88,14 @@ export const MyShadowView = shadow(() => html`<p>shrouded in darkness</p>`)
     ```
 - **render it into the dom**
     ```ts
-    dom.in(".demo").render(html`
+    dom.render(dom(".demo"), html`
       <h1>my cool counter demo</h1>
       ${MyShadowCounter(234)}
     `)
     ```
 - **.with to nest children or set attrs**
     ```ts
-    dom.in(".demo").render(html`
+    dom.render(dom(".demo"), html`
       <h1>my cool counter demo</h1>
 
       ${MyShadowCounter.with({
@@ -106,9 +107,9 @@ export const MyShadowView = shadow(() => html`<p>shrouded in darkness</p>`)
       })}
     `)
     ```
-- **oh, you can do custom shadow config if needed**
+- **you can do custom shadow config if needed**
     ```ts
-    const MyCustomShadow = shadow.config(() => {
+    const MyShadowView = shadow.config(() => {
       const host = document.createElement("div")
       const shadow = host.attachShadow({mode: "open"})
       return {host, shadow}
@@ -661,10 +662,10 @@ import {dom} from "@e280/sly"
     ```
     or if you wanna be more loosey-goosey, skip the spec
     ```ts
-    const a = dom.in(".demo").attrs
-    a.strings.name = "pimsley"
-    a.numbers.count = 125
-    a.booleans.active = true
+    const {attrs} = dom.in(".demo")
+    attrs.strings.name = "pimsley"
+    attrs.numbers.count = 125
+    attrs.booleans.active = true
     ```
 
 

package/package.json

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

package/s/demo/demo.bundle.ts

@@ -2,6 +2,6 @@
 import {dom} from "../dom/dom.js"
 import {Demo} from "./views/demo.js"
 
-dom.in(".demo").render(Demo())
+dom.render(dom(".demo"), Demo())
 console.log("🦝 sly")
 

package/s/dom/dom.ts

@@ -11,7 +11,7 @@ import {register} from "./parts/register.js"
 import {Queryable, Renderable} from "./types.js"
 import {queryAll, queryMaybe, queryRequire} from "./parts/queries.js"
 
-export function dom<E extends Element>(selector: string, container: Queryable = document): E {
+export function dom<E extends HTMLElement>(selector: string, container: Queryable = document) {
 	return queryRequire<E>(selector, container)
 }
 

package/s/view/shadow.ts

@@ -28,7 +28,7 @@ shadow.config = (setupFn: () => ShadowSetup) => (
 	)
 )
 
-export function rawShadow<Props extends any[]>(
+function rawShadow<Props extends any[]>(
 		setup: () => ShadowSetup,
 		view: View<Props>,
 	) {

package/x/demo/demo.bundle.js

@@ -1,5 +1,5 @@
 import { dom } from "../dom/dom.js";
 import { Demo } from "./views/demo.js";
-dom.in(".demo").render(Demo());
+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,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAA;AAC9B,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;AAEpC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;AAChC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}

package/x/demo/demo.bundle.min.js

@@ -90,7 +90,7 @@ div {
 		align-items: center;
 		gap: 1em;
 	}
-`;y.in(".demo").render(Ye());console.log("\u{1F99D} sly");
+`;y.render(y(".demo"),Ye());console.log("\u{1F99D} sly");
 /*! Bundled license information:
 
 @lit/reactive-element/css-tag.js: