perfume.js - npm Package Compare versions

Comparing version 0.6.2 to 0.6.3

CHANGELOG.md

 # Changelog
 
+## 0.6.3 (2018-3-5)
+
+### Bug Fixes
+
+* **start/end:** Fixed support performance.measure in Safari
+
+
 ## 0.6.2 (2018-3-3)
@@ -4,0 +11,0 @@

dist/es/emulated-performance.js

@@ -18,3 +18,3 @@ var EmulatedPerformance = /** @class */ (function () {
     EmulatedPerformance.prototype.mark = function (metricName, type) {
-        global.console.warn(this.config.logPrefix, "Timeline won't be marked for \"" + metricName + "\".");
+        // Timeline won't be marked
     };
@@ -50,3 +50,3 @@ /**
         var duration = metrics[metricName].end - metrics[metricName].start;
-        return duration || -1;
+        return duration || 0;
     };
@@ -53,0 +53,0 @@ /**

dist/es/performance.js

@@ -10,2 +10,4 @@ import ttiPolyfill from "tti-polyfill";
      * User Timing API and the PerformanceObserver Interface.
+     * In Safari, the User Timing API (performance.mark()) is not available,
+     * so the DevTools timeline will not be annotated with marks.
      * Support: developer.mozilla.org/en-US/docs/Web/API/Performance/mark
@@ -22,2 +24,12 @@ * Support: developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
     /**
+     * For now only Chrome fully support the PerformanceObserver interface
+     * and the entryType "paint".
+     * Firefox 58: https://bugzilla.mozilla.org/show_bug.cgi?id=1403027
+     *
+     * @type {boolean}
+     */
+    Performance.supportedPerformanceObserver = function () {
+        return window.chrome;
+    };
+    /**
      * True if the browser supports the PerformanceLongTaskTiming interface.
@@ -69,4 +81,4 @@ * Support: developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming
     Performance.prototype.firstContentfulPaint = function (cb) {
-        var observer = new PerformanceObserver(this.performanceObserverCb.bind(this, cb));
-        observer.observe({ entryTypes: ["paint"] });
+        this.perfObserver = new PerformanceObserver(this.performanceObserverCb.bind(this, cb));
+        this.perfObserver.observe({ entryTypes: ["paint"] });
     };
@@ -101,7 +113,9 @@ /**
     Performance.prototype.performanceObserverCb = function (cb, entryList) {
-        for (var _i = 0, _a = entryList.getEntries(); _i < _a.length; _i++) {
-            var performancePaintTiming = _a[_i];
-            if (performancePaintTiming.name === "first-contentful-paint") {
-                cb(performancePaintTiming);
-            }
+        var entries = entryList.getEntries()
+            .filter(function (performancePaintTiming) {
+            return performancePaintTiming.name === "first-contentful-paint";
+        });
+        if (entries.length) {
+            cb(entries[0]);
+            this.perfObserver.disconnect();
         }
@@ -108,0 +122,0 @@ };

dist/es/perfume.js

@@ -24,3 +24,9 @@ import EmulatedPerformance from "./emulated-performance";
         // Init First Contentful Paint
-        this.perf.firstContentfulPaint(this.firstContentfulPaintCb.bind(this));
+        if (Performance.supportedPerformanceObserver()) {
+            this.perf.firstContentfulPaint(this.firstContentfulPaintCb.bind(this));
+        }
+        else {
+            this.perfEmulated = new EmulatedPerformance();
+            this.perfEmulated.firstContentfulPaint(this.firstContentfulPaintCb.bind(this));
+        }
     }
@@ -90,4 +96,4 @@ /**
     Perfume.prototype.log = function (metricName, duration) {
-        if (!metricName || !duration) {
-            global.console.warn(this.config.logPrefix, "Please provide a metric name and the duration value");
+        if (!metricName) {
+            global.console.warn(this.config.logPrefix, "Please provide a metric name");
             return;
@@ -118,2 +124,3 @@ }
         if (Performance.supported()
+            && Performance.supportedPerformanceObserver()
             && Performance.supportedLongTask()
@@ -120,0 +127,0 @@ && this.config.timeToInteractive) {

dist/lib/emulated-performance.js

@@ -20,3 +20,3 @@ "use strict";
     EmulatedPerformance.prototype.mark = function (metricName, type) {
-        global.console.warn(this.config.logPrefix, "Timeline won't be marked for \"" + metricName + "\".");
+        // Timeline won't be marked
     };
@@ -52,3 +52,3 @@ /**
         var duration = metrics[metricName].end - metrics[metricName].start;
-        return duration || -1;
+        return duration || 0;
     };
@@ -55,0 +55,0 @@ /**

dist/lib/performance.js

@@ -12,2 +12,4 @@ "use strict";
      * User Timing API and the PerformanceObserver Interface.
+     * In Safari, the User Timing API (performance.mark()) is not available,
+     * so the DevTools timeline will not be annotated with marks.
      * Support: developer.mozilla.org/en-US/docs/Web/API/Performance/mark
@@ -24,2 +26,12 @@ * Support: developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
     /**
+     * For now only Chrome fully support the PerformanceObserver interface
+     * and the entryType "paint".
+     * Firefox 58: https://bugzilla.mozilla.org/show_bug.cgi?id=1403027
+     *
+     * @type {boolean}
+     */
+    Performance.supportedPerformanceObserver = function () {
+        return window.chrome;
+    };
+    /**
      * True if the browser supports the PerformanceLongTaskTiming interface.
@@ -71,4 +83,4 @@ * Support: developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming
     Performance.prototype.firstContentfulPaint = function (cb) {
-        var observer = new PerformanceObserver(this.performanceObserverCb.bind(this, cb));
-        observer.observe({ entryTypes: ["paint"] });
+        this.perfObserver = new PerformanceObserver(this.performanceObserverCb.bind(this, cb));
+        this.perfObserver.observe({ entryTypes: ["paint"] });
     };
@@ -103,7 +115,9 @@ /**
     Performance.prototype.performanceObserverCb = function (cb, entryList) {
-        for (var _i = 0, _a = entryList.getEntries(); _i < _a.length; _i++) {
-            var performancePaintTiming = _a[_i];
-            if (performancePaintTiming.name === "first-contentful-paint") {
-                cb(performancePaintTiming);
-            }
+        var entries = entryList.getEntries()
+            .filter(function (performancePaintTiming) {
+            return performancePaintTiming.name === "first-contentful-paint";
+        });
+        if (entries.length) {
+            cb(entries[0]);
+            this.perfObserver.disconnect();
         }
@@ -110,0 +124,0 @@ };

dist/lib/perfume.js

@@ -26,3 +26,9 @@ "use strict";
         // Init First Contentful Paint
-        this.perf.firstContentfulPaint(this.firstContentfulPaintCb.bind(this));
+        if (performance_1.default.supportedPerformanceObserver()) {
+            this.perf.firstContentfulPaint(this.firstContentfulPaintCb.bind(this));
+        }
+        else {
+            this.perfEmulated = new emulated_performance_1.default();
+            this.perfEmulated.firstContentfulPaint(this.firstContentfulPaintCb.bind(this));
+        }
     }
@@ -92,4 +98,4 @@ /**
     Perfume.prototype.log = function (metricName, duration) {
-        if (!metricName || !duration) {
-            global.console.warn(this.config.logPrefix, "Please provide a metric name and the duration value");
+        if (!metricName) {
+            global.console.warn(this.config.logPrefix, "Please provide a metric name");
             return;
@@ -120,2 +126,3 @@ }
         if (performance_1.default.supported()
+            && performance_1.default.supportedPerformanceObserver()
             && performance_1.default.supportedLongTask()
@@ -122,0 +129,0 @@ && this.config.timeToInteractive) {

dist/perfume.es5.js

@@ -18,3 +18,3 @@ var EmulatedPerformance = /** @class */ (function () {
     EmulatedPerformance.prototype.mark = function (metricName, type) {
-        global.console.warn(this.config.logPrefix, "Timeline won't be marked for \"" + metricName + "\".");
+        // Timeline won't be marked
     };
@@ -50,3 +50,3 @@ /**
         var duration = metrics[metricName].end - metrics[metricName].start;
-        return duration || -1;
+        return duration || 0;
     };
@@ -110,2 +110,4 @@ /**
      * User Timing API and the PerformanceObserver Interface.
+     * In Safari, the User Timing API (performance.mark()) is not available,
+     * so the DevTools timeline will not be annotated with marks.
      * Support: developer.mozilla.org/en-US/docs/Web/API/Performance/mark
@@ -122,2 +124,12 @@ * Support: developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
     /**
+     * For now only Chrome fully support the PerformanceObserver interface
+     * and the entryType "paint".
+     * Firefox 58: https://bugzilla.mozilla.org/show_bug.cgi?id=1403027
+     *
+     * @type {boolean}
+     */
+    Performance.supportedPerformanceObserver = function () {
+        return window.chrome;
+    };
+    /**
      * True if the browser supports the PerformanceLongTaskTiming interface.
@@ -169,4 +181,4 @@ * Support: developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming
     Performance.prototype.firstContentfulPaint = function (cb) {
-        var observer = new PerformanceObserver(this.performanceObserverCb.bind(this, cb));
-        observer.observe({ entryTypes: ["paint"] });
+        this.perfObserver = new PerformanceObserver(this.performanceObserverCb.bind(this, cb));
+        this.perfObserver.observe({ entryTypes: ["paint"] });
     };
@@ -201,7 +213,9 @@ /**
     Performance.prototype.performanceObserverCb = function (cb, entryList) {
-        for (var _i = 0, _a = entryList.getEntries(); _i < _a.length; _i++) {
-            var performancePaintTiming = _a[_i];
-            if (performancePaintTiming.name === "first-contentful-paint") {
-                cb(performancePaintTiming);
-            }
+        var entries = entryList.getEntries()
+            .filter(function (performancePaintTiming) {
+            return performancePaintTiming.name === "first-contentful-paint";
+        });
+        if (entries.length) {
+            cb(entries[0]);
+            this.perfObserver.disconnect();
         }
@@ -250,3 +264,9 @@ };
         // Init First Contentful Paint
-        this.perf.firstContentfulPaint(this.firstContentfulPaintCb.bind(this));
+        if (Performance.supportedPerformanceObserver()) {
+            this.perf.firstContentfulPaint(this.firstContentfulPaintCb.bind(this));
+        }
+        else {
+            this.perfEmulated = new EmulatedPerformance();
+            this.perfEmulated.firstContentfulPaint(this.firstContentfulPaintCb.bind(this));
+        }
     }
@@ -316,4 +336,4 @@ /**
     Perfume.prototype.log = function (metricName, duration) {
-        if (!metricName || !duration) {
-            global.console.warn(this.config.logPrefix, "Please provide a metric name and the duration value");
+        if (!metricName) {
+            global.console.warn(this.config.logPrefix, "Please provide a metric name");
             return;
@@ -344,2 +364,3 @@ }
         if (Performance.supported()
+            && Performance.supportedPerformanceObserver()
             && Performance.supportedLongTask()
@@ -346,0 +367,0 @@ && this.config.timeToInteractive) {

dist/perfume.umd.js

@@ -24,3 +24,3 @@ (function (global, factory) {
     EmulatedPerformance.prototype.mark = function (metricName, type) {
-        global.console.warn(this.config.logPrefix, "Timeline won't be marked for \"" + metricName + "\".");
+        // Timeline won't be marked
     };
@@ -56,3 +56,3 @@ /**
         var duration = metrics[metricName].end - metrics[metricName].start;
-        return duration || -1;
+        return duration || 0;
     };
@@ -116,2 +116,4 @@ /**
      * User Timing API and the PerformanceObserver Interface.
+     * In Safari, the User Timing API (performance.mark()) is not available,
+     * so the DevTools timeline will not be annotated with marks.
      * Support: developer.mozilla.org/en-US/docs/Web/API/Performance/mark
@@ -128,2 +130,12 @@ * Support: developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
     /**
+     * For now only Chrome fully support the PerformanceObserver interface
+     * and the entryType "paint".
+     * Firefox 58: https://bugzilla.mozilla.org/show_bug.cgi?id=1403027
+     *
+     * @type {boolean}
+     */
+    Performance.supportedPerformanceObserver = function () {
+        return window.chrome;
+    };
+    /**
      * True if the browser supports the PerformanceLongTaskTiming interface.
@@ -175,4 +187,4 @@ * Support: developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming
     Performance.prototype.firstContentfulPaint = function (cb) {
-        var observer = new PerformanceObserver(this.performanceObserverCb.bind(this, cb));
-        observer.observe({ entryTypes: ["paint"] });
+        this.perfObserver = new PerformanceObserver(this.performanceObserverCb.bind(this, cb));
+        this.perfObserver.observe({ entryTypes: ["paint"] });
     };
@@ -207,7 +219,9 @@ /**
     Performance.prototype.performanceObserverCb = function (cb, entryList) {
-        for (var _i = 0, _a = entryList.getEntries(); _i < _a.length; _i++) {
-            var performancePaintTiming = _a[_i];
-            if (performancePaintTiming.name === "first-contentful-paint") {
-                cb(performancePaintTiming);
-            }
+        var entries = entryList.getEntries()
+            .filter(function (performancePaintTiming) {
+            return performancePaintTiming.name === "first-contentful-paint";
+        });
+        if (entries.length) {
+            cb(entries[0]);
+            this.perfObserver.disconnect();
         }
@@ -256,3 +270,9 @@ };
         // Init First Contentful Paint
-        this.perf.firstContentfulPaint(this.firstContentfulPaintCb.bind(this));
+        if (Performance.supportedPerformanceObserver()) {
+            this.perf.firstContentfulPaint(this.firstContentfulPaintCb.bind(this));
+        }
+        else {
+            this.perfEmulated = new EmulatedPerformance();
+            this.perfEmulated.firstContentfulPaint(this.firstContentfulPaintCb.bind(this));
+        }
     }
@@ -322,4 +342,4 @@ /**
     Perfume.prototype.log = function (metricName, duration) {
-        if (!metricName || !duration) {
-            global.console.warn(this.config.logPrefix, "Please provide a metric name and the duration value");
+        if (!metricName) {
+            global.console.warn(this.config.logPrefix, "Please provide a metric name");
             return;
@@ -350,2 +370,3 @@ }
         if (Performance.supported()
+            && Performance.supportedPerformanceObserver()
             && Performance.supportedLongTask()
@@ -352,0 +373,0 @@ && this.config.timeToInteractive) {

dist/types/performance.d.ts

 import PerformImpl from "./performance-impl";
+declare global  {
+    interface Window {
+        chrome: any;
+    }
+}
 export default class Performance implements PerformImpl {
@@ -6,2 +11,4 @@ /**
      * User Timing API and the PerformanceObserver Interface.
+     * In Safari, the User Timing API (performance.mark()) is not available,
+     * so the DevTools timeline will not be annotated with marks.
      * Support: developer.mozilla.org/en-US/docs/Web/API/Performance/mark
@@ -14,2 +21,10 @@ * Support: developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
     /**
+     * For now only Chrome fully support the PerformanceObserver interface
+     * and the entryType "paint".
+     * Firefox 58: https://bugzilla.mozilla.org/show_bug.cgi?id=1403027
+     *
+     * @type {boolean}
+     */
+    static supportedPerformanceObserver(): boolean;
+    /**
      * True if the browser supports the PerformanceLongTaskTiming interface.
@@ -24,2 +39,3 @@ * Support: developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming
     private ttiPolyfill;
+    private perfObserver;
     constructor();
@@ -43,3 +59,3 @@ /**
      */
-    measure(metricName: string, metrics: object): number;
+    measure(metricName: string, metrics: object): any;
     /**
@@ -54,3 +70,3 @@ * First Paint is essentially the paint after which
      */
-    firstContentfulPaint(cb: any): void;
+    firstContentfulPaint(cb: any): any;
     /**
@@ -57,0 +73,0 @@ * Get the duration of the timing metric or -1 if there a measurement has

dist/types/perfume.d.ts

@@ -22,2 +22,3 @@ declare global  {
     private perf;
+    private perfEmulated;
     constructor(options?: any);
@@ -24,0 +25,0 @@ /**

package.json

 {
   "name": "perfume.js",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "JavaScript library for measuring Short and Long Script, First Contentful Paint (FCP), Time to Interactive (TTI), Component First Paint (CFM), annotating them to the DevTools timeline and reporting the results to Google Analytics.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -1,4 +0,4 @@
-<a href="http://zizzamia.github.io/perfume/"><img src="https://github.com/Zizzamia/perfume.js/blob/master/docs/src/assets/perfume-logo-v0-5-0.png" align="left" width="262" /></a>
+<a href="http://zizzamia.github.io/perfume/"><img src="https://github.com/Zizzamia/perfume.js/blob/master/docs/src/assets/perfume-logo-v0-6-3.png" align="left" width="262" /></a>
 
-# [Perfume.js v0.6.2](http://zizzamia.github.io/perfume/)
+# [Perfume.js v0.6.3](http://zizzamia.github.io/perfume/)
 [![NPM version](https://badge.fury.io/js/perfume.js.svg)](https://www.npmjs.org/package/perfume.js) [![Build Status](https://travis-ci.org/Zizzamia/perfume.js.svg?branch=master)](https://travis-ci.org/Zizzamia/perfume.js) [![NPM Downloads](http://img.shields.io/npm/dm/perfume.js.svg)](https://www.npmjs.org/package/perfume.js) [![Test Coverage](https://api.codeclimate.com/v1/badges/f813d2f45b274d93b8c5/test_coverage)](https://codeclimate.com/github/Zizzamia/perfume.js/test_coverage)
@@ -93,5 +93,5 @@
 perfume.start('fibonacci');
-fibonacci(800);
+fibonacci(400);
 perfume.end('fibonacci');
-// ⚡️ Perfume.js: fibonacci 0.30 ms
+// ⚡️ Perfume.js: fibonacci 0.14 ms
 ```
@@ -121,6 +121,6 @@ ![Performance Mark](https://github.com/Zizzamia/perfume.js/blob/master/docs/src/assets/performance-mark.png)
 perfume.start('fibonacci');
-fibonacci(800);
+fibonacci(400);
 const duration = this.perfume.end('fibonacci');
 perfume.log('Custom logging', duration);
-// 🍻 Beerjs: Custom logging 0.30 ms
+// 🍻 Beerjs: Custom logging 0.14 ms
 ```
@@ -127,0 +127,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

Improved metrics

Total package byte prevSize

218297

increased by3.05%

Lines of code

1822

increased by5.87%

No dependency changes