How to use morphdom - 9 common examples

// don't override initial tag id
    if (tag.id && !props.id) props.id = tag.id
    if (tag.classList.length && props.class) {
      props.class = [...tag.classList, props.class]
    }

    // keep attributes
    if (tag.attributes) {
      for (let attr of tag.attributes) {
        if (!props[attr.name]) props[attr.name] = attr.value
      }
    }
    let newTag = createElement(tag.tagName, props, children)

    morph(tag, newTag, {
      getNodeKey: (el) => {
        return el.key || el.id
      },
      onBeforeElChildrenUpdated: (fromEl, toEl) => {
        // text-only case is special
        // if ([...fromEl.childNodes].every(node => node.nodeType === 3) && [...toEl.childNodes].every(node => node.nodeType === 3)) {
        //   console.log(fromEl.innerHTML, toEl.innerHTML)
        //   // fromEl.textContent = toEl.textContent
        //   // return false
        // }
      },
      onBeforeElUpdated: (fromEl, toEl) => {
        // FIXME: this blocks updating
        // if (fromEl.isEqualNode(toEl)) {
        //   return false
        // }

children[j] = undefined
            if (j === childrenLen - 1) childrenLen--
            if (j === min) min++
            break
          }
        }
      }

      // morph the matched/found/created DOM child to match vchild (deep)
      let out = idiff(child, vchild, context, mountAll)
      if (out._reactComponent) {
        let diffIt = false
        for (let k = 0, cl = dom.childNodes.length; k < cl; k++) {
          if (dom.childNodes[i] && dom.childNodes[i]._reactComponent.constructor === out._reactComponent.constructor) {
            diffIt = true
            morphdom(dom.childNodes[i], out)
            break
          }
        }

        !diffIt && dom.appendChild(out)
      } else {
        f = originalChildren[i]
        if (out && out !== dom && out !== f) {
          if (f == null) {
            dom.appendChild(out)
          } else if (out === f.nextSibling) {
            removeNode(f)
          } else {
            dom.insertBefore(out, f)
          }
        }

backgroundColor: result.base,
    ...result
  })
  const cardimg = getCardImage(result)

  const nextHead = h('head')(
    h('title')(`Hello Color ${color}`),
    h('meta')({
      name: 'viewport',
      content: 'width=device-width,initial-scale=1'
    })(),
    h('style')('*{box-sizing:border-box;}body{margin:0}')
  )

  if (tree) {
    update(tree, next)
    update(head, nextHead)
  } else {
    document.body.appendChild(next)
    console.log(document.head, nextHead)
    document.head.parentNode.replaceChild(nextHead, document.head)
    return {
      tree: next,
      head: nextHead
    }
  }
}

updateNode(node, html) {
    const div = document.createElement('div');
    div.innerHTML = html;
    morphdom(node, div.firstElementChild);
  }

patch(html) {
		morphdom(this, String(html).trim());

		return this;
	}
}

const {height, offset = 0} = this.state;
    const {start, stop} = this._sizeAndPositionManager.getVisibleRange({
      containerSize: height,
      offset,
      overscanCount,
    });
    const fragment = document.createDocumentFragment();

    for (let index = start; index <= stop; index++) {
      fragment.appendChild(renderRow(index));
    }

    this.inner.style.height = `${this._sizeAndPositionManager.getTotalSize()}px`;
    this.content.style.top = `${this.getRowOffset(start)}px`;

    morphdom(this.content, fragment, {
      childrenOnly: true,
      getNodeKey: node => node.nodeIndex,
    });

    this.onRowsRendered({
      startIndex: start,
      stopIndex: stop,
    });
  }
}

backgroundColor: result.base,
    ...result
  })
  const cardimg = getCardImage(result)

  const nextHead = h('head')(
    h('title')(`Hello Color ${color}`),
    h('meta')({
      name: 'viewport',
      content: 'width=device-width,initial-scale=1'
    })(),
    h('style')('*{box-sizing:border-box;}body{margin:0}')
  )

  if (tree) {
    update(tree, next)
    update(head, nextHead)
  } else {
    document.body.appendChild(next)
    document.head.parentNode.replaceChild(nextHead, document.head)
    return {
      tree: next,
      head: nextHead
    }
  }
}

operate(operation, () => {
        const { childrenOnly, focusSelector } = operation
        morphdom(
          element,
          childrenOnly ? template.content : template.innerHTML,
          {
            childrenOnly: !!childrenOnly,
            onBeforeElUpdated: shouldMorph(operation),
            onElUpdated: didMorph(operation)
          }
        )
        assignFocus(focusSelector)
      })
      after(parent.children[ordinal], callee, operation)

renderElement(templateData) {
        const html = this.template(templateData);
        if (this.el) {
            const mountRoot = this.options.ownParent ? this.el.firstChild : this.el;
            morphdom(mountRoot, html);
            this.bindElementEvents();
        } else {
            let parent = this.options.parent || this.parent;
            if (parent) {
                if (typeof parent === 'string') {
                    parent = document.querySelector(parent);
                }
                if (!parent) {
                    throw new Error(`Error rendering ${this.constructor.name}: parent not found`);
                }
                if (this.options.replace) {
                    Tip.destroyTips(parent);
                    parent.innerHTML = '';
                }
                const el = document.createElement('div');
                el.innerHTML = html;