Adds Pinia snippets

.vscodeignore

@@ -0,0 +1,7 @@
+node_modules
+tests
+*.vsix
+bun.lockb
+package.json
+tsconfig.json
+.changeset

README.md

@@ -113,9 +113,13 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
 
 | Snippet             | Purpose                                               |
 | ------------------- | ----------------------------------------------------- |
+| `v3props`           | Vue Composition API - defineProps with Interface      |
+| `v3emits`           | Vue Composition API - defineEmits with Interface      |
+| `v3store`           | Vue Composition API - Store using Provide / Inject    |
 | `v3reactive`        | Vue Composition API - reactive                        |
 | `v3reactive-setup`  | Vue Composition API - reactive with setup boilerplate |
 | `v3computed`        | Vue Composition API - computed                        |
+| `v3computedgetset`  | Vue Composition API - computed get / set              |
 | `v3watch`           | Vue Composition API - watcher single source           |
 | `v3watch-array`     | Vue Composition API - watch as array                  |
 | `v3watcheffect`     | Vue Composition API - watchEffect                     |
@@ -141,6 +145,15 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
 | `vstore-import` | Import vuex store into main.js |
 | `vstore2`       | Updated Base for Vuex store    |
 
+### Pinia
+
+| Snippet         | Purpose                        |
+| --------------- | ------------------------------ |
+| `pstore`        | Base for Pinia store.ts        |
+| `pstateref`     | Access Pinia State             |
+| `ppatch`        | Pinia Patch                    |
+| `ppatchf`       | Pinia Patch Function           |
+
 ### Vue Router
 
 | Snippet              | Purpose                                       |

package.json

@@ -1,26 +1,31 @@
 {
-  "name": "vue-vscode-snippets",
-  "displayName": "Vue VSCode Snippets",
+  "name": "modern-vue-snippets",
+  "displayName": "Modern Vue Snippets",
   "description": "Snippets that will supercharge your Vue workflow",
   "icon": "images/vue-logo.png",
-  "version": "3.1.1",
-  "publisher": "sdras",
+  "version": "3.1.5",
+  "publisher": "CraigRBroughton",
   "engines": {
-    "vscode": "^1.14.0"
+    "vscode": "^1.95.3"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/sdras/vue-vscode-snippets.git"
+    "url": "https://github.com/CRBroughton/vue-vscode-snippets.git"
   },
   "scripts": {
-    "build": "vsce package -o vue-vscode-snippets-$npm_package_version.vsix",
-    "install": "yarn build && code --install-extension vue-vscode-snippets-$npm_package_version.vsix"
+    "build": "vsce package -o vue-snippets-$npm_package_version.vsix",
+    "install": "npm run build && code --install-extension vue-snippets-$npm_package_version.vsix",
+    "changeset": "npx changeset",
+    "changeset:status": "npx changeset status --verbose",
+    "changeset:version": "npx changeset version"
   },
   "keywords": [
     "Vue",
     "Vue 3",
     "Vue 2",
     "Composition API",
+    "Vuex",
+    "Pinia",
     "Vue Snippets"
   ],
   "categories": [
@@ -79,6 +84,10 @@
       {
         "language": "typescript",
         "path": "./snippets/nuxt-config.json"
+      },
+      {
+        "language": "typescript",
+        "path": "./snippets/pinia.json"
       }
     ]
   }

snippets/pinia.json

