@e280/sly 0.2.0-8 → 0.2.0

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 (293) hide show
  1. package/README.md +400 -98
  2. package/package.json +14 -7
  3. package/s/base/element.ts +76 -0
  4. package/s/base/index.ts +6 -0
  5. package/s/{views → base}/use.ts +22 -14
  6. package/s/base/utils/attr-watcher.ts +22 -0
  7. package/s/base/utils/reactor.ts +32 -0
  8. package/s/base/utils/states.ts +49 -0
  9. package/s/base/utils/use-attrs.ts +36 -0
  10. package/s/demo/demo.bundle.ts +6 -7
  11. package/s/demo/views/counter.ts +21 -24
  12. package/s/demo/views/demo.ts +9 -6
  13. package/s/demo/views/{incredi.ts → fastcount.ts} +7 -6
  14. package/s/demo/views/loaders.ts +7 -7
  15. package/s/dom/attrs/attrs.ts +21 -0
  16. package/s/dom/attrs/parts/attr-fns.ts +68 -0
  17. package/s/dom/attrs/parts/attr-proxies.ts +35 -0
  18. package/s/dom/attrs/parts/attr-spec.ts +29 -0
  19. package/s/dom/attrs/parts/on-attrs.ts +8 -0
  20. package/s/dom/dom.ts +23 -60
  21. package/s/dom/index.ts +4 -0
  22. package/s/dom/parts/dom-scope.ts +46 -0
  23. package/s/dom/parts/el.ts +14 -0
  24. package/s/dom/parts/elmer.ts +38 -0
  25. package/s/dom/parts/eve.ts +24 -0
  26. package/s/dom/parts/mk.ts +9 -0
  27. package/s/dom/parts/queries.ts +26 -0
  28. package/s/dom/{register.ts → parts/register.ts} +2 -10
  29. package/s/dom/types.ts +50 -0
  30. package/s/index.html.ts +4 -3
  31. package/s/index.ts +7 -20
  32. package/s/loaders/index.barrel.ts +10 -0
  33. package/s/loaders/index.ts +4 -0
  34. package/s/loaders/make.ts +14 -0
  35. package/s/loaders/mock.ts +11 -0
  36. package/s/{ops/loaders → loaders}/parts/anims.ts +1 -1
  37. package/s/{ops/loaders → loaders}/parts/ascii-anim.ts +6 -5
  38. package/s/{ops/loaders → loaders}/parts/error-display.ts +2 -2
  39. package/s/loaders/types.ts +6 -0
  40. package/s/loot/index.barrel.ts +5 -0
  41. package/s/loot/index.ts +2 -3
  42. package/s/ops/index.ts +5 -0
  43. package/s/ops/op.ts +1 -0
  44. package/s/spa/index.barrel.ts +6 -0
  45. package/s/spa/index.ts +4 -0
  46. package/s/spa/plumbing/braces.ts +76 -0
  47. package/s/spa/plumbing/primitives.ts +85 -0
  48. package/s/spa/plumbing/router-core.ts +49 -0
  49. package/s/spa/plumbing/types.ts +45 -0
  50. package/s/spa/router.ts +49 -0
  51. package/s/spa/spa.test.ts +91 -0
  52. package/s/tests.test.ts +4 -1
  53. package/s/view/index.ts +7 -0
  54. package/s/view/types.ts +39 -0
  55. package/s/view/utils/contextualize.ts +45 -0
  56. package/s/view/utils/make-component.ts +34 -0
  57. package/s/view/utils/make-view.ts +48 -0
  58. package/s/view/utils/parts/capsule.ts +67 -0
  59. package/s/view/utils/parts/chain.ts +40 -0
  60. package/s/view/utils/parts/context.ts +11 -0
  61. package/s/view/utils/parts/directive.ts +29 -0
  62. package/s/view/utils/parts/sly-view.ts +15 -0
  63. package/s/view/view.ts +24 -0
  64. package/x/base/css-reset.js.map +1 -0
  65. package/x/base/element.d.ts +19 -0
  66. package/x/base/element.js +52 -0
  67. package/x/base/element.js.map +1 -0
  68. package/x/base/index.d.ts +4 -0
  69. package/x/base/index.js +5 -0
  70. package/x/base/index.js.map +1 -0
  71. package/x/{views → base}/use.d.ts +6 -2
  72. package/x/{views → base}/use.js +13 -8
  73. package/x/base/use.js.map +1 -0
  74. package/x/base/utils/apply-styles.js.map +1 -0
  75. package/x/base/utils/attr-watcher.d.ts +8 -0
  76. package/x/base/utils/attr-watcher.js +20 -0
  77. package/x/base/utils/attr-watcher.js.map +1 -0
  78. package/x/base/utils/mounts.js.map +1 -0
  79. package/x/base/utils/reactor.d.ts +5 -0
  80. package/x/base/utils/reactor.js +25 -0
  81. package/x/base/utils/reactor.js.map +1 -0
  82. package/x/base/utils/states.d.ts +13 -0
  83. package/x/base/utils/states.js +41 -0
  84. package/x/base/utils/states.js.map +1 -0
  85. package/x/base/utils/use-attrs.d.ts +11 -0
  86. package/x/base/utils/use-attrs.js +18 -0
  87. package/x/base/utils/use-attrs.js.map +1 -0
  88. package/x/demo/demo.bundle.js +6 -6
  89. package/x/demo/demo.bundle.js.map +1 -1
  90. package/x/demo/demo.bundle.min.js +17 -23
  91. package/x/demo/demo.bundle.min.js.map +4 -4
  92. package/x/demo/views/counter.d.ts +374 -1
  93. package/x/demo/views/counter.js +19 -22
  94. package/x/demo/views/counter.js.map +1 -1
  95. package/x/demo/views/demo.d.ts +4 -1
  96. package/x/demo/views/demo.js +9 -5
  97. package/x/demo/views/demo.js.map +1 -1
  98. package/x/demo/views/{incredi.d.ts → fastcount.d.ts} +3 -3
  99. package/x/demo/views/{incredi.js → fastcount.js} +6 -6
  100. package/x/demo/views/fastcount.js.map +1 -0
  101. package/x/demo/views/loaders.js +6 -6
  102. package/x/demo/views/loaders.js.map +1 -1
  103. package/x/dom/attrs/attrs.d.ts +23 -0
  104. package/x/dom/attrs/attrs.js +17 -0
  105. package/x/dom/attrs/attrs.js.map +1 -0
  106. package/x/dom/attrs/parts/attr-fns.d.ts +16 -0
  107. package/x/dom/attrs/parts/attr-fns.js +64 -0
  108. package/x/dom/attrs/parts/attr-fns.js.map +1 -0
  109. package/x/dom/attrs/parts/attr-proxies.d.ts +8 -0
  110. package/x/dom/attrs/parts/attr-proxies.js +21 -0
  111. package/x/dom/attrs/parts/attr-proxies.js.map +1 -0
  112. package/x/dom/attrs/parts/attr-spec.d.ts +3 -0
  113. package/x/dom/attrs/parts/attr-spec.js +21 -0
  114. package/x/dom/attrs/parts/attr-spec.js.map +1 -0
  115. package/x/dom/attrs/parts/on-attrs.d.ts +2 -0
  116. package/x/dom/attrs/parts/on-attrs.js +7 -0
  117. package/x/dom/attrs/parts/on-attrs.js.map +1 -0
  118. package/x/dom/dom.d.ts +16 -22
  119. package/x/dom/dom.js +21 -47
  120. package/x/dom/dom.js.map +1 -1
  121. package/x/dom/index.d.ts +2 -0
  122. package/x/dom/index.js +3 -0
  123. package/x/dom/index.js.map +1 -0
  124. package/x/dom/parts/dashify.js.map +1 -0
  125. package/x/dom/parts/dom-scope.d.ts +15 -0
  126. package/x/dom/parts/dom-scope.js +35 -0
  127. package/x/dom/parts/dom-scope.js.map +1 -0
  128. package/x/dom/parts/el.d.ts +2 -0
  129. package/x/dom/parts/el.js +7 -0
  130. package/x/dom/parts/el.js.map +1 -0
  131. package/x/dom/parts/elmer.d.ts +11 -0
  132. package/x/dom/parts/elmer.js +32 -0
  133. package/x/dom/parts/elmer.js.map +1 -0
  134. package/x/dom/parts/eve.d.ts +7 -0
  135. package/x/dom/parts/eve.js +16 -0
  136. package/x/dom/parts/eve.js.map +1 -0
  137. package/x/dom/parts/mk.d.ts +2 -0
  138. package/x/dom/parts/mk.js +7 -0
  139. package/x/dom/parts/mk.js.map +1 -0
  140. package/x/dom/parts/queries.d.ts +4 -0
  141. package/x/dom/parts/queries.js +13 -0
  142. package/x/dom/parts/queries.js.map +1 -0
  143. package/x/dom/{register.d.ts → parts/register.d.ts} +2 -10
  144. package/x/dom/parts/register.js.map +1 -0
  145. package/x/dom/types.d.ts +22 -0
  146. package/x/{views → dom}/types.js.map +1 -1
  147. package/x/index.d.ts +7 -17
  148. package/x/index.html +6 -5
  149. package/x/index.html.js +4 -3
  150. package/x/index.html.js.map +1 -1
  151. package/x/index.js +7 -17
  152. package/x/index.js.map +1 -1
  153. package/x/loaders/index.barrel.d.ts +7 -0
  154. package/x/loaders/index.barrel.js +7 -0
  155. package/x/loaders/index.barrel.js.map +1 -0
  156. package/x/loaders/index.d.ts +2 -0
  157. package/x/loaders/index.js +2 -0
  158. package/x/loaders/index.js.map +1 -0
  159. package/x/loaders/make.d.ts +3 -0
  160. package/x/loaders/make.js +6 -0
  161. package/x/loaders/make.js.map +1 -0
  162. package/x/loaders/mock.d.ts +2 -0
  163. package/x/loaders/mock.js +8 -0
  164. package/x/loaders/mock.js.map +1 -0
  165. package/x/{ops/loaders → loaders}/parts/anims.d.ts +1 -1
  166. package/x/loaders/parts/anims.js.map +1 -0
  167. package/x/{ops/loaders → loaders}/parts/ascii-anim.d.ts +2 -2
  168. package/x/{ops/loaders → loaders}/parts/ascii-anim.js +4 -4
  169. package/x/loaders/parts/ascii-anim.js.map +1 -0
  170. package/x/loaders/parts/error-display.d.ts +1 -0
  171. package/x/{ops/loaders → loaders}/parts/error-display.js +2 -2
  172. package/x/loaders/parts/error-display.js.map +1 -0
  173. package/x/loaders/types.d.ts +3 -0
  174. package/x/loaders/types.js +2 -0
  175. package/x/loaders/types.js.map +1 -0
  176. package/x/loot/index.barrel.d.ts +3 -0
  177. package/x/loot/index.barrel.js +4 -0
  178. package/x/loot/index.barrel.js.map +1 -0
  179. package/x/loot/index.d.ts +2 -3
  180. package/x/loot/index.js +1 -3
  181. package/x/loot/index.js.map +1 -1
  182. package/x/ops/index.d.ts +3 -0
  183. package/x/ops/index.js +4 -0
  184. package/x/ops/index.js.map +1 -0
  185. package/x/ops/op.js +1 -0
  186. package/x/ops/op.js.map +1 -1
  187. package/x/spa/index.barrel.d.ts +4 -0
  188. package/x/spa/index.barrel.js +3 -0
  189. package/x/spa/index.barrel.js.map +1 -0
  190. package/x/spa/index.d.ts +2 -0
  191. package/x/spa/index.js +2 -0
  192. package/x/spa/index.js.map +1 -0
  193. package/x/spa/plumbing/braces.d.ts +12 -0
  194. package/x/spa/plumbing/braces.js +55 -0
  195. package/x/spa/plumbing/braces.js.map +1 -0
  196. package/x/spa/plumbing/primitives.d.ts +22 -0
  197. package/x/spa/plumbing/primitives.js +65 -0
  198. package/x/spa/plumbing/primitives.js.map +1 -0
  199. package/x/spa/plumbing/router-core.d.ts +13 -0
  200. package/x/spa/plumbing/router-core.js +38 -0
  201. package/x/spa/plumbing/router-core.js.map +1 -0
  202. package/x/spa/plumbing/types.d.ts +35 -0
  203. package/x/spa/plumbing/types.js +2 -0
  204. package/x/spa/plumbing/types.js.map +1 -0
  205. package/x/spa/router.d.ts +13 -0
  206. package/x/spa/router.js +39 -0
  207. package/x/spa/router.js.map +1 -0
  208. package/x/spa/spa.test.d.ts +15 -0
  209. package/x/spa/spa.test.js +78 -0
  210. package/x/spa/spa.test.js.map +1 -0
  211. package/x/tests.test.js +4 -1
  212. package/x/tests.test.js.map +1 -1
  213. package/x/view/index.d.ts +5 -0
  214. package/x/view/index.js +6 -0
  215. package/x/view/index.js.map +1 -0
  216. package/x/view/types.d.ts +21 -0
  217. package/x/view/types.js +2 -0
  218. package/x/view/types.js.map +1 -0
  219. package/x/view/utils/contextualize.d.ts +13 -0
  220. package/x/view/utils/contextualize.js +18 -0
  221. package/x/view/utils/contextualize.js.map +1 -0
  222. package/x/view/utils/make-component.d.ts +5 -0
  223. package/x/view/utils/make-component.js +17 -0
  224. package/x/view/utils/make-component.js.map +1 -0
  225. package/x/view/utils/make-view.d.ts +2 -0
  226. package/x/view/utils/make-view.js +24 -0
  227. package/x/view/utils/make-view.js.map +1 -0
  228. package/x/view/utils/parts/capsule.d.ts +13 -0
  229. package/x/view/utils/parts/capsule.js +49 -0
  230. package/x/view/utils/parts/capsule.js.map +1 -0
  231. package/x/view/utils/parts/chain.d.ts +13 -0
  232. package/x/view/utils/parts/chain.js +26 -0
  233. package/x/view/utils/parts/chain.js.map +1 -0
  234. package/x/view/utils/parts/context.d.ts +9 -0
  235. package/x/view/utils/parts/context.js +10 -0
  236. package/x/view/utils/parts/context.js.map +1 -0
  237. package/x/view/utils/parts/directive.d.ts +5 -0
  238. package/x/view/utils/parts/directive.js +18 -0
  239. package/x/view/utils/parts/directive.js.map +1 -0
  240. package/x/view/utils/parts/sly-view.d.ts +5 -0
  241. package/x/view/utils/parts/sly-view.js +13 -0
  242. package/x/view/utils/parts/sly-view.js.map +1 -0
  243. package/x/view/view.d.ts +11 -0
  244. package/x/view/view.js +15 -0
  245. package/x/view/view.js.map +1 -0
  246. package/s/dom/attributes.ts +0 -89
  247. package/s/ops/loaders/make-loader.ts +0 -18
  248. package/s/views/base-element.ts +0 -84
  249. package/s/views/types.ts +0 -40
  250. package/s/views/utils/apply-attrs.ts +0 -33
  251. package/s/views/view.ts +0 -150
  252. package/x/demo/views/incredi.js.map +0 -1
  253. package/x/dom/attributes.d.ts +0 -10
  254. package/x/dom/attributes.js +0 -46
  255. package/x/dom/attributes.js.map +0 -1
  256. package/x/dom/dashify.js.map +0 -1
  257. package/x/dom/register.js.map +0 -1
  258. package/x/ops/loaders/make-loader.d.ts +0 -5
  259. package/x/ops/loaders/make-loader.js +0 -7
  260. package/x/ops/loaders/make-loader.js.map +0 -1
  261. package/x/ops/loaders/parts/anims.js.map +0 -1
  262. package/x/ops/loaders/parts/ascii-anim.js.map +0 -1
  263. package/x/ops/loaders/parts/error-display.d.ts +0 -1
  264. package/x/ops/loaders/parts/error-display.js.map +0 -1
  265. package/x/views/base-element.d.ts +0 -14
  266. package/x/views/base-element.js +0 -62
  267. package/x/views/base-element.js.map +0 -1
  268. package/x/views/css-reset.js.map +0 -1
  269. package/x/views/types.d.ts +0 -31
  270. package/x/views/use.js.map +0 -1
  271. package/x/views/utils/apply-attrs.d.ts +0 -2
  272. package/x/views/utils/apply-attrs.js +0 -21
  273. package/x/views/utils/apply-attrs.js.map +0 -1
  274. package/x/views/utils/apply-styles.js.map +0 -1
  275. package/x/views/utils/mounts.js.map +0 -1
  276. package/x/views/view.d.ts +0 -9
  277. package/x/views/view.js +0 -116
  278. package/x/views/view.js.map +0 -1
  279. /package/s/{views → base}/css-reset.ts +0 -0
  280. /package/s/{views → base}/utils/apply-styles.ts +0 -0
  281. /package/s/{views → base}/utils/mounts.ts +0 -0
  282. /package/s/dom/{dashify.ts → parts/dashify.ts} +0 -0
  283. /package/x/{views → base}/css-reset.d.ts +0 -0
  284. /package/x/{views → base}/css-reset.js +0 -0
  285. /package/x/{views → base}/utils/apply-styles.d.ts +0 -0
  286. /package/x/{views → base}/utils/apply-styles.js +0 -0
  287. /package/x/{views → base}/utils/mounts.d.ts +0 -0
  288. /package/x/{views → base}/utils/mounts.js +0 -0
  289. /package/x/dom/{dashify.d.ts → parts/dashify.d.ts} +0 -0
  290. /package/x/dom/{dashify.js → parts/dashify.js} +0 -0
  291. /package/x/dom/{register.js → parts/register.js} +0 -0
  292. /package/x/{views → dom}/types.js +0 -0
  293. /package/x/{ops/loaders → loaders}/parts/anims.js +0 -0
