@joist/element 4.2.3-next.13 → 4.2.3-next.3
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/package.json +5 -2
- package/src/lib/attr.test.ts +17 -36
- package/src/lib/element.test.ts +25 -33
- package/src/lib/element.ts +18 -11
- package/src/lib/listen.test.ts +0 -75
- package/src/lib/templating/README.md +406 -0
- package/src/lib/templating/bind.ts +40 -0
- package/src/lib/templating/define.ts +5 -0
- package/src/lib/templating/elements/async.element.test.ts +90 -0
- package/src/lib/templating/elements/async.element.ts +122 -0
- package/src/lib/templating/elements/for.element.test.ts +221 -0
- package/src/lib/templating/elements/for.element.ts +189 -0
- package/src/lib/templating/elements/if.element.test.ts +90 -0
- package/src/lib/templating/elements/if.element.ts +93 -0
- package/src/lib/templating/elements/props.element.test.ts +62 -0
- package/src/lib/templating/elements/props.element.ts +80 -0
- package/src/lib/templating/elements/scope.ts +45 -0
- package/src/lib/templating/elements/value.element.test.ts +20 -0
- package/src/lib/templating/elements/value.element.ts +41 -0
- package/src/lib/templating/events.ts +21 -0
- package/src/lib/templating/token.test.ts +74 -0
- package/src/lib/templating/token.ts +34 -0
- package/src/lib/templating.ts +2 -0
- package/target/lib/attr.test.js +19 -42
- package/target/lib/attr.test.js.map +1 -1
- package/target/lib/element.js +8 -8
- package/target/lib/element.js.map +1 -1
- package/target/lib/element.test.js +0 -68
- package/target/lib/element.test.js.map +1 -1
- package/target/lib/listen.test.js +0 -97
- package/target/lib/listen.test.js.map +1 -1
- package/target/lib/templating/bind.d.ts +1 -0
- package/target/lib/templating/bind.js +30 -0
- package/target/lib/templating/bind.js.map +1 -0
- package/target/lib/templating/define.d.ts +5 -0
- package/target/lib/templating/define.js +6 -0
- package/target/lib/templating/define.js.map +1 -0
- package/target/lib/templating/elements/async.element.d.ts +17 -0
- package/target/lib/templating/elements/async.element.js +115 -0
- package/target/lib/templating/elements/async.element.js.map +1 -0
- package/target/lib/templating/elements/async.element.test.d.ts +1 -0
- package/target/lib/templating/elements/async.element.test.js +75 -0
- package/target/lib/templating/elements/async.element.test.js.map +1 -0
- package/target/lib/templating/elements/for.element.d.ts +24 -0
- package/target/lib/templating/elements/for.element.js +186 -0
- package/target/lib/templating/elements/for.element.js.map +1 -0
- package/target/lib/templating/elements/for.element.test.d.ts +2 -0
- package/target/lib/templating/elements/for.element.test.js +153 -0
- package/target/lib/templating/elements/for.element.test.js.map +1 -0
- package/target/lib/templating/elements/if.element.d.ts +12 -0
- package/target/lib/templating/elements/if.element.js +85 -0
- package/target/lib/templating/elements/if.element.js.map +1 -0
- package/target/lib/templating/elements/if.element.test.d.ts +1 -0
- package/target/lib/templating/elements/if.element.test.js +78 -0
- package/target/lib/templating/elements/if.element.test.js.map +1 -0
- package/target/lib/templating/elements/props.element.d.ts +11 -0
- package/target/lib/templating/elements/props.element.js +92 -0
- package/target/lib/templating/elements/props.element.js.map +1 -0
- package/target/lib/templating/elements/props.element.test.d.ts +1 -0
- package/target/lib/templating/elements/props.element.test.js +53 -0
- package/target/lib/templating/elements/props.element.test.js.map +1 -0
- package/target/lib/templating/elements/scope.d.ts +13 -0
- package/target/lib/templating/elements/scope.js +59 -0
- package/target/lib/templating/elements/scope.js.map +1 -0
- package/target/lib/templating/elements/value.element.d.ts +9 -0
- package/target/lib/templating/elements/value.element.js +56 -0
- package/target/lib/templating/elements/value.element.js.map +1 -0
- package/target/lib/templating/elements/value.element.test.d.ts +1 -0
- package/target/lib/templating/elements/value.element.test.js +16 -0
- package/target/lib/templating/elements/value.element.test.js.map +1 -0
- package/target/lib/templating/events.d.ts +12 -0
- package/target/lib/templating/events.js +10 -0
- package/target/lib/templating/events.js.map +1 -0
- package/target/lib/templating/token.d.ts +8 -0
- package/target/lib/templating/token.js +27 -0
- package/target/lib/templating/token.js.map +1 -0
- package/target/lib/templating/token.test.d.ts +1 -0
- package/target/lib/templating/token.test.js +56 -0
- package/target/lib/templating/token.test.js.map +1 -0
- package/target/lib/templating.d.ts +2 -0
- package/target/lib/templating.js +3 -0
- package/target/lib/templating.js.map +1 -0
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { attr } from "../../attr.js";
|
|
3
|
+
import { element } from "../../element.js";
|
|
4
|
+
import { queryAll } from "../../query-all.js";
|
|
5
|
+
import { css, html } from "../../tags.js";
|
|
6
|
+
import { JoistValueEvent } from "../events.js";
|
|
7
|
+
import { JToken } from "../token.js";
|
|
8
|
+
let JoistIfElement = (() => {
|
|
9
|
+
let _classDecorators = [element({
|
|
10
|
+
tagName: "j-if",
|
|
11
|
+
shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
|
|
12
|
+
})];
|
|
13
|
+
let _classDescriptor;
|
|
14
|
+
let _classExtraInitializers = [];
|
|
15
|
+
let _classThis;
|
|
16
|
+
let _classSuper = HTMLElement;
|
|
17
|
+
let _bind_decorators;
|
|
18
|
+
let _bind_initializers = [];
|
|
19
|
+
let _bind_extraInitializers = [];
|
|
20
|
+
var JoistIfElement = class extends _classSuper {
|
|
21
|
+
static { _classThis = this; }
|
|
22
|
+
static {
|
|
23
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
24
|
+
_bind_decorators = [attr()];
|
|
25
|
+
__esDecorate(this, null, _bind_decorators, { kind: "accessor", name: "bind", static: false, private: false, access: { has: obj => "bind" in obj, get: obj => obj.bind, set: (obj, value) => { obj.bind = value; } }, metadata: _metadata }, _bind_initializers, _bind_extraInitializers);
|
|
26
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
27
|
+
JoistIfElement = _classThis = _classDescriptor.value;
|
|
28
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
29
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
30
|
+
}
|
|
31
|
+
#bind_accessor_storage = __runInitializers(this, _bind_initializers, "");
|
|
32
|
+
get bind() { return this.#bind_accessor_storage; }
|
|
33
|
+
set bind(value) { this.#bind_accessor_storage = value; }
|
|
34
|
+
#templates = (__runInitializers(this, _bind_extraInitializers), queryAll("template", this));
|
|
35
|
+
connectedCallback() {
|
|
36
|
+
const templates = Array.from(this.#templates());
|
|
37
|
+
if (templates.length === 0) {
|
|
38
|
+
throw new Error("j-if requires at least one template element");
|
|
39
|
+
}
|
|
40
|
+
if (templates.length > 2) {
|
|
41
|
+
throw new Error("j-if can only have two template elements (if and else)");
|
|
42
|
+
}
|
|
43
|
+
if (templates.length === 2 &&
|
|
44
|
+
!templates.some((t) => t.hasAttribute("else"))) {
|
|
45
|
+
throw new Error("When using two templates, one must have the else attribute");
|
|
46
|
+
}
|
|
47
|
+
if (templates.length === 2 && templates[0].hasAttribute("else")) {
|
|
48
|
+
[templates[0], templates[1]] = [templates[1], templates[0]];
|
|
49
|
+
}
|
|
50
|
+
this.#clean();
|
|
51
|
+
const token = new JToken(this.bind);
|
|
52
|
+
this.dispatchEvent(new JoistValueEvent(token, ({ newValue, oldValue }) => {
|
|
53
|
+
if (newValue !== oldValue) {
|
|
54
|
+
if (typeof newValue === "object" && newValue !== null) {
|
|
55
|
+
this.apply(token.readTokenValueFrom(newValue), token.isNegated);
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
this.apply(newValue, token.isNegated);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}));
|
|
62
|
+
}
|
|
63
|
+
apply(value, isNegative) {
|
|
64
|
+
this.#clean();
|
|
65
|
+
const templates = this.#templates();
|
|
66
|
+
const shouldShowIf = isNegative ? !value : value;
|
|
67
|
+
const templateToUse = shouldShowIf ? templates[0] : templates[1];
|
|
68
|
+
if (templateToUse) {
|
|
69
|
+
const content = document.importNode(templateToUse.content, true);
|
|
70
|
+
this.appendChild(content);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
#clean() {
|
|
74
|
+
while (!(this.lastChild instanceof HTMLTemplateElement)) {
|
|
75
|
+
this.lastChild?.remove();
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
disconnectedCallback() {
|
|
79
|
+
this.#clean();
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
return JoistIfElement = _classThis;
|
|
83
|
+
})();
|
|
84
|
+
export { JoistIfElement };
|
|
85
|
+
//# sourceMappingURL=if.element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"if.element.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/if.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./if.element.js";
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import "./if.element.js";
|
|
2
|
+
import { fixtureSync, html } from "@open-wc/testing";
|
|
3
|
+
import { assert } from "chai";
|
|
4
|
+
it("should render content when the bind value is truthy", () => {
|
|
5
|
+
const element = fixtureSync(html `
|
|
6
|
+
<div
|
|
7
|
+
@joist::value=${(e) => {
|
|
8
|
+
e.update({ oldValue: null, newValue: true });
|
|
9
|
+
}}
|
|
10
|
+
>
|
|
11
|
+
<j-if bind="test">
|
|
12
|
+
<template>Visible Content</template>
|
|
13
|
+
</j-if>
|
|
14
|
+
</div>
|
|
15
|
+
`);
|
|
16
|
+
assert.equal(element.textContent?.trim(), "Visible Content");
|
|
17
|
+
});
|
|
18
|
+
it("should not render content when the bind value is falsy", () => {
|
|
19
|
+
const element = fixtureSync(html `
|
|
20
|
+
<div
|
|
21
|
+
@joist::value=${(e) => {
|
|
22
|
+
e.update({ oldValue: null, newValue: true });
|
|
23
|
+
e.update({ oldValue: null, newValue: false });
|
|
24
|
+
}}
|
|
25
|
+
>
|
|
26
|
+
<j-if bind="test">
|
|
27
|
+
<template>Visible Content</template>
|
|
28
|
+
</j-if>
|
|
29
|
+
</div>
|
|
30
|
+
`);
|
|
31
|
+
assert.equal(element.textContent?.trim(), "");
|
|
32
|
+
});
|
|
33
|
+
it("should handle negated tokens correctly", () => {
|
|
34
|
+
const element = fixtureSync(html `
|
|
35
|
+
<div
|
|
36
|
+
@joist::value=${(e) => {
|
|
37
|
+
e.update({ oldValue: null, newValue: false });
|
|
38
|
+
}}
|
|
39
|
+
>
|
|
40
|
+
<j-if bind="!test">
|
|
41
|
+
<template>Visible Content</template>
|
|
42
|
+
</j-if>
|
|
43
|
+
</div>
|
|
44
|
+
`);
|
|
45
|
+
assert.equal(element.textContent?.trim(), "Visible Content");
|
|
46
|
+
});
|
|
47
|
+
it("should render else template when condition is falsy", () => {
|
|
48
|
+
const element = fixtureSync(html `
|
|
49
|
+
<div
|
|
50
|
+
@joist::value=${(e) => {
|
|
51
|
+
e.update({ oldValue: null, newValue: false });
|
|
52
|
+
}}
|
|
53
|
+
>
|
|
54
|
+
<j-if bind="test">
|
|
55
|
+
<template>If Content</template>
|
|
56
|
+
<template else>Else Content</template>
|
|
57
|
+
</j-if>
|
|
58
|
+
</div>
|
|
59
|
+
`);
|
|
60
|
+
assert.equal(element.textContent?.trim(), "Else Content");
|
|
61
|
+
});
|
|
62
|
+
it("should switch between if and else templates", () => {
|
|
63
|
+
const element = fixtureSync(html `
|
|
64
|
+
<div
|
|
65
|
+
@joist::value=${(e) => {
|
|
66
|
+
e.update({ oldValue: null, newValue: false });
|
|
67
|
+
e.update({ oldValue: false, newValue: true });
|
|
68
|
+
}}
|
|
69
|
+
>
|
|
70
|
+
<j-if bind="test">
|
|
71
|
+
<template>If Content</template>
|
|
72
|
+
<template else>Else Content</template>
|
|
73
|
+
</j-if>
|
|
74
|
+
</div>
|
|
75
|
+
`);
|
|
76
|
+
assert.equal(element.textContent?.trim(), "If Content");
|
|
77
|
+
});
|
|
78
|
+
//# sourceMappingURL=if.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"if.element.test.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/if.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAI9B,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;IAC7D,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/C,CAAC;;;;;;GAMJ,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,iBAAiB,CAAC,CAAC;AAC/D,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,wDAAwD,EAAE,GAAG,EAAE;IAChE,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAC7C,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;IAChD,CAAC;;;;;;GAMJ,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;AAChD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;IAChD,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;IAChD,CAAC;;;;;;GAMJ,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,iBAAiB,CAAC,CAAC;AAC/D,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;IAC7D,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;IAChD,CAAC;;;;;;;GAOJ,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,cAAc,CAAC,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;IACrD,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAChD,CAAC;;;;;;;GAOJ,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { JToken } from "../token.js";
|
|
2
|
+
export declare class JAttrToken extends JToken {
|
|
3
|
+
mapTo: string;
|
|
4
|
+
mapsToProp: boolean;
|
|
5
|
+
constructor(attr: Attr);
|
|
6
|
+
}
|
|
7
|
+
export declare class JoistIfElement extends HTMLElement {
|
|
8
|
+
#private;
|
|
9
|
+
accessor target: string;
|
|
10
|
+
connectedCallback(): void;
|
|
11
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { attr } from "../../attr.js";
|
|
3
|
+
import { element } from "../../element.js";
|
|
4
|
+
import { css, html } from "../../tags.js";
|
|
5
|
+
import { JoistValueEvent } from "../events.js";
|
|
6
|
+
import { JToken } from "../token.js";
|
|
7
|
+
export class JAttrToken extends JToken {
|
|
8
|
+
mapTo;
|
|
9
|
+
mapsToProp;
|
|
10
|
+
constructor(attr) {
|
|
11
|
+
if (!attr.name.startsWith("$")) {
|
|
12
|
+
throw new Error(`Invalid attribute token: ${attr.name}, should start with $`);
|
|
13
|
+
}
|
|
14
|
+
super(attr.value);
|
|
15
|
+
this.mapsToProp = attr.name.startsWith("$.");
|
|
16
|
+
this.mapTo = attr.name.slice(this.mapsToProp ? 2 : 1);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
let JoistIfElement = (() => {
|
|
20
|
+
let _classDecorators = [element({
|
|
21
|
+
tagName: "j-props",
|
|
22
|
+
shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
|
|
23
|
+
})];
|
|
24
|
+
let _classDescriptor;
|
|
25
|
+
let _classExtraInitializers = [];
|
|
26
|
+
let _classThis;
|
|
27
|
+
let _classSuper = HTMLElement;
|
|
28
|
+
let _target_decorators;
|
|
29
|
+
let _target_initializers = [];
|
|
30
|
+
let _target_extraInitializers = [];
|
|
31
|
+
var JoistIfElement = class extends _classSuper {
|
|
32
|
+
static { _classThis = this; }
|
|
33
|
+
static {
|
|
34
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
35
|
+
_target_decorators = [attr()];
|
|
36
|
+
__esDecorate(this, null, _target_decorators, { kind: "accessor", name: "target", static: false, private: false, access: { has: obj => "target" in obj, get: obj => obj.target, set: (obj, value) => { obj.target = value; } }, metadata: _metadata }, _target_initializers, _target_extraInitializers);
|
|
37
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
38
|
+
JoistIfElement = _classThis = _classDescriptor.value;
|
|
39
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
40
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
41
|
+
}
|
|
42
|
+
#target_accessor_storage = __runInitializers(this, _target_initializers, "");
|
|
43
|
+
get target() { return this.#target_accessor_storage; }
|
|
44
|
+
set target(value) { this.#target_accessor_storage = value; }
|
|
45
|
+
connectedCallback() {
|
|
46
|
+
this.#bindProps([this]);
|
|
47
|
+
this.#bindProps(this.children);
|
|
48
|
+
}
|
|
49
|
+
#bindProps(children) {
|
|
50
|
+
for (const child of children) {
|
|
51
|
+
for (const attr of child.attributes) {
|
|
52
|
+
if (attr.name.startsWith("$")) {
|
|
53
|
+
const token = new JAttrToken(attr);
|
|
54
|
+
this.dispatchEvent(new JoistValueEvent(token, ({ newValue, oldValue }) => {
|
|
55
|
+
if (newValue === oldValue) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
let valueToWrite = newValue;
|
|
59
|
+
if (typeof newValue === "object" && newValue !== null) {
|
|
60
|
+
valueToWrite = token.readTokenValueFrom(newValue);
|
|
61
|
+
}
|
|
62
|
+
if (token.isNegated) {
|
|
63
|
+
valueToWrite = !valueToWrite;
|
|
64
|
+
}
|
|
65
|
+
if (token.mapsToProp) {
|
|
66
|
+
Reflect.set(child, token.mapTo, valueToWrite);
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
if (valueToWrite === true) {
|
|
70
|
+
child.setAttribute(token.mapTo, "");
|
|
71
|
+
}
|
|
72
|
+
else if (valueToWrite === false) {
|
|
73
|
+
child.removeAttribute(token.mapTo);
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
child.setAttribute(token.mapTo, String(valueToWrite));
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}));
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
constructor() {
|
|
85
|
+
super(...arguments);
|
|
86
|
+
__runInitializers(this, _target_extraInitializers);
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
return JoistIfElement = _classThis;
|
|
90
|
+
})();
|
|
91
|
+
export { JoistIfElement };
|
|
92
|
+
//# sourceMappingURL=props.element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"props.element.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/props.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./props.element.js";
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import "./props.element.js";
|
|
2
|
+
import { fixtureSync, html } from "@open-wc/testing";
|
|
3
|
+
import { assert } from "chai";
|
|
4
|
+
it("should pass props to child", () => {
|
|
5
|
+
const element = fixtureSync(html `
|
|
6
|
+
<div
|
|
7
|
+
@joist::value=${(e) => {
|
|
8
|
+
if (e.token.bindTo === "href") {
|
|
9
|
+
e.update({
|
|
10
|
+
oldValue: null,
|
|
11
|
+
newValue: "$foo",
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
if (e.token.bindTo === "target") {
|
|
15
|
+
e.update({
|
|
16
|
+
oldValue: null,
|
|
17
|
+
newValue: {
|
|
18
|
+
value: "_blank",
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
}}
|
|
23
|
+
>
|
|
24
|
+
<j-props>
|
|
25
|
+
<a $href="href" $target="target.value">Hello World</a>
|
|
26
|
+
</j-props>
|
|
27
|
+
</div>
|
|
28
|
+
`);
|
|
29
|
+
const anchor = element.querySelector("a");
|
|
30
|
+
assert.equal(anchor?.getAttribute("href"), "$foo");
|
|
31
|
+
assert.equal(anchor?.getAttribute("target"), "_blank");
|
|
32
|
+
});
|
|
33
|
+
it("should pass props to specified child", () => {
|
|
34
|
+
const element = fixtureSync(html `
|
|
35
|
+
<div
|
|
36
|
+
@joist::value=${(e) => {
|
|
37
|
+
e.update({
|
|
38
|
+
oldValue: null,
|
|
39
|
+
newValue: "#foo",
|
|
40
|
+
});
|
|
41
|
+
}}
|
|
42
|
+
>
|
|
43
|
+
<j-props>
|
|
44
|
+
<a>Default</a>
|
|
45
|
+
<a id="test" $href="href">Target</a>
|
|
46
|
+
</j-props>
|
|
47
|
+
</div>
|
|
48
|
+
`);
|
|
49
|
+
const anchor = element.querySelectorAll("a");
|
|
50
|
+
assert.equal(anchor[0].getAttribute("href"), null);
|
|
51
|
+
assert.equal(anchor[1].getAttribute("href"), "#foo");
|
|
52
|
+
});
|
|
53
|
+
//# sourceMappingURL=props.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"props.element.test.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/props.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAI9B,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;IACpC,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAC9B,CAAC,CAAC,MAAM,CAAC;gBACP,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE,MAAM;aACjB,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YAChC,CAAC,CAAC,MAAM,CAAC;gBACP,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE;oBACR,KAAK,EAAE,QAAQ;iBAChB;aACF,CAAC,CAAC;QACL,CAAC;IACH,CAAC;;;;;;GAMJ,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAE1C,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;IAC9C,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC;YACP,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,MAAM;SACjB,CAAC,CAAC;IACL,CAAC;;;;;;;GAOJ,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC;IACnD,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AACvD,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { JoistValueEvent } from "../events.js";
|
|
2
|
+
declare global {
|
|
3
|
+
interface HTMLElementTagNameMap {
|
|
4
|
+
"j-scope": JoistScopeElement;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
export declare class JoistScopeElement extends HTMLElement {
|
|
8
|
+
#private;
|
|
9
|
+
accessor name: string;
|
|
10
|
+
accessor value: string;
|
|
11
|
+
onJoistValueFound(e: JoistValueEvent): void;
|
|
12
|
+
attributeChangedCallback(_: string, oldValue: string, newValue: string): void;
|
|
13
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { attr } from "../../attr.js";
|
|
3
|
+
import { element } from "../../element.js";
|
|
4
|
+
import { listen } from "../../listen.js";
|
|
5
|
+
import { css, html } from "../../tags.js";
|
|
6
|
+
let JoistScopeElement = (() => {
|
|
7
|
+
let _classDecorators = [element({
|
|
8
|
+
tagName: "j-value",
|
|
9
|
+
shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
|
|
10
|
+
})];
|
|
11
|
+
let _classDescriptor;
|
|
12
|
+
let _classExtraInitializers = [];
|
|
13
|
+
let _classThis;
|
|
14
|
+
let _classSuper = HTMLElement;
|
|
15
|
+
let _instanceExtraInitializers = [];
|
|
16
|
+
let _name_decorators;
|
|
17
|
+
let _name_initializers = [];
|
|
18
|
+
let _name_extraInitializers = [];
|
|
19
|
+
let _value_decorators;
|
|
20
|
+
let _value_initializers = [];
|
|
21
|
+
let _value_extraInitializers = [];
|
|
22
|
+
let _onJoistValueFound_decorators;
|
|
23
|
+
var JoistScopeElement = class extends _classSuper {
|
|
24
|
+
static { _classThis = this; }
|
|
25
|
+
static {
|
|
26
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
27
|
+
_name_decorators = [attr()];
|
|
28
|
+
_value_decorators = [attr()];
|
|
29
|
+
_onJoistValueFound_decorators = [listen("joist::value")];
|
|
30
|
+
__esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
|
|
31
|
+
__esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
|
|
32
|
+
__esDecorate(this, null, _onJoistValueFound_decorators, { kind: "method", name: "onJoistValueFound", static: false, private: false, access: { has: obj => "onJoistValueFound" in obj, get: obj => obj.onJoistValueFound }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
33
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
34
|
+
JoistScopeElement = _classThis = _classDescriptor.value;
|
|
35
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
36
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
37
|
+
}
|
|
38
|
+
#name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ""));
|
|
39
|
+
get name() { return this.#name_accessor_storage; }
|
|
40
|
+
set name(value) { this.#name_accessor_storage = value; }
|
|
41
|
+
#value_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, ""));
|
|
42
|
+
get value() { return this.#value_accessor_storage; }
|
|
43
|
+
set value(value) { this.#value_accessor_storage = value; }
|
|
44
|
+
#binding = (__runInitializers(this, _value_extraInitializers), null);
|
|
45
|
+
onJoistValueFound(e) {
|
|
46
|
+
if (e.token.bindTo === this.name) {
|
|
47
|
+
e.stopPropagation();
|
|
48
|
+
this.#binding = e;
|
|
49
|
+
this.#binding.update({ oldValue: null, newValue: this.value });
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
attributeChangedCallback(_, oldValue, newValue) {
|
|
53
|
+
this.#binding?.update({ oldValue, newValue });
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
return JoistScopeElement = _classThis;
|
|
57
|
+
})();
|
|
58
|
+
export { JoistScopeElement };
|
|
59
|
+
//# sourceMappingURL=scope.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scope.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/scope.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;IAc7B,iBAAiB;4BAL7B,OAAO,CAAC;YACP,OAAO,EAAE,SAAS;YAElB,SAAS,EAAE,CAAC,GAAG,CAAA,2BAA2B,EAAE,IAAI,CAAA,eAAe,CAAC;SACjE,CAAC;;;;sBACqC,WAAW;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;gCAC/C,IAAI,EAAE;iCAGN,IAAI,EAAE;6CAKN,MAAM,CAAC,cAAc,CAAC;YAPvB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAGnB,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAKpB,sMAAA,iBAAiB,6DAQhB;YAlBH,6KA2BC;;;YA3BY,uDAAiB;;QAE5B,0BAFW,mDAAiB,8CAEZ,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAGnB,0HAAiB,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAEpB,QAAQ,uDAA2B,IAAI,EAAC;QAGxC,iBAAiB,CAAC,CAAkB;YAClC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBACjC,CAAC,CAAC,eAAe,EAAE,CAAC;gBAEpB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;gBAElB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;YACjE,CAAC;QACH,CAAC;QAED,wBAAwB,CACtB,CAAS,EACT,QAAgB,EAChB,QAAgB;YAEhB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChD,CAAC;;;;SA1BU,iBAAiB"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { attr } from "../../attr.js";
|
|
3
|
+
import { element } from "../../element.js";
|
|
4
|
+
import { css, html } from "../../tags.js";
|
|
5
|
+
import { JoistValueEvent } from "../events.js";
|
|
6
|
+
import { JToken } from "../token.js";
|
|
7
|
+
let JoistValueElement = (() => {
|
|
8
|
+
let _classDecorators = [element({
|
|
9
|
+
tagName: "j-value",
|
|
10
|
+
shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
|
|
11
|
+
})];
|
|
12
|
+
let _classDescriptor;
|
|
13
|
+
let _classExtraInitializers = [];
|
|
14
|
+
let _classThis;
|
|
15
|
+
let _classSuper = HTMLElement;
|
|
16
|
+
let _bind_decorators;
|
|
17
|
+
let _bind_initializers = [];
|
|
18
|
+
let _bind_extraInitializers = [];
|
|
19
|
+
var JoistValueElement = class extends _classSuper {
|
|
20
|
+
static { _classThis = this; }
|
|
21
|
+
static {
|
|
22
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
23
|
+
_bind_decorators = [attr()];
|
|
24
|
+
__esDecorate(this, null, _bind_decorators, { kind: "accessor", name: "bind", static: false, private: false, access: { has: obj => "bind" in obj, get: obj => obj.bind, set: (obj, value) => { obj.bind = value; } }, metadata: _metadata }, _bind_initializers, _bind_extraInitializers);
|
|
25
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
26
|
+
JoistValueElement = _classThis = _classDescriptor.value;
|
|
27
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
28
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
29
|
+
}
|
|
30
|
+
#bind_accessor_storage = __runInitializers(this, _bind_initializers, "");
|
|
31
|
+
get bind() { return this.#bind_accessor_storage; }
|
|
32
|
+
set bind(value) { this.#bind_accessor_storage = value; }
|
|
33
|
+
connectedCallback() {
|
|
34
|
+
const token = new JToken(this.bind);
|
|
35
|
+
this.dispatchEvent(new JoistValueEvent(token, (value) => {
|
|
36
|
+
let valueToWrite;
|
|
37
|
+
if (typeof value.newValue === "object" && value.newValue !== null) {
|
|
38
|
+
valueToWrite = String(token.readTokenValueFrom(value.newValue));
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
valueToWrite = String(value.newValue);
|
|
42
|
+
}
|
|
43
|
+
if (this.textContent !== valueToWrite) {
|
|
44
|
+
this.textContent = valueToWrite;
|
|
45
|
+
}
|
|
46
|
+
}));
|
|
47
|
+
}
|
|
48
|
+
constructor() {
|
|
49
|
+
super(...arguments);
|
|
50
|
+
__runInitializers(this, _bind_extraInitializers);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
return JoistValueElement = _classThis;
|
|
54
|
+
})();
|
|
55
|
+
export { JoistValueElement };
|
|
56
|
+
//# sourceMappingURL=value.element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"value.element.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/value.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;IAaxB,iBAAiB;4BAL7B,OAAO,CAAC;YACP,OAAO,EAAE,SAAS;YAElB,SAAS,EAAE,CAAC,GAAG,CAAA,2BAA2B,EAAE,IAAI,CAAA,eAAe,CAAC;SACjE,CAAC;;;;sBACqC,WAAW;;;;iCAAnB,SAAQ,WAAW;;;;gCAC/C,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAFrB,6KAuBC;;;YAvBY,uDAAiB;;QAE5B,qEAAgB,EAAE,EAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAEnB,iBAAiB;YACf,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEpC,IAAI,CAAC,aAAa,CAChB,IAAI,eAAe,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;gBACnC,IAAI,YAAoB,CAAC;gBAEzB,IAAI,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;oBAClE,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAClE,CAAC;qBAAM,CAAC;oBACN,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACxC,CAAC;gBAED,IAAI,IAAI,CAAC,WAAW,KAAK,YAAY,EAAE,CAAC;oBACtC,IAAI,CAAC,WAAW,GAAG,YAAY,CAAC;gBAClC,CAAC;YACH,CAAC,CAAC,CACH,CAAC;QACJ,CAAC;;;;;;;;SAtBU,iBAAiB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./value.element.js";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import "./value.element.js";
|
|
2
|
+
import { fixtureSync, html } from "@open-wc/testing";
|
|
3
|
+
import { assert } from "chai";
|
|
4
|
+
it("should render content when the bind value is truthy", () => {
|
|
5
|
+
const element = fixtureSync(html `
|
|
6
|
+
<div
|
|
7
|
+
@joist::value=${(e) => {
|
|
8
|
+
e.update({ oldValue: null, newValue: "Hello World" });
|
|
9
|
+
}}
|
|
10
|
+
>
|
|
11
|
+
<j-value bind="test"></j-value>
|
|
12
|
+
</div>
|
|
13
|
+
`);
|
|
14
|
+
assert.equal(element.textContent?.trim(), "Hello World");
|
|
15
|
+
});
|
|
16
|
+
//# sourceMappingURL=value.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"value.element.test.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/value.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAI9B,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;IAC7D,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC;IACxD,CAAC;;;;GAIJ,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,aAAa,CAAC,CAAC;AAC3D,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Change } from "@joist/observable";
|
|
2
|
+
import type { JToken } from "./token.js";
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementEventMap {
|
|
5
|
+
"joist::value": JoistValueEvent;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
export declare class JoistValueEvent extends Event {
|
|
9
|
+
readonly token: JToken;
|
|
10
|
+
readonly update: (value: Change<unknown>) => void;
|
|
11
|
+
constructor(bindTo: JToken, update: (value: Change<unknown>) => void);
|
|
12
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/lib/templating/events.ts"],"names":[],"mappings":"AAUA,MAAM,OAAO,eAAgB,SAAQ,KAAK;IAC/B,KAAK,CAAS;IACd,MAAM,CAAmC;IAElD,YAAY,MAAc,EAAE,MAAwC;QAClE,KAAK,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAEzD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;CACF"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export class JToken {
|
|
2
|
+
rawToken;
|
|
3
|
+
isNegated = false;
|
|
4
|
+
bindTo;
|
|
5
|
+
path = [];
|
|
6
|
+
constructor(rawToken) {
|
|
7
|
+
this.rawToken = rawToken;
|
|
8
|
+
this.isNegated = this.rawToken.startsWith("!");
|
|
9
|
+
this.path = this.rawToken.split(".");
|
|
10
|
+
this.bindTo = this.path.shift() ?? "";
|
|
11
|
+
this.bindTo = this.bindTo.replaceAll("!", "");
|
|
12
|
+
}
|
|
13
|
+
readTokenValueFrom(obj) {
|
|
14
|
+
let pointer = obj;
|
|
15
|
+
if (!this.path.length) {
|
|
16
|
+
return pointer;
|
|
17
|
+
}
|
|
18
|
+
for (const part of this.path) {
|
|
19
|
+
pointer = pointer[part];
|
|
20
|
+
if (pointer === undefined) {
|
|
21
|
+
break;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return pointer;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=token.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"token.js","sourceRoot":"","sources":["../../../src/lib/templating/token.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,MAAM;IACjB,QAAQ,CAAS;IACjB,SAAS,GAAG,KAAK,CAAC;IAClB,MAAM,CAAS;IACf,IAAI,GAAa,EAAE,CAAC;IAEpB,YAAY,QAAgB;QAC1B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAEzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QAE/C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACrC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC;QACtC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,kBAAkB,CAAc,GAAW;QACzC,IAAI,OAAO,GAAQ,GAAG,CAAC;QAEvB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACtB,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC7B,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;YAExB,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gBAC1B,MAAM;YACR,CAAC;QACH,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|