@@ -0,0 +1,57 @@
+{
+  "Pinia Store": {
+    "prefix": "pstore",
+    "body": [
+      "import { defineStore } from 'pinia'",
+      "",
+      "export const useCounterStore = defineStore('counter', {",
+      "\tstate: () => {",
+      "\t\treturn { count: 0 }",
+      "\t},",
+      "\tactions: {",
+      "\t\tincrement() {",
+      "\t\t\tthis.count++",
+      "\t\t},",
+      "\t},",
+      "})"
+    ],
+    "description": "Basic Pinia Store"
+  },
+  "Pinia Store State Refs": {
+    "prefix": "pstateref",
+    "body": [
+      "import { useCounterStore } from '@/store/main'",
+      "",
+      "const store = useCounterStore()",
+      "const { count } = storeToRefs(store)",
+      "// You can access destructured state like so: store.counter++"
+    ],
+    "description": "Destructure Pinia State"
+  },
+  "Pinia Store Patch": {
+    "prefix": "ppatch",
+    "body": [
+      "store.$patch({",
+      "\tcount: store.count++",
+      "})"
+    ],
+    "description": "Pinia Store Patch"
+  },
+  "Pinia Store Patch Function": {
+    "prefix": "ppatchf",
+    "body": [
+      "store.$patch((state) => {",
+      "\tstate.items.push({ name: 'shoes', quantity: 1 })",
+      "\tstate.hasChanged = true",
+      "})"
+    ],
+    "description": "Pinia Store Patch Function"
+  },
+  "Pinia Import Store": {
+    "prefix": "pstore-import",
+    "body": [
+      "import { useCounterStore } from '@/store/main'"
+    ],
+    "description": "Import a Pinia store"
+  }
+}

snippets/vue-script.json

@@ -304,6 +304,67 @@
     ],
     "description": "vue.config.js"
   },
+  "Vue Composition API - defineProps with Interface": {
+    "prefix": "v3props",
+    "body": [
+      "interface Props {",
+      "\t${1:msg: string}",
+      "}",
+      "",
+      "// For default values for your props, use :",
+      "// withDefaults(defineProps<Props>(), { msg: 'myDefaultValue' })}",
+      "const props = defineProps<Props>()"
+    ],
+    "description": "Vue Composition api - defineProps with Interface"
+  },
+  "Vue Composition API - defineEmits": {
+    "prefix": "v3emits",
+    "body": [
+      "const emit = defineEmits<{",
+        "\tfoo: [id: number]",
+        "\tbar: [name: string, ...rest: any[]]",
+      "}>()"
+    ],
+    "description": "Vue Composition api - defineEmits"
+  },
+  "Vue Composition API - defineSlots": {
+    "prefix": "v3slots",
+    "body": [
+      "const slots = defineSlots<{",
+        "\tdefault?: (props: { msg: string }) => any",
+        "\titem?: (props: { id: number }) => any",
+      "}>()"
+    ],
+    "description": "Vue Composition api - defineSlots"
+  },
+  "Vue Composition API - defineModel": {
+    "prefix": "v3model",
+    "body": [
+      "const title = defineModel('title', { required: true })"
+    ],
+    "description": "Vue Composition api - defineModel"
+  },
+  "Vue Composition API - Store using Provide / Inject": {
+    "prefix": "v3store",
+    "body": [
+      "import { provide, inject, InjectionKey } from  'vue'",
+      "",
+      "const store = () => {}",
+      "",
+      "const storeKey: InjectionKey<ReturnType<typeof store>> = Symbol('composition-store')",
+      "",
+      "export const provideStore = () => {",
+      "\tconst state = store()",
+      "\tprovide(storeKey, state)",
+      "\treturn state",
+      "}",
+      "",
+      "export const useStore = () => {",
+      "\treturn inject(storeKey)",
+      "}"
+    ],
+    "description": "Vue Composition api - Store using Provide / Inject"
+  },
   "Vue Composition API - Reactive": {
     "prefix": "v3reactive",
     "body": ["const ${1:name} = reactive({", "\t${2:count}: ${3:0}", "})"],
@@ -314,6 +375,23 @@
     "body": ["const ${1:name} = computed(() => {", "\treturn ${2}", "})"],
     "description": "Vue Composition api - computed"
   },
