Refactor driver hooks

index.html

@@ -931,7 +931,7 @@ npm install driver.js</pre
           onDeselected: (element, step) => {
             console.log("Deselected element", element, step);
           },
-          onHighlightStarted: (element, step) => {
+          onHighlightStarted: (element, step, { config, state }) => {
             console.log("Started highlighting element", element, step);
           },
           onHighlighted: (element, step) => {

src/config.ts

@@ -1,5 +1,8 @@
 import { DriveStep } from "./driver";
 import { AllowedButtons, PopoverDOM } from "./popover";
+import { State } from "./state";
+
+type DriverHook = (element: Element | undefined, step: DriveStep, opts: { config: Config; state: State }) => void;
 
 export type Config = {
   steps?: DriveStep[];
@@ -31,17 +34,16 @@ export type Config = {
   onPopoverRendered?: (popover: PopoverDOM) => void;
 
   // State based callbacks, called upon state changes
-  onOverlayClick?: (element: Element | undefined, step: DriveStep) => void;
-  onHighlightStarted?: (element: Element | undefined, step: DriveStep) => void;
-  onHighlighted?: (element: Element | undefined, step: DriveStep) => void;
-  onDeselected?: (element: Element | undefined, step: DriveStep) => void;
-  onDestroyStarted?: (element: Element | undefined, step: DriveStep) => void;
-  onDestroyed?: (element: Element | undefined, step: DriveStep) => void;
+  onHighlightStarted?: DriverHook;
+  onHighlighted?: DriverHook;
+  onDeselected?: DriverHook;
+  onDestroyStarted?: DriverHook;
+  onDestroyed?: DriverHook;
 
   // Event based callbacks, called upon events
-  onNextClick?: (element: Element | undefined, step: DriveStep) => void;
-  onPrevClick?: (element: Element | undefined, step: DriveStep) => void;
-  onCloseClick?: (element: Element | undefined, step: DriveStep) => void;
+  onNextClick?: DriverHook;
+  onPrevClick?: DriverHook;
+  onCloseClick?: DriverHook;
 };
 
 let currentConfig: Config = {};

src/driver.ts

@@ -78,7 +78,10 @@ export function driver(options: Config = {}) {
 
     const onNextClick = activeStep.popover?.onNextClick || getConfig("onNextClick");
     if (onNextClick) {
-      return onNextClick(activeElement, activeStep);
+      return onNextClick(activeElement, activeStep, {
+        config: getConfig(),
+        state: getState(),
+      });
     }
 
     moveNext();
@@ -166,7 +169,10 @@ export function driver(options: Config = {}) {
     // the hook for when user calls `destroy`, driver will get into infinite loop
     // not causing tour to be destroyed.
     if (withOnDestroyStartedHook && onDestroyStarted) {
-      onDestroyStarted(activeElement, activeStep!);
+      onDestroyStarted(activeElement, activeStep!, {
+        config: getConfig(),
+        state: getState(),
+      });
       return;
     }
 
@@ -186,11 +192,17 @@ export function driver(options: Config = {}) {
     if (activeElement && activeStep) {
       const isActiveDummyElement = activeElement.id === "driver-dummy-element";
       if (onDeselected) {
-        onDeselected(isActiveDummyElement ? undefined : activeElement, activeStep);
+        onDeselected(isActiveDummyElement ? undefined : activeElement, activeStep, {
+          config: getConfig(),
+          state: getState(),
+        });
       }
 
       if (onDestroyed) {
-        onDestroyed(isActiveDummyElement ? undefined : activeElement, activeStep);
+        onDestroyed(isActiveDummyElement ? undefined : activeElement, activeStep, {
+          config: getConfig(),
+          state: getState(),
+        });
       }
     }
   }

src/events.ts

@@ -4,12 +4,12 @@ import { getState, setState } from "./state";
 import { getConfig } from "./config";
 
 export function requireRefresh() {
-  const resizeTimeout = getState("resizeTimeout");
+  const resizeTimeout = getState("__resizeTimeout");
   if (resizeTimeout) {
     window.cancelAnimationFrame(resizeTimeout);
   }
 
-  setState("resizeTimeout", window.requestAnimationFrame(refreshActiveHighlight));
+  setState("__resizeTimeout", window.requestAnimationFrame(refreshActiveHighlight));
 }
 
 function onKeyup(e: KeyboardEvent) {

src/highlight.ts

@@ -74,12 +74,21 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
   const highlightedHook = getConfig("onHighlighted");
   const deselectedHook = fromStep?.onDeselected || getConfig("onDeselected");
 
+  const config = getConfig();
+  const state = getState();
+
   if (!isFirstHighlight && deselectedHook) {
-    deselectedHook(isFromDummyElement ? undefined : fromElement, fromStep!);
+    deselectedHook(isFromDummyElement ? undefined : fromElement, fromStep!, {
+      config,
+      state,
+    });
   }
 
   if (highlightStartedHook) {
-    highlightStartedHook(isToDummyElement ? undefined : toElement, toStep);
+    highlightStartedHook(isToDummyElement ? undefined : toElement, toStep, {
+      config,
+      state,
+    });
   }
 
   const hasDelayedPopover = !isFirstHighlight && isAnimatedTour;
@@ -88,7 +97,7 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
   hidePopover();
 
   const animate = () => {
-    const transitionCallback = getState("transitionCallback");
+    const transitionCallback = getState("__transitionCallback");
 
     // This makes sure that the repeated calls to transferHighlight
     // don't interfere with each other. Only the last call will be
@@ -112,10 +121,13 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
       trackActiveElement(toElement);
 
       if (highlightedHook) {
-        highlightedHook(isToDummyElement ? undefined : toElement, toStep);
+        highlightedHook(isToDummyElement ? undefined : toElement, toStep, {
+          config: getConfig(),
+          state: getState(),
+        });
       }
 
-      setState("transitionCallback", undefined);
+      setState("__transitionCallback", undefined);
       setState("previousStep", fromStep);
       setState("previousElement", fromElement);
       setState("activeStep", toStep);
@@ -125,7 +137,7 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
     window.requestAnimationFrame(animate);
   };
 
-  setState("transitionCallback", animate);
+  setState("__transitionCallback", animate);
   window.requestAnimationFrame(animate);
 
   bringInView(toElement);

src/stage.ts

@@ -14,7 +14,7 @@ export type StageDefinition = {
 // This method calculates the animated new position of the
 // stage (called for each frame by requestAnimationFrame)
 export function transitionStage(elapsed: number, duration: number, from: Element, to: Element) {
-  let activeStagePosition = getState("activeStagePosition");
+  let activeStagePosition = getState("__activeStagePosition");
 
   const fromDefinition = activeStagePosition ? activeStagePosition : from.getBoundingClientRect();
   const toDefinition = to.getBoundingClientRect();
@@ -32,7 +32,7 @@ export function transitionStage(elapsed: number, duration: number, from: Element
   };
 
   renderStage(activeStagePosition);
-  setState("activeStagePosition", activeStagePosition);
+  setState("__activeStagePosition", activeStagePosition);
 }
 
 export function trackActiveElement(element: Element) {
@@ -49,14 +49,14 @@ export function trackActiveElement(element: Element) {
     height: definition.height,
   };
 
-  setState("activeStagePosition", activeStagePosition);
+  setState("__activeStagePosition", activeStagePosition);
 
   renderStage(activeStagePosition);
 }
 
 export function refreshStage() {
-  const activeStagePosition = getState("activeStagePosition");
-  const stageSvg = getState("stageSvg");
+  const activeStagePosition = getState("__activeStagePosition");
+  const stageSvg = getState("__stageSvg");
 
   if (!activeStagePosition) {
     return;
@@ -86,11 +86,11 @@ function mountStage(stagePosition: StageDefinition) {
     emit("overlayClick");
   });
 
-  setState("stageSvg", stageSvg);
+  setState("__stageSvg", stageSvg);
 }
 
 function renderStage(stagePosition: StageDefinition) {
-  const stageSvg = getState("stageSvg");
+  const stageSvg = getState("__stageSvg");
 
   // TODO: cancel rendering if element is not visible
   if (!stageSvg) {
@@ -171,7 +171,7 @@ function generateStageSvgPathString(stage: StageDefinition) {
 }
 
 export function destroyStage() {
-  const stageSvg = getState("stageSvg");
+  const stageSvg = getState("__stageSvg");
   if (stageSvg) {
     stageSvg.remove();
   }

src/state.ts

@@ -3,10 +3,7 @@ import { PopoverDOM } from "./popover";
 import { DriveStep } from "./driver";
 
 export type State = {
-  // Whether driver is initialized or not
   isInitialized?: boolean;
-  // Used to bounce the resize event
-  resizeTimeout?: number;
 
   activeIndex?: number;
   activeElement?: Element;
@@ -15,12 +12,12 @@ export type State = {
   previousElement?: Element;
   previousStep?: DriveStep;
 
-  transitionCallback?: () => void;
-
-  activeStagePosition?: StageDefinition;
-  stageSvg?: SVGSVGElement;
-
   popover?: PopoverDOM;
+
+  __resizeTimeout?: number;
+  __transitionCallback?: () => void;
+  __activeStagePosition?: StageDefinition;
+  __stageSvg?: SVGSVGElement;
 };
 
 let currentState: State = {};