@shopify/react-performance - npm Package Compare versions

Comparing version 1.4.3 to 1.4.4

build/ts/context.js

@@ -1,7 +0,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PerformanceContext = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
-var performance_1 = require("@shopify/performance");
-exports.PerformanceContext = react_1.default.createContext(typeof window === 'undefined' ? null : new performance_1.Performance());
+import React from 'react';
+import { Performance } from '@shopify/performance';
+export const PerformanceContext = React.createContext(typeof window === 'undefined' ? null : new Performance());

build/ts/index.js

@@ -1,26 +0,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("@shopify/performance"), exports);
-var context_1 = require("./context");
-Object.defineProperty(exports, "PerformanceContext", { enumerable: true, get: function () { return context_1.PerformanceContext; } });
-var performance_effect_1 = require("./performance-effect");
-Object.defineProperty(exports, "usePerformanceEffect", { enumerable: true, get: function () { return performance_effect_1.usePerformanceEffect; } });
-var PerformanceMark_1 = require("./PerformanceMark");
-Object.defineProperty(exports, "PerformanceMark", { enumerable: true, get: function () { return PerformanceMark_1.PerformanceMark; } });
-var performance_mark_1 = require("./performance-mark");
-Object.defineProperty(exports, "usePerformanceMark", { enumerable: true, get: function () { return performance_mark_1.usePerformanceMark; } });
-var LifecycleEventListener_1 = require("./LifecycleEventListener");
-Object.defineProperty(exports, "LifecycleEventListener", { enumerable: true, get: function () { return LifecycleEventListener_1.LifecycleEventListener; } });
-var lifecycle_event_listener_1 = require("./lifecycle-event-listener");
-Object.defineProperty(exports, "useLifecycleEventListener", { enumerable: true, get: function () { return lifecycle_event_listener_1.useLifecycleEventListener; } });
-var NavigationListener_1 = require("./NavigationListener");
-Object.defineProperty(exports, "NavigationListener", { enumerable: true, get: function () { return NavigationListener_1.NavigationListener; } });
-var navigation_listener_1 = require("./navigation-listener");
-Object.defineProperty(exports, "useNavigationListener", { enumerable: true, get: function () { return navigation_listener_1.useNavigationListener; } });
-var PerformanceReport_1 = require("./PerformanceReport");
-Object.defineProperty(exports, "PerformanceReport", { enumerable: true, get: function () { return PerformanceReport_1.PerformanceReport; } });
-var performance_report_1 = require("./performance-report");
-Object.defineProperty(exports, "usePerformanceReport", { enumerable: true, get: function () { return performance_report_1.usePerformanceReport; } });
-var types_1 = require("./types");
-Object.defineProperty(exports, "Stage", { enumerable: true, get: function () { return types_1.Stage; } });
+export * from '@shopify/performance';
+export { PerformanceContext } from './context';
+export { usePerformanceEffect } from './performance-effect';
+export { PerformanceMark } from './PerformanceMark';
+export { usePerformanceMark } from './performance-mark';
+export { LifecycleEventListener } from './LifecycleEventListener';
+export { useLifecycleEventListener } from './lifecycle-event-listener';
+export { NavigationListener } from './NavigationListener';
+export { useNavigationListener } from './navigation-listener';
+export { PerformanceReport } from './PerformanceReport';
+export { usePerformanceReport } from './performance-report';
+export { Stage } from './types';

build/ts/lifecycle-event-listener.js

