Setting to show/hide menubar item and fix issues with toggling settings

Author: captbaritone

README.md

@@ -16,9 +16,6 @@ This extension contributes the following settings:
 
 ## TODO
 
-- [ ] Ensure we can parse Flow and Typescript
-- [ ] Attempt to reparse on parser config change
-- [ ] Make config names human readable
 - [ ] Figure out how to configure colors
 - [ ] Set default color for light mode
 - [ ] Ensure plugin has name
@@ -28,3 +25,4 @@ This extension contributes the following settings:
 - Enable/disable menu bar item in config
 - Allow user to configure which parens are shown
 - Provide automated fixes for adding parens, or even extracting expressions to variables.
+- Use the menu bar item to indicate if parsing has failed.

package.json

@@ -12,6 +12,7 @@
   "activationEvents": [
     "onLanguage:typescript",
     "onLanguage:javascript",
+    "onLanguage:flow",
     "onLanguage:javascriptreact",
     "onLanguage:typescriptreact"
   ],
@@ -34,12 +35,17 @@
     "configuration": {
       "title": "Implicit Parentheses",
       "properties": {
-        "implicitparens.enabled": {
+        "Implicit Parentheses.enable": {
           "type": "boolean",
           "default": true,
           "description": "Show implicit parentheses"
         },
-        "implicitparens.parser": {
+        "Implicit Parentheses.Show in Menu Bar": {
+          "type": "boolean",
+          "default": true,
+          "description": "Show a button in the menu bar to show/hide implicit parentheses"
+        },
+        "Implicit Parentheses.parser": {
           "type": "string",
           "default": "TypeScript",
           "description": "Parser to use",
@@ -53,6 +59,11 @@
             "Babel Parser with TypeScript enabled",
             "Babel Parser with Flow enabled"
           ]
+        },
+        "Implicit Parentheses.Debounce Timeout": {
+          "type": "number",
+          "default": 500,
+          "description": "Number of milliseconds that the plugin will wait after a file changes before it parses the file."
         }
       }
     },

src/commands.ts

@@ -24,8 +24,7 @@ export function activateCommands(subscriptions: { dispose(): any }[]) {
       config.update(
         ENABLED_CONFIG,
         !config.get(ENABLED_CONFIG),
-        // TODO: Should this affect the workspace instead?
-        true
+        vscode.ConfigurationTarget.Workspace
       );
     })
   );

src/constants.ts

@@ -2,6 +2,7 @@ export const TOGGLE_COMMAND = "implicitparens.toggleParens";
 export const SHOW_COMMAND = "implicitparens.showParens";
 export const HIDE_COMMAND = "implicitparens.hideParens";
 
-export const ENABLED_CONFIG = "implicitparens.enabled";
-export const PARSER_CONFIG = "implicitparens.parser";
-export const DEBOUNCE_TIME = 500;
+export const ENABLED_CONFIG = "Implicit Parentheses.enable";
+export const PARSER_CONFIG = "Implicit Parentheses.parser";
+export const DEBOUNCE_CONFIG = "Implicit Parentheses.Debounce Timeout";
+export const MENU_BAR_CONFIG = "Implicit Parentheses.Show in Menu Bar";

src/extension.ts

@@ -5,7 +5,7 @@ import * as vscode from "vscode";
 import { activateParens } from "./parens";
 import { activateMenuBarItem } from "./menuBarItem";
 import { activateCommands } from "./commands";
