@e280/sly 0.2.0-17 → 0.2.0-18
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.
- package/README.md +47 -30
- package/package.json +3 -2
- package/s/{ui/base-element.ts → base/element.ts} +5 -5
- package/s/base/index.ts +5 -0
- package/s/{ui/base → base}/use.ts +4 -5
- package/s/{ui/base → base}/utils/attr-watcher.ts +1 -1
- package/s/base/utils/use-attrs.ts +27 -0
- package/s/demo/views/counter.ts +3 -3
- package/s/demo/views/demo.ts +2 -2
- package/s/demo/views/fastcount.ts +2 -2
- package/s/demo/views/loaders.ts +2 -2
- package/s/dom/attrs/attrs.ts +3 -3
- package/s/dom/attrs/parts/attr-proxies.ts +3 -3
- package/s/dom/dom.ts +1 -1
- package/s/dom/parts/el.ts +2 -2
- package/s/index.ts +1 -1
- package/s/loaders/make.ts +1 -1
- package/s/loaders/parts/anims.ts +1 -1
- package/s/loaders/parts/ascii-anim.ts +3 -3
- package/s/loaders/parts/error-display.ts +2 -2
- package/s/loaders/types.ts +1 -1
- package/s/spa/plumbing/braces.ts +1 -1
- package/s/spa/plumbing/router-core.ts +1 -1
- package/s/spa/plumbing/types.ts +1 -1
- package/s/spa/router.ts +1 -1
- package/s/view/index.ts +6 -0
- package/s/{ui → view}/types.ts +3 -3
- package/s/{ui/view → view/utils}/make-component.ts +3 -3
- package/s/{ui/view → view/utils}/make-view.ts +1 -1
- package/s/{ui/view → view/utils}/parts/capsule.ts +3 -3
- package/s/{ui → view}/view.ts +3 -3
- package/x/base/css-reset.js.map +1 -0
- package/x/{ui/base-element.d.ts → base/element.d.ts} +2 -2
- package/x/{ui/base-element.js → base/element.js} +5 -5
- package/x/base/element.js.map +1 -0
- package/x/base/index.d.ts +3 -0
- package/x/base/index.js +4 -0
- package/x/base/index.js.map +1 -0
- package/x/{ui/base → base}/use.d.ts +3 -3
- package/x/{ui/base → base}/use.js +3 -3
- package/x/base/use.js.map +1 -0
- package/x/base/utils/apply-styles.js.map +1 -0
- package/x/{ui/base → base}/utils/attr-watcher.js +1 -1
- package/x/base/utils/attr-watcher.js.map +1 -0
- package/x/base/utils/mounts.js.map +1 -0
- package/x/base/utils/reactor.js.map +1 -0
- package/x/base/utils/use-attrs.d.ts +11 -0
- package/x/base/utils/use-attrs.js +19 -0
- package/x/base/utils/use-attrs.js.map +1 -0
- package/x/demo/demo.bundle.min.js +15 -15
- package/x/demo/demo.bundle.min.js.map +4 -4
- package/x/demo/views/counter.d.ts +4 -4
- package/x/demo/views/counter.js +3 -3
- package/x/demo/views/counter.js.map +1 -1
- package/x/demo/views/demo.d.ts +1 -1
- package/x/demo/views/demo.js +2 -2
- package/x/demo/views/demo.js.map +1 -1
- package/x/demo/views/fastcount.d.ts +2 -2
- package/x/demo/views/fastcount.js +1 -1
- package/x/demo/views/fastcount.js.map +1 -1
- package/x/demo/views/loaders.js +2 -2
- package/x/demo/views/loaders.js.map +1 -1
- package/x/dom/attrs/attrs.d.ts +3 -3
- package/x/dom/attrs/attrs.js +3 -3
- package/x/dom/attrs/attrs.js.map +1 -1
- package/x/dom/attrs/parts/attr-proxies.d.ts +3 -3
- package/x/dom/attrs/parts/attr-proxies.js +3 -3
- package/x/dom/attrs/parts/attr-proxies.js.map +1 -1
- package/x/dom/dom.d.ts +4 -4
- package/x/dom/parts/el.d.ts +1 -1
- package/x/dom/parts/el.js +1 -1
- package/x/dom/parts/el.js.map +1 -1
- package/x/index.d.ts +1 -1
- package/x/index.html +2 -2
- package/x/index.js +1 -1
- package/x/index.js.map +1 -1
- package/x/loaders/make.d.ts +1 -1
- package/x/loaders/parts/anims.d.ts +1 -1
- package/x/loaders/parts/ascii-anim.d.ts +2 -2
- package/x/loaders/parts/ascii-anim.js +2 -2
- package/x/loaders/parts/ascii-anim.js.map +1 -1
- package/x/loaders/parts/error-display.js +2 -2
- package/x/loaders/parts/error-display.js.map +1 -1
- package/x/loaders/types.d.ts +1 -1
- package/x/spa/plumbing/braces.d.ts +1 -1
- package/x/spa/plumbing/router-core.d.ts +1 -1
- package/x/spa/plumbing/types.d.ts +1 -1
- package/x/spa/router.d.ts +1 -1
- package/x/view/index.d.ts +4 -0
- package/x/view/index.js +5 -0
- package/x/view/index.js.map +1 -0
- package/x/{ui → view}/types.d.ts +3 -3
- package/x/{ui → view}/types.js.map +1 -1
- package/x/{ui/view → view/utils}/make-component.d.ts +1 -1
- package/x/{ui/view → view/utils}/make-component.js +1 -1
- package/x/view/utils/make-component.js.map +1 -0
- package/x/{ui/view → view/utils}/make-view.js +1 -1
- package/x/view/utils/make-view.js.map +1 -0
- package/x/{ui/view → view/utils}/parts/capsule.js +3 -3
- package/x/view/utils/parts/capsule.js.map +1 -0
- package/x/view/utils/parts/chain.js.map +1 -0
- package/x/view/utils/parts/context.js.map +1 -0
- package/x/view/utils/parts/directive.js.map +1 -0
- package/x/view/utils/parts/set-attrs.js.map +1 -0
- package/x/view/utils/parts/sly-view.js.map +1 -0
- package/x/{ui → view}/view.d.ts +2 -2
- package/x/{ui → view}/view.js +2 -2
- package/x/view/view.js.map +1 -0
- package/s/ui/index.ts +0 -9
- package/x/ui/base/css-reset.js.map +0 -1
- package/x/ui/base/use.js.map +0 -1
- package/x/ui/base/utils/apply-styles.js.map +0 -1
- package/x/ui/base/utils/attr-watcher.js.map +0 -1
- package/x/ui/base/utils/mounts.js.map +0 -1
- package/x/ui/base/utils/reactor.js.map +0 -1
- package/x/ui/base-element.js.map +0 -1
- package/x/ui/index.d.ts +0 -7
- package/x/ui/index.js +0 -8
- package/x/ui/index.js.map +0 -1
- package/x/ui/view/make-component.js.map +0 -1
- package/x/ui/view/make-view.js.map +0 -1
- package/x/ui/view/parts/capsule.js.map +0 -1
- package/x/ui/view/parts/chain.js.map +0 -1
- package/x/ui/view/parts/context.js.map +0 -1
- package/x/ui/view/parts/directive.js.map +0 -1
- package/x/ui/view/parts/set-attrs.js.map +0 -1
- package/x/ui/view/parts/sly-view.js.map +0 -1
- package/x/ui/view.js.map +0 -1
- /package/s/{ui/base → base}/css-reset.ts +0 -0
- /package/s/{ui/base → base}/utils/apply-styles.ts +0 -0
- /package/s/{ui/base → base}/utils/mounts.ts +0 -0
- /package/s/{ui/base → base}/utils/reactor.ts +0 -0
- /package/s/{ui/view → view/utils}/parts/chain.ts +0 -0
- /package/s/{ui/view → view/utils}/parts/context.ts +0 -0
- /package/s/{ui/view → view/utils}/parts/directive.ts +0 -0
- /package/s/{ui/view → view/utils}/parts/set-attrs.ts +0 -0
- /package/s/{ui/view → view/utils}/parts/sly-view.ts +0 -0
- /package/x/{ui/base → base}/css-reset.d.ts +0 -0
- /package/x/{ui/base → base}/css-reset.js +0 -0
- /package/x/{ui/base → base}/utils/apply-styles.d.ts +0 -0
- /package/x/{ui/base → base}/utils/apply-styles.js +0 -0
- /package/x/{ui/base → base}/utils/attr-watcher.d.ts +0 -0
- /package/x/{ui/base → base}/utils/mounts.d.ts +0 -0
- /package/x/{ui/base → base}/utils/mounts.js +0 -0
- /package/x/{ui/base → base}/utils/reactor.d.ts +0 -0
- /package/x/{ui/base → base}/utils/reactor.js +0 -0
- /package/x/{ui → view}/types.js +0 -0
- /package/x/{ui/view → view/utils}/make-view.d.ts +0 -0
- /package/x/{ui/view → view/utils}/parts/capsule.d.ts +0 -0
- /package/x/{ui/view → view/utils}/parts/chain.d.ts +0 -0
- /package/x/{ui/view → view/utils}/parts/chain.js +0 -0
- /package/x/{ui/view → view/utils}/parts/context.d.ts +0 -0
- /package/x/{ui/view → view/utils}/parts/context.js +0 -0
- /package/x/{ui/view → view/utils}/parts/directive.d.ts +0 -0
- /package/x/{ui/view → view/utils}/parts/directive.js +0 -0
- /package/x/{ui/view → view/utils}/parts/set-attrs.d.ts +0 -0
- /package/x/{ui/view → view/utils}/parts/set-attrs.js +0 -0
- /package/x/{ui/view → view/utils}/parts/sly-view.d.ts +0 -0
- /package/x/{ui/view → view/utils}/parts/sly-view.js +0 -0
package/README.md
CHANGED
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
<br/><br/>
|
|
21
21
|
|
|
22
22
|
## 🦝 sly and friends
|
|
23
|
+
> `@e280/sly`
|
|
23
24
|
|
|
24
25
|
```sh
|
|
25
26
|
npm install @e280/sly lit @e280/strata @e280/stz
|
|
@@ -31,13 +32,17 @@ npm install @e280/sly lit @e280/strata @e280/stz
|
|
|
31
32
|
> - 🏂 [@e280/stz](https://github.com/e280/stz), our ts standard library
|
|
32
33
|
> - 🐢 [@e280/scute](https://github.com/e280/scute), our buildy-bundly-buddy
|
|
33
34
|
|
|
35
|
+
> [!TIP]
|
|
36
|
+
> you can import everything in sly from `@e280/sly`, or from specific subpackages like `@e280/sly/view`, `@e280/sly/dom`, etc...
|
|
37
|
+
|
|
34
38
|
|
|
35
39
|
|
|
36
40
|
<br/><br/>
|
|
37
41
|
<a id="views"></a>
|
|
38
42
|
|
|
39
43
|
## 🍋🦝 sly views
|
|
40
|
-
>
|
|
44
|
+
> `@e280/sly/view`
|
|
45
|
+
> *the crown jewel of sly*
|
|
41
46
|
|
|
42
47
|
```ts
|
|
43
48
|
view(use => () => html`<p>hello world</p>`)
|
|
@@ -280,19 +285,30 @@ import {html, css} from "lit"
|
|
|
280
285
|
v // 123
|
|
281
286
|
```
|
|
282
287
|
- **use.attrs** — ergonomic typed html attribute access
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
288
|
+
- `use.attrs` is a bit different than `dom.attrs`, just to properly memoize .spec and .on for the render fn
|
|
289
|
+
- use.attrs.spec
|
|
290
|
+
```ts
|
|
291
|
+
const attrs = use.attrs.spec({
|
|
292
|
+
name: String,
|
|
293
|
+
count: Number,
|
|
294
|
+
active: Boolean,
|
|
295
|
+
})
|
|
296
|
+
```
|
|
297
|
+
```ts
|
|
298
|
+
attrs.name // "chase"
|
|
299
|
+
attrs.count // 123
|
|
300
|
+
attrs.active // true
|
|
301
|
+
```
|
|
302
|
+
- use.attrs.(strings/numbers/booleans)
|
|
303
|
+
```ts
|
|
304
|
+
use.attrs.strings.name // "chase"
|
|
305
|
+
use.attrs.numbers.count // 123
|
|
306
|
+
use.attrs.booleans.active // true
|
|
307
|
+
```
|
|
308
|
+
- use.attrs.on
|
|
309
|
+
```ts
|
|
310
|
+
use.attrs.on(() => console.log("an attribute changed"))
|
|
311
|
+
```
|
|
296
312
|
- **use.render** — rerender the view (debounced)
|
|
297
313
|
```ts
|
|
298
314
|
use.render()
|
|
@@ -346,7 +362,8 @@ import {html, css} from "lit"
|
|
|
346
362
|
<a id="base-element"></a>
|
|
347
363
|
|
|
348
364
|
## 🪵🦝 sly base element
|
|
349
|
-
>
|
|
365
|
+
> `@e280/sly/base`
|
|
366
|
+
> *the classic experience*
|
|
350
367
|
|
|
351
368
|
```ts
|
|
352
369
|
import {BaseElement, Use, dom} from "@e280/sly"
|
|
@@ -442,7 +459,8 @@ import {html, css} from "lit"
|
|
|
442
459
|
<a id="dom"></a>
|
|
443
460
|
|
|
444
461
|
## 🪄🦝 sly dom
|
|
445
|
-
>
|
|
462
|
+
> `@e280/sly/dom`
|
|
463
|
+
> *the "it's not jquery!" multitool*
|
|
446
464
|
|
|
447
465
|
```ts
|
|
448
466
|
import {dom} from "@e280/sly"
|
|
@@ -520,9 +538,9 @@ import {dom} from "@e280/sly"
|
|
|
520
538
|
```
|
|
521
539
|
or if you wanna be more loosey-goosy, skip the spec
|
|
522
540
|
```ts
|
|
523
|
-
dom.attrs(element).
|
|
524
|
-
dom.attrs(element).
|
|
525
|
-
dom.attrs(element).
|
|
541
|
+
dom.attrs(element).strings.name = "pimsley"
|
|
542
|
+
dom.attrs(element).numbers.count = 125
|
|
543
|
+
dom.attrs(element).booleans.active = true
|
|
526
544
|
```
|
|
527
545
|
|
|
528
546
|
|
|
@@ -531,7 +549,8 @@ import {dom} from "@e280/sly"
|
|
|
531
549
|
<a id="ops"></a>
|
|
532
550
|
|
|
533
551
|
## 🫛🦝 sly ops
|
|
534
|
-
>
|
|
552
|
+
> `@e280/sly/ops`
|
|
553
|
+
> *tools for async operations and loading spinners*
|
|
535
554
|
|
|
536
555
|
```ts
|
|
537
556
|
import {nap} from "@e280/stz"
|
|
@@ -640,7 +659,8 @@ import {Pod, podium, Op, loaders} from "@e280/sly"
|
|
|
640
659
|
<a id="loaders"></a>
|
|
641
660
|
|
|
642
661
|
## ⏳🦝 sly loaders
|
|
643
|
-
>
|
|
662
|
+
> `@e280/sly/loaders`
|
|
663
|
+
> *animated loading spinners for ops*
|
|
644
664
|
|
|
645
665
|
```ts
|
|
646
666
|
import {loaders} from "@e280/sly"
|
|
@@ -675,7 +695,8 @@ import {loaders} from "@e280/sly"
|
|
|
675
695
|
<a id="spa"></a>
|
|
676
696
|
|
|
677
697
|
## 💅🦝 sly spa
|
|
678
|
-
>
|
|
698
|
+
> `@e280/sly/spa`
|
|
699
|
+
> *hash router for single-page-apps*
|
|
679
700
|
|
|
680
701
|
```ts
|
|
681
702
|
import {spa, html} from "@e280/sly"
|
|
@@ -698,6 +719,7 @@ import {spa, html} from "@e280/sly"
|
|
|
698
719
|
- the router has an effect on the appearance of the url in the browser address bar -- the home `#/` is removed, aesthetically, eg, `e280.org/#/` is rewritten to `e280.org` using *history.replaceState*
|
|
699
720
|
- you can provide `loader` option if you want to specify the loading spinner (defaults to `loaders.make()`)
|
|
700
721
|
- you can provide `notFound` option, if you want to specify what is shown on invalid routes (defaults to `() => null`)
|
|
722
|
+
- when `auto` is true (default), the router calls `.refresh()` and `.listen()` in the constructor.. set it to `false` if you want manual control
|
|
701
723
|
- you can set `auto` option false if you want to omit the default initial refresh and listen calls
|
|
702
724
|
- **render your current page**
|
|
703
725
|
```ts
|
|
@@ -728,18 +750,12 @@ import {spa, html} from "@e280/sly"
|
|
|
728
750
|
const hash = router.nav.user.hash("123")
|
|
729
751
|
// "#/user/123"
|
|
730
752
|
|
|
731
|
-
|
|
732
|
-
<a href="${hash}">user 123</a>
|
|
733
|
-
`
|
|
753
|
+
html`<a href="${hash}">user 123</a>`
|
|
734
754
|
```
|
|
735
755
|
- **check if a route is the currently-active one**
|
|
736
756
|
```ts
|
|
737
757
|
const hash = router.nav.user.active
|
|
738
758
|
// true
|
|
739
|
-
|
|
740
|
-
return html`
|
|
741
|
-
<a href="${hash}">user 123</a>
|
|
742
|
-
`
|
|
743
759
|
```
|
|
744
760
|
- **force-refresh the router**
|
|
745
761
|
```ts
|
|
@@ -768,7 +784,8 @@ import {spa, html} from "@e280/sly"
|
|
|
768
784
|
<a id="loot"></a>
|
|
769
785
|
|
|
770
786
|
## 🪙🦝 loot
|
|
771
|
-
>
|
|
787
|
+
> `@e280/sly/loot`
|
|
788
|
+
> *drag-and-drop facilities*
|
|
772
789
|
|
|
773
790
|
```ts
|
|
774
791
|
import {loot, view, dom} from "@e280/sly"
|
package/package.json
CHANGED
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@e280/sly",
|
|
3
|
-
"version": "0.2.0-
|
|
3
|
+
"version": "0.2.0-18",
|
|
4
4
|
"description": "web shadow views",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./x/index.js",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": "./x/index.js",
|
|
10
|
+
"./base": "./x/base/index.js",
|
|
10
11
|
"./dom": "./x/dom/index.js",
|
|
11
12
|
"./loaders": "./x/loaders/index.js",
|
|
12
13
|
"./loot": "./x/loot/index.js",
|
|
13
14
|
"./ops": "./x/ops/index.js",
|
|
14
15
|
"./spa": "./x/spa/index.js",
|
|
15
|
-
"./
|
|
16
|
+
"./view": "./x/view/index.js"
|
|
16
17
|
},
|
|
17
18
|
"files": [
|
|
18
19
|
"x",
|
|
@@ -3,11 +3,11 @@ import {debounce} from "@e280/stz"
|
|
|
3
3
|
import {CSSResultGroup} from "lit"
|
|
4
4
|
|
|
5
5
|
import {dom} from "../dom/dom.js"
|
|
6
|
-
import {Content} from "
|
|
7
|
-
import {Reactor} from "./
|
|
8
|
-
import {AttrWatcher} from "./
|
|
9
|
-
import {applyStyles} from "./
|
|
10
|
-
import {Use, _disconnect, _reconnect, _wrap} from "./
|
|
6
|
+
import {Content} from "../view/types.js"
|
|
7
|
+
import {Reactor} from "./utils/reactor.js"
|
|
8
|
+
import {AttrWatcher} from "./utils/attr-watcher.js"
|
|
9
|
+
import {applyStyles} from "./utils/apply-styles.js"
|
|
10
|
+
import {Use, _disconnect, _reconnect, _wrap} from "./use.js"
|
|
11
11
|
|
|
12
12
|
export class BaseElement extends HTMLElement {
|
|
13
13
|
static styles: CSSResultGroup | undefined
|
package/s/base/index.ts
ADDED
|
@@ -3,10 +3,9 @@ import {CSSResultGroup} from "lit"
|
|
|
3
3
|
import {defer, MapG} from "@e280/stz"
|
|
4
4
|
import {signal, SignalOptions} from "@e280/strata/signals"
|
|
5
5
|
|
|
6
|
-
import {Op} from "
|
|
7
|
-
import {dom} from "../../dom/dom.js"
|
|
8
|
-
import {Attrs} from "../../dom/types.js"
|
|
6
|
+
import {Op} from "../ops/op.js"
|
|
9
7
|
import {Mounts} from "./utils/mounts.js"
|
|
8
|
+
import {UseAttrs} from "./utils/use-attrs.js"
|
|
10
9
|
import {applyStyles} from "./utils/apply-styles.js"
|
|
11
10
|
|
|
12
11
|
export const _wrap = Symbol()
|
|
@@ -14,7 +13,7 @@ export const _disconnect = Symbol()
|
|
|
14
13
|
export const _reconnect = Symbol()
|
|
15
14
|
|
|
16
15
|
export class Use {
|
|
17
|
-
attrs:
|
|
16
|
+
readonly attrs: UseAttrs
|
|
18
17
|
|
|
19
18
|
#runs = 0
|
|
20
19
|
#position = 0
|
|
@@ -45,7 +44,7 @@ export class Use {
|
|
|
45
44
|
public renderNow: () => void,
|
|
46
45
|
public render: () => Promise<void>,
|
|
47
46
|
) {
|
|
48
|
-
this.attrs =
|
|
47
|
+
this.attrs = new UseAttrs(this)
|
|
49
48
|
}
|
|
50
49
|
|
|
51
50
|
get renderCount() {
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
|
|
2
|
+
import {Use} from "../use.js"
|
|
3
|
+
import {dom} from "../../dom/dom.js"
|
|
4
|
+
import {Attrs, AttrSpec} from "../../dom/types.js"
|
|
5
|
+
|
|
6
|
+
export class UseAttrs {
|
|
7
|
+
#use: Use
|
|
8
|
+
#attrs: Attrs
|
|
9
|
+
|
|
10
|
+
constructor(use: Use) {
|
|
11
|
+
this.#use = use
|
|
12
|
+
this.#attrs = dom.attrs(use.element)
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
get strings() { return this.#attrs.strings }
|
|
16
|
+
get numbers() { return this.#attrs.numbers }
|
|
17
|
+
get booleans() { return this.#attrs.booleans }
|
|
18
|
+
|
|
19
|
+
spec<A extends AttrSpec>(spec: A) {
|
|
20
|
+
return this.#use.once(() => this.#attrs.spec(spec))
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
on(fn: () => void) {
|
|
24
|
+
return this.#use.mount(() => this.#attrs.on(fn))
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
package/s/demo/views/counter.ts
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import {css, html} from "lit"
|
|
3
3
|
|
|
4
4
|
import {dom} from "../../dom/dom.js"
|
|
5
|
-
import {view} from "../../
|
|
6
|
-
import {cssReset} from "../../
|
|
7
|
-
import {BaseElement} from "../../
|
|
5
|
+
import {view} from "../../view/view.js"
|
|
6
|
+
import {cssReset} from "../../base/css-reset.js"
|
|
7
|
+
import {BaseElement} from "../../base/element.js"
|
|
8
8
|
|
|
9
9
|
export const CounterView = view(use => (start: number, step: number) => {
|
|
10
10
|
use.name("counter")
|
package/s/demo/views/demo.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
|
|
2
2
|
import {css, html} from "lit"
|
|
3
3
|
|
|
4
|
-
import {view} from "../../
|
|
4
|
+
import {view} from "../../view/view.js"
|
|
5
5
|
import {CounterView} from "./counter.js"
|
|
6
6
|
import {LoadersView} from "./loaders.js"
|
|
7
|
-
import {cssReset} from "../../
|
|
7
|
+
import {cssReset} from "../../base/css-reset.js"
|
|
8
8
|
|
|
9
9
|
export class DemoComponent extends (view.component(use => {
|
|
10
10
|
use.name("demo")
|
|
@@ -3,8 +3,8 @@ import {css, html} from "lit"
|
|
|
3
3
|
import {nap, repeat} from "@e280/stz"
|
|
4
4
|
|
|
5
5
|
import {dom} from "../../dom/dom.js"
|
|
6
|
-
import {Use} from "../../
|
|
7
|
-
import {BaseElement} from "../../
|
|
6
|
+
import {Use} from "../../base/use.js"
|
|
7
|
+
import {BaseElement} from "../../base/element.js"
|
|
8
8
|
|
|
9
9
|
export class FastcountElement extends BaseElement {
|
|
10
10
|
static styles = css`span{color:orange}`
|
package/s/demo/views/loaders.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
|
|
2
2
|
import {css, html} from "lit"
|
|
3
3
|
import {Op} from "../../ops/op.js"
|
|
4
|
-
import {view} from "../../
|
|
4
|
+
import {view} from "../../view/view.js"
|
|
5
5
|
import {loaders} from "../../loaders/index.js"
|
|
6
|
-
import {cssReset} from "../../
|
|
6
|
+
import {cssReset} from "../../base/css-reset.js"
|
|
7
7
|
|
|
8
8
|
export const LoadersView = view(use => () => {
|
|
9
9
|
use.name("loaders")
|
package/s/dom/attrs/attrs.ts
CHANGED
|
@@ -8,9 +8,9 @@ import {AttrProxies} from "./parts/attr-proxies.js"
|
|
|
8
8
|
export function attrs(element: HTMLElement) {
|
|
9
9
|
const proxies = new AttrProxies(element)
|
|
10
10
|
return {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
strings: proxies.strings,
|
|
12
|
+
numbers: proxies.numbers,
|
|
13
|
+
booleans: proxies.booleans,
|
|
14
14
|
on: (fn: () => void) => onAttrs(element, fn),
|
|
15
15
|
spec: <A extends AttrSpec>(spec: A) => attrSpec(element, spec),
|
|
16
16
|
}
|
|
@@ -5,7 +5,7 @@ import {attrFns} from "./attr-fns.js"
|
|
|
5
5
|
export class AttrProxies {
|
|
6
6
|
constructor(public element: HTMLElement) {}
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
strings = new Proxy({}, {
|
|
9
9
|
get: (_t, key: string) => (
|
|
10
10
|
attrFns.get.string(this.element, key)
|
|
11
11
|
),
|
|
@@ -14,7 +14,7 @@ export class AttrProxies {
|
|
|
14
14
|
),
|
|
15
15
|
}) as Record<string, string | undefined>
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
numbers = new Proxy({}, {
|
|
18
18
|
get: (_t, key: string) => (
|
|
19
19
|
attrFns.get.number(this.element, key)
|
|
20
20
|
),
|
|
@@ -23,7 +23,7 @@ export class AttrProxies {
|
|
|
23
23
|
),
|
|
24
24
|
}) as Record<string, number | undefined>
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
booleans = new Proxy({}, {
|
|
27
27
|
get: (_t, key: string) => (
|
|
28
28
|
attrFns.get.boolean(this.element, key)
|
|
29
29
|
),
|
package/s/dom/dom.ts
CHANGED
|
@@ -3,7 +3,7 @@ import {render} from "lit"
|
|
|
3
3
|
import {el} from "./parts/el.js"
|
|
4
4
|
import {AttrSpec} from "./types.js"
|
|
5
5
|
import {attrs} from "./attrs/attrs.js"
|
|
6
|
-
import {Content} from "../
|
|
6
|
+
import {Content} from "../view/types.js"
|
|
7
7
|
import {eve, EveSpec} from "./parts/eve.js"
|
|
8
8
|
import {register} from "./parts/register.js"
|
|
9
9
|
|
package/s/dom/parts/el.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
|
-
import {AttrValue} from "../../
|
|
3
|
-
import {setAttrs} from "../../
|
|
2
|
+
import {AttrValue} from "../../view/types.js"
|
|
3
|
+
import {setAttrs} from "../../view/utils/parts/set-attrs.js"
|
|
4
4
|
|
|
5
5
|
export function el<E extends HTMLElement>(
|
|
6
6
|
tagName: string,
|
package/s/index.ts
CHANGED
package/s/loaders/make.ts
CHANGED
package/s/loaders/parts/anims.ts
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import {css} from "lit"
|
|
3
3
|
import {nap, repeat} from "@e280/stz"
|
|
4
4
|
|
|
5
|
-
import {view} from "../../
|
|
6
|
-
import {Content} from "../../
|
|
7
|
-
import {cssReset} from "../../
|
|
5
|
+
import {view} from "../../view/view.js"
|
|
6
|
+
import {Content} from "../../view/types.js"
|
|
7
|
+
import {cssReset} from "../../base/css-reset.js"
|
|
8
8
|
|
|
9
9
|
export function makeAsciiAnim(hz: number, frames: string[]): () => Content {
|
|
10
10
|
return () => AsciiAnim({hz, frames})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
import {css, html} from "lit"
|
|
3
|
-
import {view} from "../../
|
|
4
|
-
import {cssReset} from "../../
|
|
3
|
+
import {view} from "../../view/view.js"
|
|
4
|
+
import {cssReset} from "../../base/css-reset.js"
|
|
5
5
|
|
|
6
6
|
export const ErrorDisplay = view(use => (error: any) => {
|
|
7
7
|
use.name("error")
|
package/s/loaders/types.ts
CHANGED
package/s/spa/plumbing/braces.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
import {signal} from "@e280/strata"
|
|
3
|
-
import type {Content} from "../../
|
|
3
|
+
import type {Content} from "../../view/types.js"
|
|
4
4
|
import {Navigable, normalizeHash, resolveRoute} from "./primitives.js"
|
|
5
5
|
import {Hashbearer, Navigables, ResolvedRoute, Routes} from "./types.js"
|
|
6
6
|
|
package/s/spa/plumbing/types.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
import type {Op} from "../../ops/op.js"
|
|
3
3
|
import type {Navigable} from "./primitives.js"
|
|
4
|
-
import type {Content} from "../../
|
|
4
|
+
import type {Content} from "../../view/types.js"
|
|
5
5
|
import type {Loader} from "../../loaders/types.js"
|
|
6
6
|
|
|
7
7
|
export type RouterOptions<R extends Routes> = {
|
package/s/spa/router.ts
CHANGED
package/s/view/index.ts
ADDED
package/s/{ui → view}/types.ts
RENAMED
|
@@ -3,9 +3,9 @@ import {TemplateResult} from "lit"
|
|
|
3
3
|
import {Constructor} from "@e280/stz"
|
|
4
4
|
import {DirectiveResult} from "lit/directive.js"
|
|
5
5
|
|
|
6
|
-
import {Use} from "
|
|
7
|
-
import {ViewChain} from "./
|
|
8
|
-
import {BaseElement} from "
|
|
6
|
+
import {Use} from "../base/use.js"
|
|
7
|
+
import {ViewChain} from "./utils/parts/chain.js"
|
|
8
|
+
import {BaseElement} from "../base/element.js"
|
|
9
9
|
|
|
10
10
|
export type Content = TemplateResult | DirectiveResult | HTMLElement | string | null | undefined | void | Content[]
|
|
11
11
|
export type AttrValue = string | boolean | number | undefined | null | void
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
|
|
2
2
|
import {Constructor} from "@e280/stz"
|
|
3
|
-
import {Use} from "
|
|
3
|
+
import {Use} from "../../base/use.js"
|
|
4
4
|
import {makeView} from "./make-view.js"
|
|
5
|
-
import {BaseElement} from "
|
|
6
|
-
import {Reactor} from "
|
|
5
|
+
import {BaseElement} from "../../base/element.js"
|
|
6
|
+
import {Reactor} from "../../base/utils/reactor.js"
|
|
7
7
|
import {ComponentClass, ViewFn} from "../types.js"
|
|
8
8
|
|
|
9
9
|
/** make a component from a BaseElement and a view. */
|
|
@@ -3,7 +3,7 @@ import {Constructor} from "@e280/stz"
|
|
|
3
3
|
import {DirectiveResult} from "lit/async-directive.js"
|
|
4
4
|
import {View, ViewFn} from "../types.js"
|
|
5
5
|
import {ViewChain} from "./parts/chain.js"
|
|
6
|
-
import {BaseElement} from "
|
|
6
|
+
import {BaseElement} from "../../base/element.js"
|
|
7
7
|
import {ViewContext} from "./parts/context.js"
|
|
8
8
|
import {makeComponent} from "./make-component.js"
|
|
9
9
|
import {makeViewDirective} from "./parts/directive.js"
|
|
@@ -5,9 +5,9 @@ import {SlyView} from "./sly-view.js"
|
|
|
5
5
|
import {dom} from "../../../dom/dom.js"
|
|
6
6
|
import {setAttrs} from "./set-attrs.js"
|
|
7
7
|
import {ViewContext} from "./context.js"
|
|
8
|
-
import {Reactor} from "
|
|
9
|
-
import {AttrWatcher} from "
|
|
10
|
-
import {_disconnect, _reconnect, _wrap, Use} from "
|
|
8
|
+
import {Reactor} from "../../../base/utils/reactor.js"
|
|
9
|
+
import {AttrWatcher} from "../../../base/utils/attr-watcher.js"
|
|
10
|
+
import {_disconnect, _reconnect, _wrap, Use} from "../../../base/use.js"
|
|
11
11
|
|
|
12
12
|
/** controls the rendering of view context into an element. */
|
|
13
13
|
export class ViewCapsule<Props extends any[]> {
|
package/s/{ui → view}/view.ts
RENAMED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
import {Content, ViewFn} from "./types.js"
|
|
3
|
-
import {makeView} from "./
|
|
4
|
-
import {BaseElement} from "
|
|
5
|
-
import {_disconnect, _reconnect, Use} from "
|
|
3
|
+
import {makeView} from "./utils/make-view.js"
|
|
4
|
+
import {BaseElement} from "../base/element.js"
|
|
5
|
+
import {_disconnect, _reconnect, Use} from "../base/use.js"
|
|
6
6
|
|
|
7
7
|
export function view<Props extends any[]>(fn: ViewFn<Props>) {
|
|
8
8
|
return makeView(fn, {mode: "open"})
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"css-reset.js","sourceRoot":"","sources":["../../s/base/css-reset.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAA;AAEvC,MAAM,CAAC,MAAM,QAAQ,GAAmB,GAAG,CAAA;;;;;;;;;;;;;;;;CAgB1C,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CSSResultGroup } from "lit";
|
|
2
|
-
import { Content } from "
|
|
3
|
-
import { Use } from "./
|
|
2
|
+
import { Content } from "../view/types.js";
|
|
3
|
+
import { Use } from "./use.js";
|
|
4
4
|
export declare class BaseElement extends HTMLElement {
|
|
5
5
|
#private;
|
|
6
6
|
static styles: CSSResultGroup | undefined;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { debounce } from "@e280/stz";
|
|
2
2
|
import { dom } from "../dom/dom.js";
|
|
3
|
-
import { Reactor } from "./
|
|
4
|
-
import { AttrWatcher } from "./
|
|
5
|
-
import { applyStyles } from "./
|
|
6
|
-
import { Use, _disconnect, _reconnect, _wrap } from "./
|
|
3
|
+
import { Reactor } from "./utils/reactor.js";
|
|
4
|
+
import { AttrWatcher } from "./utils/attr-watcher.js";
|
|
5
|
+
import { applyStyles } from "./utils/apply-styles.js";
|
|
6
|
+
import { Use, _disconnect, _reconnect, _wrap } from "./use.js";
|
|
7
7
|
export class BaseElement extends HTMLElement {
|
|
8
8
|
static styles;
|
|
9
9
|
shadow;
|
|
@@ -49,4 +49,4 @@ export class BaseElement extends HTMLElement {
|
|
|
49
49
|
this.#attrWatcher.stop();
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
|
-
//# sourceMappingURL=
|
|
52
|
+
//# sourceMappingURL=element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element.js","sourceRoot":"","sources":["../../s/base/element.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAC,GAAG,EAAC,MAAM,eAAe,CAAA;AAEjC,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAC,GAAG,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,UAAU,CAAA;AAE5D,MAAM,OAAO,WAAY,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,CAA4B;IAEhC,MAAM,CAAY;IAE3B,IAAI,CAAK;IACT,WAAW,GAAG,CAAC,CAAA;IACf,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAA;IACxB,YAAY,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;IAEzD,4FAA4F;IAC5F,YAAY;QACX,OAAO,IAAI,CAAC,YAAY,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC,CAAA;IACzC,CAAC;IAED;QACC,KAAK,EAAE,CAAA;QACP,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE,CAAA;QACjC,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAClB,IAAI,EACJ,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,MAAM,CACX,CAAA;IACF,CAAC;IAED,qCAAqC;IACrC,MAAM,CAAC,IAAS,IAAY,CAAC;IAE7B,+DAA+D;IAC/D,SAAS,GAAG,GAAG,EAAE;QAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE;YACrB,GAAG,CAAC,MAAM,CACT,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,CAAC,MAAM,CACnB,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC5B,IAAI,CAAC,MAAM,CACX,CACD,CAAA;QACF,CAAC,CAAC,CAAA;IACH,CAAC,CAAA;IAED,6DAA6D;IAC7D,MAAM,GAAG,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;IAEpC,iBAAiB;QAChB,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,EAAE,CAAC;YAC5B,MAAM,MAAM,GAAI,IAAI,CAAC,WAAmB,CAAC,MAAM,CAAA;YAC/C,IAAI,MAAM;gBAAE,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;YAC5C,IAAI,CAAC,SAAS,EAAE,CAAA;QACjB,CAAC;aACI,CAAC;YACL,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAA;QACxB,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAA;QACzB,IAAI,CAAC,WAAW,EAAE,CAAA;IACnB,CAAC;IAED,oBAAoB;QACnB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAA;QACxB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;CACD"}
|
package/x/base/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/base/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA"}
|