fixes parsing svg attributes and supports data set attributes

packages/html2react/src/libraries/__tests__/parse.tests.ts

@@ -26,4 +26,33 @@ describe("parse", () => {
     expect((result[1].props as any).for).toBeUndefined();
     expect(result[1].props.htmlFor).toBe("nothing");
   });
+
+  test("maps from SVG attributes to react props", () => {
+    const resultOne = parse(
+      '<svg viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"></svg>'
+    ) as Element[];
+
+    expect((resultOne[0].props as any)["xmlns:xlink"]).toBeUndefined();
+    expect((resultOne[0].props as any).xmlnsXlink).toBe(
+      "https://www.w3.org/1999/xlink"
+    );
+
+    const resultTwo = parse(
+      '<g stroke-width="1" fill-rule="evenodd"></g>'
+    ) as Element[];
+
+    expect((resultTwo[0].props as any)["stroke-width"]).toBeUndefined();
+    expect((resultTwo[0].props as any).strokeWidth).toBe("1");
+    expect((resultTwo[0].props as any)["fill-rule"]).toBeUndefined();
+    expect((resultTwo[0].props as any).fillRule).toBe("evenodd");
+  });
+
+  test("should not map data attributes as SVG attributes", () => {
+    const result = parse(
+      '<div data-src="https://frontity.org"></div>'
+    ) as Element[];
+
+    expect((result[0].props as any)["data-src"]).toBe("https://frontity.org");
+    expect((result[0].props as any).dataSrc).toBeUndefined();
+  });
 });

packages/html2react/src/libraries/parse/attributes/html.json

@@ -39,5 +39,7 @@
   "srcLang",
   "srcSet",
   "tabIndex",
-  "useMap"
+  "useMap",
+  "acceptCharset",
+  "httpEquiv"
 ]

packages/html2react/src/libraries/parse/index.ts

@@ -30,16 +30,14 @@ const adaptNode: AdaptNode = (himalayaNode, parent) => {
             props.className = value;
           } else if (key === "for") {
             props.htmlFor = value;
-          } else if (key === "accept-charset") {
-            props["acceptCharset"] = value;
-          } else if (key === "http-equiv") {
-            props["httpEquiv"] = value;
-
-            // Add inline styles to the component with `emotion`.
+          } else if (/^data-/.test(key)) {
+            props[key] = value;
           } else if (key === "style") {
+            // Add inline styles to the component with `emotion`.
             props.css = css(value);
           } else if (!/^on/.test(key)) {
-            const camelCaseKey = attributesMap[key.toLowerCase()];
+            const camelCaseKey =
+              attributesMap[key.replace(/[-:]/, "").toLowerCase()];
             // Map keys with no value to `true` booleans.
             props[camelCaseKey || key] = value === null ? true : value;
           }