@@ -1,10 +0,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLifecycleEventListener = void 0;
-var performance_effect_1 = require("./performance-effect");
-function useLifecycleEventListener(listener) {
-    performance_effect_1.usePerformanceEffect(function (performance) {
-        return performance.on('lifecycleEvent', listener);
-    });
+import { usePerformanceEffect } from './performance-effect';
+export function useLifecycleEventListener(listener) {
+    usePerformanceEffect(performance => performance.on('lifecycleEvent', listener));
 }
-exports.useLifecycleEventListener = useLifecycleEventListener;

build/ts/LifecycleEventListener.js

@@ -1,10 +0,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LifecycleEventListener = void 0;
-var lifecycle_event_listener_1 = require("./lifecycle-event-listener");
-function LifecycleEventListener(_a) {
-    var onEvent = _a.onEvent;
-    lifecycle_event_listener_1.useLifecycleEventListener(onEvent);
+import { useLifecycleEventListener, } from './lifecycle-event-listener';
+export function LifecycleEventListener({ onEvent, }) {
+    useLifecycleEventListener(onEvent);
     return null;
 }
-exports.LifecycleEventListener = LifecycleEventListener;

build/ts/navigation-listener.js

@@ -1,8 +0,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useNavigationListener = void 0;
-var performance_effect_1 = require("./performance-effect");
-function useNavigationListener(listener) {
-    performance_effect_1.usePerformanceEffect(function (performance) { return performance.on('navigation', listener); });
+import { usePerformanceEffect } from './performance-effect';
+export function useNavigationListener(listener) {
+    usePerformanceEffect(performance => performance.on('navigation', listener));
 }
-exports.useNavigationListener = useNavigationListener;

build/ts/NavigationListener.js

@@ -1,10 +0,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationListener = void 0;
-var navigation_listener_1 = require("./navigation-listener");
-function NavigationListener(_a) {
-    var onNavigation = _a.onNavigation;
-    navigation_listener_1.useNavigationListener(onNavigation);
+import { useNavigationListener, } from './navigation-listener';
+export function NavigationListener({ onNavigation, }) {
+    useNavigationListener(onNavigation);
     return null;
 }
-exports.NavigationListener = NavigationListener;

build/ts/performance-effect.js

@@ -1,15 +0,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePerformanceEffect = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var context_1 = require("./context");
-function usePerformanceEffect(callback, dependencies) {
-    if (dependencies === void 0) { dependencies = []; }
-    var performance = react_1.useContext(context_1.PerformanceContext);
-    react_1.useEffect(function () {
+import { useContext, useEffect } from 'react';
+import { PerformanceContext } from './context';
+export function usePerformanceEffect(callback, dependencies = []) {
+    const performance = useContext(PerformanceContext);
+    useEffect(() => {
         if (performance == null) {
             return;
         }
-        var cleanup = callback(performance);
+        const cleanup = callback(performance);
         if (cleanup) {
@@ -19,4 +14,3 @@ return cleanup;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, tslib_1.__spread([performance], dependencies));
+    }, [performance, ...dependencies]);
 }
-exports.usePerformanceEffect = usePerformanceEffect;

build/ts/performance-mark.js

@@ -1,12 +0,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePerformanceMark = void 0;
-var performance_effect_1 = require("./performance-effect");
-var types_1 = require("./types");
-function usePerformanceMark(stage, id) {
-    performance_effect_1.usePerformanceEffect(function (performance) {
-        if (stage === types_1.Stage.Complete) {
+import { usePerformanceEffect } from './performance-effect';
+import { Stage } from './types';
+export function usePerformanceMark(stage, id) {
+    usePerformanceEffect(performance => {
+        if (stage === Stage.Complete) {
             performance.finish();
         }
-        else if (stage === types_1.Stage.Usable) {
+        else if (stage === Stage.Usable) {
             performance.usable();
@@ -17,2 +14,1 @@ }
 }
-exports.usePerformanceMark = usePerformanceMark;

build/ts/performance-report.js

@@ -1,83 +0,63 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePerformanceReport = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var network_1 = require("@shopify/network");
-var navigation_listener_1 = require("./navigation-listener");
-var lifecycle_event_listener_1 = require("./lifecycle-event-listener");
-function usePerformanceReport(url, _a) {
-    var _this = this;
-    var _b = _a === void 0 ? {} : _a, _c = _b.locale, locale = _c === void 0 ? undefined : _c, _d = _b.onError, onError = _d === void 0 ? noop : _d;
-    var navigations = react_1.useRef([]);
-    var events = react_1.useRef([]);
-    var timeout = react_1.useRef();
-    var sendReport = react_1.useCallback(function () {
+import { useRef, useCallback } from 'react';
+import { Header, Method } from '@shopify/network';
+import { useNavigationListener } from './navigation-listener';
+import { useLifecycleEventListener } from './lifecycle-event-listener';
+export function usePerformanceReport(url, { locale = undefined, onError = noop, } = {}) {
+    const navigations = useRef([]);
+    const events = useRef([]);
+    const timeout = useRef();
+    const sendReport = useCallback(() => {
         if (timeout.current != null) {
             return;
         }
-        timeout.current = setTimeout(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-            var error_1;
-            var _a;
-            return tslib_1.__generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (timeout.current) {
-                            clearTimeout(timeout.current);
-                            timeout.current = undefined;
-                        }
-                        _b.label = 1;
-                    case 1:
-                        _b.trys.push([1, 3, 4, 5]);
-                        return [4 /*yield*/, fetch(url, {
-                                method: network_1.Method.Post,
-                                headers: (_a = {},
-                                    _a[network_1.Header.ContentType] = 'application/json',
-                                    _a),
-                                body: JSON.stringify({
-                                    connection: serializableClone(navigator.connection),
-                                    events: events.current,
-                                    navigations: navigations.current.map(function (navigation) { return ({
-                                        details: navigation.toJSON({ removeEventMetadata: false }),
-                                        metadata: navigation.metadata,
-                                    }); }),
-                                    pathname: window.location.pathname,
-                                    locale: locale,
-                                }),
-                            })];
-                    case 2:
-                        _b.sent();
-                        return [3 /*break*/, 5];
-                    case 3:
-                        error_1 = _b.sent();
-                        if (onError) {
-                            onError(error_1);
-                        }
-                        return [3 /*break*/, 5];
-                    case 4:
-                        events.current = [];
-                        navigations.current = [];
-                        return [7 /*endfinally*/];
-                    case 5: return [2 /*return*/];
+        timeout.current = setTimeout(async () => {
+            if (timeout.current) {
+                clearTimeout(timeout.current);
+                timeout.current = undefined;
+            }
+            try {
+                await fetch(url, {
+                    method: Method.Post,
+                    headers: {
+                        [Header.ContentType]: 'application/json',
+                    },
+                    body: JSON.stringify({
+                        connection: serializableClone(navigator.connection),
+                        events: events.current,
+                        navigations: navigations.current.map(navigation => ({
+                            details: navigation.toJSON({ removeEventMetadata: false }),
+                            metadata: navigation.metadata,
+                        })),
+                        pathname: window.location.pathname,
+                        locale,
+                    }),
+                });
+            }
+            catch (error) {
+                if (onError) {
+                    onError(error);
                 }
-            });
-        }); }, 1000);
+            }
+            finally {
+                events.current = [];
+                navigations.current = [];
+            }
+        }, 1000);
     }, [locale, onError, url]);
-    var onNavigation = react_1.useCallback(function (navigation) {
+    const onNavigation = useCallback((navigation) => {
         navigations.current.push(navigation);
         sendReport();
     }, [sendReport]);
-    var onLifeCycleEvent = react_1.useCallback(function (event) {
+    const onLifeCycleEvent = useCallback((event) => {
         events.current.push(event);
         sendReport();
     }, [sendReport]);
-    navigation_listener_1.useNavigationListener(onNavigation);
-    lifecycle_event_listener_1.useLifecycleEventListener(onLifeCycleEvent);
+    useNavigationListener(onNavigation);
+    useLifecycleEventListener(onLifeCycleEvent);
 }
-exports.usePerformanceReport = usePerformanceReport;
 function serializableClone(object) {
-    var output = {};
+    const output = {};
     // We explicitly want to copy the inherited properties
     // eslint-disable-next-line guard-for-in
-    for (var key in object) {
+    for (const key in object) {
         output[key] = object[key];
@@ -84,0 +64,0 @@ }

build/ts/PerformanceMark.js

@@ -1,10 +0,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PerformanceMark = void 0;
-var performance_mark_1 = require("./performance-mark");
-function PerformanceMark(_a) {
-    var stage = _a.stage, id = _a.id;
-    performance_mark_1.usePerformanceMark(stage, id);
+import { usePerformanceMark } from './performance-mark';
+export function PerformanceMark({ stage, id }) {
+    usePerformanceMark(stage, id);
     return null;
 }
-exports.PerformanceMark = PerformanceMark;

build/ts/PerformanceReport.js

@@ -1,10 +0,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PerformanceReport = void 0;
-var performance_report_1 = require("./performance-report");
-function PerformanceReport(_a) {
-    var url = _a.url, onError = _a.onError, locale = _a.locale;
-    performance_report_1.usePerformanceReport(url, { onError: onError, locale: locale });
+import { usePerformanceReport } from './performance-report';
+export function PerformanceReport({ url, onError, locale }) {
+    usePerformanceReport(url, { onError, locale });
     return null;
 }
-exports.PerformanceReport = PerformanceReport;

build/ts/types.js

@@ -1,8 +0,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Stage = void 0;
-var Stage;
+export var Stage;
 (function (Stage) {
     Stage["Complete"] = "complete";
     Stage["Usable"] = "usable";
-})(Stage = exports.Stage || (exports.Stage = {}));
+})(Stage || (Stage = {}));

CHANGELOG.md

@@ -8,4 +8,12 @@ # Changelog
 
-## [1.4.2] - 2021-03-03
+<!-- ## Unreleased -->
 
+## 1.4.4 - 2021-04-13
+
+### Changed
+
+- Removed dependency on tslib, as we no-longer compile with `tsc`. [#1829](https://github.com/Shopify/quilt/pull/1829)
+
+## 1.4.2 - 2021-03-03
+
 ### Fixed
@@ -15,3 +23,3 @@
 
-## [1.4.0] - 2020-12-18
+## 1.4.0 - 2020-12-18
 
@@ -22,7 +30,7 @@ ### Added
 
-## [1.3.7] - 2020-10-20
+## 1.3.7 - 2020-10-20
 
 - Added `tslib@^1.14.1` in the list of dependencies. [#1657](https://github.com/Shopify/quilt/pull/1657)
 
-## [1.3.0] - 2020-02-05
+## 1.3.0 - 2020-02-05
 
@@ -33,3 +41,3 @@ ### Added
 
-## [1.2.0] - 2019-10-25
+## 1.2.0 - 2019-10-25
 
@@ -40,3 +48,3 @@ ### Added
 
-## [1.1.0] - 2019-10-11
+## 1.1.0 - 2019-10-11
 
@@ -47,3 +55,3 @@ ### Added
 
-## [1.0.0]
+## 1.0.0
 
@@ -50,0 +58,0 @@ ### Added

package.json

 {
   "name": "@shopify/react-performance",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "license": "MIT",
@@ -8,5 +8,2 @@ "description": "Primitives to measure your React application's performance using `@shopify/performance`",
   "types": "index.d.ts",
-  "scripts": {
-    "build": "tsc --p tsconfig.json"
-  },
   "sideEffects": false,
@@ -28,4 +25,3 @@ "publishConfig": {
   "dependencies": {
-    "@shopify/performance": "^1.3.3",
-    "tslib": "^1.14.1"
+    "@shopify/performance": "^1.3.4"
   },
@@ -36,3 +32,3 @@ "peerDependencies": {
   "devDependencies": {
-    "@shopify/network": "^1.6.3"
+    "@shopify/network": "^1.6.4"
   },
@@ -39,0 +35,0 @@ "files": [

No alert changes

Improved metrics

Dependency count

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

63918

decreased by-7.37%

Lines of code

1010

decreased by-7.42%

Dependency changes

• - Removedtslib@^1.14.1

• - Removedtslib@1.14.1(transitive)

• Updated@shopify/performance@^1.3.4