dropbox · Jonathan1600 · May 20, 2023 · May 10, 2023 · May 11, 2023 · May 11, 2023
diff --git a/src/.eslintrc.yaml b/src/.eslintrc.yaml
@@ -1,2 +1,4 @@
 env:
   browser: true
+rules:
+  '@typescript-eslint/ban-ts-comment': 'off'
diff --git a/src/index.ts b/src/index.ts
@@ -33,6 +33,16 @@ export const init = (options?: TtvcOptions) => {
     if (!event.persisted) return;
     void calculator.start(event.timeStamp, true);
   });
+
+  // restart measurement when a prerendered page is navigated to
+  //@ts-ignore prerendering is an experimental feature
+  if (document.prerendering) {
+    window.addEventListener(
+      'prerenderingchange',
+      (event) => void calculator.start(event.timeStamp),
+      true
+    );
+  }
 };
 
 /**

diff --git a/src/visuallyCompleteCalculator.ts b/src/visuallyCompleteCalculator.ts
@@ -100,6 +100,14 @@ class VisuallyCompleteCalculator {
     this.activeMeasurementIndex = navigationIndex;
     Logger.info('VisuallyCompleteCalculator.start()', '::', 'index =', navigationIndex);
 
+    const activationStart: number =
+      // @ts-ignore
+      (performance?.getEntriesByType?.('navigation')[0]?.activationStart as number) || 0;
+
+    if (activationStart > start) {
+      start = activationStart;
+    }
+
     // setup
     const cancel = () => {
       if (this.activeMeasurementIndex === navigationIndex) {

diff --git a/test/e2e/prerender1/index.html b/test/e2e/prerender1/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/dist/index.min.js"></script>
+    <script src="/analytics.js"></script>
+    <title>Document</title>
+    <link rel="prerender" href="/test/prerender1/index2?delay=2000" />
+  </head>
+  <body>
+    <script type="speculationrules">
+      {
+        "prerender": [
+          {
+            "source": "list",
+            "urls": ["http://localhost:3000/test/prerender1/index2?delay=2000"]
+          }
+        ]
+      }
+    </script>
+    <a href="/test/prerender1/index2?delay=2000">Prerendered Link</a>
+  </body>
+</html>
diff --git a/test/e2e/prerender1/index.spec.ts b/test/e2e/prerender1/index.spec.ts
@@ -0,0 +1,27 @@
+import {test, expect} from '@playwright/test';
+
+import {FUDGE} from '../../util/constants';
+import {getEntries} from '../../util/entries';
+
+test.describe('TTVC', () => {
+  //we had to skip this test since chromium does not support prerendering yet, hopefully in the future we can enforce it. Meanwhile you can test this changes manually by waiting a set amount before the prerender and then navigating, ttvc should be somewhere less than the delay all the way up to zero depending on how long you wait.
+  test.skip('a prerendered navigation', async ({page}) => {
+    await page.goto(`/test/prerender1`, {
+      waitUntil: 'networkidle',
+    });
+
+    await page.waitForTimeout(1000);
+
+    await page.click('a');
+
+    await page.waitForTimeout(2000);
+
+    const entries = await getEntries(page);
+
+    console.log(entries);
+
+    expect(entries.length).toBe(1);
+    expect(entries[0].duration).toBeGreaterThanOrEqual(1000);
+    expect(entries[0].duration).toBeLessThanOrEqual(1000 + FUDGE);
+  });
+});
diff --git a/test/e2e/prerender1/index2.html b/test/e2e/prerender1/index2.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/dist/index.min.js"></script>
+    <script src="/analytics.js"></script>
+    <title>Document</title>
+  </head>
+  <body>
+    <h3>Index 2 HTML</h3>
+  </body>
+</html>
diff --git a/test/e2e/prerender2/index.html b/test/e2e/prerender2/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/dist/index.min.js"></script>
+    <script src="/analytics.js"></script>
+    <title>Document</title>
+    <link rel="prerender" href="/test/prerender1/index2?delay=2000" />
+  </head>
+  <body>
+    <script type="speculationrules">
+      {
+        "prerender": [
+          {
+            "source": "list",
+            "urls": ["http://localhost:3000/test/prerender1/index2?delay=2000"]
+          }
+        ]
+      }
+    </script>
+    <a href="/test/prerender1/index2?delay=2000">Prerendered Link</a>
+  </body>
+</html>
diff --git a/test/e2e/prerender2/index.spec.ts b/test/e2e/prerender2/index.spec.ts
@@ -0,0 +1,25 @@
+import {test, expect} from '@playwright/test';
+
+import {FUDGE} from '../../util/constants';
+import {getEntries} from '../../util/entries';
+
+test.describe('TTVC', () => {
+  //we had to skip this test since chromium does not support prerendering yet, hopefully in the future we can enforce it. Meanwhile you can test this changes manually by waiting a set amount before the prerender and then navigating, ttvc should be somewhere less than the delay all the way up to zero depending on how long you wait.
+  test.skip('a prerendered navigation', async ({page}) => {
+    await page.goto(`/test/prerender1`, {
+      waitUntil: 'networkidle',
+    });
+
+    await page.waitForTimeout(2000);
+
+    await page.click('a');
+
+    await page.waitForTimeout(2000);
+
+    const entries = await getEntries(page);
+
+    expect(entries.length).toBe(1);
+    expect(entries[0].duration).toBeGreaterThanOrEqual(0);
+    expect(entries[0].duration).toBeLessThanOrEqual(0 + FUDGE);
+  });
+});
diff --git a/test/e2e/prerender2/index2.html b/test/e2e/prerender2/index2.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/dist/index.min.js"></script>
+    <script src="/analytics.js"></script>
+    <title>Document</title>
+  </head>
+  <body>
+    <h3>Index 2 HTML</h3>
+  </body>
+</html>