fix: Nuxt components snippets activation (#166)

Author: adhamfarrag

package.json

@@ -1043,7 +1043,7 @@
     ],
     "snippets": [
       {
-        "language": "vue",
+        "language": "html",
         "path": "./snippets/nuxt/components.json"
       },
       {
@@ -1068,11 +1068,19 @@
       },
       {
         "language": "javascript",
-        "path": "./snippets/nitro/imports.json"
+        "path": "./snippets/nitro/utils.json"
+      },
+      {
+        "language": "typescript",
+        "path": "./snippets/nitro/utils.json"
+      },
+      {
+        "language": "javascript",
+        "path": "./snippets/nitro/boilerplates.json"
       },
       {
         "language": "typescript",
-        "path": "./snippets/nitro/imports.json"
+        "path": "./snippets/nitro/boilerplates.json"
       }
     ]
   },

snippets/Nuxt/components.json

@@ -33,11 +33,6 @@
     ],
     "description": "Nuxt | NuxtErrorBoundary"
   },
-  "Nuxt | Template with ID": {
-    "prefix": "templateWithId",
-    "body": ["<template #$1>", "  $2", "</template>"],
-    "description": "Nuxt | Template with ID"
-  },
   "Nuxt | NuxtLoadingIndicator": {
     "prefix": "nuxtLoadingIndicator",
     "body": ["<NuxtLoadingIndicator $1/>"],
@@ -77,5 +72,10 @@
     "prefix": "pageKey",
     "body": ["page-key=\"$1\""],
     "description": "Nuxt | pageKey"
+  },
+  "Nuxt | Template with ID": {
+    "prefix": "templateWithId",
+    "body": ["<template #$1>", "  $2", "</template>"],
+    "description": "Nuxt | Template with ID"
   }
 }

snippets/Nitro/imports.json snippets/nitro/boilerplates.json

@@ -1,5 +1,5 @@
 {
-  "defineNitroPlugin": {
+    "defineNitroPlugin": {
     "prefix": "defineNitroPlugin",
     "description": "Define Nitro Plugins",
     "body": [
@@ -9,21 +9,6 @@
     ],
     "isFileTemplate": true
   },
-  "getRouteRules": {
-    "prefix": "getRouteRules",
-    "description": "Get Route Rules",
-    "body": ["const ${1:routeRules} = getRouteRules($2);"]
-  },
-  "useNitroApp": {
-    "prefix": "useNitroApp",
-    "description": "Use Nitro App",
-    "body": ["const ${1:nitroApp} = useNitroApp();"]
-  },
-  "useStorage": {
-    "prefix": "useStorage",
-    "description": "Use Storage",
-    "body": ["const ${1:storage} = useStorage();"]
-  },
   "defineRenderHandler": {
     "prefix": "defineRenderHandler",
     "body": [
@@ -35,4 +20,4 @@
     ],
     "description": "defineRenderHandler"
   }
-}
+}

snippets/nitro/utils.json

@@ -0,0 +1,17 @@
+{
+  "getRouteRules": {
+    "prefix": "getRouteRules",
+    "description": "Get Route Rules",
+    "body": ["const ${1:routeRules} = getRouteRules($2);"]
+  },
+  "useNitroApp": {
+    "prefix": "useNitroApp",
+    "description": "Use Nitro App",
+    "body": ["const ${1:nitro} = useNitroApp();"]
+  },
+  "useStorage": {
+    "prefix": "useStorage",
+    "description": "Use Storage",
+    "body": ["const ${1:storage} = useStorage();"]
+  }
+}

src/snippets/index.ts

@@ -1,8 +1,8 @@
-import { CompletionItem, CompletionItemKind, MarkdownString, extensions, languages } from 'vscode';
-import { resolve } from 'pathe';
-import { readPackageJSON, writePackageJSON } from 'pkg-types'
 import { homedir } from 'node:os';
-import { generateVueFileBasicTemplate } from '../utils';
+import { resolve } from 'pathe';
+import { readPackageJSON, writePackageJSON } from 'pkg-types';
+import { CompletionItem, CompletionItemKind, MarkdownString, extensions, languages } from 'vscode';
+import { generateVueFileTemplate } from '../utils';
 
 interface Snippet {
     language: string;
@@ -17,7 +17,9 @@ export async function toggleSnippets(source: 'Nuxt' | 'Nitro', moveToDisabled: b
 
     const extensionDir = resolve(homeDir, '.vscode', 'extensions', `${extensionName}-${nuxtrVersion}`);
     const pkgJsonPath = resolve(extensionDir, 'package.json');
+
     const pkgJSON = await readPackageJSON(extensionDir);
+
     let snippets: Snippet[] = pkgJSON?.contributes?.snippets || [];
     let disabledSnippets: Snippet[] = pkgJSON?.contributes?.disabled_snippets || [];
 
@@ -48,15 +50,37 @@ languages.registerCompletionItemProvider(
     { language: 'vue' },
     {
         provideCompletionItems() {
-            const completionItem = new CompletionItem('vueBaseLayout', CompletionItemKind.Snippet);
+            const completionItem = new CompletionItem('nuxtBaseLayout', CompletionItemKind.Snippet);
+            completionItem.detail = 'Generate a Nuxt Layout template';
+
+            const template = generateVueFileTemplate('layout');
+
+            const documentation = new MarkdownString();
+            documentation.appendMarkdown(`Generate a Nuxt layout template according to your Nuxtr configuration.\n\n`);
+            documentation.appendCodeblock(template, 'vue');
+
+            completionItem.documentation = documentation;
+            completionItem.kind = CompletionItemKind.Snippet;
+            completionItem.insertText = template;
+
+            return [completionItem];
+        }
+    }
+);
+
+
+languages.registerCompletionItemProvider(
+    { language: 'vue' },
+    {
+        provideCompletionItems() {
+            const completionItem = new CompletionItem('vueBase', CompletionItemKind.Snippet);
             completionItem.detail = 'Generate a Vue file template';
 
-            const template = generateVueFileBasicTemplate('layout');
+            const template = generateVueFileTemplate('page');
 
-            // Create a MarkdownString for documentation with code highlighting
             const documentation = new MarkdownString();
             documentation.appendMarkdown(`Generate a Vue file template according to your Nuxtr configuration.\n\n`);
-            documentation.appendCodeblock(template, 'vue'); // Specify 'vue' as the language for code block highlighting
+            documentation.appendCodeblock(template, 'vue');
 
             completionItem.documentation = documentation;
             completionItem.kind = CompletionItemKind.Snippet;
@@ -65,4 +89,4 @@ languages.registerCompletionItemProvider(
             return [completionItem];
         }
     }
-);
+);