diff --git a/.vscodeignore b/.vscodeignore new file mode 100644 index 0000000..23fe30f --- /dev/null +++ b/.vscodeignore @@ -0,0 +1,7 @@ +node_modules +tests +*.vsix +bun.lockb +package.json +tsconfig.json +.changeset \ No newline at end of file diff --git a/README.md b/README.md index f440a8f..bb22dbe 100644 --- a/README.md +++ b/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 | diff --git a/bun.lockb b/bun.lockb new file mode 100755 index 0000000..382efda Binary files /dev/null and b/bun.lockb differ diff --git a/package.json b/package.json index c5d44d3..d5a2701 100644 --- a/package.json +++ b/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" } ] } diff --git a/snippets/pinia.json b/snippets/pinia.json new file mode 100644 index 0000000..780ef15 --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/snippets/vue-script.json b/snippets/vue-script.json index 2abfffe..eaf4a42 100644 --- a/snippets/vue-script.json +++ b/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(), { msg: 'myDefaultValue' })}", + "const props = defineProps()" + ], + "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> = 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}", "})"], diff --git a/snippets/vue.json b/snippets/vue.json index 578866c..7068a76 100644 --- a/snippets/vue.json +++ b/snippets/vue.json @@ -168,12 +168,6 @@ "Vue Single File Component Composition API": { "prefix": "vbase-3", "body": [ - "", - "", "", "", - "" ], @@ -193,17 +193,17 @@ "Vue Single File Component Setup Composition API": { "prefix": "vbase-3-setup", "body": [ + "", + "", "", "", - "", - "", - "" ], @@ -212,12 +212,6 @@ "Vue Single File Component Composition API Reactive": { "prefix": "vbase-3-reactive", "body": [ - "", - "", "", "", - "" ], @@ -243,12 +243,6 @@ "Vue Single File Component Composition API with Typescript": { "prefix": "vbase-3-ts", "body": [ - "", - "", "", "", + "", + "", "" @@ -269,21 +269,43 @@ "Vue Single File Component Setup Composition API with Typescript": { "prefix": "vbase-3-ts-setup", "body": [ + "", + "", "", "", - "", "", + "", + "", "" - ], - "description": "Base for Vue File Setup Composition API - Typescript" + ] }, "Vue Single File Component with Class based Typescript format": { "prefix": "vbase-ts-class", diff --git a/yarn.lock b/yarn.lock deleted file mode 100644 index fb57ccd..0000000 --- a/yarn.lock +++ /dev/null @@ -1,4 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -# yarn lockfile v1 - -