fix: make snippets configurable

Author: jedwards1211

.vscodeignore

@@ -1,7 +1,8 @@
 *
 */**
 **/.DS_Store
-!out/*.json
+!out/*.js
+out/test
 !node_modules/vscode-nls/**/*
 !node_modules/vscode-debugprotocol/**/*
 !package.json

README.md

@@ -11,9 +11,6 @@ snippets for Material-UI
 # Snippets
 
 <!-- snippets -->
-
-## javascriptreact
-
 ### `mui-button-group-vertical`: Material-UI vertical &lt;ButtonGroup&gt;
 
 ```
@@ -292,5 +289,4 @@ snippets for Material-UI
   $0
 />
 ```
-
 <!-- snippetsend -->

package.json

@@ -7,6 +7,33 @@
   "engines": {
     "vscode": "^1.40.0"
   },
+  "main": "./out/extension.js",
+  "activationEvents": [
+    "onLanguage:javascriptreact",
+    "onLanguage:typescriptreact"
+  ],
+  "contributes": {
+    "configuration": [
+      {
+        "title": "Material-UI Snippets",
+        "properties": {
+          "material-ui-snippets.formControlMode": {
+            "type": "string",
+            "default": "controlled",
+            "markdownDescription": "Whether to use controlled or uncontrolled inputs and other form controls in snippets",
+            "enum": [
+              "controlled",
+              "uncontrolled"
+            ],
+            "enumDescriptions": [
+              "Includes value and onChange properties in form controls",
+              "Includes defaultValue property in form controls"
+            ]
+          }
+        }
+      }
+    ]
+  },
   "categories": [
     "Snippets"
   ],
@@ -18,7 +45,8 @@
     "prettier:check": "prettier --list-different .babelrc.js *.json *.md *.ts 'src/**/*.{js,ts}'",
     "tsc": "tsc --noEmit",
     "clean": "rimraf out",
-    "build": "babel-node --extensions \".js,.ts\" src/buildSnippets.ts && BABEL_ENV=coverage babel src --out-dir out --extensions \".js,.ts\"",
+    "build": "babel-node --extensions \".js,.ts\" scripts/buildReadme.ts && babel src --out-dir out --extensions \".js,.ts\"",
+    "build:watch": "nodemon -e js,ts,json --watch src --watch .babelrc.js --exec \"(babel-node --extensions '.js,.ts' scripts/buildReadme.ts && babel src --out-dir out --extensions '.js,.ts'; exit 0)\"",
     "pretest": "npm run build",
     "test": "rimraf .nyc_output; node ./out/test/runTest.js; nyc report; nyc report --reporter=lcov",
     "codecov": "nyc report --reporter=text-lcov > coverage.lcov; codecov",
@@ -160,13 +188,5 @@
     "major": {
       "automerge": false
     }
-  },
-  "contributes": {
-    "snippets": [
-      {
-        "language": "javascriptreact",
-        "path": "./out/javascriptreact.json"
-      }
-    ]
   }
 }

scripts/buildReadme.ts

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import * as fs from 'fs-extra'
+import * as path from 'path'
+import markdownEscape from 'markdown-escape'
+import snippets from '../src/snippets'
+
+const root = path.resolve(__dirname, '..')
+const out = path.resolve(root, 'out')
+fs.mkdirsSync(out)
+
+const markdown: Array<string> = []
+
+for (const snippet of Object.values(snippets)) {
+  const { prefix, description } = snippet
+  const body =
+    typeof snippet.body === 'function'
+      ? snippet.body({
+          language: 'typescriptreact',
+          formControlMode: 'controlled',
+        })
+      : snippet.body
+  markdown.push(`### \`${prefix}\`: ${markdownEscape(description)}`)
+  markdown.push('```\n' + body.replace(/^\n|\n$/gm, '') + '\n```')
+}
+
+const oldReadme = fs.readFileSync(path.join(root, 'README.md'), 'utf8')
+const startComment = /<!--\s*snippets\s*-->/.exec(oldReadme)
+const endComment = /<!--\s*snippetsend\s*-->/.exec(oldReadme)
+if (startComment && endComment && endComment.index > startComment.index) {
+  const newReadme = `${oldReadme.substring(
+    0,
+    startComment.index + startComment[0].length
+  )}
+${markdown.join('\n\n')}
+${oldReadme.substring(endComment.index)}`
+  if (newReadme !== oldReadme) {
+    fs.writeFileSync(path.join(root, 'README.md'), newReadme, 'utf8')
+  }
+  console.log('README.md') // eslint-disable-line no-console
+}

src/buildSnippets.ts

@@ -0,0 +1,43 @@
+import * as vscode from 'vscode'
+import snippets from './snippets'
+
+export function activate(context: vscode.ExtensionContext): void {
+  for (const language of ['javascriptreact', 'typescriptreact']) {
+    context.subscriptions.push(
+      vscode.languages.registerCompletionItemProvider(language, {
+        provideCompletionItems(
+          /* eslint-disable @typescript-eslint/no-unused-vars */
+          document: vscode.TextDocument,
+          position: vscode.Position,
+          token: vscode.CancellationToken,
+          context: vscode.CompletionContext
+          /* eslint-enable @typescript-eslint/no-unused-vars */
+        ): vscode.ProviderResult<
+          vscode.CompletionItem[] | vscode.CompletionList
+        > {
+          const result = []
+          for (const snippet of Object.values(snippets)) {
+            const { prefix, description } = snippet
+            const body = (typeof snippet.body === 'function'
+              ? snippet.body({
+                  language: 'typescriptreact',
+                  formControlMode:
+                    vscode.workspace
+                      .getConfiguration('material-ui-snippets')
+                      .get('formControlMode') || 'controlled',
+                })
+              : snippet.body
+            ).replace(/^\n|\n$/gm, '')
+            const snippetCompletion = new vscode.CompletionItem(prefix)
+            snippetCompletion.insertText = new vscode.SnippetString(body)
+            snippetCompletion.documentation = new vscode.MarkdownString(
+              description
+            )
+            result.push(snippetCompletion)
+          }
+          return result
+        },
+      })
+    )
+  }
+}

src/extension.ts

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import requireGlob from 'require-glob'
+import path from 'path'
+
+export type SnippetOptions = {
+  language: 'javascriptreact' | 'typescriptreact'
+  formControlMode: 'controlled' | 'uncontrolled'
+}
+
+export type SnippetBodyFunction = (options: SnippetOptions) => string
+
+export type SnippetBody = string | SnippetBodyFunction
+
+export type Snippet = {
+  prefix: string
+  description: string
+  body: SnippetBody
+}
+
+const snippets: Record<string, Snippet> = requireGlob.sync('./*.{js,ts}', {
+  reducer: (
+    options: Record<string, any>,
+    result: Record<string, any>,
+    file: { path: string; exports: any }
+  ) => {
+    if (file.path === __filename) return result
+    const filename = path.basename(file.path)
+    const filenameNoExt = filename.replace(/\.[^.]+$/, '')
+    const { prefix = filenameNoExt, description, body } = file.exports
+    if (!prefix || typeof prefix !== 'string') {
+      throw new Error(
+        `src/snippets/${filename}: prefix must be a string if exported`
+      )
+    }
+    if (!description || typeof description !== 'string') {
+      throw new Error(
+        `src/snippets/${filename}: must export a string description`
+      )
+    }
+    if (!body || (typeof body !== 'string' && typeof body !== 'function')) {
+      throw new Error(
+        `src/snippets/${filename}: must export a function or string body`
+      )
+    }
+    result[filenameNoExt] = { prefix, description, body }
+    return result
+  },
+})
+
+export default snippets