feat: create allow list for camelCased SVG attributes (#67)

Co-authored-by: Michael Dodge <[email protected]>

Author: mgdodge

src/utils/__tests__/checkTemplate.js

@@ -1,4 +1,5 @@
 import checkTemplateDummy from "../checkTemplate";
+import defaultAttrAllowList from "../defaultAttrAllowList";
 
 const checkTemplate = (opts) => checkTemplateDummy(opts, true);
 
@@ -293,6 +294,16 @@ test("throw error when mixed case attributes", () => {
   ).toThrowError("[VueLive] Invalid attribute name: aA");
 });
 
+test.each(defaultAttrAllowList)("don't throw error for allowed SVG attribute %s", (attr) => {
+  expect(() =>
+    checkTemplate({
+      template: `<svg ${attr}="as">
+          <g/>
+        </svg>`,
+    })
+  ).not.toThrowError(`[VueLive] Invalid attribute name: ${attr}`);
+});
+
 test("throw error when invalid character attributes", () => {
   expect(() =>
     checkTemplate({

src/utils/checkTemplate.js

@@ -3,6 +3,7 @@ import { parse as parseVue } from "@vue/compiler-dom";
 import { createCompilerError } from "@vue/compiler-core/dist/compiler-core.cjs";
 import { parse as parseEs } from "acorn";
 import { ancestor, simple } from "acorn-walk";
+import defaultAttrAllowList from "./defaultAttrAllowList";
 
 const ELEMENT = 1;
 const SIMPLE_EXPRESSION = 4;
@@ -44,12 +45,16 @@ export default function($options, checkVariableAvailability) {
     ...methodsArray,
   ];
 
+  // Define list of attributes for which name check will be skipped. Defaults to known camelCased SVG attributes.
+  // Allow future enhancement via $options.attrAllowList
+  const attrAllowList = $options.attrAllowList || defaultAttrAllowList;
+
   traverse(ast, [
     (templateAst, parentTemplateVars) => {
       const templateVars = [];
       if (templateAst.type === ELEMENT) {
         templateAst.props.forEach((attr) => {
-          if (!/^[a-z-:]+$/g.test(attr.name)) {
+          if (!attrAllowList.includes(attr.name) && !/^[a-z-:]+$/g.test(attr.name)) {
             throw new VueLiveParseTemplateAttrError(
               "[VueLive] Invalid attribute name: " + attr.name,
               attr.loc

src/utils/defaultAttrAllowList.js

@@ -0,0 +1,68 @@
+// Default list of allowed camelCase attributes (based on SVG attributes)
+const defaultAttrAllowList = [
+    "attributeName",
+    "attributeType",
+    "baseFrequency",
+    "baseProfile",
+    "calcMode",
+    "clipPathUnits",
+    "contentScriptType",
+    "contentStyleType",
+    "diffuseConstant",
+    "edgeMode",
+    "filterRes",
+    "filterUnits",
+    "glyphRef",
+    "gradientTransform",
+    "gradientUnits",
+    "kernelMatrix",
+    "kernelUnitLength",
+    "kerning",
+    "keyPoints",
+    "keySplines",
+    "keyTimes",
+    "lengthAdjust",
+    "limitingConeAngle",
+    "markerHeight",
+    "markerUnits",
+    "markerWidth",
+    "maskContentUnits",
+    "maskUnits",
+    "numOctaves",
+    "pathLength",
+    "patternContentUnits",
+    "patternTransform",
+    "patternUnits",
+    "pointsAtX",
+    "pointsAtY",
+    "pointsAtZ",
+    "preserveAlpha",
+    "preserveAspectRatio",
+    "primitiveUnits",
+    "referrerPolicy",
+    "refX",
+    "refY",
+    "repeatCount",
+    "repeatDur",
+    "requiredExtensions",
+    "requiredFeatures",
+    "specularConstant",
+    "specularExponent",
+    "spreadMethod",
+    "startOffset",
+    "stdDeviation",
+    "stitchTiles",
+    "surfaceScale",
+    "systemLanguage",
+    "tableValues",
+    "targetX",
+    "targetY",
+    "textLength",
+    "viewBox",
+    "viewTarget",
+    "xChannelSelector",
+    "yChannelSelector",
+    "zoomAndPan",
+];
+
+export default defaultAttrAllowList;