How to use the snabbdom/vnode function in snabbdom

To help you get started, we’ve selected a few snabbdom 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 AlexGalays / kaiju / src / render.js View on Github external
// render process, do not force-render it now.
  if (checkRenderQueue && componentsToRender.indexOf(component) !== -1) return

  const isNew = vnode === undefined
  const { patch } = Render

  let beforeRender

  if (log.render) beforeRender = performance.now()
  const newVnode = render(props, state)

  let target = vnode
  if (!target) {
    const div = document.createElement('div')
    elm.appendChild(div)
    target = Vnode('div', { key: '_init' }, [], undefined, div)
  }

  patch(target, newVnode)

  if (shouldLog(log.render, component.key)) {
    const renderTime = Math.round((performance.now() - beforeRender) * 100) / 100
    console.log(`Render component %c${component.key}`,
      'font-weight: bold', renderTime + ' ms', '| props: ', props, '| state: ',state)
  }

  component.lifecycle.rendered(component, newVnode)
  if (isNew) newComponents.push(component)
}
github skatejs / skatejs / packages / element-snabbdom / src / index.ts View on Github external
renderer() {
    const root = this.renderRoot as HTMLElement;
    let newVTree = this.render();
    newVTree = vnode(
      'root',
      {},
      Array.isArray(newVTree) ? newVTree : [newVTree],
      undefined,
      root
    );
    if (!this._vTree) {
      // small cheat to allow rendering root el
      // creates an empty vnode with the same sel as the rendered vtree
      // this ensure the view element will be properly patched
      const emptyVTree = vnode('root', {}, [], undefined, root);
      this._patch(emptyVTree, newVTree);
    } else {
      this._patch(this._vTree, newVTree);
    }
    this._vTree = newVTree;
  }
}
github skatejs / skatejs / packages / element-snabbdom / src / index.ts View on Github external
renderer() {
    const root = this.renderRoot as HTMLElement;
    let newVTree = this.render();
    newVTree = vnode(
      'root',
      {},
      Array.isArray(newVTree) ? newVTree : [newVTree],
      undefined,
      root
    );
    if (!this._vTree) {
      // small cheat to allow rendering root el
      // creates an empty vnode with the same sel as the rendered vtree
      // this ensure the view element will be properly patched
      const emptyVTree = vnode('root', {}, [], undefined, root);
      this._patch(emptyVTree, newVTree);
    } else {
      this._patch(this._vTree, newVTree);
    }
    this._vTree = newVTree;
github appcues / snabbdom-virtualize / src / utils.js View on Github external
export function createTextVNode(text, context) {
    return VNode(undefined, undefined, undefined, unescapeEntities(text, context));
}
github AlexGalays / kaiju / src / render.js View on Github external
export function renderApp(app, appElm) {
  logBeginRender()

  const el = document.createElement('div')
  const emptyVnode = Vnode('div', { key: '_init' }, [], undefined, el)
  const appNode = Render.patch(emptyVnode, app)

  newComponents.forEach(c => c.lifecycle.inserted(c))

  appElm.appendChild(appNode.elm)

  logEndRender()
}
github skatejs / skatejs / packages / element-snabbdom / src / index.ts View on Github external
disconnectedCallback() {
    const root = this.renderRoot as HTMLElement;
    super.disconnectedCallback && super.disconnectedCallback();
    const emptyVTree = vnode('root', {}, [], undefined, root);
    this._patch(this._vTree, emptyVTree);
  }