+ Minor update

 - Add transition (group) support.
 - Update key support.

Author: LancerComet

README.md

@@ -414,6 +414,61 @@ If you want to disable this behavior, add `direct` modifier:
 <input v-model={userInputRef} >
 ```
 
+### Key
+
+Because `key` has been deprecated in new JSX transform, we have to use `v-bind:key` instead:
+
+```tsx
+<TransitionGroup>{
+  userList.map(item => (
+    <div v-bind:key={item.id}>{item.name}</div>
+  ))
+}</TransitionGroup>
+```
+
+Please [check it out](https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md) for more information.
+
+### Transition / TransitionGroup
+
+```tsx
+import Vue from 'vue'
+
+const Transition = Vue.component('Transition')
+const TransitionGroup = Vue.component('TransitionGroup')
+
+setup () {
+  return () => (
+    <div>
+      <TransitionGroup>
+        <div v-bind:key='key-1'>Some element</div>
+        <div v-bind:key='key-2'>Some element</div>
+      </TransitionGroup>
+      <Transition>
+        <div>Some element</div>
+      </Transition>
+    </div>
+  )
+}
+```
+
+or
+
+```tsx
+setup () {
+  return () => (
+    <div>
+      <transition-group>
+        <div v-bind:key='key-1'>Some element</div>
+        <div v-bind:key='key-2'>Some element</div>
+      </transition-group>
+      <transition>
+        <div>Some element</div>
+      </transition>
+    </div>
+  )
+}
+```
+
 ## Compatibility
 
 These format below are also available, but they are NOT recommended, just for compatibility.
@@ -431,6 +486,13 @@ These format below are also available, but they are NOT recommended, just for co
 <input vModel={userInpuptRef.value} />
 ```
 
+### Key
+
+```tsx
+<div v-bind:key='key-1' />
+<div vBind:key='key-1' />
+```
+
 ## For Vite users
 
 For Vite users, it's better to use TSC or SWC instead of built-in ESBuild. Because ESBuild is very finicky at handling JSX for now, and it gives you no room to change its behavior.

lib/jsx.ts

@@ -39,6 +39,13 @@ const jsx = function (
     on: {}
   }
 
+  // Support for using <transition> and <transition-group>.
+  if (tag === 'transition') {
+    tag = 'Transition'
+  } else if (tag === 'transition-group') {
+    tag = 'TransitionGroup'
+  }
+
   // I treat every lowercase string as HTML element.
   // Because in JSX Vue component should be (Upper) CamelCase named.
   const isHTMLElement = checkIsHTMLElement(tag)
@@ -52,6 +59,9 @@ const jsx = function (
 
     const value = config[key]
 
+    // Because of 'key' is deprecated in new JSX transform,
+    // we gonna use 'v-key' or 'vKey' instead.
+    // https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#deprecate-spreading-key-from-objects
     if (checkKeyIsKey(key)) {
       vNodeData.key = value
       continue

lib/utils.ts

@@ -19,6 +19,8 @@ const domPropsList = 'accept,accesskey,action,align,alt,async,autocomplete,' +
 const ON_EVENT_REGEXP = /^((v(-o|O)n:)|on)/
 const HTML_TAG_REGEXP = /^[\da-z]+$/
 const NATIVE_ON_REGEXP = /:native$/
+const KEY_REGEXP = /^v(-b|B)ind:key$/
+const VUE_DIRECTIVE_REGEXP = /^v(-|[A-Z])/
 
 const isArray = (target: unknown): target is any[] => Array.isArray(target)
 const isBoolean = (target: unknown): target is boolean => typeof target === 'symbol'
@@ -38,9 +40,9 @@ const checkKeyIsOnEvent = (key: string) => ON_EVENT_REGEXP.test(key)
 const checkKeyIsOnObject = (key: string) => key === 'on'
 const checkKeyIsSlot = (key: string) => key === 'slot'
 const checkKeyIsScopedSlots = (key: string) => key === 'scopedSlots'
-const checkKeyIsKey = (key: string) => key === 'key'
+const checkKeyIsKey = (key: string) => KEY_REGEXP.test(key)
 const checkKeyIsNativeOn = (key: string) => NATIVE_ON_REGEXP.test(key)
-const checkKeyIsVueDirective = (key: string) => /^v(-|[A-Z])/.test(key)
+const checkKeyIsVueDirective = (key: string) => VUE_DIRECTIVE_REGEXP.test(key)
 const checkKeyIsRef = (key: string) => key === 'ref'
 
 // The reason why I don't use "isRef" which is provided by @vue/composition-api is that