@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.
Files changed (82) hide show
  1. package/package.json +5 -2
  2. package/src/lib/attr.test.ts +17 -36
  3. package/src/lib/element.test.ts +25 -33
  4. package/src/lib/element.ts +18 -11
  5. package/src/lib/listen.test.ts +0 -75
  6. package/src/lib/templating/README.md +406 -0
  7. package/src/lib/templating/bind.ts +40 -0
  8. package/src/lib/templating/define.ts +5 -0
  9. package/src/lib/templating/elements/async.element.test.ts +90 -0
  10. package/src/lib/templating/elements/async.element.ts +122 -0
  11. package/src/lib/templating/elements/for.element.test.ts +221 -0
  12. package/src/lib/templating/elements/for.element.ts +189 -0
  13. package/src/lib/templating/elements/if.element.test.ts +90 -0
  14. package/src/lib/templating/elements/if.element.ts +93 -0
  15. package/src/lib/templating/elements/props.element.test.ts +62 -0
  16. package/src/lib/templating/elements/props.element.ts +80 -0
  17. package/src/lib/templating/elements/scope.ts +45 -0
  18. package/src/lib/templating/elements/value.element.test.ts +20 -0
  19. package/src/lib/templating/elements/value.element.ts +41 -0
  20. package/src/lib/templating/events.ts +21 -0
  21. package/src/lib/templating/token.test.ts +74 -0
  22. package/src/lib/templating/token.ts +34 -0
  23. package/src/lib/templating.ts +2 -0
  24. package/target/lib/attr.test.js +19 -42
  25. package/target/lib/attr.test.js.map +1 -1
  26. package/target/lib/element.js +8 -8
  27. package/target/lib/element.js.map +1 -1
  28. package/target/lib/element.test.js +0 -68
  29. package/target/lib/element.test.js.map +1 -1
  30. package/target/lib/listen.test.js +0 -97
  31. package/target/lib/listen.test.js.map +1 -1
  32. package/target/lib/templating/bind.d.ts +1 -0
  33. package/target/lib/templating/bind.js +30 -0
  34. package/target/lib/templating/bind.js.map +1 -0
  35. package/target/lib/templating/define.d.ts +5 -0
  36. package/target/lib/templating/define.js +6 -0
  37. package/target/lib/templating/define.js.map +1 -0
  38. package/target/lib/templating/elements/async.element.d.ts +17 -0
  39. package/target/lib/templating/elements/async.element.js +115 -0
  40. package/target/lib/templating/elements/async.element.js.map +1 -0
  41. package/target/lib/templating/elements/async.element.test.d.ts +1 -0
  42. package/target/lib/templating/elements/async.element.test.js +75 -0
  43. package/target/lib/templating/elements/async.element.test.js.map +1 -0
  44. package/target/lib/templating/elements/for.element.d.ts +24 -0
  45. package/target/lib/templating/elements/for.element.js +186 -0
  46. package/target/lib/templating/elements/for.element.js.map +1 -0
  47. package/target/lib/templating/elements/for.element.test.d.ts +2 -0
  48. package/target/lib/templating/elements/for.element.test.js +153 -0
  49. package/target/lib/templating/elements/for.element.test.js.map +1 -0
  50. package/target/lib/templating/elements/if.element.d.ts +12 -0
  51. package/target/lib/templating/elements/if.element.js +85 -0
  52. package/target/lib/templating/elements/if.element.js.map +1 -0
  53. package/target/lib/templating/elements/if.element.test.d.ts +1 -0
  54. package/target/lib/templating/elements/if.element.test.js +78 -0
  55. package/target/lib/templating/elements/if.element.test.js.map +1 -0
  56. package/target/lib/templating/elements/props.element.d.ts +11 -0
  57. package/target/lib/templating/elements/props.element.js +92 -0
  58. package/target/lib/templating/elements/props.element.js.map +1 -0
  59. package/target/lib/templating/elements/props.element.test.d.ts +1 -0
  60. package/target/lib/templating/elements/props.element.test.js +53 -0
  61. package/target/lib/templating/elements/props.element.test.js.map +1 -0
  62. package/target/lib/templating/elements/scope.d.ts +13 -0
  63. package/target/lib/templating/elements/scope.js +59 -0
  64. package/target/lib/templating/elements/scope.js.map +1 -0
  65. package/target/lib/templating/elements/value.element.d.ts +9 -0
  66. package/target/lib/templating/elements/value.element.js +56 -0
  67. package/target/lib/templating/elements/value.element.js.map +1 -0
  68. package/target/lib/templating/elements/value.element.test.d.ts +1 -0
  69. package/target/lib/templating/elements/value.element.test.js +16 -0
  70. package/target/lib/templating/elements/value.element.test.js.map +1 -0
  71. package/target/lib/templating/events.d.ts +12 -0
  72. package/target/lib/templating/events.js +10 -0
  73. package/target/lib/templating/events.js.map +1 -0
  74. package/target/lib/templating/token.d.ts +8 -0
  75. package/target/lib/templating/token.js +27 -0
  76. package/target/lib/templating/token.js.map +1 -0
  77. package/target/lib/templating/token.test.d.ts +1 -0
  78. package/target/lib/templating/token.test.js +56 -0
  79. package/target/lib/templating/token.test.js.map +1 -0
  80. package/target/lib/templating.d.ts +2 -0
  81. package/target/lib/templating.js +3 -0
  82. package/target/lib/templating.js.map +1 -0
