How to use nanomorph - 7 common examples

attach
    })
    const {pos, childAttach, isScrolling} = positionMenu(sizingEl, parentBox, attach)

    // render
    menuObj = menu({
      items,
      itemGen,
      onMenuSelect,
      onMenuEnter,
      onMenuLeave,
      attach: childAttach,
      isScrolling,
    })
    style(menuObj.el, pos)
    morph(menuEl, menuObj.el)

    if (onLoad) {
      onLoad()
    }
  }

itemGen,
      attach
    })
    const {pos, childAttach, isScrolling} = positionMenu(sizingEl, parentBox, attach)

    // render
    const finalEl = menu({
      items,
      itemGen,
      onSelect,
      attach: childAttach,
      isScrolling,
    })
    style(finalEl, pos)

    morph(el, finalEl)

    if (onLoad) {
      onLoad()
    }
  }

function renderAndMutate (property, updated) {
  const appStateUpdated = this === AppState && updated
  if (RouteState && appStateUpdated && property === 'route') {
    RouteState.path = updated
  }

  if (rendering) return

  rendering = true
  const updatedTree = tree()
  if (updatedTree instanceof Promise) {
    updatedTree.then(function (u) { rendering = !mutate(root, u) })
  } else {
    rendering = !mutate(root, updatedTree)
  }
}

function render(root, html) {
  if (!root.firstChild) {
    tree = root.appendChild(html);
  } else {
    morph(tree, html);
  }
}

}

    if (loadingIndicator) {
      loadingIndicator.cancel()
      loadingIndicator = null
    }

    const oldHighlightedIdx = highlightedIdx
    highlightedIdx = item && item.idx

    if (oldHighlightedIdx != null) {
      morph(itemEls[oldHighlightedIdx], renderItem(items[oldHighlightedIdx]))
    }

    if (itemEl) {
      morph(itemEl, renderItem(item))

      closeSubMenu()

      const itemBox = itemEl.getBoundingClientRect()
      if (item.subMenuId) {
        loadingIndicator = indicateLoading(() => {
          morph(itemEl, renderItem(item))
        })
        onMenuEnter(item.menuId, item.entryIdx, item.subMenuId)
        childMenu = showMenu({
          id: item.subMenuId,
          itemGen,
          onMenuSelect,
          onMenuEnter,
          onMenuLeave,
          onLoad: loadingIndicator.finished,

}

    if (!item && childMenu) {
      return
    }

    if (loadingIndicator) {
      loadingIndicator.cancel()
      loadingIndicator = null
    }

    const oldHighlightedIdx = highlightedIdx
    highlightedIdx = item && item.idx

    if (oldHighlightedIdx != null) {
      morph(itemEls[oldHighlightedIdx], renderItem(items[oldHighlightedIdx]))
    }

    if (itemEl) {
      morph(itemEl, renderItem(item))

      closeSubMenu()

      const itemBox = itemEl.getBoundingClientRect()
      if (item.subMenuId) {
        loadingIndicator = indicateLoading(() => {
          morph(itemEl, renderItem(item))
        })
        onMenuEnter(item.menuId, item.entryIdx, item.subMenuId)
        childMenu = showMenu({
          id: item.subMenuId,
          itemGen,

loadingIndicator = indicateLoading(() => {
          morph(itemEl, renderItem(item))
        })
        onSelect(item.menuId, item.entryIdx)