fix root v-else not rendering in prod and switched examples to minifi…

…ed vue for better prod coverage (#3943) * fix root v-else not rendering in production and switched examples to minified vue for better prod coverage * add dev build comment to examples * convert tabs to spaces in todomvc example for consistency
vuejs · Oct 14, 2016 · 4f5a47d · 4f5a47d
1 parent 95bf0c0
commit 4f5a47d
Show file tree

Hide file tree

Showing 14 changed files with 99 additions and 79 deletions.
diff --git a/examples/commits/index.html b/examples/commits/index.html
@@ -18,7 +18,8 @@
         font-weight: bold;
       }
     </style>
-    <script src="../../dist/vue.js"></script>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
   </head>
   <body>
     <div id="demo">

diff --git a/examples/elastic-header/index.html b/examples/elastic-header/index.html
@@ -4,7 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <title></title>
-    <script src="../../dist/vue.js"></script>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
     <script src="http://dynamicsjs.com/lib/dynamics.js"></script>
     <link rel="stylesheet" href="style.css">
     <!-- template for the component -->

diff --git a/examples/firebase/index.html b/examples/firebase/index.html
@@ -5,7 +5,8 @@
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="style.css">
     <!-- Vue -->
-    <script src="../../dist/vue.js"></script>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
     <!-- Firebase -->
     <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
     <!-- VueFire -->

diff --git a/examples/grid/index.html b/examples/grid/index.html
@@ -4,13 +4,14 @@
     <meta charset="utf-8">
     <title>Vue.js grid component example</title>
     <link rel="stylesheet" href="style.css">
-    <script src="../../dist/vue.js"></script>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
     </head>
   <body>
 
     <!-- component template -->
     <script type="text/x-template" id="grid-template">
-      <table>
+      <table v-if="filteredData.length">
         <thead>
           <tr>
             <th v-for="key in columns"
@@ -30,6 +31,7 @@
           </tr>
         </tbody>
       </table>
+      <p v-else>No matches found.</p>
     </script>
 
     <!-- demo root element -->

diff --git a/examples/markdown/index.html b/examples/markdown/index.html
@@ -6,7 +6,8 @@
     <link rel="stylesheet" href="style.css">
     <script src="https://unpkg.com/marked@0.3.6"></script>
     <script src="https://unpkg.com/lodash@4.16.0"></script>
-    <script src="../../dist/vue.js"></script>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
   </head>
   <body>
 

diff --git a/examples/modal/index.html b/examples/modal/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8">
     <title>Vue.js Modal Example</title>
-    <script src="../../dist/vue.js"></script>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
     <link rel="stylesheet" href="style.css">
   </head>
   <body>

diff --git a/examples/move-animations/index.html b/examples/move-animations/index.html
@@ -29,7 +29,8 @@
       }
     </style>
     <script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
-    <script src="../../dist/vue.js"></script>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
   </head>
   <body>
     <div id="el">

diff --git a/examples/select2/index.html b/examples/select2/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8">
     <title>Vue.js custom directive integration example (select2)</title>
-    <script src="../../dist/vue.js"></script>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
     <script src="https://unpkg.com/jquery"></script>
     <script src="https://unpkg.com/select2@4.0.3"></script>
     <link href="https://unpkg.com/select2@4.0.3/dist/css/select2.min.css" rel="stylesheet">

diff --git a/examples/svg/index.html b/examples/svg/index.html
@@ -4,7 +4,8 @@
     <meta charset="utf-8">
     <title>Vue.js SVG example</title>
     <link rel="stylesheet" href="style.css">
-    <script src="../../dist/vue.js"></script>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
   </head>
   <body>
 

diff --git a/examples/todomvc/index.html b/examples/todomvc/index.html
@@ -1,68 +1,69 @@
 <!doctype html>
 <html data-framework="vue">
