Merge pull request #290 from micmro/fix/288-with-bigint

Fix/288 with bigint

build-utils/grunt-config/browserify.js

@@ -1,7 +1,7 @@
 module.exports = {
   options: {
     plugin: [['tsify', {
-      'target': 'es5' 
+      'target': 'es2020'
     }]],
     banner: "<%= banner %>",
     browserifyOptions: {

package.json

@@ -52,7 +52,7 @@
     "tsify": "^5.0.4",
     "tslint": "~6.1.3",
     "tslint-eslint-rules": "^5.4.0",
-    "typescript": "^4.3.2",
+    "typescript": "^4.8.4",
     "whatwg-fetch": "^3.6.2"
   },
   "dependencies": {

src/ts/file-reader.ts

@@ -21,7 +21,7 @@ export function readFile(file: File,
       const harData = JSON.parse(rawData);
       callback(null, harData.log);
     } catch (e) {
-      callback(e);
+      callback(e as Error);
     }
   }
 

src/ts/transformers/har.ts

@@ -214,7 +214,7 @@ const getUserTimings = (currPage: Page, options: ChartOptions) => {
     name = escapeHtml(name);
 
     if (fullName !== name && currPage[`_userTime.endTimer-${name}`]) {
-      duration = currPage[`_userTime.endTimer-${name}`] - currPage[k];
+      duration = currPage[`_userTime.endTimer-${name}`] as number - currPage[k];
       return {
         duration,
         name: `${options.showUserTimingEndMarker ? fullName : name} (${currPage[k]} - ${currPage[k] + duration} ms)`,
@@ -279,18 +279,19 @@ const buildDetailTimingBlocks = (startRelative: number, harEntry: Entry): Waterf
  * @param  {number} startRelative - Number of milliseconds since page load started (`page.startedDateTime`)
  * @returns {Object}
  */
-const getTimePair = (key: string, harEntry: Entry, collect: WaterfallEntryTiming[], startRelative: number) => {
-  let wptKey;
+const getTimePair = (key: TimingType, harEntry: Entry, collect: WaterfallEntryTiming[], startRelative: number) => {
+  let wptKey: Exclude<TimingType, 'wait' | 'receive'>  | 'ttfb' | 'download';
+
   switch (key) {
     case "wait": wptKey = "ttfb"; break;
     case "receive": wptKey = "download"; break;
     default: wptKey = key;
   }
-  const preciseStart = parseInt(harEntry[`_${wptKey}_start`], 10);
-  const preciseEnd = parseInt(harEntry[`_${wptKey}_end`], 10);
+  const preciseStart = parseInt(`${harEntry[`_${wptKey}_start`]}`, 10);
+  const preciseEnd = parseInt(`${harEntry[`_${wptKey}_end`]}`, 10);
   const start = isNaN(preciseStart) ?
-    ((collect.length > 0) ? collect[collect.length - 1].end : startRelative) : preciseStart;
-  const end = isNaN(preciseEnd) ? (start + harEntry.timings[key]) : preciseEnd;
+  ((collect.length > 0) ? collect[collect.length - 1].end : startRelative) : preciseStart;
+  const end = isNaN(preciseEnd) ? (start + (harEntry.timings[key] ?? 0)) : preciseEnd;
 
   return {
     end: Math.round(end),

src/ts/waterfall/sub-components/svg-general-components.ts

@@ -70,14 +70,28 @@ const appendSecond = (context: Context, timeHolder: SVGGElement,
  */
 export function createTimeScale(context: Context, durationMs: number): SVGGElement {
   const timeHolder = svg.newG("time-scale full-width");
-  const subStepMs = Math.ceil(durationMs / 10000) * 200;
+  /** Constant to represent a Second in Milliseconds */
+  const secInMs = 1000;
+  /** Number of (Sub-)Steps in a second */
+  const stepsInASec = 5;
+  // more than 20sec doesn't leave space for sub-steps
+  const showSubSteps = durationMs < 20 * secInMs;
+
+  /** Space for a Step or SubStep - sub-steps rounded to 1st digit */
+  const subStepMs = showSubSteps
+      ? Math.ceil(durationMs / (10 * secInMs)) * (secInMs/stepsInASec)
+      : secInMs;
+
+
+  // need BigInt (`BigInt(10)` or `10n` notation) here
+  // to avoid floating point precision rounding errors
   /** steps between each major second marker */
-  const subStep = 1000 / subStepMs;
-  const secs = durationMs / 1000;
-  const steps = durationMs / subStepMs;
+  const subStep = Number(1000n  / BigInt(subStepMs));
+  const secs = durationMs / secInMs;
+  const steps = Math.floor(durationMs / subStepMs);
 
   for (let i = 0; i <= steps; i++) {
-    const isMarkerStep = i % subStep < 0.000000001; // to avoid rounding issues
+    const isMarkerStep = i % subStep === 0;
     const secValue = i / subStep;
 
     appendSecond(context, timeHolder, secs, secValue, isMarkerStep);

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "noEmit": true,
-    "target": "ES6",
+    "target": "ES2020",
     "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,