wip: validator for svg tags and properties

packages/inspector/hooks/useFormattedSVG.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect } from "react";
-// import babelParser from 'prettier/parser-babel'
 import htmlParser from "prettier/parser-html";
 import prettier from "prettier/standalone";
+import { parse } from "svg-parser";
+import { svgElementAttributes } from "svg-element-attributes";
 
 const options = {
   parser: "html",
@@ -25,7 +26,12 @@ export const useFormattedSvg = (svg: string) => {
       if (svg === null) {
         setFormattedSvg("");
       } else {
-        setFormattedSvg(formatSVG(svg));
+        const ast = parse(svg);
+
+        validateTagsAndProperties(ast);
+
+        const formatted = formatSVG(svg);
+        setFormattedSvg(formatted);
       }
     } catch (e) {
       setError(e.message);
@@ -34,3 +40,41 @@ export const useFormattedSvg = (svg: string) => {
 
   return { formattedSvg, error };
 };
+
+// Overrides
+svgElementAttributes.svg.push("xmlns", "xmlns:xlink");
+svgElementAttributes.mpath.push("xlink:href");
+
+const validTags = Object.keys(svgElementAttributes).filter((tag) => tag !== "*");
+
+function validateTagsAndProperties(node) {
+  if (node.children) {
+    node.children.forEach((child) => {
+
+      if (child.type === "element") {
+
+        // Check tag names first
+        if (validTags.includes(child.tagName) === false) {
+          // somehow write a traceback that ascends the tree
+          throw Error(`Invalid tag name: ${child.tagName}`);
+        }
+
+        // Check attributes
+        const validPropertiesForThisTag = [
+          ...svgElementAttributes[child.tagName],
+          ...svgElementAttributes["*"],
+        ];
+        const invalidProperties = Object.keys(child.properties).filter(
+          (attr) => validPropertiesForThisTag.includes(attr) === false
+        );
+
+        if (invalidProperties.length > 0) {
+          throw Error(
+            `Invalid attributes for tag ${child.tagName}: ${invalidProperties.join(", ")}`
+          );
+        }
+      }
+      validateTagsAndProperties(child);
+    });
+  }
+}

packages/inspector/package.json

@@ -26,6 +26,8 @@
     "react-dom": "^18.0.0",
     "react-icons": "^4.3.1",
     "react-syntax-highlighter": "^15.5.0",
+    "svg-element-attributes": "^2.0.1",
+    "svg-parser": "^2.0.4",
     "ts-node": "^10.7.0",
     "typescript": "^4.6.3",
     "xml-formatter": "^2.6.1"

packages/inspector/pages/index.tsx

@@ -68,8 +68,8 @@ export default function Index() {
         </div>
         {error.length === 0 ? null : (
           <>
-            <div className="border-t border-t-red-500/50 flex flex-col w-full px-4 py-2 bg-red-500/10 text-label">
-              <div className="w-full text-sm font-bold text-red-500">Error parsing SVG</div>
+            <div className="border-t border-t-orange-500/50 flex flex-col w-full px-4 py-2 bg-red-500/10 text-label">
+              <div className="w-full text-sm font-bold text-orange-500">Error parsing SVG</div>
               <div className="w-full text-sm">{error}</div>
             </div>
           </>