Release v0.6.0 (#19)

* Remove reactivity transform alt prefixes

* Remove non-essential reactivity transform snippets

* Modify Vue script snippets

* Remove indentation from style blocks

* Fix vueuse snippet

* Generate docs

* Add vue router script snippets

* Reorder sections

* Fix defineRouter indentation

* Add vue macros

* Add missing comma

* Show more placeholder options in docs

* Provide better :to prop handling on nuxt link

* Bump to v0.6.0

package.json

@@ -2,7 +2,7 @@
   "name": "vue-nuxt-snippets",
   "displayName": "Vue Ecosystem Snippets",
   "description": "Snippets for the modern Vue ecosystem - including Nuxt 3, Pinia, VueUse & Vue Router.",
-  "version": "0.5.6",
+  "version": "0.6.0",
   "license": "MIT",
   "icon": "assets/icon.png",
   "author": {
@@ -75,6 +75,26 @@
         "language": "typescriptreact",
         "path": "./dist/vue-script.code-snippets"
       },
+      {
+        "language": "javascript",
+        "path": "./dist/vue-router-script.code-snippets"
+      },
+      {
+        "language": "typescript",
+        "path": "./dist/vue-router-script.code-snippets"
+      },
+      {
+        "language": "javascriptreact",
+        "path": "./dist/vue-router-script.code-snippets"
+      },
+      {
+        "language": "typescriptreact",
+        "path": "./dist/vue-router-script.code-snippets"
+      },
+      {
+        "language": "javascript",
+        "path": "./dist/vue-router-script.code-snippets"
+      },
       {
         "language": "javascript",
         "path": "./dist/pinia.code-snippets"
@@ -107,6 +127,22 @@
         "language": "typescriptreact",
         "path": "./dist/vueuse.code-snippets"
       },
+      {
+        "language": "javascript",
+        "path": "./dist/vue-macros.code-snippets"
+      },
+      {
+        "language": "typescript",
+        "path": "./dist/vue-macros.code-snippets"
+      },
+      {
+        "language": "javascriptreact",
+        "path": "./dist/vue-macros.code-snippets"
+      },
+      {
+        "language": "typescriptreact",
+        "path": "./dist/vue-macros.code-snippets"
+      },
       {
         "language": "javascript",
         "path": "./dist/nuxt-script.code-snippets"

src/docgen/snippets.ts

@@ -25,8 +25,12 @@ type SnippetRow = {
 const truncateOptions = (str: string) => {
   const regex = /\|([^|]+)\|/g;
   return str.replace(regex, (_match, p1) => {
-    const [first] = p1.split(",").map((o: string) => o.trim());
-    return `|${first},...|`;
+    const [first, second, third] = p1.split(",").map((o: string) => o.trim());
+    if (!third) {
+      return `|${first},${second}|`;
+    } else {
+      return `|${first},${second},...|`;
+    }
   });
 };
 

src/snippets/app.ts

@@ -1,6 +1,7 @@
 import { XSnippetVariant } from "../models/app.ts";
 import { nuxt } from "./nuxt/app.ts";
 import { pinia } from "./pinia/app.ts";
+import { vueMacros } from "./vue-macros/app.ts";
 import { vueRouter } from "./vue-router/app.ts";
 import { vue } from "./vue/app.ts";
 import { vueUse } from "./vueuse/app.ts";
@@ -11,4 +12,5 @@ export const variants: XSnippetVariant[] = [
   ...pinia,
   ...nuxt,
   ...vueUse,
+  ...vueMacros
 ];

src/snippets/nuxt/app.ts

@@ -3,12 +3,10 @@ import { template } from "./template.ts";
 
 export const nuxt = [
   {
-    label: "Nuxt Script",
     fileName: "nuxt-script",
     snippetDefinitions: [script],
   },
   {
-    label: "Nuxt Template",
     fileName: "nuxt-template",
     snippetDefinitions: [template],
   },

src/snippets/nuxt/script.ts

@@ -2,7 +2,7 @@ import { XSnippetDefinition } from "../../models/app.ts";
 
 export const script: XSnippetDefinition = {
   meta: {
-    title: "Nuxt Script",
+    title: "Nuxt (script)",
   },
   snippets: {
     nfetch: {

src/snippets/nuxt/template.ts

@@ -2,22 +2,22 @@ import { XSnippetDefinition } from "../../models/app.ts";
 
 export const template: XSnippetDefinition = {
   meta: {
-    title: "Nuxt template",
+    title: "Nuxt (template)",
     lang: "html",
   },
   snippets: {
     nlink: {
       name: "NuxtLink",
-      body: '<NuxtLink to="$1">$3</NuxtLink>',
+      body: '<NuxtLink ${1|to,:to|}="$2">$3</NuxtLink>',
     },
     "nlink:blank": {
       name: "NuxtLink with target _blank",
-      body: '<NuxtLink to="$1" target="_blank" $3>$4</NuxtLink>',
+      body: '<NuxtLink ${1|to,:to|}="$2" target="_blank" $3>$4</NuxtLink>',
     },
     "nlink:external": {
       name: "NuxtLink with target external",
       body:
-        '<NuxtLink to="$1" external target="${2|_blank,_self|}" $3>$4</NuxtLink>',
+        '<NuxtLink ${1|to,:to|}="$2" external target="${3|_blank,_self|}" $4>$5</NuxtLink>',
     },
     "nlink:param": {
       name: "NuxtLink with param",

src/snippets/pinia/app.ts

@@ -2,7 +2,6 @@ import { script } from "./script.ts";
 
 export const pinia = [
   {
-    label: "Pinia",
     fileName: "pinia",
     snippetDefinitions: [script],
   },

src/snippets/vue-macros/app.ts

@@ -0,0 +1,9 @@
+import { XSnippetVariant } from "../../models/app.ts";
+import { script } from "./script.ts";
+
+export const vueMacros: XSnippetVariant[] = [
+  {
+    fileName: "vue-macros",
+    snippetDefinitions: [script],
+  },
+];

src/snippets/vue-macros/script.ts

@@ -0,0 +1,66 @@
+import { XSnippetDefinition } from "../../models/app.ts";
+
+export const script: XSnippetDefinition = {
+  meta: {
+    title: "Vue Macros",
+    lang: "javascript",
+  },
+  snippets: {
+    vdefineModel: {
+      name: "Define model",
+      body: [
+        "const { modelValue$2 } = defineModel<{",
+        "\tmodelValue: ${1:string}",
+        "}>()"
+      ],
+      alt: ["vmacro:model"]
+    },
+    vdefinePropsRefs: {
+      name: "Define props refs",
+      body: [
+        "const { $2 } = definePropsRefs<{",
+        "\t$1",
+        "}>()"
+      ],
+      alt: ["vmacro:props"]
+    },
+    vdefineOptions: {
+      name: "Define options",
+      body: [
+        "defineOptions({",
+        "\t$0",
+        "})"
+      ],
+      alt: ["vmacro:options"]
+    },
+    vdefineSlots: {
+      name: "Define slots",
+      body: [
+        "defineSlots<{",
+        "\t$0",
+        "}>()"
+      ],
+      alt: ["vmacro:slots"]
+    },
+    vdefineRender: {
+      name: "Define render",
+      body: [
+        "defineRender(",
+        "\t$0",
+        ")"
+      ],
+      alt: ["vmacro:render"]
+    },
+    "vdefineRender:fn": {
+      name: "Define render function",
+      "body": [
+        "defineRender(() => {",
+        "\treturn (",
+        "\t\t$0",
+        "\t)",
+        "})"
+      ],
+      alt: ["vmacro:render:fn"]
+    },
+  }
+}

src/snippets/vue-router/app.ts

@@ -1,9 +1,13 @@
 import { XSnippetVariant } from "../../models/app.ts";
 import { template } from "./template.ts";
+import { script } from "./script.ts";
 
 export const vueRouter: XSnippetVariant[] = [
   {
-    label: "Vue Router",
+    fileName: "vue-router-script",
+    snippetDefinitions: [script],
+  },
+  {
     fileName: "vue-router-template",
     snippetDefinitions: [template],
   },

src/snippets/vue-router/script.ts

@@ -0,0 +1,30 @@
+import { XSnippetDefinition } from "../../models/app.ts";
+
+export const script: XSnippetDefinition = {
+  meta: {
+    title: "Vue Router (script)",
+    lang: "javascript",
+  },
+  snippets: {
+    vrouter: {
+      name: "Vue router",
+      body: "const ${1:router} = useRouter()",
+    },
+    vroute: {
+      name: "Vue route",
+      body: "const ${1:route} = useRoute()",
+    },
+    "vrouter:create": {
+      name: "Create Vue router",
+      body: [
+        "const router = createRouter({",
+        "\thistory: createWebHashHistory(),",
+        "\troutes: ${1:routes},",
+        "\tscrollBehavior(to, from, savedPosition) {",
+        "\t\t$2",
+        "\t}",
+        "})"
+      ],
+    },
+  }
+}

src/snippets/vue-router/template.ts

@@ -2,7 +2,7 @@ import { XSnippetDefinition } from "../../models/app.ts";
 
 export const template: XSnippetDefinition = {
   meta: {
-    title: "Vue Router template",
+    title: "Vue Router (template)",
     lang: "html",
   },
   snippets: {
@@ -32,7 +32,7 @@ export const template: XSnippetDefinition = {
     },
     vlink: {
       name: "RouterLink",
-      body: '<RouterLink to="$1">$2</RouterLink>',
+      body: '<RouterLink ${1|to,:to|}="$2">$3</RouterLink>',
     },
     "vlink:param": {
       name: "RouterLink with param",

src/snippets/vue/app.ts

@@ -9,23 +9,19 @@ import { reactivityTransform } from "./reactivity-transform.ts";
 
 export const vue: XSnippetVariant[] = [
   {
-    label: "Vue",
     fileName: "vue",
     snippetDefinitions: [vueSfc],
   },
   {
-    label: "Template",
     fileName: "vue-template",
     snippetDefinitions: [template],
   },
   {
-    label: "Style",
     fileName: "vue-style",
     snippetDefinitions: [style],
   },
   {
-    label: "Script",
     fileName: "vue-script",
-    snippetDefinitions: [script, reactivityTransform, codeSnippets],
+    snippetDefinitions: [script, codeSnippets, reactivityTransform],
   },
 ];