How to use the diffhtml.outerHTML function in diffhtml

To help you get started, we’ve selected a few diffhtml 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 tbranyen / diffhtml / packages / diffhtml-components / lib / component.js View on Github external
// 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);
github tbranyen / diffhtml / packages / diffhtml-components / lib / component.js View on Github external
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);
  }
github mAAdhaTTah / brookjs / packages / brookjs / src / component / render / createEffects$.js View on Github external
vdom$.flatMapLatest(vdom => raf$.take(1).flatMap(() => {
        if (process.env.NODE_ENV !== 'production') {
            assert(
                vdom != null &&
                    (typeof vdom === 'string' || typeof vdom === 'object'),
                '`vdom` should be an HTML string or a VDOM object');
        }

        return outerHTML(el, vdom);
    })).setName(vdom$, 'effects$');
github mAAdhaTTah / brookjs / packages / brookjs / src / component / render / index.js View on Github external
raf$.take(1).flatMap(() => {
        if (process.env.NODE_ENV !== 'production') {
            assert.equal(typeof html, 'string', '`template` should return a string');
        }

        return outerHTML(el, html);
    })
        .bufferWhile(effect$ => effect$[$$meta].type !== 'END')