Added ability to quickly convert js to typescript

Author: FDiskas

README.md

@@ -3,3 +3,5 @@
 Refactor React Native source code extracting inline styles from the VSCode menu
 
 ![demo](assets/demo.gif)
+
+![demo](assets/demo2.gif)

assets/demo2.gif

@@ -22,6 +22,8 @@
     "vscode": "^1.42.0"
   },
   "activationEvents": [
+    "*",
+    "onLanguage:jsx",
     "onLanguage:tsx",
     "onLanguage:jsx",
     "onLanguage:javascript",
@@ -35,6 +37,10 @@
       {
         "command": "react-toolkit.extractStyle",
         "title": "Extract style to StyleSheet"
+      },
+      {
+        "command": "react-toolkit.readFile",
+        "title": "Convert to Typescript"
       }
     ],
     "menus": {
@@ -44,6 +50,12 @@
           "command": "react-toolkit.extractStyle",
           "group": "1_modification@1"
         }
+      ],
+      "explorer/context": [
+        {
+          "command": "react-toolkit.readFile",
+          "group": "1_modification@1"
+        }
       ]
     }
   },
@@ -57,6 +69,7 @@
     "release": "npx standard-version"
   },
   "devDependencies": {
+    "@types/fs-extra": "^8.0.1",
     "@types/glob": "^7.1.1",
     "@types/mocha": "^7.0.1",
     "@types/node": "^12.11.7",
@@ -69,5 +82,8 @@
     "typescript": "^3.7.5",
     "vscode-test": "^1.3.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "fs-extra": "^8.1.0",
+    "react-js-to-ts": "^1.4.0"
+  }
 }

package.json

@@ -1,5 +1,8 @@
 import * as vscode from 'vscode';
-import { editorContext, showInputBox, camelCase } from './utils';
+import * as fs from 'fs-extra';
+import { run as convertToTypeScript } from 'react-js-to-ts';
+
+import { editorContext, showInputBox, camelCase, getNewFileName, isJsx } from './utils';
 
 const { Position } = vscode;
 export const activeEditor = () => vscode.window.activeTextEditor;
@@ -37,3 +40,23 @@ export async function extractStyle() {
             });
     });
 }
+
+export const convertFileToTypescript = 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');
+
+            await fs.rename(path, newFile);
+            const result = convertToTypeScript(newFile);
+            await fs.writeFile(newFile, result);
+            const file = await vscode.workspace.openTextDocument(newFile);
+            vscode.window.showTextDocument(file);
+        })
+        .then(() => {
+            return vscode.commands.executeCommand('editor.action.formatDocument');
+        });
+};

src/commands.ts

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

src/extension.ts

@@ -1,5 +1,5 @@
 import * as vscode from 'vscode';
-import { InputBoxOptions } from 'vscode';
+import * as path from 'path';
 
 export const editorContext = (
     callback: (editor: vscode.TextEditor, selection: vscode.Selection, original: string, text: string) => any,
@@ -15,15 +15,38 @@ export const editorContext = (
     }
 };
 
-export const showInputBox = (defaultValue: InputBoxOptions['value'], placeHolder: InputBoxOptions['placeHolder']) =>
+export const showInputBox = (
+    defaultValue: vscode.InputBoxOptions['value'],
+    placeHolder: vscode.InputBoxOptions['placeHolder'],
+) =>
     vscode.window.showInputBox({
         value: defaultValue,
         placeHolder,
     });
 
-export const camelCase = (string: string) =>
-    string
+export const camelCase = (string: string) => {
+    return string
         .toLowerCase()
         .trim()
         .split(/[.\-_\s]/g)
         .reduce((string, word) => string + word[0].toUpperCase() + word.slice(1));
+};
+
+export const getFilePath = () => {
+    const activeEditor = vscode.window.activeTextEditor;
+    const document = activeEditor && activeEditor.document;
+
+    return document && document.fileName;
+};
+
+export const getNewFileName = (fileName: string, type: 'tsx' | 'ts') => {
+    const ext = path.extname(fileName).replace(/^\./, '');
+    const extNameRegex = new RegExp(`${ext}$`);
+    return fileName.replace(extNameRegex, type);
+};
+
+export const isJsx = (content: string) => {
+    const reg = /<([A-z])/gm;
+
+    return reg.test(content);
+};

src/utils.ts

@@ -10,7 +10,8 @@
     "removeComments": true,
     "allowSyntheticDefaultImports": true,
     "noUnusedParameters": true,
-    "noUnusedLocals": true
+    "noUnusedLocals": true,
+    "skipLibCheck": true
   },
   "exclude": ["node_modules", ".vscode-test"]
 }