@shopify/performance - npm Package Compare versions

Comparing version 0.0.0-snapshot-20230329183100 to 0.0.0-snapshot-20231222183433

build/cjs/performance.js

@@ -13,3 +13,3 @@ 'use strict';
 class Performance {
-  constructor() {
+  constructor(resolveRouter) {
     this.supportsObserver = utilities.hasGlobal('PerformanceObserver');
@@ -32,9 +32,16 @@ this.supportsMarks = utilities.hasGlobal('PerformanceMark');
     };
+    this.resolveRouter = resolveRouter;
     this.start({
       timeStamp: 0
     });
-    utilities.withNavigation(this.start.bind(this));
 
+    if (this.resolveRouter) {
+      utilities.withReactRouterNavigation(this.resolveRouter, this.start.bind(this));
+    } else {
+      utilities.withNavigation(this.start.bind(this));
+    }
+
     if (this.supportsTimingEntries && (!this.supportsDetailedTime || !this.supportsNavigationEntries)) {
       utilities.withTiming(({
+        responseEnd,
         domContentLoadedEventStart,
@@ -50,2 +57,7 @@ loadEventStart
         this.lifecycleEvent({
+          type: types.EventType.TimeToLastByte,
+          start: responseEnd - this.timeOrigin,
+          duration: 0
+        });
+        this.lifecycleEvent({
           type: types.EventType.DomContentLoaded,
@@ -63,2 +75,10 @@ start: domContentLoadedEventStart - this.timeOrigin,
       utilities.withEntriesOfType('navigation', entry => {
+        if (entry.responseEnd > 0) {
+          this.lifecycleEvent({
+            type: types.EventType.TimeToLastByte,
+            start: entry.responseEnd,
+            duration: 0
+          });
+        }
+
         if (entry.domContentLoadedEventStart > 0) {
@@ -65,0 +85,0 @@ this.lifecycleEvent({

build/cjs/types.js

@@ -9,2 +9,3 @@ 'use strict';
   EventType["TimeToFirstByte"] = "ttfb";
+  EventType["TimeToLastByte"] = "ttlb";
   EventType["TimeToFirstPaint"] = "ttfp";
@@ -11,0 +12,0 @@ EventType["TimeToFirstContentfulPaint"] = "ttfcp";

build/cjs/utilities.js

@@ -89,2 +89,14 @@ 'use strict';
 }
+async function withReactRouterNavigation(resolveRouter, handler) {
+  const router = await resolveRouter;
+  let currentPathname = window.location.pathname;
+  return router.subscribe(state => {
+    if (state.navigation.state === 'loading' && currentPathname !== state.navigation.location.pathname) {
+      currentPathname = state.navigation.location.pathname;
+      handler({
+        target: currentPathname
+      });
+    }
+  });
+}
 function withTiming(handler) {
@@ -181,2 +193,3 @@ if (typeof document === 'undefined' || typeof performance === 'undefined') {
 exports.withNavigation = withNavigation;
+exports.withReactRouterNavigation = withReactRouterNavigation;
 exports.withTiming = withTiming;

build/ts/performance.d.ts

@@ -9,2 +9,3 @@ import type { Navigation } from './navigation';
 export declare class Performance {
+    private resolveRouter?;
     readonly supportsObserver: boolean;
@@ -26,3 +27,3 @@ readonly supportsMarks: boolean;
     private eventHandlers;
-    constructor();
+    constructor(resolveRouter?: Promise<import("@remix-run/router").Router> | undefined);
     mark(stage: string, id: string): void;
@@ -29,0 +30,0 @@ on<T extends keyof EventMap>(event: T, handler: EventMap[T]): () => boolean;

build/ts/types.d.ts

 export declare enum EventType {
     TimeToFirstByte = "ttfb",
+    TimeToLastByte = "ttlb",
     TimeToFirstPaint = "ttfp",
@@ -29,2 +30,8 @@ TimeToFirstContentfulPaint = "ttfcp",
 }
+export interface TimeToLastByteEvent extends BasicEvent {
+    type: EventType.TimeToLastByte;
+    metadata?: {
+        [key: string]: any;
+    };
+}
 export interface TimeToFirstPaintEvent extends BasicEvent {
@@ -88,6 +95,7 @@ type: EventType.TimeToFirstPaint;
 }
-export type LifecycleEvent = TimeToFirstByteEvent | TimeToFirstPaintEvent | TimeToFirstContentfulPaintEvent | TimeToLargestContentfulPaintEvent | DomContentLoadedEvent | FirstInputDelayEvent | LoadEvent;
+export type LifecycleEvent = TimeToFirstByteEvent | TimeToLastByteEvent | TimeToFirstPaintEvent | TimeToFirstContentfulPaintEvent | TimeToLargestContentfulPaintEvent | DomContentLoadedEvent | FirstInputDelayEvent | LoadEvent;
 export type Event = LifecycleEvent | LongTaskEvent | ScriptDownloadEvent | StyleDownloadEvent | GraphQLEvent | UsableEvent | CustomEvent;
 export interface EventMap {
     [EventType.TimeToFirstByte]: TimeToFirstByteEvent;
+    [EventType.TimeToLastByte]: TimeToLastByteEvent;
     [EventType.TimeToFirstPaint]: TimeToFirstPaintEvent;
@@ -94,0 +102,0 @@ [EventType.TimeToFirstContentfulPaint]: TimeToFirstContentfulPaintEvent;

build/ts/utilities.d.ts

@@ -0,1 +1,2 @@
+import type { createBrowserRouter } from 'react-router-dom';
 import { EventType } from './types';
@@ -16,2 +17,6 @@ export declare function referenceTime(): number;
 }) => void): void;
+export declare function withReactRouterNavigation(resolveRouter: Promise<ReturnType<typeof createBrowserRouter>>, handler: (details?: {
+    target?: string;
+    timeStamp?: number;
+}) => void): Promise<() => void>;
 export declare function withTiming(handler: (timing: typeof performance.timing) => void): void;
@@ -18,0 +23,0 @@ export declare const supportsPerformanceObserver: boolean;

package.json

 {
   "name": "@shopify/performance",
-  "version": "0.0.0-snapshot-20230329183100",
+  "version": "0.0.0-snapshot-20231222183433",
   "license": "MIT",
@@ -46,3 +46,11 @@ "description": "Primitives for collecting browser performance metrics",
     "web-vitals": "^3.0.4"
+  },
+  "peerDependencies": {
+    "react-router-dom": "^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-router-dom": {
+      "optional": true
+    }
   }
 }

README.md

@@ -123,3 +123,3 @@ # `@shopify/performance`
 
-##### Largest Contentful Paint (`EventType.TimeToFirstContentfulPaint`)
+##### Largest Contentful Paint (`EventType.TimeToLargestContentfulPaint`)
 
@@ -126,0 +126,0 @@ The render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

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

92440

increased by5.2%

Lines of code

1538

increased by5.27%

Worsened metrics

Dependency count

2

increased by100%

No dependency changes