Config: Allow overriding IDLE_TIMEOUT option

dropbox · Apr 14, 2022 · d8eb0c2 · d8eb0c2
1 parent 3081cfd
commit d8eb0c2
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 17 deletions.
diff --git a/src/constants.ts b/src/constants.ts
diff --git a/src/index.ts b/src/index.ts
@@ -5,11 +5,22 @@ import {
   VisuallyCompleteCalculator,
 } from './visuallyCompleteCalculator.js';
 
+type TtvcOptions = {
+  idleTimeout?: number;
+};
+
+/** A duration in ms to wait before declaring the page idle. */
+export let IDLE_TIMEOUT = 200;
+
 let calculator: VisuallyCompleteCalculator;
 
-// Start monitoring initial pageload
-// TODO: Should we ask library consumers to manually initialize?
-export const init = () => {
+/**
+ *  Start ttvc and begin monitoring network activity and visual changes.
+ */
+export const init = (options?: TtvcOptions) => {
+  // apply options
+  if (options?.idleTimeout) IDLE_TIMEOUT = options.idleTimeout;
+
   calculator = getVisuallyCompleteCalculator();
   void calculator.start();
   window.addEventListener('locationchange', () => void calculator.start(performance.now()));

diff --git a/src/requestAllIdleCallback.ts b/src/requestAllIdleCallback.ts
@@ -1,10 +1,10 @@
-import {MINIMUM_IDLE_MS} from './constants';
+import {IDLE_TIMEOUT} from './index';
 import {Message, getNetworkIdleObservable} from './networkIdleObservable';
 import {requestIdleCallback} from './utils';
 
 /**
  * Request a callback when the CPU and network have both been simultaneously
- * idle for MINIMUM_IDLE_MS.
+ * idle for IDLE_TIMEOUT.
  *
  * NOTE: will only trigger once
  */
@@ -37,7 +37,7 @@ export function requestAllIdleCallback(callback: () => void) {
     timeout = window.setTimeout(() => {
       callback();
       unsubscribe();
-    }, MINIMUM_IDLE_MS);
+    }, IDLE_TIMEOUT);
   };
 
   const unsubscribe = networkIdleObservable.subscribe(handleNetworkChange);

diff --git a/src/visuallyCompleteCalculator.ts b/src/visuallyCompleteCalculator.ts
@@ -9,6 +9,9 @@ export type MetricSubscriber = (measurement: number) => void;
  * TODO: Document
  */
 class VisuallyCompleteCalculator {
+  public debug = false;
+  public idleTimeout = 200;
+
   private inViewportMutationObserver: InViewportMutationObserver;
   private inViewportImageObserver: InViewportImageObserver;
 

diff --git a/test/unit/requestAllIdleCallback.jest.ts b/test/unit/requestAllIdleCallback.jest.ts
@@ -1,5 +1,5 @@
 import {decrementAjaxCount, incrementAjaxCount} from '../../src';
-import {MINIMUM_IDLE_MS} from '../../src/constants';
+import {IDLE_TIMEOUT} from '../../src';
 import {requestAllIdleCallback} from '../../src/requestAllIdleCallback';
 import {FUDGE} from '../util/constants';
 
@@ -13,29 +13,29 @@ describe('requestAllIdleCallback', () => {
     requestAllIdleCallback(callback);
   });
 
-  it('waits MINIMUM_IDLE_MS before resolving', async () => {
-    await wait(MINIMUM_IDLE_MS);
+  it('waits IDLE_TIMEOUT before resolving', async () => {
+    await wait(IDLE_TIMEOUT);
     expect(callback).not.toHaveBeenCalled();
     await wait(FUDGE);
     expect(callback).toHaveBeenCalled();
   });
 
   it('respects pending ajax requests', async () => {
     incrementAjaxCount();
-    await wait(MINIMUM_IDLE_MS + FUDGE);
+    await wait(IDLE_TIMEOUT + FUDGE);
     expect(callback).not.toHaveBeenCalled();
 
     decrementAjaxCount();
-    await wait(MINIMUM_IDLE_MS + FUDGE);
+    await wait(IDLE_TIMEOUT + FUDGE);
     expect(callback).toHaveBeenCalled();
   });
 
-  it('does not trigger callback during idle periods less than MINIMUM_IDLE_MS', async () => {
+  it('does not trigger callback during idle periods less than IDLE_TIMEOUT', async () => {
     incrementAjaxCount();
     decrementAjaxCount();
-    await wait(MINIMUM_IDLE_MS / 2);
+    await wait(IDLE_TIMEOUT / 2);
     incrementAjaxCount();
-    await wait(MINIMUM_IDLE_MS + FUDGE);
+    await wait(IDLE_TIMEOUT + FUDGE);
     expect(callback).not.toHaveBeenCalled();
   });
 });