+ Update domProps detection.

Author: LancerComet

README.md

@@ -70,7 +70,7 @@ And in `.swcrc`:
 }
 ```
 
-### Vite (with SWC for example)
+### Vite
 
 Please read the section below.
 
@@ -437,7 +437,7 @@ For Vite users, it's better to use TSC or SWC instead of built-in ESBuild. Becau
 
 For faster compilation, SWC is recommended. You can use [unplugin-swc](https://github.com/egoist/unplugin-swc) to make Vite uses SWC.
 
-Once you have switched to SWC (TSC) from ESBuild, you will not only be able to use this package, but also get more features like `emitDecoratorMetadata` which is not supported by ESBuild, and the whole process is still darn fast.
+Once you have switched to SWC (TSC) from ESBuild, you will not only be able to use JSX, but also get more features like `emitDecoratorMetadata` which is not supported by ESBuild, and the whole process is still darn fast.
 
 ### Configuration
 

lib/directives/v-model.ts

@@ -1,4 +1,4 @@
-import { checkIsInputOrTextarea, checkIsRefObj, isArray, isString, isUndefined } from '../utils'
+import { checkIsRefObj, isArray, isString, isUndefined } from '../utils'
 import type { Ref } from '@vue/composition-api'
 import type { VNodeData } from 'vue'
 import { ConfigType, TagType } from '../type'
@@ -35,27 +35,34 @@ const dealWithVModel = (
     }
   }
 
-  if (checkIsInputOrTextarea(tag)) {
-    const isInput = tag === 'input'
-    const inputType = config.type // 'file', 'text', 'number', .ect.
+  const instance = getCurrentInstance()
 
-    // Skip unsupported input.
-    const isSkippedInput = /button|submit|reset/.test(inputType)
-    if (isSkippedInput) {
-      return
+  if (tag === 'select') {
+    vNodeData.domProps.value = isString(bindingTarget)
+      ? instance[bindingTarget]
+      : bindingTarget.value
+    vNodeData.on.change = (event: Event) => {
+      const target = event.target as HTMLSelectElement
+      if (isString(bindingTarget)) {
+        instance[bindingTarget] = target.value
+      } else {
+        bindingTarget.value = target.value
+      }
     }
+    return
+  }
 
-    const instance = getCurrentInstance()
+  if (tag === 'input') {
+    const inputType = config.type // 'file', 'text', 'number', .ect.
 
-    // File.
-    const isFileInput = isInput && inputType === 'file'
-    if (isFileInput) {
-      // TODO: ...
+    // Skip unsupported input.
+    const isSkippedInput = /button|file|submit|reset/.test(inputType)
+    if (isSkippedInput) {
       return
     }
 
     // Radio.
-    const isRadioInput = isInput && inputType === 'radio'
+    const isRadioInput = inputType === 'radio'
     if (isRadioInput) {
       vNodeData.domProps.checked = isString(bindingTarget)
         ? instance[bindingTarget] === config.value
@@ -72,7 +79,7 @@ const dealWithVModel = (
     }
 
     // Checkbox.
-    const isCheckboxInput = isInput && inputType === 'checkbox'
+    const isCheckboxInput = inputType === 'checkbox'
     if (isCheckboxInput) {
       const arrayBindingExec = (bindingArr: unknown[]) => {
         vNodeData.domProps.checked = bindingArr.includes(config.value)
@@ -121,8 +128,10 @@ const dealWithVModel = (
       }
       return
     }
+  }
 
-    // Others are treated as text fields.
+  // Others are treated as text fields.
+  if (tag === 'input' || tag === 'textarea') {
     const isDirectInput = modifiers.includes('direct')
     const isLazyInput = modifiers.includes('lazy')
     const emitValue = (value: string) => {
@@ -147,7 +156,7 @@ const dealWithVModel = (
       : bindingTarget.value
     vNodeData.on.input = (event: Event) => {
       if (
-        modifiers.includes('lazy') ||
+        isLazyInput ||
         (!isDirectInput && vNodeData.attrs[IME_START_KEY])
       ) {
         return

lib/jsx.ts

@@ -5,7 +5,7 @@ import {
   checkKeyIsNativeOn,
   checkKeyIsChildren,
   checkKeyIsClass,
-  checkKeyIsHtmlAttr,
+  checkKeyIsDomProp,
   checkKeyIsKey,
   checkKeyIsOnEvent,
   checkKeyIsOnObject,
@@ -121,10 +121,10 @@ const jsx = function (
     }
 
     if (isHTMLElement) {
-      if (checkKeyIsHtmlAttr(key)) {
-        vNodeData.attrs[key] = value
-      } else {
+      if (checkKeyIsDomProp(key)) {
         vNodeData.domProps[key] = value
+      } else {
+        vNodeData.attrs[key] = value
       }
     } else {
       vNodeData.props[key] = value

lib/utils.ts

@@ -1,24 +1,20 @@
 import { camelCase } from 'change-case'
 
 // 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,' +
+const domPropsList = 'accept,accesskey,action,align,alt,async,autocomplete,' +
   'autofocus,autoplay,autosave,bgcolor,border,buffered,challenge,charset,' +
-  'checked,cite,class,code,codebase,color,cols,colspan,content,' +
+  'checked,cite,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,' +
+  'form,formaction,headers,height,hidden,high,href,hreflang,' +
+  'icon,id,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,' +
+  'preload,radiogroup,readonly,rel,required,reversed,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(',')
+  'target,title,usemap,value,width,wrap,' +
+  'className,classList,innerHTML,innerText,outerHTML,outerText,textContent'.split(',')
 
 const ON_EVENT_REGEXP = /^((v(-o|O)n:)|on)/
 const HTML_TAG_REGEXP = /^[\da-z]+$/
@@ -37,7 +33,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 checkKeyIsHtmlAttr = (key: string) => htmlAttrList.includes(key) || key.indexOf('data-') === 0 || key.indexOf('aria-') === 0
+const checkKeyIsDomProp = (key: string) => domPropsList.includes(key)
 const checkKeyIsOnEvent = (key: string) => ON_EVENT_REGEXP.test(key)
 const checkKeyIsOnObject = (key: string) => key === 'on'
 const checkKeyIsSlot = (key: string) => key === 'slot'
@@ -46,7 +42,6 @@ const checkKeyIsKey = (key: string) => key === 'key'
 const checkKeyIsNativeOn = (key: string) => NATIVE_ON_REGEXP.test(key)
 const checkKeyIsVueDirective = (key: string) => /^v(-|[A-Z])/.test(key)
 const checkKeyIsRef = (key: string) => key === 'ref'
-const checkIsInputOrTextarea = (target: unknown): target is 'input' | 'textarea' => target === 'input' || target === 'textarea'
 
 // The reason why I don't use "isRef" which is provided by @vue/composition-api is that
 // this function will be broken under SWC.
@@ -76,7 +71,7 @@ export {
   checkKeyIsClass,
   checkKeyIsChildren,
   checkKeyIsStyle,
-  checkKeyIsHtmlAttr,
+  checkKeyIsDomProp,
   checkKeyIsOnEvent,
   checkKeyIsOnObject,
   checkKeyIsSlot,
@@ -87,7 +82,6 @@ export {
   checkIsRefObj,
 
   checkKeyIsVueDirective,
-  checkIsInputOrTextarea,
 
   removeOn,
   removeNativeOn