feat(omi): Function component is supported! 🎉

Author: dntzhang

packages/omi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omi",
-  "version": "7.4.6",
+  "version": "7.5.0",
   "scripts": {
     "start": "vite",
     "dev-vite": "vite",

packages/omi/src/diff.ts

@@ -144,9 +144,9 @@ function idiff(
   }
 
   let vnodeName = vnode.nodeName
-  if (typeof vnodeName !== 'string') {
-    vnodeName = (vnodeName as Component).tagName
-  }
+  // if (typeof vnodeName !== 'string') {
+  //   vnodeName = (vnodeName as Component).tagName
+  // }
 
   // Tracks entering and exiting SVG namespace when descending through the tree.
   isForeignObject = vnodeName === 'foreignObject'

packages/omi/src/index.ts

@@ -18,4 +18,4 @@ export { Signal } from './signal'
 export { css } from './css-tag'
 export { mixin } from './options'
 export { registerDirective } from './directive'
-export const version = '7.4.6'
+export const version = '7.5.0'

packages/omi/src/utils.ts

@@ -111,11 +111,8 @@ export function isSameNodeType(node: ExtendedElement, vnode: VNode): boolean {
   if (typeof vnode === 'string' || typeof vnode === 'number') {
     return node.splitText !== undefined
   }
-  const nodeName = (vnode as ObjectVNode).nodeName
-  return isNamedNode(
-    node,
-    typeof nodeName !== 'string' ? (nodeName as Component).tagName : nodeName,
-  )
+
+  return isNamedNode(node, (vnode as ObjectVNode).nodeName as string)
 }
 
 /**

packages/omi/src/vdom.ts

@@ -71,8 +71,17 @@ export function createElement(
     }
   }
 
+  // fragment component
   if (nodeName === Fragment) {
     return children
+  } else if (typeof nodeName === 'function') {
+    if ((nodeName as unknown as Component).tagName) {
+      // class component
+      nodeName = (nodeName as unknown as Component).tagName
+    } else {
+      // function component
+      return nodeName(attributes)
+    }
   }
 
   const p: VNode = {

packages/omi/test/base.test.jsx

@@ -441,4 +441,28 @@ describe('base', () => {
     expect(parentElement.firstChild.shadowRoot.firstChild.firstChild.shadowRoot.innerHTML).toBe('<span>a</span>')
 
   })
+
+  it('rendering function', () => {
+
+    function ChildComponent(props) {
+      return (
+        <span>{props.msg}</span>
+      )
+    }
+
+    class ParentComponent extends Component {
+      render() {
+        return (
+          <div>
+            <ChildComponent msg="omi" />
+          </div>
+        )
+      }
+    }
+    let node = genNode()
+    define(node.name, ParentComponent)
+    render(<ParentComponent />, parentElement)
+    expect(parentElement.firstChild.shadowRoot.firstChild.innerHTML).toBe('<span>omi</span>')
+
+  })
 })