Release v0.7.0 (#21)

* Update deno lock

* Fix less lang style tag

* Remove acceptHMRUpdate from pinia snippets

* Fix vue style tag snippets, set postcss as default lang

* Modify template argument binding snippet

* Update vmodel implementations, vueuse and vue-macros

* Update various vue script snippets, add new injects

* Add new defineEmits

* chore: release v0.7.0

* Update readme

Author: matijaoe

README.md

@@ -7,7 +7,7 @@
 ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
 
 ## Features
-- Only the latest Vue syntax (including [Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html))
+- Only the latest Vue syntax
 - Over **200** snippets 
 - TypeScript-first
 - Nuxt 3, Pinia, VueUse, Vue Router & Vue Macros support
@@ -74,7 +74,7 @@ $0
 
 <tr>
 <td><code>vbase:full</code></td>
-<td>Vue SFC with style</td>
+<td>Vue SFC with style | postcss</td>
 <td>
 
 ```html
@@ -86,7 +86,7 @@ $0
   $1
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
   
 </style>
 
@@ -96,8 +96,8 @@ $0
 </tr>
 
 <tr>
-<td><code>vbase:full:postcss</code></td>
-<td>Vue SFC with style | postcss</td>
+<td><code>vbase:full:css</code></td>
+<td>Vue SFC with style | css</td>
 <td>
 
 ```html
@@ -109,7 +109,7 @@ $0
   $1
 </template>
 
-<style style="postcss" scoped>
+<style lang="css" scoped>
   
 </style>
 
@@ -132,7 +132,7 @@ $0
   $1
 </template>
 
-<style style="scss" scoped>
+<style lang="scss" scoped>
   
 </style>
 
@@ -155,7 +155,7 @@ $0
   $1
 </template>
 
-<style style="less" scoped>
+<style lang="less" scoped>
   
 </style>
 
@@ -211,11 +211,11 @@ $0
 
 <tr>
 <td><code>vstyle</code></td>
-<td>Vue scoped style</td>
+<td>Vue scoped style | postcss</td>
 <td>
 
 ```html
-<style scoped>
+<style lang="postcss" scoped>
 $0
 </style>
 
@@ -240,12 +240,12 @@ $0
 </tr>
 
 <tr>
-<td><code>vstyle:postcss</code></td>
-<td>Vue scoped style | postcss</td>
+<td><code>vstyle:css</code></td>
+<td>Vue scoped style | css</td>
 <td>
 
 ```html
-<style lang="postcss" scoped>
+<style lang="css" scoped>
 $0
 </style>
 
@@ -663,6 +663,30 @@ v-bind="$1"
 </td>
 </tr>
 
+<tr>
+<td><code>vbind:attrs</code></td>
+<td>v-bind attrs</td>
+<td>
+
+```html
+v-bind="\$attrs"
+```
+
+</td>
+</tr>
+
+<tr>
+<td><code>vbind:props</code></td>
+<td>v-bind props</td>
+<td>
+
+```html
+v-bind="\$props"
+```
+
+</td>
+</tr>
+
 <tr>
 <td><code>vmodel</code></td>
 <td>v-model</td>
@@ -825,7 +849,7 @@ ${1|is,:is|}="$2"
 <td>
 
 ```html
-:${1:prop}="$2"
+:${1:prop}="${2:$1}"
 ```
 
 </td>
@@ -1284,6 +1308,34 @@ watch([${1:source1}, ${2:source2}], ([new${1/(.*)/${1:/capitalize}/}, new${2/(.*
 </td>
 </tr>
 
+<tr>
+<td><code>vwatch:immediate</code></td>
+<td>Vue watch immediate</td>
+<td>
+
+```javascript
+watch(${1:source}, (${2:val}) => {
+  $0
+}, { immediate: true })
+```
+
+</td>
+</tr>
+
+<tr>
+<td><code>vwatch:deep</code></td>
+<td>Vue watch deep</td>
+<td>
+
+```javascript
+watch(${1:source}, (${2:val}) => {
+  $0
+}, { deep: true })
+```
+
+</td>
+</tr>
+
 <tr>
 <td><code>vwatch:log</code></td>
 <td>Vue watch source | log</td>
@@ -1350,6 +1402,32 @@ ${1:const emit = }defineEmits<{
 </td>
 </tr>
 
+<tr>
+<td><code>vemits:new</code></td>
+<td>Vue defineEmits (new syntax)</td>
+<td>
+
+```javascript
+${1:const emit = }defineEmits<{
+  ${2:click}: [${3:payload}: ${4:string}],$5
+}>()
+```
+
+</td>
+</tr>
+
+<tr>
+<td><code>vmodel</code></td>
+<td>Vue defineModel</td>
+<td>
+
+```javascript
+const ${1:modelValue} = defineModel<${2:string}>($3)
+```
+
+</td>
+</tr>
+
 <tr>
 <td><code>vemit</code></td>
 <td>Vue emit event</td>
@@ -1508,7 +1586,19 @@ onDeactivated(() => {
 <td>
 
 ```javascript
-provide(${1:name}, ${2:value})
+provide(${1:key}, ${2:value})
+```
+
+</td>
+</tr>
+
+<tr>
+<td><code>vprovide:ts</code></td>
+<td>Vue provide (typed)</td>
+<td>
+
+```javascript
+provide<${1:string}>(${2:key}, ${3:value})
 ```
 
 </td>
@@ -1520,19 +1610,19 @@ provide(${1:name}, ${2:value})
 <td>
 
 ```javascript
-const $1 = inject(${2:key}, ${3:defaultValue})
+const ${1:value}  = inject(${2:key})
 ```
 
 </td>
 </tr>
 
 <tr>
-<td><code>vprovide:ts</code></td>
-<td>Vue provide (typed)</td>
+<td><code>vinject:default</code></td>
+<td>Vue inject with default</td>
 <td>
 
 ```javascript
-provide<${1:string}>(${2:name}, ${3:value})
+const ${1:value}  = inject(${2:key}, ${3:defaultValue})
 ```
 
 </td>
@@ -1544,7 +1634,7 @@ provide<${1:string}>(${2:name}, ${3:value})
 <td>
 
 ```javascript
-const $1 = inject<${2:string}}>(${3:key}, ${4:defaultValue})
+const ${1:value} = inject<${2:string}}>(${3:key}, ${4:defaultValue})
 ```
 
 </td>
@@ -1556,7 +1646,7 @@ const $1 = inject<${2:string}}>(${3:key}, ${4:defaultValue})
 <td>
 
 ```javascript
-const ${1:key} = Symbol() as InjectionKey<${2:string}>
+const ${1:key} = Symbol('$2') as InjectionKey<${3:string}>
 ```
 
 </td>
@@ -1653,8 +1743,8 @@ const { $2 } = use${1/(.*)/${1:/capitalize}/}($3)
 </tr>
 
 <tr>
-<td><code>vmodel</code></td>
-<td>Implement v-model</td>
+<td><code>vmodel:manual</code></td>
+<td>Implement v-model manually</td>
 <td>
 
 ```javascript
@@ -1982,7 +2072,7 @@ ${1|to,:to|}="$2"
 <td>
 
 ```javascript
-import { acceptHMRUpdate, defineStore } from 'pinia'
+import { defineStore } from 'pinia'
 
 export const use${1/(.*)/${1:/capitalize}/} = defineStore('${2:key}', () => {
   $0
@@ -1992,9 +2082,6 @@ export const use${1/(.*)/${1:/capitalize}/} = defineStore('${2:key}', () => {
   }
 })
 
-if (import.meta.hot)
-  import.meta.hot.accept(acceptHMRUpdate(use${1/(.*)/${1:/capitalize}/}, import.meta.hot))
-
 ```
 
 </td>
@@ -2006,7 +2093,7 @@ if (import.meta.hot)
 <td>
 
 ```javascript
-import { acceptHMRUpdate, defineStore } from 'pinia'
+import { defineStore } from 'pinia'
 
 export const use${1/(.*)/${1:/capitalize}/} = defineStore('${2:key}', {
   state: () => ({
@@ -2020,9 +2107,6 @@ export const use${1/(.*)/${1:/capitalize}/} = defineStore('${2:key}', {
   },
 })
 
-if (import.meta.hot)
-  import.meta.hot.accept(acceptHMRUpdate(use$1, import.meta.hot))
-
 ```
 
 </td>
@@ -2923,15 +3007,19 @@ whenever(${1:source}, (${2:val}) => {
 <td>
 
 ```javascript
-const props = defineProps<{
-  ${1:modelValue}: ${2:string}
-}>()
+const ${2:value} = useVModel(props, '${1:modelValue}', emit)
+```
 
-const emit = defineEmits<{
-  (e: 'update:$1', ${3:value}?: $2): void
-}>()
+</td>
+</tr>
+
+<tr>
+<td><code>vuse:vmodels</code></td>
+<td>Implement v-model using useVModels</td>
+<td>
 
-const ${4:value} = useVModel(props, '$1', emit)
+```javascript
+const { ${1:modelValue}$2 } = useVModels(props, emit)
 ```
 
 </td>
@@ -3035,12 +3123,12 @@ const toggle${2/(.*)/${1:/capitalize}/} = useToggle($1)
 </tr>
 
 <tr>
-<td><code>vdefineModel</code> / <code>vmacro:model</code></td>
-<td>Define model</td>
+<td><code>vdefineModels</code> / <code>vmacro:model</code></td>
+<td>Define models</td>
 <td>
 
 ```javascript
-const { modelValue$2 } = defineModel<{
+const { modelValue$2 } = defineModels<{
   modelValue: ${1:string}
 }>()
 ```