[skip ci] feat(huge-feature!): add jsxCompletionsMap for incredible jsx attributes customization!

feat: add enable by default fix for jsx completions snippets

Author: zardoy

package.json

@@ -69,6 +69,7 @@
         "chokidar": "^3.5.3",
         "chokidar-cli": "^3.0.0",
         "delay": "^5.0.0",
+        "escape-string-regexp": "^5.0.0",
         "eslint": "^8.7.0",
         "eslint-config-zardoy": "^0.2.8",
         "glob": "^8.0.3",

pnpm-lock.yaml

@@ -175,4 +175,33 @@ export type Configuration = {
      * @default false
      */
     patchOutline: boolean
+    /**
+     * Improve JSX completions:
+     * - enable fixes
+     * - enable jsxCompletionsMap
+     * @default true
+     */
+    improveJsxCompletions: boolean
+    /**
+     * Replace JSX completions by map with `tagName#attribute` pattern as keys
+     * `tagName` can be ommited, but not `attribute` for now
+     * Example usages:
+     * - `#className`: `insertText: "={classNames$1}"`
+     * - `button#type`: `insertText: "='button'"`
+     * - `#on*`: `insertText: "={${1:($2) => $3}}"`
+     * - `Table#someProp`: `insertText: "="something"`
+     * Remove attribute:
+     * - `children`: `false`
+     * @default {}
+     */
+    jsxCompletionsMap: {
+        [rule: string]:
+            | {
+                  insertText: string
+                  // TODO make it accept 'above'?
+                  /** Make original suggestion keep below patched */
+                  duplicate?: boolean
+              }
+            | false
+    }
 }

src/configurationType.ts

@@ -5,6 +5,7 @@ import isInBannedPosition from './isInBannedPosition'
 import { GetConfig } from './types'
 import { findChildContainingPosition } from './utils'
 import { isGoodPositionBuiltinMethodCompletion } from './isGoodPositionMethodCompletion'
+import improveJsxCompletions from './jsxCompletions'
 
 export type PrevCompletionMap = Record<string, { originalName?: string; documentationOverride?: string | tslib.SymbolDisplayPart[] }>
 
@@ -26,7 +27,7 @@ export const getCompletionsAtPosition = (
     const program = languageService.getProgram()
     const sourceFile = program?.getSourceFile(fileName)
     if (!program || !sourceFile) return
-    if (!scriptSnapshot || isInBannedPosition(position, fileName, scriptSnapshot, sourceFile, languageService)) return
+    if (!scriptSnapshot || isInBannedPosition(position, scriptSnapshot, sourceFile)) return
     let prior = languageService.getCompletionsAtPosition(fileName, position, options)
     // console.log(
     //     'raw prior',
@@ -208,6 +209,8 @@ export const getCompletionsAtPosition = (
         })
     }
 
+    if (c('improveJsxCompletions') && node) prior.entries = improveJsxCompletions(ts, prior.entries, node, position, sourceFile, c('jsxCompletionsMap'))
+
     for (const rule of c('replaceSuggestions')) {
         let foundIndex: number
         const suggestion = prior.entries.find(({ name, kind }, index) => {

typescript/src/completionsAtPosition.ts

@@ -1,13 +1,7 @@
 import type tslib from 'typescript/lib/tsserverlibrary'
 
-export default (
-    position: number,
-    fileName: string,
-    scriptSnapshot: tslib.IScriptSnapshot,
-    sourceFile: tslib.SourceFile,
-    languageService: tslib.LanguageService,
-): boolean => {
-    const { character } = languageService.toLineColumnOffset!(fileName, position)
+export default (position: number, scriptSnapshot: tslib.IScriptSnapshot, sourceFile: tslib.SourceFile): boolean => {
+    const { character } = sourceFile.getLineAndCharacterOfPosition(position)
     const textBeforePositionLine = scriptSnapshot?.getText(position - character, position)
     const textAfterPositionLine = scriptSnapshot?.getText(position, sourceFile.getLineEndOfPosition(position))
     if (textBeforePositionLine.trimStart() === 'import ' && textAfterPositionLine.trimStart().startsWith('from')) return true

typescript/src/isInBannedPosition.ts

@@ -0,0 +1,61 @@
+import { compact } from '@zardoy/utils'
+import type tslib from 'typescript/lib/tsserverlibrary'
+import { Configuration } from '../../src/configurationType'
+import escapeStringRegexp from 'escape-string-regexp'
+
+export default (
+    ts: typeof tslib,
+    entries: tslib.CompletionEntry[],
+    node: tslib.Node,
+    position: number,
+    sourceFile: tslib.SourceFile,
+    jsxCompletionsMap: Configuration['jsxCompletionsMap'],
+): tslib.CompletionEntry[] => {
+    // TODO refactor to findNodeAtPosition
+    if (ts.isIdentifier(node)) node = node.parent
+    if (ts.isJsxAttribute(node) && node.initializer) {
+        entries = entries.map(entry => {
+            return {
+                ...entry,
+                insertText: entry.name,
+            }
+        })
+    }
+    if (ts.isJsxAttribute(node)) node = node.parent
+    if (ts.isJsxAttributes(node)) node = node.parent
+    if (Object.keys(jsxCompletionsMap).length && (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node))) {
+        const tagName = node.tagName.getText()
+        // TODO use the same perf optimization for replaceSuggestions
+        const patchEntries: Record<number, Configuration['jsxCompletionsMap'][string]> = {}
+        for (let [key, patchMethod] of Object.entries(jsxCompletionsMap)) {
+            const splitTagNameIdx = key.indexOf('#')
+            if (splitTagNameIdx === -1) continue
+            const comparingTagName = key.slice(0, splitTagNameIdx)
+            if (comparingTagName && comparingTagName !== tagName) continue
+            const comparingName = key.slice(splitTagNameIdx + 1)
+            if (comparingName.includes('*')) {
+                const regexMatch = new RegExp(escapeStringRegexp(comparingName).replaceAll('\\*', '.*'))
+                entries.forEach(({ name, kind }, index) => {
+                    if (kind === ts.ScriptElementKind.memberVariableElement && regexMatch.test(name)) {
+                        patchEntries[index] = patchMethod
+                    }
+                })
+            } else {
+                // I think it needs some sort of optimization by using wordRange
+                const indexToPatch = entries.findIndex(({ name, kind }) => kind === ts.ScriptElementKind.memberVariableElement && name === comparingName)
+                if (indexToPatch === -1) continue
+                patchEntries[indexToPatch] = patchMethod
+            }
+        }
+        entries = compact(
+            entries.flatMap((entry, i) => {
+                const patchMethod = patchEntries[i]
+                if (patchMethod === undefined) return entry
+                if (patchMethod === false) return
+                const patchedEntry: tslib.CompletionEntry = { ...entry, insertText: entry.name + patchMethod.insertText, isSnippet: true }
+                return patchMethod.duplicate ? [patchedEntry, entry] : patchedEntry
+            }),
+        )
+    }
+    return entries
+}