How to use diffhtml - 10 common examples

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') {

// Replace one of the original references with the placeholder, so that
      // when elements are taken out of the page (with a fragment below) we'll
      // know where to put the new elements.
      domNode.parentNode.replaceChild(placeholder, domNode);

      // Pull the previously rendered DOM nodes out of the page and into a
      // container fragment for diffing.
      const fragment = createNode({ nodeName: FRAGMENT, childNodes });

      // Ensure a fragment is always used.
      if (renderTree.nodeType !== 11) {
        renderTree = createTree(FRAGMENT, null, renderTree);
      }

      // Diff the fragments together.
      outerHTML(fragment, renderTree);

      // Remap the new elements into the system.
      [].slice.apply(fragment.childNodes).forEach(childNode => {
        ComponentTreeCache.set(createTree(childNode), vTree);
      });

      // Replace the fragments back in.
      placeholder.parentNode.replaceChild(fragment, placeholder);
    }
    else {
      outerHTML(domNode, renderTree);

      // FIXME Does `renderTree` we need to be here? Is this association
      // necessary?
      [renderTree, ...renderTree.childNodes].forEach(childTree => {
        ComponentTreeCache.set(childTree, vTree);

renderTree = createTree(FRAGMENT, null, renderTree);
      }

      // Diff the fragments together.
      outerHTML(fragment, renderTree);

      // Remap the new elements into the system.
      [].slice.apply(fragment.childNodes).forEach(childNode => {
        ComponentTreeCache.set(createTree(childNode), vTree);
      });

      // Replace the fragments back in.
      placeholder.parentNode.replaceChild(fragment, placeholder);
    }
    else {
      outerHTML(domNode, renderTree);

      // FIXME Does `renderTree` we need to be here? Is this association
      // necessary?
      [renderTree, ...renderTree.childNodes].forEach(childTree => {
        ComponentTreeCache.set(childTree, vTree);
      });
    }

    this.componentDidUpdate(this.props, this.state);
  }

const { use, html, Internals, createTree, innerHTML } = require('diffhtml');
const { makeDOMNode } = require('quick-dom-node');
const { keys } = Object;

// Apply a transformation function against the Nodes to produce a string of
// markup.
use({ createNodeHook: vTree => makeDOMNode(vTree) });

// Use the same tasks for every run. Maybe in the future we'll allow for
// passing custom tasks.
const tasks = new Set(Internals.defaultTasks);

// Remove incompatible tasks, and replace them with serialization-compatible
// functions.
tasks.delete(Internals.tasks.reconcileTrees);
tasks.delete(Internals.tasks.syncTrees);
tasks.delete(Internals.tasks.patchNode);
tasks.delete(Internals.tasks.endAsPromise);

// Add a new reconcile trees function to ensure we are diffing against a tree
// instead of DOM Node.
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);
  }

const { use, html, Internals, createTree, innerHTML } = require('diffhtml');
const { makeDOMNode } = require('quick-dom-node');
const { keys } = Object;

// Apply a transformation function against the Nodes to produce a string of
// markup.
use({ createNodeHook: vTree => makeDOMNode(vTree) });

// Use the same tasks for every run. Maybe in the future we'll allow for
// passing custom tasks.
const tasks = new Set(Internals.defaultTasks);

// Remove incompatible tasks, and replace them with serialization-compatible
// functions.
tasks.delete(Internals.tasks.reconcileTrees);
tasks.delete(Internals.tasks.syncTrees);
tasks.delete(Internals.tasks.patchNode);
tasks.delete(Internals.tasks.endAsPromise);

// Add a new reconcile trees function to ensure we are diffing against a tree
// instead of DOM Node.
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