demo/bundle.js
// Note: this is a browser-only function so we can assume elms are DOM nodes.
this is a browser-only function so we can assume elms are DOM nodes.
this is a browser - only function so we can assume elms are DOM nodes .
function hydrate (elm, vnode, insertedVnodeQueue, inVPre) {
                var i;
                var tag = vnode.tag;
                var data = vnode.data;
                var children = vnode.children;
                inVPre = inVPre || (data && data.pre);
                vnode.elm = elm;
                if (isTrue(vnode.isComment) && isDef(vnode.asyncFactory)) {
                  vnode.isAsyncPlaceholder = true;
                  return true
                }
                if (process.env.NODE_ENV !== 'production') {
                  if (!assertNodeMatch(elm, vnode, inVPre)) {
                    return false
                  }
                }
                if (isDef(data)) {
                  if (isDef(i = data.hook) && isDef(i = i.init)) { i(vnode, true ); }
                  if (isDef(i = vnode.componentInstance)) {
                    initComponent(vnode, insertedVnodeQueue);
                    return true
                  }
                }
                if (isDef(tag)) {
                  if (isDef(children)) {
                    if (!elm.hasChildNodes()) {
                      createChildren(vnode, children, insertedVnodeQueue);
                    } else {
                      if (isDef(i = data) && isDef(i = i.domProps) && isDef(i = i.innerHTML)) {
                        if (i !== elm.innerHTML) {
                          if (process.env.NODE_ENV !== 'production' &&
                            typeof console !== 'undefined' &&
                            !hydrationBailed
                          ) {
                            hydrationBailed = true;
                            console.warn('Parent: ', elm);
                            console.warn('server innerHTML: ', i);
                            console.warn('client innerHTML: ', elm.innerHTML);
                          }
                          return false
                        }
                      } else {
                        var childrenMatch = true;
                        var childNode = elm.firstChild;
                        for (var i$1 = 0; i$1 < children.length; i$1++) {
                          if (!childNode || !hydrate(childNode, children[i$1], insertedVnodeQueue, inVPre)) {
                            childrenMatch = false;
                            break
                          }
                          childNode = childNode.nextSibling;
                        }
                        if (!childrenMatch || childNode) {
                          if (process.env.NODE_ENV !== 'production' &&
                            typeof console !== 'undefined' &&
                            !hydrationBailed
                          ) {
                            hydrationBailed = true;
                            console.warn('Parent: ', elm);
                            console.warn('Mismatching childNodes vs. VNodes: ', elm.childNodes, children);
                          }
                          return false
                        }
                      }
                    }
                  }
                  if (isDef(data)) {
                    var fullInvoke = false;
                    for (var key in data) {
                      if (!isRenderedModule(key)) {
                        fullInvoke = true;
                        invokeCreateHooks(vnode, insertedVnodeQueue);
                        break
                      }
                    }
                    if (!fullInvoke && data['class']) {
                      traverse(data['class']);
                    }
                  }
                } else if (elm.data !== vnode.text) {
                  elm.data = vnode.text;
                }
                return true
              }
function hydrate ( elm , vnode , insertedVnodeQueue , inVPre ) { var i ; var tag = vnode . tag ; var data = vnode . data ; var children = vnode . children ; inVPre = inVPre || ( data && data . pre ) ; vnode . elm = elm ; if ( isTrue ( vnode . isComment ) && isDef ( vnode . asyncFactory ) ) { vnode . isAsyncPlaceholder = true ; return true } if ( process . env . NODE_ENV !== 'production' ) { if ( ! assertNodeMatch ( elm , vnode , inVPre ) ) { return false } } if ( isDef ( data ) ) { if ( isDef ( i = data . hook ) && isDef ( i = i . init ) ) { i ( vnode , true ) ; } if ( isDef ( i = vnode . componentInstance ) ) { initComponent ( vnode , insertedVnodeQueue ) ; return true } } if ( isDef ( tag ) ) { if ( isDef ( children ) ) { if ( ! elm . hasChildNodes ( ) ) { createChildren ( vnode , children , insertedVnodeQueue ) ; } else { if ( isDef ( i = data ) && isDef ( i = i . domProps ) && isDef ( i = i . innerHTML ) ) { if ( i !== elm . innerHTML ) { if ( process . env . NODE_ENV !== 'production' && typeof console !== 'undefined' && ! hydrationBailed ) { hydrationBailed = true ; console . warn ( 'Parent: ' , elm ) ; console . warn ( 'server innerHTML: ' , i ) ; console . warn ( 'client innerHTML: ' , elm . innerHTML ) ; } return false } } else { var childrenMatch = true ; var childNode = elm . firstChild ; for ( var i$1 = 0 ; i$1 < children . length ; i$1 ++ ) { if ( ! childNode || ! hydrate ( childNode , children [ i$1 ] , insertedVnodeQueue , inVPre ) ) { childrenMatch = false ; break } childNode = childNode . nextSibling ; } if ( ! childrenMatch || childNode ) { if ( process . env . NODE_ENV !== 'production' && typeof console !== 'undefined' && ! hydrationBailed ) { hydrationBailed = true ; console . warn ( 'Parent: ' , elm ) ; console . warn ( 'Mismatching childNodes vs. VNodes: ' , elm . childNodes , children ) ; } return false } } } } if ( isDef ( data ) ) { var fullInvoke = false ; for ( var key in data ) { if ( ! isRenderedModule ( key ) ) { fullInvoke = true ; invokeCreateHooks ( vnode , insertedVnodeQueue ) ; break } } if ( ! fullInvoke && data [ 'class' ] ) { traverse ( data [ 'class' ] ) ; } } } else if ( elm . data !== vnode . text ) { elm . data = vnode . text ; } return true }
Note: this is a browser-only function so we can assume elms are DOM nodes.
Note : this is a browser - only function so we can assume elms are DOM nodes .
// assert node match /* hydrating */ // child component. it should have hydrated its own tree. // empty element, allow client to pick up and populate children // v-html and domProps: innerHTML /* istanbul ignore if */ // iterate and compare children lists // if childNode is not null, it means the actual childNodes list is // longer than the virtual children list. /* istanbul ignore if */ // ensure collecting deps for deep class bindings for future updates