chore: add importReactOnTop setting handle

Author: Damian Sznajder

package.json

@@ -2,7 +2,7 @@
   "name": "es7-react-js-snippets",
   "displayName": "ES7+ React/Redux/React-Native snippets",
   "description": "Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "publisher": "dsznajder",
   "icon": "images/logo.png",
   "browser": "./lib/index.js",

src/generateSnippets.ts

@@ -2,7 +2,7 @@ import { writeFile } from 'fs';
 
 import {
   extensionConfig,
-  formatSnippet,
+  parseSnippetToBody,
   replaceSnippetPlaceholders,
 } from './helpers';
 import componentsSnippets, {
@@ -52,19 +52,6 @@ export type Snippets = {
   [key in SnippetKeys]: Snippet;
 };
 
-// This is array of prefixes which are currently skipped because of syntax format issues
-const skippedSnippets = [
-  'pge',
-  'pse',
-  'gdsfp',
-  'gsbu',
-  'scu',
-  'cwun',
-  'cdm',
-  'cdup',
-  'rconst',
-];
-
 const getSnippets = () => {
   const { typescript, languageScopes } = extensionConfig();
 
@@ -80,16 +67,10 @@ const getSnippets = () => {
     ...testsSnippets,
     ...othersSnippets,
   ].reduce((acc, snippet) => {
-    const snippetBody =
-      typeof snippet.body === 'string' ? snippet.body : snippet.body.join('\n');
-    const formattedSnippet = skippedSnippets.includes(snippet.prefix)
-      ? snippetBody
-      : formatSnippet(snippetBody).split('\n');
-
-    const body =
-      snippet.body.length === 1 ? formattedSnippet[0] : formattedSnippet;
-
-    acc[snippet.key] = Object.assign(snippet, { body, scope: languageScopes });
+    acc[snippet.key] = Object.assign(snippet, {
+      body: parseSnippetToBody(snippet),
+      scope: languageScopes,
+    });
     return acc;
   }, {} as Snippets);
 

src/helpers.ts

@@ -1,6 +1,7 @@
 import prettier, { Options } from 'prettier';
 import { workspace } from 'vscode';
 
+import { Snippet } from './generateSnippets';
 import { SnippetPlaceholders } from './types';
 
 export type ExtensionSettings = {
@@ -37,6 +38,11 @@ const getPrettierConfig = (): Options => {
   };
 };
 
+const formatSnippet = (string: string) => {
+  const prettierConfig = getPrettierConfig();
+  return prettier.format(string, prettierConfig);
+};
+
 export const replaceSnippetPlaceholders = (snippetString: string) =>
   String(snippetString)
     .replace(
@@ -59,15 +65,75 @@ export const revertSnippetPlaceholders = (snippetString: string) =>
     .replace(new RegExp(/\${3:third}/, 'g'), SnippetPlaceholders.ThirdTab)
     .replace(new RegExp(/\$0/, 'g'), SnippetPlaceholders.LastTab);
 
-export const formatSnippet = (string: string) => {
-  const prettierConfig = getPrettierConfig();
-  return prettier.format(string, prettierConfig);
-};
-
 export const parseSnippet = (body: string | string[]) => {
   const snippetBody = typeof body === 'string' ? body : body.join('\n');
 
   return replaceSnippetPlaceholders(
     formatSnippet(revertSnippetPlaceholders(snippetBody)),
   );
 };
+
+// This is array of prefixes which are currently skipped because of syntax format issues
+const skippedSnippets = [
+  'pge',
+  'pse',
+  'gdsfp',
+  'gsbu',
+  'scu',
+  'cwun',
+  'cdm',
+  'cdup',
+  'rconst',
+];
+
+const withReactImport = [
+  'rfce',
+  'rfc',
+  'rfcp',
+  'rafce',
+  'rafc',
+  'rafcp',
+  'rnfe',
+  'rnfes',
+  'rnf',
+  'rnfs',
+  'stest',
+  'sntest',
+  'srtest',
+  'snrtest',
+  'hocredux',
+  'hoc',
+];
+
+const replaceOrRemoveReactImport = (snippetBody: string[]) => {
+  const reactImportIndex = snippetBody.findIndex((line) =>
+    line.match(new RegExp(/import React/, 'g')),
+  );
+
+  if (reactImportIndex !== -1) {
+    const line = snippetBody[reactImportIndex];
+    snippetBody[reactImportIndex] = line
+      .replace(new RegExp(/^import React .*$/, 'g'), '')
+      .replace(new RegExp(/^import React, /, 'g'), 'import ');
+  }
+
+  return snippetBody.join('\n');
+};
+
+export 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;
+
+  const formattedSnippet = skippedSnippets.includes(snippet.prefix)
+    ? snippetBody
+    : formatSnippet(snippetBody).split('\n');
+
+  return snippet.body.length === 1 ? formattedSnippet[0] : formattedSnippet;
+};

src/index.ts

@@ -2,6 +2,7 @@ import {
   commands,
   ConfigurationChangeEvent,
   ExtensionContext,
+  window,
   workspace,
 } from 'vscode';
 
@@ -13,17 +14,19 @@ const showRestartMessage = async ({
 }: ConfigurationChangeEvent) => {
   if (affectsConfiguration('reactSnippets')) {
     await generateSnippets();
-    // window
-    //   .showWarningMessage(
-    //     'React Snippets: Please restart VS Code to apply snippet formatting changes',
-    //     'Restart VS Code',
-    //     'Ignore',
-    //   )
-    //   .then((action?: string) => {
-    //     if (action === 'Restart VS Code') {
-    //       commands.executeCommand('workbench.action.reloadWindow');
-    //     }
-    //   });
+    setTimeout(() => {
+      window
+        .showWarningMessage(
+          'React Snippets: Please restart VS Code to apply snippet formatting changes',
+          'Restart VS Code',
+          'Ignore',
+        )
+        .then((action?: string) => {
+          if (action === 'Restart VS Code') {
+            commands.executeCommand('workbench.action.reloadWindow');
+          }
+        });
+    }, 1000);
   }
 };