@joist/templating 4.2.4-next.1 → 4.2.4-next.2

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 (18) hide show
  1. package/package.json +1 -1
  2. package/src/lib/bind.ts +28 -8
  3. package/src/lib/elements/async.element.test.ts +90 -0
  4. package/src/lib/elements/async.element.ts +11 -0
  5. package/src/lib/elements/bind.element.ts +9 -4
  6. package/src/lib/events.ts +6 -2
  7. package/target/lib/bind.d.ts +5 -1
  8. package/target/lib/bind.js +18 -6
  9. package/target/lib/bind.js.map +1 -1
  10. package/target/lib/elements/async.element.js +9 -0
  11. package/target/lib/elements/async.element.js.map +1 -1
  12. package/target/lib/elements/async.element.test.js +76 -0
  13. package/target/lib/elements/async.element.test.js.map +1 -1
  14. package/target/lib/elements/bind.element.d.ts +6 -1
  15. package/target/lib/elements/bind.element.js +7 -7
  16. package/target/lib/elements/bind.element.js.map +1 -1
  17. package/target/lib/events.d.ts +5 -2
  18. package/target/lib/events.js.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@joist/templating",
3
- "version": "4.2.4-next.1",
3
+ "version": "4.2.4-next.2",
4
4
  "type": "module",
5
5
  "main": "./target/lib.js",
6
6
  "module": "./target/lib.js",
package/src/lib/bind.ts CHANGED
@@ -1,11 +1,19 @@
1
- import { instanceMetadataStore, observe } from "@joist/observable";
1
+ import { instanceMetadataStore, observe, ObserveOpts } from "@joist/observable";
2
+
3
+ export interface BindOpts<This, Value> extends ObserveOpts<This, Value> {
4
+ /**
5
+ * Trigger bindings on every change cycle, regardless of value,
6
+ * newValue and oldValue will be the same in that case
7
+ **/
8
+ alwaysUpdate?: boolean;
9
+ }
2
10
 
