@rhtml/modifiers 0.0.91 → 0.0.94

package/dist/angular/index.d.ts

@@ -1,9 +1,14 @@
-import { LitElement, TemplateResult } from '@rxdi/lit-html';
+import { LitElement, OnDestroy, OnUpdateFirst, TemplateResult } from '@rxdi/lit-html';
 export declare enum Attributes {
     NgIf = "ngIf"
 }
-export declare class AngularLayout extends LitElement {
-    self: LitElement;
-    OnUpdate(): void;
+export declare class AngularLayout extends LitElement implements OnUpdateFirst, OnDestroy {
     static modifier(template: TemplateResult): TemplateResult;
+    parent: LitElement;
+    private container;
+    private observer;
+    OnUpdateFirst(): void;
+    OnDestroy(): void;
+    private listenForTreeChanges;
+    private triggerChanges;
 }

package/dist/angular/index.js

@@ -28,22 +28,40 @@ function recursion(div) {
     }
 }
 let AngularLayout = class AngularLayout extends lit_html_1.LitElement {
-    OnUpdate() {
-        const slot = this.shadowRoot.querySelector('slot');
-        for (const div of [...slot === null || slot === void 0 ? void 0 : slot.assignedElements()]) {
-            recursion.call(this.self, div);
-        }
-    }
+    /* Keep in mind that `this` here is the parent component where modifier will be used */
     static modifier(template) {
         return lit_html_1.html `
-      <angular-layout .self=${this}>${template}</angular-layout>
+      <angular-layout .parent=${this}>${template}</angular-layout>
     `;
     }
+    OnUpdateFirst() {
+        this.triggerChanges();
+        this.listenForTreeChanges();
+    }
+    OnDestroy() {
+        this.observer.disconnect();
+    }
+    listenForTreeChanges() {
+        this.observer = new MutationObserver(() => this.triggerChanges());
+        this.observer.observe(this.parent.shadowRoot, {
+            subtree: true,
+            childList: true
+        });
+    }
+    triggerChanges() {
+        for (const div of this.container.assignedElements()) {
+            recursion.call(this.parent, div);
+        }
+    }
 };
 __decorate([
     lit_html_1.property(),
     __metadata("design:type", lit_html_1.LitElement)
-], AngularLayout.prototype, "self", void 0);
+], AngularLayout.prototype, "parent", void 0);
+__decorate([
+    lit_html_1.query('slot'),
+    __metadata("design:type", HTMLSlotElement)
+], AngularLayout.prototype, "container", void 0);
 AngularLayout = __decorate([
     lit_html_1.Component({
         selector: 'angular-layout',

package/dist/angular/index.js.map

@@ -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"}
+{"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

@@ -1,6 +1,11 @@
-import { LitElement, TemplateResult } from '@rxdi/lit-html';
-export declare class FlexLayout extends LitElement {
-    child: LitElement;
-    OnUpdate(): void;
+import { LitElement, OnDestroy, OnUpdateFirst, TemplateResult } from '@rxdi/lit-html';
+export declare class FlexLayout extends LitElement implements OnUpdateFirst, OnDestroy {
     static modifier(template: TemplateResult): TemplateResult;
+    parent: LitElement;
+    private container;
+    private observer;
+    OnUpdateFirst(): void;
+    OnDestroy(): void;
+    private listenForTreeChanges;
+    private triggerChanges;
 }

package/dist/layout/index.js

@@ -13,22 +13,40 @@ exports.FlexLayout = void 0;
 const lit_html_1 = require("@rxdi/lit-html");
 const modifiers_1 = require("./modifiers");
 let FlexLayout = class FlexLayout extends lit_html_1.LitElement {
-    OnUpdate() {
-        const slot = this.shadowRoot.querySelector('slot');
-        for (const div of [...slot === null || slot === void 0 ? void 0 : slot.assignedElements()]) {
-            modifiers_1.recursion.call(this.child, div);
-        }
-    }
+    /* Keep in mind that `this` here is the parent component where modifier will be used */
     static modifier(template) {
         return lit_html_1.html `
-      <flex-layout .child=${this}>${template}</flex-layout>
+      <flex-layout .parent=${this}>${template}</flex-layout>
     `;
     }
+    OnUpdateFirst() {
+        this.triggerChanges();
+        this.listenForTreeChanges();
+    }
+    OnDestroy() {
+        this.observer.disconnect();
+    }
+    listenForTreeChanges() {
+        this.observer = new MutationObserver(() => this.triggerChanges());
+        this.observer.observe(this.parent.shadowRoot, {
+            subtree: true,
+            childList: true
+        });
+    }
+    triggerChanges() {
+        for (const div of this.container.assignedElements()) {
+            modifiers_1.recursion.call(this.parent, div);
+        }
+    }
 };
 __decorate([
     lit_html_1.property(),
     __metadata("design:type", lit_html_1.LitElement)
-], FlexLayout.prototype, "child", void 0);
+], FlexLayout.prototype, "parent", void 0);
+__decorate([
+    lit_html_1.query('slot'),
+    __metadata("design:type", HTMLSlotElement)
+], FlexLayout.prototype, "container", void 0);
 FlexLayout = __decorate([
     lit_html_1.Component({
         selector: 'flex-layout',

package/dist/layout/index.js.map

@@ -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,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,qBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,GAAY,CAAC,CAAC;SAC1C;IACH,CAAC;IAEM,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;4BACa,IAAI,IAAI,QAAQ;KACvC,CAAC;IACJ,CAAC;CACF,CAAA;AAdC;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,CAgBtB;AAhBY,gCAAU"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhtml/modifiers",
-  "version": "0.0.91",
+  "version": "0.0.94",
   "description": "Reactive HyperText Markup Language",
   "scripts": {
     "start": "npx parcel ./examples/index.html --out-dir build/examples",

package/src/angular/index.ts

@@ -2,7 +2,10 @@ import {
   Component,
   html,
   LitElement,
+  OnDestroy,
+  OnUpdateFirst,
   property,
+  query,
   TemplateResult
 } from '@rxdi/lit-html';
 
@@ -37,20 +40,43 @@ function recursion(div: HTMLElement) {
     `;
   }
 })
-export class AngularLayout extends LitElement {
+export class AngularLayout extends LitElement
+  implements OnUpdateFirst, OnDestroy {
+  /* Keep in mind that `this` here is the parent component where modifier will be used */
+  public static modifier(template: TemplateResult): TemplateResult {
+    return html`
+      <angular-layout .parent=${this}>${template}</angular-layout>
+    `;
+  }
+
   @property()
-  self: LitElement;
+  public parent: LitElement;
 
-  OnUpdate(): void {
-    const slot = this.shadowRoot.querySelector('slot');
-    for (const div of [...slot?.assignedElements()]) {
-      recursion.call(this.self, div as never);
-    }
+  @query('slot')
+  private container: HTMLSlotElement;
+
+  private observer: MutationObserver;
+
+  OnUpdateFirst() {
+    this.triggerChanges();
+    this.listenForTreeChanges();
   }
 
-  public static modifier(template: TemplateResult): TemplateResult {
-    return html`
-      <angular-layout .self=${this}>${template}</angular-layout>
-    `;
+  OnDestroy() {
+    this.observer.disconnect();
+  }
+
+  private listenForTreeChanges() {
+    this.observer = new MutationObserver(() => this.triggerChanges());
+    this.observer.observe(this.parent.shadowRoot, {
+      subtree: true,
+      childList: true
+    });
+  }
+
+  private triggerChanges() {
+    for (const div of this.container.assignedElements()) {
+      recursion.call(this.parent, div);
+    }
   }
 }

package/src/layout/index.ts

@@ -2,7 +2,10 @@ import {
   Component,
   html,
   LitElement,
+  OnDestroy,
+  OnUpdateFirst,
   property,
+  query,
   TemplateResult
 } from '@rxdi/lit-html';
 
@@ -16,20 +19,42 @@ import { recursion } from './modifiers';
     `;
   }
 })
-export class FlexLayout extends LitElement {
+export class FlexLayout extends LitElement implements OnUpdateFirst, OnDestroy {
+  /* Keep in mind that `this` here is the parent component where modifier will be used */
+  public static modifier(template: TemplateResult): TemplateResult {
+    return html`
+      <flex-layout .parent=${this}>${template}</flex-layout>
+    `;
+  }
+
   @property()
-  child: LitElement;
+  public parent: LitElement;
 
-  OnUpdate(): void {
-    const slot = this.shadowRoot.querySelector('slot');
-    for (const div of [...slot?.assignedElements()]) {
-      recursion.call(this.child, div as never);
-    }
+  @query('slot')
+  private container: HTMLSlotElement;
+
+  private observer: MutationObserver;
+
+  OnUpdateFirst() {
+    this.triggerChanges();
+    this.listenForTreeChanges();
   }
 
-  public static modifier(template: TemplateResult): TemplateResult {
-    return html`
-      <flex-layout .child=${this}>${template}</flex-layout>
-    `;
+  OnDestroy() {
+    this.observer.disconnect();
+  }
+
+  private listenForTreeChanges() {
+    this.observer = new MutationObserver(() => this.triggerChanges());
+    this.observer.observe(this.parent.shadowRoot, {
+      subtree: true,
+      childList: true
+    });
+  }
+
+  private triggerChanges() {
+    for (const div of this.container.assignedElements()) {
+      recursion.call(this.parent, div);
+    }
   }
 }