feat: add removing react from imports in ts components

Author: Damian Sznajder

Diff for: .gitignore

@@ -5,3 +5,4 @@ node_modules
 *.log
 .DS_Store
 lib/
+src/snippets/generated.json

Diff for: CHANGELOG.md

@@ -4,6 +4,13 @@ All info about changes
 
 # Released
 
+[4.3.0] - 2020-12-18
+
+- BREAKING CHANGES:
+  - From now on snippets have options for Language, React 17+ support, typescript and more.
+  - Added experimental prettier support, for now it's kinda buggy and needs some work.
+  - Refactored the codebase, moved snippets to ts files.
+
 [3.1.0] - 2020-12-18
 
 - Add couple of snippets and React 17 components

Diff for: package.json

@@ -116,6 +116,7 @@
   "scripts": {
     "vscode:prepublish": "yarn compile",
     "compile": "rm -rf lib; tsc -p ./ --noEmit false --module commonjs --outDir lib",
+    "compile:dev": "rm -rf lib; tsc -p ./ --noEmit false --module commonjs --outDir lib",
     "lint": "eslint --ext .js,.ts,.tsx ./src/",
     "watch": "tsc -watch -p ./",
     "typescript": "tsc --noEmit"
@@ -127,24 +128,24 @@
     "prettier": "^2"
   },
   "devDependencies": {
-    "@babel/cli": "7.16.0",
-    "@babel/eslint-parser": "7.16.5",
-    "@babel/preset-typescript": "7.16.5",
-    "@types/node": "17.0.5",
-    "@types/prettier": "2.4.2",
-    "@types/vscode": "1.60.0",
-    "@typescript-eslint/eslint-plugin": "5.8.1",
-    "@typescript-eslint/parser": "5.8.1",
-    "eslint": "8.5.0",
+    "@babel/cli": "7.17.0",
+    "@babel/eslint-parser": "7.17.0",
+    "@babel/preset-typescript": "7.16.7",
+    "@types/node": "17.0.16",
+    "@types/prettier": "2.4.3",
+    "@types/vscode": "1.64.0",
+    "@typescript-eslint/eslint-plugin": "5.11.0",
+    "@typescript-eslint/parser": "5.11.0",
+    "eslint": "8.8.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-babel": "5.3.1",
     "eslint-plugin-eslint-comments": "3.2.0",
-    "eslint-plugin-import": "2.25.3",
-    "eslint-plugin-jest": "25.3.3",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-jest": "26.1.0",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
     "prettier": "2.5.1",
-    "typescript": "4.5.4"
+    "typescript": "4.5.5"
   },
   "prettier": {
     "bracketSameLine": false,

Diff for: src/helpers/parseSnippetToBody.ts

@@ -3,35 +3,17 @@ import { formatSnippet } from './formatters';
 import { Snippet } from './generateSnippets';
 import replaceOrRemoveReactImport from './replaceOrRemoveReactImport';
 
-const withReactImport = [
-  'rfce',
-  'rfc',
-  'rfcp',
-  'rafce',
-  'rafc',
-  'rafcp',
-  'rnfe',
-  'rnfes',
-  'rnf',
-  'rnfs',
-  'stest',
-  'sntest',
-  'srtest',
-  'snrtest',
-  'hocredux',
-  'hoc',
-];
-
 const parseSnippetToBody = (snippet: Snippet) => {
   const { importReactOnTop } = extensionConfig();
   const body =
     typeof snippet.body === 'string' ? snippet.body : snippet.body.join('\n');
 
   const snippetBody = importReactOnTop
     ? body
-    : withReactImport.includes(snippet.prefix)
-    ? replaceOrRemoveReactImport(snippet.body)
-    : body;
+    : replaceOrRemoveReactImport({
+        prefix: snippet.prefix,
+        body: snippet.body,
+      });
 
   const formattedSnippet = formatSnippet(snippetBody).split('\n');
 

Diff for: src/helpers/replaceOrRemoveReactImport.ts

@@ -1,16 +1,64 @@
-const replaceOrRemoveReactImport = (snippetBody: string[]) => {
-  const reactImportIndex = snippetBody.findIndex((line) =>
+import { Snippet } from './generateSnippets';
+
+const snippetWithReactImportPrefixes = [
+  'rfce',
+  'rfc',
+  'rfcp',
+  'rafce',
+  'rafc',
+  'rafcp',
+  'rnfe',
+  'rnfes',
+  'rnf',
+  'rnfs',
+  'stest',
+  'sntest',
+  'srtest',
+  'snrtest',
+  'hocredux',
+  'hoc',
+  'tsrafc',
+  'tsrafce',
+  'tsrcc',
+  'tsrcredux',
+  'tsrce',
+  'tsrpce',
+  'tsrpc',
+  'tsrfc',
+  'tsrfce',
+  'tsrnf',
+  'tsrnfs',
+];
+
+const replaceOrRemoveReactImport = ({
+  body,
+  prefix,
+}: {
+  body: string[];
+  prefix: Snippet['prefix'];
+}) => {
+  if (!snippetWithReactImportPrefixes.includes(prefix)) {
+    return body.join('\n');
+  }
+
+  let bodyCopy = [...body];
+  const reactImportIndex = bodyCopy.findIndex((line) =>
     line.match(new RegExp(/import React/, 'g')),
   );
 
   if (reactImportIndex !== -1) {
-    const line = snippetBody[reactImportIndex];
-    snippetBody[reactImportIndex] = line
+    const line = bodyCopy[reactImportIndex];
+    const newLine = line
       .replace(new RegExp(/^import React .*$/, 'g'), '')
       .replace(new RegExp(/^import React, /, 'g'), 'import ');
+
+    bodyCopy[reactImportIndex] = newLine;
+    if (!newLine.length) {
+      bodyCopy = bodyCopy.filter(Boolean);
+    }
   }
 
-  return snippetBody.join('\n');
+  return bodyCopy.join('\n');
 };
 
 export default replaceOrRemoveReactImport;