feat(command): convert CommonJs to Typescript

Convert CommonJS file from Explorer tree to typescript

Author: FDiskas

CHANGELOG.md

@@ -1,9 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-
-### [0.0.4](https://github.com/CodersAKL/react-toolkit/compare/v0.0.2...v0.0.4) (2020-02-14)
-
-### [0.0.3](https://github.com/CodersAKL/react-toolkit/compare/v0.0.2...v0.0.3) (2020-02-13)
-
-### 0.0.2 (2020-02-12)

README.md

@@ -1,7 +1,17 @@
 # react-toolkit
 
-Refactor React Native source code extracting inline styles from the VSCode menu
+This is VsCode plugin suppose to help developers convert their project to typescript.
 
-![demo](assets/demo.gif)
+Any suggestion are more then welcome
 
-![demo](assets/demo2.gif)
+## Refactor React Native source code extracting inline styles from the VSCode menu
+
+![demo1](assets/demo.gif)
+
+## Convert ReactJs to ReactTypescript
+
+![demo2](assets/demo2.gif)
+
+## Convert CommonJs to Typescript
+
+![convert CommonJs to Typescript](assets/demo3.gif)

assets/demo3.gif

@@ -22,8 +22,7 @@
     "vscode": "^1.42.0"
   },
   "activationEvents": [
-    "*",
-    "onLanguage:jsx",
+    "onLanguage:js",
     "onLanguage:tsx",
     "onLanguage:jsx",
     "onLanguage:javascript",
@@ -41,6 +40,10 @@
       {
         "command": "react-toolkit.readFile",
         "title": "Convert to Typescript"
+      },
+      {
+        "command": "react-toolkit.convertCjsToEsm",
+        "title": "Convert CommonJS to Typescript"
       }
     ],
     "menus": {
@@ -55,18 +58,29 @@
         {
           "command": "react-toolkit.readFile",
           "group": "1_modification@1"
+        },
+        {
+          "command": "react-toolkit.convertCjsToEsm",
+          "group": "1_modification@2"
         }
       ]
     }
   },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-conventional-changelog"
+    }
+  },
   "scripts": {
+    "cm": "git-cz",
     "vscode:prepublish": "yarn run compile",
     "compile": "tsc -p ./",
     "lint": "eslint src --ext ts",
     "watch": "tsc -watch -p ./",
     "pretest": "yarn run compile && yarn run lint",
     "test": "node ./out/test/runTest.js",
-    "release": "npx standard-version"
+    "release": "vsce publish",
+    "version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
   },
   "devDependencies": {
     "@types/fs-extra": "^8.0.1",
@@ -76,13 +90,15 @@
     "@types/vscode": "^1.42.0",
     "@typescript-eslint/eslint-plugin": "^2.18.0",
     "@typescript-eslint/parser": "^2.18.0",
+    "cz-conventional-changelog": "^3.1.0",
     "eslint": "^6.8.0",
     "glob": "^7.1.6",
     "mocha": "^7.0.1",
     "typescript": "^3.7.5",
     "vscode-test": "^1.3.0"
   },
   "dependencies": {
+    "@wessberg/cjs-to-esm-transformer": "^0.0.18",
     "fs-extra": "^8.1.0",
     "react-js-to-ts": "^1.4.0"
   }

package.json

@@ -1,6 +1,8 @@
 import * as vscode from 'vscode';
 import * as fs from 'fs-extra';
 import { run as convertToTypeScript } from 'react-js-to-ts';
+import { ModuleKind, transpileModule } from 'typescript';
+import { cjsToEsm } from '@wessberg/cjs-to-esm-transformer';
 
 import { editorContext, showInputBox, camelCase, getNewFileName, isJsx } from './utils';
 
@@ -60,3 +62,29 @@ export const convertFileToTypescript = async (uri: vscode.Uri) => {
             return vscode.commands.executeCommand('editor.action.formatDocument');
         });
 };
+
+export const convertCjsToEsm = async (uri: vscode.Uri) => {
+    const { path } = uri;
+    vscode.workspace
+        .openTextDocument(uri)
+        .then(async (document) => {
+            const text = document.getText();
+            const newFile = getNewFileName(path, isJsx(text) ? 'tsx' : 'ts');
+
+            const result = transpileModule(text, {
+                transformers: cjsToEsm(),
+                compilerOptions: {
+                    module: ModuleKind.ESNext,
+                },
+            });
+
+            await fs.rename(path, newFile);
+            await fs.writeFile(newFile, result.outputText);
+
+            const file = await vscode.workspace.openTextDocument(newFile);
+            vscode.window.showTextDocument(file);
+        })
+        .then(() => {
+            return vscode.commands.executeCommand('editor.action.formatDocument');
+        });
+};

src/commands.ts

@@ -1,14 +1,16 @@
 import * as vscode from 'vscode';
-import { extractStyle, convertFileToTypescript } from './commands';
+import { extractStyle, convertFileToTypescript, convertCjsToEsm } from './commands';
 
 export function activate(context: vscode.ExtensionContext) {
     console.log('Congratulations, your extension "react-toolkit" is now active!');
 
     const commandExtractStyle = vscode.commands.registerCommand('react-toolkit.extractStyle', extractStyle);
     const commandReadFile = vscode.commands.registerCommand('react-toolkit.readFile', convertFileToTypescript);
+    const commandCjsToEsm = vscode.commands.registerCommand('react-toolkit.convertCjsToEsm', convertCjsToEsm);
 
     context.subscriptions.push(commandExtractStyle);
     context.subscriptions.push(commandReadFile);
+    context.subscriptions.push(commandCjsToEsm);
 }
 
 export function deactivate() {}