feat: properly generate snippets from search

Author: Damian Sznajder

README.md

@@ -137,8 +137,8 @@ React 17 is currently supported by `_` prefix.
 |      `ssf→` | `this.setState((state, props) => return { })`                               |
 |    `props→` | `this.props.propName`                                                       |
 |    `state→` | `this.state.stateName`                                                      |
-| `rcontext→` | `const $1 = React.createContext()`                            |
-|     `cref→` | `this.$1Ref = React.createRef()`                                  |
+| `rcontext→` | `const $1 = React.createContext()`                                          |
+|     `cref→` | `this.$1Ref = React.createRef()`                                            |
 |     `fref→` | `const ref = React.createRef()`                                             |
 |      `bnd→` | `this.methodName = this.methodName.bind(this)`                              |
 
@@ -679,117 +679,111 @@ it("should $1", () => {
 ### `stest`
 
 ```javascript
-import React from 'react'
-import renderer from 'react-test-renderer'
+import React from "react";
+import renderer from "react-test-renderer";
 
-import { $1 } from '../$1'
+import { $1 } from "../$1";
 
-describe('<$1 />', () => {
-  const defaultProps = {}
-  const wrapper = renderer.create(<$1 {...defaultProps} />)
+describe("<$1 />", () => {
+  const defaultProps = {};
+  const wrapper = renderer.create(<$1 {...defaultProps} />);
 
-  test('render', () => {
-    expect(wrapper).toMatchSnapshot()
-  })
-})
+  test("render", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});
 ```
 
 ### `srtest`
 
 ```javascript
-import React from 'react'
-import renderer from 'react-test-renderer'
-import { Provider } from 'react-redux'
+import React from "react";
+import renderer from "react-test-renderer";
+import { Provider } from "react-redux";
 
-import store from 'src/store'
-import { $1 } from '../$1'
+import store from "src/store";
+import { $1 } from "../$1";
 
-describe('<$1 />', () => {
-  const defaultProps = {}
+describe("<$1 />", () => {
+  const defaultProps = {};
   const wrapper = renderer.create(
     <Provider store={store}>
-      <${1TM_FILENAME_BASE}} {...defaultProps} />)
+      <$1 {...defaultProps} />)
     </Provider>,
-  )
+  );
 
-  test('render', () => {
-    expect(wrapper).toMatchSnapshot()
-  })
-})
+  test("render", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});
 ```
 
 ### `sntest`
 
 ```javascript
-import 'react-native'
-import React from 'react'
-import renderer from 'react-test-renderer'
-
-import $1 from '../$1'
+import "react-native";
+import React from "react";
+import renderer from "react-test-renderer";
 
-describe('<$1 />', () => {
-  const defaultProps = {
+import $1 from "../$1";
 
-  }
+describe("<$1 />", () => {
+  const defaultProps = {};
 
-  const wrapper = renderer.create(<$1 {...defaultProps} />)
+  const wrapper = renderer.create(<$1 {...defaultProps} />);
 
-  test('render', () => {
-    expect(wrapper).toMatchSnapshot()
-  })
-})
+  test("render", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});
 ```
 
 ### `snrtest`
 
 ```javascript
-import 'react-native'
-import React from 'react'
-import renderer from 'react-test-renderer'
-import { Provider } from 'react-redux'
+import "react-native";
+import React from "react";
+import renderer from "react-test-renderer";
+import { Provider } from "react-redux";
 
-import store from 'src/store/configureStore'
-import $1 from '../$1'
+import store from "src/store/configureStore";
+import $1 from "../$1";
 
-describe('<$1 />', () => {
-  const defaultProps = {}
+describe("<$1 />", () => {
+  const defaultProps = {};
   const wrapper = renderer.create(
     <Provider store={store}>
       <$1 {...defaultProps} />
     </Provider>,
-  )
+  );
 
-  test('render', () => {
-    expect(wrapper).toMatchSnapshot()
-  })
-})
+  test("render", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});
 ```
 
 ### `hocredux`
 
 ```javascript
-import React from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-
-export const mapStateToProps = state => ({
-
-})
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 
-export const mapDispatchToProps = {
+export const mapStateToProps = (state) => ({});
 
-}
+export const mapDispatchToProps = {};
 
 export const $1 = (WrappedComponent) => {
-  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />
+  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />;
 
-  hocComponent.propTypes = {
-  }
+  hocComponent.propTypes = {};
 
-  return hocComponent
-}
+  return hocComponent;
+};
 
-export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)($1(WrapperComponent))
+export default (WrapperComponent) =>
+  connect(mapStateToProps, mapDispatchToProps)($1(WrapperComponent));
 ```
 
 ### `hoc`

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": "3.2.0",
+  "version": "4.0.0",
   "publisher": "dsznajder",
   "icon": "images/logo.png",
   "browser": "./lib/index.js",

src/generateSnippets.ts

@@ -9,7 +9,7 @@ import reactNativeSnippets, {
 import typescriptSnippets, {
   TypescriptSnippet,
 } from "./sourceSnippets/typescript";
-import { ExtensionSettings } from "./helpers";
+import { ExtensionSettings, replaceSnippetPlaceholders } from "./helpers";
 import reduxSnippets, { ReduxSnippet } from "./sourceSnippets/redux";
 import componentsSnippets, {
   ComponentsSnippet,
@@ -19,7 +19,6 @@ import propTypesSnippets, {
   PropTypesSnippet,
 } from "./sourceSnippets/propTypes";
 import testsSnippets, { TestsSnippet } from "./sourceSnippets/tests";
-import { SnippetPlaceholderMapping, SnippetPlaceholders } from "./types";
 
 type SnippetKeys =
   | HooksSnippet["key"]
@@ -71,31 +70,10 @@ const getSnippets = () => {
     return acc;
   }, {} as Snippets);
 
-  const jsonSnippets = String(JSON.stringify(snippets, null, 2))
-    .replace(
-      new RegExp(SnippetPlaceholders.FileName, "g"),
-      SnippetPlaceholderMapping[SnippetPlaceholders.FileName],
-    )
-    .replace(
-      new RegExp(SnippetPlaceholders.FirstTab, "g"),
-      SnippetPlaceholderMapping[SnippetPlaceholders.FirstTab],
-    )
-    .replace(
-      new RegExp(SnippetPlaceholders.SecondTab, "g"),
-      SnippetPlaceholderMapping[SnippetPlaceholders.SecondTab],
-    )
-    .replace(
-      new RegExp(SnippetPlaceholders.ThirdTab, "g"),
-      SnippetPlaceholderMapping[SnippetPlaceholders.ThirdTab],
-    )
-    .replace(
-      new RegExp(SnippetPlaceholders.LastTab, "g"),
-      SnippetPlaceholderMapping[SnippetPlaceholders.LastTab],
-    )
-    .replace(
-      new RegExp(SnippetPlaceholders.TypeInterface, "g"),
-      config.typescriptComponentPropsStatePrefix || "type",
-    );
+  const jsonSnippets = replaceSnippetPlaceholders(
+    JSON.stringify(snippets, null, 2),
+    config,
+  );
 
   snippetsCache = jsonSnippets;
   return jsonSnippets;
@@ -104,7 +82,6 @@ const getSnippets = () => {
 const generateSnippets = () => {
   console.time("generate");
   const jsonSnippets = getSnippets();
-  console.log(jsonSnippets);
   console.timeEnd("generate");
 
   writeFileSync(__dirname + "/snippets/generated.json", jsonSnippets);

src/helpers.ts

@@ -1,5 +1,6 @@
 import prettier, { Options } from "prettier";
 import { workspace } from "vscode";
+import { SnippetPlaceholders } from "./types";
 
 export type ExtensionSettings = {
   prettierEnabled: boolean;
@@ -11,6 +12,35 @@ export type ExtensionSettings = {
   typescriptComponentPropsStatePrefix: "type" | "interface";
 };
 
+export const replaceSnippetPlaceholders = (
+  snippetString: string,
+  extensionConfig: ExtensionSettings,
+) =>
+  String(snippetString)
+    .replace(
+      new RegExp(SnippetPlaceholders.FileName, "g"),
+      "${1:${TM_FILENAME_BASE}}",
+    )
+    .replace(new RegExp(SnippetPlaceholders.FirstTab, "g"), "${1:first}")
+    .replace(new RegExp(SnippetPlaceholders.SecondTab, "g"), "${2:second}")
+    .replace(new RegExp(SnippetPlaceholders.ThirdTab, "g"), "${3:third}")
+    .replace(new RegExp(SnippetPlaceholders.LastTab, "g"), "$0")
+    .replace(
+      new RegExp(SnippetPlaceholders.TypeInterface, "g"),
+      extensionConfig.typescriptComponentPropsStatePrefix || "type",
+    );
+
+export const revertSnippetPlaceholders = (snippetString: string) =>
+  String(snippetString)
+    .replace(
+      new RegExp(/\${1:${TM_FILENAME_BASE}}/, "g"),
+      SnippetPlaceholders.FileName,
+    )
+    .replace(new RegExp(/\${1:first}/, "g"), SnippetPlaceholders.FirstTab)
+    .replace(new RegExp(/\${2:second}/, "g"), SnippetPlaceholders.SecondTab)
+    .replace(new RegExp(/\${3:third}/, "g"), SnippetPlaceholders.ThirdTab)
+    .replace(new RegExp(/\$0/, "g"), SnippetPlaceholders.LastTab);
+
 export const getPrettierConfig = async (): Promise<Options> => {
   const settings = workspace.getConfiguration(
     "esReactSnippets.settings",
@@ -23,19 +53,34 @@ export const getPrettierConfig = async (): Promise<Options> => {
   return {
     semi: settings.semiColons,
     singleQuote: settings.quotes,
-    tabWidth: 2,
+    tabWidth: settings.tabWidth,
     ...(settings.prettierEnabled && prettierConfig),
   };
 };
 
-export const parseSnippet = (snippet: {
+export const parseSnippet = async (snippet: {
   id: number;
   description: any;
   label: string;
   value: string;
   body: string | string[];
 }) => {
-  return typeof snippet.body === "string"
-    ? snippet.body
-    : snippet.body.join("\n");
+  const workspaceConfig = workspace.getConfiguration(
+    "esReactSnippets",
+  ) as unknown as ExtensionSettings;
+  const snippetBody =
+    typeof snippet.body === "string" ? snippet.body : snippet.body.join("\n");
+
+  const prettierConfig = await getPrettierConfig();
+  const parsedBody = prettier.format(
+    revertSnippetPlaceholders(snippetBody),
+    prettierConfig,
+  );
+
+  console.log(
+    parsedBody,
+    replaceSnippetPlaceholders(parsedBody, workspaceConfig),
+  );
+
+  return replaceSnippetPlaceholders(parsedBody, workspaceConfig);
 };

src/snippetSearch.ts

@@ -25,7 +25,7 @@ const snippetSearch = async () => {
     placeHolder: "Search snippet by prefix or description",
   });
 
-  const body = rawSnippet ? parseSnippet(rawSnippet) : "";
+  const body = rawSnippet ? await parseSnippet(rawSnippet) : "";
 
   if (activeTextEditor) {
     activeTextEditor.insertSnippet(new SnippetString(body));

src/types.ts

@@ -13,14 +13,3 @@ export enum SnippetPlaceholders {
   LastTab = "LAST_TAB",
   TypeInterface = "TYPE_INTERFACE",
 }
-
-export const SnippetPlaceholderMapping: {
-  [key in SnippetPlaceholders]: string;
-} = {
-  [SnippetPlaceholders.FileName]: "${1:TM_FILENAME_BASE}",
-  [SnippetPlaceholders.FirstTab]: "$1",
-  [SnippetPlaceholders.SecondTab]: "$2",
-  [SnippetPlaceholders.ThirdTab]: "$3",
-  [SnippetPlaceholders.LastTab]: "$0",
-  [SnippetPlaceholders.TypeInterface]: "TYPE_INTERFACE",
-};