ember-inspector 4.6.3 → 4.7.0

package/CHANGELOG.md

@@ -12,6 +12,19 @@
 
 
 
+
+## v4.7.0 (2022-08-31)
+
+#### :house: Internal
+* [#2124](https://github.com/emberjs/ember-inspector/pull/2124) Update to ember 4 ([@rwwagner90](https://github.com/rwwagner90))
+* [#2122](https://github.com/emberjs/ember-inspector/pull/2122) Convert some components to glimmer ([@rwwagner90](https://github.com/rwwagner90))
+* [#2123](https://github.com/emberjs/ember-inspector/pull/2123) Update ember cli ([@rwwagner90](https://github.com/rwwagner90))
+* [#2121](https://github.com/emberjs/ember-inspector/pull/2121) Remove unused dep `del` ([@rwwagner90](https://github.com/rwwagner90))
+
+#### Committers: 2
+- Robert Wagner ([@rwwagner90](https://github.com/rwwagner90))
+- [@patricklx](https://github.com/patricklx)
+
 ## v4.6.3 (2022-08-19)
 
 #### :bug: Bug Fix

package/README.md

@@ -79,33 +79,8 @@ Run `yarn install && yarn global add ember-cli to install the required modules.
 
 ## Deploy new version:
 
-#### Patch versions
-
-Patch versions are only committed to the stable branch. So we need to cherry-pick the commits we need from master and bump stable to the new patch version.
-
-- `git checkout stable`
-- Cherry-pick the needed commits from master to stable.
-- Add the change log entry and commit. We use [github-changelog-generator](https://github.com/github-changelog-generator/github-changelog-generator) for this.
-  You will want to follow the installation instructions on their README, and take note that you will need to provide a GitHub token.
-  Once installed, and you add a token, you can run `yarn changelog` in your terminal.
-- `yarn version --patch`
-- `git push --tags`
-- `git push`
-- PR the change log entry to the master branch.
-
-#### Minor and major versions
-
-When releasing a major/minor version, master would already have this version set, so what we need to do is to merge master into stable and release.
-
-- `git checkout stable`
-- `git merge -X theirs master`
-- Add the change log entry and commit. We use [github-changelog-generator](https://github.com/github-changelog-generator/github-changelog-generator) for this.
-  You will want to follow the installation instructions on their README, and take note that you will need to provide a GitHub token.
-  Once installed, and you add a token, you can run `yarn changelog` in your terminal.
-- `yarn version` (keep the same version number)
-- `git push --tags`
-- `git push`
-- PR the change log entry to the master branch, as well as increment `package.json` to the next major/minor version.
+See [RELEASE.md](./RELEASE.md)
+
 
 ### Locking a version
 
@@ -117,7 +92,7 @@ Here are the steps to lock an inspector version:
 
 - Release a new version (See "Minor and major versions") if there are unreleased commits in `master`. Skip this step if there are not new commits after the last release.
 - Makes sure you have a `config/secrets.json` file with the correct AWS credentials to push to S3. You can use `config/secrets.json.sample` as a starting point.
-- Create a new branch (from `stable`) named after the Ember version range that will be supported by this branch. The min version in the range is the first element in the `emberVersionsSupported` array in `package.json`. The max version in the range is the first version that will *not* be supported. For example, a branch named `ember-0.0.0-2.7.0` means it supports Ember 0.0.0 -> 2.6.0, and a branch named `ember-2.7.0-3.4.0` means it supports Ember 2.7.0 -> Ember 3.3.2.
+- Create a new branch (from `master`) named after the Ember version range that will be supported by this branch. The min version in the range is the first element in the `emberVersionsSupported` array in `package.json`. The max version in the range is the first version that will *not* be supported. For example, a branch named `ember-0.0.0-2.7.0` means it supports Ember 0.0.0 -> 2.6.0, and a branch named `ember-2.7.0-3.4.0` means it supports Ember 2.7.0 -> Ember 3.3.2.
 - Update `package.json`'s `emberVersionsSupported`: add a second element that indicates the minimum Ember version the `master` branch *will not* support.
 - Commit the branch.
 - Run `yarn lock-version`. This will build, and compress the panes.
@@ -135,7 +110,7 @@ Here are the steps to lock an inspector version:
 Below is an example scenario that assumes the current `master` branch supports Ember version 2.7.0+ and we want to lock the version such that `master` will support 3.4.0+. It also assumes the last Ember Inspector version released was 3.9.0.
 
 - Release a new inspector version `3.10.0` if there are unreleased commits in `master`.
-- Create a new branch from `stable` called `ember-2.7.0-3.4.0`.
+- Create a new branch from `master` called `ember-2.7.0-3.4.0`.
 - Update `package.json`'s `emberVersionsSupported` from `["2.7.0", ""]` to `["2.7.0", "3.4.0"]`.
 - Commit with message "Lock Ember version at 2.7.0-3.4.0" and push the branch.
 - Run `yarn lock-version`.

package/app/components/object-inspector/accordion.js

@@ -1,14 +1,22 @@
-import { action, computed } from '@ember/object';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
-export default Component.extend({
-  tagName: '',
+export default class AccordionComponent extends Component {
+  @tracked _isExpanded;
 
-  isExpanded: computed('mixin.{expand,properties.length}', function () {
-    return this.get('mixin.expand') && this.get('mixin.properties.length') > 0;
-  }),
+  constructor() {
+    super(...arguments);
 
-  toggle: action(function () {
-    this.toggleProperty('mixin.expand');
-  }),
-});
+    this._isExpanded = this.args.mixin.expand;
+  }
+
+  get isExpanded() {
+    return this._isExpanded && this.args.mixin.properties.length > 0;
+  }
+
+  @action
+  toggle() {
+    this._isExpanded = !this._isExpanded;
+  }
+}

package/app/components/object-inspector/property-field.js

@@ -1,4 +1,4 @@
-import TextField from '@ember/component/text-field';
+import { TextField } from '@ember/legacy-built-in-components';
 
 export default class PropertyField extends TextField {
   didInsertElement() {

package/app/components/object-inspector/sort-properties.js

@@ -1,14 +1,12 @@
-import { tagName } from '@ember-decorators/component';
 import { map, sort } from '@ember/object/computed';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { get, set, computed } from '@ember/object';
 import { A } from '@ember/array';
 
-@tagName('')
 export default class SortProperties extends Component {
-  @computed('properties')
+  @computed('args.properties')
   get isArray() {
-    const props = A(this.properties || []);
+    const props = A(this.args.properties || []);
     return props.findBy('name', 'length') && props.findBy('name', 0);
   }
 
@@ -38,7 +36,7 @@ export default class SortProperties extends Component {
   @sort('props', 'sortProperties')
   sorted;
 
-  @map('properties', function (p) {
+  @map('args.properties', function (p) {
     set(
       p,
       'isFunction',

package/app/components/promise-item.js

@@ -1,7 +1,6 @@
-import { tagName } from '@ember-decorators/component';
 import { computed, get } from '@ember/object';
 import { equal, gt, notEmpty } from '@ember/object/computed';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
 import { isEmpty } from '@ember/utils';
 
@@ -11,20 +10,16 @@ const COLOR_MAP = {
   green: '#006400',
 };
 
-@tagName('')
 export default class PromiseItem extends Component {
-  filter = null;
-  effectiveSearch = null;
-
-  @equal('model.reason.type', 'type-error')
+  @equal('args.model.reason.type', 'type-error')
   isError;
 
-  @computed('model.{isFulfilled,isRejected,state}')
+  @computed('args.model.{isFulfilled,isRejected,state}')
   get style() {
     let color = '';
-    if (get(this, 'model.isFulfilled')) {
+    if (get(this, 'args.model.isFulfilled')) {
       color = 'green';
-    } else if (get(this, 'model.isRejected')) {
+    } else if (get(this, 'args.model.isRejected')) {
       color = 'red';
     } else {
       color = 'blue';
@@ -33,27 +28,26 @@ export default class PromiseItem extends Component {
   }
 
   @computed(
-    'effectiveSearch',
-    'filter',
-    'model.{isFulfilled,isPending,isRejected,state}'
+    'args.{effectiveSearch,filter}',
+    'args.model.{isFulfilled,isPending,isRejected,state}'
   )
   get nodeStyle() {
     let relevant;
-    switch (this.filter) {
+    switch (this.args.filter) {
       case 'pending':
-        relevant = get(this, 'model.isPending');
+        relevant = get(this, 'args.model.isPending');
         break;
       case 'rejected':
-        relevant = get(this, 'model.isRejected');
+        relevant = get(this, 'args.model.isRejected');
         break;
       case 'fulfilled':
-        relevant = get(this, 'model.isFulfilled');
+        relevant = get(this, 'args.model.isFulfilled');
         break;
       default:
         relevant = true;
     }
-    if (relevant && !isEmpty(this.effectiveSearch)) {
-      relevant = this.model.matchesExactly(this.effectiveSearch);
+    if (relevant && !isEmpty(this.args.effectiveSearch)) {
+      relevant = this.args.model.matchesExactly(this.args.effectiveSearch);
     }
     if (!relevant) {
       return 'opacity: 0.3;';
@@ -62,35 +56,37 @@ export default class PromiseItem extends Component {
     }
   }
 
-  @computed('model.level', 'nodeStyle')
+  @computed('args.model.level', 'nodeStyle')
   get labelStyle() {
     return htmlSafe(
-      `padding-left: ${+get(this, 'model.level') * 20 + 5}px;${this.nodeStyle}`
+      `padding-left: ${+get(this, 'args.model.level') * 20 + 5}px;${
+        this.nodeStyle
+      }`
     );
   }
 
-  @computed('hasChildren', 'model.isExpanded')
+  @computed('hasChildren', 'args.model.isExpanded')
   get expandedClass() {
     if (!this.hasChildren) {
       return undefined;
     }
 
-    if (get(this, 'model.isExpanded')) {
+    if (get(this, 'args.model.isExpanded')) {
       return 'list__cell_arrow_expanded';
     } else {
       return 'list__cell_arrow_collapsed';
     }
   }
 
-  @gt('model.children.length', 0)
+  @gt('args.model.children.length', 0)
   hasChildren;
 
-  @computed('model.{isFulfilled,isRejected,reason,value}')
+  @computed('args.model.{isFulfilled,isRejected,reason,value}')
   get settledValue() {
-    if (get(this, 'model.isFulfilled')) {
-      return get(this, 'model.value');
-    } else if (get(this, 'model.isRejected')) {
-      return get(this, 'model.reason');
+    if (get(this, 'args.model.isFulfilled')) {
+      return get(this, 'args.model.value');
+    } else if (get(this, 'args.model.isRejected')) {
+      return get(this, 'args.model.reason');
     } else {
       return '--';
     }
@@ -99,32 +95,32 @@ export default class PromiseItem extends Component {
   @notEmpty('settledValue.objectId')
   isValueInspectable;
 
-  @computed('model.isSettled', 'settledValue.type')
+  @computed('args.model.isSettled', 'settledValue.type')
   get hasValue() {
     return (
-      get(this, 'model.isSettled') &&
+      get(this, 'args.model.isSettled') &&
       get(this, 'settledValue.type') !== 'type-undefined'
     );
   }
 
-  @computed('model.{label,parent}')
+  @computed('args.model.{label,parent}')
   get label() {
     return (
-      get(this, 'model.label') ||
-      (!!get(this, 'model.parent') && 'Then') ||
+      get(this, 'args.model.label') ||
+      (!!get(this, 'args.model.parent') && 'Then') ||
       '<Unknown Promise>'
     );
   }
 
-  @computed('model.{parent.isSettled,isFulfilled,isRejected,state}')
+  @computed('args.model.{parent.isSettled,isFulfilled,isRejected,state}')
   get state() {
-    if (get(this, 'model.isFulfilled')) {
+    if (get(this, 'args.model.isFulfilled')) {
       return 'Fulfilled';
-    } else if (get(this, 'model.isRejected')) {
+    } else if (get(this, 'args.model.isRejected')) {
       return 'Rejected';
     } else if (
-      get(this, 'model.parent') &&
-      !get(this, 'model.parent.isSettled')
+      get(this, 'args.model.parent') &&
+      !get(this, 'args.model.parent.isSettled')
     ) {
       return 'Waiting for parent';
     } else {
@@ -132,15 +128,19 @@ export default class PromiseItem extends Component {
     }
   }
 
-  @computed('model.{createdAt,settledAt,parent.settledAt}')
+  @computed('args.model.{createdAt,settledAt,parent.settledAt}')
   get timeToSettle() {
-    if (!get(this, 'model.createdAt') || !get(this, 'model.settledAt')) {
+    if (
+      !get(this, 'args.model.createdAt') ||
+      !get(this, 'args.model.settledAt')
+    ) {
       return ' -- ';
     }
     let startedAt =
-      get(this, 'model.parent.settledAt') || get(this, 'model.createdAt');
+      get(this, 'args.model.parent.settledAt') ||
+      get(this, 'args.model.createdAt');
     let remaining =
-      get(this, 'model.settledAt').getTime() - startedAt.getTime();
+      get(this, 'args.model.settledAt').getTime() - startedAt.getTime();
     return remaining;
   }
 }

package/app/components/route-cell-name.js

@@ -1,21 +1,19 @@
-import { tagName } from '@ember-decorators/component';
 import { computed, get } from '@ember/object';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
 import checkCurrentRoute from 'ember-inspector/utils/check-current-route';
 
-@tagName('')
 export default class RouteCellName extends Component {
-  @computed('route.parentCount')
+  @computed('args.route.parentCount')
   get labelStyle() {
     return htmlSafe(
-      `padding-left: ${+get(this, 'route.parentCount') * 20 + 5}px;`
+      `padding-left: ${+get(this, 'args.route.parentCount') * 20 + 5}px;`
     );
   }
 
-  @computed('currentRoute.{name,url}', 'route.value.{name,url}')
+  @computed('args.currentRoute.{name,url}', 'args.route.value.{name,url}')
   get isCurrent() {
-    const { currentRoute, route } = this;
+    const { currentRoute, route } = this.args;
 
     if (!currentRoute || !route) {
       return false;

package/config/ember-cli-update.json

@@ -3,7 +3,7 @@
   "packages": [
     {
       "name": "ember-cli",
-      "version": "4.4.0",
+      "version": "4.6.0",
       "blueprints": [
         {
           "name": "app",

package/config/ember-try.js

@@ -12,23 +12,6 @@ module.exports = function() {
     return {
       useYarn: true,
       scenarios: [
-        // TODO: Figure out how to test these versions
-        // {
-        //   name: 'ember-lts-3.4',
-        //   npm: {
-        //     devDependencies: {
-        //       'ember-source': '~3.4.0'
-        //     }
-        //   }
-        // },
-        // {
-        //   name: 'ember-lts-3.8',
-        //   npm: {
-        //     devDependencies: {
-        //       'ember-source': '~3.8.0'
-        //     }
-        //   }
-        // },
         {
           name: 'ember-lts-3.12',
           npm: {

package/config/environment.js

@@ -14,15 +14,8 @@ module.exports = function (environment) {
     EmberENV: {
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
-        // e.g. EMBER_MODULE_UNIFICATION: true
-        EMBER_METAL_TRACKED_PROPERTIES: true,
+        // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
       },
-      EXTEND_PROTOTYPES: process.env.NO_EXTEND_PROTOTYPES
-        ? false
-        : {
-            // Prevent Ember Data from overriding Date.parse.
-            Date: false,
-          },
     },
 
     APP: {