v-if / v-else causes client side hydration to bail

[mediafreakch]

Vue.js version

2.1.6

Reproduction Link

https://github.com/mediafreakch/vue-hydration-bug

Steps to reproduce

Follow the Readme in my sample repository.
Once you've built the app and have started the webserver, go to localhost:8080 and observe the output in the console.

What is Expected?

Client side hydration should work.

What is actually happening?

Client side hydration bails because there is a mismatch between the client-side rendered vnodes and the server-side rendered nodeList.

I found out that something must have gone wrong with indentation in the template compilation process or with the v-if / v-else directives.

Compare this App.vue template (hydration bails):

    <a v-if="false">Foo</a>
    <a v-else class="disabled">&lt; prev</a>
    <span>bar</span>

to this (hydration works):

    <a v-if="false">Foo</a>
    <a v-else class="disabled">&lt; prev</a><span>bar</span>

[defcc]

Maybe we need to detect the whitespace text node and ignore it when hydrating.