How to use inferno-hydrate - 10 common examples

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

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

    expect(vNode.children.children).toEqual('');

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

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

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

import {hydrate} from 'inferno-hydrate';
import createBrowserHistory from 'history/createBrowserHistory';
import {App} from './components/App';

// We render our react app into this element
const root = document.getElementById('root');
const history = createBrowserHistory();

history.listen((location) => {
  window.ga('send', 'pageview', location.pathname);
});

/**
 * Render our component according to our routes
 */
hydrate(, root);

// cache all assets if browser supports serviceworker
// if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
//   const sw = navigator.serviceWorker;
//
//   sw.register('/offline.js').then(function() {
//     console.debug('ServiceWorker: registered');
//   }).catch(function(err) {
//     console.error('ServiceWorker:', err);
//   });
//
//   /*sw.register('/sw.js').then(function() {
//       console.debug('CDN Worker: registered')
//   }).catch(function(err) {
//       console.error('ServiceWorker:', err)
//   })*/

it(`do test #${i + 1}`, () => {
      const container = createContainerWithHTML(html);
      hydrate(component, container);

      expect(innerHTML(container.innerHTML)).toEqual(innerHTML(compHtml));
    });
  });

it('Should hydrate correctly when there are comment nodes', () => {
    const container = createContainerWithHTML('<div></div>');

    hydrate(
      <div>
        
          
        
      </div>,
      container
    );

    expect(innerHTML(container.innerHTML)).toEqual(innerHTML('<div></div>'));
  });

it('Should change value and defaultValue to empty when hydrating over existing textArea', () => {
      container.innerHTML = '<textarea>foobar</textarea>';

      hydrate(<textarea>, container);
      expect(container.firstChild.value).toBe('');
      expect(container.firstChild.defaultValue).toBe('');
    });
</textarea>

it('Should not re-mount after hydrate render render, Github #1426', () => {
    container.innerHTML = '<div><span>do not replace me</span></div>';

    const span = container.firstChild.firstChild;

    let vtree = h('div', [h('span', 'do not replace me')]);

    hydrate(vtree, container);

    expect(span).toBe(container.firstChild.firstChild);

    render(vtree, container);

    expect(span).toBe(container.firstChild.firstChild);

    let vtree2 = h('div', [h('span', 'do not replace me')]);

    render(vtree2, container);

    expect(span).toBe(container.firstChild.firstChild);
  });
});

);

      container.innerHTML = renderedString;

      const AnchorNode = container.querySelector('a');
      const wrapperDiv = container.firstChild;

      function WrapperComponent() {
        return (
          <div>
            Website built with Inferno {version} using 
          </div>
        );
      }

      hydrate(, container);
      expect(container.firstChild).toBe(wrapperDiv);
      expect(wrapperDiv.childNodes.length).toBe(4);
      expect(wrapperDiv.childNodes[0].nodeValue).toBe('Website built with Inferno ');
      expect(wrapperDiv.childNodes[1].nodeValue).toBe('4.0.0-21');
      expect(wrapperDiv.childNodes[2].nodeValue).toBe(' using ');
      expect(wrapperDiv.childNodes[3]).toBe(AnchorNode);
    });

[<div>Lets go!</div>, null, createFragment([<div>World</div>, 'Of', <em>Fragments</em>], ChildFlags.UnknownChildren), 'text node'],
            ChildFlags.UnknownChildren
          )}
        
      );
      const renderedString = renderToString(vNode);

      expect(renderedString).toBe('<div><div>Lets go!</div><div>World</div>Of<em>Fragments</em>text node</div>');

      const container = document.createElement('div');

      container.innerHTML = renderedString;

      const emTag = container.querySelector('em');

      hydrate(vNode, container);

      expect(container.innerHTML).toBe('<div><div>Lets go!</div><div>World</div>Of<em>Fragments</em>text node</div>');
      expect(container.querySelector('em')).toBe(emTag);
    });

var Inferno = require("inferno");
var hydrate = require("inferno-hydrate").hydrate;
var createVNode = Inferno;
var render = Inferno.render;

var App = require("./components/App");

var mountNode = document.getElementById("mount");

if (window.colors) {
  hydrate(, mountNode);

  console.log("Re-rendering on client completed");
}

window.addBench("inferno", function(el, colors) {
  var widget;
  var selectedColorIndex = 0;

  function onMount(instance) {
    widget = instance;
  }

  render(, el);

  return function(done) {
    widget.setState(

var Inferno = require("inferno");
var hydrate = require("inferno-hydrate").hydrate;
var createVNode = Inferno.createVNode;

var App = require("./components/App");

var mountNode = document.getElementById("searchResultsMount");

if (mountNode) {
  hydrate(, mountNode);

  console.log("Re-rendering on client completed");
}

window.addBench("inferno", function(el, getNextSearchResults) {
  Inferno.render(, el);

  return function(done) {
    Inferno.render(, el);

    done();
  };
});