panel - npm Package Compare versions

Comparing version 5.10.0-beta.0 to 5.10.0-perf.0

build/component.js

@@ -396,2 +396,4 @@ 'use strict';
     }
+
+    _this.slowThreshold = 20;
     return _this;
@@ -413,2 +415,3 @@ }
       this.initializing = true;
+      this.initializingStartedAt = Date.now();
 
@@ -532,2 +535,8 @@ var _iteratorNormalCompletion = true;
       this.initializing = false;
+      this.initializingCompletedAt = Date.now();
+      this.dispatchEvent(new CustomEvent('componentInitialized', {
+        detail: { elapsedMs: this.initializingCompletedAt - this.initializingStartedAt, component: this },
+        bubbles: true,
+        composed: true
+      }));
     }
@@ -534,0 +543,0 @@ }, {

build/dom-patcher.js

@@ -16,2 +16,14 @@ 'use strict';
 
+var _h = require('snabbdom/h');
+
+var _h2 = _interopRequireDefault(_h);
+
+var _attributes = require('snabbdom/modules/attributes');
+
+var _attributes2 = _interopRequireDefault(_attributes);
+
+var _dataset = require('snabbdom/modules/dataset');
+
+var _dataset2 = _interopRequireDefault(_dataset);
+
 var _snabbdomDelayedClass = require('snabbdom-delayed-class');
@@ -21,2 +33,14 @@
 
+var _eventlisteners = require('snabbdom/modules/eventlisteners');
+
+var _eventlisteners2 = _interopRequireDefault(_eventlisteners);
+
+var _props = require('snabbdom/modules/props');
+
+var _props2 = _interopRequireDefault(_props);
+
+var _style = require('snabbdom/modules/style');
+
+var _style2 = _interopRequireDefault(_style);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,6 +50,6 @@
 
-var patch = (0, _snabbdom.init)([_snabbdom.datasetModule, _snabbdom.attributesModule, _snabbdom.classModule, _snabbdom.propsModule, _snabbdom.styleModule, _snabbdom.eventListenersModule, _snabbdomDelayedClass2.default]);
+var patch = (0, _snabbdom.init)([_attributes2.default, _dataset2.default, _snabbdomDelayedClass2.default, _eventlisteners2.default, _props2.default, _style2.default]);
 
-var EMPTY_DIV = exports.EMPTY_DIV = (0, _snabbdom.h)('div');
-exports.h = _snabbdom.h;
+var EMPTY_DIV = exports.EMPTY_DIV = (0, _h2.default)('div');
+exports.h = _h2.default;
 
@@ -53,5 +77,2 @@ var DOMPatcher = exports.DOMPatcher = function () {
       }).join(' ');
-      // this attribute setting ensures that svg elements behave as expected and will ensure
-      // compatibility with different snabbdom versions
-      this.el.setAttribute('class', this.el.className);
     }
@@ -107,2 +128,3 @@ if (idMatch) {
 
+      var startedAt = Date.now();
       this.rendering = true;
@@ -117,2 +139,10 @@ this.pending = false;
       this.el = this.vnode.elm;
+      var elapsedMs = Date.now() - startedAt;
+      if (elapsedMs > this.slowThreshold) {
+        this.dispatchEvent(new CustomEvent('slowRender', {
+          detail: { elapsedMs: elapsedMs, component: this },
+          bubbles: true,
+          composed: true
+        }));
+      }
     }
