+ Minor update.

 - Remove fragment
 - Update HTML attribute detection.

Author: LancerComet

README.md

@@ -39,7 +39,7 @@ Update your `tsconfig.json` with:
 }
 ```
 
-> The reason why "jsx" should be set to "react-jsx" is this plugin matches the new JSX transform.
+> The reason why "jsx" should be set to "react-jsx" is this plugin has to meet the new JSX transform.
 
 ### SWC
 
@@ -80,10 +80,10 @@ Please read the section below.
 
 ```tsx
 // In setup.
-<button diabled={isDisabledRef.value}>Wow such a button</button>
+<button disabled={isDisabledRef.value}>Wow such a button</button>
 
 // In render function.
-<button diabled='isDisable'>Very button</button>
+<button disabled={this.isDisable}>Very button</button>
 ```
 
 ### On
@@ -108,6 +108,12 @@ Please read the section below.
 
 Native is only available for Vue components.
 
+### Rendering HTMl
+
+```tsx
+<div innerHTML={'<h1>Title</h1>'}></div>
+```
+
 ### HTML / Component ref
 
 ```tsx
@@ -138,7 +144,7 @@ const Wrapper = defineComponent({
 })
 ```
 
-Due to limitations, using ref is a little different form to Vue 3.
+Due to limitations, using ref is a little different from to Vue 3.
 
 You can check [this](https://github.com/vuejs/composition-api#limitations) out for more information.
 
@@ -314,30 +320,6 @@ If you want to disable this behavior, add `direct` modifier:
 <input v-model={userInputRef} >
 ```
 
-### Fragment (experimental)
-
-Vue 2 doesn't come with fragment support so this feature is supported by [vue-fragment](https://github.com/Thunberg087/vue-fragment) under the hood:
-
-```tsx
-<div>
-  <>
-    <h1>Wow such a fragment</h1>
-    <small>I can smell it</small>
-  </>
-</div>
-```
-
-This will be rendered as
-
-```html
-<div>
-  <!--fragment#head-->
-  <h1>Wow such a fragment</h1>
-  <small>I can smell it</small>
-  <!--fragment#tail-->
-</div>
-```
-
 ## Compatibility
 
 These format below are also available, but they are NOT recommended, just for compatibility.

lib/jsx.ts

