fix root v-else not rendering in prod and switched examples to minified 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
8 years ago · 4f5a47d750
14 changed files with 99 additions and 79 deletions
--- 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">
--- 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 -->
--- 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 -->
--- 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 -->
--- 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>

--- 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>
--- 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">
--- 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">
--- 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>

--- a/examples/todomvc/index.html
+++ b/examples/todomvc/index.html
@ -62,7 +62,8 @@
    // for testing
    if (navigator.userAgent.indexOf('PhantomJS') > -1) localStorage.clear()
    </script>
-		<script src="../../dist/vue.js"></script>
+    <!-- Delete ".min" for console warnings in development -->
+    <script src="../../dist/vue.min.js"></script>
    <script src="app.js"></script>
  </body>
 </html>
--- 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>

--- 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",
--- 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}`
--- 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) {