TypeScript nerv-shared.isComposite函數代碼示例

function getKeyForVNode (vnode) {
  if (isComposite(vnode)) {
    return vnode.component
  } else if (isStateless(vnode)) {
    return vnode.type
  } else if (vnode && vnode.vtype) {
    return vnode.dom
  }
}

function findVNodeFromDom (vnode, dom) {
  if (!vnode) {
    const roots = options.roots
    for (let i = 0, len = roots.length; i < len; i++) {
      const root = roots[i]
      const result = findVNodeFromDom(root, dom)

      if (result) {
        return result
      }
    }
  } else {
    if (
      vnode.dom === dom ||
      (isComposite(vnode) && vnode.component.dom === dom)
    ) {
      return vnode
    }
    if (isWidget(vnode)) {
      const children = vnode._rendered
      if (children) {
        if (isArray(children)) {
          children.forEach((child) => {
            if (child) {
              const result = findVNodeFromDom(child, dom)
              if (result) {
                return result
              }
            }
          })
        } else {
          const result = findVNodeFromDom(children, dom)
          if (result) {
            return result
          }
        }
      }
    }
  }
}

/**
 * Return a ReactCompositeComponent-compatible object for a given Nerv
 * component instance.
 *
 * This implements the subset of the ReactCompositeComponent interface that
 * the DevTools requires in order to walk the component tree and inspect the
 * component's properties.
 *
 * See https://github.com/facebook/react-devtools/blob/e31ec5825342eda570acfc9bcb43a44258fceb28/backend/getData.js
 */
function createReactCompositeComponent (vnode) {
  const isCompositeComponent = isComposite(vnode)
  const _currentElement = createReactElement(vnode)
  const component = isCompositeComponent ? vnode.component : vnode
  const node = component.dom

  const instance: any = {
    // --- ReactDOMComponent properties
    getName () {
      return typeName(_currentElement)
    },
    _currentElement,
    props: normalizeProps(component.props),
    state: component.state,
    forceUpdate: component.forceUpdate && component.forceUpdate.bind(component),
    setState: component.setState && component.setState.bind(component),

    // --- Additional properties used by Nerv devtools
    node,
    vnode
  }

  // React DevTools exposes the `_instance` field of the selected item in the
  // component tree as `$r` in the console.  `_instance` must refer to a
  // React Component (or compatible) class instance with `props` and `state`
  // fields and `setState()`, `forceUpdate()` methods.
  instance._instance = component

  // If the root node returned by this component instance's render function
  // was itself a composite component, there will be a `_component` property
  // containing the child component instance.
  // Otherwise, if the render() function returned an HTML/SVG element,
  // create a ReactDOMComponent-like object for the DOM node itself.
  instance._renderedComponent = updateReactComponent(component._rendered)
  return instance
}

import { isComposite } from 'nerv-shared'

export default {
  update (lastVnode, nextVnode, domNode?) {
    const prevRef = lastVnode != null && lastVnode.props.ref
    const nextRef = nextVnode != null && nextVnode.props.ref

    if (prevRef !== nextRef) {
      if (!isFunction(prevRef) || !isFunction(nextRef)) {
        this.detach(lastVnode, prevRef, lastVnode.dom)
      }
      this.attach(nextVnode, nextRef, domNode)
    }
  },
  attach (vnode, ref, domNode: Element) {
    const node = isComposite(vnode) ? vnode.component : domNode
    if (isFunction(ref)) {
      ref(node)
    } else if (isString(ref)) {
      const inst = vnode._owner
      if (inst && isFunction(inst.render)) {
        inst.refs[ref] = node
      }
    }
  },
  detach (vnode, ref, domNode: Element) {
    const node = isComposite(vnode) ? vnode.component : domNode
    if (isFunction(ref)) {
      ref(null)
    } else if (isString(ref)) {
      const inst = vnode._owner

function renderVNodeToString (vnode, parent, context, isSvg?: boolean) {
  if (isInvalid(vnode)) {
    return ''
  }
  const { type, props, children } = vnode
  if (isVText(vnode)) {
    return encodeEntities(vnode.text)
  } else if (isVNode(vnode)) {
    let renderedString = `<${type}`
    let html
    if (!isNullOrUndef(props)) {
      for (let prop in props) {
        const value = props[prop]
        if (skipAttributes[prop]) {
          continue
        }
        if (prop === 'dangerouslySetInnerHTML') {
          html = value.__html
        } else if (prop === 'style') {
          const styleStr = renderStylesToString(value)
          renderedString += styleStr ? ` style="${renderStylesToString(value)}"` : ''
        } else if (prop === 'class' || prop === 'className') {
          renderedString += ` class="${isString(value)
            ? value
            : hashToClassName(value)}"`
        } else if (prop === 'defaultValue') {
          if (!props.value) {
            renderedString += ` value="${encodeEntities(value)}"`
          }
        } else if (prop === 'defaultChecked') {
          if (!props.checked) {
            renderedString += ` checked="${value}"`
          }
        } else if (isSvg && prop.match(/^xlink\:?(.+)/)) {
          prop = prop.toLowerCase().replace(/^xlink\:?(.+)/, 'xlink:$1')
          renderedString += ` ${prop}="${encodeEntities(value)}"`
        } else {
          if (isString(value)) {
            renderedString += ` ${prop}="${encodeEntities(value)}"`
          } else if (isNumber(value)) {
            renderedString += ` ${prop}="${value}"`
          } else if (value === true) {
            renderedString += ` ${prop}`
          }
        }
      }
    }
    if (isVoidElements[type]) {
      renderedString += `/>`
    } else {
      renderedString += `>`
      if (html) {
        renderedString += html
      } else if (!isInvalid(children)) {
        if (isString(children)) {
          renderedString += children === '' ? ' ' : encodeEntities(children)
        } else if (isNumber(children)) {
          renderedString += children + ''
        } else if (isArray(children)) {
          for (let i = 0, len = children.length; i < len; i++) {
            const child = children[i]
            if (isString(child)) {
              renderedString += child === '' ? ' ' : encodeEntities(child)
            } else if (isNumber(child)) {
              renderedString += child
            } else if (!isInvalid(child)) {
              isSvg = type === 'svg' ? true : type === 'foreignObject' ? false : isSvg
              renderedString += renderVNodeToString(
                child,
                vnode,
                context,
                isSvg
              )
            }
          }
        } else {
          isSvg = type === 'svg' ? true : type === 'foreignObject' ? false : isSvg
          renderedString += renderVNodeToString(children, vnode, context, isSvg)
        }
      }
      if (!isVoidElements[type]) {
        renderedString += `</${type}>`
      }
    }
    return renderedString
  } else if (isComposite(vnode)) {
    const instance = new type(props, context)
    instance._disable = true
    instance.props = props
    instance.context = context
    if (isFunction(instance.componentWillMount)) {
      instance.componentWillMount()
    }
    const rendered = instance.render()
    if (isFunction(instance.getChildContext)) {
      context = extend(clone(context), instance.getChildContext())
    }
    return renderVNodeToString(rendered, vnode, context, isSvg)
  } else if (isStateless(vnode)) {
    const rendered = type(props, context)
//.........這裏部分代碼省略.........