@shopify/performance - npm Package Compare versions

Comparing version 0.0.0-snapshot-20221206153119 to 0.0.0-snapshot-20230328181823

build/cjs/inflight.js

@@ -36,7 +36,4 @@ 'use strict';
   }, metadata) {
+    this.events = [];
     this.metadata = metadata;
-    this.timeOrigin = void 0;
-    this.start = void 0;
-    this.target = void 0;
-    this.events = [];
     this.timeOrigin = timeOrigin;
@@ -43,0 +40,0 @@ this.start = this.normalize(start);

build/cjs/navigation.js

@@ -22,7 +22,2 @@ 'use strict';
     this.metadata = metadata;
-    this.start = void 0;
-    this.duration = void 0;
-    this.target = void 0;
-    this.events = void 0;
-    this.result = void 0;
     this.start = start;
@@ -29,0 +24,0 @@ this.duration = duration;

build/cjs/performance.js

@@ -10,3 +10,3 @@ 'use strict';
 
-const WATCH_RESOURCE_TYPES = ['script', 'css'];
+const WATCH_RESOURCE_TYPES = ['script', 'css', 'link'];
 const DEFAULT_TIMEOUT = 60000;
@@ -25,5 +25,2 @@ class Performance {
     this.supportsDetailedEvents = this.supportsNavigationEntries && this.supportsLongtaskEntries && this.supportsResourceEntries && this.supportsPaintEntries;
-    this.inflightNavigation = void 0;
-    this.navigationTimeout = void 0;
-    this.firstNavigation = void 0;
     this.lifecycleEvents = [];
@@ -89,4 +86,10 @@ this.navigationCount = 0;
 
+        const type = utilities.getResourceTypeFromEntry(entry);
+
+        if (type === 'unsupported') {
+          return;
+        }
+
         this.event({
-          type: entry.initiatorType === 'script' ? types.EventType.ScriptDownload : types.EventType.StyleDownload,
+          type,
           start: entry.startTime,
@@ -93,0 +96,0 @@ duration: entry.duration,

build/cjs/utilities.js

@@ -5,2 +5,4 @@ 'use strict';
 
+var types = require('./types.js');
+
 function referenceTime() {
@@ -71,3 +73,11 @@ // If no performance, then we always used Date.now(), which is a full
   history.replaceState = (...args) => {
-    handlePushOrReplace(args[2]);
+    var _history$state, _args$;
+
+    // React Router v6 introduced special behaviour that replaces state on initialization
+    // It does this only when the current idx state is null, and it sets it to 0
+    // We need to account for this to prevent it from being recorded as a navigation
+    if (((_history$state = history.state) === null || _history$state === void 0 ? void 0 : _history$state.idx) == null && ((_args$ = args[0]) === null || _args$ === void 0 ? void 0 : _args$.idx) === 0) {
+      handlePushOrReplace(args[2]);
+    }
+
     replaceState.call(history, ...args);
@@ -133,2 +143,34 @@ };
 
+function getResourceTypeFromEntry({
+  initiatorType,
+  name
+}) {
+  if (initiatorType === 'link') {
+    return getResourceTypeFromLinkInitiator(name);
+  } else {
+    return getResourceTypeFromInitiator(initiatorType);
+  }
+}
+
+function getResourceTypeFromInitiator(initiatorType) {
+  const eventTypes = {
+    css: types.EventType.StyleDownload,
+    script: types.EventType.ScriptDownload
+  };
+  return eventTypes[initiatorType] || 'unsupported';
+}
+
+function getResourceTypeFromLinkInitiator(name) {
+  if (name.endsWith('.css')) {
+    return types.EventType.StyleDownload;
+  }
+
+  if (name.endsWith('.js')) {
+    return types.EventType.ScriptDownload;
+  }
+
+  return 'unsupported';
+}
+
+exports.getResourceTypeFromEntry = getResourceTypeFromEntry;
 exports.getUniqueRanges = getUniqueRanges;
@@ -135,0 +177,0 @@ exports.hasGlobal = hasGlobal;

build/ts/inflight.d.ts

@@ -1,2 +0,2 @@
-import { Event, NavigationMetadata } from './types';
+import type { Event, NavigationMetadata } from './types';
 import { Navigation } from './navigation';
@@ -3,0 +3,0 @@ interface NavigationStartOptions {

build/ts/navigation.d.ts

@@ -1,2 +0,2 @@
-import { Event, NavigationDefinition, NavigationResult, NavigationMetadata, ScriptDownloadEvent, StyleDownloadEvent, EventMap } from './types';
+import type { Event, NavigationDefinition, NavigationResult, NavigationMetadata, ScriptDownloadEvent, StyleDownloadEvent, EventMap } from './types';
 export declare class Navigation implements NavigationDefinition {
@@ -3,0 +3,0 @@ metadata: NavigationMetadata;

build/ts/performance.d.ts

@@ -1,3 +0,3 @@
-import { Navigation } from './navigation';
-import { Event, LifecycleEvent } from './types';
+import type { Navigation } from './navigation';
+import type { Event, LifecycleEvent } from './types';
 interface EventMap {
@@ -4,0 +4,0 @@ navigation: (navigation: Navigation) => void;

build/ts/types.d.ts

@@ -85,4 +85,4 @@ export declare enum EventType {
 }
-export declare type LifecycleEvent = TimeToFirstByteEvent | TimeToFirstPaintEvent | TimeToFirstContentfulPaintEvent | TimeToLargestContentfulPaintEvent | DomContentLoadedEvent | FirstInputDelayEvent | LoadEvent;
-export declare type Event = LifecycleEvent | LongTaskEvent | ScriptDownloadEvent | StyleDownloadEvent | GraphQLEvent | UsableEvent | CustomEvent;
+export type LifecycleEvent = TimeToFirstByteEvent | TimeToFirstPaintEvent | TimeToFirstContentfulPaintEvent | TimeToLargestContentfulPaintEvent | DomContentLoadedEvent | FirstInputDelayEvent | LoadEvent;
+export type Event = LifecycleEvent | LongTaskEvent | ScriptDownloadEvent | StyleDownloadEvent | GraphQLEvent | UsableEvent | CustomEvent;
 export interface EventMap {
@@ -89,0 +89,0 @@ [EventType.TimeToFirstByte]: TimeToFirstByteEvent;

build/ts/utilities.d.ts

@@ -0,1 +1,2 @@
+import { EventType } from './types';
 export declare function referenceTime(): number;
@@ -23,3 +24,4 @@ export declare function now(): number;
 export declare function getUniqueRanges(ranges: Range[]): Range[];
+export declare function getResourceTypeFromEntry({ initiatorType, name, }: PerformanceResourceTiming): EventType.ScriptDownload | EventType.StyleDownload | "unsupported";
 export {};
 //# sourceMappingURL=utilities.d.ts.map

index.js

@@ -1,1 +0,1 @@
-module.exports = require("./build/cjs/index.js");
+module.exports = require("./build/cjs/index.js");

package.json

 {
   "name": "@shopify/performance",
-  "version": "0.0.0-snapshot-20221206153119",
+  "version": "0.0.0-snapshot-20230328181823",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "Primitives for collecting browser performance metrics",

README.md

@@ -123,2 +123,7 @@ # `@shopify/performance`
 
+##### Largest Contentful Paint (`EventType.TimeToFirstContentfulPaint`)
+
+The render time of the largest image or text block visible within the viewport, relative to when the page first started loading.
+Learn more about this [Largest Contentful Paint](https://web.dev/lcp/).
+
 ##### DOM Content Loaded (`EventType.DomContentLoaded`)
@@ -125,0 +130,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

87340

increased by4.27%

Lines of code

1457

increased by4.07%

Number of lines in readme file

172

increased by2.99%

No dependency changes