Update to Shepherd 14.x

Author: RobbieTheWagner

.prettierrc.js

@@ -0,0 +1,8 @@
+"use strict";
+
+module.exports = {
+  arrowParens: "always",
+  proseWrap: "always",
+  trailingComma: "none",
+  singleQuote: true,
+};

package-lock.json

@@ -25,7 +25,7 @@
     "@angular/platform-browser-dynamic": "^19.0.0",
     "core-js": "^3.39.0",
     "rxjs": "^7.8.1",
-    "shepherd.js": "^11.2.0",
+    "shepherd.js": "^14.4.0",
     "tslib": "^2.8.0",
     "zone.js": "~0.15.0"
   },
@@ -58,6 +58,7 @@
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "ng-packagr": "^19.0.0",
+    "prettier": "^3.4.2",
     "protractor": "~7.0.0",
     "release-it": "^17.10.0",
     "ts-node": "~10.9.2",

package.json

@@ -1,4 +1,4 @@
-import Step from 'shepherd.js/src/types/step';
+import { type StepOptions } from 'shepherd.js';
 
 export const builtInButtons = {
   cancel: {
@@ -20,15 +20,15 @@ export const builtInButtons = {
   }
 };
 
-export const defaultStepOptions: Step.StepOptions = {
+export const defaultStepOptions: StepOptions = {
   classes: 'shepherd-theme-arrows custom-default-class',
   scrollTo: true,
   cancelIcon: {
     enabled: true
   }
 };
 
-export const steps: Step.StepOptions[] = [
+export const steps: StepOptions[] = [
   {
     attachTo: {
       element: '.first-element',

projects/shepherd-tester/src/app/data.ts

@@ -20,7 +20,7 @@
     "url": "https://github.com/rwwagner90"
   },
   "dependencies": {
-    "shepherd.js": "^11.0.0"
+    "shepherd.js": "^14.4.0"
   },
   "peerDependencies": {
     "@angular/common": "^19.0.0",

projects/shepherd/package.json

@@ -29,10 +29,7 @@ const steps = [
         element: '.test-element',
         on: 'bottom'
       },
-      buttons: [
-        builtInButtons.cancel,
-        builtInButtons.next
-      ],
+      buttons: [builtInButtons.cancel, builtInButtons.next],
       classes: 'custom-class-name-1 custom-class-name-2',
       title: 'Welcome to Ember-Shepherd!',
       text: 'Test text',
@@ -53,7 +50,7 @@ describe('ShepherdService', () => {
       start() {
         expect(true).toBeTruthy('The tour was started');
       }
-    }
+    };
 
     service.addSteps(steps);
 
@@ -67,7 +64,10 @@ describe('ShepherdService', () => {
     const service: ShepherdService = TestBed.inject(ShepherdService);
     const mockTourObject = {
       start() {
-        expect(steps[0].options.scrollToHandler()).toBe('custom scrollToHandler', 'The handler was passed through as an option on the step');
+        expect(steps[0]?.options.scrollToHandler()).toBe(
+          'custom scrollToHandler',
+          'The handler was passed through as an option on the step'
+        );
       }
     };
 

projects/shepherd/src/lib/shepherd.service.spec.ts

@@ -1,77 +1,81 @@
 import { Injectable } from '@angular/core';
-import Shepherd from 'shepherd.js';
+import { Tour, type TourOptions, type StepOptions } from 'shepherd.js';
 import { elementIsHidden } from './utils/dom';
 import { makeButton } from './utils/buttons';
-import Step from 'shepherd.js/src/types/step';
+
+interface RequiredElement {
+  message: string;
+  selector: string;
+  title: string;
+}
 @Injectable({
   providedIn: 'root'
 })
 export class ShepherdService {
-  confirmCancel = false;
-  confirmCancelMessage: string = null;
-  defaultStepOptions: Step.StepOptions = {};
-  errorTitle = null;
+  confirmCancel: TourOptions['confirmCancel'] = false;
+  confirmCancelMessage?: TourOptions['confirmCancelMessage'];
+  defaultStepOptions: StepOptions = {};
+  errorTitle?: string;
+  exitOnEsc = true;
   isActive = false;
-  keyboardNavigation = true;
-  messageForUser: string = null;
+  keyboardNavigation: TourOptions['keyboardNavigation'] = true;
+  messageForUser: string | null = null;
   modal = false;
-  requiredElements = [];
+  requiredElements: Array<RequiredElement> = [];
   tourName = undefined;
-  tourObject: Shepherd.Tour = null;
-  exitOnEsc = true;
+  tourObject: Tour | null = null;
 
-  constructor () {
-  }
+  constructor() {}
 
   /**
    * Get the tour object and call back
    */
   back() {
-    this.tourObject.back();
+    this.tourObject?.back();
   }
 
   /**
    * Cancel the tour
    */
   cancel() {
-    this.tourObject.cancel();
+    this.tourObject?.cancel();
   }
 
   /**
    * Complete the tour
    */
   complete() {
-    this.tourObject.complete();
+    this.tourObject?.complete();
   }
 
   /**
    * Hides the current step
    */
   hide() {
-    this.tourObject.hide();
+    this.tourObject?.hide();
   }
 
   /**
    * Advance the tour to the next step
    */
   next() {
-    this.tourObject.next();
+    this.tourObject?.next();
   }
 
   /**
    * Show a specific step, by passing its id
    * @param id The id of the step you want to show
    */
   show(id: string | number) {
-    this.tourObject.show(id);
+    this.tourObject?.show(id);
   }
 
   /**
    * Start the tour
    */
   start() {
     this.isActive = true;
-    this.tourObject.start();
+    this.tourObject?.start();
   }
 
   /**
@@ -86,24 +90,26 @@ export class ShepherdService {
    * Take a set of steps and create a tour object based on the current configuration
    * @param steps An array of steps
    */
-  addSteps(steps: Array<Step.StepOptions>) {
+  addSteps(steps: Array<StepOptions>) {
     this._initialize();
     const tour = this.tourObject;
 
-    // Return nothing if there are no steps
-    if (!steps || !Array.isArray(steps) || steps.length === 0) {
+    // Return nothing if there are no steps or if somehow there is no tour.
+    if (!tour || !steps || !Array.isArray(steps) || steps.length === 0) {
       return;
     }
 
     if (!this.requiredElementsPresent()) {
       tour.addStep({
-        buttons: [{
-          text: 'Exit',
-          action: tour.cancel
-        }],
+        buttons: [
+          {
+            text: 'Exit',
+            action: tour.cancel
+          }
+        ],
         id: 'error',
         title: this.errorTitle,
-        text: [this.messageForUser]
+        text: [this.messageForUser as string]
       });
       return;
     }
@@ -128,7 +134,10 @@ export class ShepherdService {
     this.requiredElements.forEach((element) => {
       const selectedElement = document.querySelector(element.selector);
 
-      if (allElementsPresent && (!selectedElement || elementIsHidden(selectedElement))) {
+      if (
+        allElementsPresent &&
+        (!selectedElement || elementIsHidden(selectedElement as HTMLElement))
+      ) {
         allElementsPresent = false;
         this.errorTitle = element.title;
         this.messageForUser = element.message;
@@ -142,7 +151,7 @@ export class ShepherdService {
    * Initializes the tour, creates a new Shepherd.Tour. sets options, and binds events
    */
   private _initialize() {
-    const tourObject = new Shepherd.Tour({
+    const tourObject = new Tour({
       confirmCancel: this.confirmCancel,
       confirmCancelMessage: this.confirmCancelMessage,
       defaultStepOptions: this.defaultStepOptions,
@@ -155,6 +164,6 @@ export class ShepherdService {
     tourObject.on('complete', this.onTourFinish.bind(this, 'complete'));
     tourObject.on('cancel', this.onTourFinish.bind(this, 'cancel'));
 
-    this.tourObject = tourObject;
+    this.tourObject = tourObject as Tour;
   }
 }

projects/shepherd/src/lib/shepherd.service.ts

@@ -1,3 +1,10 @@
+import type { StepOptionsButton } from 'shepherd.js';
+import type { ShepherdService } from '../shepherd.service';
+
+export type AngularShepherdButton = StepOptionsButton & {
+  type?: 'back' | 'cancel' | 'next';
+};
+
 /**
  * Creates a button of the specified type, with the given classes and text
  *
@@ -6,7 +13,10 @@
  * @param button.text The text for the button
  * @param button.action The action to call
  */
-export function makeButton(button) {
+export function makeButton(
+  this: ShepherdService,
+  button: AngularShepherdButton
+) {
   const { classes, disabled, label, secondary, type, text } = button;
   const builtInButtonTypes = ['back', 'cancel', 'next'];
 
@@ -15,7 +25,9 @@ export function makeButton(button) {
   }
 
   if (builtInButtonTypes.indexOf(type) === -1) {
-    throw new Error(`'type' property must be one of 'back', 'cancel', or 'next'`);
+    throw new Error(
+      `'type' property must be one of 'back', 'cancel', or 'next'`
+    );
   }
 
   return {