feat: Adds an option to run an asnyc function before a step is shown.

index.html

@@ -213,6 +213,7 @@ <h2>Tour Feature</h2>
         <button id="basic-tour">Animated Tour</button>
         <button id="non-animated-tour">Non-Animated Tour</button>
         <button id="async-tour">Asynchronous Tour</button>
+        <button id="before-show-tour">Async action before show</button>
         <button id="confirm-exit-tour">Confirm on Exit</button>
         <button id="progress-tour">Progress Text</button>
         <button id="progress-tour-template">Progress Text Template</button>
@@ -627,6 +628,51 @@ <h2>Usage and Demo</h2>
         driverObj.drive();
       });
 
+      document.getElementById("before-show-tour").addEventListener("click", () => {
+        const driverObj = driver({
+          animate: false,
+          overlayOpacity: 0.3,
+          showProgress: true,
+          progressText: "{{current}} / {{total}}",
+          steps: [
+            {
+              element: ".page-header",
+              popover: {
+                title: "Async Driver.js",
+                description:
+                  "Driver.js has been written from the ground up. The new version is more powerful, has less surprises, more customizable and tons of new features.",
+                side: "bottom",
+                align: "start",
+              },
+            },
+            {
+              element: ".page-header h1",
+              popover: {
+                title: "Before show Test",
+                description: "By adding `beforeShow` you can run async functions before showing the highlight.",
+                side: "left",
+                align: "start",
+              },
+              beforeShow: () => new Promise((resolve) => { 
+                  console.log('this is the async function that runs');
+                  setTimeout(resolve, 1000); 
+                }),
+            },
+            {
+              element: "#scrollable-area",
+              popover: {
+                title: "Before show Test",
+                description: "If you go to the previous from this step, the `beforeShow` will run again",
+                side: "left",
+                align: "start",
+              },
+            },
+          ],
+        });
+
+        driverObj.drive();
+      });
+
       document.getElementById("basic-tour").addEventListener("click", () => {
         const driverObj = driver({
           showProgress: true,

src/driver.ts

@@ -14,6 +14,7 @@ export type DriveStep = {
   onDeselected?: DriverHook;
   popover?: Popover;
   disableActiveInteraction?: boolean;
+  beforeShow?: () => Promise<any>;
 };
 
 export interface Driver {

src/highlight.ts

@@ -1,5 +1,5 @@
 import { DriveStep } from "./driver";
-import { refreshOverlay, trackActiveElement, transitionStage } from "./overlay";
+import { destroyOverlay, refreshOverlay, trackActiveElement, transitionStage } from "./overlay";
 import { getConfig, getCurrentDriver } from "./config";
 import { hidePopover, renderPopover, repositionPopover } from "./popover";
 import { bringInView } from "./utils";
@@ -27,7 +27,7 @@ function mountDummyElement(): Element {
   return element;
 }
 
-export function highlight(step: DriveStep) {
+export function highlight(step: DriveStep, handleBeforeShow: boolean = true) {
   const { element } = step;
   let elemObj =
     typeof element === "function" ? element() : typeof element === "string" ? document.querySelector(element) : element;
@@ -39,8 +39,21 @@ export function highlight(step: DriveStep) {
   if (!elemObj) {
     elemObj = mountDummyElement();
   }
-
+
+  if (handleBeforeShow && step.beforeShow) {
+    // if there is a before show promise we remove the previous 
+    // popover and higlight before that step is shown
+    destroyOverlay();
+    setState('__overlaySvg', undefined);
+    hidePopover();
+    step.beforeShow().then(() => {
+        highlight(step, false);
+      }
+    );
+    return;
+  }
   transferHighlight(elemObj, step);
+
 }
 
 export function refreshActiveHighlight() {