feat: add type/interface recognition, add capitalize to useState

Author: Damian Sznajder

README.md

@@ -23,6 +23,17 @@ Paste the following command and press `Enter`:
 ext install dsznajder.es7-react-js-snippets
 ```
 
+## Options
+
+From version 4 extension provides options to customize the behavior of the snippets:
+
+|           Option | Description                                                                  |
+| ---------------: | ---------------------------------------------------------------------------- |
+|   languageScopes | list of supported languages / files recognition                              |
+|  prettierEnabled | determines if snippets should be parsed with project prettier config         |
+| importReactOnTop | If disabled, snippets won't contain `import React` on top. React 17+ support |
+|       typescript | adds additional typescript snippets                                          |
+
 # Sponsors
 
 <p><a title="Try CodeStream" href="https://sponsorlink.codestream.com/?utm_source=vscmarket&amp;utm_campaign=es7_react&amp;utm_medium=banner"><img src="https://alt-images.codestream.com/codestream_logo_es7_react.png"></a></br>

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.4",
+  "version": "4.1.0",
   "publisher": "dsznajder",
   "icon": "images/logo.png",
   "browser": "./lib/index.js",
@@ -74,7 +74,7 @@
         "reactSnippets.settings.typescript": {
           "type": "boolean",
           "markdownDescription": "Controls if React components have typescript Props typing.",
-          "default": false
+          "default": true
         },
         "reactSnippets.settings.semiColons": {
           "type": "boolean",
@@ -96,7 +96,7 @@
           "markdownDescription": "defines the language scopes for which the snippets will be available.\nUse comma separated values.\nFor example: `typescript,typescriptreact,javascript,javascriptreact`",
           "default": "typescript,typescriptreact,javascript,javascriptreact"
         },
-        "reactSnippets.settings.typescriptComponentPropsStatePrefix": {
+        "reactSnippets.settings.typescriptPropsStatePrefix": {
           "type": "string",
           "markdownDescription": "Controls which prefix for typescript snippets should use for props/state.",
           "default": "type",

src/helpers.ts

@@ -2,7 +2,7 @@ import prettier, { Options } from 'prettier';
 import { workspace } from 'vscode';
 
 import { Snippet } from './generateSnippets';
-import { SnippetPlaceholders } from './types';
+import { Mappings, Placeholders } from './types';
 
 export type ExtensionSettings = {
   languageScopes: string;
@@ -12,7 +12,7 @@ export type ExtensionSettings = {
   singleQuote: boolean;
   typescript: boolean;
   tabWidth: number;
-  typescriptComponentPropsStatePrefix: 'type' | 'interface';
+  typescriptPropsStatePrefix: 'type' | 'interface';
 };
 
 let prettierConfig: prettier.Options | null;
@@ -43,27 +43,46 @@ const formatSnippet = (string: string) => {
   return prettier.format(string, prettierConfig);
 };
 
-export const replaceSnippetPlaceholders = (snippetString: string) =>
-  String(snippetString)
+export const replaceSnippetPlaceholders = (snippetString: string) => {
+  const { typescriptPropsStatePrefix } = extensionConfig();
+  const propsPlaceholder =
+    typescriptPropsStatePrefix === 'type'
+      ? Mappings.TypeProps
+      : Mappings.InterfaceProps;
+  const statePlaceholder =
+    typescriptPropsStatePrefix === 'type'
+      ? Mappings.TypeState
+      : Mappings.InterfaceState;
+
+  return String(snippetString)
+    .replace(new RegExp(Placeholders.FileName, 'g'), '${1:${TM_FILENAME_BASE}}')
+    .replace(new RegExp(Placeholders.FirstTab, 'g'), '${1:first}')
+    .replace(new RegExp(Placeholders.SecondTab, 'g'), '${2:second}')
+    .replace(new RegExp(Placeholders.ThirdTab, 'g'), '${3:third}')
+    .replace(new RegExp(Placeholders.LastTab, 'g'), '$0')
     .replace(
-      new RegExp(SnippetPlaceholders.FileName, 'g'),
-      '${1:${TM_FILENAME_BASE}}',
+      new RegExp(Placeholders.Capitalize, 'g'),
+      '${1/(.*)/${1:/capitalize}/}',
     )
-    .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(Placeholders.TypeProps, 'g'), propsPlaceholder)
+    .replace(new RegExp(Placeholders.TypeState, 'g'), statePlaceholder);
+};
 
-export const revertSnippetPlaceholders = (snippetString: string) =>
-  String(snippetString)
+export const revertSnippetPlaceholders = (snippetString: string) => {
+  return String(snippetString)
     .replace(
       new RegExp(/\${1:\${TM_FILENAME_BASE}}/, 'g'),
-      SnippetPlaceholders.FileName,
+      Placeholders.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);
+    .replace(new RegExp(/\${1:first}/, 'g'), Placeholders.FirstTab)
+    .replace(new RegExp(/\${2:second}/, 'g'), Placeholders.SecondTab)
+    .replace(new RegExp(/\${3:third}/, 'g'), Placeholders.ThirdTab)
+    .replace(new RegExp(/\$0/, 'g'), Placeholders.LastTab)
+    .replace(
+      new RegExp(/\${1\/(.*)\/${1:\/capitalize}\/}/, 'g'),
+      Placeholders.Capitalize,
+    );
+};
 
 export const parseSnippet = (body: string | string[]) => {
   const snippetBody = typeof body === 'string' ? body : body.join('\n');

src/snippets/generated.json

@@ -263,8 +263,6 @@
     "key": "reactArrowFunctionComponent",
     "prefix": "rafc",
     "body": [
-      "import React from 'react';",
-      "",
       "export const ${1:${TM_FILENAME_BASE}} = () => {",
       "  return <div>$0</div>;",
       "};",
@@ -277,7 +275,6 @@
     "key": "reactArrowFunctionComponentWithPropTypes",
     "prefix": "rafcp",
     "body": [
-      "import React from 'react';",
       "import PropTypes from 'prop-types';",
       "",
       "const ${1:${TM_FILENAME_BASE}} = (props) => {",
@@ -296,8 +293,6 @@
     "key": "reactArrowFunctionExportComponent",
     "prefix": "rafce",
     "body": [
-      "import React from 'react';",
-      "",
       "const ${1:${TM_FILENAME_BASE}} = () => {",
       "  return <div>$0</div>;",
       "};",
@@ -525,8 +520,6 @@
     "key": "reactFunctionalComponent",
     "prefix": "rfc",
     "body": [
-      "import React from 'react';",
-      "",
       "export default function ${1:${TM_FILENAME_BASE}}() {",
       "  return <div>$0</div>;",
       "}",
@@ -586,7 +579,6 @@
     "key": "reactFunctionalComponentWithPropTypes",
     "prefix": "rfcp",
     "body": [
-      "import React from 'react';",
       "import PropTypes from 'prop-types';",
       "",
       "function ${1:${TM_FILENAME_BASE}}(props) {",
@@ -605,8 +597,6 @@
     "key": "reactFunctionalExportComponent",
     "prefix": "rfce",
     "body": [
-      "import React from 'react';",
-      "",
       "function ${1:${TM_FILENAME_BASE}}() {",
       "  return <div>$0</div>;",
       "}",
@@ -799,7 +789,7 @@
   "useState": {
     "key": "useState",
     "prefix": "useStateSnippet",
-    "body": "const [${1:first}, set${1:first}] = useState(${2:second});",
+    "body": "const [${1:first}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:second});",
     "scope": "typescript,typescriptreact,javascript,javascriptreact"
   },
   "importAs": {
@@ -1230,7 +1220,6 @@
     "prefix": "rnf",
     "body": [
       "import { View, Text } from 'react-native';",
-      "import React from 'react';",
       "",
       "export default function ${1:${TM_FILENAME_BASE}}() {",
       "  return (",
@@ -1248,7 +1237,6 @@
     "prefix": "rnfs",
     "body": [
       "import { StyleSheet, Text, View } from 'react-native';",
-      "import React from 'react';",
       "",
       "export default function ${1:${TM_FILENAME_BASE}}() {",
       "  return (",
@@ -1268,7 +1256,6 @@
     "prefix": "rnfe",
     "body": [
       "import { View, Text } from 'react-native';",
-      "import React from 'react';",
       "",
       "const ${1:${TM_FILENAME_BASE}} = () => {",
       "  return (",
@@ -1288,7 +1275,6 @@
     "prefix": "rnfes",
     "body": [
       "import { StyleSheet, Text, View } from 'react-native';",
-      "import React from 'react';",
       "",
       "const ${1:${TM_FILENAME_BASE}} = () => {",
       "  return (",
@@ -1470,7 +1456,6 @@
     "key": "setupReactComponentTestWithRedux",
     "prefix": "srtest",
     "body": [
-      "import React from 'react';",
       "import renderer from 'react-test-renderer';",
       "import { Provider } from 'react-redux';",
       "",
@@ -1499,7 +1484,7 @@
     "prefix": "sntest",
     "body": [
       "import 'react-native';",
-      "import React from 'react';",
+      "",
       "import renderer from 'react-test-renderer';",
       "",
       "import ${1:${TM_FILENAME_BASE}} from '../${1:${TM_FILENAME_BASE}}';",
@@ -1521,7 +1506,7 @@
     "prefix": "snrtest",
     "body": [
       "import 'react-native';",
-      "import React from 'react';",
+      "",
       "import renderer from 'react-test-renderer';",
       "import { Provider } from 'react-redux';",
       "",
@@ -1548,7 +1533,6 @@
     "key": "setupReactTest",
     "prefix": "stest",
     "body": [
-      "import React from 'react';",
       "import renderer from 'react-test-renderer';",
       "",
       "import { ${1:${TM_FILENAME_BASE}} } from '../${1:${TM_FILENAME_BASE}}';",
@@ -1856,7 +1840,6 @@
     "key": "hocComponentWithRedux",
     "prefix": "hocredux",
     "body": [
-      "import React from 'react';",
       "import { connect } from 'react-redux';",
       "import PropTypes from 'prop-types';",
       "",
@@ -1882,7 +1865,6 @@
     "key": "hocComponent",
     "prefix": "hoc",
     "body": [
-      "import React from 'react';",
       "import PropTypes from 'prop-types';",
       "",
       "export default (WrappedComponent) => {",