Merge pull request #1 from JennieJi/babel-version-select

Babel version select

.eslintrc.json

@@ -1,19 +1,18 @@
 {
-    "root": true,
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": 6,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "@typescript-eslint"
-    ],
-    "rules": {
-        "@typescript-eslint/class-name-casing": "warn",
-        "@typescript-eslint/semi": "warn",
-        "curly": "warn",
-        "eqeqeq": "warn",
-        "no-throw-literal": "warn",
-        "semi": "off"
-    }
+  "extends": ["plugin:prettier/recommended"],
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/class-name-casing": "warn",
+    "@typescript-eslint/semi": "warn",
+    "curly": "warn",
+    "eqeqeq": "warn",
+    "no-throw-literal": "warn",
+    "semi": "off"
+  }
 }

.github/workflows/main.yml

@@ -13,7 +13,7 @@ jobs:
     steps:
       - uses: actions/checkout@v1
       - name: Install dependencies
-        run: yarn install
+        run: yarn install --frozen-lockfile
       - name: linting
         run: yarn lint
 
@@ -23,6 +23,6 @@ jobs:
     steps:
       - uses: actions/checkout@v1
       - name: Install dependencies
-        run: yarn install
+        run: yarn install --frozen-lockfile
       - name: Test
         run: yarn test

.gitignore

@@ -2,4 +2,5 @@ node_modules
 .vscode-test
 out
 *.log
-*.vsix
+*.vsix
+resources/@babel

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2
+}

CHANGELOG.md

