fix: avoid checking "value" and allow false

closes #36

Author: elevatebart

demo/App.vue

@@ -49,8 +49,8 @@
       />
       <h2>Custom delay</h2>
       <p>
-        when updates should not hapen too often, for instance when a component
-        need a lot of computing power to render, One can change the standard
+        When updates should not happen too often, for instance when a component
+        need a lot of computing power to render, one can change the standard
         throttle timing.
       </p>
       <VueLive

package-lock.json

@@ -17,10 +17,9 @@
     "core-js": "^3.6.5",
     "debounce": "^1.2.0",
     "hash-sum": "^2.0.0",
+    "lodash.has": "^4.5.2",
     "prismjs": "^1.16.0",
     "recast": "^0.19.1",
-    "vue-gh-corners": "^3.0.1",
-    "vue-github-corners": "^1.2.3",
     "vue-inbrowser-compiler": "^3.21.0",
     "vue-prism-editor": "^0.3.0",
     "vue-template-compiler": "^2.0.0"
@@ -46,6 +45,8 @@
     "rollup-plugin-vue": "^5.1.6",
     "validate-commit-msg": "^2.14.0",
     "vue": "^2.6.10",
+    "vue-gh-corners": "^3.0.1",
+    "vue-github-corners": "^1.2.3",
     "vue-template-compiler": "^2.6.10",
     "vuejs-datepicker": "^1.6.2"
   },

package.json

@@ -17,7 +17,7 @@ import {
   concatenate,
 } from "vue-inbrowser-compiler";
 import checkTemplate, {
-  VueLiveUndefinedVariableError,
+  VueLiveParseTemplateError,
 } from "./utils/checkTemplate";
 import evalInContext from "./utils/evalInContext";
 import requireAtRuntime from "./utils/requireAtRuntime";
@@ -98,7 +98,7 @@ export default {
     },
     handleError(e) {
       this.$emit("error", e);
-      if (e.constructor === VueLiveUndefinedVariableError) {
+      if (e.constructor === VueLiveParseTemplateError) {
         e.message = `Cannot parse template expression: ${e.expression}\n\n${e.message}`;
       }
       this.error = e.message;
@@ -148,7 +148,7 @@ export default {
       }
 
       try {
-        checkTemplate(options.template, options);
+        checkTemplate(options);
       } catch (e) {
         this.handleError(e);
         return;

src/Preview.vue

@@ -2,56 +2,86 @@ import checkTemplate from "../checkTemplate";
 
 test("parse valid template without error with a function", () => {
   expect(() =>
-    checkTemplate('<div><a :href="foo()">hello</a></div>')
+    checkTemplate({ template: '<div><a :href="foo()">hello</a></div>' })
   ).not.toThrow();
 });
 
 test("parse valid template without error with a value", () => {
   expect(() =>
-    checkTemplate('<div><compo :value="today">hello</compo></div>', {
+    checkTemplate({
+      template: '<div><compo :value="today">hello</compo></div>',
       data() {
         return {
-          today: "hello"
+          today: "hello",
         };
-      }
+      },
+    })
+  ).not.toThrow();
+});
+
+test("parse false value as a valid value", () => {
+  expect(() =>
+    checkTemplate({
+      template: `
+  <div>
+    <input v-model="value" type="checkbox">
+    <h1 v-if="value">I am checked</h1>
+  </div>`,
+      data() {
+        return {
+          value: false,
+        };
+      },
     })
   ).not.toThrow();
 });
 
 test("parse invalid template with an error in the ++", () => {
   expect(() =>
-    checkTemplate('<div><compo :value="today++">hello</compo></div>')
+    checkTemplate({
+      template: '<div><compo :value="today++">hello</compo></div>',
+    })
   ).toThrow();
 });
 
 test("parse invalid template with an error in a function call", () => {
   expect(() =>
-    checkTemplate('<div><compo :value="callit(today)">hello</compo></div>')
+    checkTemplate({
+      template: '<div><compo :value="callit(today)">hello</compo></div>',
+    })
   ).toThrow();
 });
 
 test("parse invalid template with an error in a function call and a spread", () => {
   expect(() =>
-    checkTemplate('<div><compo :value="callit(...today)">hello</compo></div>')
+    checkTemplate({
+      template: '<div><compo :value="callit(...today)">hello</compo></div>',
+    })
   ).toThrow();
 });
 
 test("parse invalid template with an error if the value is not in data", () => {
   expect(() =>
-    checkTemplate('<div><compo :value="today">hello</compo></div>')
+    checkTemplate({
+      template: '<div><compo :value="today">hello</compo></div>',
+    })
   ).toThrowErrorMatchingInlineSnapshot(
     `"Variable \\"today\\" is not defined."`
   );
 });
 
 test("parse invalid : template by throwing an error", () => {
   expect(() =>
-    checkTemplate('<div><a :href="+++foo()">hello</a></div>')
+    checkTemplate({
+      template: '<div><a :href="+++foo()">hello</a></div>',
+    })
   ).toThrowErrorMatchingInlineSnapshot(`"Assigning to rvalue (1:9)"`);
 });
 
 test("parse invalid @ template by throwing an error", () => {
   expect(() =>
-    checkTemplate('<div><a @click="+++foo()">hello</a></div>')
+    checkTemplate({
+      template: '<div><a @click="+++foo()">hello</a></div>',
+    })
   ).toThrowErrorMatchingInlineSnapshot(`"Assigning to rvalue (1:9)"`);
 });

src/utils/__tests__/checkTemplate.js

@@ -1,22 +1,26 @@
 import { compile } from "vue-template-compiler";
 import { parse } from "acorn";
-import * as recast from "recast";
+import { visit } from "recast";
+import has from "lodash.has";
 
-export default function(src, $options) {
-  const { ast } = compile(src);
+export default function($options) {
+  if (!$options.template) {
+    return;
+  }
+  const { ast } = compile($options.template);
   traverse(ast, (templateAst) => {
     if (templateAst.type !== 1) {
       return;
     }
     templateAst.attrsList
       // for all attribute that has an expression
-      .filter((attr) => /^[:,@,v-]/.test(attr.name))
+      .filter((attr) => /^(:|@|v-)/.test(attr.name))
       .forEach((attr) => {
         try {
           // try and parse the expression
           const ast = parse(`() => {${attr.value}}`);
           // identify all variables that would be undefined because not in the data object
-          recast.visit(ast, {
+          visit(ast, {
             visitIdentifier(identifier) {
               const varName = identifier.value.name;
               if (
@@ -25,7 +29,10 @@ export default function(src, $options) {
                   identifier.parentPath.name === "arguments") &&
                 (!$options ||
                   typeof $options.data !== "function" ||
-                  !$options.data()[varName])
+                  (!has($options.data(), varName) &&
+                    !has($options.props, varName) &&
+                    Array.isArray($options.props) &&
+                    $options.props.indexOf(varName) === -1))
               ) {
                 throw new VueLiveUndefinedVariableError(
                   `Variable "${varName}" is not defined.`,