Use tracked properties for everything (#1711)

Author: RobbieTheWagner

ember-shepherd/.eslintignore

@@ -4,6 +4,7 @@
 # compiled output
 /dist/
 /declarations/
+/tmp/
 
 # misc
 /coverage/

ember-shepherd/package.json

@@ -29,7 +29,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "concurrently \"npm:build:*\" --names \"build:\"",
+    "build": "concurrently \"pnpm:build:*\" --names \"build:\"",
     "build:js": "rollup --config",
     "build:types": "tsc",
     "lint": "concurrently 'pnpm:lint:*(!fix)' --names 'lint:'",
@@ -40,42 +40,42 @@
     "lint:js:fix": "eslint . --fix",
     "lint:types": "tsc --emitDeclarationOnly false --noEmit",
     "prepack": "pnpm run build",
-    "start": "concurrently \"npm:start:*\" --names \"start:\"",
+    "start": "concurrently \"pnpm:start:*\" --names \"start:\"",
     "start:js": "rollup --config --watch --no-watch.clearScreen",
     "start:types": "tsc --watch",
     "test": "echo 'A v2 addon does not have tests, run tests in test-app'",
     "prepare": "pnpm run build"
   },
   "dependencies": {
-    "@embroider/addon-shim": "^1.8.7",
-    "decorator-transforms": "^2.0.0",
     "@babel/core": "^7.26.0",
-    "shepherd.js": "^14.1.0"
+    "@embroider/addon-shim": "^1.9.0",
+    "decorator-transforms": "^2.3.0",
+    "shepherd.js": "^14.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/runtime": "^7.24.4",
+    "@babel/eslint-parser": "^7.25.9",
+    "@babel/plugin-transform-typescript": "^7.25.9",
+    "@babel/runtime": "^7.26.0",
     "@embroider/addon-dev": "^4.3.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "babel-plugin-ember-template-compilation": "^2.2.5",
-    "@babel/plugin-transform-typescript": "^7.23.6",
-    "@tsconfig/ember": "^3.0.5",
+    "@tsconfig/ember": "^3.0.8",
+    "babel-plugin-ember-template-compilation": "^2.3.0",
     "concurrently": "^8.2.2",
     "ember-source": "~5.12.0",
     "ember-template-lint": "^6.0.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-ember": "^12.0.2",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^17.3.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.2.5",
-    "prettier-plugin-ember-template-tag": "^2.0.2",
-    "rollup": "^4.16.4",
+    "eslint-plugin-ember": "^12.3.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-n": "^17.14.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "prettier": "^3.4.1",
+    "prettier-plugin-ember-template-tag": "^2.0.4",
+    "rollup": "^4.27.4",
     "rollup-plugin-copy": "^3.5.0",
-    "typescript": "^5.4.2",
-    "webpack": "^5.95.0"
+    "typescript": "^5.7.2",
+    "webpack": "^5.96.1"
   },
   "peerDependencies": {
     "ember-source": "^3.28.0 || >= 4.0.0"

ember-shepherd/src/services/tour.ts

@@ -1,5 +1,3 @@
-/* eslint-disable ember/avoid-leaking-state-in-ember-objects */
-import { set } from '@ember/object';
 import { isEmpty, isPresent } from '@ember/utils';
 import Service from '@ember/service';
 import Evented from '@ember/object/evented';
@@ -37,7 +35,6 @@ interface EmberShepherdStepOptions extends Omit<StepOptions, 'buttons'> {
  * @class Tour
  */
 export default class TourService extends Service.extend(Evented) {
-  declare tourObject: Tour;
   declare tourName?: string;
 
   // Configuration Options
@@ -95,7 +92,7 @@ export default class TourService extends Service.extend(Evented) {
    * @property defaultStepOptions
    * @type StepOptions
    */
-  defaultStepOptions: StepOptions = {};
+  @tracked defaultStepOptions: StepOptions = {};
 
   /**
    * @default undefined
@@ -165,7 +162,7 @@ export default class TourService extends Service.extend(Evented) {
    *
    * _Example_
    * ```js
-   * this.tour.set('requiredElements', [
+   * this.tour.requiredElements = [
    *   {
    *     selector: '.search-result-element',
    *     message: 'No search results found. Please execute another search, and try to start the tour again.',
@@ -176,7 +173,7 @@ export default class TourService extends Service.extend(Evented) {
    *     message: 'User not logged in, please log in to start this tour.',
    *     title: 'Please login'
    *   },
-   * ]);
+   * ];
    * ```
 
    * > **default value:** `[]`
@@ -185,8 +182,15 @@ export default class TourService extends Service.extend(Evented) {
    * @property requiredElements
    * @type Array
    */
-  requiredElements = [];
-  steps = [];
+  @tracked requiredElements = [];
+
+  /**
+   * A reference to the Shepherd Tour instance.
+   *
+   * @property tourObject
+   * @type Tour
+   */
+  @tracked declare tourObject: Tour;
 
   /**
    * Take a set of steps, create a tour object based on the current configuration and load the shepherd.js dependency.
@@ -366,7 +370,7 @@ export default class TourService extends Service.extend(Evented) {
         'the Promise from addSteps must be in a resolved state before the tour can be started',
       );
     }
-    set(this, 'isActive', true);
+    this.isActive = true;
     tourObject.start();
   }
 
@@ -390,7 +394,7 @@ export default class TourService extends Service.extend(Evented) {
    */
   _onTourFinish(completeOrCancel: 'complete' | 'cancel') {
     if (!this.isDestroyed) {
-      set(this, 'isActive', false);
+      this.isActive = false;
     }
     // @ts-expect-error TODO: refactor away from Evented mixin
     this.trigger(completeOrCancel);
@@ -437,7 +441,7 @@ export default class TourService extends Service.extend(Evented) {
       tourObject.on('complete', bind(this, '_onTourFinish', 'complete'));
       tourObject.on('cancel', bind(this, '_onTourFinish', 'cancel'));
 
-      set(this, 'tourObject', tourObject);
+      this.tourObject = tourObject;
     });
   }
 
@@ -465,8 +469,8 @@ export default class TourService extends Service.extend(Evented) {
               elementIsHidden(selectedElement as HTMLElement))
           ) {
             allElementsPresent = false;
-            set(this, 'errorTitle', element.title);
-            set(this, 'messageForUser', element.message);
+            this.errorTitle = element.title;
+            this.messageForUser = element.message;
           }
         },
       );

package.json

@@ -21,10 +21,10 @@
   "devDependencies": {
     "@release-it-plugins/lerna-changelog": "^6.1.0",
     "@release-it-plugins/workspaces": "^4.2.0",
-    "concurrently": "^8.2.0",
-    "prettier": "^3.0.3",
-    "prettier-plugin-ember-template-tag": "^2.0.2",
-    "release-it": "^17.1.1"
+    "concurrently": "^8.2.2",
+    "prettier": "^3.4.1",
+    "prettier-plugin-ember-template-tag": "^2.0.4",
+    "release-it": "^17.10.0"
   },
   "pnpm": {
     "overrides": {