@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
@@ -1 +1,374 @@
1
- export declare const CounterView: import("../../index.js").View<[initial: number]>;
1
+ export declare const CounterView: import("../../index.js").View<[start: number, step: number]>;
2
+ declare const CounterComponent_base: import("../../index.js").ComponentClass<{
3
+ new (): {
4
+ attrs: import("../../index.js").AttrTypes<{
5
+ start: NumberConstructor;
6
+ step: NumberConstructor;
7
+ }>;
8
+ readonly shadow: ShadowRoot;
9
+ "__#private@#use": import("../../index.js").Use;
10
+ "__#private@#mountCount": number;
11
+ "__#private@#reactor": import("../../base/utils/reactor.js").Reactor;
12
+ "__#private@#attrWatcher": import("../../base/utils/attr-watcher.js").AttrWatcher;
13
+ createShadow(): ShadowRoot;
14
+ render(_use: import("../../index.js").Use): import("../../index.js").Content;
15
+ updateNow: () => void;
16
+ update: import("@e280/stz").DebounceReturn<() => void>;
17
+ connectedCallback(): void;
18
+ disconnectedCallback(): void;
19
+ accessKey: string;
20
+ readonly accessKeyLabel: string;
21
+ autocapitalize: string;
22
+ autocorrect: boolean;
23
+ dir: string;
24
+ draggable: boolean;
25
+ hidden: boolean;
26
+ inert: boolean;
27
+ innerText: string;
28
+ lang: string;
29
+ readonly offsetHeight: number;
30
+ readonly offsetLeft: number;
31
+ readonly offsetParent: Element | null;
32
+ readonly offsetTop: number;
33
+ readonly offsetWidth: number;
34
+ outerText: string;
35
+ popover: string | null;
36
+ spellcheck: boolean;
37
+ title: string;
38
+ translate: boolean;
39
+ writingSuggestions: string;
40
+ attachInternals(): ElementInternals;
41
+ click(): void;
42
+ hidePopover(): void;
43
+ showPopover(): void;
44
+ togglePopover(options?: boolean): boolean;
45
+ addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
46
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
47
+ removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
48
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
49
+ readonly attributes: NamedNodeMap;
50
+ get classList(): DOMTokenList;
51
+ set classList(value: string);
52
+ className: string;
53
+ readonly clientHeight: number;
54
+ readonly clientLeft: number;
55
+ readonly clientTop: number;
56
+ readonly clientWidth: number;
57
+ readonly currentCSSZoom: number;
58
+ id: string;
59
+ innerHTML: string;
60
+ readonly localName: string;
61
+ readonly namespaceURI: string | null;
62
+ onfullscreenchange: ((this: Element, ev: Event) => any) | null;
63
+ onfullscreenerror: ((this: Element, ev: Event) => any) | null;
64
+ outerHTML: string;
65
+ readonly ownerDocument: Document;
66
+ get part(): DOMTokenList;
67
+ set part(value: string);
68
+ readonly prefix: string | null;
69
+ readonly scrollHeight: number;
70
+ scrollLeft: number;
71
+ scrollTop: number;
72
+ readonly scrollWidth: number;
73
+ readonly shadowRoot: ShadowRoot | null;
74
+ slot: string;
75
+ readonly tagName: string;
76
+ attachShadow(init: ShadowRootInit): ShadowRoot;
77
+ checkVisibility(options?: CheckVisibilityOptions): boolean;
78
+ closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
79
+ closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
80
+ closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
81
+ closest<E extends Element = Element>(selectors: string): E | null;
82
+ computedStyleMap(): StylePropertyMapReadOnly;
83
+ getAttribute(qualifiedName: string): string | null;
84
+ getAttributeNS(namespace: string | null, localName: string): string | null;
85
+ getAttributeNames(): string[];
86
+ getAttributeNode(qualifiedName: string): Attr | null;
87
+ getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
88
+ getBoundingClientRect(): DOMRect;
89
+ getClientRects(): DOMRectList;
90
+ getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
91
+ getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
92
+ getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
93
+ getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
94
+ getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
95
+ getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
96
+ getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
97
+ getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
98
+ getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
99
+ getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
100
+ getHTML(options?: GetHTMLOptions): string;
101
+ hasAttribute(qualifiedName: string): boolean;
102
+ hasAttributeNS(namespace: string | null, localName: string): boolean;
103
+ hasAttributes(): boolean;
104
+ hasPointerCapture(pointerId: number): boolean;
105
+ insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
106
+ insertAdjacentHTML(position: InsertPosition, string: string): void;
107
+ insertAdjacentText(where: InsertPosition, data: string): void;
108
+ matches(selectors: string): boolean;
109
+ releasePointerCapture(pointerId: number): void;
110
+ removeAttribute(qualifiedName: string): void;
111
+ removeAttributeNS(namespace: string | null, localName: string): void;
112
+ removeAttributeNode(attr: Attr): Attr;
113
+ requestFullscreen(options?: FullscreenOptions): Promise<void>;
114
+ requestPointerLock(options?: PointerLockOptions): Promise<void>;
115
+ scroll(options?: ScrollToOptions): void;
116
+ scroll(x: number, y: number): void;
117
+ scrollBy(options?: ScrollToOptions): void;
118
+ scrollBy(x: number, y: number): void;
119
+ scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
120
+ scrollTo(options?: ScrollToOptions): void;
121
+ scrollTo(x: number, y: number): void;
122
+ setAttribute(qualifiedName: string, value: string): void;
123
+ setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
124
+ setAttributeNode(attr: Attr): Attr | null;
125
+ setAttributeNodeNS(attr: Attr): Attr | null;
126
+ setHTMLUnsafe(html: string): void;
127
+ setPointerCapture(pointerId: number): void;
128
+ toggleAttribute(qualifiedName: string, force?: boolean): boolean;
129
+ webkitMatchesSelector(selectors: string): boolean;
130
+ get textContent(): string;
131
+ set textContent(value: string | null);
132
+ readonly baseURI: string;
133
+ readonly childNodes: NodeListOf<ChildNode>;
134
+ readonly firstChild: ChildNode | null;
135
+ readonly isConnected: boolean;
136
+ readonly lastChild: ChildNode | null;
137
+ readonly nextSibling: ChildNode | null;
138
+ readonly nodeName: string;
139
+ readonly nodeType: number;
140
+ nodeValue: string | null;
141
+ readonly parentElement: HTMLElement | null;
142
+ readonly parentNode: ParentNode | null;
143
+ readonly previousSibling: ChildNode | null;
144
+ appendChild<T extends Node>(node: T): T;
145
+ cloneNode(subtree?: boolean): Node;
146
+ compareDocumentPosition(other: Node): number;
147
+ contains(other: Node | null): boolean;
148
+ getRootNode(options?: GetRootNodeOptions): Node;
149
+ hasChildNodes(): boolean;
150
+ insertBefore<T extends Node>(node: T, child: Node | null): T;
151
+ isDefaultNamespace(namespace: string | null): boolean;
152
+ isEqualNode(otherNode: Node | null): boolean;
153
+ isSameNode(otherNode: Node | null): boolean;
154
+ lookupNamespaceURI(prefix: string | null): string | null;
155
+ lookupPrefix(namespace: string | null): string | null;
156
+ normalize(): void;
157
+ removeChild<T extends Node>(child: T): T;
158
+ replaceChild<T extends Node>(node: Node, child: T): T;
159
+ readonly ELEMENT_NODE: 1;
160
+ readonly ATTRIBUTE_NODE: 2;
161
+ readonly TEXT_NODE: 3;
162
+ readonly CDATA_SECTION_NODE: 4;
163
+ readonly ENTITY_REFERENCE_NODE: 5;
164
+ readonly ENTITY_NODE: 6;
165
+ readonly PROCESSING_INSTRUCTION_NODE: 7;
166
+ readonly COMMENT_NODE: 8;
167
+ readonly DOCUMENT_NODE: 9;
168
+ readonly DOCUMENT_TYPE_NODE: 10;
169
+ readonly DOCUMENT_FRAGMENT_NODE: 11;
170
+ readonly NOTATION_NODE: 12;
171
+ readonly DOCUMENT_POSITION_DISCONNECTED: 1;
172
+ readonly DOCUMENT_POSITION_PRECEDING: 2;
173
+ readonly DOCUMENT_POSITION_FOLLOWING: 4;
174
+ readonly DOCUMENT_POSITION_CONTAINS: 8;
175
+ readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
176
+ readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
177
+ dispatchEvent(event: Event): boolean;
178
+ ariaActiveDescendantElement: Element | null;
179
+ ariaAtomic: string | null;
180
+ ariaAutoComplete: string | null;
181
+ ariaBrailleLabel: string | null;
182
+ ariaBrailleRoleDescription: string | null;
183
+ ariaBusy: string | null;
184
+ ariaChecked: string | null;
185
+ ariaColCount: string | null;
186
+ ariaColIndex: string | null;
187
+ ariaColIndexText: string | null;
188
+ ariaColSpan: string | null;
189
+ ariaControlsElements: ReadonlyArray<Element> | null;
190
+ ariaCurrent: string | null;
191
+ ariaDescribedByElements: ReadonlyArray<Element> | null;
192
+ ariaDescription: string | null;
193
+ ariaDetailsElements: ReadonlyArray<Element> | null;
194
+ ariaDisabled: string | null;
195
+ ariaErrorMessageElements: ReadonlyArray<Element> | null;
196
+ ariaExpanded: string | null;
197
+ ariaFlowToElements: ReadonlyArray<Element> | null;
198
+ ariaHasPopup: string | null;
199
+ ariaHidden: string | null;
200
+ ariaInvalid: string | null;
201
+ ariaKeyShortcuts: string | null;
202
+ ariaLabel: string | null;
203
+ ariaLabelledByElements: ReadonlyArray<Element> | null;
204
+ ariaLevel: string | null;
205
+ ariaLive: string | null;
206
+ ariaModal: string | null;
207
+ ariaMultiLine: string | null;
208
+ ariaMultiSelectable: string | null;
209
+ ariaOrientation: string | null;
210
+ ariaOwnsElements: ReadonlyArray<Element> | null;
211
+ ariaPlaceholder: string | null;
212
+ ariaPosInSet: string | null;
213
+ ariaPressed: string | null;
214
+ ariaReadOnly: string | null;
215
+ ariaRelevant: string | null;
216
+ ariaRequired: string | null;
217
+ ariaRoleDescription: string | null;
218
+ ariaRowCount: string | null;
219
+ ariaRowIndex: string | null;
220
+ ariaRowIndexText: string | null;
221
+ ariaRowSpan: string | null;
222
+ ariaSelected: string | null;
223
+ ariaSetSize: string | null;
224
+ ariaSort: string | null;
225
+ ariaValueMax: string | null;
226
+ ariaValueMin: string | null;
227
+ ariaValueNow: string | null;
228
+ ariaValueText: string | null;
229
+ role: string | null;
230
+ animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
231
+ getAnimations(options?: GetAnimationsOptions): Animation[];
232
+ after(...nodes: (Node | string)[]): void;
233
+ before(...nodes: (Node | string)[]): void;
234
+ remove(): void;
235
+ replaceWith(...nodes: (Node | string)[]): void;
236
+ readonly nextElementSibling: Element | null;
237
+ readonly previousElementSibling: Element | null;
238
+ readonly childElementCount: number;
239
+ readonly children: HTMLCollection;
240
+ readonly firstElementChild: Element | null;
241
+ readonly lastElementChild: Element | null;
242
+ append(...nodes: (Node | string)[]): void;
243
+ prepend(...nodes: (Node | string)[]): void;
244
+ querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
245
+ querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
246
+ querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
247
+ querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
248
+ querySelector<E extends Element = Element>(selectors: string): E | null;
249
+ querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
250
+ querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
251
+ querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
252
+ querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
253
+ querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
254
+ replaceChildren(...nodes: (Node | string)[]): void;
255
+ readonly assignedSlot: HTMLSlotElement | null;
256
+ readonly attributeStyleMap: StylePropertyMap;
257
+ get style(): CSSStyleDeclaration;
258
+ set style(cssText: string);
259
+ contentEditable: string;
260
+ enterKeyHint: string;
261
+ inputMode: string;
262
+ readonly isContentEditable: boolean;
263
+ onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
264
+ onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
265
+ onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
266
+ onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
267
+ onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
268
+ onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
269
+ onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
270
+ onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) | null;
271
+ onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
272
+ onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
273
+ oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
274
+ oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
275
+ oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
276
+ onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
277
+ onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
278
+ onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
279
+ oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
280
+ oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
281
+ oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
282
+ oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
283
+ oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
284
+ oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
285
+ ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
286
+ ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
287
+ ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
288
+ ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
289
+ ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
290
+ ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
291
+ ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
292
+ ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
293
+ ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
294
+ onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
295
+ onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
296
+ onerror: OnErrorEventHandler;
297
+ onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
298
+ onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
299
+ ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
300
+ oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
301
+ oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
302
+ onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
303
+ onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
304
+ onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
305
+ onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
306
+ onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
307
+ onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
308
+ onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
309
+ onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
310
+ onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
311
+ onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
312
+ onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
313
+ onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
314
+ onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
315
+ onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
316
+ onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
317
+ onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
318
+ onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
319
+ onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
320
+ onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
321
+ onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
322
+ onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
323
+ onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
324
+ onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
325
+ onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
326
+ onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
327
+ onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
328
+ onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
329
+ onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
330
+ onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
331
+ onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
332
+ onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
333
+ onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
334
+ onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
335
+ onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
336
+ onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
337
+ onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
338
+ onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
339
+ onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
340
+ onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
341
+ onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
342
+ onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
343
+ onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
344
+ onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
345
+ onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
346
+ ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
347
+ ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
348
+ ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
349
+ ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
350
+ ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
351
+ ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
352
+ ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
353
+ ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
354
+ ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
355
+ ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
356
+ onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
357
+ onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
358
+ onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
359
+ onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
360
+ onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
361
+ onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
362
+ onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
363
+ autofocus: boolean;
364
+ readonly dataset: DOMStringMap;
365
+ nonce?: string;
366
+ tabIndex: number;
367
+ blur(): void;
368
+ focus(options?: FocusOptions): void;
369
+ };
370
+ styles: import("lit").CSSResultGroup | undefined;
371
+ }, [start: number, step: number]>;
372
+ export declare class CounterComponent extends CounterComponent_base {
373
+ }
374
+ export {};
@@ -1,36 +1,33 @@
1
1
  import { css, html } from "lit";
