panel - npm Package Compare versions

Comparing version 5.10.0 to 5.11.0-beta.0

build/component.js

@@ -27,2 +27,4 @@ 'use strict';
 
+var _perf = require('./component-utils/perf');
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -369,3 +371,4 @@
       updateSync: false,
-      useShadowDom: false
+      useShadowDom: false,
+      slowThreshold: 20
     }, _this.config);
@@ -414,2 +417,3 @@
       this.initializing = true;
+      this.initializingStartedAt = (0, _perf.getNow)();
 
@@ -518,3 +522,4 @@ var _iteratorNormalCompletion = true;
       this.domPatcher = new _domPatcher.DOMPatcher(this.state, this._render.bind(this), {
-        updateMode: this.getConfig('updateSync') ? 'sync' : 'async'
+        updateMode: this.getConfig('updateSync') ? 'sync' : 'async',
+        component: this
       });
@@ -534,2 +539,11 @@ this.el.appendChild(this.domPatcher.el);
       this.initializing = false;
+      this.initializingCompletedAt = (0, _perf.getNow)();
+      this.dispatchEvent(new CustomEvent('componentInitialized', {
+        detail: {
+          elapsedMs: this.initializingCompletedAt - this.initializingStartedAt,
+          component: this.toString()
+        },
+        bubbles: true,
+        composed: true
+      }));
     }
@@ -536,0 +550,0 @@ }, {

build/dom-patcher.js

@@ -20,2 +20,4 @@ 'use strict';
 
+var _perf = require('./component-utils/perf');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,2 +43,3 @@
     this.vnode = this.renderFunc(this.state);
+    this.component = options.component;
 
@@ -105,2 +108,3 @@ // prepare root element
 
+      var startedAt = (0, _perf.getNow)();
       this.rendering = true;
@@ -115,2 +119,10 @@ this.pending = false;
       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
+        }));
+      }
     }
@@ -125,2 +137,3 @@ }, {
       this.el = null;
+      this.component = null;
       // patch with empty vnode to clear out listeners in tree
@@ -127,0 +140,0 @@ // this ensures we don't leave dangling DetachedHTMLElements blocking GC

lib/component.js

@@ -7,2 +7,3 @@ import cuid from 'cuid';
 import * as hookHelpers from './component-utils/hook-helpers';
+import {getNow} from './component-utils/perf';
 
@@ -292,2 +293,3 @@ const DOCUMENT_FRAGMENT_NODE = 11;
         useShadowDom: false,
+        slowThreshold: 20,
       },
@@ -335,2 +337,3 @@ this.config,
     this.initializing = true;
+    this.initializingStartedAt = getNow();
 
@@ -401,2 +404,3 @@ for (const attrsSchemaKey of Object.keys(this._attrsSchema)) {
       updateMode: this.getConfig(`updateSync`) ? `sync` : `async`,
+      component: this,
     });
@@ -416,2 +420,13 @@ this.el.appendChild(this.domPatcher.el);
     this.initializing = false;
+    this.initializingCompletedAt = getNow();
+    this.dispatchEvent(
+      new CustomEvent(`componentInitialized`, {
+        detail: {
+          elapsedMs: this.initializingCompletedAt - this.initializingStartedAt,
+          component: this.toString(),
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
   }
@@ -418,0 +433,0 @@

lib/dom-patcher.js

@@ -19,2 +19,3 @@ /**
 import delayedClassModule from 'snabbdom-delayed-class';
+import {getNow} from './component-utils/perf';
 
@@ -41,2 +42,3 @@ const patch = initSnabbdom([
     this.vnode = this.renderFunc(this.state);
+    this.component = options.component;
 
@@ -96,2 +98,3 @@ // prepare root element
 
+    const startedAt = getNow();
     this.rendering = true;
@@ -106,2 +109,12 @@ this.pending = false;
     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,
+        }),
+      );
+    }
   }
@@ -115,2 +128,3 @@
     this.el = null;
+    this.component = null;
     // patch with empty vnode to clear out listeners in tree
@@ -117,0 +131,0 @@ // this ensures we don't leave dangling DetachedHTMLElements blocking GC

lib/index.d.ts

@@ -110,2 +110,5 @@ // Type definitions for panel
   useShadowDom?: boolean;
+
+  /** Defines the threshold at which 'slowRender' events will be dispatched, defaults to 20ms */
+  slowThreshold?: number;
 }
@@ -180,2 +183,7 @@
 
+  /** 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;
+
   /** Defines standard component configuration */
@@ -200,3 +208,3 @@ get config(): ConfigOptions<StateT, AppStateT, ContextRegistryT>;
    */
-  child(tagName: string, config?: object): VNode;
+  child<T = object>(tagName: string, config?: T): VNode;
 
@@ -203,0 +211,0 @@ /**

package.json

 {
   "name": "panel",
-  "version": "5.10.0",
+  "version": "5.11.0-beta.0",
   "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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

141429

increased by2.23%

Number of package files

29

increased by7.41%

Lines of code

3240

increased by2.66%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes