ember-inspector 4.13.1 → 4.15.0

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);
   }
 

package/app/routes/deprecations.js

@@ -1,6 +1,6 @@
 import { inject as service } from '@ember/service';
 import { Promise } from 'rsvp';
-import { action, setProperties } from '@ember/object';
+import { setProperties } from '@ember/object';
 import TabRoute from 'ember-inspector/routes/tab';
 
 export default class DeprecationsRoute extends TabRoute {
@@ -32,30 +32,21 @@ export default class DeprecationsRoute extends TabRoute {
     this.port.off(
       'deprecation:deprecationsAdded',
       this,
-      this.deprecationsAdded
+      this.deprecationsAdded,
     );
   }
 
   deprecationsAdded(message) {
-    // eslint-disable-next-line ember/no-controller-access-in-routes
-    let { deprecations } = this.controller;
-
     message.deprecations.forEach((item) => {
-      let record = deprecations.findBy('id', item.id);
+      let record = this.controller.deprecations.find(
+        (deprecation) => deprecation.id === item.id,
+      );
+
       if (record) {
         setProperties(record, item);
       } else {
-        deprecations.pushObject(item);
+        this.controller.deprecations.push(item);
       }
     });
   }
-
-  @action
-  clear() {
-    // eslint-disable-next-line ember/no-controller-access-in-routes
-    let { deprecations } = this.controller;
-
-    this.port.send('deprecation:clear');
-    deprecations.clear();
-  }
 }

package/app/routes/launch.js

@@ -1,4 +1,5 @@
 import { inject as service } from '@ember/service';
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { readOnly } from '@ember/object/computed';
 import Route from '@ember/routing/route';
 import RSVP from 'rsvp';
@@ -54,7 +55,7 @@ export default class LaunchRoute extends Route {
           },
           function () {
             resolve();
-          }
+          },
         );
       });
     } else {

package/app/routes/libraries.js

@@ -1,4 +1,5 @@
 import { inject as service } from '@ember/service';
+// eslint-disable-next-line ember/no-computed-properties-in-native-classes
 import { readOnly } from '@ember/object/computed';
 import { Promise } from 'rsvp';
 import TabRoute from 'ember-inspector/routes/tab';
@@ -14,7 +15,7 @@ export default class LibrariesRoute extends TabRoute {
     const port = this.port;
     return new Promise((resolve) => {
       port.one('general:libraries', (message) => {
-        message.libraries.insertAt(0, {
+        message.libraries.splice(0, 0, {
           name: 'Ember Inspector',
           version,
         });

package/app/routes/model-type.js

@@ -7,9 +7,8 @@ export default class ModelTypeRoute extends Route {
 
   model(params) {
     return new Promise((resolve) => {
-      const type = this.modelFor('model-types').findBy(
-        'name',
-        decodeURIComponent(params.type_id)
+      const type = this.modelFor('model-types').find(
+        (x) => x.name === decodeURIComponent(params.type_id),
       );
       if (type) {
         resolve(type);

package/app/routes/model-types.ts

@@ -0,0 +1,57 @@
+import type Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { set } from '@ember/object';
+import type Transition from '@ember/routing/transition';
+
+import { TrackedArray } from 'tracked-built-ins';
+
+import type PortService from '../services/port';
+import TabRoute from '../routes/tab';
+import type { Message, ModelType } from '../services/port';
+
+export default class ModelTypesRoute extends TabRoute {
+  @service declare port: PortService;
+
+  model() {
+    return new Promise<TrackedArray<ModelType>>((resolve) => {
+      this.port.one('data:modelTypesAdded', function (message: Message) {
+        resolve(new TrackedArray(message.modelTypes));
+      });
+      this.port.send('data:getModelTypes');
+    });
+  }
+
+  setupController(
+    controller: Controller,
+    model: unknown,
+    transition: Transition,
+  ) {
+    super.setupController(controller, model, transition);
+
+    this.port.on('data:modelTypesAdded', this, this.addModelTypes);
+    this.port.on('data:modelTypesUpdated', this, this.updateModelTypes);
+  }
+
+  deactivate() {
+    this.port.off('data:modelTypesAdded', this, this.addModelTypes);
+    this.port.off('data:modelTypesUpdated', this, this.updateModelTypes);
+    this.port.send('data:releaseModelTypes');
+  }
+
+  get _currentModel(): Array<ModelType> {
+    return this.modelFor(this.routeName) as Array<ModelType>;
+  }
+
+  addModelTypes = (message: Message) => {
+    this._currentModel.push(...message.modelTypes);
+  };
+
+  updateModelTypes = (message: Message) => {
+    message.modelTypes.forEach((modelType) => {
+      const currentType = this._currentModel.find(
+        (x) => x.objectId === modelType.objectId,
+      );
+      set(currentType as ModelType, 'count', modelType.count);
+    });
+  };
+}

package/app/routes/promise-tree.ts

@@ -0,0 +1,63 @@
+import { inject as service } from '@ember/service';
+import { Promise } from 'rsvp';
+import type Transition from '@ember/routing/transition';
+
+import PromiseAssembler from '../libs/promise-assembler';
+import type PortService from '../services/port';
+import TabRoute from '../routes/tab';
+import type PromiseTreeController from '../controllers/promise-tree';
+
+export default class PromiseTreeRoute extends TabRoute {
+  @service declare port: PortService;
+
+  assembler: PromiseAssembler;
+  declare controller: PromiseTreeController;
+
+  constructor() {
+    // eslint-disable-next-line prefer-rest-params
+    super(...arguments);
+
+    this.assembler = PromiseAssembler.create({
+      port: this.port,
+    });
+  }
+
+  model() {
+    // block rendering until first batch arrives
+    // Helps prevent flashing of "please refresh the page"
+    return new Promise((resolve) => {
+      this.assembler.one('firstMessageReceived', () => {
+        resolve(this.assembler.topSort);
+      });
+      this.assembler.start();
+    });
+  }
+
+  setupController(
+    controller: PromiseTreeController,
+    model: unknown,
+    transition: Transition,
+  ) {
+    super.setupController(controller, model, transition);
+
+    this.port.on(
+      'promise:instrumentWithStack',
+      this,
+      this.setInstrumentWithStack,
+    );
+    this.port.send('promise:getInstrumentWithStack');
+  }
+
+  deactivate() {
+    this.assembler.stop();
+    this.port.off(
+      'promise:instrumentWithStack',
+      this,
+      this.setInstrumentWithStack,
+    );
+  }
+
+  setInstrumentWithStack = (message: { instrumentWithStack: boolean }) => {
+    this.controller.instrumentWithStack = message.instrumentWithStack;
+  };
+}

package/app/routes/records.ts

@@ -0,0 +1,78 @@
+import type Controller from '@ember/controller';
+import type Transition from '@ember/routing/transition';
+import { inject as service } from '@ember/service';
+import { set } from '@ember/object';
+
+import { TrackedArray } from 'tracked-built-ins';
+
+import type PortService from '../services/port';
+import type { Message, ModelType, RecordType } from '../services/port';
+import TabRoute from '../routes/tab';
+// @ts-expect-error TODO: not yet typed
+import type RecordsController from '../controllers/records';
+
+export default class RecordsRoute extends TabRoute {
+  @service declare port: PortService;
+
+  declare controller: RecordsController;
+
+  model() {
+    return new TrackedArray([]);
+  }
+
+  setupController(
+    controller: Controller,
+    model: unknown,
+    transition: Transition,
+  ) {
+    super.setupController(controller, model, transition);
+
+    const type = this.modelFor('model_type') as ModelType;
+
+    // @ts-expect-error TODO this should be resolved when we type the controller
+    controller.modelType = type;
+
+    this.port.on('data:recordsAdded', this, this.addRecords);
+    this.port.on('data:recordsUpdated', this, this.updateRecords);
+    this.port.on('data:recordsRemoved', this, this.removeRecords);
+    this.port.one('data:filters', this, (message: Message) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      this.controller.filters = new TrackedArray(message.filters);
+    });
+    this.port.send('data:getFilters');
+    this.port.send('data:getRecords', { objectId: type.objectId });
+  }
+
+  deactivate() {
+    this.port.off('data:recordsAdded', this, this.addRecords);
+    this.port.off('data:recordsUpdated', this, this.updateRecords);
+    this.port.off('data:recordsRemoved', this, this.removeRecords);
+    this.port.send('data:releaseRecords');
+  }
+
+  get _currentModel(): Array<RecordType> {
+    return this.modelFor(this.routeName) as Array<RecordType>;
+  }
+
+  addRecords = (message: Message) => {
+    this._currentModel.push(...message.records);
+  };
+
+  removeRecords = (message: Message) => {
+    this._currentModel.splice(message.index, message.count);
+  };
+
+  updateRecords = (message: Message) => {
+    message.records.forEach((record) => {
+      const currentRecord = this._currentModel.find(
+        (x) => x.objectId === record.objectId,
+      );
+      if (currentRecord) {
+        set(currentRecord, 'columnValues', record.columnValues);
+        set(currentRecord, 'filterValues', record.filterValues);
+        set(currentRecord, 'searchIndex', record.searchIndex);
+        set(currentRecord, 'color', record.color);
+      }
+    });
+  };
+}