@@ -0,0 +1,28 @@
+### Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+#### [v0.1.0](https://github.com/JennieJi/vscode-babel-ast-explorer/compare/vv0.0.2...vv0.1.0)
+
+> 25 May 2020
+
+- Format fix [`5579540`](https://github.com/JennieJi/vscode-babel-ast-explorer/commit/55795404bbface596ae327a6deecf9b49a1de207)
+- Add @babel/parser version selection [`bff10ae`](https://github.com/JennieJi/vscode-babel-ast-explorer/commit/bff10aead846eb5d612c806d0261c572735a093a)
+- Add auto-changelog [`ef15d00`](https://github.com/JennieJi/vscode-babel-ast-explorer/commit/ef15d006e413e9d9ee5f19bdd57b1797f1f6d929)
+
+#### [v0.0.2](https://github.com/JennieJi/vscode-babel-ast-explorer/compare/vv0.0.1...vv0.0.2)
+
+> 29 March 2020
+
+- Update image source, guess initial plugins, add source file path to title [`cb2d42a`](https://github.com/JennieJi/vscode-babel-ast-explorer/commit/cb2d42a1874da82ac94c966364cccd32230d1b33)
+- Update image URL [`4a05f8e`](https://github.com/JennieJi/vscode-babel-ast-explorer/commit/4a05f8e5eff2b8004dea4787ed7c54b639ceb04a)
+
+#### v0.0.1
+
+> 29 March 2020
+
+- init commit [`6866c6e`](https://github.com/JennieJi/vscode-babel-ast-explorer/commit/6866c6e4bf52fd2852f92591e7f2384407b10fd0)
+- Use tree view for options [`71db1d2`](https://github.com/JennieJi/vscode-babel-ast-explorer/commit/71db1d2d302b6d9e56600336ea17482ba820aa77)
+- Add hide location, empty, type options [`a20175a`](https://github.com/JennieJi/vscode-babel-ast-explorer/commit/a20175a74ebac0a9442f459dc9040753ac518e77)

README.md

@@ -11,5 +11,3 @@ Plugins and option selections:
 Click plugin/option to update the webview:
 
 ![change option](https://i.imgur.com/Fe0BHq4.png)
-
-Currently only supports [@babel/parser](https://babeljs.io/docs/en/babel-parser)@`7.8.7`.

package.json

@@ -8,7 +8,7 @@
     "name": "Jennie Ji",
     "email": "[email protected]"
   },
-  "version": "0.0.2",
+  "version": "0.1.0",
   "license": "MIT",
   "engines": {
     "vscode": "^1.42.0"
@@ -69,7 +69,8 @@
     }
   },
   "scripts": {
-    "vscode:prepublish": "yarn run compile",
+    "vscode:prepublish": "yarn changelog && yarn run compile",
+    "changelog": "auto-changelog --tag-prefix v -p && git add CHANGELOG.md",
     "compile": "tsc -p ./",
     "lint": "eslint src --ext ts",
     "watch": "tsc -watch -p ./",
@@ -81,23 +82,30 @@
     "@types/glob": "^7.1.1",
     "@types/mocha": "^7.0.2",
     "@types/node": "^12.11.7",
+    "@types/pacote": "^11.1.0",
+    "@types/semver": "^7.2.0",
     "@types/vscode": "^1.42.0",
     "@typescript-eslint/eslint-plugin": "^2.18.0",
     "@typescript-eslint/parser": "^2.18.0",
+    "auto-changelog": "latest",
     "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
     "glob": "^7.1.6",
     "mocha": "^7.1.0",
+    "prettier": "^2.0.5",
     "typescript": "^3.7.5",
     "vscode-test": "^1.3.0"
   },
-  "dependencies": {
-    "@babel/parser": "7.8.7"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/JennieJi/vscode-babel-ast-explorer"
   },
   "bugs": {
     "url": "https://github.com/JennieJi/vscode-babel-ast-explorer/issues"
+  },
+  "dependencies": {
+    "pacote": "^11.1.10",
+    "semver": "^7.3.2"
   }
 }

src/MultiOptionsProvider.ts

@@ -0,0 +1,61 @@
+import * as vscode from 'vscode';
+import * as path from 'path';
+import { COMMANDS } from './commands';
+import { OptionNode, OptionGroup } from './options';
+
+class MultiOptionsProvider implements vscode.TreeDataProvider<OptionNode> {
+  private model: OptionGroup;
+  private enabledOptions: any[];
+  private _onDidChangeTreeData: vscode.EventEmitter<
+    void
+  > = new vscode.EventEmitter<void>();
+  readonly onDidChangeTreeData: vscode.Event<any> = this._onDidChangeTreeData
+    .event;
+
+  constructor(optionGroup: OptionGroup, enabled?: any[]) {
+    this.model = optionGroup;
+    this.enabledOptions = enabled || [];
+  }
+
+  public setValue(value: any[]) {
+    const enabledOptionsSet = new Set(this.enabledOptions);
+    if (
+      this.enabledOptions.length === value.length &&
+      value.every((v) => enabledOptionsSet.has(v))
+    ) {
+      return;
+    }
+    this.enabledOptions = value;
+    this._onDidChangeTreeData.fire();
+  }
+
+  public getTreeItem({ label, value }: OptionNode): vscode.TreeItem {
+    const isEnabled = this.enabledOptions.includes(value);
+    const enabled = this.enabledOptions;
+    return {
+      label,
+      id: value,
+      iconPath: path.resolve(
+        __dirname,
+        isEnabled ? 'icons/green-tick.svg' : 'icons/grey-tick.svg'
+      ),
+      command: {
+        command: COMMANDS.update,
+        arguments: [
+          {
+            [this.model.key]: isEnabled
+              ? enabled.filter((opt) => opt !== value)
+              : [...enabled, value],
+          },
+        ],
+        title: `Toggle ${label} option`,
+      },
+    };
+  }
+
+  public getChildren(): OptionNode[] | Thenable<OptionNode[]> {
+    return this.model.items;
+  }
+}
+
+export default MultiOptionsProvider;

src/SingleOptionProvider.ts

@@ -0,0 +1,54 @@
+import * as vscode from 'vscode';
+import * as path from 'path';
+import { COMMANDS } from './commands';
+import { OptionNode, OptionGroup } from './options';
+
+class SingleOptionProvider implements vscode.TreeDataProvider<OptionNode> {
+  private model: OptionGroup;
+  private enabled: any;
+  private _onDidChangeTreeData: vscode.EventEmitter<
+    void
+  > = new vscode.EventEmitter<void>();
+  readonly onDidChangeTreeData: vscode.Event<any> = this._onDidChangeTreeData
+    .event;
+
+  constructor(optionGroup: OptionGroup, enabled?: any) {
+    this.model = optionGroup;
+    this.enabled = enabled;
+  }
+
+  public setValue(value: string) {
+    if (this.enabled !== value) {
+      this.enabled = value;
+      this._onDidChangeTreeData.fire();
+    }
+    return this.enabled;
+  }
+
+  public getTreeItem({ label, value }: OptionNode): vscode.TreeItem {
+    const isEnabled = this.enabled === value;
+    return {
+      label,
+      id: value,
+      iconPath: path.resolve(
+        __dirname,
+        isEnabled ? 'icons/green-tick.svg' : 'icons/grey-tick.svg'
+      ),
+      command: {
+        command: COMMANDS.update,
+        arguments: [
+          {
+            [this.model.key]: value,
+          },
+        ],
+        title: `Toggle ${label} option`,
+      },
+    };
+  }
+
+  public getChildren(): OptionNode[] | Thenable<OptionNode[]> {
+    return this.model.items;
+  }
+}
+
+export default SingleOptionProvider;

src/astView.ts

@@ -1,11 +1,13 @@
 import * as vscode from 'vscode';
-import { parse, ParserPlugin, ParserOptions } from '@babel/parser';
 import renderAst from './renderAst';
 import simpleTemplate from './simpleTemplate';
+import { resolveVersion } from './parserVersion';
 
-export type ASTViewOptions = ParserOptions & {
+export type ASTViewOptions = {
   babelVersion?: string;
   options?: string[];
+  plugins?: string[];
+  sourceType?: string;
 };
 
 class ASTView {
@@ -15,7 +17,7 @@ class ASTView {
   private updateTimer?: NodeJS.Timeout;
 
   private options = {
-    sourceType: 'module'
+    sourceType: 'module',
   } as ASTViewOptions;
 
   constructor(onDispose?: () => void, options?: ASTViewOptions) {
@@ -26,7 +28,7 @@ class ASTView {
       this.getTitle(),
       vscode.ViewColumn.Beside,
       {
-        enableScripts: true
+        enableScripts: true,
       }
     );
     if (onDispose) {
@@ -73,23 +75,25 @@ class ASTView {
 
   private async updatePanel() {
     this.panel.title = this.getTitle();
-    this.panel.webview.html = await this.getWebviewContent();
+    this.panel.webview.html = 'Loading...';
     this.codeVersion = this.getVersion();
+    this.panel.webview.html = await this.getWebviewContent();
   }
 
   private async getWebviewContent() {
     const raw = this.getContent();
-    const { sourceType, plugins, options = [] } =
+    const { babelVersion, sourceType, plugins, options = [] } =
       this.options || ({} as ASTViewOptions);
 
     try {
+      const { parse } = await resolveVersion(babelVersion);
       const ast = parse(raw, {
         sourceType,
-        plugins
+        plugins,
       });
       return simpleTemplate('index.html', {
         ast: await renderAst(ast),
-        class: options.join(' ')
+        class: options.join(' '),
       });
     } catch (e) {
       return e.message;

src/commands.ts

@@ -1,4 +1,4 @@
 export enum COMMANDS {
   start = 'babelAstExplorer.start',
-  update = 'babelAstExplorer.update'
+  update = 'babelAstExplorer.update',
 }

src/extension.ts

@@ -9,15 +9,16 @@ export function activate(context: vscode.ExtensionContext) {
   let astView: ASTView | undefined;
   let optionsView: OptionsView | undefined;
   const defaultOptions = OPTIONS.map(({ value }) => value);
+
+  const guessedPlugins = guessPlugins(vscode.window.activeTextEditor);
+  if (!optionsView) {
+    optionsView = new OptionsView({
+      options: defaultOptions,
+      plugins: guessedPlugins,
+    });
+  }
   context.subscriptions.push(
     vscode.commands.registerCommand(COMMANDS.start, () => {
-      const guessedPlugins = guessPlugins(vscode.window.activeTextEditor);
-      if (!optionsView) {
-        optionsView = new OptionsView({
-          options: defaultOptions,
-          plugins: guessedPlugins
-        });
-      }
       if (astView) {
         astView.updateEditor();
       } else {

src/guessPlugins.ts

@@ -1,9 +1,8 @@
 import * as vscode from 'vscode';
-import { ParserPlugin } from '@babel/parser';
 
 export default function guessPlugins(
   editor: vscode.TextEditor | undefined
-): ParserPlugin[] {
+): string[] {
   const lang = editor?.document.languageId;
   if (lang === 'javascriptreact') {
     return ['jsx'];