@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.
Files changed (159) hide show
  1. package/README.md +47 -30
  2. package/package.json +3 -2
  3. package/s/{ui/base-element.ts → base/element.ts} +5 -5
  4. package/s/base/index.ts +5 -0
  5. package/s/{ui/base → base}/use.ts +4 -5
  6. package/s/{ui/base → base}/utils/attr-watcher.ts +1 -1
  7. package/s/base/utils/use-attrs.ts +27 -0
  8. package/s/demo/views/counter.ts +3 -3
  9. package/s/demo/views/demo.ts +2 -2
  10. package/s/demo/views/fastcount.ts +2 -2
  11. package/s/demo/views/loaders.ts +2 -2
  12. package/s/dom/attrs/attrs.ts +3 -3
  13. package/s/dom/attrs/parts/attr-proxies.ts +3 -3
  14. package/s/dom/dom.ts +1 -1
  15. package/s/dom/parts/el.ts +2 -2
  16. package/s/index.ts +1 -1
  17. package/s/loaders/make.ts +1 -1
  18. package/s/loaders/parts/anims.ts +1 -1
  19. package/s/loaders/parts/ascii-anim.ts +3 -3
  20. package/s/loaders/parts/error-display.ts +2 -2
  21. package/s/loaders/types.ts +1 -1
  22. package/s/spa/plumbing/braces.ts +1 -1
  23. package/s/spa/plumbing/router-core.ts +1 -1
  24. package/s/spa/plumbing/types.ts +1 -1
  25. package/s/spa/router.ts +1 -1
  26. package/s/view/index.ts +6 -0
  27. package/s/{ui → view}/types.ts +3 -3
  28. package/s/{ui/view → view/utils}/make-component.ts +3 -3
  29. package/s/{ui/view → view/utils}/make-view.ts +1 -1
  30. package/s/{ui/view → view/utils}/parts/capsule.ts +3 -3
  31. package/s/{ui → view}/view.ts +3 -3
  32. package/x/base/css-reset.js.map +1 -0
  33. package/x/{ui/base-element.d.ts → base/element.d.ts} +2 -2
  34. package/x/{ui/base-element.js → base/element.js} +5 -5
  35. package/x/base/element.js.map +1 -0
  36. package/x/base/index.d.ts +3 -0
  37. package/x/base/index.js +4 -0
  38. package/x/base/index.js.map +1 -0
  39. package/x/{ui/base → base}/use.d.ts +3 -3
  40. package/x/{ui/base → base}/use.js +3 -3
  41. package/x/base/use.js.map +1 -0
  42. package/x/base/utils/apply-styles.js.map +1 -0
  43. package/x/{ui/base → base}/utils/attr-watcher.js +1 -1
  44. package/x/base/utils/attr-watcher.js.map +1 -0
  45. package/x/base/utils/mounts.js.map +1 -0
  46. package/x/base/utils/reactor.js.map +1 -0
  47. package/x/base/utils/use-attrs.d.ts +11 -0
  48. package/x/base/utils/use-attrs.js +19 -0
  49. package/x/base/utils/use-attrs.js.map +1 -0
  50. package/x/demo/demo.bundle.min.js +15 -15
  51. package/x/demo/demo.bundle.min.js.map +4 -4
  52. package/x/demo/views/counter.d.ts +4 -4
  53. package/x/demo/views/counter.js +3 -3
  54. package/x/demo/views/counter.js.map +1 -1
  55. package/x/demo/views/demo.d.ts +1 -1
  56. package/x/demo/views/demo.js +2 -2
  57. package/x/demo/views/demo.js.map +1 -1
  58. package/x/demo/views/fastcount.d.ts +2 -2
  59. package/x/demo/views/fastcount.js +1 -1
  60. package/x/demo/views/fastcount.js.map +1 -1
  61. package/x/demo/views/loaders.js +2 -2
  62. package/x/demo/views/loaders.js.map +1 -1
  63. package/x/dom/attrs/attrs.d.ts +3 -3
  64. package/x/dom/attrs/attrs.js +3 -3
  65. package/x/dom/attrs/attrs.js.map +1 -1
  66. package/x/dom/attrs/parts/attr-proxies.d.ts +3 -3
  67. package/x/dom/attrs/parts/attr-proxies.js +3 -3
  68. package/x/dom/attrs/parts/attr-proxies.js.map +1 -1
  69. package/x/dom/dom.d.ts +4 -4
  70. package/x/dom/parts/el.d.ts +1 -1
  71. package/x/dom/parts/el.js +1 -1
  72. package/x/dom/parts/el.js.map +1 -1
  73. package/x/index.d.ts +1 -1
  74. package/x/index.html +2 -2
  75. package/x/index.js +1 -1
  76. package/x/index.js.map +1 -1
  77. package/x/loaders/make.d.ts +1 -1
  78. package/x/loaders/parts/anims.d.ts +1 -1
  79. package/x/loaders/parts/ascii-anim.d.ts +2 -2
  80. package/x/loaders/parts/ascii-anim.js +2 -2
  81. package/x/loaders/parts/ascii-anim.js.map +1 -1
  82. package/x/loaders/parts/error-display.js +2 -2
  83. package/x/loaders/parts/error-display.js.map +1 -1
  84. package/x/loaders/types.d.ts +1 -1
  85. package/x/spa/plumbing/braces.d.ts +1 -1
  86. package/x/spa/plumbing/router-core.d.ts +1 -1
  87. package/x/spa/plumbing/types.d.ts +1 -1
  88. package/x/spa/router.d.ts +1 -1
  89. package/x/view/index.d.ts +4 -0
  90. package/x/view/index.js +5 -0
  91. package/x/view/index.js.map +1 -0
  92. package/x/{ui → view}/types.d.ts +3 -3
  93. package/x/{ui → view}/types.js.map +1 -1
  94. package/x/{ui/view → view/utils}/make-component.d.ts +1 -1
  95. package/x/{ui/view → view/utils}/make-component.js +1 -1
  96. package/x/view/utils/make-component.js.map +1 -0
  97. package/x/{ui/view → view/utils}/make-view.js +1 -1
  98. package/x/view/utils/make-view.js.map +1 -0
  99. package/x/{ui/view → view/utils}/parts/capsule.js +3 -3
  100. package/x/view/utils/parts/capsule.js.map +1 -0
  101. package/x/view/utils/parts/chain.js.map +1 -0
  102. package/x/view/utils/parts/context.js.map +1 -0
  103. package/x/view/utils/parts/directive.js.map +1 -0
  104. package/x/view/utils/parts/set-attrs.js.map +1 -0
  105. package/x/view/utils/parts/sly-view.js.map +1 -0
  106. package/x/{ui → view}/view.d.ts +2 -2
  107. package/x/{ui → view}/view.js +2 -2
  108. package/x/view/view.js.map +1 -0
  109. package/s/ui/index.ts +0 -9
  110. package/x/ui/base/css-reset.js.map +0 -1
  111. package/x/ui/base/use.js.map +0 -1
  112. package/x/ui/base/utils/apply-styles.js.map +0 -1
  113. package/x/ui/base/utils/attr-watcher.js.map +0 -1
  114. package/x/ui/base/utils/mounts.js.map +0 -1
  115. package/x/ui/base/utils/reactor.js.map +0 -1
  116. package/x/ui/base-element.js.map +0 -1
  117. package/x/ui/index.d.ts +0 -7
  118. package/x/ui/index.js +0 -8
  119. package/x/ui/index.js.map +0 -1
  120. package/x/ui/view/make-component.js.map +0 -1
  121. package/x/ui/view/make-view.js.map +0 -1
  122. package/x/ui/view/parts/capsule.js.map +0 -1
  123. package/x/ui/view/parts/chain.js.map +0 -1
  124. package/x/ui/view/parts/context.js.map +0 -1
  125. package/x/ui/view/parts/directive.js.map +0 -1
  126. package/x/ui/view/parts/set-attrs.js.map +0 -1
  127. package/x/ui/view/parts/sly-view.js.map +0 -1
  128. package/x/ui/view.js.map +0 -1
  129. /package/s/{ui/base → base}/css-reset.ts +0 -0
  130. /package/s/{ui/base → base}/utils/apply-styles.ts +0 -0
  131. /package/s/{ui/base → base}/utils/mounts.ts +0 -0
  132. /package/s/{ui/base → base}/utils/reactor.ts +0 -0
  133. /package/s/{ui/view → view/utils}/parts/chain.ts +0 -0
  134. /package/s/{ui/view → view/utils}/parts/context.ts +0 -0
  135. /package/s/{ui/view → view/utils}/parts/directive.ts +0 -0
  136. /package/s/{ui/view → view/utils}/parts/set-attrs.ts +0 -0
  137. /package/s/{ui/view → view/utils}/parts/sly-view.ts +0 -0
  138. /package/x/{ui/base → base}/css-reset.d.ts +0 -0
  139. /package/x/{ui/base → base}/css-reset.js +0 -0
  140. /package/x/{ui/base → base}/utils/apply-styles.d.ts +0 -0
  141. /package/x/{ui/base → base}/utils/apply-styles.js +0 -0
  142. /package/x/{ui/base → base}/utils/attr-watcher.d.ts +0 -0
  143. /package/x/{ui/base → base}/utils/mounts.d.ts +0 -0
  144. /package/x/{ui/base → base}/utils/mounts.js +0 -0
  145. /package/x/{ui/base → base}/utils/reactor.d.ts +0 -0
  146. /package/x/{ui/base → base}/utils/reactor.js +0 -0
  147. /package/x/{ui → view}/types.js +0 -0
  148. /package/x/{ui/view → view/utils}/make-view.d.ts +0 -0
  149. /package/x/{ui/view → view/utils}/parts/capsule.d.ts +0 -0
  150. /package/x/{ui/view → view/utils}/parts/chain.d.ts +0 -0
  151. /package/x/{ui/view → view/utils}/parts/chain.js +0 -0
  152. /package/x/{ui/view → view/utils}/parts/context.d.ts +0 -0
  153. /package/x/{ui/view → view/utils}/parts/context.js +0 -0
  154. /package/x/{ui/view → view/utils}/parts/directive.d.ts +0 -0
  155. /package/x/{ui/view → view/utils}/parts/directive.js +0 -0
  156. /package/x/{ui/view → view/utils}/parts/set-attrs.d.ts +0 -0
  157. /package/x/{ui/view → view/utils}/parts/set-attrs.js +0 -0
  158. /package/x/{ui/view → view/utils}/parts/sly-view.d.ts +0 -0
  159. /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
