How to use the diffhtml.createTree function in diffhtml

tasks.add(function reconcileTrees(transaction) {
  const { domNode, markup, options } = transaction;

  // If we are in a render transaction where no markup was previously parsed
  // then reconcile trees will attempt to create a tree based on the incoming
  // markup (JSX/html/etc).
  if (!transaction.newTree) {
    transaction.newTree = createTree(markup);
  }

  // Associate the old tree with this brand new transaction. Always ensure that
  // diffing happens at the root level. This avoids the unnecessary REPLACE
  // operation that would normally occur under `innerHTML`.
  transaction.oldTree = domNode;

  //console.log(transaction.oldTree);

  // Create a fake, but fast DOM node, replacing the VTree passed in.
  transaction.domNode = makeDOMNode(domNode);
});

if (oldInstance.shouldComponentUpdate()) {
      renderTree = oldInstance.render(props, oldInstance.state);
      oldInstance.componentDidUpdate();
    }

    ComponentTreeCache.set(oldInstance, renderTree);
    InstanceCache.set(renderTree, oldInstance);
    oldTree.childNodes.splice(oldTree.childNodes.indexOf(newTree), 1, renderTree);

    return renderTree;
  }
  else if (instance && instance.render) {
    renderTree = createTree(instance.render(props, instance.state));
  }
  else {
    renderTree = createTree(newCtor(props));
  }

  // Nothing was rendered so continue.
  if (!renderTree) {
    return null;
  }

  // Replace the rendered value into the new tree, if rendering a fragment
  // this will inject the contents into the parent.
  if (typeof renderTree.rawNodeName === 'string' && renderTree.nodeType === 11) {
    newTree.childNodes = [...renderTree.childNodes];

    if (instance) {
      ComponentTreeCache.set(instance, oldTree);
      InstanceCache.set(oldTree, instance);
    }

if (instance.shouldComponentUpdate()) {
      renderTree = createTree(instance.render(props, instance.state, context));

      if (instance.componentDidUpdate) {
        instance.componentDidUpdate(instance.props, instance.state);
      }
    }
  }
  // New class instance.
  else if (isNewable) {
    instance = new Component(props, context);
    InstanceCache.set(vTree, instance);
    instance[$$vTree] = vTree;

    renderTree = createTree(instance.render(props, instance.state, context));
  }
  else {
    renderTree = createTree(Component(props, context));
  }

  // Associate the children with the parent component that rendered them, this
  // is used to trigger lifecycle events.
  const linkTrees = childNodes => {
    for (let i = 0; i < childNodes.length; i++) {
      const newTree = childNodes[i];

      // If the newTree is not a Fragment, associate the `newTree` with the
      // originating `vTree`.
      if (newTree && newTree.nodeType !== 11) {
        ComponentTreeCache.set(newTree, vTree);
      }

oldInstance.props = props;
    InstanceCache.delete(ComponentTreeCache.get(oldInstance));

    if (oldInstance.shouldComponentUpdate()) {
      renderTree = oldInstance.render(props, oldInstance.state);
      oldInstance.componentDidUpdate();
    }

    ComponentTreeCache.set(oldInstance, renderTree);
    InstanceCache.set(renderTree, oldInstance);
    oldTree.childNodes.splice(oldTree.childNodes.indexOf(newTree), 1, renderTree);

    return renderTree;
  }
  else if (instance && instance.render) {
    renderTree = createTree(instance.render(props, instance.state));
  }
  else {
    renderTree = createTree(newCtor(props));
  }

  // Nothing was rendered so continue.
  if (!renderTree) {
    return null;
  }

  // Replace the rendered value into the new tree, if rendering a fragment
  // this will inject the contents into the parent.
  if (typeof renderTree.rawNodeName === 'string' && renderTree.nodeType === 11) {
    newTree.childNodes = [...renderTree.childNodes];

    if (instance) {

if (instance.componentDidUpdate) {
        instance.componentDidUpdate(instance.props, instance.state);
      }
    }
  }
  // New class instance.
  else if (isNewable) {
    instance = new Component(props, context);
    InstanceCache.set(vTree, instance);
    instance[$$vTree] = vTree;

    renderTree = createTree(instance.render(props, instance.state, context));
  }
  else {
    renderTree = createTree(Component(props, context));
  }

  // Associate the children with the parent component that rendered them, this
  // is used to trigger lifecycle events.
  const linkTrees = childNodes => {
    for (let i = 0; i < childNodes.length; i++) {
      const newTree = childNodes[i];

      // If the newTree is not a Fragment, associate the `newTree` with the
      // originating `vTree`.
      if (newTree && newTree.nodeType !== 11) {
        ComponentTreeCache.set(newTree, vTree);
      }
      else if (newTree) {
        linkTrees(newTree.childNodes);
      }

export default R.curry(function generate (ast: SiltNode, context: ContextSource): vTree {
    // We'll handle null special, since it's valid.
    if (ast == null) {
        return createTree(null);
    }

    if (!Array.isArray(ast)) {
        throw new TypeError(`invalid ast: not an array, got type ${typeof ast}`);
    }

    const [tag, attributes, children] = ast;

    switch (tag) {
        case 'hbs:comment':
            return createTree(null);
        case 'hbs:expression':
            // $FlowFixMe
            const next = handleExpression(attributes, context);

            if (typeof next === 'string') {

it('should generate an if block if the context is true', () => {
        const ast = ['hbs:block', {
            args: undefined,
            context: 'bar',
            block: 'if',
        }, [
            ['#text', [], 'foo!']
        ]];
        const context = { bar: true };
        const expected = createTree('#document-fragment', {}, [
            createTree('#text', {}, 'foo!')
        ]);

        expect(generate(ast, context)).to.deep.equal(expected);
    });

export function handleBlock (meta: BlockMeta, children: Array, context: ContextSource): vTree {
    switch (meta.block) {
        case 'if':
            if (getContextValue(meta.context, context)) {
                return generate(['#document-fragment', [], children], context);
            }

            return createTree(null);
        case 'unless':
            if (!getContextValue(meta.context, context)) {
                return generate(['#document-fragment', [], children], context);
            }

            return createTree(null);
        default:
            return createTree(null);
    }
}

exports.renderToString = function renderToString(markup, options = {}) {
  const parseHTML = options.strict ? html.strict : html;
  const childNodes = typeof markup === 'string' ? parseHTML(markup) : markup;
  const newTree = createTree('#document-fragment', {}, childNodes);
  const oldTree = createTree(newTree.rawNodeName);

  return innerHTML(oldTree, newTree, { tasks: [...tasks], options });
};