fix: typescript dynamic generate

Author: Damian Sznajder

.vscodeignore

@@ -1,6 +1,8 @@
-.vscode/**
-src/**
-.gitignore
 **/tsconfig.json
 *.ts
-webpack.config.js
+.github/**
+.gitignore
+.vscode/**
+docs/**
+node_modules/**
+src/**

LICENCE LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019 Damian Sznajder
+Copyright (c) 2022 Damian Sznajder
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -39,6 +39,8 @@
     }
   },
   "activationEvents": [
+    "onLanguage:typescript",
+    "onLanguage:javascript",
     "onCommand:reactSnippets.search"
   ],
   "contributes": {
@@ -89,6 +91,11 @@
           "markdownDescription": "Controls how many spaces snippets will have.\nOnly applies when `#reactSnippets.settings.prettierEnabled#` is disabled",
           "default": 2
         },
+        "reactSnippets.settings.languageScopes": {
+          "type": "string",
+          "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": {
           "type": "string",
           "markdownDescription": "Controls which prefix for typescript snippets should use for props/state.",
@@ -127,16 +134,15 @@
     "typescript": "tsc --noEmit"
   },
   "dependencies": {
-    "prettier": "2.5.1",
-    "vscode": "1.1.37"
+    "prettier": "2.5.1"
   },
   "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.63.1",
+    "@types/vscode": "1.60.0",
     "@typescript-eslint/eslint-plugin": "5.8.1",
     "@typescript-eslint/parser": "5.8.1",
     "eslint": "8.5.0",

src/generateSnippets.ts

@@ -1,7 +1,10 @@
 import { writeFile } from 'fs';
-import { workspace } from 'vscode';
 
-import { ExtensionSettings, replaceSnippetPlaceholders } from './helpers';
+import {
+  extensionConfig,
+  formatSnippet,
+  replaceSnippetPlaceholders,
+} from './helpers';
 import componentsSnippets, {
   ComponentsSnippet,
 } from './sourceSnippets/components';
@@ -47,11 +50,10 @@ export type Snippets = {
 };
 
 const getSnippets = () => {
-  const config = workspace.getConfiguration(
-    'reactSnippets',
-  ) as unknown as ExtensionSettings;
+  const { typescript, languageScopes } = extensionConfig();
 
   const snippets = [
+    ...(typescript ? typescriptSnippets : []),
     ...componentsSnippets,
     ...consoleSnippets,
     ...hooksSnippets,
@@ -60,13 +62,17 @@ const getSnippets = () => {
     ...reactNativeSnippets,
     ...reduxSnippets,
     ...testsSnippets,
-    ...(config.typescript ? typescriptSnippets : []),
   ].reduce((acc, snippet) => {
-    acc[snippet.key] = snippet;
+    const snippetBody =
+      typeof snippet.body === 'string' ? snippet.body : snippet.body.join('\n');
+    acc[snippet.key] = Object.assign(snippet, {
+      scope: languageScopes,
+      body: formatSnippet(snippetBody).split('\n'),
+    });
     return acc;
   }, {} as Snippets);
 
-  return replaceSnippetPlaceholders(JSON.stringify(snippets, null, 2), config);
+  return replaceSnippetPlaceholders(JSON.stringify(snippets, null, 2));
 };
 
 export const generateSnippets = () =>

src/helpers.ts

@@ -4,19 +4,40 @@ import { workspace } from 'vscode';
 import { SnippetPlaceholders } from './types';
 
 export type ExtensionSettings = {
+  languageScopes: string;
   prettierEnabled: boolean;
   semiColons: boolean;
   importReactOnTop: boolean;
-  quotes: boolean;
+  singleQuote: boolean;
   typescript: boolean;
   tabWidth: number;
   typescriptComponentPropsStatePrefix: 'type' | 'interface';
 };
 
-export const replaceSnippetPlaceholders = (
-  snippetString: string,
-  extensionConfig: ExtensionSettings,
-) =>
+let prettierConfig: prettier.Options | null;
+prettier
+  .resolveConfig('', { editorconfig: true })
+  .then((config) => (prettierConfig = config));
+
+export const extensionConfig = () =>
+  workspace.getConfiguration(
+    'reactSnippets.settings',
+  ) as unknown as ExtensionSettings;
+
+const getPrettierConfig = (): Options => {
+  const { semiColons, singleQuote, tabWidth, prettierEnabled } =
+    extensionConfig();
+
+  return {
+    parser: 'typescript',
+    semi: semiColons,
+    singleQuote,
+    tabWidth,
+    ...(prettierEnabled && prettierConfig),
+  };
+};
+
+export const replaceSnippetPlaceholders = (snippetString: string) =>
   String(snippetString)
     .replace(
       new RegExp(SnippetPlaceholders.FileName, 'g'),
@@ -25,11 +46,7 @@ export const replaceSnippetPlaceholders = (
     .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',
-    );
+    .replace(new RegExp(SnippetPlaceholders.LastTab, 'g'), '$0');
 
 export const revertSnippetPlaceholders = (snippetString: string) =>
   String(snippetString)
@@ -42,37 +59,15 @@ export const revertSnippetPlaceholders = (snippetString: string) =>
     .replace(new RegExp(/\${3:third}/, 'g'), SnippetPlaceholders.ThirdTab)
     .replace(new RegExp(/\$0/, 'g'), SnippetPlaceholders.LastTab);
 
-let prettierConfig: prettier.Options | null;
-
-prettier
-  .resolveConfig('', { editorconfig: true })
-  .then((config) => (prettierConfig = config));
-
-export const getPrettierConfig = (): Options => {
-  const settings = workspace.getConfiguration(
-    'reactSnippets.settings',
-  ) as unknown as ExtensionSettings;
-
-  return {
-    semi: settings.semiColons,
-    singleQuote: settings.quotes,
-    tabWidth: settings.tabWidth,
-    parser: 'typescript',
-    ...(settings.prettierEnabled && prettierConfig),
-  };
+export const formatSnippet = (string: string) => {
+  const prettierConfig = getPrettierConfig();
+  return prettier.format(string, prettierConfig);
 };
 
-export const parseSnippet = (body: string[]) => {
-  const workspaceConfig = workspace.getConfiguration(
-    'reactSnippets',
-  ) as unknown as ExtensionSettings;
+export const parseSnippet = (body: string | string[]) => {
   const snippetBody = typeof body === 'string' ? body : body.join('\n');
 
-  const prettierConfig = getPrettierConfig();
-  const parsedBody = prettier.format(
-    revertSnippetPlaceholders(snippetBody),
-    prettierConfig,
+  return replaceSnippetPlaceholders(
+    formatSnippet(revertSnippetPlaceholders(snippetBody)),
   );
-
-  return replaceSnippetPlaceholders(parsedBody, workspaceConfig);
 };

src/index.ts

@@ -2,7 +2,6 @@ import {
   commands,
   ConfigurationChangeEvent,
   ExtensionContext,
-  window,
   workspace,
 } from 'vscode';
 
@@ -12,23 +11,19 @@ import snippetSearch from './snippetSearch';
 const showRestartMessage = async ({
   affectsConfiguration,
 }: ConfigurationChangeEvent) => {
-  let timeoutId: NodeJS.Timeout | undefined;
   if (affectsConfiguration('reactSnippets')) {
     await generateSnippets();
-    timeoutId && clearTimeout(timeoutId);
-    timeoutId = 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');
-          }
-        });
-    }, 3000);
+    // 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');
+    //     }
+    //   });
   }
 };