@@ -0,0 +1,115 @@
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 { bind } from "../bind.js";
7
+ import { JoistValueEvent } from "../events.js";
8
+ import { JToken } from "../token.js";
9
+ let JoistAsyncElement = (() => {
10
+ let _classDecorators = [element({
11
+ tagName: "j-async",
12
+ shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
13
+ })];
14
+ let _classDescriptor;
15
+ let _classExtraInitializers = [];
16
+ let _classThis;
17
+ let _classSuper = HTMLElement;
18
+ let _bind_decorators;
19
+ let _bind_initializers = [];
20
+ let _bind_extraInitializers = [];
21
+ let _state_decorators;
22
+ let _state_initializers = [];
23
+ let _state_extraInitializers = [];
24
+ var JoistAsyncElement = class extends _classSuper {
25
+ static { _classThis = this; }
26
+ static {
27
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
28
+ _bind_decorators = [attr()];
29
+ _state_decorators = [bind()];
30
+ __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);
31
+ __esDecorate(this, null, _state_decorators, { kind: "accessor", name: "state", static: false, private: false, access: { has: obj => "state" in obj, get: obj => obj.state, set: (obj, value) => { obj.state = value; } }, metadata: _metadata }, _state_initializers, _state_extraInitializers);
32
+ __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
33
+ JoistAsyncElement = _classThis = _classDescriptor.value;
34
+ if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
35
+ __runInitializers(_classThis, _classExtraInitializers);
36
+ }
37
+ #bind_accessor_storage = __runInitializers(this, _bind_initializers, "");
38
+ get bind() { return this.#bind_accessor_storage; }
39
+ set bind(value) { this.#bind_accessor_storage = value; }
40
+ #state_accessor_storage = (__runInitializers(this, _bind_extraInitializers), __runInitializers(this, _state_initializers, null));
41
+ get state() { return this.#state_accessor_storage; }
42
+ set state(value) { this.#state_accessor_storage = value; }
43
+ #templates = (__runInitializers(this, _state_extraInitializers), queryAll("template", this));
44
+ #currentNodes = [];
45
+ #cachedTemplates = {
46
+ loading: undefined,
47
+ error: undefined,
48
+ success: undefined,
49
+ };
50
+ connectedCallback() {
51
+ this.#clean();
52
+ const templates = Array.from(this.#templates());
53
+ this.#cachedTemplates = {
54
+ loading: templates.find((t) => t.hasAttribute("loading")),
55
+ error: templates.find((t) => t.hasAttribute("error")),
56
+ success: templates.find((t) => t.hasAttribute("success")),
57
+ };
58
+ const token = new JToken(this.bind);
59
+ this.dispatchEvent(new JoistValueEvent(token, ({ newValue, oldValue }) => {
60
+ if (newValue !== oldValue) {
61
+ if (newValue instanceof Promise) {
62
+ this.#handlePromise(newValue);
63
+ }
64
+ else {
65
+ console.warn("j-async bind value must be a Promise or AsyncState");
66
+ }
67
+ }
68
+ }));
69
+ }
70
+ async #handlePromise(promise) {
71
+ try {
72
+ this.#handleState({ status: "loading" });
73
+ const data = await promise;
74
+ this.#handleState({ status: "success", data });
75
+ }
76
+ catch (error) {
77
+ this.#handleState({ status: "error", error });
78
+ }
79
+ }
80
+ #handleState(state) {
81
+ this.#clean();
82
+ let template = undefined;
83
+ this.state = state;
84
+ switch (state.status) {
85
+ case "loading":
86
+ template = this.#cachedTemplates.loading;
87
+ break;
88
+ case "error":
89
+ template = this.#cachedTemplates.error;
90
+ break;
91
+ case "success":
92
+ template = this.#cachedTemplates.success;
93
+ break;
94
+ }
95
+ if (template) {
96
+ const content = document.importNode(template.content, true);
97
+ const nodes = Array.from(content.childNodes);
98
+ this.appendChild(content);
99
+ this.#currentNodes = nodes;
100
+ }
101
+ }
102
+ #clean() {
103
+ for (const node of this.#currentNodes) {
104
+ node.parentNode?.removeChild(node);
105
+ }
106
+ this.#currentNodes = [];
107
+ }
108
+ disconnectedCallback() {
109
+ this.#clean();
110
+ }
111
+ };
112
+ return JoistAsyncElement = _classThis;
113
+ })();
114
+ export { JoistAsyncElement };
115
+ //# sourceMappingURL=async.element.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"async.element.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/async.element.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1 @@
1
+ import "./async.element.js";
@@ -0,0 +1,75 @@
1
+ import "./async.element.js";
2
+ import { fixtureSync, html } from "@open-wc/testing";
3
+ import { assert } from "chai";
4
+ it("should show loading template when promise is pending", async () => {
5
+ const element = fixtureSync(html `
6
+ <div
7
+ @joist::value=${(e) => {
8
+ e.update({ oldValue: null, newValue: new Promise(() => { }) });
9
+ }}
10
+ >
11
+ <j-async bind="test">
12
+ <template loading>Loading...</template>
13
+ <template success>Success!</template>
14
+ <template error>Error!</template>
15
+ </j-async>
16
+ </div>
17
+ `);
18
+ assert.equal(element.textContent?.trim(), "Loading...");
19
+ });
20
+ it("should show success template when promise resolves", async () => {
21
+ const element = fixtureSync(html `
22
+ <div
23
+ @joist::value=${(e) => {
24
+ e.update({ oldValue: null, newValue: Promise.resolve("data") });
25
+ }}
26
+ >
27
+ <j-async bind="test">
28
+ <template loading>Loading...</template>
29
+ <template success>Success!</template>
30
+ <template error>Error!</template>
31
+ </j-async>
32
+ </div>
33
+ `);
34
+ await new Promise((resolve) => setTimeout(resolve, 0));
35
+ assert.equal(element.textContent?.trim(), "Success!");
36
+ });
37
+ it("should show error template when promise rejects", async () => {
38
+ const element = fixtureSync(html `
39
+ <div
40
+ @joist::value=${(e) => {
41
+ e.update({ oldValue: null, newValue: Promise.reject("error") });
42
+ }}
43
+ >
44
+ <j-async bind="test">
45
+ <template loading>Loading...</template>
46
+ <template success>Success!</template>
47
+ <template error>Error!</template>
48
+ </j-async>
49
+ </div>
50
+ `);
51
+ await new Promise((resolve) => setTimeout(resolve, 0));
52
+ assert.equal(element.textContent?.trim(), "Error!");
53
+ });
54
+ it("should handle state transitions", async () => {
55
+ const element = fixtureSync(html `
56
+ <div
57
+ @joist::value=${(e) => {
58
+ const promise = new Promise((resolve) => {
59
+ setTimeout(() => resolve("data"), 100);
60
+ });
61
+ e.update({ oldValue: null, newValue: promise });
62
+ }}
63
+ >
64
+ <j-async bind="test">
65
+ <template loading>Loading...</template>
66
+ <template success>Success!</template>
67
+ <template error>Error!</template>
68
+ </j-async>
69
+ </div>
70
+ `);
71
+ assert.equal(element.textContent?.trim(), "Loading...");
72
+ await new Promise((resolve) => setTimeout(resolve, 150));
73
+ assert.equal(element.textContent?.trim(), "Success!");
74
+ });
75
+ //# sourceMappingURL=async.element.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"async.element.test.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/async.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,sDAAsD,EAAE,KAAK,IAAI,EAAE;IACpE,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,OAAO,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAChE,CAAC;;;;;;;;GAQJ,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;IAClE,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAClE,CAAC;;;;;;;;GAQJ,CAAC,CAAC;IAGH,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,UAAU,CAAC,CAAC;AACxD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;IAC/D,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAClE,CAAC;;;;;;;;GAQJ,CAAC,CAAC;IAGH,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,QAAQ,CAAC,CAAC;AACtD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;IAC/C,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACtC,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;IAClD,CAAC;;;;;;;;GAQJ,CAAC,CAAC;IAGH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,YAAY,CAAC,CAAC;IAGxD,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IACzD,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,UAAU,CAAC,CAAC;AACxD,CAAC,CAAC,CAAC"}
@@ -0,0 +1,24 @@
1
+ declare global {
2
+ interface HTMLElementTagNameMap {
3
+ "j-for": JositForElement;
4
+ "j-for-scope": JForScope;
5
+ }
6
+ }
7
+ export interface EachCtx<T> {
8
+ value: T | null;
9
+ index: number | null;
10
+ position: number | null;
11
+ }
12
+ export declare class JForScope<T = unknown> extends HTMLElement {
13
+ accessor each: EachCtx<T>;
14
+ accessor key: string;
15
+ }
16
+ export declare class JositForElement extends HTMLElement {
17
+ #private;
18
+ accessor bind: string;
19
+ accessor key: string;
20
+ connectedCallback(): void;
21
+ createFromEmpty(): void;
22
+ updateItems(): void;
23
+ disconnectedCallback(): void;
24
+ }
@@ -0,0 +1,186 @@
1
+ import { __esDecorate, __runInitializers } from "tslib";
2
+ import { attr } from "../../attr.js";
3
+ import { element } from "../../element.js";
4
+ import { query } from "../../query.js";
5
+ import { css, html } from "../../tags.js";
6
+ import { bind } from "../bind.js";
7
+ import { JoistValueEvent } from "../events.js";
8
+ import { JToken } from "../token.js";
9
+ let JForScope = (() => {
10
+ let _classDecorators = [element({
11
+ tagName: "j-for-scope",
12
+ shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
13
+ })];
14
+ let _classDescriptor;
15
+ let _classExtraInitializers = [];
16
+ let _classThis;
17
+ let _classSuper = HTMLElement;
18
+ let _each_decorators;
19
+ let _each_initializers = [];
20
+ let _each_extraInitializers = [];
21
+ let _key_decorators;
22
+ let _key_initializers = [];
23
+ let _key_extraInitializers = [];
24
+ var JForScope = class extends _classSuper {
25
+ static { _classThis = this; }
26
+ static {
27
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
28
+ _each_decorators = [bind()];
29
+ _key_decorators = [attr()];
30
+ __esDecorate(this, null, _each_decorators, { kind: "accessor", name: "each", static: false, private: false, access: { has: obj => "each" in obj, get: obj => obj.each, set: (obj, value) => { obj.each = value; } }, metadata: _metadata }, _each_initializers, _each_extraInitializers);
31
+ __esDecorate(this, null, _key_decorators, { kind: "accessor", name: "key", static: false, private: false, access: { has: obj => "key" in obj, get: obj => obj.key, set: (obj, value) => { obj.key = value; } }, metadata: _metadata }, _key_initializers, _key_extraInitializers);
32
+ __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
33
+ JForScope = _classThis = _classDescriptor.value;
34
+ if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
35
+ __runInitializers(_classThis, _classExtraInitializers);
36
+ }
37
+ #each_accessor_storage = __runInitializers(this, _each_initializers, {
38
+ value: null,
39
+ index: null,
40
+ position: null,
41
+ });
42
+ get each() { return this.#each_accessor_storage; }
43
+ set each(value) { this.#each_accessor_storage = value; }
44
+ #key_accessor_storage = (__runInitializers(this, _each_extraInitializers), __runInitializers(this, _key_initializers, ""));
45
+ get key() { return this.#key_accessor_storage; }
46
+ set key(value) { this.#key_accessor_storage = value; }
47
+ constructor() {
48
+ super(...arguments);
49
+ __runInitializers(this, _key_extraInitializers);
50
+ }
51
+ };
52
+ return JForScope = _classThis;
53
+ })();
54
+ export { JForScope };
55
+ let JositForElement = (() => {
56
+ let _classDecorators = [element({
57
+ tagName: "j-for",
58
+ shadowDom: [css `:host{display:contents;}`, html `<slot></slot>`],
59
+ })];
60
+ let _classDescriptor;
61
+ let _classExtraInitializers = [];
62
+ let _classThis;
63
+ let _classSuper = HTMLElement;
64
+ let _bind_decorators;
65
+ let _bind_initializers = [];
66
+ let _bind_extraInitializers = [];
67
+ let _key_decorators;
68
+ let _key_initializers = [];
69
+ let _key_extraInitializers = [];
70
+ var JositForElement = class extends _classSuper {
71
+ static { _classThis = this; }
72
+ static {
73
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
74
+ _bind_decorators = [attr()];
75
+ _key_decorators = [attr()];
76
+ __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);
77
+ __esDecorate(this, null, _key_decorators, { kind: "accessor", name: "key", static: false, private: false, access: { has: obj => "key" in obj, get: obj => obj.key, set: (obj, value) => { obj.key = value; } }, metadata: _metadata }, _key_initializers, _key_extraInitializers);
78
+ __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
79
+ JositForElement = _classThis = _classDescriptor.value;
80
+ if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
81
+ __runInitializers(_classThis, _classExtraInitializers);
82
+ }
83
+ #bind_accessor_storage = __runInitializers(this, _bind_initializers, "");
84
+ get bind() { return this.#bind_accessor_storage; }
85
+ set bind(value) { this.#bind_accessor_storage = value; }
86
+ #key_accessor_storage = (__runInitializers(this, _bind_extraInitializers), __runInitializers(this, _key_initializers, ""));
87
+ get key() { return this.#key_accessor_storage; }
88
+ set key(value) { this.#key_accessor_storage = value; }
89
+ #template = (__runInitializers(this, _key_extraInitializers), query("template", this));
90
+ #items = [];
91
+ #scopes = new Map();
92
+ connectedCallback() {
93
+ const template = this.#template();
94
+ if (this.firstElementChild !== template) {
95
+ throw new Error("The first Node in j-for needs to be a template");
96
+ }
97
+ let currentScope = template.nextElementSibling;
98
+ while (currentScope instanceof JForScope) {
99
+ this.#scopes.set(currentScope.key, currentScope);
100
+ currentScope = currentScope.nextElementSibling;
101
+ }
102
+ const token = new JToken(this.bind);
103
+ this.dispatchEvent(new JoistValueEvent(token, ({ newValue, oldValue }) => {
104
+ if (newValue !== oldValue) {
105
+ if (isIterable(newValue)) {
106
+ this.#items = newValue;
107
+ }
108
+ else {
109
+ this.#items = [];
110
+ }
111
+ if (template.nextSibling === null) {
112
+ this.createFromEmpty();
113
+ }
114
+ else {
115
+ this.updateItems();
116
+ }
117
+ }
118
+ }));
119
+ }
120
+ createFromEmpty() {
121
+ const template = this.#template();
122
+ const fragment = document.createDocumentFragment();
123
+ let index = 0;
124
+ for (const value of this.#items) {
125
+ const key = hasProperty(value, this.key) ? value[this.key] : index;
126
+ const scope = new JForScope();
127
+ scope.append(document.importNode(template.content, true));
128
+ scope.key = String(key);
129
+ scope.each = { position: index + 1, index, value };
130
+ fragment.appendChild(scope);
131
+ this.#scopes.set(key, scope);
132
+ index++;
133
+ }
134
+ this.append(fragment);
135
+ }
136
+ updateItems() {
137
+ const template = this.#template();
138
+ const leftoverScopes = new Map(this.#scopes);
139
+ let index = 0;
140
+ for (const value of this.#items) {
141
+ const key = hasProperty(value, this.key) ? value[this.key] : index;
142
+ let scope = leftoverScopes.get(key);
143
+ if (!scope) {
144
+ scope = new JForScope();
145
+ scope.append(document.importNode(template.content, true));
146
+ this.#scopes.set(key, scope);
147
+ }
148
+ else {
149
+ leftoverScopes.delete(key);
150
+ }
151
+ scope.key = String(key);
152
+ scope.each = { position: index + 1, index, value };
153
+ const child = this.children[index + 1];
154
+ index++;
155
+ if (child === scope) {
156
+ continue;
157
+ }
158
+ if (child && (!scope.isConnected || child !== scope)) {
159
+ child.before(scope);
160
+ }
161
+ else {
162
+ this.append(scope);
163
+ }
164
+ }
165
+ for (const scope of leftoverScopes.values()) {
166
+ scope.remove();
167
+ }
168
+ }
169
+ disconnectedCallback() {
170
+ for (const scope of this.#scopes.values()) {
171
+ scope.remove();
172
+ }
173
+ this.#scopes.clear();
174
+ this.#items = [];
175
+ }
176
+ };
177
+ return JositForElement = _classThis;
178
+ })();
179
+ export { JositForElement };
180
+ function isIterable(obj) {
181
+ return obj != null && typeof obj[Symbol.iterator] === "function";
182
+ }
183
+ function hasProperty(item, key) {
184
+ return Object.prototype.hasOwnProperty.call(item, key);
185
+ }
186
+ //# sourceMappingURL=for.element.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"for.element.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/for.element.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import "./for.element.js";
2
+ import "./value.element.js";
@@ -0,0 +1,153 @@
1
+ import "./for.element.js";
2
+ import "./value.element.js";
3
+ import { fixtureSync, html } from "@open-wc/testing";
4
+ import { assert } from "chai";
5
+ it("should iterate over an iterable", () => {
6
+ const element = fixtureSync(html `
7
+ <div
8
+ @joist::value=${(e) => {
9
+ e.update({
10
+ oldValue: null,
11
+ newValue: new Set([
12
+ { id: "123", label: "Hello" },
13
+ { id: "456", label: "World" },
14
+ ]),
15
+ });
16
+ }}
17
+ >
18
+ <ul>
19
+ <j-for bind="items" key="id">
20
+ <template>
21
+ <li>
22
+ <j-value bind="each.value.label"></j-value>
23
+ </li>
24
+ </template>
25
+ </j-for>
26
+ </ul>
27
+ </div>
28
+ `);
29
+ const listItems = element.querySelectorAll("li");
30
+ assert.equal(listItems.length, 2);
31
+ assert.equal(listItems[0].textContent?.trim(), "Hello");
32
+ assert.equal(listItems[1].textContent?.trim(), "World");
33
+ });
34
+ it("should handle empty arrays", () => {
35
+ const element = fixtureSync(html `
36
+ <div
37
+ @joist::value=${(e) => {
38
+ e.update({
39
+ oldValue: null,
40
+ newValue: [],
41
+ });
42
+ }}
43
+ >
44
+ <j-for bind="items">
45
+ <template>
46
+ <div>Item</div>
47
+ </template>
48
+ </j-for>
49
+ </div>
50
+ `);
51
+ assert.equal(element.querySelectorAll("div").length, 0);
52
+ });
53
+ it("should update when items are added or removed", () => {
54
+ const element = fixtureSync(html `
55
+ <div
56
+ @joist::value=${(e) => {
57
+ e.update({
58
+ oldValue: null,
59
+ newValue: [
60
+ { id: "1", text: "First" },
61
+ { id: "2", text: "Second" },
62
+ ],
63
+ });
64
+ e.update({
65
+ oldValue: null,
66
+ newValue: [
67
+ { id: "1", text: "First" },
68
+ { id: "2", text: "Second" },
69
+ { id: "3", text: "Third" },
70
+ ],
71
+ });
72
+ e.update({
73
+ oldValue: null,
74
+ newValue: [
75
+ { id: "1", text: "First" },
76
+ { id: "3", text: "Third" },
77
+ ],
78
+ });
79
+ }}
80
+ >
81
+ <j-for bind="items" key="id">
82
+ <template>
83
+ <j-value bind="each.value.text"></j-value>
84
+ </template>
85
+ </j-for>
86
+ </div>
87
+ `);
88
+ const items = element.querySelectorAll("j-value");
89
+ assert.equal(items.length, 2);
90
+ assert.equal(items[0].textContent?.trim(), "First");
91
+ assert.equal(items[1].textContent?.trim(), "Third");
92
+ });
93
+ it("should provide index and position information", () => {
94
+ const element = fixtureSync(html `
95
+ <div
96
+ @joist::value=${(e) => {
97
+ e.update({
98
+ oldValue: null,
99
+ newValue: ["A", "B", "C"],
100
+ });
101
+ }}
102
+ >
103
+ <j-for bind="items">
104
+ <template>
105
+ <j-value bind="each.value"></j-value>
106
+ (index: <j-value bind="each.index"></j-value>,
107
+ position: <j-value bind="each.position"></j-value>)
108
+ </template>
109
+ </j-for>
110
+ </div>
111
+ `);
112
+ const items = element.querySelectorAll("j-for-scope");
113
+ assert.equal(items.length, 3);
114
+ assert.equal(items[0].textContent?.trim().replaceAll("\n", "").replaceAll(" ", ""), "A(index:0,position:1)");
115
+ assert.equal(items[1].textContent?.trim().replaceAll("\n", "").replaceAll(" ", ""), "B(index:1,position:2)");
116
+ assert.equal(items[2].textContent?.trim().replaceAll("\n", "").replaceAll(" ", ""), "C(index:2,position:3)");
117
+ });
118
+ it("should maintain DOM order when items are reordered", () => {
119
+ const element = fixtureSync(html `
120
+ <div
121
+ @joist::value=${(e) => {
122
+ e.update({
123
+ oldValue: null,
124
+ newValue: [
125
+ { id: "1", text: "First" },
126
+ { id: "2", text: "Second" },
127
+ { id: "3", text: "Third" },
128
+ ],
129
+ });
130
+ e.update({
131
+ oldValue: null,
132
+ newValue: [
133
+ { id: "3", text: "Third" },
134
+ { id: "1", text: "First" },
135
+ { id: "2", text: "Second" },
136
+ ],
137
+ });
138
+ }}
139
+ >
140
+ <j-for bind="items" key="id">
141
+ <template>
142
+ <j-value bind="each.value.text"></j-value>
143
+ </template>
144
+ </j-for>
145
+ </div>
146
+ `);
147
+ const items = element.querySelectorAll("j-value");
148
+ assert.equal(items.length, 3);
149
+ assert.equal(items[0].textContent?.trim(), "Third");
150
+ assert.equal(items[1].textContent?.trim(), "First");
151
+ assert.equal(items[2].textContent?.trim(), "Second");
152
+ });
153
+ //# sourceMappingURL=for.element.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"for.element.test.js","sourceRoot":"","sources":["../../../../src/lib/templating/elements/for.element.test.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,12 @@
1
+ declare global {
2
+ interface HTMLElementTagNameMap {
3
+ "j-if": JoistIfElement;
4
+ }
5
+ }
6
+ export declare class JoistIfElement extends HTMLElement {
7
+ #private;
8
+ accessor bind: string;
9
+ connectedCallback(): void;
10
+ apply(value: unknown, isNegative: boolean): void;
11
+ disconnectedCallback(): void;
12
+ }