How to use nanomorph - 7 common examples

To help you get started, we’ve selected a few nanomorph examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github xkcd / alto / client / src / ui / menu.js View on Github external
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()
    }
  }
github xkcd / alto / src / menu.js View on Github external
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()
    }
  }
github elementreejs / elementree / lib / elementree.js View on Github external
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)
  }
}
github luwes / swiss / site / content / fixtures / renderers / nanomorph / src / counter.js View on Github external
function render(root, html) {
  if (!root.firstChild) {
    tree = root.appendChild(html);
  } else {
    morph(tree, html);
  }
}
github xkcd / alto / client / src / ui / menu.js View on Github external
}

    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,
github xkcd / alto / client / src / ui / menu.js View on Github external
}

    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,
github xkcd / alto / src / menu.js View on Github external
loadingIndicator = indicateLoading(() => {
          morph(itemEl, renderItem(item))
        })
        onSelect(item.menuId, item.entryIdx)

nanomorph

Hyper fast diffing algorithm for real DOM nodes

MIT
Latest version published 3 years ago

Package Health Score

51 / 100
Full package analysis

Popular nanomorph functions