+  "Vue Composition API - Computed Get / Set": {
+    "prefix": "v3computedgetset",
+    "body": [
+      "const props = defineProps(['modelValue'])",
+      "const emit = defineEmits(['update:modelValue'])",
+      "",
+      "const value = computed({",
+      "\tget() {",
+      "\t\treturn props.modelValue",
+      "\t},",
+      "\tset(value: string) {",
+      "\t\temit('update:modelValue', value)",
+      "\t}",
+      "})"
+    ],
+    "description": "Vue Composition api - computed get / set"
+  },
   "Vue Composition API - watch - single source": {
     "prefix": "v3watch",
     "body": ["watch(() => ${1:foo}, (newValue, oldValue) => {", "\t${2}", "})"],

snippets/vue.json

@@ -168,12 +168,6 @@
   "Vue Single File Component Composition API": {
     "prefix": "vbase-3",
     "body": [
-      "<template>",
-      "\t<div>",
-      "",
-      "\t</div>",
-      "</template>",
-      "",
       "<script>",
       "export default {",
       "\tsetup () {",
@@ -184,7 +178,13 @@
       "}",
       "</script>",
       "",
-      "<style lang=\"scss\" scoped>",
+      "<template>",
+      "\t<div>",
+      "",
+      "\t</div>",
+      "</template>",
+      "",
+      "<style scoped lang=\"scss\">",
       "",
       "</style>"
     ],
@@ -193,17 +193,17 @@
   "Vue Single File Component Setup Composition API": {
     "prefix": "vbase-3-setup",
     "body": [
+      "<script setup>",
+      "",
+      "</script>",
+      "",
       "<template>",
       "\t<div>",
       "",
       "\t</div>",
       "</template>",
       "",
-      "<script setup>",
-      "",
-      "</script>",
-      "",
-      "<style lang=\"scss\" scoped>",
+      "<style scoped lang=\"scss\">",
       "",
       "</style>"
     ],
@@ -212,12 +212,6 @@
   "Vue Single File Component Composition API Reactive": {
     "prefix": "vbase-3-reactive",
     "body": [
-      "<template>",
-      "\t<div>",
-      "",
-      "\t</div>",
-      "</template>",
-      "",
       "<script>",
       "import { reactive, toRefs } from 'vue'",
       "",
@@ -234,7 +228,13 @@
       "}",
       "</script>",
       "",
-      "<style lang=\"scss\" scoped>",
+      "<template>",
+      "\t<div>",
+      "",
+      "\t</div>",
+      "</template>",
+      "",
+      "<style scoped lang=\"scss\">",
       "",
       "</style>"
     ],
@@ -243,12 +243,6 @@
   "Vue Single File Component Composition API with Typescript": {
     "prefix": "vbase-3-ts",
     "body": [
-      "<template>",
-      "\t<div>",
-      "",
-      "\t</div>",
-      "</template>",
-      "",
       "<script lang=\"ts\">",
       "import { defineComponent } from 'vue'",
       "",
@@ -260,6 +254,12 @@
       "})",
       "</script>",
       "",
+      "<template>",
+      "\t<div>",
+      "",
+      "\t</div>",
+      "</template>",
+      "",
       "<style scoped>",
       "",
       "</style>"
@@ -269,21 +269,43 @@
   "Vue Single File Component Setup Composition API with Typescript": {
     "prefix": "vbase-3-ts-setup",
     "body": [
+      "<script setup lang=\"ts\">",
+      "",
+      "</script>",
+      "",
       "<template>",
       "\t<div>",
       "",
       "\t</div>",
       "</template>",
       "",
-      "<script setup lang=\"ts\">",
+      "<style scoped>",
+      "",
+      "</style>"
+    ],
+    "description": "Base for Vue File Setup Composition API - Typescript"
+  },
+  "Vue Single File Generic Component": {
+    "prefix": "vbase-3-generic",
+    "body": [
+      "<script setup lang=\"ts\" generic=\"T\">",
+      "const props = defineProps<{",
+      "items: T[]",
+      "selected: T",
+      "}>()",
       "",
       "</script>",
       "",
+      "<template>",
+      "\t<div>",
+      "",
+      "\t</div>",
+      "</template>",
+      "",
       "<style scoped>",
       "",
       "</style>"
-    ],
-    "description": "Base for Vue File Setup Composition API - Typescript"
+    ]
   },
   "Vue Single File Component with Class based Typescript format": {
     "prefix": "vbase-ts-class",