3
- export function bind<This extends HTMLElement, Value>(mapper?: (instance: This) => Value) {
11
+ export function bind<This extends HTMLElement, Value>(opts: BindOpts<This, Value> = {}) {
4
12
  return function bindDecorator(
5
13
  base: ClassAccessorDecoratorTarget<This, Value>,
6
14
  ctx: ClassAccessorDecoratorContext<This, Value>,
7
15
  ): ClassAccessorDecoratorResult<This, Value> {
8
- const internalObserve = observe(mapper)(base, ctx);
16
+ const internalObserve = observe(opts)(base, ctx);
9
17
 
10
18
  return {
11
19
  init(value) {
@@ -15,14 +23,26 @@ export function bind<This extends HTMLElement, Value>(mapper?: (instance: This)
15
23
 
16
24
  e.stopPropagation();
17
25
 
18
- e.update({ oldValue: null, newValue: ctx.access.get(this) });
26
+ e.update({
27
+ oldValue: null,
28
+ newValue: ctx.access.get(this),
29
+ alwaysUpdate: opts.alwaysUpdate,
30
+ });
19
31
 
20
32
  instanceMeta.bindings.add((changes) => {
21
33
  const key = ctx.name as keyof This;
22
- const res = changes.get(key);
23
-
24
- if (res) {
25
- e.update(res);
34
+ const change = changes.get(key);
35
+
36
+ if (change) {
37
+ e.update({ ...change, alwaysUpdate: opts.alwaysUpdate });
38
+ } else if (opts.alwaysUpdate) {
39
+ const value = ctx.access.get(this);
40
+
41
+ e.update({
42
+ oldValue: value,
43
+ newValue: value,
44
+ alwaysUpdate: opts.alwaysUpdate,
45
+ });
26
46
  }
27
47
  });
28
48
  }
package/src/lib/elements/async.element.test.ts CHANGED
@@ -88,3 +88,93 @@ it("should handle state transitions", async () => {
88
88
  await new Promise((resolve) => setTimeout(resolve, 150));
89
89
  assert.equal(element.textContent?.trim(), "Success!");
90
90
  });
91
+
92
+ it("should show loading template when AsyncState is loading", () => {
93
+ const element = fixtureSync(html`
94
+ <div
95
+ @joist::value=${(e: JoistValueEvent) => {
96
+ e.update({ oldValue: null, newValue: { status: "loading" } });
97
+ }}
98
+ >
99
+ <j-async bind="test">
100
+ <template loading>Loading...</template>
101
+ <template success>Success!</template>
102
+ <template error>Error!</template>
103
+ </j-async>
104
+ </div>
105
+ `);
106
+
107
+ assert.equal(element.textContent?.trim(), "Loading...");
108
+ });
109
+
110
+ it("should show success template when AsyncState is success", () => {
111
+ const element = fixtureSync(html`
112
+ <div
113
+ @joist::value=${(e: JoistValueEvent) => {
114
+ e.update({ oldValue: null, newValue: { status: "success", data: "test data" } });
115
+ }}
116
+ >
117
+ <j-async bind="test">
118
+ <template loading>Loading...</template>
119
+ <template success>Success!</template>
120
+ <template error>Error!</template>
121
+ </j-async>
122
+ </div>
123
+ `);
124
+
125
+ assert.equal(element.textContent?.trim(), "Success!");
126
+ });
127
+
128
+ it("should show error template when AsyncState is error", () => {
129
+ const element = fixtureSync(html`
130
+ <div
131
+ @joist::value=${(e: JoistValueEvent) => {
132
+ e.update({ oldValue: null, newValue: { status: "error", error: "test error" } });
133
+ }}
134
+ >
135
+ <j-async bind="test">
136
+ <template loading>Loading...</template>
137
+ <template success>Success!</template>
138
+ <template error>Error!</template>
139
+ </j-async>
140
+ </div>
141
+ `);
142
+
143
+ assert.equal(element.textContent?.trim(), "Error!");
144
+ });
145
+
146
+ it("should handle AsyncState transitions", () => {
147
+ const element = fixtureSync(html`
148
+ <div
149
+ @joist::value=${(e: JoistValueEvent) => {
150
+ // Initial state
151
+ e.update({ oldValue: null, newValue: { status: "loading" } });
152
+
153
+ // Simulate state transition after a short delay
154
+ setTimeout(() => {
155
+ e.update({
156
+ oldValue: { status: "loading" },
157
+ newValue: { status: "success", data: "test data" },
158
+ });
159
+ }, 100);
160
+ }}
161
+ >
162
+ <j-async bind="test">
163
+ <template loading>Loading...</template>
164
+ <template success>Success!</template>
165
+ <template error>Error!</template>
166
+ </j-async>
167
+ </div>
168
+ `);
169
+
170
+ // Initially should show loading
171
+ assert.equal(element.textContent?.trim(), "Loading...");
172
+
173
+ // Wait for state transition
174
+ return new Promise((resolve) => {
175
+ setTimeout(() => {
176
+ assert.equal(element.textContent?.trim(), "Success!");
177
+ resolve(undefined);
178
+ }, 150);
179
+ });
180
+ });
package/src/lib/elements/async.element.ts CHANGED
@@ -59,6 +59,8 @@ export class JoistAsyncElement extends HTMLElement {
59
59
  if (newValue !== oldValue) {
60
60
  if (newValue instanceof Promise) {
61
61
  this.#handlePromise(newValue);
62
+ } else if (this.#isAsyncState(newValue)) {
63
+ this.#handleState(newValue);
62
64
  } else {
63
65
  console.warn("j-async bind value must be a Promise or AsyncState");
64
66
  }
@@ -67,6 +69,15 @@ export class JoistAsyncElement extends HTMLElement {
67
69
  );
68
70
  }
69
71
 
72
+ #isAsyncState(value: unknown): value is AsyncState {
73
+ return (
74
+ typeof value === "object" &&
75
+ value !== null &&
76
+ "status" in value &&
77
+ (value.status === "loading" || value.status === "error" || value.status === "success")
78
+ );
79
+ }
80
+
70
81
  async #handlePromise(promise: Promise<unknown>): Promise<void> {
71
82
  try {
72
83
  this.#handleState({ status: "loading" });
package/src/lib/elements/bind.element.ts CHANGED
@@ -1,9 +1,14 @@
1
1
  import { attr, element, css, html } from "@joist/element";
2
2
 
3
- // import { JoistValueEvent } from "../events.js";
4
3
  import { JToken } from "../token.js";
5
4
  import { JoistValueEvent } from "../events.js";
6
5
 
6
+ declare global {
7
+ interface HTMLElementTagNameMap {
8
+ "j-bind": JoistBindElement;
9
+ }
10
+ }
11
+
7
12
  export class JAttrToken extends JToken {
8
13
  mapTo: string;
9
14
 
@@ -21,7 +26,7 @@ export class JAttrToken extends JToken {
21
26
  // prettier-ignore
22
27
  shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
23
28
  })
24
- export class JoistIfElement extends HTMLElement {
29
+ export class JoistBindElement extends HTMLElement {
25
30
  @attr()
26
31
  accessor props = "";
27
32
 
@@ -77,8 +82,8 @@ export class JoistIfElement extends HTMLElement {
77
82
 
78
83
  #dispatch(token: JToken, write: (value: unknown) => void) {
79
84
  this.dispatchEvent(
80
- new JoistValueEvent(token, ({ newValue, oldValue }) => {
81
- if (newValue === oldValue) {
85
+ new JoistValueEvent(token, ({ newValue, oldValue, alwaysUpdate }) => {
86
+ if (newValue === oldValue && !alwaysUpdate) {
82
87
  return;
83
88
  }
84
89
 
package/src/lib/events.ts CHANGED
@@ -8,11 +8,15 @@ declare global {
8
8
  }
9
9
  }
10
10
 
11
+ export interface BindChange<T> extends Change<T> {
12
+ alwaysUpdate?: boolean;
13
+ }
14
+
11
15
  export class JoistValueEvent extends Event {
12
16
  readonly token: JToken;
13
- readonly update: (value: Change<unknown>) => void;
17
+ readonly update: (value: BindChange<unknown>) => void;
14
18
 
15
- constructor(bindTo: JToken, update: (value: Change<unknown>) => void) {
19
+ constructor(bindTo: JToken, update: (value: BindChange<unknown>) => void) {
16
20
  super("joist::value", { bubbles: true, composed: true });
17
21
 
18
22
  this.token = bindTo;
package/target/lib/bind.d.ts CHANGED
@@ -1 +1,5 @@
1
- export declare function bind<This extends HTMLElement, Value>(mapper?: (instance: This) => Value): (base: ClassAccessorDecoratorTarget<This, Value>, ctx: ClassAccessorDecoratorContext<This, Value>) => ClassAccessorDecoratorResult<This, Value>;
1
+ import { ObserveOpts } from "@joist/observable";
2
+ export interface BindOpts<This, Value> extends ObserveOpts<This, Value> {
3
+ alwaysUpdate?: boolean;
4
+ }
5
+ export declare function bind<This extends HTMLElement, Value>(opts?: BindOpts<This, Value>): (base: ClassAccessorDecoratorTarget<This, Value>, ctx: ClassAccessorDecoratorContext<This, Value>) => ClassAccessorDecoratorResult<This, Value>;
package/target/lib/bind.js CHANGED
@@ -1,19 +1,31 @@
1
1
  import { instanceMetadataStore, observe } from "@joist/observable";
2
- export function bind(mapper) {
2
+ export function bind(opts = {}) {
3
3
  return function bindDecorator(base, ctx) {
4
- const internalObserve = observe(mapper)(base, ctx);
4
+ const internalObserve = observe(opts)(base, ctx);
5
5
  return {
6
6
  init(value) {
7
7
  this.addEventListener("joist::value", (e) => {
8
8
  if (e.token.bindTo === ctx.name) {
9
9
  const instanceMeta = instanceMetadataStore.read(this);
10
10
  e.stopPropagation();
11
- e.update({ oldValue: null, newValue: ctx.access.get(this) });
11
+ e.update({
12
+ oldValue: null,
13
+ newValue: ctx.access.get(this),
14
+ alwaysUpdate: opts.alwaysUpdate,
15
+ });
12
16
  instanceMeta.bindings.add((changes) => {
13
17
  const key = ctx.name;
14
- const res = changes.get(key);
15
- if (res) {
16
- e.update(res);
18
+ const change = changes.get(key);
19
+ if (change) {
20
+ e.update({ ...change, alwaysUpdate: opts.alwaysUpdate });
21
+ }
22
+ else if (opts.alwaysUpdate) {
23
+ const value = ctx.access.get(this);
24
+ e.update({
25
+ oldValue: value,
26
+ newValue: value,
27
+ alwaysUpdate: opts.alwaysUpdate,
28
+ });
17
29
  }
18
30
  });
19
31
  }
package/target/lib/bind.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"bind.js","sourceRoot":"","sources":["../../src/lib/bind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,UAAU,IAAI,CAAkC,MAAkC;IACtF,OAAO,SAAS,aAAa,CAC3B,IAA+C,EAC/C,GAA+C;QAE/C,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEnD,OAAO;YACL,IAAI,CAAC,KAAK;gBACR,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE;oBAC1C,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,CAAC;wBAChC,MAAM,YAAY,GAAG,qBAAqB,CAAC,IAAI,CAAO,IAAI,CAAC,CAAC;wBAE5D,CAAC,CAAC,eAAe,EAAE,CAAC;wBAEpB,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;wBAE7D,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;4BACpC,MAAM,GAAG,GAAG,GAAG,CAAC,IAAkB,CAAC;4BACnC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;4BAE7B,IAAI,GAAG,EAAE,CAAC;gCACR,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;4BAChB,CAAC;wBACH,CAAC,CAAC,CAAC;oBACL,CAAC;gBACH,CAAC,CAAC,CAAC;gBAEH,IAAI,eAAe,CAAC,IAAI,EAAE,CAAC;oBACzB,OAAO,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAU,CAAC;gBACzD,CAAC;gBAED,OAAO,KAAK,CAAC;YACf,CAAC;YACD,GAAG,EAAE,eAAe,CAAC,GAAG;YACxB,GAAG,EAAE,eAAe,CAAC,GAAG;SACzB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"bind.js","sourceRoot":"","sources":["../../src/lib/bind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,OAAO,EAAe,MAAM,mBAAmB,CAAC;AAUhF,MAAM,UAAU,IAAI,CAAkC,OAA8B,EAAE;IACpF,OAAO,SAAS,aAAa,CAC3B,IAA+C,EAC/C,GAA+C;QAE/C,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEjD,OAAO;YACL,IAAI,CAAC,KAAK;gBACR,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE;oBAC1C,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,CAAC;wBAChC,MAAM,YAAY,GAAG,qBAAqB,CAAC,IAAI,CAAO,IAAI,CAAC,CAAC;wBAE5D,CAAC,CAAC,eAAe,EAAE,CAAC;wBAEpB,CAAC,CAAC,MAAM,CAAC;4BACP,QAAQ,EAAE,IAAI;4BACd,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;4BAC9B,YAAY,EAAE,IAAI,CAAC,YAAY;yBAChC,CAAC,CAAC;wBAEH,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;4BACpC,MAAM,GAAG,GAAG,GAAG,CAAC,IAAkB,CAAC;4BACnC,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;4BAEhC,IAAI,MAAM,EAAE,CAAC;gCACX,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;4BAC3D,CAAC;iCAAM,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gCAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gCAEnC,CAAC,CAAC,MAAM,CAAC;oCACP,QAAQ,EAAE,KAAK;oCACf,QAAQ,EAAE,KAAK;oCACf,YAAY,EAAE,IAAI,CAAC,YAAY;iCAChC,CAAC,CAAC;4BACL,CAAC;wBACH,CAAC,CAAC,CAAC;oBACL,CAAC;gBACH,CAAC,CAAC,CAAC;gBAEH,IAAI,eAAe,CAAC,IAAI,EAAE,CAAC;oBACzB,OAAO,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAU,CAAC;gBACzD,CAAC;gBAED,OAAO,KAAK,CAAC;YACf,CAAC;YACD,GAAG,EAAE,eAAe,CAAC,GAAG;YACxB,GAAG,EAAE,eAAe,CAAC,GAAG;SACzB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}
package/target/lib/elements/async.element.js CHANGED
@@ -58,12 +58,21 @@ let JoistAsyncElement = (() => {
58
58
  if (newValue instanceof Promise) {
59
59
  this.#handlePromise(newValue);
60
60
  }
61
+ else if (this.#isAsyncState(newValue)) {
62
+ this.#handleState(newValue);
63
+ }
61
64
  else {
62
65
  console.warn("j-async bind value must be a Promise or AsyncState");
63
66
  }
64
67
  }
65
68
  }));
66
69
  }
70
+ #isAsyncState(value) {
71
+ return (typeof value === "object" &&
72
+ value !== null &&
73
+ "status" in value &&
74
+ (value.status === "loading" || value.status === "error" || value.status === "success"));
75
+ }
67
76
  async #handlePromise(promise) {
68
77
  try {
69
78
  this.#handleState({ status: "loading" });
package/target/lib/elements/async.element.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"async.element.js","sourceRoot":"","sources":["../../../src/lib/elements/async.element.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"async.element.js","sourceRoot":"","sources":["../../../src/lib/elements/async.element.ts"],"names":[],"mappings":"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"}
package/target/lib/elements/async.element.test.js CHANGED
@@ -72,4 +72,80 @@ it("should handle state transitions", async () => {
72
72
  await new Promise((resolve) => setTimeout(resolve, 150));
73
73
  assert.equal(element.textContent?.trim(), "Success!");
74
74
  });
75
+ it("should show loading template when AsyncState is loading", () => {
76
+ const element = fixtureSync(html `
77
+ <div
78
+ @joist::value=${(e) => {
79
+ e.update({ oldValue: null, newValue: { status: "loading" } });
80
+ }}
81
+ >
82
+ <j-async bind="test">
83
+ <template loading>Loading...</template>
84
+ <template success>Success!</template>
85
+ <template error>Error!</template>
86
+ </j-async>
87
+ </div>
88
+ `);
89
+ assert.equal(element.textContent?.trim(), "Loading...");
90
+ });
91
+ it("should show success template when AsyncState is success", () => {
92
+ const element = fixtureSync(html `
93
+ <div
94
+ @joist::value=${(e) => {
95
+ e.update({ oldValue: null, newValue: { status: "success", data: "test data" } });
96
+ }}
97
+ >
98
+ <j-async bind="test">
99
+ <template loading>Loading...</template>
100
+ <template success>Success!</template>
101
+ <template error>Error!</template>
102
+ </j-async>
103
+ </div>
104
+ `);
105
+ assert.equal(element.textContent?.trim(), "Success!");
106
+ });
107
+ it("should show error template when AsyncState is error", () => {
108
+ const element = fixtureSync(html `
109
+ <div
110
+ @joist::value=${(e) => {
111
+ e.update({ oldValue: null, newValue: { status: "error", error: "test error" } });
112
+ }}
113
+ >
114
+ <j-async bind="test">
115
+ <template loading>Loading...</template>
116
+ <template success>Success!</template>
117
+ <template error>Error!</template>
118
+ </j-async>
119
+ </div>
120
+ `);
121
+ assert.equal(element.textContent?.trim(), "Error!");
122
+ });
123
+ it("should handle AsyncState transitions", () => {
124
+ const element = fixtureSync(html `
125
+ <div
126
+ @joist::value=${(e) => {
127
+ e.update({ oldValue: null, newValue: { status: "loading" } });
128
+ setTimeout(() => {
129
+ e.update({
130
+ oldValue: { status: "loading" },
131
+ newValue: { status: "success", data: "test data" },
132
+ });
133
+ }, 100);
134
+ }}
135
+ >
136
+ <j-async bind="test">
137
+ <template loading>Loading...</template>
138
+ <template success>Success!</template>
139
+ <template error>Error!</template>
140
+ </j-async>
141
+ </div>
142
+ `);
143
+ assert.equal(element.textContent?.trim(), "Loading...");
144
+ return new Promise((resolve) => {
145
+ setTimeout(() => {
146
+ assert.equal(element.textContent?.trim(), "Success!");
147
+ resolve(undefined);
148
+ }, 150);
149
+ });
150
+ });
75
151
  //# sourceMappingURL=async.element.test.js.map
package/target/lib/elements/async.element.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"async.element.test.js","sourceRoot":"","sources":["../../../src/lib/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"}
1
+ {"version":3,"file":"async.element.test.js","sourceRoot":"","sources":["../../../src/lib/elements/async.element.test.ts"],"names":[],"mappings":"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"}
package/target/lib/elements/bind.element.d.ts CHANGED
@@ -1,9 +1,14 @@
1
1
  import { JToken } from "../token.js";
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ "j-bind": JoistBindElement;
5
+ }
6
+ }
2
7
  export declare class JAttrToken extends JToken {
3
8
  mapTo: string;
4
9
  constructor(binding: string);
5
10
  }
6
- export declare class JoistIfElement extends HTMLElement {
11
+ export declare class JoistBindElement extends HTMLElement {
7
12
  #private;
8
13
  accessor props: string;
9
14
  accessor attrs: string;
package/target/lib/elements/bind.element.js CHANGED
@@ -10,7 +10,7 @@ export class JAttrToken extends JToken {
10
10
  this.mapTo = mapTo;
11
11
  }
12
12
  }
13
- let JoistIfElement = (() => {
13
+ let JoistBindElement = (() => {
14
14
  let _classDecorators = [element({
15
15
  tagName: "j-bind",
16
16
  shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
@@ -28,7 +28,7 @@ let JoistIfElement = (() => {
28
28
  let _target_decorators;
29
29
  let _target_initializers = [];
30
30
  let _target_extraInitializers = [];
31
- var JoistIfElement = class extends _classSuper {
31
+ var JoistBindElement = class extends _classSuper {
32
32
  static { _classThis = this; }
33
33
  static {
34
34
  const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -39,7 +39,7 @@ let JoistIfElement = (() => {
39
39
  __esDecorate(this, null, _attrs_decorators, { kind: "accessor", name: "attrs", static: false, private: false, access: { has: obj => "attrs" in obj, get: obj => obj.attrs, set: (obj, value) => { obj.attrs = value; } }, metadata: _metadata }, _attrs_initializers, _attrs_extraInitializers);
40
40
  __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);
41
41
  __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
42
- JoistIfElement = _classThis = _classDescriptor.value;
42
+ JoistBindElement = _classThis = _classDescriptor.value;
43
43
  if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
44
44
  __runInitializers(_classThis, _classExtraInitializers);
45
45
  }
@@ -90,8 +90,8 @@ let JoistIfElement = (() => {
90
90
  .filter((b) => b);
91
91
  }
92
92
  #dispatch(token, write) {
93
- this.dispatchEvent(new JoistValueEvent(token, ({ newValue, oldValue }) => {
94
- if (newValue === oldValue) {
93
+ this.dispatchEvent(new JoistValueEvent(token, ({ newValue, oldValue, alwaysUpdate }) => {
94
+ if (newValue === oldValue && !alwaysUpdate) {
95
95
  return;
96
96
  }
97
97
  let valueToWrite = newValue;
@@ -109,7 +109,7 @@ let JoistIfElement = (() => {
109
109
  __runInitializers(this, _target_extraInitializers);
110
110
  }
111
111
  };
112
- return JoistIfElement = _classThis;
112
+ return JoistBindElement = _classThis;
113
113
  })();
114
- export { JoistIfElement };
114
+ export { JoistBindElement };
115
115
  //# sourceMappingURL=bind.element.js.map
package/target/lib/elements/bind.element.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"bind.element.js","sourceRoot":"","sources":["../../../src/lib/elements/bind.element.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"bind.element.js","sourceRoot":"","sources":["../../../src/lib/elements/bind.element.ts"],"names":[],"mappings":"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"}
package/target/lib/events.d.ts CHANGED
@@ -5,8 +5,11 @@ declare global {
5
5
  "joist::value": JoistValueEvent;
6
6
  }
7
7
  }
8
+ export interface BindChange<T> extends Change<T> {
9
+ alwaysUpdate?: boolean;
10
+ }
8
11
  export declare class JoistValueEvent extends Event {
9
12
  readonly token: JToken;
10
- readonly update: (value: Change<unknown>) => void;
11
- constructor(bindTo: JToken, update: (value: Change<unknown>) => void);
13
+ readonly update: (value: BindChange<unknown>) => void;
14
+ constructor(bindTo: JToken, update: (value: BindChange<unknown>) => void);
12
15
  }
package/target/lib/events.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/lib/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"}
1
+ {"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/lib/events.ts"],"names":[],"mappings":"AAcA,MAAM,OAAO,eAAgB,SAAQ,KAAK;IAC/B,KAAK,CAAS;IACd,MAAM,CAAuC;IAEtD,YAAY,MAAc,EAAE,MAA4C;QACtE,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"}