@@ -119,0 +149,0 @@ }, {

lib/component-utils/hook-helpers.d.ts

@@ -1,2 +0,2 @@
-import {VNode} from 'snabbdom';
+import {VNode} from 'snabbdom/vnode';
 
@@ -3,0 +3,0 @@ /**

lib/component.js

@@ -320,2 +320,4 @@ import cuid from 'cuid';
     }
+
+    this.slowThreshold = 20;
   }
@@ -334,2 +336,3 @@
     this.initializing = true;
+    this.initializingStartedAt = Date.now();
 
@@ -414,2 +417,10 @@ for (const attrsSchemaKey of Object.keys(this._attrsSchema)) {
     this.initializing = false;
+    this.initializingCompletedAt = Date.now();
+    this.dispatchEvent(
+      new CustomEvent(`componentInitialized`, {
+        detail: {elapsedMs: this.initializingCompletedAt - this.initializingStartedAt, component: this},
+        bubbles: true,
+        composed: true,
+      }),
+    );
   }
@@ -416,0 +427,0 @@

lib/dom-patcher.js

@@ -7,23 +7,19 @@ /**
 
-import {
-  init,
-  attributesModule,
-  h,
-  datasetModule,
-  eventListenersModule,
-  propsModule,
-  styleModule,
-  classModule,
-} from 'snabbdom';
+import {init as initSnabbdom} from 'snabbdom';
+import h from 'snabbdom/h';
 
+import snabbAttributes from 'snabbdom/modules/attributes';
+import snabbDataset from 'snabbdom/modules/dataset';
 import snabbDelayedClass from 'snabbdom-delayed-class';
+import snabbEventlisterners from 'snabbdom/modules/eventlisteners';
+import snabbProps from 'snabbdom/modules/props';
+import snabbStyle from 'snabbdom/modules/style';
 
-const patch = init([
-  datasetModule,
-  attributesModule,
-  classModule,
-  propsModule,
-  styleModule,
-  eventListenersModule,
+const patch = initSnabbdom([
+  snabbAttributes,
+  snabbDataset,
   snabbDelayedClass,
+  snabbEventlisterners,
+  snabbProps,
+  snabbStyle,
 ]);
@@ -49,5 +45,2 @@
       this.el.className = classMatches.map((c) => c.slice(1)).join(` `);
-      // this attribute setting ensures that svg elements behave as expected and will ensure
-      // compatibility with different snabbdom versions
-      this.el.setAttribute(`class`, this.el.className);
     }
@@ -96,2 +89,3 @@ if (idMatch) {
 
+    const startedAt = Date.now();
     this.rendering = true;
@@ -106,2 +100,12 @@ this.pending = false;
     this.el = this.vnode.elm;
+    const elapsedMs = Date.now() - startedAt;
+    if (elapsedMs > this.slowThreshold) {
+      this.dispatchEvent(
+        new CustomEvent(`slowRender`, {
+          detail: {elapsedMs, component: this},
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
   }
@@ -108,0 +112,0 @@

lib/index.d.ts

 // Type definitions for panel
 // Project: panel
 // Definitions by: Mixpanel (https://mixpanel.com)
-import {VNode} from 'snabbdom';
+import {VNode} from 'snabbdom/vnode';
 import WebComponent from 'webcomponent';
 
-export {h} from 'snabbdom';
+export {h} from 'snabbdom/h';
 export {jsx} from 'snabbdom-jsx-lite';
@@ -179,2 +179,10 @@
 
+  /** Defines the threshold at which 'slowRender' events will be dispatched, defaults to 20ms */
+  slowThreshold: number;
+
+  /** 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 */
@@ -199,3 +207,3 @@ get config(): ConfigOptions<StateT, AppStateT, ContextRegistryT>;
    */
-  child(tagName: string, config?: object): VNode;
+  child<T = object>(tagName: string, config?: T): VNode;
 
@@ -202,0 +210,0 @@ /**

package.json

 {
   "name": "panel",
-  "version": "5.10.0-beta.0",
+  "version": "5.10.0-perf.0",
   "description": "Web Components with Virtual DOM: lightweight composable web apps",
@@ -53,5 +53,5 @@ "main": "build/index.js",
     "schema-utils": "1.0.0",
-    "snabbdom": "3.0.3",
+    "snabbdom": "0.7.4",
     "snabbdom-delayed-class": "0.1.1",
-    "snabbdom-jsx-lite": "2.0.0",
+    "snabbdom-jsx-lite": "1.0.11",
     "webcomponent": "1.2.2"
@@ -58,0 +58,0 @@ },

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

140476

increased by1.55%

Lines of code

3202

increased by1.46%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedsnabbdom@0.7.4(transitive)

• + Addedsnabbdom-jsx-lite@1.0.11(transitive)

• - Removedsnabbdom@3.0.3(transitive)

• - Removedsnabbdom-jsx-lite@2.0.0(transitive)

• Updatedsnabbdom@0.7.4

• Updatedsnabbdom-jsx-lite@1.0.11