-	<head>
-		<meta charset="utf-8">
-		<title>Vue.js • TodoMVC</title>
-		<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css">
-		<script src="https:unpkg.com/director/build/director.js"></script>
-		<style>[v-cloak] { display: none; }</style>
-	</head>
-	<body>
-		<section class="todoapp">
-			<header class="header">
-				<h1>todos</h1>
-				<input class="new-todo"
-					autofocus autocomplete="off"
-					placeholder="What needs to be done?"
-					v-model="newTodo"
-					@keyup.enter="addTodo">
-			</header>
-			<section class="main" v-show="todos.length" v-cloak>
-				<input class="toggle-all" type="checkbox" v-model="allDone">
-				<ul class="todo-list">
-					<li v-for="todo in filteredTodos"
-						class="todo"
-						:key="todo.id"
-						:class="{ completed: todo.completed, editing: todo == editedTodo }">
-						<div class="view">
-							<input class="toggle" type="checkbox" v-model="todo.completed">
-							<label @dblclick="editTodo(todo)">{{ todo.title }}</label>
-							<button class="destroy" @click="removeTodo(todo)"></button>
-						</div>
-						<input class="edit" type="text"
-							v-model="todo.title"
-							v-todo-focus="todo == editedTodo"
-							@blur="doneEdit(todo)"
-							@keyup.enter="doneEdit(todo)"
-							@keyup.esc="cancelEdit(todo)">
-					</li>
-				</ul>
-			</section>
-			<footer class="footer" v-show="todos.length" v-cloak>
-				<span class="todo-count">
-					<strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
-				</span>
-				<ul class="filters">
-					<li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li>
-					<li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
-					<li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li>
-				</ul>
-				<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
-					Clear completed
-				</button>
-			</footer>
-		</section>
-		<footer class="info">
-			<p>Double-click to edit a todo</p>
-			<p>Written by <a href="http://evanyou.me">Evan You</a></p>
-			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
-		</footer>
+  <head>
+    <meta charset="utf-8">
+    <title>Vue.js • TodoMVC</title>
+    <link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css">
+    <script src="https:unpkg.com/director/build/director.js"></script>
+    <style>[v-cloak] { display: none; }</style>
+  </head>
+  <body>
+    <section class="todoapp">
+      <header class="header">
+        <h1>todos</h1>
+        <input class="new-todo"
+          autofocus autocomplete="off"
+          placeholder="What needs to be done?"
+          v-model="newTodo"
+          @keyup.enter="addTodo">
+      </header>
+      <section class="main" v-show="todos.length" v-cloak>
+        <input class="toggle-all" type="checkbox" v-model="allDone">
+        <ul class="todo-list">
+          <li v-for="todo in filteredTodos"
+            class="todo"
+            :key="todo.id"
+            :class="{ completed: todo.completed, editing: todo == editedTodo }">
+            <div class="view">
+              <input class="toggle" type="checkbox" v-model="todo.completed">
+              <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
+              <button class="destroy" @click="removeTodo(todo)"></button>
+            </div>
+            <input class="edit" type="text"
+              v-model="todo.title"
+              v-todo-focus="todo == editedTodo"
+              @blur="doneEdit(todo)"
+              @keyup.enter="doneEdit(todo)"
+              @keyup.esc="cancelEdit(todo)">
+          </li>
+        </ul>
+      </section>
+      <footer class="footer" v-show="todos.length" v-cloak>
+        <span class="todo-count">
+          <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
+        </span>
+        <ul class="filters">
+          <li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li>
+          <li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
+          <li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li>
+        </ul>
+        <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
+          Clear completed
+        </button>
+      </footer>
+    </section>
+    <footer class="info">
+      <p>Double-click to edit a todo</p>
+      <p>Written by <a href="http://evanyou.me">Evan You</a></p>
+      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+    </footer>
 
-		<script>
-		// for testing
-		if (navigator.userAgent.indexOf('PhantomJS') > -1) localStorage.clear()
-		</script>
-		<script src="../../dist/vue.js"></script>
-		<script src="app.js"></script>
-	</body>
+    <script>
+    // for testing
+    if (navigator.userAgent.indexOf('PhantomJS') > -1) localStorage.clear()
+    </script>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
+    <script src="app.js"></script>
+  </body>
 </html>
diff --git a/examples/tree/index.html b/examples/tree/index.html
@@ -20,7 +20,8 @@
         list-style-type: dot;
       }
     </style>
-    <script src="../../dist/vue.js"></script>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
   </head>
   <body>
 

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr",
     "test:unit": "karma start build/karma.unit.config.js",
     "test:cover": "karma start build/karma.cover.config.js",
-    "test:e2e": "npm run build -- vue.js && node test/e2e/runner.js",
+    "test:e2e": "npm run build -- vue.min.js && node test/e2e/runner.js",
     "test:ssr": "npm run build:ssr && VUE_ENV=server jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.json",
     "test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2",
     "test:types": "tsc -p ./types/test/tsconfig.json",

diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js
@@ -130,14 +130,16 @@ export function parse (
       }
 
       function checkRootConstraints (el) {
-        if (process.env.NODE_ENV !== 'production') {
+        if (process.env.NODE_ENV !== 'production' && !warned) {
           if (el.tag === 'slot' || el.tag === 'template') {
+            warned = true
             warn(
               `Cannot use <${el.tag}> as component root element because it may ` +
               'contain multiple nodes:\n' + template
             )
           }
           if (el.attrsMap.hasOwnProperty('v-for')) {
+            warned = true
             warn(
               'Cannot use v-for on stateful component root element because ' +
               'it renders multiple elements:\n' + template
@@ -150,12 +152,12 @@ export function parse (
       if (!root) {
         root = element
         checkRootConstraints(root)
-      } else if (process.env.NODE_ENV !== 'production' && !stack.length && !warned) {
+      } else if (!stack.length) {
         // allow 2 root elements with v-if and v-else
         if (root.if && element.else) {
           checkRootConstraints(element)
           root.elseBlock = element
-        } else {
+        } else if (process.env.NODE_ENV !== 'production' && !warned) {
           warned = true
           warn(
             `Component template should contain exactly one root element:\n\n${template}`

diff --git a/test/e2e/specs/grid.js b/test/e2e/specs/grid.js
@@ -82,6 +82,12 @@ module.exports = {
         { name: 'Chuck Norris', power: Infinity }
       ])
 
+    browser
+      .clearValue('input[name="query"]')
+      .assert.count('p', 0)
+      .setValue('input[name="query"]', 'stringthatdoesnotexistanywhere')
+      .assert.count('p', 1)
+
     browser.end()
 
     function assertTable (data) {