@rhtml/modifiers 0.0.93 → 0.0.94

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 (12) hide show
  1. package/dist/angular/index.d.ts +9 -4
  2. package/dist/angular/index.js +26 -8
  3. package/dist/angular/index.js.map +1 -1
  4. package/dist/layout/index.d.ts +9 -5
  5. package/dist/layout/index.js +26 -13
  6. package/dist/layout/index.js.map +1 -1
  7. package/dist/layout/modifiers.js +0 -8
  8. package/dist/layout/modifiers.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/angular/index.ts +37 -11
  11. package/src/layout/index.ts +34 -14
  12. package/src/layout/modifiers.ts +0 -8
package/dist/angular/index.d.ts CHANGED
@@ -1,9 +1,14 @@
1
- import { LitElement, TemplateResult } from '@rxdi/lit-html';
1
+ import { LitElement, OnDestroy, OnUpdateFirst, TemplateResult } from '@rxdi/lit-html';
2
2
  export declare enum Attributes {
3
3
  NgIf = "ngIf"
4
4
  }
5
- export declare class AngularLayout extends LitElement {
6
- self: LitElement;
7
- OnUpdate(): void;
5
+ export declare class AngularLayout extends LitElement implements OnUpdateFirst, OnDestroy {
8
6
  static modifier(template: TemplateResult): TemplateResult;
7
+ parent: LitElement;
8
+ private container;
9
+ private observer;
10
+ OnUpdateFirst(): void;
11
+ OnDestroy(): void;
12
+ private listenForTreeChanges;
13
+ private triggerChanges;
9
14
  }
package/dist/angular/index.js CHANGED
@@ -28,22 +28,40 @@ function recursion(div) {
28
28
  }
29
29
  }
30
30
  let AngularLayout = class AngularLayout extends lit_html_1.LitElement {
31
- OnUpdate() {
32
- const slot = this.shadowRoot.querySelector('slot');
33
- for (const div of [...slot === null || slot === void 0 ? void 0 : slot.assignedElements()]) {
34
- recursion.call(this.self, div);
35
- }
36
- }
31
+ /* Keep in mind that `this` here is the parent component where modifier will be used */
37
32
  static modifier(template) {
38
33
  return lit_html_1.html `
39
- <angular-layout .self=${this}>${template}</angular-layout>
34
+ <angular-layout .parent=${this}>${template}</angular-layout>
40
35
  `;
41
36
  }
37
+ OnUpdateFirst() {
38
+ this.triggerChanges();
39
+ this.listenForTreeChanges();
40
+ }
41
+ OnDestroy() {
42
+ this.observer.disconnect();
43
+ }
44
+ listenForTreeChanges() {
45
+ this.observer = new MutationObserver(() => this.triggerChanges());
46
+ this.observer.observe(this.parent.shadowRoot, {
47
+ subtree: true,
48
+ childList: true
49
+ });
50
+ }
51
+ triggerChanges() {
52
+ for (const div of this.container.assignedElements()) {
53
+ recursion.call(this.parent, div);
54
+ }
55
+ }
42
56
  };