-import { ENABLED_CONFIG } from "./constants";
+import { ENABLED_CONFIG, DEBOUNCE_CONFIG, PARSER_CONFIG } from "./constants";
 
 // this method is called when vs code is activated
 export function activate(context: vscode.ExtensionContext) {
@@ -14,17 +14,13 @@ export function activate(context: vscode.ExtensionContext) {
 
   let parens: vscode.Disposable | null = null;
   function updateParensEnabled() {
+    if (parens !== null) {
+      parens.dispose();
+    }
     if (vscode.workspace.getConfiguration().get(ENABLED_CONFIG)) {
-      if (parens === null) {
-        parens = activateParens();
-      } else {
-      }
+      parens = activateParens();
     } else {
-      if (parens !== null) {
-        parens.dispose();
-        parens = null;
-      } else {
-      }
+      parens = null;
     }
   }
 
@@ -39,7 +35,11 @@ export function activate(context: vscode.ExtensionContext) {
   updateParensEnabled();
   vscode.workspace.onDidChangeConfiguration(
     (event) => {
-      if (event.affectsConfiguration(ENABLED_CONFIG)) {
+      if (
+        event.affectsConfiguration(PARSER_CONFIG) ||
+        event.affectsConfiguration(ENABLED_CONFIG) ||
+        event.affectsConfiguration(DEBOUNCE_CONFIG)
+      ) {
         updateParensEnabled();
       }
     },

src/menuBarItem.ts

@@ -1,30 +1,43 @@
 import * as vscode from "vscode";
-import { ENABLED_CONFIG, TOGGLE_COMMAND } from "./constants";
+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";
 
   function setText() {
     const config = vscode.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.`;
+  }
+
+  function setVisibility() {
+    if (vscode.workspace.getConfiguration().get(MENU_BAR_CONFIG)) {
+      statusBarItem.show();
+    } else {
+      statusBarItem.hide();
+    }
   }
 
   setText();
-  statusBarItem.show();
-  statusBarItem.command = TOGGLE_COMMAND;
+  setVisibility();
 
   vscode.workspace.onDidChangeConfiguration(
     (event) => {
       if (event.affectsConfiguration(ENABLED_CONFIG)) {
         setText();
       }
+      if (event.affectsConfiguration(MENU_BAR_CONFIG)) {
+        setVisibility();
+      }
     },
     null,
     subscriptions

src/parens.ts

@@ -1,7 +1,7 @@
 import * as vscode from "vscode";
 import { findParens } from "./parse";
 import { debounce, repeat } from "./utils";
-import { DEBOUNCE_TIME, PARSER_CONFIG } from "./constants";
+import { DEBOUNCE_CONFIG, PARSER_CONFIG } from "./constants";
 import { ParserPlugin } from "@babel/parser";
 
 export function activateParens() {
@@ -21,19 +21,24 @@ export function activateParens() {
 
   subscriptions.push(decorationType);
 
-  updateDecorations(decorationType);
+  for (const editor of vscode.window.visibleTextEditors) {
+    updateDecorations(editor, decorationType);
+  }
 
   const triggerUpdateDecorations = debounce(
-    () => updateDecorations(decorationType),
-    DEBOUNCE_TIME
+    (editor: vscode.TextEditor) => updateDecorations(editor, decorationType),
+    vscode.workspace.getConfiguration().get(DEBOUNCE_CONFIG)
   );
   subscriptions.push(
     new vscode.Disposable(() => triggerUpdateDecorations.cancel())
   );
 
   vscode.window.onDidChangeActiveTextEditor(
     () => {
-      triggerUpdateDecorations();
+      const activeEditor = vscode.window.activeTextEditor;
+      if (activeEditor !== undefined) {
+        triggerUpdateDecorations(activeEditor);
+      }
     },
     null,
     subscriptions
@@ -46,7 +51,7 @@ export function activateParens() {
         activeEditor !== undefined &&
         event.document === activeEditor.document
       ) {
-        triggerUpdateDecorations();
+        triggerUpdateDecorations(activeEditor);
       }
     },
     null,
@@ -70,13 +75,11 @@ function getPlugins(): ParserPlugin[] {
   }
 }
 
-function updateDecorations(decorationType: vscode.TextEditorDecorationType) {
-  const activeEditor = vscode.window.activeTextEditor;
-  if (!activeEditor) {
-    return;
-  }
-
-  const parens = findParens(activeEditor.document.getText(), getPlugins());
+function updateDecorations(
+  editor: vscode.TextEditor,
+  decorationType: vscode.TextEditorDecorationType
+) {
+  const parens = findParens(editor.document.getText(), getPlugins());
   if (parens === null) {
     return;
   }
@@ -98,13 +101,13 @@ function updateDecorations(decorationType: vscode.TextEditorDecorationType) {
 
   const paren = { before: "(", after: ")" };
 
-  activeEditor.setDecorations(
+  editor.setDecorations(
     decorationType,
     decorations.map(({ count, pos, beforeAfter }) => {
       return {
         range: new vscode.Range(
-          activeEditor.document.positionAt(pos),
-          activeEditor.document.positionAt(pos)
+          editor.document.positionAt(pos),
+          editor.document.positionAt(pos)
         ),
         renderOptions: {
           [beforeAfter]: { contentText: repeat(paren[beforeAfter], count) },