@@ -0,0 +1,39 @@
1
+ import { disposer } from "@e280/stz";
2
+ import { loaders } from "../loaders/index.js";
3
+ import { RouterCore } from "./plumbing/router-core.js";
4
+ import { HashNormalizer, onHashChange } from "./plumbing/primitives.js";
5
+ export class Router extends RouterCore {
6
+ loader;
7
+ notFound;
8
+ dispose = disposer();
9
+ #lastHash;
10
+ constructor(options) {
11
+ super(options.routes, options.location ?? new HashNormalizer(window.location));
12
+ const { auto = true } = options;
13
+ this.loader = options.loader ?? loaders.make();
14
+ this.notFound = options.notFound ?? (() => null);
15
+ this.#lastHash = this.hash;
16
+ if (auto) {
17
+ this.listen();
18
+ this.refresh();
19
+ }
20
+ }
21
+ render() {
22
+ const resolved = this.$resolved.get();
23
+ return resolved === null
24
+ ? this.notFound()
25
+ : this.loader(resolved.op, content => content);
26
+ }
27
+ listen() {
28
+ const dispose = onHashChange(() => {
29
+ const hash = this.hash;
30
+ const isChanged = hash !== this.#lastHash;
31
+ this.#lastHash = hash;
32
+ if (isChanged)
33
+ this.refresh();
34
+ });
35
+ this.dispose.schedule(dispose);
36
+ return dispose;
37
+ }
38
+ }
39
+ //# sourceMappingURL=router.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"router.js","sourceRoot":"","sources":["../../s/spa/router.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAA;AAC3C,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAA;AAEpD,OAAO,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,0BAA0B,CAAA;AAErE,MAAM,OAAO,MAAyB,SAAQ,UAAa;IAC1D,MAAM,CAAQ;IACd,QAAQ,CAAe;IACd,OAAO,GAAG,QAAQ,EAAE,CAAA;IAC7B,SAAS,CAAQ;IAEjB,YAAY,OAAyB;QACpC,KAAK,CACJ,OAAO,CAAC,MAAM,EACd,OAAO,CAAC,QAAQ,IAAI,IAAI,cAAc,CAAC,MAAM,CAAC,QAAQ,CAAC,CACvD,CAAA;QACD,MAAM,EAAC,IAAI,GAAG,IAAI,EAAC,GAAG,OAAO,CAAA;QAC7B,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,EAAE,CAAA;QAC9C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAA;QAChD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAA;QAC1B,IAAI,IAAI,EAAE,CAAC;YACV,IAAI,CAAC,MAAM,EAAE,CAAA;YACb,IAAI,CAAC,OAAO,EAAE,CAAA;QACf,CAAC;IACF,CAAC;IAED,MAAM;QACL,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,CAAA;QACrC,OAAO,QAAQ,KAAK,IAAI;YACvB,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE;YACjB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAA;IAChD,CAAC;IAED,MAAM;QACL,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,EAAE;YACjC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;YACtB,MAAM,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC,SAAS,CAAA;YACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;YACrB,IAAI,SAAS;gBAAE,IAAI,CAAC,OAAO,EAAE,CAAA;QAC9B,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;QAC9B,OAAO,OAAO,CAAA;IACf,CAAC;CACD"}
@@ -0,0 +1,15 @@
1
+ import { Science } from "@e280/science";
2
+ declare const _default: {
3
+ inits: {
4
+ "#/": Science.Test;
5
+ "#/hello/world": Science.Test;
6
+ "#/item/a123": Science.Test;
7
+ "#/item/a123/lol should miss": Science.Test;
8
+ "#/left/{mid}/right extraction": Science.Test;
9
+ "#/not-found-lol": Science.Test;
10
+ };
11
+ nav: {
12
+ "home to item and back": Science.Test;
13
+ };
14
+ };
15
+ export default _default;
@@ -0,0 +1,78 @@
1
+ import { Science, test, expect } from "@e280/science";
2
+ import { route } from "./plumbing/braces.js";
3
+ import { RouterCore } from "./plumbing/router-core.js";
4
+ async function setup(routes) {
5
+ const location = { hash: "" };
6
+ const router = new RouterCore(routes, location);
7
+ return { location, router };
8
+ }
9
+ export default Science.suite({
10
+ inits: Science.suite({
11
+ "#/": test(async () => {
12
+ const { location, router } = await setup({
13
+ home: route("#/", async () => "123"),
14
+ });
15
+ expect(router.content).is(null);
16
+ location.hash = "#/";
17
+ await router.refresh();
18
+ expect(router.content).is("123");
19
+ }),
20
+ "#/hello/world": test(async () => {
21
+ const { location, router } = await setup({
22
+ helloWorld: route("#/hello/world", async () => "123"),
23
+ });
24
+ expect(router.content).is(null);
25
+ location.hash = "#/hello/world";
26
+ await router.refresh();
27
+ expect(router.content).is("123");
28
+ }),
29
+ "#/item/a123": test(async () => {
30
+ const { location, router } = await setup({
31
+ item: route("#/item/{id}", async ({ id }) => `content ${id}`),
32
+ });
33
+ location.hash = "#/item/a123";
34
+ await router.refresh();
35
+ expect(router.content).is("content a123");
36
+ }),
37
+ "#/item/a123/lol should miss": test(async () => {
38
+ const { location, router } = await setup({
39
+ item: route("#/item/{id}", async ({ id }) => `content ${id}`),
40
+ });
41
+ location.hash = "#/item/a123/lol";
42
+ await router.refresh();
43
+ expect(router.content).is(null);
44
+ }),
45
+ "#/left/{mid}/right extraction": test(async () => {
46
+ const { location, router } = await setup({
47
+ item: route("#/left/{mid}/right", async ({ mid }) => `content ${mid}`),
48
+ });
49
+ location.hash = "#/left/middle/right";
50
+ await router.refresh();
51
+ expect(router.content).is("content middle");
52
+ }),
53
+ "#/not-found-lol": test(async () => {
54
+ const { location, router } = await setup({
55
+ helloWorld: route("#/hello/world", async () => "123"),
56
+ });
57
+ location.hash = "#/not-found-lol";
58
+ await router.refresh();
59
+ expect(router.content).is(null);
60
+ }),
61
+ }),
62
+ nav: Science.suite({
63
+ "home to item and back": test(async () => {
64
+ const { location, router } = await setup({
65
+ home: route("#/", async () => `home`),
66
+ item: route("#/item/{id}", async ({ id }) => `item ${id}`),
67
+ });
68
+ location.hash = "#/";
69
+ await router.refresh();
70
+ expect(router.content).is("home");
71
+ await router.nav.item.go({ id: "x234" });
72
+ expect(router.content).is("item x234");
73
+ await router.nav.home.go();
74
+ expect(router.content).is("home");
75
+ }),
76
+ }),
77
+ });
78
+ //# sourceMappingURL=spa.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"spa.test.js","sourceRoot":"","sources":["../../s/spa/spa.test.ts"],"names":[],"mappings":"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"}
package/x/tests.test.js CHANGED
@@ -1,3 +1,6 @@
1
1
  import { Science } from "@e280/science";