43
57
  __decorate([
44
58
  lit_html_1.property(),
45
59
  __metadata("design:type", lit_html_1.LitElement)
46
- ], AngularLayout.prototype, "self", void 0);
60
+ ], AngularLayout.prototype, "parent", void 0);
61
+ __decorate([
62
+ lit_html_1.query('slot'),
63
+ __metadata("design:type", HTMLSlotElement)
64
+ ], AngularLayout.prototype, "container", void 0);
47
65
  AngularLayout = __decorate([
48
66
  lit_html_1.Component({
49
67
  selector: 'angular-layout',
package/dist/angular/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/angular/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAMwB;AAExB,wCAAsE;AAEtE,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,2BAAa,CAAA;AACf,CAAC,EAFW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAErB;AAED,SAAS,SAAS,CAAC,GAAgB;IACjC,MAAM,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAE/C,IAAI,qBAAW,CAAC,IAAI,CAAC,EAAE;QACrB,qCAA2B,CAAC,UAAU,CAAC,IAAI,CAAC,CAC1C,OAAO,CAAC,EAAE,CACR,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO;YACpB,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CACzE,CAAC,GAAG,CAAC,CAAC;KACR;IAED,MAAM,IAAI,GAAG,CAAC,GAAG,GAAG,CAAC,QAAQ,CAAkB,CAAC;IAChD,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;QACtB,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;KAC3B;AACH,CAAC;AAUD,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,qBAAU;IAI3C,QAAQ;QACN,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,EAAE,CAAC,EAAE;YAC/C,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,GAAY,CAAC,CAAC;SACzC;IACH,CAAC;IAEM,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;8BACe,IAAI,IAAI,QAAQ;KACzC,CAAC;IACJ,CAAC;CACF,CAAA;AAdC;IADC,mBAAQ,EAAE;8BACL,qBAAU;2CAAC;AAFN,aAAa;IARzB,oBAAS,CAAC;QACT,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ;YACN,OAAO,eAAI,CAAA;;KAEV,CAAC;QACJ,CAAC;KACF,CAAC;GACW,aAAa,CAgBzB;AAhBY,sCAAa"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/angular/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CASwB;AAExB,wCAAsE;AAEtE,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,2BAAa,CAAA;AACf,CAAC,EAFW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAErB;AAED,SAAS,SAAS,CAAC,GAAgB;IACjC,MAAM,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAE/C,IAAI,qBAAW,CAAC,IAAI,CAAC,EAAE;QACrB,qCAA2B,CAAC,UAAU,CAAC,IAAI,CAAC,CAC1C,OAAO,CAAC,EAAE,CACR,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO;YACpB,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CACzE,CAAC,GAAG,CAAC,CAAC;KACR;IAED,MAAM,IAAI,GAAG,CAAC,GAAG,GAAG,CAAC,QAAQ,CAAkB,CAAC;IAChD,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;QACtB,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;KAC3B;AACH,CAAC;AAUD,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,qBAAU;IAE3C,uFAAuF;IAChF,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;gCACiB,IAAI,IAAI,QAAQ;KAC3C,CAAC;IACJ,CAAC;IAUD,aAAa;QACX,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,SAAS;QACP,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QAClE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;YAC5C,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;QACpB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAE;YACnD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;SAClC;IACH,CAAC;CACF,CAAA;AA7BC;IADC,mBAAQ,EAAE;8BACI,qBAAU;6CAAC;AAG1B;IADC,gBAAK,CAAC,MAAM,CAAC;8BACK,eAAe;gDAAC;AAbxB,aAAa;IARzB,oBAAS,CAAC;QACT,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ;YACN,OAAO,eAAI,CAAA;;KAEV,CAAC;QACJ,CAAC;KACF,CAAC;GACW,aAAa,CAuCzB;AAvCY,sCAAa"}
package/dist/layout/index.d.ts CHANGED
@@ -1,7 +1,11 @@
1
- import { LitElement, TemplateResult } from '@rxdi/lit-html';
2
- export declare class FlexLayout extends LitElement {
3
- child: LitElement;
4
- OnUpdate(): void;
5
- private updateAttributes;
1
+ import { LitElement, OnDestroy, OnUpdateFirst, TemplateResult } from '@rxdi/lit-html';
2
+ export declare class FlexLayout extends LitElement implements OnUpdateFirst, OnDestroy {
6
3
  static modifier(template: TemplateResult): TemplateResult;
4
+ parent: LitElement;
5
+ private container;
6
+ private observer;
7
+ OnUpdateFirst(): void;
8
+ OnDestroy(): void;
9
+ private listenForTreeChanges;
10
+ private triggerChanges;
7
11
  }
package/dist/layout/index.js CHANGED
@@ -13,27 +13,40 @@ exports.FlexLayout = void 0;
13
13
  const lit_html_1 = require("@rxdi/lit-html");
14
14
  const modifiers_1 = require("./modifiers");
15
15
  let FlexLayout = class FlexLayout extends lit_html_1.LitElement {
16
- OnUpdate() {
17
- this.updateAttributes();
18
- }
19
- updateAttributes() {
20
- var _a;
21
- const slot = this.shadowRoot.querySelector('slot');
22
- const elements = (_a = slot === null || slot === void 0 ? void 0 : slot.assignedElements()) !== null && _a !== void 0 ? _a : [];
23
- for (const element of elements) {
24
- modifiers_1.recursion.call(this.child, element);
25
- }
26
- }
16
+ /* Keep in mind that `this` here is the parent component where modifier will be used */
27
17
  static modifier(template) {
28
18
  return lit_html_1.html `
29
- <flex-layout .child=${this}>${template}</flex-layout>
19
+ <flex-layout .parent=${this}>${template}</flex-layout>
30
20
  `;
31
21
  }
22
+ OnUpdateFirst() {
23
+ this.triggerChanges();
24
+ this.listenForTreeChanges();
25
+ }
26
+ OnDestroy() {
27
+ this.observer.disconnect();
28
+ }
29
+ listenForTreeChanges() {
30
+ this.observer = new MutationObserver(() => this.triggerChanges());
31
+ this.observer.observe(this.parent.shadowRoot, {
32
+ subtree: true,
33
+ childList: true
34
+ });
35
+ }
36
+ triggerChanges() {
37
+ for (const div of this.container.assignedElements()) {
38
+ modifiers_1.recursion.call(this.parent, div);
39
+ }
40
+ }
32
41
  };
33
42
  __decorate([
34
43
  lit_html_1.property(),
35
44
  __metadata("design:type", lit_html_1.LitElement)
36
- ], FlexLayout.prototype, "child", void 0);
45
+ ], FlexLayout.prototype, "parent", void 0);
46
+ __decorate([
47
+ lit_html_1.query('slot'),
48
+ __metadata("design:type", HTMLSlotElement)
49
+ ], FlexLayout.prototype, "container", void 0);
37
50
  FlexLayout = __decorate([
38
51
  lit_html_1.Component({
39
52
  selector: 'flex-layout',
package/dist/layout/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAMwB;AAExB,2CAAwC;AAUxC,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,qBAAU;IAIxC,QAAQ;QACN,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB;;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,MAAM,QAAQ,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,qCAAM,EAAE,CAAC;QAChD,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE;YAC9B,qBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;SACrC;IACH,CAAC;IAEM,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;4BACa,IAAI,IAAI,QAAQ;KACvC,CAAC;IACJ,CAAC;CACF,CAAA;AAnBC;IADC,mBAAQ,EAAE;8BACJ,qBAAU;yCAAC;AAFP,UAAU;IARtB,oBAAS,CAAC;QACT,QAAQ,EAAE,aAAa;QACvB,QAAQ;YACN,OAAO,eAAI,CAAA;;KAEV,CAAC;QACJ,CAAC;KACF,CAAC;GACW,UAAU,CAqBtB;AArBY,gCAAU"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CASwB;AAExB,2CAAwC;AAUxC,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,qBAAU;IACxC,uFAAuF;IAChF,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;6BACc,IAAI,IAAI,QAAQ;KACxC,CAAC;IACJ,CAAC;IAUD,aAAa;QACX,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,SAAS;QACP,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QAClE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;YAC5C,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;QACpB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAE;YACnD,qBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;SAClC;IACH,CAAC;CACF,CAAA;AA7BC;IADC,mBAAQ,EAAE;8BACI,qBAAU;0CAAC;AAG1B;IADC,gBAAK,CAAC,MAAM,CAAC;8BACK,eAAe;6CAAC;AAZxB,UAAU;IARtB,oBAAS,CAAC;QACT,QAAQ,EAAE,aAAa;QACvB,QAAQ;YACN,OAAO,eAAI,CAAA;;KAEV,CAAC;QACJ,CAAC;KACF,CAAC;GACW,UAAU,CAsCtB;AAtCY,gCAAU"}
package/dist/layout/modifiers.js CHANGED
@@ -110,14 +110,6 @@ function recursion(div) {
110
110
  exports.subscribeToAttributeChanges(Attributes.FxFlexFill)(exports.setChildrensFlexFill)(div);
111
111
  }
112
112
  if (exports.isAttribute(fxLayout)) {
113
- const observer = new MutationObserver(() => {
114
- observer.disconnect();
115
- recursion.call(this, div);
116
- });
117
- observer.observe(div, {
118
- subtree: true,
119
- childList: true
120
- });
121
113
  exports.subscribeToAttributeChanges(Attributes.FxLayout)(exports.setFxLayout)(div);
122
114
  }
123
115
  if (exports.isAttribute(fxLayoutAlign)) {
package/dist/layout/modifiers.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../../src/layout/modifiers.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../../src/layout/modifiers.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rhtml/modifiers",
3
- "version": "0.0.93",
3
+ "version": "0.0.94",
4
4
  "description": "Reactive HyperText Markup Language",
5
5
  "scripts": {
6
6
  "start": "npx parcel ./examples/index.html --out-dir build/examples",
package/src/angular/index.ts CHANGED
@@ -2,7 +2,10 @@ import {
2
2
  Component,
3
3
  html,
4
4
  LitElement,
5
+ OnDestroy,
6
+ OnUpdateFirst,
5
7
  property,
8
+ query,
6
9
  TemplateResult
7
10
  } from '@rxdi/lit-html';
8
11
 
@@ -37,20 +40,43 @@ function recursion(div: HTMLElement) {
37
40
  `;
38
41
  }
39
42
  })
40
- export class AngularLayout extends LitElement {
43
+ export class AngularLayout extends LitElement
44
+ implements OnUpdateFirst, OnDestroy {
45
+ /* Keep in mind that `this` here is the parent component where modifier will be used */
46
+ public static modifier(template: TemplateResult): TemplateResult {
47
+ return html`
48
+ <angular-layout .parent=${this}>${template}</angular-layout>
49
+ `;
50
+ }
51
+
41
52
  @property()
42
- self: LitElement;
53
+ public parent: LitElement;
43
54
 
44
- OnUpdate(): void {
45
- const slot = this.shadowRoot.querySelector('slot');
46
- for (const div of [...slot?.assignedElements()]) {
47
- recursion.call(this.self, div as never);
48
- }
55
+ @query('slot')
56
+ private container: HTMLSlotElement;
57
+
58
+ private observer: MutationObserver;
59
+
60
+ OnUpdateFirst() {
61
+ this.triggerChanges();
62
+ this.listenForTreeChanges();
49
63
  }
50
64
 
51
- public static modifier(template: TemplateResult): TemplateResult {
52
- return html`
53
- <angular-layout .self=${this}>${template}</angular-layout>
54
- `;
65
+ OnDestroy() {
66
+ this.observer.disconnect();
67
+ }
68
+
69
+ private listenForTreeChanges() {
70
+ this.observer = new MutationObserver(() => this.triggerChanges());
71
+ this.observer.observe(this.parent.shadowRoot, {
72
+ subtree: true,
73
+ childList: true
74
+ });
75
+ }
76
+
77
+ private triggerChanges() {
78
+ for (const div of this.container.assignedElements()) {
79
+ recursion.call(this.parent, div);
80
+ }
55
81
  }
56
82
  }
package/src/layout/index.ts CHANGED
@@ -2,7 +2,10 @@ import {
2
2
  Component,
3
3
  html,
4
4
  LitElement,
5
+ OnDestroy,
6
+ OnUpdateFirst,
5
7
  property,
8
+ query,
6
9
  TemplateResult
7
10
  } from '@rxdi/lit-html';
8
11
 
@@ -16,25 +19,42 @@ import { recursion } from './modifiers';
16
19
  `;
17
20
  }
18
21
  })
19
- export class FlexLayout extends LitElement {
22
+ export class FlexLayout extends LitElement implements OnUpdateFirst, OnDestroy {
23
+ /* Keep in mind that `this` here is the parent component where modifier will be used */
24
+ public static modifier(template: TemplateResult): TemplateResult {
25
+ return html`
26
+ <flex-layout .parent=${this}>${template}</flex-layout>
27
+ `;
28
+ }
29
+
20
30
  @property()
21
- child: LitElement;
31
+ public parent: LitElement;
32
+
33
+ @query('slot')
34
+ private container: HTMLSlotElement;
35
+
36
+ private observer: MutationObserver;
22
37
 
23
- OnUpdate(): void {
24
- this.updateAttributes();
38
+ OnUpdateFirst() {
39
+ this.triggerChanges();
40
+ this.listenForTreeChanges();
25
41
  }
26
42
 
27
- private updateAttributes() {
28
- const slot = this.shadowRoot.querySelector('slot');
29
- const elements = slot?.assignedElements() ?? [];
30
- for (const element of elements) {
31
- recursion.call(this.child, element);
32
- }
43
+ OnDestroy() {
44
+ this.observer.disconnect();
33
45
  }
34
46
 
35
- public static modifier(template: TemplateResult): TemplateResult {
36
- return html`
37
- <flex-layout .child=${this}>${template}</flex-layout>
38
- `;
47
+ private listenForTreeChanges() {
48
+ this.observer = new MutationObserver(() => this.triggerChanges());
49
+ this.observer.observe(this.parent.shadowRoot, {
50
+ subtree: true,
51
+ childList: true
52
+ });
53
+ }
54
+
55
+ private triggerChanges() {
56
+ for (const div of this.container.assignedElements()) {
57
+ recursion.call(this.parent, div);
58
+ }
39
59
  }
40
60
  }
package/src/layout/modifiers.ts CHANGED
@@ -143,14 +143,6 @@ export function recursion(div: HTMLElement) {
143
143
  }
144
144
 
145
145
  if (isAttribute(fxLayout)) {
146
- const observer = new MutationObserver(() => {
147
- observer.disconnect();
148
- recursion.call(this, div);
149
- });
150
- observer.observe(div, {
151
- subtree: true,
152
- childList: true
153
- });
154
146
  subscribeToAttributeChanges(Attributes.FxLayout)(setFxLayout)(div);
155
147
  }
156
148