How to use inferno - 10 common examples

it('Should be possible to return void from render SFC', () => {
      // SFC
      const MyComponent: SFC = () => {
        return;
      };

      render(
        , // Error: JSX element type 'InfernoNode' is not a constructor function for JSX elements. Type 'string' is not assignable to type 'Element | null'
        container
      );
    });

it('createTextVNode - Should handle empty textNodes correctly Github #1137 variation#3', () => {
    const container = createContainerWithHTML('<span class="error"></span>');

    const vNode = <span>{createTextVNode('')}</span>;

    hydrate(vNode, container); // This should create empty text node

    expect(container.firstChild.firstChild).not.toBeNull();

    render(<span>{'Okay!'}</span>, container);

    expect(container.textContent).toBe('Okay!');
  });

it('Should work with object ref on element vNode', () => {
      // create matching DOM
      container.innerHTML = '<div>Okay<span>foobar</span></div>';

      let newRef = createRef();

      hydrate(
        <div>
          Okay
          <span>Foobar</span>
        </div>,
        container
      );

      expect(newRef.current).toBe(container.querySelector('span'));
      expect(container.innerHTML).toBe('<div>Okay<span>Foobar</span></div>');
    });

it('Should work with object ref on element vNode', () => {
      // create matching DOM
      container.innerHTML = '<div>Okay<span>foobar</span></div>';

      let newRef = createRef();

      hydrate(
        <div>
          Okay
          <span>Foobar</span>
        </div>,
        container
      );

      expect(newRef.current).toBe(container.querySelector('span'));
      expect(container.innerHTML).toBe('<div>Okay<span>Foobar</span></div>');
    });

const spyObj2 = { fn: () => {} };
    const spy1 = sinon.spy(spyObj, 'fn');
    const spy2 = sinon.spy(spyObj2, 'fn');

    const div = createVNode(VNodeFlags.HtmlElement | VNodeFlags.ReCreate, 'div', null, createTextVNode('1'), ChildFlags.HasVNodeChildren, null, null, spy1);

    render(div, container);

    let firstDiv = container.firstChild;

    expect(container.innerHTML).toEqual('<div>1</div>');
    expect(spy1.callCount).toBe(1);
    expect(spy1.getCall(0).args.length).toBe(1);
    expect(spy1.getCall(0).args[0]).toEqual(firstDiv);

    const div2 = createVNode(VNodeFlags.HtmlElement | VNodeFlags.ReCreate, 'div', null, createTextVNode('1'), ChildFlags.HasVNodeChildren, null, null, spy2);

    render(div2, container);

    expect(firstDiv).not.toBe(container.firstChild); // Div is different

    // Html is the same
    expect(container.innerHTML).toEqual('<div>1</div>');

    // Verify all callbacks were called
    expect(spy1.callCount).toBe(2);
    expect(spy1.getCall(1).args.length).toBe(1);
    expect(spy1.getCall(1).args[0]).toEqual(null);

    expect(spy2.callCount).toBe(1);
    expect(spy2.getCall(0).args.length).toBe(1);
    expect(spy2.getCall(0).args[0]).toEqual(container.firstChild);

key: "componentWillUnmount",
        value: function componentWillUnmount() {
          // Call without arguments to complete stream
          this.propsEmitter.emit(); // Clean-up subscription before un-mounting

          this.subscription.unsubscribe();
        }
      }, {
        key: "render",
        value: function render() {
          return this.state.vdom;
        }
      }]);

      return ComponentFromStream;
    }(_inferno.Component), _temp;
  };
};

export let Component

// let jsanParse
let devTools
let persistedStore

try {
  Component = require('react').Component
} catch (error) {
  /* Fail silent */
}
try {
  Component = require('inferno').Component
} catch (error) {
  /* Fail silent */
}

if (!Component) {
  throw 'Please require Inferno or React'
}

if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production') {
  console.error(`You're currently using a development version of Laco`)
  // jsanParse = require('jsan').parse
  if ((window as any).__REDUX_DEVTOOLS_EXTENSION__) {
    devTools = (window as any).__REDUX_DEVTOOLS_EXTENSION__.connect()
    // const persistedStore = jsanParse(localStorage.getItem('__LACO__'))
    const content = localStorage.getItem('__LACO__')
    if (content) {

function renderEntry(exported) {
  if (exported.default) {
    exported = exported.default
  }
  // Assumptions: the entry module either renders the app itself or exports an
  // Inferno component (which is either a function or class) or VNode (which has
  // a flags property).
  if (Object.prototype.toString.call(exported) === '[object Function]') {
    vnode = Inferno.createComponentVNode(1 << 1 /* === VNodeFlags.ComponentUnknown */, exported)
  }
  else if (exported.flags) {
    vnode = exported
  }
  else {
    // Assumption: the entry module rendered the app
    return
  }
  Inferno.render(vnode, parent)
}

renderChildren() {
    const { children, style } = this.props;
    // Was: return React.cloneElement( ?> const cloneElement = injectStringRefs(cloneVNode);
    return cloneVNode(children,
      { style }
    );
  }

} 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;
        parentNode.removeChild(currentNode);