- > *the crown jewel of sly*
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
- *(see [dom.attrs](#dom.attrs) for more details)*
284
- ```ts
285
- const attrs = use.attrs.spec({
286
- name: String,
287
- count: Number,
288
- active: Boolean,
289
- })
290
- ```
291
- ```ts
292
- attrs.name // "chase"
293
- attrs.count // 123
294
- attrs.active // true
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
- > *the classic experience*
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
- > *the "it's not jquery!" multitool*
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).string.name = "pimsley"
524
- dom.attrs(element).number.count = 125
525
- dom.attrs(element).boolean.active = true
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
- > *tools for async operations and loading spinners*
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
- > *animated loading spinners for ops*
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
- > *hash router for single-page-apps*
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
- return html`
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
- > *drag-and-drop facilities*
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-17",
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
- "./ui": "./x/ui/index.js"
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 "./types.js"
7
- import {Reactor} from "./base/utils/reactor.js"
8
- import {AttrWatcher} from "./base/utils/attr-watcher.js"
9
- import {applyStyles} from "./base/utils/apply-styles.js"
10
- import {Use, _disconnect, _reconnect, _wrap} from "./base/use.js"
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
@@ -0,0 +1,5 @@
1
+
2
+ export * from "../base/css-reset.js"
3
+ export * from "../base/element.js"
4
+ export * from "../base/use.js"
5
+
@@ -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 "../../ops/op.js"
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: 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 = dom.attrs(this.element)
47
+ this.attrs = new UseAttrs(this)
49
48
  }
50
49
 
51
50
  get renderCount() {
@@ -1,5 +1,5 @@
1
1
 
2
- import {dom} from "../../../dom/dom.js"
2
+ import {dom} from "../../dom/dom.js"
3
3
 
4
4
  export class AttrWatcher {
5
5
  #stopper: (() => void) | undefined
@@ -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
+
@@ -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 "../../ui/view.js"
6
- import {cssReset} from "../../ui/base/css-reset.js"
7
- import {BaseElement} from "../../ui/base-element.js"
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")
@@ -1,10 +1,10 @@
1
1
 
2
2
  import {css, html} from "lit"
3
3
 
4
- import {view} from "../../ui/view.js"
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 "../../ui/base/css-reset.js"
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 "../../ui/base/use.js"
7
- import {BaseElement} from "../../ui/base-element.js"
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}`
@@ -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 "../../ui/view.js"
4
+ import {view} from "../../view/view.js"
5
5
  import {loaders} from "../../loaders/index.js"
6
- import {cssReset} from "../../ui/base/css-reset.js"
6
+ import {cssReset} from "../../base/css-reset.js"
7
7
 
8
8
  export const LoadersView = view(use => () => {
9
9
  use.name("loaders")
@@ -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
- string: proxies.string,
12
- number: proxies.number,
13
- boolean: proxies.boolean,
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
- string = new Proxy({}, {
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
- number = new Proxy({}, {
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
- boolean = new Proxy({}, {
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 "../ui/types.js"
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 "../../ui/types.js"
3
- import {setAttrs} from "../../ui/view/parts/set-attrs.js"
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
@@ -4,5 +4,5 @@ export * from "./loaders/index.js"
4
4
  export * from "./loot/index.js"
5
5
  export * from "./ops/index.js"
6
6
  export * from "./spa/index.js"
7
- export * from "./ui/index.js"
7
+ export * from "./view/index.js"
8
8
 
package/s/loaders/make.ts CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  import {Loader} from "./types.js"
3
3
  import {earth} from "./parts/anims.js"
4
- import type {Content} from "../ui/types.js"
4
+ import type {Content} from "../view/types.js"
5
5
  import {ErrorDisplay} from "./parts/error-display.js"
6
6
 
7
7
  export function make(
@@ -1,6 +1,6 @@
1
1
 
2
2
  import {makeAsciiAnim} from "./ascii-anim.js"
3
- import type {Content} from "../../ui/types.js"
3
+ import type {Content} from "../../view/types.js"
4
4
 
5
5
  const fast = 20
6
6
  const mid = 10
@@ -2,9 +2,9 @@
2
2
  import {css} from "lit"
3
3
  import {nap, repeat} from "@e280/stz"
4
4
 
5
- import {view} from "../../ui/view.js"
6
- import {Content} from "../../ui/types.js"
7
- import {cssReset} from "../../ui/base/css-reset.js"
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 "../../ui/view.js"
4
- import {cssReset} from "../../ui/base/css-reset.js"
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")
@@ -1,6 +1,6 @@
1
1
 
2
2
  import type {Op} from "../ops/op.js"
3
- import type {Content} from "../ui/types.js"
3
+ import type {Content} from "../view/types.js"
4
4
 
5
5
  export type Loader = <V>(op: Op<V>, ready: (value: V) => Content) => Content
6
6
 
@@ -1,6 +1,6 @@
1
1
 
2
2
  import {Hasher, Route} from "./types.js"
3
- import type {Content} from "../../ui/types.js"
3
+ import type {Content} from "../../view/types.js"
4
4
 
5
5
  type ParamKeys<S extends string> =
6
6
  S extends `${string}{${infer P}}${infer R}` ? (string & P) | ParamKeys<R> : never
@@ -1,6 +1,6 @@
1
1
 
2
2
  import {signal} from "@e280/strata"
3
- import type {Content} from "../../ui/types.js"
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
 
@@ -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 "../../ui/types.js"
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
@@ -1,6 +1,6 @@
1
1
 
2
2
  import {disposer} from "@e280/stz"
3
- import {Content} from "../ui/types.js"
3
+ import {Content} from "../view/types.js"
4
4
  import {Loader} from "../loaders/types.js"
5
5
  import {loaders} from "../loaders/index.js"
6
6
  import {RouterCore} from "./plumbing/router-core.js"
@@ -0,0 +1,6 @@
1
+
2
+ export * from "./utils/parts/chain.js"
3
+ export * from "./utils/parts/sly-view.js"
4
+ export * from "./types.js"
5
+ export * from "./view.js"
6
+
@@ -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 "./base/use.js"
7
- import {ViewChain} from "./view/parts/chain.js"
8
- import {BaseElement} from "./base-element.js"
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 "../base/use.js"
3
+ import {Use} from "../../base/use.js"
4
4
  import {makeView} from "./make-view.js"
5
- import {BaseElement} from "../base-element.js"
6
- import {Reactor} from "../base/utils/reactor.js"
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 "../base-element.js"
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 "../../base/utils/reactor.js"
9
- import {AttrWatcher} from "../../base/utils/attr-watcher.js"
10
- import {_disconnect, _reconnect, _wrap, Use} from "../../base/use.js"
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[]> {
@@ -1,8 +1,8 @@
1
1
 
2
2
  import {Content, ViewFn} from "./types.js"
3
- import {makeView} from "./view/make-view.js"
4
- import {BaseElement} from "./base-element.js"
5
- import {_disconnect, _reconnect, Use} from "./base/use.js"
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 "./types.js";
3
- import { Use } from "./base/use.js";
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 "./base/utils/reactor.js";
4
- import { AttrWatcher } from "./base/utils/attr-watcher.js";
5
- import { applyStyles } from "./base/utils/apply-styles.js";
6
- import { Use, _disconnect, _reconnect, _wrap } from "./base/use.js";
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=base-element.js.map
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"}
@@ -0,0 +1,3 @@
1
+ export * from "../base/css-reset.js";
2
+ export * from "../base/element.js";
3
+ export * from "../base/use.js";
@@ -0,0 +1,4 @@
1
+ export * from "../base/css-reset.js";
2
+ export * from "../base/element.js";
3
+ export * from "../base/use.js";
4
+ //# sourceMappingURL=index.js.map
@@ -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"}