ember-inspector 4.13.1-alpha.2024.8.9 → 4.13.1-alpha.2025.10.1

package/app/libs/promise-assembler.ts

@@ -0,0 +1,249 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { assert } from '@ember/debug';
+import { later } from '@ember/runloop';
+import EmberObject, { action, setProperties } from '@ember/object';
+import { addListener, removeListener, sendEvent } from '@ember/object/events';
+import type { AnyFn } from '@ember/-internals/utility-types';
+
+import { TrackedArray, TrackedObject } from 'tracked-built-ins';
+import { tracked } from '@glimmer/tracking';
+
+import PromiseModel from '../models/promise';
+import type PortService from '../services/port';
+
+interface SerializedPromise {
+  children?: Array<string>;
+  guid: string;
+  label: string;
+  parent?: string;
+  reason: string;
+  state: string;
+  value: string;
+}
+
+export default class PromiseAssembler extends EmberObject {
+  declare port: PortService;
+  // Used to track whether current message received
+  // is the first in the request
+  // Mainly helps in triggering 'firstMessageReceived' event
+  @tracked firstMessageReceived = false;
+
+  all = new TrackedArray<PromiseModel>([]);
+  promiseIndex = new TrackedObject<Record<string, number>>({});
+  topSort = new TrackedArray<PromiseModel>([]);
+  topSortMeta = new TrackedObject<Record<string, { hasParent?: boolean }>>({});
+
+  start() {
+    this.port.on('promise:promisesUpdated', this, this.addOrUpdatePromises);
+    this.port.send('promise:getAndObservePromises');
+  }
+
+  stop() {
+    this.port.off('promise:promisesUpdated', this, this.addOrUpdatePromises);
+    this.port.send('promise:releasePromises');
+    this.reset();
+  }
+
+  reset() {
+    this.topSortMeta = new TrackedObject<
+      Record<string, { hasParent?: boolean }>
+    >({});
+    this.promiseIndex = new TrackedObject<Record<string, number>>({});
+    this.topSort.splice(0, this.topSort.length);
+
+    this.firstMessageReceived = false;
+    const all = this.all;
+    // Lazily destroy promises
+    // Allows for a smooth transition on deactivate,
+    // and thus providing the illusion of better perf
+    // eslint-disable-next-line ember/no-runloop
+    later(
+      this,
+      function () {
+        this.destroyPromises(all);
+      },
+      500,
+    );
+    this.all = new TrackedArray([]);
+  }
+
+  destroyPromises(promises: Array<EmberObject>) {
+    promises.forEach(function (item) {
+      item.destroy();
+    });
+  }
+
+  addOrUpdatePromises = (message: { promises: Array<SerializedPromise> }) => {
+    this.rebuildPromises(message.promises);
+
+    if (!this.firstMessageReceived) {
+      this.firstMessageReceived = true;
+      this.trigger('firstMessageReceived');
+    }
+  };
+
+  rebuildPromises = (promises: Array<SerializedPromise | PromiseModel>) => {
+    promises.forEach((props) => {
+      props = Object.assign({}, props);
+      const childrenIds = props.children;
+      const parentId = props.parent;
+      delete props.children;
+      delete props.parent;
+      if (parentId && parentId !== props.guid) {
+        props.parent = this.updateOrCreate({ guid: parentId });
+      }
+      const promise = this.updateOrCreate(props);
+      if (childrenIds) {
+        childrenIds.forEach((childId) => {
+          // avoid infinite recursion
+          if (childId === props.guid) {
+            return;
+          }
+          const child = this.updateOrCreate({ guid: childId, parent: promise });
+          promise.children.push(child);
+        });
+      }
+    });
+  };
+
+  updateTopSort = (promise: PromiseModel) => {
+    const topSortMeta = this.topSortMeta;
+    const guid = promise.guid;
+    let meta = topSortMeta[guid] ?? {};
+    const isNew = !meta;
+    let hadParent: boolean | undefined = false;
+    const hasParent = !!promise.parent;
+    const topSort = this.topSort;
+    let parentChanged = isNew;
+
+    if (isNew) {
+      meta = topSortMeta[guid] = {};
+    } else {
+      hadParent = meta.hasParent;
+    }
+    if (!isNew && hasParent !== hadParent) {
+      // todo: implement recursion to reposition children
+      const index = topSort.indexOf(promise);
+      if (index !== -1) {
+        topSort.splice(index, 1);
+      }
+      parentChanged = true;
+    }
+    meta.hasParent = hasParent;
+    if (parentChanged) {
+      this.insertInTopSort(promise);
+    }
+  };
+
+  insertInTopSort = (promise: PromiseModel) => {
+    const topSort = this.topSort;
+    if (promise.parent) {
+      const parentIndex = topSort.indexOf(promise.parent);
+      topSort.splice(parentIndex + 1, 0, promise);
+    } else {
+      this.topSort.push(promise);
+    }
+    promise.children.forEach((child) => {
+      const index = topSort.indexOf(child);
+      if (index !== -1) {
+        topSort.splice(index, 1);
+      }
+      this.insertInTopSort(child);
+    });
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  updateOrCreate = (props: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    const guid = props.guid;
+    const promise = this.findOrCreate(guid);
+
+    setProperties(promise, props);
+
+    this.updateTopSort(promise);
+
+    return promise;
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  createPromise(props: any): PromiseModel {
+    const promise = PromiseModel.create(props) as PromiseModel;
+    const index = this.all.length;
+
+    this.all.push(promise);
+    this.promiseIndex[promise.guid as keyof object] = index;
+    return promise;
+  }
+
+  find(guid?: string) {
+    if (guid) {
+      const index = this.promiseIndex[guid as keyof object];
+      if (index !== undefined) {
+        return this.all.at(index);
+      }
+    } else {
+      return this.all;
+    }
+  }
+
+  findOrCreate(guid?: string) {
+    if (!guid) {
+      assert('You have tried to findOrCreate without a guid');
+    }
+    return (this.find(guid) as PromiseModel) || this.createPromise({ guid });
+  }
+
+  // Manually implement Evented functionality, so we can move away from the mixin
+
+  on(eventName: string, method: AnyFn): void;
+  on(eventName: string, target: unknown, method: AnyFn): void;
+
+  @action
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  on(eventName: string, targetOrMethod: unknown | AnyFn, method?: AnyFn): void {
+    if (typeof targetOrMethod === 'function') {
+      // If we did not pass a target, default to `this`
+      addListener(this, eventName, this, targetOrMethod as AnyFn);
+    } else {
+      addListener(this, eventName, targetOrMethod as object, method);
+    }
+  }
+
+  one(eventName: string, method: AnyFn): void;
+  one(eventName: string, target: unknown, method: AnyFn): void;
+
+  @action
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  one(eventName: string, targetOrMethod: unknown | AnyFn, method?: AnyFn) {
+    if (typeof targetOrMethod === 'function') {
+      // If we did not pass a target, default to `this`
+      addListener(this, eventName, this, targetOrMethod as AnyFn, true);
+    } else {
+      addListener(this, eventName, targetOrMethod as object, method, true);
+    }
+  }
+
+  off(eventName: string, method: AnyFn): void;
+  off(eventName: string, target: unknown, method: AnyFn): void;
+
+  @action
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  off(eventName: string, targetOrMethod: unknown | AnyFn, method?: AnyFn) {
+    try {
+      if (typeof targetOrMethod === 'function') {
+        // If we did not pass a target, default to `this`
+        removeListener(this, eventName, this, targetOrMethod as AnyFn);
+      } else {
+        removeListener(this, eventName, targetOrMethod as object, method);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  @action
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  trigger(eventName: string, ...args: Array<any>) {
+    sendEvent(this, eventName, args);
+  }
+}

package/app/libs/resizable-columns.js

@@ -81,7 +81,7 @@ export default class {
     let saved = this.storage.getItem(this.getStorageKey());
     if (saved && saved.columnVisibility) {
       let savedIds = keys(saved.columnVisibility).sort();
-      let schemaIds = this.columnSchema.mapBy('id').sort();
+      let schemaIds = this.columnSchema.map((col) => col.id).sort();
       if (!compareArrays(savedIds, schemaIds)) {
         // Clear saved items
         this.storage.removeItem(this.getStorageKey());
@@ -165,7 +165,7 @@ export default class {
     if (saved.columnVisibility && !isNone(saved.columnVisibility[id])) {
       return saved.columnVisibility[id];
     }
-    return this.columnSchema.findBy('id', id).visible;
+    return this.columnSchema.find((x) => x.id === id).visible;
   }
 
   /**
@@ -195,7 +195,7 @@ export default class {
     this._columnVisibility = this.columnSchema.map((column) =>
       Object.assign({}, column, {
         visible: this.isColumnVisible(column.id),
-      })
+      }),
     );
   }
 
@@ -221,8 +221,8 @@ export default class {
       let diff = this.tableWidth - totalWidth;
       while (diff > 0) {
         columns
-          .filterBy('visible')
-          .sortBy('width')
+          .filter((col) => !!col.visible)
+          .sort((a, b) => a.width - b.width)
           .forEach((column) => {
             if (diff > 0) {
               column.width++;
@@ -245,7 +245,7 @@ export default class {
    * @param {Number} width The column's new width
    */
   updateColumnWidth(id, width) {
-    let column = this._columns.findBy('id', id);
+    let column = this._columns.find((x) => x.id === id);
     let previousWidth = column.width;
     column.width = width;
     let last = this._columns[this._columns.length - 1];
@@ -265,9 +265,9 @@ export default class {
    * @param {String} id
    */
   toggleVisibility(id) {
-    let column = this._columnVisibility.findBy('id', id);
+    let column = this._columnVisibility.find((x) => x.id === id);
     column.visible = !column.visible;
-    if (!this._columnVisibility.isAny('visible')) {
+    if (!this._columnVisibility.some((col) => col.visible)) {
       // If this column was the last visible column
       // cancel toggling and set back to `true`.
       column.visible = true;
@@ -317,7 +317,7 @@ export default class {
         obj[id] = visible;
         return obj;
       },
-      {}
+      {},
     );
     this.storage.setItem(this.getStorageKey(), saved);
   }
@@ -362,7 +362,7 @@ export default class {
    * @method getStorageKey
    */
   getStorageKey() {
-    return `list__${this.key}`;
+    return `list-${this.key}`;
   }
 
   /**

package/app/models/{promise.js → promise.ts}

@@ -1,17 +1,24 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+// @ts-expect-error This does not seem to be typed
 import { observes } from '@ember-decorators/object';
-import { or, equal, not } from '@ember/object/computed';
 import { once } from '@ember/runloop';
-import { typeOf, isEmpty } from '@ember/utils';
-// eslint-disable-next-line ember/no-observers
+import { typeOf } from '@ember/utils';
+
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import EmberObject, { computed } from '@ember/object';
-import escapeRegExp from 'ember-inspector/utils/escape-reg-exp';
+import { tracked } from '@glimmer/tracking';
+
+import { TrackedArray } from 'tracked-built-ins';
+
+import escapeRegExp from '../utils/escape-reg-exp';
+import { isNullish } from '../utils/nullish';
 
 const dateComputed = function () {
   return computed({
     get() {
       return null;
     },
-    set(key, date) {
+    set(_key, date: Date | number | string) {
       if (typeOf(date) === 'date') {
         return date;
       } else if (typeof date === 'number' || typeof date === 'string') {
@@ -22,61 +29,63 @@ const dateComputed = function () {
   });
 };
 
-export default class Promise extends EmberObject {
-  @dateComputed()
-  createdAt;
-
-  @dateComputed()
-  settledAt;
-
-  parent = null;
-
-  @computed('parent.level')
-  get level() {
-    let parent = this.parent;
+export default class PromiseModel extends EmberObject {
+  children = new TrackedArray<PromiseModel>([]);
+  declare label?: string;
+  declare guid: string;
+  declare state: string;
+  // @ts-expect-error TODO: figure out types for this
+  @dateComputed() createdAt;
+  // @ts-expect-error TODO: figure out types for this
+  @dateComputed() settledAt;
+
+  @tracked branchLabel = '';
+  @tracked isExpanded = false;
+  @tracked isManuallyExpanded?: boolean = undefined;
+  @tracked parent: PromiseModel | null = null;
+
+  get level(): number {
+    const parent = this.parent;
     if (!parent) {
       return 0;
     }
-    return parent.get('level') + 1;
+    return parent.level + 1;
   }
 
-  @or('isFulfilled', 'isRejected')
-  isSettled;
-
-  @equal('state', 'fulfilled')
-  isFulfilled;
+  get isSettled() {
+    return this.isFulfilled || this.isRejected;
+  }
 
-  @equal('state', 'rejected')
-  isRejected;
+  get isFulfilled() {
+    return this.state === 'fulfilled';
+  }
 
-  @not('isSettled')
-  isPending;
+  get isRejected() {
+    return this.state === 'rejected';
+  }
 
-  get children() {
-    return [];
+  get isPending() {
+    return !this.isSettled;
   }
 
-  @computed('isPending', 'children.@each.pendingBranch')
   get pendingBranch() {
     return this.recursiveState('isPending', 'pendingBranch');
   }
 
-  @computed('isRejected', 'children.@each.rejectedBranch')
   get rejectedBranch() {
     return this.recursiveState('isRejected', 'rejectedBranch');
   }
 
-  @computed('isFulfilled', 'children.@each.fulfilledBranch')
   get fulfilledBranch() {
     return this.recursiveState('isFulfilled', 'fulfilledBranch');
   }
 
-  recursiveState(prop, cp) {
-    if (this.get(prop)) {
+  recursiveState(prop: keyof PromiseModel, cp: keyof PromiseModel) {
+    if (this[prop]) {
       return true;
     }
-    for (let i = 0; i < this.get('children.length'); i++) {
-      if (this.children.objectAt(i).get(cp)) {
+    for (let i = 0; i < this.children.length; i++) {
+      if (this.children.at(i)?.[cp]) {
         return true;
       }
     }
@@ -92,9 +101,9 @@ export default class Promise extends EmberObject {
       return;
     }
     if (
-      (this.pendingBranch && !this.get('parent.pendingBranch')) ||
-      (this.fulfilledBranch && !this.get('parent.fulfilledBranch')) ||
-      (this.rejectedBranch && !this.get('parent.rejectedBranch'))
+      (this.pendingBranch && !this.parent.pendingBranch) ||
+      (this.fulfilledBranch && !this.parent.fulfilledBranch) ||
+      (this.rejectedBranch && !this.parent.rejectedBranch)
     ) {
       this.parent.notifyPropertyChange('fulfilledBranch');
       this.parent.notifyPropertyChange('rejectedBranch');
@@ -108,31 +117,29 @@ export default class Promise extends EmberObject {
     this.addBranchLabel(this.label, true);
   }
 
-  addBranchLabel(label, replace) {
-    if (isEmpty(label)) {
+  addBranchLabel(label?: string, replace?: boolean) {
+    if (isNullish(label)) {
       return;
     }
     if (replace) {
-      this.set('branchLabel', label);
+      this.branchLabel = label;
     } else {
-      this.set('branchLabel', `${this.branchLabel} ${label}`);
+      this.branchLabel = `${this.branchLabel} ${label}`;
     }
 
-    let parent = this.parent;
+    const parent = this.parent;
     if (parent) {
       parent.addBranchLabel(label);
     }
   }
 
-  branchLabel = '';
-
-  matches(val) {
+  matches(val: string) {
     return !!this.branchLabel
       .toLowerCase()
       .match(new RegExp(`.*${escapeRegExp(val.toLowerCase())}.*`));
   }
 
-  matchesExactly(val) {
+  matchesExactly(val: string) {
     return !!(this.label || '')
       .toLowerCase()
       .match(new RegExp(`.*${escapeRegExp(val.toLowerCase())}.*`));
@@ -140,21 +147,18 @@ export default class Promise extends EmberObject {
 
   // EXPANDED / COLLAPSED PROMISES
 
-  isExpanded = false;
-
-  isManuallyExpanded = undefined;
-
   // eslint-disable-next-line ember/no-observers
   @observes('isPending', 'isFulfilled', 'isRejected', 'parent')
   stateOrParentChanged() {
-    let parent = this.parent;
+    const parent = this.parent;
     if (parent) {
+      // eslint-disable-next-line ember/no-runloop
       once(parent, 'recalculateExpanded');
     }
   }
 
-  _findTopParent() {
-    let parent = this.parent;
+  _findTopParent(): PromiseModel {
+    const parent = this.parent;
     if (!parent) {
       return this;
     } else {
@@ -167,36 +171,35 @@ export default class Promise extends EmberObject {
     if (this.isManuallyExpanded !== undefined) {
       isExpanded = this.isManuallyExpanded;
     } else {
-      let children = this._allChildren();
-      for (let i = 0, l = children.length; i < l; i++) {
-        let child = children[i];
-        if (child.get('isRejected')) {
+      const children = this._allChildren();
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i] as PromiseModel;
+        if (child.isRejected) {
           isExpanded = true;
         }
-        if (child.get('isPending') && !child.get('parent.isPending')) {
+        if (child.isPending && !child.parent!.isPending) {
           isExpanded = true;
         }
         if (isExpanded) {
           break;
         }
       }
-      let parents = this._allParents();
+      const parents = this._allParents();
       if (isExpanded) {
         parents.forEach((parent) => {
           parent.set('isExpanded', true);
         });
-      } else if (this.get('parent.isExpanded')) {
+      } else if (this.parent?.isExpanded) {
         this.parent.recalculateExpanded();
       }
     }
-    this.set('isExpanded', isExpanded);
+    this.isExpanded = isExpanded;
     return isExpanded;
   }
 
-  @computed('parent.{isExpanded,isVisible}', 'parent')
-  get isVisible() {
+  get isVisible(): boolean {
     if (this.parent) {
-      return this.get('parent.isExpanded') && this.get('parent.isVisible');
+      return this.parent.isExpanded && this.parent.isVisible;
     }
     return true;
   }
@@ -204,13 +207,13 @@ export default class Promise extends EmberObject {
   _allChildren() {
     let children = [...this.children];
     children.forEach((item) => {
-      children = [...children, item._allChildren()];
+      children = [...children, ...item._allChildren()];
     });
     return children;
   }
 
-  _allParents() {
-    let parent = this.parent;
+  _allParents(): Array<PromiseModel> {
+    const parent = this.parent;
     if (parent) {
       return [parent, ...parent._allParents()];
     } else {

package/app/{router.js → router.ts}

@@ -19,7 +19,7 @@ Router.map(function () {
           { path: '/:type_id', resetNamespace: true },
           function () {
             this.route('records', { resetNamespace: true });
-          }
+          },
         );
       });
     });

package/app/routes/app-detected.js

@@ -16,18 +16,16 @@ export default class AppDetectedRoute extends Route {
    * @return {Promise}
    */
   model() {
-    let port = this.port;
-
     return new Promise((resolve) => {
       this.applicationBooted = ({ booted }) => {
         if (booted) {
-          port.off('general:applicationBooted', this.applicationBooted);
+          this.port.off('general:applicationBooted', this.applicationBooted);
           this.applicationBooted = null;
           resolve();
         }
       };
-      port.on('general:applicationBooted', this.applicationBooted);
-      port.send('general:applicationBooted');
+      this.port.on('general:applicationBooted', this.applicationBooted);
+      this.port.send('general:applicationBooted');
     });
   }
 

package/app/routes/application.js

@@ -1,3 +1,4 @@
+/* eslint-disable ember/no-controller-access-in-routes */
 import { inject as service } from '@ember/service';
 import { action, set } from '@ember/object';
 import Route from '@ember/routing/route';
@@ -8,9 +9,11 @@ export default class ApplicationRoute extends Route {
   @service adapter;
   @service port;
   @service router;
+  @service layout;
 
   setupController(controller) {
     controller.set('mixinStack', []);
+
     let port = this.port;
     port.on('objectInspector:updateObject', this, this.updateObject);
     port.on('objectInspector:updateProperty', this, this.updateProperty);
@@ -54,7 +57,6 @@ export default class ApplicationRoute extends Route {
     NativeArray.apply(details);
     details.forEach(arrayize);
 
-    // eslint-disable-next-line ember/no-controller-access-in-routes
     let controller = this.controller;
 
     if (options.parentObject) {
@@ -63,23 +65,17 @@ export default class ApplicationRoute extends Route {
       controller.activateMixinDetails(name, objectId, details, errors);
     }
 
-    // eslint-disable-next-line ember/no-controller-access-in-routes
-    this.controller.showInspector();
+    this.layout.showInspector();
   }
 
   setDeprecationCount(message) {
-    // eslint-disable-next-line ember/no-controller-access-in-routes
     this.controller.set('deprecationCount', message.count);
   }
 
-  // eslint-enable ember/no-controller-access-in-routes
-
   updateProperty(options) {
-    if (this.get('controller.mixinDetails.mixins')) {
-      const detail = this.get('controller.mixinDetails.mixins').objectAt(
-        options.mixinIndex
-      );
-      let property = detail.properties.findBy('name', options.property);
+    if (this.controller.mixinDetails?.mixins) {
+      const detail = this.controller.mixinDetails.mixins.at(options.mixinIndex);
+      let property = detail.properties.find((x) => x.name === options.property);
       if (!property) return;
       set(property, 'value', options.value);
       if (options.dependentKeys) {
@@ -89,7 +85,8 @@ export default class ApplicationRoute extends Route {
   }
 
   updateErrors(options) {
-    let mixinDetails = this.get('controller.mixinDetails');
+    let mixinDetails = this.controller.mixinDetails;
+
     if (mixinDetails) {
       if (mixinDetails.objectId === options.objectId) {
         set(mixinDetails, 'errors', options.errors);
@@ -98,7 +95,6 @@ export default class ApplicationRoute extends Route {
   }
 
   droppedObject(message) {
-    // eslint-disable-next-line ember/no-controller-access-in-routes
     this.controller.droppedObject(message.objectId);
   }