@builder.io/sdk - npm Package Compare versions

Comparing version 0.0.51 to 0.0.52

dist/clients/js/src/classes/event-capturer.class.d.ts

@@ -1,3 +0,1 @@
-import { VirtualEvent } from '../../../../shared/interfaces/virtual-event.interface';
-import { DocumentEventMessage } from '../../../../shared/interfaces/messages/document-event-message.interface';
 export declare class EventCapturer {
@@ -8,9 +6,15 @@ events: string[];
     usePassive: boolean;
+    observeMutations: boolean;
+    private observer?;
     constructor(events?: string[]);
+    private getElementForEvent(eventName);
     listen(): this;
     removeListeners(): void;
-    handleEvent: (event: Event) => void;
-    postMessage(message: DocumentEventMessage): void;
-    formatMessage(event: MouseEvent): DocumentEventMessage;
-    virtualizeEvent(event: MouseEvent): VirtualEvent;
+    private startObservingMutations();
+    private stopObservingMutations();
+    private triggerMutationEvent();
+    private handleEvent;
+    private postMessage(message);
+    private formatMessage(event);
+    private virtualizeEvent(event);
 }

dist/clients/js/src/classes/event-capturer.class.js

@@ -19,2 +19,3 @@ "use strict";
             'dblclick',
+            'resize',
         ];
@@ -24,2 +25,3 @@ this.element = document.documentElement;
         this.usePassive = false;
+        this.observeMutations = true;
         this.handleEvent = function (event) {
@@ -40,2 +42,5 @@ // TODO: maybe need to put this on window or document to ensure *all*
     }
+    EventCapturer.prototype.getElementForEvent = function (eventName) {
+        return eventName === 'resize' ? window : this.element;
+    };
     // TODO: in edit mode make these not passive and make them preventDefault() and stopPropagation()
@@ -45,3 +50,3 @@ EventCapturer.prototype.listen = function () {
             var event_1 = _a[_i];
-            this.element.addEventListener(event_1, this.handleEvent, {
+            this.getElementForEvent(event_1).addEventListener(event_1, this.handleEvent, {
                 capture: true,
@@ -51,2 +56,5 @@ passive: this.usePassive,
         }
+        if (this.observeMutations) {
+            this.startObservingMutations();
+        }
         return this;
@@ -57,5 +65,32 @@ };
             var event_2 = _a[_i];
-            this.element.removeEventListener(event_2, this.handleEvent);
+            this.getElementForEvent(event_2).removeEventListener(event_2, this.handleEvent);
         }
+        this.stopObservingMutations();
     };
+    EventCapturer.prototype.startObservingMutations = function () {
+        var _this = this;
+        if (!this.observer && typeof MutationObserver !== 'undefined') {
+            this.observer = new MutationObserver(function () {
+                _this.triggerMutationEvent();
+            });
+            this.observer.observe(document.documentElement, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+                characterData: true,
+            });
+        }
+    };
+    EventCapturer.prototype.stopObservingMutations = function () {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = undefined;
+        }
+    };
+    EventCapturer.prototype.triggerMutationEvent = function () {
+        window.top.postMessage({
+            type: 'builder.documentMutation',
+            data: {},
+        }, '*');
+    };
     EventCapturer.prototype.postMessage = function (message) {
@@ -62,0 +97,0 @@ window.top.postMessage(message, '*');

package.json

 {
   "name": "@builder.io/sdk",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "main": "dist/clients/js/index.js",
@@ -5,0 +5,0 @@ "types": "dist/clients/js/index.d.ts",

src/classes/event-capturer.class.ts

@@ -19,2 +19,3 @@ import uniqueSelector from 'unique-selector';
     'dblclick',
+    'resize',
   ];
@@ -26,3 +27,6 @@
   usePassive = false;
+  observeMutations = true;
 
+  private observer?: MutationObserver;
+
   constructor(events?: string[]) {
@@ -34,6 +38,10 @@ if (events) {
 
+  private getElementForEvent(eventName: string) {
+    return eventName === 'resize' ? window : this.element;
+  }
+
   // TODO: in edit mode make these not passive and make them preventDefault() and stopPropagation()
   listen() {
     for (const event of this.events) {
-      this.element.addEventListener(event, this.handleEvent, {
+      this.getElementForEvent(event).addEventListener(event, this.handleEvent, {
         capture: true,
@@ -43,2 +51,5 @@ passive: this.usePassive,
     }
+    if (this.observeMutations) {
+      this.startObservingMutations();
+    }
     return this;
@@ -49,7 +60,39 @@ }
     for (const event of this.events) {
-      this.element.removeEventListener(event, this.handleEvent);
+      this.getElementForEvent(event).removeEventListener(event, this.handleEvent);
     }
+    this.stopObservingMutations();
   }
 
-  handleEvent = (event: Event) => {
+  private startObservingMutations() {
+    if (!this.observer && typeof MutationObserver !== 'undefined') {
+      this.observer = new MutationObserver(() => {
+        this.triggerMutationEvent();
+      });
+      this.observer.observe(document.documentElement, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+        characterData: true,
+      });
+    }
+  }
+
+  private stopObservingMutations() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = undefined;
+    }
+  }
+
+  private triggerMutationEvent() {
+    window.top.postMessage(
+      {
+        type: 'builder.documentMutation',
+        data: {},
+      },
+      '*'
+    );
+  }
+
+  private handleEvent = (event: Event) => {
     // TODO: maybe need to put this on window or document to ensure *all*
@@ -66,7 +109,7 @@ // events are caught before reaching anywhere else
 
-  postMessage(message: DocumentEventMessage) {
+  private postMessage(message: DocumentEventMessage) {
     window.top.postMessage(message, '*');
   }
 
-  formatMessage(event: MouseEvent): DocumentEventMessage {
+  private formatMessage(event: MouseEvent): DocumentEventMessage {
     return {
@@ -80,3 +123,3 @@ type: 'builder.documentEvent',
 
-  virtualizeEvent(event: MouseEvent): VirtualEvent {
+  private virtualizeEvent(event: MouseEvent): VirtualEvent {
     const target = event.target as HTMLElement;
@@ -83,0 +126,0 @@ return {

No alert changes

Improved metrics

Total package byte prevSize

83497

increased by2.79%

Lines of code

2223

increased by3.59%

No dependency changes