How to use inferno-shared - 10 common examples

{
    pure = true,
    areStatesEqual = strictEqual,
    areOwnPropsEqual = shallowEqual,
    areStatePropsEqual = shallowEqual,
    areMergedPropsEqual = shallowEqual,
    ...extraOptions
  } = {}
) => {
  const initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps');
  const initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories, 'mapDispatchToProps');
  const initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps');

  return connectHOC(
    selectorFactory as any,
    combineFrom(
      {
        // used in error messages
        methodName: 'connect',

        // used to compute Connect's displayName from the wrapped component's displayName.
        // tslint:disable-next-line:object-literal-sort-keys
        getDisplayName: name => `Connect(${name})`,

        // if mapStateToProps is falsy, the Connect component doesn't subscribe to store state changes
        shouldHandleStateChanges: !!mapStateToProps,

        // passed through to selectorFactory
        areMergedPropsEqual,
        areOwnPropsEqual,
        areStatePropsEqual,
        areStatesEqual,

options.createVNode = (vNode: VNode) => {
  const children = vNode.children as any;
  let props: any = vNode.props;

  if (isNullOrUndef(props)) {
    props = vNode.props = {};
  }

  // React supports iterable children, in addition to Array-like
  if (hasSymbolSupport && !isNull(children) && typeof children === 'object' && !isArray(children) && isFunction(children[symbolIterator])) {
    vNode.children = iterableToArray(children[symbolIterator]());
  }

  if (!isNullOrUndef(children) && isNullOrUndef(props.children)) {
    props.children = children;
  }
  if (vNode.flags & VNodeFlags.Component) {
    if (isString(vNode.type)) {
      vNode.flags = getFlagsForElementVnode(vNode.type as string);
      if (props) {
        normalizeProps(vNode);
      }
    }
  }

  const flags = vNode.flags;

toArray: function (children) {
    if (isNullOrUndef(children)) {
      return [];
    }
    // We need to flatten arrays here,
    // because React does it also and application level code might depend on that behavior
    if (isArray(children)) {
      const result = [];

      flatten(children, result);

      return result;
    }
    return ARR.concat(children);
  }
};

const node: IPlainRouteConfig = {} as IPlainRouteConfig;
  for (const key in routeConfigNode) {
    node[key] = routeConfigNode[key];
  }

  node.children = [];

  // handle index route config
  if (node.indexRoute) {
    node.children.push(handleIndexRoute(node.indexRoute));
    delete node.indexRoute;
  }

  // handle child routes config
  if (node.childRoutes) {
    const nodes: IPlainRouteConfig[] = isArray(node.childRoutes)
      ? node.childRoutes
      : [node.childRoutes];
    node.children.push(...handleChildRoutes(nodes));
    delete node.childRoutes;
  }

  // cleanup to match native rendered result
  if (node.children.length === 1) {
    node.children = node.children[0];
  }
  if (
    (isArray(node.children) && node.children.length === 0) ||
    (!isArray(node.children) && Object.keys(node.children).length === 0)
  ) {
    delete node.children;
  }

// handle child routes config
  if (node.childRoutes) {
    const nodes: IPlainRouteConfig[] = isArray(node.childRoutes)
      ? node.childRoutes
      : [node.childRoutes];
    node.children.push(...handleChildRoutes(nodes));
    delete node.childRoutes;
  }

  // cleanup to match native rendered result
  if (node.children.length === 1) {
    node.children = node.children[0];
  }
  if (
    (isArray(node.children) && node.children.length === 0) ||
    (!isArray(node.children) && Object.keys(node.children).length === 0)
  ) {
    delete node.children;
  }

  return createElement(Route, node);
}

break;
          case 'defaultValue':
            // Use default values if normal values are not present
            if (!props.value) {
              renderedString += ` value="${isString(value) ? escapeText(value) : value}"`;
            }
            break;
          case 'defaultChecked':
            // Use default values if normal values are not present
            if (!props.checked) {
              renderedString += ` checked="${value}"`;
            }
            break;
          default:
            if (isAttributeNameSafe(prop)) {
              if (isString(value)) {
                renderedString += ` ${prop}="${escapeText(value)}"`;
              } else if (isNumber(value)) {
                renderedString += ` ${prop}="${value}"`;
              } else if (value === true) {
                renderedString += ` ${prop}`;
              }
              break;
            }
        }
      }
    }

    renderedString += `>`;
    this.push(renderedString);

    if (String(type).match(/[\s\n\/='"\0<>]/)) {

} else if (isString(renderOutput)) {
          this.addToQueue(escapeText(renderOutput), position);
        } else if (isNumber(renderOutput)) {
          this.addToQueue(renderOutput + '', position);
        } else {
          this.renderVNodeToQueue(renderOutput, context, position);
        }
      }
      // If an element
    } else if ((flags & VNodeFlags.Element) > 0) {
      let renderedString = `<${type}`;
      let html;
      const isVoidElement = voidElements.has(type);
      const className = vNode.className;

      if (isString(className)) {
        renderedString += ` class="${escapeText(className)}"`;
      } else if (isNumber(className)) {
        renderedString += ` class="${className}"`;
      }

      if (!isNull(props)) {
        for (const prop in props) {
          const value = props[prop];

          switch (prop) {
            case 'dangerouslySetInnerHTML':
              html = value.__html;
              break;
            case 'style':
              if (!isNullOrUndef(props.style)) {
                renderedString += ` style="${renderStylesToString(props.style)}"`;

let props: any = vNode.props;

  if (isNullOrUndef(props)) {
    props = vNode.props = {};
  }

  // React supports iterable children, in addition to Array-like
  if (hasSymbolSupport && !isNull(children) && typeof children === 'object' && !isArray(children) && isFunction(children[symbolIterator])) {
    vNode.children = iterableToArray(children[symbolIterator]());
  }

  if (!isNullOrUndef(children) && isNullOrUndef(props.children)) {
    props.children = children;
  }
  if (vNode.flags & VNodeFlags.Component) {
    if (isString(vNode.type)) {
      vNode.flags = getFlagsForElementVnode(vNode.type as string);
      if (props) {
        normalizeProps(vNode);
      }
    }
  }

  const flags = vNode.flags;

  if (flags & VNodeFlags.FormElement) {
    normalizeFormProps(vNode.type, props);
  }
  if (flags & VNodeFlags.Element) {
    if (vNode.className) {
      props.className = vNode.className;
    }

parentNode.appendChild(document.createTextNode(children as string));
      } else if (parentNode.childNodes.length !== 1 || currentNode.nodeType !== 3) {
        parentNode.textContent = children as string;
      } else {
        if (currentNode.nodeValue !== children) {
          currentNode.nodeValue = children as string;
        }
      }
      currentNode = null;
    } else if (childFlags & ChildFlags.MultipleChildren) {
      let prevVNodeIsTextNode = false;

      for (let i = 0, len = (children as VNode[]).length; i < len; ++i) {
        const child = (children as VNode[])[i];

        if (isNull(currentNode) || (prevVNodeIsTextNode && (child.flags & VNodeFlags.Text) > 0)) {
          _M(child as VNode, parentNode, context, isSVG, currentNode, lifecycle);
        } else {
          currentNode = hydrateVNode(child as VNode, parentNode, currentNode as Element, context, isSVG, lifecycle);
          currentNode = currentNode ? currentNode.nextSibling : null;
        }

        prevVNodeIsTextNode = (child.flags & VNodeFlags.Text) > 0;
      }
    }

    // clear any other DOM nodes, there should be only a single entry for the root
    if ((flags & VNodeFlags.Fragment) === 0) {
      let nextSibling: Node | null = null;

      while (currentNode) {
        nextSibling = currentNode.nextSibling;

public renderElement(vNode, context) {
    const type = vNode.type;
    const props = vNode.props;
    let renderedString = `<${type}`;
    let html;
    const isVoidElement = voidElements.has(type);
    const className = vNode.className;

    if (isString(className)) {
      renderedString += ` class="${escapeText(className)}"`;
    } else if (isNumber(className)) {
      renderedString += ` class="${className}"`;
    }

    if (!isNull(props)) {
      for (const prop in props) {
        const value = props[prop];

        switch (prop) {
          case 'dangerouslySetInnerHTML':
            html = value.__html;
            break;
          case 'style':
            if (!isNullOrUndef(props.style)) {
              renderedString += ` style="${renderStylesToString(props.style)}"`;
            }
            break;
          case 'children':
          case 'className':
            // Ignore
            break;