feat: devtools support stateless component

packages/nerv-devtools/src/devtools.ts

@@ -27,16 +27,18 @@ function createReactElement (component) {
  * @param {Node} node
  */
 function createReactDOMComponent (node) {
-  const childNodes = node.nodeType === Node.ELEMENT_NODE ?
-    Array.from(node.childNodes) : []
+  const childNodes =
+    node.nodeType === Node.ELEMENT_NODE ? Array.from(node.childNodes) : []
   const isText = node.nodeType === Node.TEXT_NODE
 
   return {
     // --- ReactDOMComponent interface
-    _currentElement: isText ? node.textContent : {
-      type: node.nodeName.toLowerCase(),
-      props: node._props
-    },
+    _currentElement: isText
+      ? node.textContent
+      : {
+          type: node.nodeName.toLowerCase(),
+          props: node._props
+        },
     _renderedChildren: childNodes.map((child: any) => {
       if (child._component) {
         return updateReactComponent(child._component)
@@ -80,7 +82,7 @@ function typeName (element) {
  */
 function createReactCompositeComponent (vnode) {
   const _currentElement = createReactElement(vnode)
-  const node = vnode.dom || vnode.component.dom
+  const node = vnode.component.dom || vnode.dom
 
   const instance: any = {
     // --- ReactDOMComponent properties
@@ -130,9 +132,10 @@ const instanceMap = new Map()
  * @param {Component|Node} componentOrNode
  */
 function updateReactComponent (componentOrNode) {
-  const newInstance = componentOrNode instanceof Node ?
-    createReactDOMComponent(componentOrNode) :
-    createReactCompositeComponent(componentOrNode)
+  const newInstance =
+    componentOrNode instanceof Node
+      ? createReactDOMComponent(componentOrNode)
+      : createReactCompositeComponent(componentOrNode)
   if (instanceMap.has(componentOrNode)) {
     const inst = instanceMap.get(componentOrNode)
     Object.assign(inst, newInstance)
@@ -218,7 +221,7 @@ function createDevToolsBridge () {
     // Stub - React DevTools expects to find this method and replace it
     // with a wrapper in order to observe new root components being added
     // tslint:disable-next-line:no-empty
-    _renderNewRootComponent (/* instance, ... */) { }
+    _renderNewRootComponent (/* instance, ... */) {}
   }
 
   // ReactReconciler-like object
@@ -227,17 +230,18 @@ function createDevToolsBridge () {
     // with wrappers in order to observe components being mounted, updated and
     // unmounted
     // tslint:disable-next-line:no-empty
-    mountComponent (/* instance, ... */) { },
+    mountComponent (/* instance, ... */) {},
     // tslint:disable-next-line:no-empty
-    performUpdateIfNecessary (/* instance, ... */) { },
+    performUpdateIfNecessary (/* instance, ... */) {},
     // tslint:disable-next-line:no-empty
-    receiveComponent (/* instance, ... */) { },
+    receiveComponent (/* instance, ... */) {},
     // tslint:disable-next-line:no-empty
-    unmountComponent (/* instance, ... */) { }
+    unmountComponent (/* instance, ... */) {}
   }
 
   /** Notify devtools that a new component instance has been mounted into the DOM. */
-  const componentAdded = ({ component, _owner }) => {
+  const componentAdded = (vnode) => {
+    const { component, _owner } = vnode
     const instance = updateReactComponent(component)
     // if is root component
     if (_owner === null) {

packages/nerv/src/lifecycle.ts

@@ -7,7 +7,6 @@ import patch from './vdom/patch'
 import { isVNode, Component, isNullOrUndef, CompositeComponent, isComponent } from 'nerv-shared'
 import FullComponent from './full-component'
 import Stateless from './stateless-component'
-import options from './options'
 import { unmount } from './vdom/unmount'
 import Ref from './vdom/ref'
 
@@ -77,7 +76,6 @@ export function mountComponent (vnode: FullComponent, parentContext: object, par
     component
   ) as Element)
   component._disable = false
-  options.afterMount(vnode)
   return dom
 }
 
@@ -213,13 +211,11 @@ export function updateComponent (component, isForce = false) {
       component._pendingCallbacks.pop().call(component)
     }
   }
-  options.afterUpdate(component)
   flushMount()
 }
 
 export function unmountComponent (vnode: FullComponent) {
   const component = vnode.component
-  options.beforeUnmount(component)
   if (isFunction(component.componentWillUnmount)) {
     errorCatcher(() => {
       (component as any).componentWillUnmount()

packages/nerv/src/options.ts

@@ -1,8 +1,11 @@
-import { noop } from 'nerv-shared'
+import { noop, CompositeComponent, StatelessComponent } from 'nerv-shared'
+
+type optionsHook = (vnode: CompositeComponent | StatelessComponent) => void
+
 const options: {
-  afterMount: Function
-  afterUpdate: Function
-  beforeUnmount: Function
+  afterMount: optionsHook
+  afterUpdate: optionsHook
+  beforeUnmount: optionsHook
   roots: Object,
   debug: boolean
 } = {

packages/nerv/src/vdom/create-element.ts

@@ -11,6 +11,7 @@ import {
 } from 'nerv-shared'
 import { patchProp } from './patch'
 import Ref from './ref'
+import options from '../options'
 
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'
 
@@ -26,6 +27,7 @@ function createElement (
     const vtype = vnode.vtype
     if (vtype & (VType.Composite | VType.Stateless)) {
       domNode = (vnode as CompositeComponent).init(parentContext, parentComponent)
+      options.afterMount(vnode as CompositeComponent)
     } else if (vtype & VType.Text) {
       domNode = doc.createTextNode((vnode as any).text);
       (vnode as any).dom = domNode

packages/nerv/src/vdom/patch.ts

@@ -22,6 +22,7 @@ import { unmount, unmountChildren } from './unmount'
 import Ref from './ref'
 import { attachEvent, detachEvent } from '../event'
 import SVGPropertyConfig from './svg-property-config'
+import options from '../options'
 
 export function patch (
   lastVnode,
@@ -55,6 +56,7 @@ export function patch (
       newDom = lastDom
     } else if (isWidget(nextVnode)) {
       newDom = nextVnode.update(lastVnode, nextVnode, context, lastDom)
+      options.afterUpdate(nextVnode)
     }
     (nextVnode as any).dom = newDom
   } else {

packages/nerv/src/vdom/unmount.ts

@@ -2,6 +2,7 @@ import { isNullOrUndef, isInvalid, VType, VirtualChildren } from 'nerv-shared'
 import { isAttrAnEvent, isArray } from 'nerv-utils'
 import Ref from './ref'
 import { detachEvent } from '../event'
+import options from '../options'
 
 export function unmountChildren (
   children: VirtualChildren,
@@ -26,6 +27,7 @@ export function unmount (vnode, parentDom?) {
   const dom = vtype & VType.Composite ? vnode.component.dom : vnode.dom
 
   if ((vtype & (VType.Composite | VType.Stateless)) > 0) {
+    options.beforeUnmount(vnode)
     vnode.destroy()
   } else if ((vtype & VType.Node) > 0) {
     const { props, children, ref } = vnode