@e280/sly 0.0.0-5 → 0.0.0-7

package/README.md

@@ -28,7 +28,14 @@ views are leaner than web components.. no dom registration, no string tag names.
 
 sly views are wired to automatically rerender whenever they're using any state stuff from [@e280/strata](https://github.com/e280/strata).
 
-### 🍋 basic view example
+- a minimal view looks like this:
+    ```ts
+    import {view} from "@e280/sly"
+
+    view(use => () => "hello world")
+    ```
+
+### 🍋 view example
 - views are hooks-based functional components with a [shadow root](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM)
 - **declaring a view**
     ```ts
@@ -42,7 +49,7 @@ sly views are wired to automatically rerender whenever they're using any state s
 
       return html`
         <p>count ${count()}</p>
-        <button @click="${() => { count.value++ }}"></button>
+        <button @click="${() => { count.value++ }}">+</button>
       `
     })
     ```
@@ -167,6 +174,29 @@ sly views are wired to automatically rerender whenever they're using any state s
     const op = use.op.promise(doAsyncWork())
     ```
 
+### 🍋 web components
+- convert any view into a proper web component
+    ```ts
+    CounterView.component(1)
+    ```
+- or build a component directly
+    ```ts
+    const MyComponent = view(use => html`hello world`)
+    ```
+- register web components to the dom like this
+    ```ts
+    import {$} from "@e280/sly"
+
+    $.register({
+      MyCounter: CounterView.component(1),
+      MyComponent,
+    })
+
+    // <my-counter></my-counter>
+    // <my-component></my-component>
+    ```
+    - `$.register` automatically dashes the tag names (`MyComponent` becomes `<my-component>`)
+
 ### 🍋 neat tricks to impress the ladies
 - make a ticker — mount, repeat, and nap
     ```ts
@@ -189,6 +219,48 @@ sly views are wired to automatically rerender whenever they're using any state s
 
 <br/>
 
+## 🦝 SLY'S `$` DOLLAR DOM MULTITOOL
+- import the `$` and it has a bunch of goodies
+    ```ts
+    import {$} from "@e280/sly"
+    ```
+- query an element (throws an error if not found)
+    ```ts
+    $(".demo")
+      // HTMLElement
+    ```
+
+### queries
+- query an element (undefined if not found)
+    ```ts
+    $.maybe(".demo")
+      // HTMLElement | undefined
+    ```
+- query all elements (returns an array)
+    ```ts
+    $.maybe("ul li")
+      // HTMLElement[]
+    ```
+- query all elements (returns an array)
+    ```ts
+    $.maybe("ul li")
+      // HTMLElement[]
+    ```
+
+### dom stuff
+- register web components
+    ```ts
+    $.register({MyComponent, AnotherCoolComponent})
+      // <my-component>
+      // <another-cool-component>
+    ```
+- render content into an element
+    ```ts
+    $.render(element, html`hello world`)
+    ```
+
+<br/>
+
 ## 🦝 SLY OPS, PODS, AND LOADERS
 > ***TODO*** *we need to write real docs for this, lol*
 - `Pod` is a type for loading/ready/error states

package/package.json

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

package/s/demo/demo.bundle.ts

@@ -1,8 +1,13 @@
 
 import {DemoView} from "./views/demo.js"
 import {$} from "../features/dom/dollar.js"
+import {CounterView} from "./views/counter.js"
 
 $.render($(".demo"), DemoView())
 
+$.register({
+	DemoCounter: CounterView.component(1),
+})
+
 console.log("🦝 sly")
 

package/s/demo/demo.css

@@ -5,7 +5,7 @@
 	:root {
 		--prime: #1eff00;
 		--accent: #387d42;
-		--pill: #12763959;
+		--pill: #1276391a;
 		--bg: #0e2316;
 		--link: cyan;
 	}