2
- import { repeat } from "@e280/stz";
3
- import { view } from "../../views/view.js";
4
- import { cssReset } from "../../views/css-reset.js";
5
- export const CounterView = view(use => (initial) => {
2
+ import { dom } from "../../dom/dom.js";
3
+ import { view } from "../../view/view.js";
4
+ import { cssReset } from "../../base/css-reset.js";
5
+ import { BaseElement } from "../../base/element.js";
6
+ export const CounterView = view(use => (start, step) => {
6
7
  use.name("counter");
7
8
  use.styles(cssReset, styles);
8
- const $seconds = use.signal(0);
9
- const start = use.once(() => Date.now());
10
- use.mount(() => repeat(async () => {
11
- const since = Date.now() - start;
12
- $seconds.set(Math.floor(since / 1000));
13
- }));
14
- const $count = use.signal(initial);
15
- const increment = () => $count.value++;
16
- const $product = use.signal
17
- .derived(() => $count() * $seconds());
9
+ const $count = use.signal(start);
10
+ const increment = () => { $count.value += step; };
18
11
  return html `
19
12
  <slot></slot>
20
13
  <div>
21
- <span>${$seconds.get()}</span>
14
+ <span>${$count()}</span>
22
15
  </div>
23
16
  <div>
24
- <span>${$count.get()}</span>
25
- </div>
26
- <div>
27
- <span>${$product.get()}</span>
28
- </div>
29
- <div>
30
- <button @click="${increment}">+</button>
17
+ <button @click="${increment}">++</button>
31
18
  </div>
32
19
  `;
33
20
  });
21
+ // convert a view into a web component
22
+ export class CounterComponent extends (CounterView
23
+ .component(class extends BaseElement {
24
+ attrs = dom.attrs(this).spec({
25
+ start: Number,
26
+ step: Number,
27
+ });
28
+ })
29
+ .props(c => [c.attrs.start ?? 0, c.attrs.step ?? 1])) {
30
+ }
34
31
  const styles = css `
35
32
  :host {
36
33
  display: flex;
@@ -1 +1 @@
1
- {"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../s/demo/views/counter.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAA;AAEhC,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAAe,EAAE,EAAE;IAC1D,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACnB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE5B,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAC9B,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAA;IACxC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,IAAG,EAAE;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,CAAA;QAChC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAA;IACvC,CAAC,CAAC,CAAC,CAAA;IAEH,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAClC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;IAEtC,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM;SACzB,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAA;IAEtC,OAAO,IAAI,CAAA;;;WAGD,QAAQ,CAAC,GAAG,EAAE;;;WAGd,MAAM,CAAC,GAAG,EAAE;;;WAGZ,QAAQ,CAAC,GAAG,EAAE;;;qBAGJ,SAAS;;EAE5B,CAAA;AACF,CAAC,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;CAUjB,CAAA"}
1
+ {"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../s/demo/views/counter.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAE7B,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AACpC,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAA;AAChD,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAA;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE;IACtE,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACnB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE5B,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAChC,MAAM,SAAS,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,IAAI,CAAA,CAAC,CAAC,CAAA;IAEhD,OAAO,IAAI,CAAA;;;WAGD,MAAM,EAAE;;;qBAGE,SAAS;;EAE5B,CAAA;AACF,CAAC,CAAC,CAAA;AAEF,sCAAsC;AACtC,MAAM,OAAO,gBAAiB,SAAQ,CACrC,WAAW;KACT,SAAS,CAAC,KAAM,SAAQ,WAAW;IACnC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;QAC5B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,MAAM;KACZ,CAAC,CAAA;CACF,CAAC;KACD,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CACrD;CAAG;AAEJ,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;CAUjB,CAAA"}
@@ -1 +1,4 @@
1
- export declare const DemoView: import("../../index.js").View<[]>;
1
+ declare const DemoComponent_base: import("../../index.js").ComponentClass<typeof import("../../index.js").BaseElement, []>;
2
+ export declare class DemoComponent extends DemoComponent_base {
3
+ }
4
+ export {};
@@ -1,16 +1,20 @@
1
1
  import { css, html } from "lit";
2
- import { view } from "../../views/view.js";
2
+ import { view } from "../../view/view.js";
3
3
  import { CounterView } from "./counter.js";
4
4
  import { LoadersView } from "./loaders.js";
5
- import { cssReset } from "../../views/css-reset.js";
6
- export const DemoView = view(use => () => {
5
+ import { cssReset } from "../../base/css-reset.js";
6
+ export class DemoComponent extends (view.component(use => {
7
7
  use.name("demo");
8
8
  use.styles(cssReset, styles);
9
9
  return html `
10
- ${CounterView.props(2).children("view").render()}
10
+ ${CounterView
11
+ .props(768, 3)
12
+ .children("view")
13
+ .render()}
11
14
  ${LoadersView()}
12
15
  `;
13
- });
16
+ })) {
17
+ }
14
18
  const styles = css `
15
19
  :host {
16
20
  display: flex;
@@ -1 +1 @@
1
- {"version":3,"file":"demo.js","sourceRoot":"","sources":["../../../s/demo/views/demo.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AAEjD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE;IACxC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAChB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE5B,OAAO,IAAI,CAAA;IACR,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;IAC9C,WAAW,EAAE;EACf,CAAA;AACF,CAAC,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;CAOjB,CAAA"}
1
+ {"version":3,"file":"demo.js","sourceRoot":"","sources":["../../../s/demo/views/demo.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAE7B,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAA;AAEhD,MAAM,OAAO,aAAc,SAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;IACxD,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAChB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC5B,OAAO,IAAI,CAAA;IACR,WAAW;SACX,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;SACb,QAAQ,CAAC,MAAM,CAAC;SAChB,MAAM,EAAE;IACR,WAAW,EAAE;EACf,CAAA;AACF,CAAC,CAAC,CAAC;CAAG;AAEN,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;CAOjB,CAAA"}
@@ -1,6 +1,6 @@
1
- import { Use } from "../../views/use.js";
2
- import { BaseElement } from "../../views/base-element.js";
3
- export declare class IncrediElement extends BaseElement {
1
+ import { Use } from "../../base/use.js";
2
+ import { BaseElement } from "../../base/element.js";
3
+ export declare class FastcountElement extends BaseElement {
4
4
  static styles: import("lit").CSSResult;
5
5
  attrs: import("../../index.js").AttrTypes<{
6
6
  value: NumberConstructor;
@@ -1,15 +1,15 @@
1
1
  import { css, html } from "lit";
2
- import { nap, repeat } from "@e280/stz";
2
+ import { nap, cycle } from "@e280/stz";
3
3
  import { dom } from "../../dom/dom.js";
4
- import { BaseElement } from "../../views/base-element.js";
5
- export class IncrediElement extends BaseElement {
4
+ import { BaseElement } from "../../base/element.js";
5
+ export class FastcountElement extends BaseElement {
6
6
  static styles = css `span{color:orange}`;
7
- attrs = dom.attrs(this, { value: Number });
7
+ attrs = dom.attrs(this).spec({ value: Number });
8
8
  something = { whatever: "rofl" };
9
9
  render(use) {
10
10
  const { value = 1 } = this.attrs;
11
11
  const $count = use.signal(0);
12
- use.mount(() => repeat(async () => {
12
+ use.mount(() => cycle(async () => {
13
13
  await nap(10);
14
14
  await $count($count() + 1);
15
15
  }));
@@ -18,4 +18,4 @@ export class IncrediElement extends BaseElement {
18
18
  `;
19
19
  }
20
20
  }
21
- //# sourceMappingURL=incredi.js.map
21
+ //# sourceMappingURL=fastcount.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fastcount.js","sourceRoot":"","sources":["../../../s/demo/views/fastcount.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAE,KAAK,EAAC,MAAM,WAAW,CAAA;AAEpC,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAA;AAEjD,MAAM,OAAO,gBAAiB,SAAQ,WAAW;IAChD,MAAM,CAAC,MAAM,GAAG,GAAG,CAAA,oBAAoB,CAAA;IAEvC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC,CAAA;IAC7C,SAAS,GAAG,EAAC,QAAQ,EAAE,MAAM,EAAC,CAAA;IAE9B,MAAM,CAAC,GAAQ;QACd,MAAM,EAAC,KAAK,GAAG,CAAC,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QAE5B,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAG,EAAE;YAC/B,MAAM,GAAG,CAAC,EAAE,CAAC,CAAA;YACb,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;QAC3B,CAAC,CAAC,CAAC,CAAA;QAEH,OAAO,IAAI,CAAA;WACF,MAAM,EAAE,GAAG,KAAK;GACxB,CAAA;IACF,CAAC"}
@@ -1,17 +1,17 @@
1
1
  import { css, html } from "lit";
2
2
  import { Op } from "../../ops/op.js";
3
- import { view } from "../../views/view.js";
4
- import { cssReset } from "../../views/css-reset.js";
5
- import { anims, makeLoader } from "../../ops/loaders/make-loader.js";
3
+ import { view } from "../../view/view.js";
4
+ import { loaders } from "../../loaders/index.js";
5
+ import { cssReset } from "../../base/css-reset.js";
6
6
  export const LoadersView = view(use => () => {
7
7
  use.name("loaders");
8
8
  use.styles(cssReset, styles);
9
9
  const op = use.once(() => Op.loading());
10
- const loaders = use.once(() => Object.entries(anims).map(([key, anim]) => ({
10
+ const library = use.once(() => Object.entries(loaders.anims).map(([key, anim]) => ({
11
11
  key,
12
- loader: makeLoader(anim)
12
+ loader: loaders.make(anim)
13
13
  })));
14
- return loaders.map(({ key, loader }) => html `
14
+ return library.map(({ key, loader }) => html `
15
15
  <div data-anim="${key}">
16
16
  <span>${key}</span>
17
17
  <span>${loader(op, () => null)}</span>
@@ -1 +1 @@
1
- {"version":3,"file":"loaders.js","sourceRoot":"","sources":["../../../s/demo/views/loaders.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,EAAE,EAAC,MAAM,iBAAiB,CAAA;AAClC,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,kCAAkC,CAAA;AAElE,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE;IAC3C,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACnB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE5B,MAAM,EAAE,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,CAAA;IAEvC,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAC7B,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;QAC3C,GAAG;QACH,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC;KACxB,CAAC,CAAC,CACH,CAAA;IAED,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,MAAM,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA;oBACvB,GAAG;WACZ,GAAG;WACH,MAAM,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC;;EAE/B,CAAC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCjB,CAAA"}
1
+ {"version":3,"file":"loaders.js","sourceRoot":"","sources":["../../../s/demo/views/loaders.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,EAAE,EAAC,MAAM,iBAAiB,CAAA;AAClC,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAC,OAAO,EAAC,MAAM,wBAAwB,CAAA;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAA;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE;IAC3C,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACnB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE5B,MAAM,EAAE,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,CAAA;IAEvC,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAC7B,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;QACnD,GAAG;QACH,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KAC1B,CAAC,CAAC,CACH,CAAA;IAED,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,MAAM,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA;oBACvB,GAAG;WACZ,GAAG;WACH,MAAM,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC;;EAE/B,CAAC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCjB,CAAA"}
@@ -0,0 +1,23 @@
1
+ import { AttrSpec } from "../types.js";
2
+ export declare function attrs(element: HTMLElement): {
3
+ strings: Record<string, string | undefined>;
4
+ numbers: Record<string, number | undefined>;
5
+ booleans: Record<string, boolean | undefined>;
6
+ on: (fn: () => void) => () => void;
7
+ spec: <A extends AttrSpec>(spec: A) => import("../types.js").AttrTypes<A>;
8
+ };
9
+ export declare namespace attrs {
10
+ var get: {
11
+ string: (e: HTMLElement, key: string) => string | undefined;
12
+ number: (e: HTMLElement, key: string) => number | undefined;
13
+ boolean: (e: HTMLElement, key: string) => boolean;
14
+ };
15
+ var set: {
16
+ string: (e: HTMLElement, key: string, value: string | undefined) => boolean;
17
+ number: (e: HTMLElement, key: string, value: number | undefined) => boolean;
18
+ boolean: (e: HTMLElement, key: string, value: boolean | undefined) => boolean;
19
+ any: (element: HTMLElement, key: string, value: import("../types.js").AttrValue) => void;
20
+ entries: (element: HTMLElement, entries: Iterable<[key: string, value: import("../types.js").AttrValue]>) => void;
21
+ record: (element: HTMLElement, record: Record<string, import("../types.js").AttrValue>) => void;
22
+ };
23
+ }
@@ -0,0 +1,17 @@
1
+ import { onAttrs } from "./parts/on-attrs.js";
2
+ import { attrSpec } from "./parts/attr-spec.js";
3
+ import { AttrProxies } from "./parts/attr-proxies.js";
4
+ import { attrGet, attrSet } from "./parts/attr-fns.js";
5
+ export function attrs(element) {
6
+ const proxies = new AttrProxies(element);
7
+ return {
8
+ strings: proxies.strings,
9
+ numbers: proxies.numbers,
10
+ booleans: proxies.booleans,
11
+ on: (fn) => onAttrs(element, fn),
12
+ spec: (spec) => attrSpec(element, spec),
13
+ };
14
+ }
15
+ attrs.get = attrGet;
16
+ attrs.set = attrSet;
17
+ //# sourceMappingURL=attrs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"attrs.js","sourceRoot":"","sources":["../../../s/dom/attrs/attrs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAA;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAC,OAAO,EAAE,OAAO,EAAC,MAAM,qBAAqB,CAAA;AAEpD,MAAM,UAAU,KAAK,CAAC,OAAoB;IACzC,MAAM,OAAO,GAAG,IAAI,WAAW,CAAC,OAAO,CAAC,CAAA;IACxC,OAAO;QACN,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,EAAE,EAAE,CAAC,EAAc,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;QAC5C,IAAI,EAAE,CAAqB,IAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;KAC9D,CAAA;AACF,CAAC;AAED,KAAK,CAAC,GAAG,GAAG,OAAO,CAAA;AACnB,KAAK,CAAC,GAAG,GAAG,OAAO,CAAA"}
@@ -0,0 +1,16 @@
1
+ import { AttrValue } from "../../types.js";
2
+ /** get html attributes */
3
+ export declare const attrGet: {
4
+ string: (e: HTMLElement, key: string) => string | undefined;
5
+ number: (e: HTMLElement, key: string) => number | undefined;
6
+ boolean: (e: HTMLElement, key: string) => boolean;
7
+ };
8
+ /** set html attributes */
9
+ export declare const attrSet: {
10
+ string: (e: HTMLElement, key: string, value: string | undefined) => boolean;
11
+ number: (e: HTMLElement, key: string, value: number | undefined) => boolean;
12
+ boolean: (e: HTMLElement, key: string, value: boolean | undefined) => boolean;
13
+ any: (element: HTMLElement, key: string, value: AttrValue) => void;
14
+ entries: (element: HTMLElement, entries: Iterable<[key: string, value: AttrValue]>) => void;
15
+ record: (element: HTMLElement, record: Record<string, AttrValue>) => void;
16
+ };