panel - npm Package Compare versions

Comparing version 5.11.0-beta.0 to 5.11.0-beta.1

build/component.js

@@ -352,2 +352,6 @@ 'use strict';
 
+    _this.timings = {
+      createdAt: (0, _perf.getNow)()
+    };
+
     _this.panelID = (0, _cuid2.default)();
@@ -400,2 +404,29 @@
     }
+
+    _this.postRenderCallback = function (elapsedMs) {
+      if (elapsedMs > _this.getConfig('slowThreshold')) {
+        var shouldBroadcast = !_this.lastSlowRender || // SHOULD because we've never slow rendered
+        _this.lastSlowRender.time - (0, _perf.getNow)() > 3000 || // SHOULD because last time was more than three seconds ago
+        elapsedMs > (_this.slowestRenderMs || 0); // SHOULD because this time is slower
+
+        if (shouldBroadcast) {
+          var comparedToLast = _this.lastSlowRender ? {
+            // bit of a hack to get the number to only 2 digits of precision
+            comparedToLast: +((elapsedMs - _this.lastSlowRender.elapsedMs) / _this.lastSlowRender.elapsedMs).toFixed(2),
+            comparedToSlowest: +((elapsedMs - _this.slowestRenderMs) / _this.slowestRenderMs).toFixed(2)
+          } : undefined;
+
+          _this.lastSlowRender = {
+            time: (0, _perf.getNow)(),
+            elapsedMs: elapsedMs
+          };
+          _this.slowestRenderMs = Math.max(_this.slowestRenderMs || 0, elapsedMs);
+          _this.dispatchEvent(new CustomEvent('slowRender', {
+            detail: Object.assign(comparedToLast || {}, { elapsedMs: elapsedMs, component: _this.toString() }),
+            bubbles: true,
+            composed: true
+          }));
+        }
+      }
+    };
     return _this;
@@ -417,3 +448,3 @@ }
       this.initializing = true;
-      this.initializingStartedAt = (0, _perf.getNow)();
+      this.timings.initializingStartedAt = (0, _perf.getNow)();
 
@@ -523,3 +554,3 @@ var _iteratorNormalCompletion = true;
         updateMode: this.getConfig('updateSync') ? 'sync' : 'async',
-        component: this
+        postRenderCallback: this.postRenderCallback
       });
@@ -539,6 +570,6 @@ this.el.appendChild(this.domPatcher.el);
       this.initializing = false;
