Clean up and Stability

* Refactor to use classes in most places
* Handle case where updates to different files in quick succession could cancel
pending (debounced) update for the first
* More granular updating of config values
* Don't use lodash
* Render decorations from cache when switching active files

Author: captbaritone

README.md

@@ -31,8 +31,6 @@ The color of the parentheses can be configured via:
 
 ## TODO
 
-- [ ] Hide menu bar item when no js files are visible?
-- [ ] Log to output when parse fails
 - [ ] Correctly handle case where config has been set at the language level.
 
 ## Possible Future Features

package.json

@@ -102,9 +102,7 @@
   "dependencies": {
     "@babel/parser": "^7.11.4",
     "@babel/traverse": "^7.11.0",
-    "@types/babel__traverse": "^7.0.13",
-    "@types/lodash": "^4.14.159",
-    "lodash": "^4.17.20"
+    "@types/babel__traverse": "^7.0.13"
   },
   "prettier": {}
 }

src/commands.ts

@@ -29,7 +29,8 @@ function getConfigurationType(
   return vscode.ConfigurationTarget.Global;
 }
 
-export function activateCommands(subscriptions: { dispose(): any }[]) {
+export function activateCommands(): vscode.Disposable {
+  const subscriptions = [];
   subscriptions.push(
     vscode.commands.registerCommand(SHOW_COMMAND, () => {
       const config = vscode.workspace.getConfiguration();
@@ -58,4 +59,6 @@ export function activateCommands(subscriptions: { dispose(): any }[]) {
       );
     })
   );
+
+  return vscode.Disposable.from(...subscriptions);
 }

src/extension.ts

@@ -1,45 +1,41 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 // The module 'vscode' contains the VS Code extensibility API
 // Import the module and reference it with the alias vscode in your code below
-import * as vscode from "vscode";
-import { activateParens } from "./parens";
-import { activateMenuBarItem } from "./menuBarItem";
+import { Disposable, ExtensionContext, workspace } from "vscode";
+import Parens from "./parens";
+import MenuBarItem from "./menuBarItem";
 import { activateCommands } from "./commands";
-import { ENABLED_CONFIG, DEBOUNCE_CONFIG, USE_FLOW_CONFIG } from "./constants";
+import { ENABLED_CONFIG } from "./constants";
 
 // this method is called when vs code is activated
-export function activate(context: vscode.ExtensionContext) {
-  activateMenuBarItem(context.subscriptions);
-  activateCommands(context.subscriptions);
+export function activate(context: ExtensionContext) {
+  context.subscriptions.push(new MenuBarItem());
+  context.subscriptions.push(activateCommands());
 
-  let parens: vscode.Disposable | null = null;
+  let parens: Disposable | null = null;
   function updateParensEnabled() {
     if (parens !== null) {
       parens.dispose();
     }
-    if (vscode.workspace.getConfiguration().get(ENABLED_CONFIG)) {
-      parens = activateParens();
+    if (workspace.getConfiguration().get(ENABLED_CONFIG)) {
+      parens = new Parens();
     } else {
       parens = null;
     }
   }
 
   context.subscriptions.push(
-    new vscode.Disposable(() => {
+    new Disposable(() => {
       if (parens !== null) {
         parens.dispose();
       }
     })
   );
 
   updateParensEnabled();
-  vscode.workspace.onDidChangeConfiguration(
+  workspace.onDidChangeConfiguration(
     (event) => {
-      if (
-        event.affectsConfiguration(USE_FLOW_CONFIG) ||
-        event.affectsConfiguration(ENABLED_CONFIG) ||
-        event.affectsConfiguration(DEBOUNCE_CONFIG)
-      ) {
+      if (event.affectsConfiguration(ENABLED_CONFIG)) {
         updateParensEnabled();
       }
     },

src/menuBarItem.ts

@@ -1,46 +1,65 @@
-import * as vscode from "vscode";
+import {
+  Disposable,
+  window,
+  StatusBarAlignment,
+  StatusBarItem,
+  workspace,
+  ConfigurationChangeEvent,
+} from "vscode";
 import { ENABLED_CONFIG, TOGGLE_COMMAND, MENU_BAR_CONFIG } from "./constants";
 
-export function activateMenuBarItem(subscriptions: { dispose(): any }[]) {
-  const statusBarItem = vscode.window.createStatusBarItem(
-    vscode.StatusBarAlignment.Left,
-    100
-  );
-  statusBarItem.command = TOGGLE_COMMAND;
+const PLAY = "\u25BA";
+const STOP = "\u25A0";
 
-  const PLAY = "\u25BA";
-  const STOP = "\u25A0";
+export default class MenuBarItem implements Disposable {
+  private readonly _disposables: Disposable[] = [];
+  private readonly _statusBarItem: StatusBarItem;
+  constructor() {
+    this._disposables = [];
+    this._statusBarItem = window.createStatusBarItem(
+      StatusBarAlignment.Left,
+      100 // What should this number be?
+    );
+    this._statusBarItem.command = TOGGLE_COMMAND;
 
-  function setText() {
-    const config = vscode.workspace.getConfiguration();
+    this._disposables.push(this._statusBarItem);
+
+    this._setText();
+    this._setVisibility();
+
+    workspace.onDidChangeConfiguration(
+      this._handleConfigChange,
+      this,
+      this._disposables
+    );
+  }
+
+  _handleConfigChange(event: ConfigurationChangeEvent) {
+    if (event.affectsConfiguration(ENABLED_CONFIG)) {
+      this._setText();
+    }
+    if (event.affectsConfiguration(MENU_BAR_CONFIG)) {
+      this._setVisibility();
+    }
+  }
+
+  _setText() {
+    const config = workspace.getConfiguration();
     const icon = config.get(ENABLED_CONFIG) ? STOP : PLAY;
     const action = config.get(ENABLED_CONFIG) ? "hide" : "show";
-    statusBarItem.text = `(${icon})`;
-    statusBarItem.tooltip = `Click to ${action} implicit parentheses.`;
+    this._statusBarItem.text = `(${icon})`;
+    this._statusBarItem.tooltip = `Click to ${action} implicit parentheses.`;
   }
 
-  function setVisibility() {
-    if (vscode.workspace.getConfiguration().get(MENU_BAR_CONFIG)) {
-      statusBarItem.show();
+  _setVisibility() {
+    if (workspace.getConfiguration().get(MENU_BAR_CONFIG)) {
+      this._statusBarItem.show();
     } else {
-      statusBarItem.hide();
+      this._statusBarItem.hide();
     }
   }
 
-  setText();
-  setVisibility();
-
-  vscode.workspace.onDidChangeConfiguration(
-    (event) => {
-      if (event.affectsConfiguration(ENABLED_CONFIG)) {
-        setText();
-      }
-      if (event.affectsConfiguration(MENU_BAR_CONFIG)) {
-        setVisibility();
-      }
-    },
-    null,
-    subscriptions
-  );
-  subscriptions.push(statusBarItem);
+  dispose() {
+    this._disposables.forEach((disposable) => disposable.dispose());
+  }
 }