feat: update deps and fix ts errors

Author: gabrielcsapo

.storybook/preview-head.html

@@ -1,9 +1,17 @@
 <!-- This file is auto-generated by ember-cli-storybook -->
-<meta name="broccoli-inspector/config/environment" content="%7B%22ember-websockets%22%3A%7B%22socketIO%22%3Atrue%7D%2C%22apollo%22%3A%7B%22apiURL%22%3A%22http%3A%2F%2Flocalhost%3A4200%2Fbroccoli-inspector%2Fapi%2Fgraphql%22%7D%2C%22modulePrefix%22%3A%22broccoli-inspector%22%2C%22environment%22%3A%22test%22%2C%22rootURL%22%3A%22%2F_broccoli-inspector%2F%22%2C%22locationType%22%3A%22none%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22LOG_ACTIVE_GENERATION%22%3Afalse%2C%22LOG_VIEW_LOOKUPS%22%3Afalse%2C%22rootElement%22%3A%22%23ember-testing%22%2C%22autoboot%22%3Afalse%2C%22appVersion%22%3A%223.0.1%22%2C%22name%22%3A%22broccoli-inspector%22%2C%22version%22%3A%220.4.1%2Baa76a688%22%7D%2C%22ember-paper%22%3A%7B%22insertFontLinks%22%3Atrue%7D%2C%22exportApplicationGlobal%22%3Atrue%7D" />
+<meta name="broccoli-inspector/config/environment" content="%7B%22ember-websockets%22%3A%7B%22socketIO%22%3Atrue%7D%2C%22apollo%22%3A%7B%22apiURL%22%3A%22http%3A%2F%2Flocalhost%3A4200%2Fbroccoli-inspector%2Fapi%2Fgraphql%22%7D%2C%22modulePrefix%22%3A%22broccoli-inspector%22%2C%22environment%22%3A%22test%22%2C%22rootURL%22%3A%22%2F_broccoli-inspector%2F%22%2C%22locationType%22%3A%22none%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22LOG_ACTIVE_GENERATION%22%3Afalse%2C%22LOG_VIEW_LOOKUPS%22%3Afalse%2C%22rootElement%22%3A%22%23ember-testing%22%2C%22autoboot%22%3Afalse%2C%22appVersion%22%3A%224.0.2%22%2C%22name%22%3A%22broccoli-inspector%22%2C%22version%22%3A%220.5.0%2Bfeb2e5e0%22%7D%2C%22ember-paper%22%3A%7B%22insertFontLinks%22%3Atrue%7D%2C%22exportApplicationGlobal%22%3Atrue%7D" />
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" />
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 <link rel="stylesheet" href="./assets/vendor.css" />
 <link rel="stylesheet" href="./assets/broccoli-inspector.css" />
+<script src="/testem.js"></script>
+<script src="./assets/vendor.js"></script>
+<script>window.Ember = require("ember").default; runningTests = true; Ember.testing=true;</script>
+<script src="./assets/chunk.vendors-node_modules_c3_c3_js-node_modules_d3_index_js-node_modules_tinycolor2_tinycolor_js-n-39ad07.4d456aa50d2403c3536a.js"></script>
+<script src="./assets/chunk.app.7e97cf3a46a042ab1223.js"></script>
+<script src="./assets/chunk.vendors-node_modules_qunit_qunit_qunit_js.583380f986b5722f7b7a.js"></script>
+<script src="./assets/chunk.tests.039d771cfdca5cc3d801.js"></script>
+<script src="./assets/broccoli-inspector.js"></script>
 <script>
             (function() {
               var srcUrl = null;
@@ -18,8 +26,4 @@
               script.src = location.protocol + '//' + host + ':4200' + src;
               document.getElementsByTagName('head')[0].appendChild(script);
             }());
-          </script>
-<script src="/testem.js"></script>
-<script src="./assets/vendor.js"></script>
-<script>runningTests = true; Ember.testing=true;</script>
-<script src="./assets/broccoli-inspector.js"></script>
+          </script>

CHANGELOG.md

@@ -1,3 +1,7 @@
+# Unreleased
+
+- bump dependencies, fix typescript errors
+
 # 0.5.0 (12/08/2020)
 
 - major bumps for all dependencies
@@ -10,7 +14,7 @@
 
 # 0.4.0 (07/31/2020)
 
-- ensures that even when builds fail they are still viewable. This change makes buildState fields nullable.  
+- ensures that even when builds fail they are still viewable. This change makes buildState fields nullable.
 
 # 0.3.0 (06/15/2020)
 
@@ -101,7 +105,7 @@
 
 - fix label formatting for total fs timing data to turn us to ms.
 - move group by plugin to sidebar from Navbar
