@e280/sly 0.2.0-26 → 0.2.0-27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +86 -21
- package/package.json +4 -4
- package/s/base/use.ts +5 -0
- package/s/demo/views/fastcount.ts +2 -2
- package/s/dom/attrs/attrs.ts +3 -3
- package/s/dom/attrs/parts/attr-fns.ts +64 -34
- package/s/dom/attrs/parts/attr-proxies.ts +7 -7
- package/s/dom/attrs/parts/attr-spec.ts +7 -7
- package/s/dom/dom.ts +15 -61
- package/s/dom/parts/dom-scope.ts +46 -0
- package/s/dom/parts/el.ts +4 -4
- package/s/dom/parts/elmer.ts +38 -0
- package/s/dom/parts/mk.ts +9 -0
- package/s/dom/parts/queries.ts +26 -0
- package/s/dom/types.ts +5 -0
- package/s/loaders/parts/ascii-anim.ts +2 -2
- package/s/view/types.ts +0 -1
- package/s/view/utils/parts/capsule.ts +2 -2
- package/s/view/utils/parts/chain.ts +3 -2
- package/s/view/utils/parts/context.ts +2 -1
- package/x/base/use.d.ts +2 -0
- package/x/base/use.js +4 -0
- package/x/base/use.js.map +1 -1
- package/x/demo/demo.bundle.min.js +15 -15
- package/x/demo/demo.bundle.min.js.map +4 -4
- package/x/demo/views/fastcount.js +2 -2
- package/x/demo/views/fastcount.js.map +1 -1
- package/x/dom/attrs/attrs.d.ts +3 -0
- package/x/dom/attrs/attrs.js +3 -3
- package/x/dom/attrs/attrs.js.map +1 -1
- package/x/dom/attrs/parts/attr-fns.d.ts +15 -12
- package/x/dom/attrs/parts/attr-fns.js +60 -38
- package/x/dom/attrs/parts/attr-fns.js.map +1 -1
- package/x/dom/attrs/parts/attr-proxies.js +7 -7
- package/x/dom/attrs/parts/attr-proxies.js.map +1 -1
- package/x/dom/attrs/parts/attr-spec.js +7 -7
- package/x/dom/attrs/parts/attr-spec.js.map +1 -1
- package/x/dom/dom.d.ts +11 -27
- package/x/dom/dom.js +15 -48
- package/x/dom/dom.js.map +1 -1
- package/x/dom/parts/dom-scope.d.ts +15 -0
- package/x/dom/parts/dom-scope.js +35 -0
- package/x/dom/parts/dom-scope.js.map +1 -0
- package/x/dom/parts/el.d.ts +2 -2
- package/x/dom/parts/el.js +3 -3
- package/x/dom/parts/el.js.map +1 -1
- package/x/dom/parts/elmer.d.ts +11 -0
- package/x/dom/parts/elmer.js +32 -0
- package/x/dom/parts/elmer.js.map +1 -0
- package/x/dom/parts/mk.d.ts +2 -0
- package/x/dom/parts/mk.js +7 -0
- package/x/dom/parts/mk.js.map +1 -0
- package/x/dom/parts/queries.d.ts +4 -0
- package/x/dom/parts/queries.js +13 -0
- package/x/dom/parts/queries.js.map +1 -0
- package/x/dom/types.d.ts +3 -0
- package/x/index.html +2 -2
- package/x/loaders/parts/ascii-anim.js +2 -2
- package/x/loaders/parts/ascii-anim.js.map +1 -1
- package/x/view/types.d.ts +0 -1
- package/x/view/utils/parts/capsule.js +2 -2
- package/x/view/utils/parts/capsule.js.map +1 -1
- package/x/view/utils/parts/chain.d.ts +3 -2
- package/x/view/utils/parts/chain.js.map +1 -1
- package/x/view/utils/parts/context.d.ts +2 -1
- package/x/view/utils/parts/context.js.map +1 -1
- package/s/view/utils/parts/set-attrs.ts +0 -33
- package/x/view/utils/parts/set-attrs.d.ts +0 -3
- package/x/view/utils/parts/set-attrs.js +0 -21
- package/x/view/utils/parts/set-attrs.js.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
|
-
import { nap,
|
|
2
|
+
import { nap, cycle } from "@e280/stz";
|
|
3
3
|
import { view } from "../../view/view.js";
|
|
4
4
|
import { cssReset } from "../../base/css-reset.js";
|
|
5
5
|
export function makeAsciiAnim(hz, frames) {
|
|
@@ -9,7 +9,7 @@ export const AsciiAnim = view(use => ({ hz, frames }) => {
|
|
|
9
9
|
use.name("loading");
|
|
10
10
|
use.styles(cssReset, style);
|
|
11
11
|
const frame = use.signal(0);
|
|
12
|
-
use.mount(() =>
|
|
12
|
+
use.mount(() => cycle(async () => {
|
|
13
13
|
await nap(1000 / hz);
|
|
14
14
|
const next = frame.get() + 1;
|
|
15
15
|
frame.set(next >= frames.length ? 0 : next);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ascii-anim.js","sourceRoot":"","sources":["../../../s/loaders/parts/ascii-anim.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,GAAG,EAAE,
|
|
1
|
+
{"version":3,"file":"ascii-anim.js","sourceRoot":"","sources":["../../../s/loaders/parts/ascii-anim.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,GAAG,EAAE,KAAK,EAAC,MAAM,WAAW,CAAA;AAEpC,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAA;AAEvC,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAA;AAEhD,MAAM,UAAU,aAAa,CAAC,EAAU,EAAE,MAAgB;IACzD,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,EAAC,EAAE,EAAE,MAAM,EAAC,CAAC,CAAA;AACrC,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAC,EAAE,EAAE,MAAM,EAG/C,EAAE,EAAE;IAEL,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACnB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IAE3B,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAE3B,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,IAAG,EAAE;QAC/B,MAAM,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAA;QACpB,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;QAC5B,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;IAC5C,CAAC,CAAC,CAAC,CAAA;IAEH,OAAO,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAA;AAC9B,CAAC,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;CAMhB,CAAA"}
|
package/x/view/types.d.ts
CHANGED
|
@@ -5,7 +5,6 @@ import { Use } from "../base/use.js";
|
|
|
5
5
|
import { BaseElement } from "../base/element.js";
|
|
6
6
|
import { ViewChain } from "./utils/parts/chain.js";
|
|
7
7
|
export type Content = TemplateResult | DirectiveResult | HTMLElement | string | null | undefined | void | Content[];
|
|
8
|
-
export type AttrValue = string | boolean | number | undefined | null | void;
|
|
9
8
|
export type ViewFn<Props extends any[]> = ((use: Use) => (...props: Props) => Content);
|
|
10
9
|
export type View<Props extends any[]> = {
|
|
11
10
|
(...props: Props): DirectiveResult;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { debounce } from "@e280/stz";
|
|
2
2
|
import { SlyView } from "./sly-view.js";
|
|
3
3
|
import { dom } from "../../../dom/dom.js";
|
|
4
|
-
import { setAttrs } from "./set-attrs.js";
|
|
5
4
|
import { Reactor } from "../../../base/utils/reactor.js";
|
|
5
|
+
import { attrSet } from "../../../dom/attrs/parts/attr-fns.js";
|
|
6
6
|
import { AttrWatcher } from "../../../base/utils/attr-watcher.js";
|
|
7
7
|
import { _disconnect, _reconnect, _wrap, Use } from "../../../base/use.js";
|
|
8
8
|
/** controls the rendering of view context into an element. */
|
|
@@ -29,7 +29,7 @@ export class ViewCapsule {
|
|
|
29
29
|
#renderNow = () => {
|
|
30
30
|
this.#use[_wrap](() => {
|
|
31
31
|
const content = this.#reactor.effect(() => this.viewFn(this.#use)(...this.#context.props), () => this.#renderDebounced());
|
|
32
|
-
|
|
32
|
+
attrSet.entries(this.#element, this.#context.attrs);
|
|
33
33
|
dom.render(this.#shadow, content);
|
|
34
34
|
dom.render(this.#element, this.#context.children);
|
|
35
35
|
this.#attrWatcher.start();
|
|
@@ -1 +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;
|
|
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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Content } from "../../types.js";
|
|
2
2
|
import { ViewContext } from "./context.js";
|
|
3
|
-
import { AttrValue
|
|
3
|
+
import { AttrValue } from "../../../dom/types.js";
|
|
4
|
+
import { DirectiveResult } from "lit/async-directive.js";
|
|
4
5
|
/** provides fluent chaining interface for adding context to rendering a view, think view.props().attr().children().render() */
|
|
5
6
|
export declare class ViewChain<Props extends any[]> {
|
|
6
7
|
#private;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chain.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/chain.ts"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Content } from "../../types.js";
|
|
2
|
+
import { AttrValue } from "../../../dom/types.js";
|
|
2
3
|
/** the information we need to render a view. */
|
|
3
4
|
export declare class ViewContext<Props extends any[]> {
|
|
4
5
|
props: Props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/context.ts"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import {AttrValue} from "../../types.js"
|
|
3
|
-
|
|
4
|
-
export function setAttr(element: HTMLElement, key: string, value: AttrValue) {
|
|
5
|
-
if (value === undefined || value === null)
|
|
6
|
-
element.removeAttribute(key)
|
|
7
|
-
|
|
8
|
-
else if (typeof value === "string")
|
|
9
|
-
element.setAttribute(key, value)
|
|
10
|
-
|
|
11
|
-
else if (typeof value === "number")
|
|
12
|
-
element.setAttribute(key, value.toString())
|
|
13
|
-
|
|
14
|
-
else if (typeof value === "boolean") {
|
|
15
|
-
if (value === true)
|
|
16
|
-
element.setAttribute(key, "")
|
|
17
|
-
else
|
|
18
|
-
element.removeAttribute(key)
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
else
|
|
22
|
-
console.warn(`invalid attribute "${key}" type is "${typeof value}"`)
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export function setAttrs(
|
|
26
|
-
element: HTMLElement,
|
|
27
|
-
attrs: [key: string, value: AttrValue][],
|
|
28
|
-
) {
|
|
29
|
-
|
|
30
|
-
for (const [key, value] of attrs)
|
|
31
|
-
setAttr(element, key, value)
|
|
32
|
-
}
|
|
33
|
-
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
export function setAttr(element, key, value) {
|
|
2
|
-
if (value === undefined || value === null)
|
|
3
|
-
element.removeAttribute(key);
|
|
4
|
-
else if (typeof value === "string")
|
|
5
|
-
element.setAttribute(key, value);
|
|
6
|
-
else if (typeof value === "number")
|
|
7
|
-
element.setAttribute(key, value.toString());
|
|
8
|
-
else if (typeof value === "boolean") {
|
|
9
|
-
if (value === true)
|
|
10
|
-
element.setAttribute(key, "");
|
|
11
|
-
else
|
|
12
|
-
element.removeAttribute(key);
|
|
13
|
-
}
|
|
14
|
-
else
|
|
15
|
-
console.warn(`invalid attribute "${key}" type is "${typeof value}"`);
|
|
16
|
-
}
|
|
17
|
-
export function setAttrs(element, attrs) {
|
|
18
|
-
for (const [key, value] of attrs)
|
|
19
|
-
setAttr(element, key, value);
|
|
20
|
-
}
|
|
21
|
-
//# sourceMappingURL=set-attrs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"set-attrs.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/set-attrs.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,OAAO,CAAC,OAAoB,EAAE,GAAW,EAAE,KAAgB;IAC1E,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;QACxC,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA;SAExB,IAAI,OAAO,KAAK,KAAK,QAAQ;QACjC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;SAE5B,IAAI,OAAO,KAAK,KAAK,QAAQ;QACjC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;SAEvC,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QACrC,IAAI,KAAK,KAAK,IAAI;YACjB,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;;YAE7B,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA;IAC9B,CAAC;;QAGA,OAAO,CAAC,IAAI,CAAC,sBAAsB,GAAG,cAAc,OAAO,KAAK,GAAG,CAAC,CAAA;AACtE,CAAC;AAED,MAAM,UAAU,QAAQ,CACtB,OAAoB,EACpB,KAAwC;IAGzC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,KAAK;QAC/B,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;AAC9B,CAAC"}
|