Add attrs support (#16)

* Add attrs support (#15)

Co-authored-by: yuanjunkai <[email protected]>

* + Add unit testing for attrs.

For merge request #15.
For Vue attrs, please read: https://github.com/vuejs/jsx-vue2#attributesprops

---------

Co-authored-by: DLillard0 <[email protected]>
Co-authored-by: yuanjunkai <[email protected]>

Author: 3 people

lib/jsx.ts

@@ -18,7 +18,8 @@ import {
   removeNativeOn,
   removeOn,
   checkKeyIsRef,
-  checkKeyIsRefInFor
+  checkKeyIsRefInFor,
+  checkKeyIsAttrs
 } from './utils'
 import { dealWithDirective } from './directives'
 import { ConfigType, TagType } from './type'
@@ -56,6 +57,15 @@ const jsx = function (
 
   const attrKeys = Object.keys(config)
   for (let key of attrKeys) {
+    // attrs
+    if (checkKeyIsAttrs(key)) {
+      Object.keys(config[key]).forEach(k => {
+        config[k] = config[key][k]
+        attrKeys.push(k)
+      })
+      continue
+    }
+
     // Children shouldn't be set in vNodeData.
     if (checkKeyIsChildren(key)) {
       continue

lib/utils.ts

@@ -45,6 +45,7 @@ const checkKeyIsNativeOn = (key: string) => NATIVE_ON_REGEXP.test(key)
 const checkKeyIsVueDirective = (key: string) => VUE_DIRECTIVE_REGEXP.test(key)
 const checkKeyIsRef = (key: string) => key === 'ref'
 const checkKeyIsRefInFor = (key: string) => key === 'refInFor'
+const checkKeyIsAttrs = (key: string) => key === 'attrs'
 
 // The reason why I don't use "isRef" which is provided by @vue/composition-api is that
 // this function will be broken under SWC.
@@ -117,6 +118,7 @@ export {
   checkKeyIsRef,
   checkIsRefObj,
   checkKeyIsRefInFor,
+  checkKeyIsAttrs,
 
   checkKeyIsVueDirective,
 

test/attrs.spec.tsx

@@ -62,6 +62,22 @@ describe('HTML testing.', () => {
 
     const wrapper = shallowMount(Comp)
   })
+
+  it('Should support attr spread operator.', () => {
+    const wrapper = shallowMount({
+      setup () {
+        const attrs = {
+          type: 'email',
+          placeholder: 'Enter your email'
+        }
+
+        return () => (
+          <input { ...{ attrs } } />
+        )
+      }
+    })
+    expect(wrapper.html()).toBe('<input type="email" placeholder="Enter your email">')
+  })
 })
 
 describe('Vue component testing.', () => {