2
- await Science.run({});
2
+ import spa from "./spa/spa.test.js";
3
+ await Science.run({
4
+ spa,
5
+ });
3
6
  //# sourceMappingURL=tests.test.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tests.test.js","sourceRoot":"","sources":["../s/tests.test.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AAErC,MAAM,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA"}
1
+ {"version":3,"file":"tests.test.js","sourceRoot":"","sources":["../s/tests.test.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AACrC,OAAO,GAAG,MAAM,mBAAmB,CAAA;AAEnC,MAAM,OAAO,CAAC,GAAG,CAAC;IACjB,GAAG;CACH,CAAC,CAAA"}
@@ -0,0 +1,5 @@
1
+ export * from "./utils/parts/chain.js";
2
+ export * from "./utils/parts/sly-view.js";
3
+ export * from "./utils/contextualize.js";
4
+ export * from "./types.js";
5
+ export * from "./view.js";
@@ -0,0 +1,6 @@
1
+ export * from "./utils/parts/chain.js";
2
+ export * from "./utils/parts/sly-view.js";
3
+ export * from "./utils/contextualize.js";
4
+ export * from "./types.js";
5
+ export * from "./view.js";
6
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/view/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA"}
@@ -0,0 +1,21 @@
1
+ import { TemplateResult } from "lit";
2
+ import { Constructor } from "@e280/stz";
3
+ import { DirectiveResult } from "lit/directive.js";
4
+ import { Use } from "../base/use.js";
5
+ import { BaseElement } from "../base/element.js";
6
+ import { ViewChain } from "./utils/parts/chain.js";
7
+ export type Content = TemplateResult | DirectiveResult | HTMLElement | string | null | undefined | void | Content[];
8
+ export type ViewFn<Props extends any[]> = ((use: Use) => (...props: Props) => Content);
9
+ export type View<Props extends any[]> = {
10
+ (...props: Props): DirectiveResult;
11
+ props: (...props: Props) => ViewChain<Props>;
12
+ transmute: <PropsB extends any[]>(convert: (...propsB: PropsB) => Props) => View<PropsB>;
13
+ component: <B extends Constructor<BaseElement>>(Base?: B) => {
14
+ props: (propFn: (component: InstanceType<B>) => Props) => (ComponentClass<B, Props>);
15
+ };
16
+ };
17
+ export type ViewProps<V extends View<any>> = (V extends View<infer Props> ? Props : never);
18
+ export type ComponentClass<B extends Constructor<BaseElement>, Props extends any[]> = {
19
+ view: View<Props>;
20
+ new (): InstanceType<B>;
21
+ } & B;
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../s/view/types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,13 @@
1
+ import { DropFirst } from "@e280/stz";
2
+ import { ComponentClass, View, ViewProps } from "../types.js";
3
+ export declare function contextualizeView<C, V extends View<any>>(context: C, view: V): View<DropFirst<ViewProps<V>>>;
4
+ export declare function contextualizeViews<C, Vs extends Record<string, View<any>>>(context: C, views: Vs): {
5
+ [K in keyof Vs]: View<DropFirst<ViewProps<Vs[K]>>>;
6
+ };
7
+ export declare function getViews<Cs extends Record<string, ComponentClass<any, any>>>(components: Cs): { [K in keyof Cs]: Cs[K]["view"]; };
8
+ export declare function contextualizeComponents<C, Cs extends Record<string, ComponentClass<any, any>>>(context: C, originalComponents: Cs): { [K in keyof Cs]: {
9
+ view: View<DropFirst<ViewProps<Cs[K]["view"]>>>;
10
+ new (): InstanceType<{
11
+ context: C;
12
+ } & Cs[K]>;
13
+ } & Cs[K]; };
@@ -0,0 +1,18 @@
1
+ import { ob } from "@e280/stz";
2
+ export function contextualizeView(context, view) {
3
+ return view.transmute((...p) => [context, ...p]);
4
+ }
5
+ export function contextualizeViews(context, views) {
6
+ return ob(views)
7
+ .map(view => contextualizeView(context, view));
8
+ }
9
+ export function getViews(components) {
10
+ return ob(components).map(C => C.view);
11
+ }
12
+ export function contextualizeComponents(context, originalComponents) {
13
+ return ob(originalComponents).map((Cons) => class extends Cons {
14
+ context = context;
15
+ static view = contextualizeView(context, super.view);
16
+ });
17
+ }
18
+ //# sourceMappingURL=contextualize.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"contextualize.js","sourceRoot":"","sources":["../../../s/view/utils/contextualize.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,EAAE,EAAC,MAAM,WAAW,CAAA;AAGvC,MAAM,UAAU,iBAAiB,CAC/B,OAAU,EACV,IAAO;IAER,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAQ,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAQ,CAAA;AAC/D,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,OAAU,EACV,KAAS;IAGV,OAAO,EAAE,CAAC,KAAK,CAAC;SACd,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAA;AAChD,CAAC;AAED,MAAM,UAAU,QAAQ,CAErB,UAAc;IAEhB,OAAO,EAAE,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAW,CAE3C,CAAA;AACF,CAAC;AAED,MAAM,UAAU,uBAAuB,CAGpC,OAAU,EAAE,kBAAsB;IAEpC,OAAO,EAAE,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAE,CAAC,KAAM,SAAQ,IAAI;QAClE,OAAO,GAAG,OAAO,CAAA;QACjB,MAAM,CAAC,IAAI,GAAG,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAQ,CAAA;KAC3D,CAKA,CAAA;AACF,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { Constructor } from "@e280/stz";
2
+ import { BaseElement } from "../../base/element.js";
3
+ import { ComponentClass, ViewFn } from "../types.js";
4
+ /** make a component from a BaseElement and a view. */
5
+ export declare function makeComponent<B extends Constructor<BaseElement>, Props extends any[]>(settings: ShadowRootInit, Base: B, propFn: (component: InstanceType<B>) => Props, viewFn: ViewFn<Props>): ComponentClass<B, Props>;
@@ -0,0 +1,17 @@
1
+ import { makeView } from "./make-view.js";
2
+ import { Reactor } from "../../base/utils/reactor.js";
3
+ /** make a component from a BaseElement and a view. */
4
+ export function makeComponent(settings, Base, propFn, viewFn) {
5
+ return class Component extends Base {
6
+ static view = makeView(viewFn, settings);
7
+ #reactor = new Reactor();
8
+ createShadow() {
9
+ return this.attachShadow(settings);
10
+ }
11
+ render(use) {
12
+ // reactor is tracking the propFn
13
+ return viewFn(use)(...this.#reactor.effect(() => propFn(this), () => this.update()));
14
+ }
15
+ };
16
+ }
17
+ //# sourceMappingURL=make-component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"make-component.js","sourceRoot":"","sources":["../../../s/view/utils/make-component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAA;AAEvC,OAAO,EAAC,OAAO,EAAC,MAAM,6BAA6B,CAAA;AAGnD,sDAAsD;AACtD,MAAM,UAAU,aAAa,CAC3B,QAAwB,EACxB,IAAO,EACP,MAA6C,EAC7C,MAAqB;IAGtB,OAAO,MAAM,SAAU,SAAQ,IAAI;QAClC,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;QACxC,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAA;QAExB,YAAY;YACX,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAA;QACnC,CAAC;QAED,MAAM,CAAC,GAAQ;YACd,iCAAiC;YACjC,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CACzC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAW,CAAC,EACzB,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CACnB,CAAC,CAAA;QACH,CAAC;KACkC,CAAA;AACrC,CAAC"}
@@ -0,0 +1,2 @@
1
+ import { View, ViewFn } from "../types.js";
2
+ export declare function makeView<Props extends any[]>(viewFn: ViewFn<Props>, settings: ShadowRootInit): View<Props>;
@@ -0,0 +1,24 @@
1
+ import { ViewChain } from "./parts/chain.js";
2
+ import { BaseElement } from "../../base/element.js";
3
+ import { ViewContext } from "./parts/context.js";
4
+ import { makeComponent } from "./make-component.js";
5
+ import { makeViewDirective } from "./parts/directive.js";
6
+ export function makeView(viewFn, settings) {
7
+ const renderDirective = makeViewDirective(viewFn, settings);
8
+ function v(...props) {
9
+ return renderDirective(new ViewContext(props));
10
+ }
11
+ v.props = (...props) => new ViewChain(new ViewContext(props), renderDirective);
12
+ v.transmute = (convert) => {
13
+ const viewFnB = use => {
14
+ const viewFnA2 = viewFn(use);
15
+ return (...propsB) => viewFnA2(...convert(...propsB));
16
+ };
17
+ return makeView(viewFnB, settings);
18
+ };
19
+ v.component = (Base = BaseElement) => ({
20
+ props: (propFn) => (makeComponent(settings, Base, propFn, viewFn))
21
+ });
22
+ return v;
23
+ }
24
+ //# sourceMappingURL=make-view.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"make-view.js","sourceRoot":"","sources":["../../../s/view/utils/make-view.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,SAAS,EAAC,MAAM,kBAAkB,CAAA;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAC,iBAAiB,EAAC,MAAM,sBAAsB,CAAA;AAEtD,MAAM,UAAU,QAAQ,CACtB,MAAqB,EACrB,QAAwB;IAGzB,MAAM,eAAe,GAAG,iBAAiB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAE3D,SAAS,CAAC,CAAC,GAAG,KAAY;QACzB,OAAO,eAAe,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC,CAAA;IAC/C,CAAC;IAED,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,KAAY,EAAE,EAAE,CAAC,IAAI,SAAS,CAC3C,IAAI,WAAW,CAAC,KAAK,CAAC,EACtB,eAAe,CACf,CAAA;IAED,CAAC,CAAC,SAAS,GAAG,CAAuB,OAAqC,EAAE,EAAE;QAC7E,MAAM,OAAO,GAAmB,GAAG,CAAC,EAAE;YACrC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;YAC5B,OAAO,CAAC,GAAG,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC,CAAA;QACtD,CAAC,CAAA;QACD,OAAO,QAAQ,CAAS,OAAO,EAAE,QAAQ,CAAC,CAAA;IAC3C,CAAC,CAAA;IAED,CAAC,CAAC,SAAS,GAAG,CAAqC,OAAU,WAAkB,EAAE,EAAE,CAAC,CAAC;QACpF,KAAK,EAAE,CAAC,MAA6C,EAAE,EAAE,CAAC,CACzD,aAAa,CACZ,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,MAAM,CACN,CACD;KACD,CAAC,CAAA;IAEF,OAAO,CAAC,CAAA;AACT,CAAC"}
@@ -0,0 +1,13 @@
1
+ import { ViewFn } from "../../types.js";
2
+ import { SlyView } from "./sly-view.js";
3
+ import { ViewContext } from "./context.js";
4
+ /** controls the rendering of view context into an element. */
5
+ export declare class ViewCapsule<Props extends any[]> {
6
+ #private;
7
+ private viewFn;
8
+ private settings;
9
+ constructor(viewFn: ViewFn<Props>, settings: ShadowRootInit);
10
+ update(context: ViewContext<Props>): SlyView;
11
+ disconnected(): void;
12
+ reconnected(): void;
13
+ }
@@ -0,0 +1,49 @@
1
+ import { debounce } from "@e280/stz";
2
+ import { SlyView } from "./sly-view.js";
3
+ import { dom } from "../../../dom/dom.js";
4
+ import { Reactor } from "../../../base/utils/reactor.js";
5
+ import { attrSet } from "../../../dom/attrs/parts/attr-fns.js";
6
+ import { AttrWatcher } from "../../../base/utils/attr-watcher.js";
7
+ import { _disconnect, _reconnect, _wrap, Use } from "../../../base/use.js";
8
+ /** controls the rendering of view context into an element. */
9
+ export class ViewCapsule {
10
+ viewFn;
11
+ settings;
12
+ #element = SlyView.make();
13
+ #reactor = new Reactor();
14
+ #use;
15
+ #shadow;
16
+ #context;
17
+ #attrWatcher = new AttrWatcher(this.#element, () => this.#renderDebounced());
18
+ constructor(viewFn, settings) {
19
+ this.viewFn = viewFn;
20
+ this.settings = settings;
21
+ this.#shadow = this.#element.attachShadow(this.settings);
22
+ this.#use = new Use(this.#element, this.#shadow, this.#renderNow, this.#renderDebounced);
23
+ }
24
+ update(context) {
25
+ this.#context = context;
26
+ this.#renderNow();
27
+ return this.#element;
28
+ }
29
+ #renderNow = () => {
30
+ this.#use[_wrap](() => {
31
+ const content = this.#reactor.effect(() => this.viewFn(this.#use)(...this.#context.props), () => this.#renderDebounced());
32
+ attrSet.entries(this.#element, this.#context.attrs);
33
+ dom.render(this.#shadow, content);
34
+ dom.render(this.#element, this.#context.children);
35
+ this.#attrWatcher.start();
36
+ });
37
+ };
38
+ #renderDebounced = debounce(0, this.#renderNow);
39
+ disconnected() {
40
+ this.#use[_disconnect]();
41
+ this.#reactor.clear();
42
+ this.#attrWatcher.stop();
43
+ }
44
+ reconnected() {
45
+ this.#use[_reconnect]();
46
+ this.#attrWatcher.start();
47
+ }
48
+ }
49
+ //# sourceMappingURL=capsule.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"capsule.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/capsule.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAA;AAElC,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AACrC,OAAO,EAAC,GAAG,EAAC,MAAM,qBAAqB,CAAA;AAEvC,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAA;AACtD,OAAO,EAAC,OAAO,EAAC,MAAM,sCAAsC,CAAA;AAC5D,OAAO,EAAC,WAAW,EAAC,MAAM,qCAAqC,CAAA;AAC/D,OAAO,EAAC,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC,MAAM,sBAAsB,CAAA;AAExE,8DAA8D;AAC9D,MAAM,OAAO,WAAW;IAUb;IACA;IAVV,QAAQ,GAAG,OAAO,CAAC,IAAI,EAAE,CAAA;IACzB,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAA;IAExB,IAAI,CAAK;IACT,OAAO,CAAY;IACnB,QAAQ,CAAqB;IAC7B,YAAY,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAA;IAE5E,YACU,MAAqB,EACrB,QAAwB;QADxB,WAAM,GAAN,MAAM,CAAe;QACrB,aAAQ,GAAR,QAAQ,CAAgB;QAEjC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACxD,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAClB,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,gBAAgB,CACrB,CAAA;IACF,CAAC;IAED,MAAM,CAAC,OAA2B;QACjC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAA;QACvB,IAAI,CAAC,UAAU,EAAE,CAAA;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAA;IACrB,CAAC;IAED,UAAU,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE;YACrB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CACnC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpD,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAC7B,CAAA;YACD,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YACnD,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;YACjC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;YACjD,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAA;QAC1B,CAAC,CAAC,CAAA;IACH,CAAC,CAAA;IAED,gBAAgB,GAAG,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;IAE/C,YAAY;QACX,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;IAED,WAAW;QACV,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAA;QACvB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAA;IAC1B,CAAC;CACD"}
@@ -0,0 +1,13 @@
1
+ import { Content } from "../../types.js";
2
+ import { ViewContext } from "./context.js";
3
+ import { AttrValue } from "../../../dom/types.js";
4
+ import { DirectiveResult } from "lit/async-directive.js";
5
+ /** provides fluent chaining interface for adding context to rendering a view, think view.props().attr().children().render() */
6
+ export declare class ViewChain<Props extends any[]> {
7
+ #private;
8
+ constructor(context: ViewContext<Props>, renderDirective: (context: ViewContext<Props>) => DirectiveResult);
9
+ attr(key: string, value?: AttrValue): this;
10
+ attrs(record: Record<string, AttrValue>): this;
11
+ children(...contents: Content[]): this;
12
+ render(): DirectiveResult<import("lit-html/directive.js").DirectiveClass>;
13
+ }
@@ -0,0 +1,26 @@
1
+ /** provides fluent chaining interface for adding context to rendering a view, think view.props().attr().children().render() */
2
+ export class ViewChain {
3
+ #render;
4
+ #context;
5
+ constructor(context, renderDirective) {
6
+ this.#context = context;
7
+ this.#render = renderDirective;
8
+ }
9
+ attr(key, value = true) {
10
+ this.#context.attrs.set(key, value);
11
+ return this;
12
+ }
13
+ attrs(record) {
14
+ for (const [key, value] of Object.entries(record))
15
+ this.#context.attrs.set(key, value);
16
+ return this;
17
+ }
18
+ children(...contents) {
19
+ this.#context.children.push(...contents);
20
+ return this;
21
+ }
22
+ render() {
23
+ return this.#render(this.#context);
24
+ }
25
+ }
26
+ //# sourceMappingURL=chain.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chain.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/chain.ts"],"names":[],"mappings":"AAMA,+HAA+H;AAC/H,MAAM,OAAO,SAAS;IACrB,OAAO,CAAkD;IACzD,QAAQ,CAAoB;IAE5B,YACE,OAA2B,EAC3B,eAAiE;QAElE,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAA;QACvB,IAAI,CAAC,OAAO,GAAG,eAAe,CAAA;IAC/B,CAAC;IAED,IAAI,CAAC,GAAW,EAAE,QAAmB,IAAI;QACxC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACnC,OAAO,IAAI,CAAA;IACZ,CAAC;IAED,KAAK,CAAC,MAAiC;QACtC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC;YAChD,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACpC,OAAO,IAAI,CAAA;IACZ,CAAC;IAED,QAAQ,CAAC,GAAG,QAAmB;QAC9B,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAA;QACxC,OAAO,IAAI,CAAA;IACZ,CAAC;IAED,MAAM;QACL,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACnC,CAAC;CACD"}
@@ -0,0 +1,9 @@
1
+ import { Content } from "../../types.js";
2
+ import { AttrValue } from "../../../dom/types.js";
3
+ /** the information we need to render a view. */
4
+ export declare class ViewContext<Props extends any[]> {
5
+ props: Props;
6
+ attrs: Map<string, AttrValue>;
7
+ children: Content[];
8
+ constructor(props: Props);
9
+ }
@@ -0,0 +1,10 @@
1
+ /** the information we need to render a view. */
2
+ export class ViewContext {
3
+ props;
4
+ attrs = new Map();
5
+ children = [];
6
+ constructor(props) {
7
+ this.props = props;
8
+ }
9
+ }
10
+ //# sourceMappingURL=context.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/context.ts"],"names":[],"mappings":"AAIA,gDAAgD;AAChD,MAAM,OAAO,WAAW;IAGJ;IAFnB,KAAK,GAAG,IAAI,GAAG,EAAqB,CAAA;IACpC,QAAQ,GAAc,EAAE,CAAA;IACxB,YAAmB,KAAY;QAAZ,UAAK,GAAL,KAAK,CAAO;IAAG,CAAC;CACnC"}
@@ -0,0 +1,5 @@
1
+ import { DirectiveResult } from "lit/async-directive.js";
2
+ import { ViewFn } from "../../types.js";
3
+ import { ViewContext } from "./context.js";
4
+ /** creates a lit directive fn, which when called, emits a funky lit thing to inject in your html templates. */
5
+ export declare function makeViewDirective<Props extends any[]>(viewFn: ViewFn<Props>, settings: ShadowRootInit): (context: ViewContext<Props>) => DirectiveResult;
@@ -0,0 +1,18 @@
1
+ import { AsyncDirective, directive } from "lit/async-directive.js";
2
+ import { ViewCapsule } from "./capsule.js";
3
+ /** creates a lit directive fn, which when called, emits a funky lit thing to inject in your html templates. */
4
+ export function makeViewDirective(viewFn, settings) {
5
+ return directive(class ViewDirective extends AsyncDirective {
6
+ #capsule = new ViewCapsule(viewFn, settings);
7
+ render(context) {
8
+ return this.#capsule.update(context);
9
+ }
10
+ disconnected() {
11
+ this.#capsule.disconnected();
12
+ }
13
+ reconnected() {
14
+ this.#capsule.reconnected();
15
+ }
16
+ });
17
+ }
18
+ //# sourceMappingURL=directive.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"directive.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/directive.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,EAAE,SAAS,EAAkB,MAAM,wBAAwB,CAAA;AAEjF,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AAGxC,+GAA+G;AAC/G,MAAM,UAAU,iBAAiB,CAC/B,MAAqB,EACrB,QAAwB;IAGzB,OAAO,SAAS,CAAC,MAAM,aAAc,SAAQ,cAAc;QAC1D,QAAQ,GAAG,IAAI,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;QAE5C,MAAM,CAAC,OAA2B;YACjC,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QACrC,CAAC;QAED,YAAY;YACX,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAA;QAC7B,CAAC;QAED,WAAW;YACV,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAA;QAC5B,CAAC;KACD,CAAqD,CAAA;AACvD,CAAC"}
@@ -0,0 +1,5 @@
1
+ /** <sly-view> element that views are rendered into. */
2
+ export declare class SlyView extends HTMLElement {
3
+ #private;
4
+ static make(): SlyView;
5
+ }
@@ -0,0 +1,13 @@
1
+ import { dom } from "../../../dom/dom.js";
2
+ /** <sly-view> element that views are rendered into. */
3
+ export class SlyView extends HTMLElement {
4
+ static #registered = false;
5
+ static make() {
6
+ if (!this.#registered) {
7
+ dom.register({ SlyView }, { soft: true, upgrade: true });
8
+ this.#registered = true;
9
+ }
10
+ return document.createElement("sly-view");
11
+ }
12
+ }
13
+ //# sourceMappingURL=sly-view.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sly-view.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/sly-view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,qBAAqB,CAAA;AAEvC,uDAAuD;AACvD,MAAM,OAAO,OAAQ,SAAQ,WAAW;IACvC,MAAM,CAAC,WAAW,GAAG,KAAK,CAAA;IAC1B,MAAM,CAAC,IAAI;QACV,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACvB,GAAG,CAAC,QAAQ,CAAC,EAAC,OAAO,EAAC,EAAE,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAA;YACpD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;QACxB,CAAC;QACD,OAAO,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAY,CAAA;IACrD,CAAC"}
@@ -0,0 +1,11 @@
1
+ import { Content, ViewFn } from "./types.js";
2
+ import { BaseElement } from "../base/element.js";
3
+ import { Use } from "../base/use.js";
4
+ export declare function view<Props extends any[]>(fn: ViewFn<Props>): import("./types.js").View<Props>;
5
+ export declare namespace view {
6
+ var settings: (settings: ShadowRootInit) => {
7
+ render: <Props extends any[]>(fn: ViewFn<Props>) => import("./types.js").View<Props>;
8
+ };
9
+ var render: typeof view;
10
+ var component: (fn: (use: Use) => Content) => import("./types.js").ComponentClass<typeof BaseElement, []>;
11
+ }
package/x/view/view.js ADDED
@@ -0,0 +1,15 @@
1
+ import { makeView } from "./utils/make-view.js";
2
+ import { BaseElement } from "../base/element.js";
3
+ export function view(fn) {
4
+ return makeView(fn, { mode: "open" });
5
+ }
6
+ view.settings = (settings) => ({
7
+ render: (fn) => {
8
+ return makeView(fn, settings);
9
+ }
10
+ });
11
+ view.render = view;
12
+ view.component = (fn) => (view(use => () => fn(use))
13
+ .component(BaseElement)
14
+ .props(() => []));
15
+ //# sourceMappingURL=view.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"view.js","sourceRoot":"","sources":["../../s/view/view.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAG9C,MAAM,UAAU,IAAI,CAAsB,EAAiB;IAC1D,OAAO,QAAQ,CAAC,EAAE,EAAE,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC,CAAA;AACpC,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAwB,EAAE,EAAE,CAAC,CAAC;IAC9C,MAAM,EAAE,CAAsB,EAAiB,EAAE,EAAE;QAClD,OAAO,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAA;IAC9B,CAAC;CACD,CAAC,CAAA;AAEF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;AAElB,IAAI,CAAC,SAAS,GAAG,CAAC,EAAyB,EAAE,EAAE,CAAC,CAC/C,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;KACxB,SAAS,CAAC,WAAW,CAAC;KACtB,KAAK,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CACjB,CAAA"}
@@ -1,89 +0,0 @@
1
-
2
- export type AttrKind = (
3
- | typeof String
4
- | typeof Number
5
- | typeof Boolean
6
- )
7
-
8
- export type AttrType<H extends AttrKind> = (
9
- H extends typeof String
10
- ? string | undefined
11
-
12
- : H extends typeof Number
13
- ? number | undefined
14
-
15
- : H extends typeof Boolean
16
- ? boolean
17
-
18
- : never
19
- )
20
-
21
- export type AttrSpec = {
22
- [key: string]: AttrKind
23
- }
24
-
25
- export type AttrTypes<A extends AttrSpec> = {
26
- [P in keyof A]: AttrType<A[P]>
27
- }
28
-
29
- export function onAttrChange(element: HTMLElement, fn: () => void) {
30
- const observer = new MutationObserver(fn)
31
- observer.observe(element, {attributes: true})
32
- return () => observer.disconnect()
33
- }
34
-
35
- export const attributes = <A extends AttrSpec>(
36
- element: HTMLElement,
37
- spec: A,
38
- ) => new Proxy(spec, {
39
-
40
- get: (_target, name: string) => {
41
- const type = spec[name]
42
- const raw = element.getAttribute(name)
43
-
44
- switch (type) {
45
- case String:
46
- return raw ?? undefined
47
-
48
- case Number:
49
- return raw !== null
50
- ? Number(raw)
51
- : undefined
52
-
53
- case Boolean:
54
- return raw !== null
55
-
56
- default:
57
- throw new Error(`invalid attribute type for "${name}"`)
58
- }
59
- },
60
-
61
- set: (_target, name: string, value: any) => {
62
- const type = spec[name]
63
-
64
- switch (type) {
65
- case String: {
66
- element.setAttribute(name, value)
67
- return true
68
- }
69
-
70
- case Number: {
71
- element.setAttribute(name, value.toString())
72
- return true
73
- }
74
-
75
- case Boolean: {
76
- if (value)
77
- element.setAttribute(name, "")
78
- else
79
- element.removeAttribute(name)
80
- return true
81
- }
82
-
83
- default:
84
- throw new Error(`invalid attribute type for "${name}"`)
85
- }
86
- },
87
-
88
- }) as any as AttrTypes<A>
89
-