feat: introduce pinia store register code action (#14)

Author: Ilanaya

package.json

@@ -66,7 +66,7 @@
     },
     "devDependencies": {
         "@types/node": "^17.0.21",
-        "@types/vscode": "^1.65.0",
+        "@types/vscode": "^1.72.0",
         "@zardoy/tsconfig": "^1.4.0",
         "eslint": "^8.10.0",
         "eslint-config-zardoy": "^0.2.10",

pnpm-lock.yaml

@@ -30,4 +30,20 @@ export type Configuration = {
      *  @default "preserve"
      */
     copyComponentNameCase: 'preserve' | 'camelCase'
+    /**
+     *  Whether to enable code action for quick store registration in computed field
+     *  @default true
+     */
+    enablePiniaStoreRegistrationCodeAction: boolean
+    /**
+     *  Pinia stores import path
+     *  @default ".*?stores\\/.*"
+     */
+    piniaStorePathRegex: string
+    /**
+     *  (advanced): Invokes `String.prototype.replace` on the imported store name
+     *  Call signature: `<importedStoreName>.replace(new Regexp(pattern), replacement)`
+     *  @default null
+     */
+    piniaStoreComputedNameTransform: null | { pattern: RegExp | string; replacement: string }
 }

src/configurationType.ts

@@ -7,6 +7,7 @@ import { registerFindReferences } from './findReferences'
 import { registerGotoDefinition } from './gotoDefinition'
 import { registerHover } from './hover'
 import { registerTemplateCompletion } from './templateCompletion'
+import { registerPiniaCodeactions } from './piniaCodeActions'
 import focusVuexMapper from './commands/focusVuexMapper'
 import { registerCopyComponentName } from './commands/copyComponentName'
 
@@ -22,4 +23,5 @@ export const activate = () => {
     registerCssClasesFromTemplate()
     focusVuexMapper()
     registerCopyComponentName()
+    registerPiniaCodeactions()
 }

src/extension.ts

@@ -0,0 +1,57 @@
+import * as vscode from 'vscode'
+import { getExtensionSetting } from 'vscode-framework'
+import { getComputedOutline } from './util'
+
+export const registerPiniaCodeactions = () => {
+    vscode.languages.registerCodeActionsProvider('vue', {
+        async provideCodeActions(document, range, context, token) {
+            if (!getExtensionSetting('enablePiniaStoreRegistrationCodeAction')) return
+
+            const pos = range.start
+            const codeActions = [] as vscode.CodeAction[]
+            const piniaStorePathRegex = getExtensionSetting('piniaStorePathRegex')
+
+            const piniaStoreMatch = new RegExp(`(import (.+)\\s+from )(['"]${piniaStorePathRegex}['"].?)`).exec(document.lineAt(pos.line).text)
+
+            if (piniaStoreMatch) {
+                const computedOutline = await getComputedOutline(document.uri)
+                if (!computedOutline) return
+                // const str = `\${TM_CURRENT_LINE/import (.+)\\s+from ['"]${piniaStorePathRegex}['"].?/$1/}`
+                const { range: computedRange } = computedOutline
+
+                const customNameTransform = getExtensionSetting('piniaStoreComputedNameTransform')
+                const computedName = customNameTransform
+                    ? piniaStoreMatch[2]!.replace(new RegExp(customNameTransform?.pattern), customNameTransform?.replacement)
+                    : piniaStoreMatch[2]!
+
+                const snippetStirng = `\t\${1:${computedName}}() {\n\t\treturn defineStore('\${2:${piniaStoreMatch[2]!}}', \${3:${piniaStoreMatch[2]!}})()\n\t},$0\n`
+
+                const workspaceEdit = new vscode.WorkspaceEdit()
+                if (computedRange.isSingleLine)
+                    // computed: {}; case
+                    workspaceEdit.set(document.uri, [
+                        new vscode.SnippetTextEdit(
+                            new vscode.Range(computedRange.start, computedRange.end),
+                            new vscode.SnippetString(`computed: {\n${snippetStirng}}`),
+                        ),
+                    ])
+                else
+                    workspaceEdit.set(document.uri, [
+                        new vscode.SnippetTextEdit(
+                            new vscode.Range(computedRange.start.translate(1), computedRange.start.translate(1)),
+                            new vscode.SnippetString(snippetStirng),
+                        ),
+                    ])
+
+                codeActions.push({
+                    title: 'Register pinia store in computed',
+                    kind: vscode.CodeActionKind.QuickFix,
+                    isPreferred: true,
+                    edit: workspaceEdit,
+                })
+            }
+
+            return codeActions
+        },
+    })
+}

src/piniaCodeActions.ts

@@ -22,3 +22,16 @@ export const getComponentNameOutline = async (documentUri: vscode.Uri) => {
 
     return componentNameOutline
 }
+
+export const getComputedOutline = async (documentUri: vscode.Uri) => {
+    const outline = await getNormalizedVueOutline(documentUri)
+
+    const computedOutline = outline
+        ?.find(({ name }) => name === 'script')
+        ?.children.find(({ name }) => name === 'default')
+        ?.children.find(({ name }) => name === 'computed')
+
+    if (!computedOutline) console.warn("Can' get computed outline")
+
+    return computedOutline
+}