@@ -52,6 +52,7 @@
 
 @layer page {
 	:root {
+		height: 100%;
 		font-size: 21px;
 		font-family: sans-serif;
 
@@ -68,9 +69,11 @@
 
 	body {
 		width: 100%;
+		min-height: 100%;
 		max-width: 32em;
 		margin: auto;
 		padding: 1em;
+		padding-bottom: 6em;
 
 		display: flex;
 		flex-direction: column;

package/s/demo/views/counter.ts

@@ -5,7 +5,7 @@ import {repeat} from "@e280/stz"
 import {view} from "../../features/views/view.js"
 import {cssReset} from "../../features/views/css-reset.js"
 
-export const CounterView = view(use => () => {
+export const CounterView = view(use => (initial: number) => {
 	use.name("counter")
 	use.styles(cssReset, styles)
 
@@ -17,10 +17,11 @@ export const CounterView = view(use => () => {
 		seconds(Math.floor(since / 1000))
 	}))
 
-	const count = use.signal(0)
+	const count = use.signal(initial)
 	const increment = () => count(count() + 1)
 
 	return html`
+		<slot></slot>
 		<div>
 			<span>${seconds()}</span>
 		</div>
@@ -34,9 +35,12 @@ export const CounterView = view(use => () => {
 const styles = css`
 :host {
 	display: flex;
-	flex-direction: column;
 	justify-content: center;
-	text-align: center;
+	gap: 1em;
+}
+
+button {
+	padding: 0.2em 0.5em;
 }
 `
 

package/s/demo/views/demo.ts

@@ -10,7 +10,7 @@ export const DemoView = view(use => () => {
 	use.styles(cssReset, styles)
 
 	return html`
-		${CounterView()}
+		${CounterView.children("view")(2)}
 		${LoadersView()}
 	`
 })

package/s/demo/views/loaders.ts

@@ -44,15 +44,28 @@ div {
 
 	display: flex;
 	flex-direction: column;
+	justify-content: center;
 	align-items: center;
-	gap: 0.4em;
+	text-align: center;
 
+	gap: 0.4em;
 	padding: 0.2em 0.5em;
 	background: var(--pill);
 	border-radius: 0.5em;
 
-	span:nth-child(1) { font-size: 0.6em; }
-	span:nth-child(2) { font-size: 1.2em; }
+	span:nth-child(1) {
+		font-size: 0.6em;
+	}
+
+	span:nth-child(2) {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		font-size: 1.2em;
+		min-width: 7em;
+		min-height: 2.5em;
+	}
 }
 `
 

package/s/features/dom/dollar.ts

@@ -1,5 +1,6 @@
 
 import {render} from "lit"
+import {register} from "./register.js"
 import {Content} from "../views/types.js"
 
 export type Container = HTMLElement | ShadowRoot | DocumentFragment
@@ -22,4 +23,5 @@ $.maybe = <E extends HTMLElement = HTMLElement>(selector: string, context: Query
 $.all = all
 
 $.render = (container: Container, ...content: Content[]) => render(content, container)
+$.register = register
 

package/s/features/op/loaders/parts/anims.ts

@@ -2,16 +2,18 @@
 import {makeAsciiAnim} from "./ascii-anim.js"
 import {Content} from "../../../views/types.js"
 
-const hz = 20
+const fast = 20
+const mid = 10
+const slow = 4
 
-export const spinner = makeAsciiAnim(hz, [
+export const spinner = makeAsciiAnim(fast, [
 	"|",
 	"/",
 	"-",
 	"\\",
 ])
 
-export const braille = makeAsciiAnim(hz, [
+export const braille = makeAsciiAnim(fast, [
 	"⠈",
 	"⠐",
 	"⠠",
@@ -22,18 +24,7 @@ export const braille = makeAsciiAnim(hz, [
 	"⠁",
 ])
 
-export const arrow = makeAsciiAnim(hz, [
-	"←",
-	"↖",
-	"↑",
-	"↗",
-	"→",
-	"↘",
-	"↓",
-	"↙",
-])
-
-export const arrow2 = makeAsciiAnim(hz, [
+export const arrow = makeAsciiAnim(fast, [
 	"⬆️",
 	"↗️",
 	"➡️",
@@ -44,7 +35,7 @@ export const arrow2 = makeAsciiAnim(hz, [
 	"↖️",
 ])
 
-export const bar = makeAsciiAnim(hz, [
+export const bar = makeAsciiAnim(fast, [
 	"▰▱▱▱▱",
 	"▰▱▱▱▱",
 	"▱▰▱▱▱",
@@ -57,7 +48,7 @@ export const bar = makeAsciiAnim(hz, [
 	"▱▰▱▱▱",
 ])
 
-export const bar2 = makeAsciiAnim(hz, [
+export const bar2 = makeAsciiAnim(fast, [
 	"▱▱▰▱▱",
 	"▱▱▱▰▱",
 	"▱▱▱▰▰",
@@ -80,7 +71,7 @@ export const bar2 = makeAsciiAnim(hz, [
 	"▱▰▱▱▱",
 ])
 
-export const bar3 = makeAsciiAnim(hz, [
+export const bar3 = makeAsciiAnim(fast, [
 	"▰▱▱▱▱",
 	"▰▱▱▱▱",
 	"▰▰▱▱▱",
@@ -97,7 +88,8 @@ export const bar3 = makeAsciiAnim(hz, [
 	"▰▰▱▱▱",
 ])
 
-export const bar4 = makeAsciiAnim(hz, [
+export const bar4 = makeAsciiAnim(fast, [
+	"▱▱▱▱▱",
 	"▱▱▱▱▱",
 	"▰▱▱▱▱",
 	"▰▰▱▱▱",
@@ -111,14 +103,57 @@ export const bar4 = makeAsciiAnim(hz, [
 	"▱▱▱▱▰",
 ])
 
-export const pie = makeAsciiAnim(hz, [
+export const block = makeAsciiAnim(fast, [
+	"▁▁▁▁▁",
+	"▁▁▁▁▁",
+	"█▁▁▁▁",
+	"██▁▁▁",
+	"███▁▁",
+	"████▁",
+	"█████",
+	"█████",
+	"▁████",
+	"▁▁███",
+	"▁▁▁██",
+	"▁▁▁▁█",
+])
+
+export const block2 = makeAsciiAnim(fast, [
+	"█▁▁▁▁",
+	"█▁▁▁▁",
+	"██▁▁▁",
+	"███▁▁",
+	"████▁",
+	"█████",
+	"█████",
+	"▁████",
+	"▁▁███",
+	"▁▁▁██",
+	"▁▁▁▁█",
+	"▁▁▁▁█",
+	"▁▁▁██",
+	"▁▁███",
+	"▁████",
+	"█████",
+	"█████",
+	"████▁",
+	"███▁▁",
+	"██▁▁▁",
+])
+
+export const runner = makeAsciiAnim(slow, [
+	"🚶",
+	"🏃",
+])
+
+export const pie = makeAsciiAnim(mid, [
 	"◷",
 	"◶",
 	"◵",
 	"◴",
 ])
 
-export const cylon = makeAsciiAnim(hz, [
+export const cylon = makeAsciiAnim(fast, [
 	"=----",
 	"-=---",
 	"--=--",
@@ -131,7 +166,7 @@ export const cylon = makeAsciiAnim(hz, [
 	"=----",
 ])
 
-export const slider = makeAsciiAnim(hz, [
+export const slider = makeAsciiAnim(fast, [
 	"o----",
 	"-o---",
 	"--o--",
@@ -144,7 +179,72 @@ export const slider = makeAsciiAnim(hz, [
 	"o----",
 ])
 
-export const scrubber = makeAsciiAnim(hz, [
+export const brackets = makeAsciiAnim(mid, [
+	"[   ]",
+	"[   ]",
+	"[=  ]",
+	"[== ]",
+	"[===]",
+	"[ ==]",
+	"[  =]",
+])
+
+export const brackets2 = makeAsciiAnim(mid, [
+	"[   ]",
+	"[   ]",
+	"[=  ]",
+	"[== ]",
+	"[===]",
+	"[ ==]",
+	"[  =]",
+	"[   ]",
+	"[   ]",
+	"[  =]",
+	"[ ==]",
+	"[===]",
+	"[== ]",
+	"[=  ]",
+])
+
+export const dots = makeAsciiAnim(mid, [
+	"   ",
+	"   ",
+	".  ",
+	".. ",
+	"...",
+	" ..",
+	"  .",
+])
+
+export const dots2 = makeAsciiAnim(fast, [
+	".  ",
+	".  ",
+	".. ",
+	"...",
+	" ..",
+	"  .",
+	"  .",
+	" ..",
+	"...",
+	".. ",
+])
+
+export const wave = makeAsciiAnim(fast, [
+	".....",
+	".....",
+	":....",
+	"::...",
+	":::..",
+	"::::.",
+	":::::",
+	":::::",
+	".::::",
+	"..:::",
+	"...::",
+	"....:",
+])
+
+export const wavescrub = makeAsciiAnim(fast, [
 	":....",
 	":....",
 	"::...",
@@ -159,7 +259,7 @@ export const scrubber = makeAsciiAnim(hz, [
 	"::...",
 ])
 
-export const pulse = makeAsciiAnim(hz, [
+export const wavepulse = makeAsciiAnim(fast, [
 	".....",
 	".....",
 	"..:..",
@@ -171,7 +271,28 @@ export const pulse = makeAsciiAnim(hz, [
 	":...:",
 ])
 
-export const bin = makeAsciiAnim(hz, [
+export const wavepulse2 = makeAsciiAnim(fast, [
+	".....",
+	".....",
+	"..:..",
+	".:::.",
+	".:::.",
+	":::::",
+	":::::",
+	"::.::",
+	":...:",
+	".....",
+	".....",
+	":...:",
+	"::.::",
+	":::::",
+	":::::",
+	".:::.",
+	".:::.",
+	"..:..",
+])
+
+export const bin = makeAsciiAnim(fast, [
 	"000",
 	"100",
 	"110",
@@ -180,7 +301,7 @@ export const bin = makeAsciiAnim(hz, [
 	"001",
 ])
 
-export const binary = makeAsciiAnim(hz, [
+export const binary = makeAsciiAnim(fast, [
 	"11111",
 	"01111",
 	"00111",
@@ -194,7 +315,7 @@ export const binary = makeAsciiAnim(hz, [
 	"11110",
 ])
 
-export const binary2 = makeAsciiAnim(hz, [
+export const binary2 = makeAsciiAnim(fast, [
 	"11111",
 	"01111",
 	"10111",
@@ -209,7 +330,22 @@ export const binary2 = makeAsciiAnim(hz, [
 	"01111",
 ])
 
-export const clock = makeAsciiAnim(hz, [
+export const pulseblue = makeAsciiAnim(slow, [
+	"🔹",
+	"🔵",
+])
+
+export const kiss = makeAsciiAnim(mid, [
+	"🙂",
+	"🙂",
+	"😗",
+	"😙",
+	"😘",
+	"😘",
+	"😙",
+])
+
+export const clock = makeAsciiAnim(fast, [
 	"🕐",
 	"🕑",
 	"🕒",
@@ -224,7 +360,7 @@ export const clock = makeAsciiAnim(hz, [
 	"🕛",
 ])
 
-export const fistbump = makeAsciiAnim(hz, [
+export const fistbump = makeAsciiAnim(fast, [
 	"🤜    🤛",
 	"🤜    🤛",
 	"🤜    🤛",
@@ -237,23 +373,23 @@ export const fistbump = makeAsciiAnim(hz, [
 	"🤜 ✨ 🤛",
 ])
 
-export const earth = makeAsciiAnim(4, [
+export const earth = makeAsciiAnim(slow, [
 	"🌎",
 	"🌏",
 	"🌍",
 ])
 
-export const lock = makeAsciiAnim(4, [
+export const lock = makeAsciiAnim(slow, [
 	"🔓",
 	"🔒",
 ])
 
-export const bright = makeAsciiAnim(4, [
+export const bright = makeAsciiAnim(slow, [
 	"🔅",
 	"🔆",
 ])
 
-export const speaker = makeAsciiAnim(4, [
+export const speaker = makeAsciiAnim(slow, [
 	"🔈",
 	"🔈",
 	"🔉",
@@ -262,7 +398,7 @@ export const speaker = makeAsciiAnim(4, [
 	"🔉",
 ])
 
-export const moon = makeAsciiAnim(10, [
+export const moon = makeAsciiAnim(mid, [
 	"🌑",
 	"🌑",
 	"🌑",

package/s/features/views/types.ts

@@ -1,4 +1,5 @@
 
+import {Constructor} from "@e280/stz"
 import {DirectiveResult} from "lit/directive.js"
 import {CSSResultGroup, TemplateResult} from "lit"
 
@@ -7,6 +8,11 @@ import {Use} from "./use.js"
 export type Content = TemplateResult | DirectiveResult | HTMLElement | string | null | undefined | void | Content[]
 export type AttrValue = string | boolean | number | undefined | null | void
 
+export type Component<Props extends any[] = []> = {
+	render(...props: Props): void
+} & HTMLElement
+
+export type ComponentFn = (use: Use) => Content
 export type ViewFn<Props extends any[]> = (use: Use) => (...props: Props) => Content
 export type BasicView<Props extends any[]> = (...props: Props) => DirectiveResult<any>
 export type View<Props extends any[]> = BasicView<Props> & {
@@ -15,6 +21,7 @@ export type View<Props extends any[]> = BasicView<Props> & {
 	children: (...children: Content[]) => View<Props>
 	attrs: (attrs: Record<string, AttrValue>) => View<Props>
 	attr: (name: string, value: AttrValue) => View<Props>
+	component: (...props: Props) => Constructor<Component>
 }
 
 export type ViewSettings = ShadowRootInit & {

package/s/features/views/use.ts

@@ -18,12 +18,13 @@ export class Use {
 	#rendered = defer()
 	#mounts = new Mounts()
 
-	;[_wrap](fn: () => void) {
+	;[_wrap]<R>(fn: () => R) {
 		this.#runs++
 		this.#position = 0
 		this.#rendered = defer()
-		fn()
+		const result = fn()
 		this.#rendered.resolve()
+		return result
 	}
 
 	;[_disconnect]() {