-- consolidates navbar to have `|input|     |links|`
+- consolidates navbar to have `|input| |links|`
 - show node breakdown by fs and other (other being the time spent in the plugin that we don't have instrumentation to pin down where it is being spent.)
 - Move search box for plugins into the right rail, this is specifically for search by plugin name
   - This functionality is done locally

TODO.md

@@ -0,0 +1 @@
+- [ ] show sidebar contents with overflow so that you can see if things are run multiple times with the same name

app/components/build-plugins.ts

@@ -1,12 +1,17 @@
 import Component from "@glimmer/component";
 import { tracked } from '@glimmer/tracking';
+import { type Node } from "broccoli-inspector/types";
 
-export default class BuildPlugins extends Component {
+interface Args {
+  nodes?: Node[];
+}
+
+export default class BuildPlugins extends Component<Args> {
   @tracked
   selectedTab = 0;
 
   get nodes() {
-    const nodes = this.args?.nodes;
+    const nodes = this.args?.nodes || [];
 
     const body = nodes
       .map((node) => {

app/components/builds-list.ts

@@ -1,7 +1,13 @@
-import CollapsableComponent from './collapsable-component';
+import { NodesByType } from "broccoli-inspector/types";
+import CollapsableComponent from "./collapsable-component";
 
-export default class BuildsList extends CollapsableComponent {
-  constructor(...args) {
+type Args = {
+  builds: NodesByType;
+};
+
+export default class BuildsList extends CollapsableComponent<Args> {
+  constructor(...args: any) {
+    // @ts-ignore
     super(...args);
 
     this._items = this.args.builds;

app/components/collapsable-component.ts

@@ -1,13 +1,15 @@
 import Component from "@glimmer/component";
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
 
-export default class CollapsableComponent extends Component {
+export default class CollapsableComponent<
+  Args extends {} = {}
+> extends Component<Args> {
   @tracked
   isCollapsed = true;
 
   @tracked
-  _items;
+  _items: any;
 
   get items() {
     return this._items.slice(0, this.isCollapsed ? 10 : this._items.length);

app/components/instantiation-stack-explorer.ts

@@ -1,11 +1,17 @@
 import Component from "@glimmer/component";
-import { inject as service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
+import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import type RouterService from "@ember/routing/router-service";
 
 import gql from "graphql-tag";
+// @ts-ignore
 import { queryManager } from "ember-apollo-client";
 
+type Args = {
+  instantiationStack: string;
+};
+
 const query = gql`
   query query($filePath: String!) {
     file(filePath: $filePath) {
@@ -14,65 +20,81 @@ const query = gql`
   }
 `;
 
-export default class InstantiationStackExplorer extends Component {
-  @service router;
+export default class InstantiationStackExplorer extends Component<Args> {
+  @service
+  declare router: RouterService;
+  // @ts-ignore
   @queryManager apollo;
 
   @tracked selectedIndex = null;
   @tracked loading = false;
-  @tracked file = null;
-  @tracked line = null;
-  @tracked column = null;
-  @tracked filePath = null;
+  @tracked file: string | null = null;
+  @tracked line: number | null = null;
+  @tracked column: number | null = null;
+  @tracked filePath: string | null = null;
 
   get instantiationStack() {
     const fileReg = /at (.+?)\((\/+.*):(.+?):(.+?)(\)|$)/m;
 
-    const { instantiationStack } = this.args
+    const { instantiationStack } = this.args;
 
-    return instantiationStack.split('\n').map((stackLine) => {
-      if(fileReg.exec(stackLine) !== null) {
+    return instantiationStack.split("\n").map((stackLine) => {
+      if (fileReg.exec(stackLine) !== null) {
         const match = fileReg.exec(stackLine);
 
-        return {
-          stackLine: `at ${match[1]}`,
-          filePath: match[2],
-          line: match[3],
-          column: match[4]
+        if (match) {
+          return {
+            stackLine: `at ${match[1]}`,
+            filePath: match[2],
+            line: match[3],
+            column: match[4],
+          };
         }
       }
 
-      if(/at (\/+.*):(.+?):(.+?)$/m.exec(stackLine) !== null) {
+      if (/at (\/+.*):(.+?):(.+?)$/m.exec(stackLine) !== null) {
         const match = /at (\/+.*):(.+?):(.+?)$/gm.exec(stackLine);
 
-        return {
-          stackLine: `at ${match[1]}`,
-          filePath: match[1],
-          line: match[2],
-          column: match[3]
+        if (match) {
+          return {
+            stackLine: `at ${match[1]}`,
+            filePath: match[1],
+            line: match[2],
+            column: match[3],
+          };
         }
       }
 
       return {
-        stackLine
-      }
+        stackLine,
+      };
     });
   }
 
   @action
-  onStackClick(filePath, line, column) {
+  onStackClick(filePath: string, line: number, column: number) {
     this.loading = true;
 
-    return this.apollo.query({ query, variables: { filePath } }, "file").then((result) => {
-      this.file = result.value;
-      this.line = line;
-      this.column = column;
-      this.filePath = filePath;
-      this.loading = false;
+    return this.apollo
+      .query({ query, variables: { filePath } }, "file")
+      .then((result: any) => {
+        this.file = result.value;
+        this.line = line;
+        this.column = column;
+        this.filePath = filePath;
+        this.loading = false;
 
-      setTimeout(function() {
-        document.querySelector('.code-block').scroll(0, parseInt(document.querySelector('.line-highlight').style.top.replace('px', '')))
-      }, 200)
-    });
+        setTimeout(function () {
+          document?.querySelector(".code-block")?.scroll(
+            0,
+            parseInt(
+              document
+                ?.querySelector(".line-highlight")
+                // @ts-ignore
+                ?.style.top.replace("px", "")
+            )
+          );
+        }, 200);
+      });
   }
 }

app/components/navbar.ts

@@ -1,14 +1,15 @@
 import Component from "@glimmer/component";
-import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
+import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+import type Router from "@ember/routing/router";
 
 export default class Navbar extends Component {
   @service
-  router;
+  declare router: Router;
 
   @tracked
-  searchTerm = '';
+  searchTerm = "";
 
   @tracked
   searchFormOpen = false;
@@ -18,11 +19,12 @@ export default class Navbar extends Component {
     this.searchFormOpen = !this.searchFormOpen;
   }
 
+  // TOOD: fix this with the right type
   @action
-  search(e) {
-    if(e.keyCode === 13) {
-      this.router.transitionTo('search', {
-        queryParams: { query: encodeURI(this.searchTerm) }
+  search(e: any) {
+    if (e.keyCode === 13) {
+      this.router.transitionTo("search", {
+        queryParams: { query: encodeURI(this.searchTerm) },
       });
     }
   }

app/components/node-info-fs-count.ts

@@ -1,10 +1,9 @@
 import Component from "@glimmer/component";
-import { bind, later } from "@ember/runloop";
-import { action, computed } from "@ember/object";
-import { tracked } from '@glimmer/tracking';
+import { tracked } from "@glimmer/tracking";
+import { type FS } from "broccoli-inspector/types";
 
 interface Args {
-  fs?: FS
+  fs?: FS;
 }
 
 export default class NodeInfoFsCount extends Component<Args> {
@@ -17,73 +16,69 @@ export default class NodeInfoFsCount extends Component<Args> {
   selectedTab = 0;
 
   get fs() {
-    const fs = this.args ?.fs || {};
+    const fs = this.args?.fs || {};
     const body = Object.keys(fs)
       .filter((key) => {
-        const item = fs[key];
+        const item = (fs as any)[key];
 
         return item && item.time;
       })
       .sort((keyA, keyB) => {
-        const rowA = fs[keyA];
-        const rowB = fs[keyB];
+        const rowA = (fs as any)[keyA];
+        const rowB = (fs as any)[keyB];
 
         return rowB.time - rowA.time;
       })
       .map((key) => {
-        const { time, count } = fs[key];
+        const { time, count } = (fs as any)[key];
         // time is ns and we want to convert to ms
         return [key, { raw: time, text: `${time / 1000000}ms` }, count];
       });
 
     return {
-      header: [
-        `Operation`,
-        `Time`,
-        `Count`
-      ],
-      body
-    }
+      header: [`Operation`, `Time`, `Count`],
+      body,
+    };
   }
 
   get data() {
     const columns = [];
-    const fs = this.args ?.fs || {};
+    const fs = this.args?.fs || {};
 
     for (const operation in fs) {
-      if (!fs[operation] || !fs[operation].count) continue;
-      columns.push([operation, fs[operation].count])
+      if (!(fs as any)[operation] || !(fs as any)[operation].count) continue;
+      columns.push([operation, (fs as any)[operation].count]);
     }
 
     return {
       columns,
-      type: "pie"
-    }
+      type: "pie",
+    };
   }
 
   get legend() {
     return {
-      show: true
-    }
+      show: true,
+    };
   }
 
   get tooltip() {
     return {
       format: {
-        value: function (value, ratio, id, index) {
+        value: function (value: string, ratio: number) {
           return `${value} | ${Number(ratio * 100).toFixed(0)}%`;
-        }
-      }
+        },
+      },
     };
   }
 
   get pie() {
     return {
       label: {
-        format: function(value, ratio, id) {
+        format: function (value: string) {
           return value;
-        }
-      }
-    }
+        },
+      },
+    };
   }
 }