-      this.initializingCompletedAt = (0, _perf.getNow)();
+      this.timings.initializingCompletedAt = (0, _perf.getNow)();
       this.dispatchEvent(new CustomEvent('componentInitialized', {
         detail: {
-          elapsedMs: this.initializingCompletedAt - this.initializingStartedAt,
+          elapsedMs: this.timings.initializingCompletedAt - this.timings.initializingStartedAt,
           component: this.toString()
@@ -651,2 +682,3 @@ },
     value: function attributeChangedCallback(attr, oldVal, newVal) {
+      this.timings.lastAttributeChangedAt = (0, _perf.getNow)();
       this._updateAttr(attr);
@@ -653,0 +685,0 @@

build/dom-patcher.js

@@ -42,3 +42,3 @@ 'use strict';
     this.vnode = this.renderFunc(this.state);
-    this.component = options.component;
+    this.postRenderCallback = options.postRenderCallback;
 
@@ -117,9 +117,4 @@ // prepare root element
       this.el = this.vnode.elm;
-      var elapsedMs = (0, _perf.getNow)() - startedAt;
-      if (this.component && elapsedMs > this.component.getConfig('slowThreshold')) {
-        this.component.dispatchEvent(new CustomEvent('slowRender', {
-          detail: { elapsedMs: elapsedMs, component: this.component.toString() },
-          bubbles: true,
-          composed: true
-        }));
+      if (this.postRenderCallback) {
+        this.postRenderCallback((0, _perf.getNow)() - startedAt);
       }
@@ -135,3 +130,3 @@ }
       this.el = null;
-      this.component = null;
+      this.postRenderCallback = null;
       // patch with empty vnode to clear out listeners in tree
@@ -138,0 +133,0 @@ // this ensures we don't leave dangling DetachedHTMLElements blocking GC

lib/component.js

@@ -270,2 +270,5 @@ import cuid from 'cuid';
     super();
+    this.timings = {
+      createdAt: getNow(),
+    };
 
@@ -323,2 +326,36 @@ this.panelID = cuid();
     }
+
+    this.postRenderCallback = (elapsedMs) => {
+      if (elapsedMs > this.getConfig(`slowThreshold`)) {
+        const shouldBroadcast =
+          !this.lastSlowRender || // SHOULD because we've never slow rendered
+          this.lastSlowRender.time - getNow() > 3000 || // SHOULD because last time was more than three seconds ago
+          elapsedMs > (this.slowestRenderMs || 0); // SHOULD because this time is slower
+
+        if (shouldBroadcast) {
+          const comparedToLast = this.lastSlowRender
+            ? {
+                // bit of a hack to get the number to only 2 digits of precision
+                comparedToLast: +((elapsedMs - this.lastSlowRender.elapsedMs) / this.lastSlowRender.elapsedMs).toFixed(
+                  2,
+                ),
+                comparedToSlowest: +((elapsedMs - this.slowestRenderMs) / this.slowestRenderMs).toFixed(2),
+              }
+            : undefined;
+
+          this.lastSlowRender = {
+            time: getNow(),
+            elapsedMs,
+          };
+          this.slowestRenderMs = Math.max(this.slowestRenderMs || 0, elapsedMs);
+          this.dispatchEvent(
+            new CustomEvent(`slowRender`, {
+              detail: Object.assign(comparedToLast || {}, {elapsedMs, component: this.toString()}),
+              bubbles: true,
+              composed: true,
+            }),
+          );
+        }
+      }
+    };
   }
@@ -337,3 +374,3 @@
     this.initializing = true;
-    this.initializingStartedAt = getNow();
+    this.timings.initializingStartedAt = getNow();
 
@@ -404,3 +441,3 @@ for (const attrsSchemaKey of Object.keys(this._attrsSchema)) {
       updateMode: this.getConfig(`updateSync`) ? `sync` : `async`,
-      component: this,
+      postRenderCallback: this.postRenderCallback,
     });
@@ -420,7 +457,7 @@ this.el.appendChild(this.domPatcher.el);
     this.initializing = false;
-    this.initializingCompletedAt = getNow();
+    this.timings.initializingCompletedAt = getNow();
     this.dispatchEvent(
       new CustomEvent(`componentInitialized`, {
         detail: {
-          elapsedMs: this.initializingCompletedAt - this.initializingStartedAt,
+          elapsedMs: this.timings.initializingCompletedAt - this.timings.initializingStartedAt,
           component: this.toString(),
@@ -513,2 +550,3 @@ },
   attributeChangedCallback(attr, oldVal, newVal) {
+    this.timings.lastAttributeChangedAt = getNow();
     this._updateAttr(attr);
@@ -515,0 +553,0 @@

lib/dom-patcher.js

@@ -41,3 +41,3 @@ /**
     this.vnode = this.renderFunc(this.state);
-    this.component = options.component;
+    this.postRenderCallback = options.postRenderCallback;
 
@@ -107,11 +107,4 @@ // prepare root element
     this.el = this.vnode.elm;
-    const elapsedMs = getNow() - startedAt;
-    if (this.component && elapsedMs > this.component.getConfig(`slowThreshold`)) {
-      this.component.dispatchEvent(
-        new CustomEvent(`slowRender`, {
-          detail: {elapsedMs, component: this.component.toString()},
-          bubbles: true,
-          composed: true,
-        }),
-      );
+    if (this.postRenderCallback) {
+      this.postRenderCallback(getNow() - startedAt);
     }
@@ -126,3 +119,3 @@ }
     this.el = null;
-    this.component = null;
+    this.postRenderCallback = null;
     // patch with empty vnode to clear out listeners in tree
@@ -129,0 +122,0 @@ // this ensures we don't leave dangling DetachedHTMLElements blocking GC

lib/index.d.ts

@@ -182,6 +182,12 @@ // Type definitions for panel
 
-  /** The ms since unix epoch that component initialization started (also see 'initializingCompletedAt') */
-  readonly initializingStartedAt: number;
-  /** The ms since unix epoch that component initialization completed (also see 'initializingStartedAt') */
-  readonly initializingCompletedAt: number;
+  readonly timings: {
+    /** The time in ms that the component constructor ran */
+    createdAt: number;
+    /** The time in ms that component initialization started (also see 'initializingCompletedAt') */
+    initializingStartedAt: number;
+    /** The time in ms that component initialization completed (also see 'initializingStartedAt') */
+    initializingCompletedAt: number;
+    /** The time in ms that the last attributeChangedCallback ran */
+    lastAttributeChangedAt: number;
+  };
 
@@ -188,0 +194,0 @@ /** Defines standard component configuration */

package.json

 {
   "name": "panel",
-  "version": "5.11.0-beta.0",
+  "version": "5.11.0-beta.1",
   "description": "Web Components with Virtual DOM: lightweight composable web apps",
@@ -5,0 +5,0 @@ "main": "build/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

144215

increased by1.97%

Lines of code

3297

increased by1.76%

No dependency changes