v0.8.0 (#22)

* Add new vueuse snippets

* Add and modify vue script snippets

* Remove reactivity transform

* Read filename on pinia store define

* Read filename on composable define

* Define bunch of new template snippets and some js snippets

* chore: release v0.8.0

Author: matijaoe

README.md

@@ -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 & Vue Macros.",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "license": "MIT",
   "icon": "assets/icon.png",
   "author": {

deno.lock

@@ -22,7 +22,7 @@ export type XSnippetDefinition = SnippetDefinition<XSnippetDict>;
 export type VscSnippetDefinition = SnippetDefinition<VscSnippetDict>;
 
 export type SnippetVariant<T> = {
-  label: string;
+  label?: string;
   description?: string;
   fileName: string;
   snippetDefinitions: T[];

package-lock.json

@@ -10,7 +10,7 @@ export const script: XSnippetDefinition = {
       body: [
         "import { defineStore } from 'pinia'",
         "",
-        "export const use${1/(.*)/${1:/capitalize}/} = defineStore('${2:key}', () => {",
+        "export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', () => {",
         "\t$0",
         "\t",
         "\treturn {",
@@ -25,18 +25,14 @@ export const script: XSnippetDefinition = {
       body: [
         "import { defineStore } from 'pinia'",
         "",
-        "export const use${1/(.*)/${1:/capitalize}/} = defineStore('${2:key}', {",
-        "\tstate: () => ({",
-        "\t\t",
-        "\t}),",
-        "\tgetters: {",
-        "\t\t",
-        "\t},",
-        "\tactions: {",
-        "\t\t",
-        "\t},",
+        "export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', {",
+        " state: () => ({",
+        "   $0",
+        " }),",
+        " getters: {},",
+        " actions: {},",
         "})",
-        "",
+        ""
       ],
     },
     vuseStore: {

package.json

@@ -1,11 +1,10 @@
 import { XSnippetVariant } from "../../models/app.ts";
 
+import { codeSnippets } from "./code-snippets.ts";
 import { script } from "./script.ts";
+import { style } from "./style.ts";
 import { template } from "./template.ts";
 import { vueSfc } from "./vue.ts";
-import { style } from "./style.ts";
-import { codeSnippets } from "./code-snippets.ts";
-import { reactivityTransform } from "./reactivity-transform.ts";
 
 export const vue: XSnippetVariant[] = [
   {
@@ -22,6 +21,6 @@ export const vue: XSnippetVariant[] = [
   },
   {
     fileName: "vue-script",
-    snippetDefinitions: [script, codeSnippets, reactivityTransform],
+    snippetDefinitions: [script, codeSnippets],
   },
 ];

src/models/app.ts

@@ -9,7 +9,7 @@ export const codeSnippets: XSnippetDefinition = {
     vcomposable: {
       name: "Vue define composable",
       body: [
-        "export const use${1/(.*)/${1:/capitalize}/} = () => {",
+        "export const use${1/(.*)/${1:/pascalcase}/} = () => {",
         "\t$0",
         "\t",
         "\treturn {",
@@ -20,6 +20,20 @@ export const codeSnippets: XSnippetDefinition = {
       ],
       alt: ["vdc"],
     },
+    "vcomposable:file": {
+      name: "Vue define composable in file",
+      body: [
+        "export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/} = () => {",
+        "\t$0",
+        "\t",
+        "\treturn {",
+        "\t\t",
+        "\t}",
+        "}",
+        "",
+      ],
+      alt: ["vdcf"],
+    },
     vuse: {
       name: "Use composable",
       body: "const ${2:$1} = use${1/(.*)/${1:/capitalize}/}($3)",

src/snippets/pinia/script.ts

@@ -27,7 +27,7 @@ export const script: XSnippetDefinition = {
       body: "const ${1:name} = computed<$2>(() => $3)",
       alt: ["vct"],
     },
-    "vcomputed-gs": {
+    "vcomputed:gs": {
       name: "Vue computed (get/set)",
       body: [
         "const ${1:name} = computed({",
@@ -48,25 +48,25 @@ export const script: XSnippetDefinition = {
       name: "Vue reactive (typed)",
       body: "const ${1:name}: ${2:type} = reactive({$3})",
     },
+    vshallowRef: {
+      name: "Vue shallowRef",
+      body: "const ${1:name} = shallowRef($2)",
+    },
     vtoRef: {
       name: "Vue toRef",
-      body: "const ${1:name} = toRef(${2:object}, '$3')",
+      body: "toRef(${1:props}, '$2')",
     },
     vtoRefs: {
       name: "Vue toRefs",
-      body: "const ${1:name} = toRefs(${2:object})",
-    },
-    vshallowRef: {
-      name: "Vue shallowRef",
-      body: "const ${1:name} = shallowRef($2)",
+      body: "toRefs(${1:props})",
     },
     vunref: {
       name: "Vue unref",
-      body: "const ${1:unwrapped} = unref($2)",
+      body: "unref($1)",
     },
     vreadonly: {
       name: "Vue readonly",
-      body: "const ${1:copy} = readonly(${2:object})",
+      body: "readonly(${1:object})",
     },
     "vref:elem": {
       name: "Vue element ref",
@@ -109,6 +109,7 @@ export const script: XSnippetDefinition = {
         "\tconsole.log('$1:', $2)",
         "})",
       ],
+      alt: ["vwl"],
     },
     vprops: {
       name: "Vue defineProps",
@@ -120,23 +121,27 @@ export const script: XSnippetDefinition = {
         "${1:const props = }withDefaults(defineProps<${2:Props}>(), {\n\t$0\n})",
       ],
     },
+    "vprops:js": {
+      name: "Vue defineProps without TS",
+      body: "${1:const props = }defineProps({\n\t$2\n})",
+    },
     vemits: {
       name: "Vue defineEmits",
-      body: "${1:const emit = }defineEmits(['$2'])",
-    },
-    "vemits:ts": {
-      name: "Vue defineEmits (typed)",
       body: [
         "${1:const emit = }defineEmits<{",
-        "\t(e: '${2:click}', ${3:payload}: ${4:string}): void,$5",
+        "\t${2:click}: [${3:payload}: ${4:string}],$5",
         "}>()",
       ],
     },
-    "vemits:new": {
-      name: "Vue defineEmits (new syntax)",
+    "vemits:alt": {
+      name: "Vue defineEmits without TS",
+      body: "${1:const emit = }defineEmits(['$2'])",
+    },
+    "vemits:old": {
+      name: "Vue defineEmits (old syntax)",
       body: [
         "${1:const emit = }defineEmits<{",
-        "\t${2:click}: [${3:payload}: ${4:string}],$5",
+        "\t(e: '${2:click}', ${3:payload}: ${4:string}): void,$5",
         "}>()",
       ],
     },
@@ -146,7 +151,7 @@ export const script: XSnippetDefinition = {
     },
     vemit: {
       name: "Vue emit event",
-      body: "emit('$1', $2)",
+      body: "emit('$1'$2)",
     },
     vexpose: {
       name: "Vue defineExpose",
@@ -218,17 +223,16 @@ export const script: XSnippetDefinition = {
     },
     vinject: {
       name: "Vue inject",
-      body: "const ${1:value}  = inject(${2:key})",
+      body: "const ${1:value} = inject(${2:key})",
+    },
+    "vinject:ts": {
+      name: "Vue inject (typed)",
+      body: "const ${1:value} = inject<${2:string}>(${3:key})",
     },
     "vinject:default": {
       name: "Vue inject with default",
       body: "const ${1:value}  = inject(${2:key}, ${3:defaultValue})",
     },
-    "vinject:ts": {
-      name: "Vue inject (typed)",
-      body:
-        "const ${1:value} = inject<${2:string}}>(${3:key}, ${4:defaultValue})",
-    },
     "vinjectkey": {
       name: "Vue injection key",
       body: "const ${1:key} = Symbol('$2') as InjectionKey<${3:string}>",
@@ -244,6 +248,7 @@ export const script: XSnippetDefinition = {
     vimport: {
       name: "Import from vue",
       body: "import { $1 } from 'vue'",
+      alt: ["vim"],
     },
   },
 };