Merge pull request #87 from GoogleChrome/bfcache

Add support for reporting metrics on bfcache restore

.eslintrc

@@ -33,7 +33,7 @@
         "max-len": [2, {
           "ignorePattern": "^\\s*import|= require\\(|^\\s*it\\(|^\\s*describe\\(",
           "ignoreUrls": true
-        }]
+        }],
       }
     },
     {
@@ -47,6 +47,7 @@
         "@typescript-eslint/no-use-before-define": "off",
         "@typescript-eslint/explicit-function-return-type": "off",
         "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
         "@typescript-eslint/camelcase": "off",
         "node/no-missing-import": "off",
         "node/no-unsupported-features/es-syntax": "off",

external-polyfill.js

@@ -0,0 +1,2 @@
+// Creates the `web-vitals/external-polyfill` import in node-based bundlers.
+export * from './dist/web-vitals.external-polyfill.js';

package.json

@@ -14,7 +14,7 @@
     "build:ts": "tsc -b",
     "build:js": "rollup -c",
     "clean": "rm -rf dist tsconfig.tsbuildinfo",
-    "dev": "run-p watch serve",
+    "dev": "run-p watch test:server",
     "lint": "eslint \"*.js\" \"src/**/*.ts\" \"test/**/*.js\"",
     "lint:fix": "eslint --fix \"*.js\" \"src/**/*.ts\" \"test/**/*.js\"",
     "postversion": "git push --follow-tags",
@@ -60,6 +60,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.3",
     "@babel/preset-env": "^7.12.1",
+    "@rollup/plugin-replace": "^2.3.4",
     "@typescript-eslint/eslint-plugin": "^4.7.0",
     "@typescript-eslint/parser": "^4.7.0",
     "@wdio/cli": "^6.7.4",

rollup.config.js

@@ -13,18 +13,11 @@
  limitations under the License.
 */
 
+import replace from '@rollup/plugin-replace';
 import {terser} from 'rollup-plugin-terser';
 import babel from 'rollup-plugin-babel';
 
-
-const baseOpts = {
-  input: 'dist/index.js',
-  watch: {
-    clearScreen: false,
-  },
-};
-
-const configurePlugins = ({module}) => {
+const configurePlugins = ({module, externalPolyfill = false}) => {
   return [
     babel({
       presets: [['@babel/preset-env', {
@@ -38,25 +31,57 @@ const configurePlugins = ({module}) => {
       mangle: true,
       compress: true,
     }),
+    replace({
+      'self.__WEB_VITALS_EXTERNAL_POLYFILL__': externalPolyfill,
+    })
   ]
 }
 
-export default [
+const configs = [
+  {
+    input: 'dist/modules/index.js',
+    output: {
+      format: 'esm',
+      file: './dist/web-vitals.full.js',
+    },
+    plugins: configurePlugins({module: true, externalPolyfill: false}),
+  },
+  {
+    input: 'dist/modules/index.js',
+    output: {
+      format: 'umd',
+      file: `./dist/web-vitals.full.umd.js`,
+      name: 'webVitals',
+    },
+    plugins: configurePlugins({module: false, externalPolyfill: false}),
+  },
   {
-    ...baseOpts,
+    input: 'dist/modules/index.js',
     output: {
       format: 'esm',
-      file: './dist/web-vitals.es5.min.js',
+      file: './dist/web-vitals.external-polyfill.js',
     },
-    plugins: configurePlugins({module: true}),
+    plugins: configurePlugins({module: true, externalPolyfill: true}),
   },
   {
-    ...baseOpts,
+    input: 'dist/modules/index.js',
     output: {
       format: 'umd',
-      file: './dist/web-vitals.es5.umd.min.js',
+      file: `./dist/web-vitals.external-polyfill.umd.js`,
+      name: 'webVitals',
+    },
+    plugins: configurePlugins({module: false, externalPolyfill: true}),
+  },
+  {
+    input: 'dist/modules/polyfill.js',
+    output: {
+      format: 'iife',
+      file: './dist/polyfill.js',
       name: 'webVitals',
+      strict: false,
     },
     plugins: configurePlugins({module: false}),
   },
 ];
+
+export default configs;

src/getCLS.ts

@@ -17,6 +17,7 @@
 import {initMetric} from './lib/initMetric.js';
 import {observe, PerformanceEntryHandler} from './lib/observe.js';
 import {onHidden} from './lib/onHidden.js';
+import {onBFCacheRestore} from './lib/onBFCacheRestore.js';
 import {bindReporter} from './lib/bindReporter.js';
 import {ReportHandler} from './types.js';
 
@@ -28,8 +29,7 @@ interface LayoutShift extends PerformanceEntry {
 }
 
 export const getCLS = (onReport: ReportHandler, reportAllChanges = false) => {
-  const metric = initMetric('CLS', 0);
-
+  let metric = initMetric('CLS', 0);
   let report: ReturnType<typeof bindReporter>;
 
   const entryHandler = (entry: LayoutShift) => {
@@ -49,5 +49,10 @@ export const getCLS = (onReport: ReportHandler, reportAllChanges = false) => {
       po.takeRecords().map(entryHandler as PerformanceEntryHandler);
       report();
     });
+
+    onBFCacheRestore(() => {
+      metric = initMetric('CLS', 0);
+      report = bindReporter(onReport, metric, reportAllChanges);
+    });
   }
 };

src/getFCP.ts

@@ -19,13 +19,13 @@ import {finalMetrics} from './lib/finalMetrics.js';
 import {getFirstHidden} from './lib/getFirstHidden.js';
 import {initMetric} from './lib/initMetric.js';
 import {observe} from './lib/observe.js';
+import {onBFCacheRestore} from './lib/onBFCacheRestore.js';
 import {ReportHandler} from './types.js';
 
 
 export const getFCP = (onReport: ReportHandler) => {
-  const metric = initMetric('FCP');
   const firstHidden = getFirstHidden();
-
+  let metric = initMetric('FCP');
   let report: ReturnType<typeof bindReporter>;
 
   const entryHandler = (entry: PerformanceEntry) => {
@@ -47,5 +47,17 @@ export const getFCP = (onReport: ReportHandler) => {
   const po = observe('paint', entryHandler);
   if (po) {
     report = bindReporter(onReport, metric);
+
+    onBFCacheRestore((event) => {
+      metric = initMetric('FCP');
+      report = bindReporter(onReport, metric);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          metric.value = performance.now() - event.timeStamp;
+          finalMetrics.add(metric);
+          report();
+        });
+      });
+    });
   }
 };