Add EventOptions interface, tweak data format (#2631)

* 🐛 Add additional interface for tour and step assignment * Move assignment back to shepherd.ts * Tweak data format --------- Co-authored-by: Robert Wagner <[email protected]>
shipshapecode · Mar 12, 2024 · 68dc797 · 68dc797
1 parent ebb15af
commit 68dc797
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 13 deletions.
diff --git a/shepherd.js/src/shepherd.ts b/shepherd.js/src/shepherd.ts
@@ -1,3 +1,10 @@
-import { Shepherd } from './tour';
+import { Shepherd, Tour } from './tour';
+import { NoOp } from './utils/general';
+import { Step } from './step';
+
+const isServerSide = typeof window === 'undefined';
+
+Shepherd.Step = isServerSide ? NoOp : Step;
+Shepherd.Tour = isServerSide ? NoOp : Tour;
 
 export default Shepherd;
diff --git a/shepherd.js/src/step.ts b/shepherd.js/src/step.ts
@@ -16,7 +16,7 @@ import {
 } from './utils/floating-ui';
 // @ts-expect-error TODO: not yet typed
 import ShepherdElement from './components/shepherd-element.svelte';
-import { Tour } from './tour';
+import { type Tour } from './tour';
 
 /**
  * The options for the step
@@ -340,7 +340,7 @@ export class Step extends Evented {
 
   /**
    * Returns the tour for the step
-   * @return {Tour} The tour instance
+   * @return The tour instance
    */
   getTour() {
     return this.tour;

diff --git a/shepherd.js/src/tour.ts b/shepherd.js/src/tour.ts
@@ -12,17 +12,18 @@ import DataRequest from './utils/datarequest';
 import { normalizePrefix, uuid } from './utils/general';
 // @ts-expect-error TODO: not yet typed
 import ShepherdModal from './components/shepherd-modal.svelte';
+import type { NoOp } from './utils/general';
 
 interface Actor {
   actorId: number;
 }
 
-class NoOp {
-  constructor() {}
+interface EventOptions {
+  previous?: Step | null;
+  step?: Step | null;
+  tour: Tour;
 }
 
-const isServerSide = typeof window === 'undefined';
-
 /**
  * The options for the tour
  */
@@ -94,8 +95,8 @@ export class ShepherdPro extends Evented {
   apiKey?: string;
   apiPath?: string;
   dataRequester?: DataRequest;
-  Step = isServerSide ? NoOp : Step;
-  Tour = isServerSide ? NoOp : Tour;
+  declare Step: NoOp | Step;
+  declare Tour: NoOp | Tour;
 
   init(apiKey?: string, apiPath?: string) {
     if (!apiKey) {
@@ -193,14 +194,30 @@ export class Tour extends Evented {
       this.currentUserId = shepherdProId;
 
       this.trackedEvents.forEach((event) =>
-        this.on(event, (opts: Record<string, unknown>) => {
+        this.on(event, (opts: EventOptions) => {
           const { tour } = opts;
-          const { id, steps } = tour as Tour;
+          const { id, steps } = tour;
+          let position;
+
+          if (event !== 'active') {
+            const { step: currentStep } = opts;
+
+            if (currentStep) {
+              position =
+                steps.findIndex((step) => step.id === currentStep.id) + 1;
+            }
+          }
 
           const data = {
             currentUserId: this.currentUserId,
             eventType: event,
-            tour: { id, numberOfSteps: steps.length }
+            journeyData: {
+              id,
+              currentStep: position,
+              numberOfSteps: steps.length,
+              steps,
+              tourOptions: tour.options
+            }
           };
           this.dataRequester?.sendEvents({ data });
         })

diff --git a/shepherd.js/src/utils/general.ts b/shepherd.js/src/utils/general.ts
@@ -1,6 +1,10 @@
 import { type StepOptionsAttachTo, type Step } from '../step';
 import { isFunction, isString } from './type-check';
 
+export class NoOp {
+  constructor() {}
+}
+
 /**
  * Ensure class prefix ends in `-`
  * @param prefix - The prefix to prepend to the class names generated by nano-css
@@ -34,7 +38,9 @@ export function parseAttachTo(step: Step) {
     // Can't override the element in user opts reference because we can't
     // guarantee that the element will exist in the future.
     try {
-      returnOpts.element = document.querySelector(returnOpts.element) as HTMLElement;
+      returnOpts.element = document.querySelector(
+        returnOpts.element
+      ) as HTMLElement;
     } catch (e) {
       // TODO
     }