@shopify/performance
Advanced tools
Comparing version 1.3.3 to 1.3.4
@@ -1,10 +0,4 @@ | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var tslib_1 = require("tslib"); | ||
var performance_1 = require("./performance"); | ||
Object.defineProperty(exports, "Performance", { enumerable: true, get: function () { return performance_1.Performance; } }); | ||
var navigation_1 = require("./navigation"); | ||
Object.defineProperty(exports, "Navigation", { enumerable: true, get: function () { return navigation_1.Navigation; } }); | ||
tslib_1.__exportStar(require("./types"), exports); | ||
var utilities_1 = require("./utilities"); | ||
Object.defineProperty(exports, "now", { enumerable: true, get: function () { return utilities_1.now; } }); | ||
export { Performance } from './performance'; | ||
export { Navigation } from './navigation'; | ||
export * from './types'; | ||
export { now } from './utilities'; |
@@ -1,13 +0,9 @@ | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.InflightNavigation = void 0; | ||
var tslib_1 = require("tslib"); | ||
var utilities_1 = require("./utilities"); | ||
var types_1 = require("./types"); | ||
var navigation_1 = require("./navigation"); | ||
import { now } from './utilities'; | ||
import { NavigationResult, EventType, } from './types'; | ||
import { Navigation } from './navigation'; | ||
function replaceResourceEvent(event, oldEvent) { | ||
if ((event.type !== types_1.EventType.ScriptDownload && | ||
event.type !== types_1.EventType.StyleDownload) || | ||
(oldEvent.type !== types_1.EventType.ScriptDownload && | ||
oldEvent.type !== types_1.EventType.StyleDownload)) { | ||
if ((event.type !== EventType.ScriptDownload && | ||
event.type !== EventType.StyleDownload) || | ||
(oldEvent.type !== EventType.ScriptDownload && | ||
oldEvent.type !== EventType.StyleDownload)) { | ||
return false; | ||
@@ -19,17 +15,14 @@ } | ||
} | ||
var MATCHES_CHECK_MAP = new Map([ | ||
const MATCHES_CHECK_MAP = new Map([ | ||
// In Safari, we occasionally get the same "resource" event twice. | ||
// This check looks for a resource event with the same name, and replaces | ||
// it if found. | ||
[types_1.EventType.ScriptDownload, replaceResourceEvent], | ||
[types_1.EventType.StyleDownload, replaceResourceEvent], | ||
[EventType.ScriptDownload, replaceResourceEvent], | ||
[EventType.StyleDownload, replaceResourceEvent], | ||
]); | ||
function defaultEqualityCheck(_a, _b) { | ||
var type = _a.type; | ||
var otherType = _b.type; | ||
function defaultEqualityCheck({ type }, { type: otherType }) { | ||
return type === otherType; | ||
} | ||
var InflightNavigation = /** @class */ (function () { | ||
function InflightNavigation(_a, metadata) { | ||
var timeOrigin = _a.timeOrigin, _b = _a.start, start = _b === void 0 ? utilities_1.now() : _b, _c = _a.target, target = _c === void 0 ? window.location.pathname : _c; | ||
export class InflightNavigation { | ||
constructor({ timeOrigin, start = now(), target = window.location.pathname, }, metadata) { | ||
this.metadata = metadata; | ||
@@ -41,3 +34,3 @@ this.events = []; | ||
} | ||
InflightNavigation.prototype.event = function (event, | ||
event(event, | ||
// Users can either force "matching" events to be replaced, or provide | ||
@@ -47,12 +40,9 @@ // a function that checks for an event that should be replaced. This may | ||
// browser inconsistencies. | ||
replaceExisting) { | ||
if (replaceExisting === void 0) { replaceExisting = false; } | ||
var normalizedEvent = tslib_1.__assign(tslib_1.__assign({}, event), { start: this.normalize(event.start) }); | ||
replaceExisting = false) { | ||
const normalizedEvent = Object.assign(Object.assign({}, event), { start: this.normalize(event.start) }); | ||
if (replaceExisting) { | ||
var check_1 = typeof replaceExisting === 'function' | ||
const check = typeof replaceExisting === 'function' | ||
? replaceExisting | ||
: MATCHES_CHECK_MAP.get(event.type) || defaultEqualityCheck; | ||
var existingIndex = this.events.findIndex(function (oldEvent) { | ||
return check_1(event, oldEvent); | ||
}); | ||
const existingIndex = this.events.findIndex(oldEvent => check(event, oldEvent)); | ||
if (existingIndex >= 0) { | ||
@@ -68,29 +58,24 @@ this.events.splice(existingIndex, 1, normalizedEvent); | ||
} | ||
}; | ||
InflightNavigation.prototype.cancel = function (timeStamp) { | ||
if (timeStamp === void 0) { timeStamp = utilities_1.now(); } | ||
return this.end(timeStamp, types_1.NavigationResult.Cancelled); | ||
}; | ||
InflightNavigation.prototype.timeout = function (timeStamp) { | ||
if (timeStamp === void 0) { timeStamp = utilities_1.now(); } | ||
return this.end(timeStamp, types_1.NavigationResult.TimedOut); | ||
}; | ||
InflightNavigation.prototype.finish = function (timeStamp) { | ||
if (timeStamp === void 0) { timeStamp = utilities_1.now(); } | ||
return this.end(timeStamp, types_1.NavigationResult.Finished); | ||
}; | ||
InflightNavigation.prototype.end = function (timeStamp, result) { | ||
return new navigation_1.Navigation({ | ||
} | ||
cancel(timeStamp = now()) { | ||
return this.end(timeStamp, NavigationResult.Cancelled); | ||
} | ||
timeout(timeStamp = now()) { | ||
return this.end(timeStamp, NavigationResult.TimedOut); | ||
} | ||
finish(timeStamp = now()) { | ||
return this.end(timeStamp, NavigationResult.Finished); | ||
} | ||
end(timeStamp, result) { | ||
return new Navigation({ | ||
target: this.target, | ||
start: this.start, | ||
duration: this.normalize(timeStamp) - this.start, | ||
events: this.events.sort(function (eventOne, eventTwo) { return eventOne.start - eventTwo.start; }), | ||
result: result, | ||
events: this.events.sort((eventOne, eventTwo) => eventOne.start - eventTwo.start), | ||
result, | ||
}, this.metadata); | ||
}; | ||
InflightNavigation.prototype.normalize = function (timeStamp) { | ||
} | ||
normalize(timeStamp) { | ||
return this.timeOrigin + timeStamp; | ||
}; | ||
return InflightNavigation; | ||
}()); | ||
exports.InflightNavigation = InflightNavigation; | ||
} | ||
} |
@@ -1,18 +0,13 @@ | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Navigation = void 0; | ||
var tslib_1 = require("tslib"); | ||
var types_1 = require("./types"); | ||
var utilities_1 = require("./utilities"); | ||
var LIFECYCLE_EVENTS = [ | ||
types_1.EventType.TimeToFirstByte, | ||
types_1.EventType.TimeToFirstPaint, | ||
types_1.EventType.TimeToFirstContentfulPaint, | ||
types_1.EventType.DomContentLoaded, | ||
types_1.EventType.FirstInputDelay, | ||
types_1.EventType.Load, | ||
import { EventType, } from './types'; | ||
import { getUniqueRanges } from './utilities'; | ||
const LIFECYCLE_EVENTS = [ | ||
EventType.TimeToFirstByte, | ||
EventType.TimeToFirstPaint, | ||
EventType.TimeToFirstContentfulPaint, | ||
EventType.DomContentLoaded, | ||
EventType.FirstInputDelay, | ||
EventType.Load, | ||
]; | ||
var Navigation = /** @class */ (function () { | ||
function Navigation(_a, metadata) { | ||
var start = _a.start, duration = _a.duration, target = _a.target, events = _a.events, result = _a.result; | ||
export class Navigation { | ||
constructor({ start, duration, target, events, result }, metadata) { | ||
this.metadata = metadata; | ||
@@ -25,93 +20,52 @@ this.start = start; | ||
} | ||
Object.defineProperty(Navigation.prototype, "isFullPageNavigation", { | ||
get: function () { | ||
return this.metadata.index === 0; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Navigation.prototype.eventsByType = function (targetType) { | ||
return this.events.filter(function (_a) { | ||
var type = _a.type; | ||
return type === targetType; | ||
}); | ||
}; | ||
Navigation.prototype.totalDurationByEventType = function (type, _a) { | ||
var _b = (_a === void 0 ? {} : _a).countOverlaps, countOverlaps = _b === void 0 ? false : _b; | ||
var events = this.eventsByType(type); | ||
var navigationStart = this.start; | ||
get isFullPageNavigation() { | ||
return this.metadata.index === 0; | ||
} | ||
eventsByType(targetType) { | ||
return this.events.filter(({ type }) => type === targetType); | ||
} | ||
totalDurationByEventType(type, { countOverlaps = false } = {}) { | ||
const events = this.eventsByType(type); | ||
const { start: navigationStart } = this; | ||
if (events.length === 0) { | ||
return 0; | ||
} | ||
var ranges = countOverlaps ? events : utilities_1.getUniqueRanges(events); | ||
return ranges.reduce(function (total, _a) { | ||
var start = _a.start, duration = _a.duration; | ||
return total + duration - Math.max(0, navigationStart - start); | ||
}, 0); | ||
}; | ||
Object.defineProperty(Navigation.prototype, "timeToComplete", { | ||
get: function () { | ||
return this.duration; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Navigation.prototype, "timeToUsable", { | ||
get: function () { | ||
var usableEvent = this.eventsByType(types_1.EventType.Usable)[0]; | ||
return usableEvent ? usableEvent.start - this.start : this.timeToComplete; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Navigation.prototype, "resourceEvents", { | ||
get: function () { | ||
return tslib_1.__spread(this.eventsByType(types_1.EventType.ScriptDownload), this.eventsByType(types_1.EventType.StyleDownload)); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Navigation.prototype, "totalDownloadSize", { | ||
get: function () { | ||
var events = this.resourceEvents; | ||
if (events.length === 0) { | ||
return undefined; | ||
} | ||
return events.reduce(function (total, _a) { | ||
var size = _a.metadata.size; | ||
return size == null || typeof total !== 'number' ? undefined : total + size; | ||
}, 0); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Navigation.prototype, "cacheEffectiveness", { | ||
get: function () { | ||
var events = this.resourceEvents; | ||
if (events.length === 0 || | ||
events.some(function (_a) { | ||
var size = _a.metadata.size; | ||
return size == null; | ||
})) { | ||
return undefined; | ||
} | ||
return events.filter(function (_a) { | ||
var duration = _a.duration; | ||
return duration === 0; | ||
}).length / events.length; | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Navigation.prototype.toJSON = function (_a) { | ||
var _b = _a === void 0 ? {} : _a, _c = _b.removeEventMetadata, removeEventMetadata = _c === void 0 ? true : _c, _d = _b.removeLifecycleEvents, removeLifecycleEvents = _d === void 0 ? true : _d; | ||
var events = removeLifecycleEvents | ||
? this.events.filter(function (_a) { | ||
var type = _a.type; | ||
return !LIFECYCLE_EVENTS.includes(type); | ||
}) | ||
const ranges = countOverlaps ? events : getUniqueRanges(events); | ||
return ranges.reduce((total, { start, duration }) => total + duration - Math.max(0, navigationStart - start), 0); | ||
} | ||
get timeToComplete() { | ||
return this.duration; | ||
} | ||
get timeToUsable() { | ||
const usableEvent = this.eventsByType(EventType.Usable)[0]; | ||
return usableEvent ? usableEvent.start - this.start : this.timeToComplete; | ||
} | ||
get resourceEvents() { | ||
return [ | ||
...this.eventsByType(EventType.ScriptDownload), | ||
...this.eventsByType(EventType.StyleDownload), | ||
]; | ||
} | ||
get totalDownloadSize() { | ||
const events = this.resourceEvents; | ||
if (events.length === 0) { | ||
return undefined; | ||
} | ||
return events.reduce((total, { metadata: { size } }) => size == null || typeof total !== 'number' ? undefined : total + size, 0); | ||
} | ||
get cacheEffectiveness() { | ||
const events = this.resourceEvents; | ||
if (events.length === 0 || | ||
events.some(({ metadata: { size } }) => size == null)) { | ||
return undefined; | ||
} | ||
return events.filter(({ duration }) => duration === 0).length / events.length; | ||
} | ||
toJSON({ removeEventMetadata = true, removeLifecycleEvents = true, } = {}) { | ||
const events = removeLifecycleEvents | ||
? this.events.filter(({ type }) => !LIFECYCLE_EVENTS.includes(type)) | ||
: this.events; | ||
var processedEvents = removeEventMetadata | ||
? events.map(function (_a) { | ||
var metadata = _a.metadata, rest = tslib_1.__rest(_a, ["metadata"]); | ||
const processedEvents = removeEventMetadata | ||
? events.map((_a) => { | ||
var { metadata } = _a, rest = __rest(_a, ["metadata"]); | ||
return rest; | ||
@@ -127,5 +81,3 @@ }) | ||
}; | ||
}; | ||
return Navigation; | ||
}()); | ||
exports.Navigation = Navigation; | ||
} | ||
} |
@@ -1,22 +0,17 @@ | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.Performance = void 0; | ||
var tslib_1 = require("tslib"); | ||
var inflight_1 = require("./inflight"); | ||
var utilities_1 = require("./utilities"); | ||
var types_1 = require("./types"); | ||
var WATCH_RESOURCE_TYPES = ['script', 'css']; | ||
var DEFAULT_TIMEOUT = 60000; | ||
var Performance = /** @class */ (function () { | ||
function Performance() { | ||
var _this = this; | ||
this.supportsObserver = utilities_1.hasGlobal('PerformanceObserver'); | ||
this.supportsMarks = utilities_1.hasGlobal('PerformanceMark'); | ||
this.supportsNavigationEntries = utilities_1.hasGlobal('PerformanceNavigationTiming'); | ||
this.supportsTimingEntries = utilities_1.hasGlobal('PerformanceTiming'); | ||
this.supportsLongtaskEntries = utilities_1.hasGlobal('PerformanceLongTaskTiming'); | ||
this.supportsResourceEntries = utilities_1.hasGlobal('PerformanceResourceTiming'); | ||
this.supportsPaintEntries = utilities_1.hasGlobal('PerformancePaintTiming'); | ||
this.timeOrigin = utilities_1.referenceTime(); | ||
this.supportsDetailedTime = utilities_1.supportsPerformanceObserver; | ||
import { InflightNavigation } from './inflight'; | ||
import { now, withEntriesOfType, withNavigation, withTiming, supportsPerformanceObserver, referenceTime, hasGlobal, } from './utilities'; | ||
import { EventType, } from './types'; | ||
const WATCH_RESOURCE_TYPES = ['script', 'css']; | ||
const DEFAULT_TIMEOUT = 60000; | ||
export class Performance { | ||
constructor() { | ||
this.supportsObserver = hasGlobal('PerformanceObserver'); | ||
this.supportsMarks = hasGlobal('PerformanceMark'); | ||
this.supportsNavigationEntries = hasGlobal('PerformanceNavigationTiming'); | ||
this.supportsTimingEntries = hasGlobal('PerformanceTiming'); | ||
this.supportsLongtaskEntries = hasGlobal('PerformanceLongTaskTiming'); | ||
this.supportsResourceEntries = hasGlobal('PerformanceResourceTiming'); | ||
this.supportsPaintEntries = hasGlobal('PerformancePaintTiming'); | ||
this.timeOrigin = referenceTime(); | ||
this.supportsDetailedTime = supportsPerformanceObserver; | ||
this.supportsDetailedEvents = this.supportsNavigationEntries && | ||
@@ -34,7 +29,6 @@ this.supportsLongtaskEntries && | ||
this.start({ timeStamp: 0 }); | ||
utilities_1.withNavigation(this.start.bind(this)); | ||
withNavigation(this.start.bind(this)); | ||
if (this.supportsTimingEntries && | ||
(!this.supportsDetailedTime || !this.supportsNavigationEntries)) { | ||
utilities_1.withTiming(function (_a) { | ||
var responseStart = _a.responseStart, domContentLoadedEventStart = _a.domContentLoadedEventStart, loadEventStart = _a.loadEventStart; | ||
withTiming(({ responseStart, domContentLoadedEventStart, loadEventStart }) => { | ||
// window.performance.timing uses full timestamps, while | ||
@@ -46,15 +40,15 @@ // the ones coming from observing navigation entries are | ||
// began. | ||
_this.lifecycleEvent({ | ||
type: types_1.EventType.TimeToFirstByte, | ||
start: responseStart - _this.timeOrigin, | ||
this.lifecycleEvent({ | ||
type: EventType.TimeToFirstByte, | ||
start: responseStart - this.timeOrigin, | ||
duration: 0, | ||
}); | ||
_this.lifecycleEvent({ | ||
type: types_1.EventType.DomContentLoaded, | ||
start: domContentLoadedEventStart - _this.timeOrigin, | ||
this.lifecycleEvent({ | ||
type: EventType.DomContentLoaded, | ||
start: domContentLoadedEventStart - this.timeOrigin, | ||
duration: 0, | ||
}); | ||
_this.lifecycleEvent({ | ||
type: types_1.EventType.Load, | ||
start: loadEventStart - _this.timeOrigin, | ||
this.lifecycleEvent({ | ||
type: EventType.Load, | ||
start: loadEventStart - this.timeOrigin, | ||
duration: 0, | ||
@@ -65,5 +59,5 @@ }); | ||
else { | ||
utilities_1.withEntriesOfType('navigation', function (entry) { | ||
_this.lifecycleEvent({ | ||
type: types_1.EventType.TimeToFirstByte, | ||
withEntriesOfType('navigation', entry => { | ||
this.lifecycleEvent({ | ||
type: EventType.TimeToFirstByte, | ||
start: entry.responseStart, | ||
@@ -73,4 +67,4 @@ duration: 0, | ||
if (entry.domContentLoadedEventStart > 0) { | ||
_this.lifecycleEvent({ | ||
type: types_1.EventType.DomContentLoaded, | ||
this.lifecycleEvent({ | ||
type: EventType.DomContentLoaded, | ||
start: entry.domContentLoadedEventStart, | ||
@@ -81,4 +75,4 @@ duration: 0, | ||
if (entry.loadEventStart > 0) { | ||
_this.lifecycleEvent({ | ||
type: types_1.EventType.Load, | ||
this.lifecycleEvent({ | ||
type: EventType.Load, | ||
start: entry.loadEventStart, | ||
@@ -91,10 +85,10 @@ duration: 0, | ||
if (this.supportsResourceEntries) { | ||
utilities_1.withEntriesOfType('resource', function (entry) { | ||
withEntriesOfType('resource', entry => { | ||
if (!WATCH_RESOURCE_TYPES.includes(entry.initiatorType)) { | ||
return; | ||
} | ||
_this.event({ | ||
this.event({ | ||
type: entry.initiatorType === 'script' | ||
? types_1.EventType.ScriptDownload | ||
: types_1.EventType.StyleDownload, | ||
? EventType.ScriptDownload | ||
: EventType.StyleDownload, | ||
start: entry.startTime, | ||
@@ -110,5 +104,5 @@ duration: entry.duration, | ||
if (this.supportsLongtaskEntries) { | ||
utilities_1.withEntriesOfType('longtask', function (entry) { | ||
_this.event({ | ||
type: types_1.EventType.LongTask, | ||
withEntriesOfType('longtask', entry => { | ||
this.event({ | ||
type: EventType.LongTask, | ||
start: entry.startTime, | ||
@@ -120,14 +114,14 @@ duration: entry.duration, | ||
if (this.supportsPaintEntries) { | ||
utilities_1.withEntriesOfType('paint', function (entry) { | ||
var type = entry.name === 'first-paint' | ||
? types_1.EventType.TimeToFirstPaint | ||
: types_1.EventType.TimeToFirstContentfulPaint; | ||
_this.lifecycleEvent({ type: type, start: entry.startTime, duration: 0 }); | ||
withEntriesOfType('paint', entry => { | ||
const type = entry.name === 'first-paint' | ||
? EventType.TimeToFirstPaint | ||
: EventType.TimeToFirstContentfulPaint; | ||
this.lifecycleEvent({ type, start: entry.startTime, duration: 0 }); | ||
}); | ||
} | ||
if (typeof window !== undefined && window.perfMetrics !== undefined) { | ||
window.perfMetrics.onFirstInputDelay(function (delay) { | ||
_this.lifecycleEvent({ | ||
type: types_1.EventType.FirstInputDelay, | ||
start: utilities_1.now() - delay, | ||
window.perfMetrics.onFirstInputDelay(delay => { | ||
this.lifecycleEvent({ | ||
type: EventType.FirstInputDelay, | ||
start: now() - delay, | ||
duration: delay, | ||
@@ -138,10 +132,9 @@ }); | ||
} | ||
Performance.prototype.mark = function (stage, id) { | ||
mark(stage, id) { | ||
if (this.supportsMarks) { | ||
window.performance.mark(id + "::" + stage); | ||
window.performance.mark(`${id}::${stage}`); | ||
} | ||
}; | ||
Performance.prototype.on = function (event, handler) { | ||
var e_1, _a; | ||
var handlers = this.eventHandlers[event]; | ||
} | ||
on(event, handler) { | ||
const handlers = this.eventHandlers[event]; | ||
handlers.add(handler); | ||
@@ -162,20 +155,9 @@ // If they are registering to hear about completed navigations, and we have already | ||
if (event === 'lifecycleEvent') { | ||
try { | ||
for (var _b = tslib_1.__values(this.lifecycleEvents), _c = _b.next(); !_c.done; _c = _b.next()) { | ||
var event_1 = _c.value; | ||
handler(event_1); | ||
} | ||
for (const event of this.lifecycleEvents) { | ||
handler(event); | ||
} | ||
catch (e_1_1) { e_1 = { error: e_1_1 }; } | ||
finally { | ||
try { | ||
if (_c && !_c.done && (_a = _b.return)) _a.call(_b); | ||
} | ||
finally { if (e_1) throw e_1.error; } | ||
} | ||
} | ||
return function () { return handlers.delete(handler); }; | ||
}; | ||
Performance.prototype.event = function (event, _a) { | ||
var _b = (_a === void 0 ? {} : _a).replace, replace = _b === void 0 ? false : _b; | ||
return () => handlers.delete(handler); | ||
} | ||
event(event, { replace = false } = {}) { | ||
if (this.inflightNavigation == null) { | ||
@@ -185,7 +167,4 @@ return; | ||
this.inflightNavigation.event(event, replace); | ||
}; | ||
Performance.prototype.start = function (_a) { | ||
var e_2, _b; | ||
var _this = this; | ||
var _c = _a === void 0 ? {} : _a, _d = _c.timeStamp, timeStamp = _d === void 0 ? utilities_1.now() : _d, _e = _c.target, target = _e === void 0 ? window.location.pathname : _e, _f = _c.timeout, timeout = _f === void 0 ? DEFAULT_TIMEOUT : _f; | ||
} | ||
start({ timeStamp = now(), target = window.location.pathname, timeout = DEFAULT_TIMEOUT, } = {}) { | ||
this.clearTimeout(); | ||
@@ -195,6 +174,6 @@ if (this.inflightNavigation) { | ||
} | ||
this.inflightNavigation = new inflight_1.InflightNavigation({ | ||
this.inflightNavigation = new InflightNavigation({ | ||
timeOrigin: this.timeOrigin, | ||
start: timeStamp, | ||
target: target, | ||
target, | ||
}, { | ||
@@ -205,27 +184,15 @@ index: this.navigationCount, | ||
}); | ||
this.navigationTimeout = setTimeout(function () { return _this.timeout.bind(_this); }, timeout); | ||
try { | ||
for (var _g = tslib_1.__values(this.eventHandlers.inflightNavigation), _h = _g.next(); !_h.done; _h = _g.next()) { | ||
var subscriber = _h.value; | ||
subscriber(); | ||
} | ||
this.navigationTimeout = setTimeout(() => this.timeout.bind(this), timeout); | ||
for (const subscriber of this.eventHandlers.inflightNavigation) { | ||
subscriber(); | ||
} | ||
catch (e_2_1) { e_2 = { error: e_2_1 }; } | ||
finally { | ||
try { | ||
if (_h && !_h.done && (_b = _g.return)) _b.call(_g); | ||
} | ||
finally { if (e_2) throw e_2.error; } | ||
} | ||
}; | ||
Performance.prototype.usable = function (timeStamp) { | ||
if (timeStamp === void 0) { timeStamp = utilities_1.now(); } | ||
} | ||
usable(timeStamp = now()) { | ||
this.event({ | ||
type: types_1.EventType.Usable, | ||
type: EventType.Usable, | ||
start: timeStamp, | ||
duration: 0, | ||
}, { replace: true }); | ||
}; | ||
Performance.prototype.finish = function (timeStamp) { | ||
if (timeStamp === void 0) { timeStamp = utilities_1.now(); } | ||
} | ||
finish(timeStamp = now()) { | ||
this.clearTimeout(); | ||
@@ -235,13 +202,9 @@ if (this.inflightNavigation == null) { | ||
} | ||
var navigation = this.inflightNavigation.finish(timeStamp); | ||
const navigation = this.inflightNavigation.finish(timeStamp); | ||
this.firstNavigation = this.firstNavigation || navigation; | ||
this.record(navigation); | ||
this.inflightNavigation = undefined; | ||
}; | ||
Performance.prototype.lifecycleEvent = function (event) { | ||
var e_3, _a; | ||
if (this.lifecycleEvents.find(function (_a) { | ||
var type = _a.type; | ||
return type === event.type; | ||
}) != null) { | ||
} | ||
lifecycleEvent(event) { | ||
if (this.lifecycleEvents.find(({ type }) => type === event.type) != null) { | ||
return; | ||
@@ -251,17 +214,7 @@ } | ||
this.lifecycleEvents.push(event); | ||
try { | ||
for (var _b = tslib_1.__values(this.eventHandlers.lifecycleEvent), _c = _b.next(); !_c.done; _c = _b.next()) { | ||
var handler = _c.value; | ||
handler(event); | ||
} | ||
for (const handler of this.eventHandlers.lifecycleEvent) { | ||
handler(event); | ||
} | ||
catch (e_3_1) { e_3 = { error: e_3_1 }; } | ||
finally { | ||
try { | ||
if (_c && !_c.done && (_a = _b.return)) _a.call(_b); | ||
} | ||
finally { if (e_3) throw e_3.error; } | ||
} | ||
}; | ||
Performance.prototype.timeout = function () { | ||
} | ||
timeout() { | ||
this.clearTimeout(); | ||
@@ -272,4 +225,4 @@ if (this.inflightNavigation == null) { | ||
this.record(this.inflightNavigation.timeout()); | ||
}; | ||
Performance.prototype.clearTimeout = function () { | ||
} | ||
clearTimeout() { | ||
if (this.navigationTimeout) { | ||
@@ -279,22 +232,9 @@ clearTimeout(this.navigationTimeout); | ||
} | ||
}; | ||
Performance.prototype.record = function (navigation) { | ||
var e_4, _a; | ||
} | ||
record(navigation) { | ||
this.navigationCount += 1; | ||
try { | ||
for (var _b = tslib_1.__values(this.eventHandlers.navigation), _c = _b.next(); !_c.done; _c = _b.next()) { | ||
var subscriber = _c.value; | ||
subscriber(navigation); | ||
} | ||
for (const subscriber of this.eventHandlers.navigation) { | ||
subscriber(navigation); | ||
} | ||
catch (e_4_1) { e_4 = { error: e_4_1 }; } | ||
finally { | ||
try { | ||
if (_c && !_c.done && (_a = _b.return)) _a.call(_b); | ||
} | ||
finally { if (e_4) throw e_4.error; } | ||
} | ||
}; | ||
return Performance; | ||
}()); | ||
exports.Performance = Performance; | ||
} | ||
} |
@@ -1,5 +0,2 @@ | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.NavigationResult = exports.EventType = void 0; | ||
var EventType; | ||
export var EventType; | ||
(function (EventType) { | ||
@@ -18,4 +15,4 @@ EventType["TimeToFirstByte"] = "ttfb"; | ||
EventType["StyleDownload"] = "style"; | ||
})(EventType = exports.EventType || (exports.EventType = {})); | ||
var NavigationResult; | ||
})(EventType || (EventType = {})); | ||
export var NavigationResult; | ||
(function (NavigationResult) { | ||
@@ -25,2 +22,2 @@ NavigationResult[NavigationResult["Finished"] = 0] = "Finished"; | ||
NavigationResult[NavigationResult["Cancelled"] = 2] = "Cancelled"; | ||
})(NavigationResult = exports.NavigationResult || (exports.NavigationResult = {})); | ||
})(NavigationResult || (NavigationResult = {})); |
@@ -1,6 +0,2 @@ | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getUniqueRanges = exports.hasGlobal = exports.supportsPerformanceObserver = exports.withTiming = exports.withNavigation = exports.withEntriesOfType = exports.now = exports.referenceTime = void 0; | ||
var tslib_1 = require("tslib"); | ||
function referenceTime() { | ||
export function referenceTime() { | ||
// If no performance, then we always used Date.now(), which is a full | ||
@@ -16,18 +12,16 @@ // (if inaccurate) timestamp | ||
} | ||
exports.referenceTime = referenceTime; | ||
function now() { | ||
export function now() { | ||
return typeof performance === 'undefined' ? Date.now() : performance.now(); | ||
} | ||
exports.now = now; | ||
function withEntriesOfType(type, handler) { | ||
export function withEntriesOfType(type, handler) { | ||
try { | ||
var initialEntries = performance.getEntriesByType(type); | ||
initialEntries.forEach(function (entry) { return handler(entry); }); | ||
const initialEntries = performance.getEntriesByType(type); | ||
initialEntries.forEach(entry => handler(entry)); | ||
if (!hasGlobal('PerformanceObserver')) { | ||
return; | ||
} | ||
var observer = new PerformanceObserver(function (entries) { | ||
const observer = new PerformanceObserver(entries => { | ||
entries | ||
.getEntriesByType(type) | ||
.forEach(function (entry) { return handler(entry); }); | ||
.forEach(entry => handler(entry)); | ||
}); | ||
@@ -46,8 +40,7 @@ observer.observe({ | ||
} | ||
exports.withEntriesOfType = withEntriesOfType; | ||
function withNavigation(handler) { | ||
var _a = window.history, pushState = _a.pushState, replaceState = _a.replaceState; | ||
var currentPathname = window.location.pathname; | ||
var handlePushOrReplace = function (url) { | ||
var pathname = url | ||
export function withNavigation(handler) { | ||
const { pushState, replaceState } = window.history; | ||
let currentPathname = window.location.pathname; | ||
const handlePushOrReplace = (url) => { | ||
const pathname = url | ||
? new URL(url, window.location.href).pathname | ||
@@ -60,3 +53,3 @@ : undefined; | ||
}; | ||
window.addEventListener('popstate', function () { | ||
window.addEventListener('popstate', () => { | ||
if (currentPathname !== window.location.pathname) { | ||
@@ -67,21 +60,12 @@ currentPathname = window.location.pathname; | ||
}); | ||
history.replaceState = function () { | ||
var args = []; | ||
for (var _i = 0; _i < arguments.length; _i++) { | ||
args[_i] = arguments[_i]; | ||
} | ||
history.replaceState = (...args) => { | ||
handlePushOrReplace(args[2]); | ||
replaceState.call.apply(replaceState, tslib_1.__spread([history], args)); | ||
replaceState.call(history, ...args); | ||
}; | ||
history.pushState = function () { | ||
var args = []; | ||
for (var _i = 0; _i < arguments.length; _i++) { | ||
args[_i] = arguments[_i]; | ||
} | ||
history.pushState = (...args) => { | ||
handlePushOrReplace(args[2]); | ||
pushState.call.apply(pushState, tslib_1.__spread([history], args)); | ||
pushState.call(history, ...args); | ||
}; | ||
} | ||
exports.withNavigation = withNavigation; | ||
function withTiming(handler) { | ||
export function withTiming(handler) { | ||
if (typeof document === 'undefined' || typeof performance === 'undefined') { | ||
@@ -94,3 +78,3 @@ return; | ||
else { | ||
window.addEventListener('load', function () { return handler(performance.timing); }, { | ||
window.addEventListener('load', () => handler(performance.timing), { | ||
once: true, | ||
@@ -100,36 +84,20 @@ }); | ||
} | ||
exports.withTiming = withTiming; | ||
exports.supportsPerformanceObserver = typeof PerformanceObserver !== 'undefined'; | ||
function hasGlobal(global) { | ||
export const supportsPerformanceObserver = typeof PerformanceObserver !== 'undefined'; | ||
export function hasGlobal(global) { | ||
return typeof window !== 'undefined' && global in window; | ||
} | ||
exports.hasGlobal = hasGlobal; | ||
function getUniqueRanges(ranges) { | ||
var uniqueRanges = new Set(); | ||
ranges.forEach(function (range) { | ||
var e_1, _a; | ||
var overlappingRanges = tslib_1.__spread(uniqueRanges).filter(function (otherRange) { | ||
return rangesOverlap(range, otherRange); | ||
}); | ||
try { | ||
for (var overlappingRanges_1 = tslib_1.__values(overlappingRanges), overlappingRanges_1_1 = overlappingRanges_1.next(); !overlappingRanges_1_1.done; overlappingRanges_1_1 = overlappingRanges_1.next()) { | ||
var overlappingRange = overlappingRanges_1_1.value; | ||
uniqueRanges.delete(overlappingRange); | ||
} | ||
export function getUniqueRanges(ranges) { | ||
const uniqueRanges = new Set(); | ||
ranges.forEach(range => { | ||
const overlappingRanges = [...uniqueRanges].filter(otherRange => rangesOverlap(range, otherRange)); | ||
for (const overlappingRange of overlappingRanges) { | ||
uniqueRanges.delete(overlappingRange); | ||
} | ||
catch (e_1_1) { e_1 = { error: e_1_1 }; } | ||
finally { | ||
try { | ||
if (overlappingRanges_1_1 && !overlappingRanges_1_1.done && (_a = overlappingRanges_1.return)) _a.call(overlappingRanges_1); | ||
} | ||
finally { if (e_1) throw e_1.error; } | ||
} | ||
uniqueRanges.add(squashRanges(tslib_1.__spread([range], overlappingRanges))); | ||
uniqueRanges.add(squashRanges([range, ...overlappingRanges])); | ||
}); | ||
return tslib_1.__spread(uniqueRanges); | ||
return [...uniqueRanges]; | ||
} | ||
exports.getUniqueRanges = getUniqueRanges; | ||
function rangesOverlap(rangeOne, rangeTwo) { | ||
var rangeOneEnd = rangeOne.start + rangeOne.duration; | ||
var rangeTwoEnd = rangeTwo.start + rangeTwo.duration; | ||
const rangeOneEnd = rangeOne.start + rangeOne.duration; | ||
const rangeTwoEnd = rangeTwo.start + rangeTwo.duration; | ||
return ( | ||
@@ -144,7 +112,7 @@ // rangeOne starts in rangeTwo | ||
function squashRanges(ranges) { | ||
var _a = tslib_1.__read(ranges), first = _a[0], rest = _a.slice(1); | ||
return rest.reduce(function (fullRange, range) { | ||
var start = Math.min(range.start, fullRange.start); | ||
const [first, ...rest] = ranges; | ||
return rest.reduce((fullRange, range) => { | ||
const start = Math.min(range.start, fullRange.start); | ||
return { | ||
start: start, | ||
start, | ||
duration: Math.max(range.start + range.duration, fullRange.start + fullRange.duration) - start, | ||
@@ -151,0 +119,0 @@ }; |
@@ -8,4 +8,12 @@ # Changelog | ||
## [1.3.2] - 2021-03-03 | ||
<!-- ## Unreleased --> | ||
## 1.3.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.3.2 - 2021-03-03 | ||
### Fixed | ||
@@ -15,3 +23,3 @@ | ||
## [1.3.0] - 2020-12-18 | ||
## 1.3.0 - 2020-12-18 | ||
@@ -22,7 +30,7 @@ ### Added | ||
## [1.2.10] - 2020-10-20 | ||
## 1.2.10 - 2020-10-20 | ||
- Added `tslib@^1.14.1` in the list of dependencies. [#1657](https://github.com/Shopify/quilt/pull/1657) | ||
## [1.2.2] - 2019-10-16 | ||
## 1.2.2 - 2019-10-16 | ||
@@ -33,3 +41,3 @@ ### Fixed | ||
## [1.2.1] - 2019-10-11 | ||
## 1.2.1 - 2019-10-11 | ||
@@ -40,3 +48,3 @@ ### Fixed | ||
## [1.2.0] - 2019-10-03 | ||
## 1.2.0 - 2019-10-03 | ||
@@ -51,3 +59,3 @@ ### Changed | ||
## [1.1.2] - 2019-03-27 | ||
## 1.1.2 - 2019-03-27 | ||
@@ -58,3 +66,3 @@ ### Fixed | ||
## [1.1.1] - 2019-03-04 | ||
## 1.1.1 - 2019-03-04 | ||
@@ -65,3 +73,3 @@ ### Fixed | ||
## [1.1.0] - 2019-03-02 | ||
## 1.1.0 - 2019-03-02 | ||
@@ -72,3 +80,3 @@ ### Added | ||
## [1.0.4] - 2019-02-21 | ||
## 1.0.4 - 2019-02-21 | ||
@@ -79,3 +87,3 @@ ### Fixed | ||
## [1.0.3] - 2019-01-11 | ||
## 1.0.3 - 2019-01-11 | ||
@@ -86,3 +94,3 @@ ### Fixed | ||
## [1.0.2] - 2019-01-11 | ||
## 1.0.2 - 2019-01-11 | ||
@@ -93,3 +101,3 @@ ### Fixed | ||
## [1.0.1] - 2019-01-11 | ||
## 1.0.1 - 2019-01-11 | ||
@@ -100,4 +108,4 @@ ### Fixed | ||
## [1.0.0] - 2019-01-30 | ||
## 1.0.0 - 2019-01-30 | ||
First version. |
{ | ||
"name": "@shopify/performance", | ||
"version": "1.3.3", | ||
"version": "1.3.4", | ||
"license": "MIT", | ||
@@ -8,5 +8,2 @@ "description": "Primitives for collecting browser performance metrics", | ||
"types": "index.d.ts", | ||
"scripts": { | ||
"build": "tsc --p tsconfig.json" | ||
}, | ||
"sideEffects": false, | ||
@@ -44,6 +41,3 @@ "publishConfig": { | ||
} | ||
}, | ||
"dependencies": { | ||
"tslib": "^1.14.1" | ||
} | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
0
158396
2926
- Removedtslib@^1.14.1
- Removedtslib@1.14.1(transitive)