feat: allow to disable variable checks

Author: elevatebart

src/Preview.vue

@@ -67,6 +67,13 @@ export default {
       type: Object,
       default: () => {},
     },
+    /**
+     * Avoid checking variables for availability it template
+     */
+    checkVariableAvailability: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -156,7 +163,7 @@ export default {
       }
 
       try {
-        checkTemplate(options);
+        checkTemplate(options, this.checkVariableAvailability);
       } catch (e) {
         this.handleError(e);
         return;

src/VueLive.vue

@@ -34,6 +34,7 @@
         :requires="requires"
         :jsx="jsx"
         :data-scope="dataScope"
+        :check-variable-availability="checkVariableAvailability"
       />
     </template>
   </component>
@@ -128,6 +129,15 @@ export default {
       type: Object,
       default: () => {},
     },
+    /**
+     * Set if checking variables for availability
+     * when used in template
+     * NOTE: if this is not checked, undefined vars will yield a blank output
+     */
+    checkVariableAvailability: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {

src/utils/__tests__/checkTemplate.js

@@ -1,12 +1,14 @@
-import checkTemplate from "../checkTemplate";
+import checkTemplateDummy from "../checkTemplate";
+
+const checkTemplate = (opts) => checkTemplateDummy(opts, true);
 
 test("parse valid template without error with a function", () => {
   expect(() =>
     checkTemplate({ template: '<div><a :href="foo()">hello</a></div>' })
   ).not.toThrow();
 });
 
-test("parse valid template without error with a value", () => {
+test("parse valid template without error with a value in data", () => {
   expect(() =>
     checkTemplate({
       template: '<div><compo :value="today">hello</compo></div>',
@@ -19,6 +21,43 @@ test("parse valid template without error with a value", () => {
   ).not.toThrow();
 });
 
+test("parse valid template without error with a value in props", () => {
+  expect(() =>
+    checkTemplate({
+      template: '<div><compo :value="today">hello</compo></div>',
+      props: {
+        today: { type: String },
+      },
+    })
+  ).not.toThrow();
+});
+
+test("parse valid template without error with a value in computed", () => {
+  expect(() =>
+    checkTemplate({
+      template: '<div><compo :value="today">hello</compo></div>',
+      computed: {
+        today() {
+          return "bonjour";
+        },
+      },
+    })
+  ).not.toThrow();
+});
+
+test("parse valid template without error with a value in methods", () => {
+  expect(() =>
+    checkTemplate({
+      template: '<div><compo :value="today">hello</compo></div>',
+      methods: {
+        today() {
+          return "bonjour";
+        },
+      },
+    })
+  ).not.toThrow();
+});
+
 test("parse false value as a valid value", () => {
   expect(() =>
     checkTemplate({
@@ -171,3 +210,18 @@ test("parse v-slot-scope deconstructed array expressions without issues", () =>
     })
   ).not.toThrow();
 });
+
+test("parse v-for nested expressions and add their vars to available data", () => {
+  expect(() =>
+    checkTemplate({
+      template: `<div v-for="hello in [1,2]">
+        <div v-for="other in [1,2]">
+          <CustomSelect @event="
+            test();
+            callFunction(hello);
+          " />
+        </div>
+      </div>`,
+    })
+  ).not.toThrow();
+});

src/utils/checkTemplate.js

@@ -7,7 +7,7 @@ const ELEMENT = 1;
 const SIMPLE_EXPRESSION = 4;
 const INTERPOLATION = 5;
 
-export default function($options) {
+export default function($options, checkVariableAvailability) {
   if (!$options.template) {
     return;
   }
@@ -18,8 +18,33 @@ export default function($options) {
     throw createCompilerError(e.code);
   }
 
+  if (!checkVariableAvailability) {
+    return;
+  }
+
+  const propNamesArray = $options.props
+    ? Array.isArray($options.props)
+      ? $options.props
+      : Object.keys($options.props)
+    : [];
+
+  const dataArray =
+    typeof $options.data === "function" ? Object.keys($options.data()) : [];
+
+  const computedArray = $options.computed ? Object.keys($options.computed) : [];
+
+  const methodsArray =
+    $options && $options.methods ? Object.keys($options.methods) : [];
+
+  const scriptVars = [
+    ...propNamesArray,
+    ...dataArray,
+    ...computedArray,
+    ...methodsArray,
+  ];
+
   traverse(ast, [
-    (templateAst, availableVarNames) => {
+    (templateAst, parentTemplateVars) => {
       const templateVars = [];
       if (templateAst.type === ELEMENT) {
         templateAst.props.forEach((attr) => {
@@ -65,8 +90,8 @@ export default function($options) {
             }
           } else {
             try {
-              checkExpression(exp, $options, [
-                ...availableVarNames,
+              checkExpression(exp, scriptVars, [
+                ...parentTemplateVars,
                 ...templateVars,
               ]);
             } catch (e) {
@@ -79,8 +104,8 @@ export default function($options) {
           if (templateAst.content) {
             checkExpression(
               templateAst.content.content,
-              $options,
-              availableVarNames
+              scriptVars,
+              parentTemplateVars
             );
           }
         } catch (e) {
@@ -96,29 +121,13 @@ export default function($options) {
   ]);
 }
 
-export function checkExpression(expression, $options, templateVars) {
+export function checkExpression(expression, availableVars, templateVars) {
   // try and parse the expression
   const ast = parseEs(`(function(){return ${expression}})()`);
 
-  const propNamesArray =
-    $options && $options.props
-      ? Array.isArray($options.props)
-        ? $options.props
-        : Object.keys($options.props)
-      : [];
-
-  const dataArray =
-    $options && typeof $options.data === "function"
-      ? Object.keys($options.data())
-      : [];
-
-  const availableIdentifiers = [
-    ...propNamesArray,
-    ...dataArray,
-    ...templateVars,
-  ];
-
-  // identify all variables that would be undefined because not in the data object
+  // identify all variables that would be undefined because
+  // - not in the options object
+  // - not defined in the template
   visit(ast, {
     visitIdentifier(identifier) {
       const varName = identifier.value.name;
@@ -128,8 +137,8 @@ export function checkExpression(expression, $options, templateVars) {
         identifier.parentPath.name === "arguments"
       ) {
         if (
-          !availableIdentifiers ||
-          availableIdentifiers.indexOf(varName) === -1
+          availableVars.indexOf(varName) === -1 &&
+          templateVars.indexOf(varName) === -1
         ) {
           throw new VueLiveUndefinedVariableError(
             `Variable "${varName}" is not defined.`,