@@ -5,7 +5,7 @@ import {
   checkKeyIsNativeOn,
   checkKeyIsChildren,
   checkKeyIsClass,
-  checkKeyIsDomProps,
+  checkKeyIsHtmlAttr,
   checkKeyIsKey,
   checkKeyIsOnEvent,
   checkKeyIsOnObject,
@@ -18,7 +18,6 @@ import {
   removeNativeOn,
   removeOn, checkKeyIsRef
 } from './utils'
-import { Fragment } from './modules/fragment'
 import { dealWithVModel } from './modules/v-model'
 import { dealWithDirective } from './modules/directive'
 import { ConfigType, TagType } from './type'
@@ -42,15 +41,6 @@ const jsx = function (
     on: {}
   }
 
-  const isFragment = isUndefined(tag) && config.children
-  if (isFragment) {
-    return h(
-      Fragment,
-      vNodeData,
-      isArray(config.children) ? config.children : [config.children]
-    )
-  }
-
   // I treat every lowercase string as HTML element.
   // Because in JSX Vue component should be (Upper) CamelCase named.
   const isHTMLElement = checkIsHTMLElement(tag)
@@ -82,17 +72,13 @@ const jsx = function (
       continue
     }
 
-    if (checkKeyIsDomProps(key) && isHTMLElement) {
-      vNodeData.domProps[key] = value
-      continue
-    }
-
     // on.
     if (checkKeyIsOnObject(key)) {
       vNodeData.on = value
       continue
     }
 
+    // onXX:native
     if (checkKeyIsNativeOn(key) && !isHTMLElement) {
       const _key = removeNativeOn(key)
       vNodeData.nativeOn = vNodeData.nativeOn || {}
@@ -125,6 +111,7 @@ const jsx = function (
       continue
     }
 
+    // ref.
     if (checkKeyIsRef(key)) {
       vNodeData.ref = value
       continue
@@ -142,13 +129,17 @@ const jsx = function (
     }
 
     if (isHTMLElement) {
-      vNodeData.attrs[key] = value
+      if (checkKeyIsHtmlAttr(key)) {
+        vNodeData.attrs[key] = value
+      } else {
+        vNodeData.domProps[key] = value
+      }
     } else {
       vNodeData.props[key] = value
     }
   }
 
-  // Check is JSXS function.
+  // Check if it is JSXS function.
   const isJsxsFunc = typeof tag === 'function' && isUndefined((tag as any).cid)
   if (isJsxsFunc) {
     return h({

lib/modules/fragment.ts

@@ -1,10 +1,24 @@
 import { camelCase } from 'change-case'
 
-const domProps = [
-  'value', 'defaultValue',
-  'innerHTML', 'innerText', 'textContent',
-  'src', 'checked'
-]
+// https://github.com/vuejs/vue/blob/0603ff695d2f41286239298210113cbe2b209e28/src/platforms/web/server/util.js#L5
+// Difference:
+// + role
+// - id
+const htmlAttrList = (
+  'accept,accept-charset,accesskey,action,align,alt,async,autocomplete,' +
+  'autofocus,autoplay,autosave,bgcolor,border,buffered,challenge,charset,' +
+  'checked,cite,class,code,codebase,color,cols,colspan,content,' +
+  'contenteditable,contextmenu,controls,coords,data,datetime,default,' +
+  'defer,dir,dirname,disabled,download,draggable,dropzone,enctype,for,' +
+  'form,formaction,headers,height,hidden,high,href,hreflang,http-equiv,' +
+  'icon,ismap,itemprop,keytype,kind,label,lang,language,list,loop,low,' +
+  'manifest,max,maxlength,media,method,GET,POST,min,multiple,email,file,' +
+  'muted,name,novalidate,open,optimum,pattern,ping,placeholder,poster,' +
+  'preload,radiogroup,readonly,rel,required,reversed,role,rows,rowspan,sandbox,' +
+  'scope,scoped,seamless,selected,shape,size,type,text,password,sizes,span,' +
+  'spellcheck,src,srcdoc,srclang,srcset,start,step,style,summary,tabindex,' +
+  'target,title,usemap,value,width,wrap'
+).split(',')
 
 const ON_EVENT_REGEXP = /^((v(-o|O)n:)|on)/
 const HTML_TAG_REGEXP = /^[\da-z]+$/
@@ -23,7 +37,7 @@ const checkIsHTMLElement = (tag: unknown) => isString(tag) && HTML_TAG_REGEXP.te
 const checkKeyIsClass = (key: string) => key === 'class'
 const checkKeyIsChildren = (key: string) => key === 'children'
 const checkKeyIsStyle = (key: string) => key === 'style'
-const checkKeyIsDomProps = (key: string) => domProps.includes(key)
+const checkKeyIsHtmlAttr = (key: string) => htmlAttrList.includes(key) || key.indexOf('data-') === 0 || key.indexOf('aria-') === 0
 const checkKeyIsOnEvent = (key: string) => ON_EVENT_REGEXP.test(key)
 const checkKeyIsOnObject = (key: string) => key === 'on'
 const checkKeyIsSlot = (key: string) => key === 'slot'
@@ -63,7 +77,7 @@ export {
   checkKeyIsClass,
   checkKeyIsChildren,
   checkKeyIsStyle,
-  checkKeyIsDomProps,
+  checkKeyIsHtmlAttr,
   checkKeyIsOnEvent,
   checkKeyIsOnObject,
   checkKeyIsSlot,

lib/utils.ts

@@ -16,7 +16,7 @@ describe('HTML testing.', () => {
         )
       }
     })
-    expect(wrapper.html()).toBe('<div id="an-id" data-type="element" aria-label="label" role="button" class="this-is-class"></div>')
+    expect(wrapper.html()).toBe('<div data-type="element" aria-label="label" role="button" class="this-is-class" id="an-id"></div>')
   })
 
   it('It should deal with reactive attrs.', done => {
@@ -32,15 +32,15 @@ describe('HTML testing.', () => {
           contentRef.value = 'Doge II'
 
           nextTick(() => {
-            expect(wrapper.html()).toBe('<div id="id-1" data-id="id-1" class="static class-1">Doge II</div>')
+            expect(wrapper.html()).toBe('<div data-id="id-1" class="static class-1" id="id-1">Doge II</div>')
             done()
           })
         }
 
         const check = () => {
           // Wait wrapper is initialized.
           setTimeout(() => {
-            expect(wrapper.html()).toBe('<div id="id-0" data-id="id-0" class="static class-0">Doge</div>')
+            expect(wrapper.html()).toBe('<div data-id="id-0" class="static class-0" id="id-0">Doge</div>')
             increase()
           }, 500)
         }