Add a module with types for SVG elements (#87)

* Add types for SVG elements

Adds a new module, React.Basic.DOM.SVG, with types for SVG
elements. The types are generated based on the svg-element-attribute npm
package. There were a few hyphenated elements (e.g. <font-face>) that
looked like they might be troublesome with React. I couldn't find any
information on whether React supports these, but they turned out to
be deprecated according to MDN, so in the end I omitted all the
deprecated elements.

* Fix the Props_svg type in React.Basic.DOM

The Props_svg type was generated from react-html-attributes, but
react-html-attributes intentionally lists the wrong set of attributes
for the svg tag:

"One more note: all SVG element attributes supported by React are under
the 'svg' key to avoid too many duplicated values and unnecessary file
size." (https://www.npmjs.com/package/react-html-attributes)

The attributes for Props_svg are now taken from svg-element-attributes
instead, so the Props_svg in React.Basic.DOM is now the same as the
Props_svg in React.Basic.DOM.SVG apart from using the HTML shared props
instead of the SVG ones.

* Fix SharedSVGProps

Add the missing row type parameter

* Remove redundant import

* Add 'style' to SharedSVGProps with correct type

Author: kryft

codegen/consts.js

@@ -1,7 +1,8 @@
 // For now, we are using a local copy of react-html-attributes.
 // Eventually, the relative path here should be removed, and
 // the version number of react-html-attributes should be bumped.
-module.exports.props = require("./react-html-attributes");
+module.exports.htmlProps = require("./react-html-attributes");
+module.exports.svgProps = require("svg-element-attributes");
 
 module.exports.voids = ["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"];
 // The types for certain attributes differ according to their containing element.

codegen/index.js

@@ -1,8 +1,10 @@
 const fs = require("fs");
-const { props, voids, types, typesByElement, reserved } = require("./consts");
-const genFile = "../src/React/Basic/DOM/Generated.purs";
+const { htmlProps, svgProps, voids, types, typesByElement, reserved } = require("./consts");
+const changeCase = require('change-case')
+const htmlGenFile = "../src/React/Basic/DOM/Generated.purs";
+const svgGenFile = "../src/React/Basic/DOM/SVG.purs";
 
-const header = `-- | ----------------------------------------
+const htmlHeader = `-- | ----------------------------------------
 -- | THIS FILE IS GENERATED -- DO NOT EDIT IT
 -- | ----------------------------------------
 
@@ -29,25 +31,66 @@ const propType = (e, p) => {
   }
 }
 
+const svgHeader = `-- | ----------------------------------------
+-- | THIS FILE IS GENERATED -- DO NOT EDIT IT
+-- | ----------------------------------------
+
+module React.Basic.DOM.SVG where
+
+import Prim.Row (class Union)
+import React.Basic (JSX, element)
+import React.Basic.DOM.Internal (SharedSVGProps, unsafeCreateDOMComponent)
+
+`;
+
+const ignoredSvgPropKeys = [
+  '*', 'elements',
+  // These are all deprecated according to MDN, and I'm not sure what the
+  // React representation should be for the hyphenated ones if they are
+  // supported all, so let's exclude them
+  "font", "glyph", "hkern", "missing-glyph", "vkern",
+  "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri",
+  "altGlyph", "altGlyphDef", "altGlyphItem", "glyphRef",
+  "tref", "color-profile", "cursor",
+]
+
+const camelCaseSvgProps = {}
+Object.keys(svgProps).forEach(elName => {
+  if (!ignoredSvgPropKeys.includes(elName)) {
+    const elAttrs = svgProps[elName].map(changeCase.camelCase);
+    // style is already included in SharedSVGProps
+    delete elAttrs['style'];
+    camelCaseSvgProps[elName] = elAttrs;
+  }
+});
+
+// The attribute list for <svg> in react-html-attributes
+// is wrong (it contains the union of the attributes of all
+// svg elements)
+htmlProps['svg'] = camelCaseSvgProps['svg'];
+
 const printRecord = (e, elProps) =>
   elProps.length
     ? `
   ( ${elProps.map(p => `${p} :: ${propType(e, p)}`).join("\n  , ")}
   )`
     : "()";
 
-const domTypes = props.elements.html
-  .map(e => {
+const generatePropTypes = (elements, props, sharedPropType) => 
+  elements.map(e => {
     const noChildren = voids.includes(e);
     const symbol = reserved.includes(e) ? `${e}'` : e;
+
+    const propType = sharedPropType ? `(${sharedPropType} Props_${e})` : `Props_${e}`
+
     return `
     type Props_${e} =${printRecord(e,
       (noChildren ? [] : ["children"]).concat(props[e] || [], props["*"] || []).sort()
     )}
 
     ${symbol}
       :: forall attrs attrs_
-       . Union attrs attrs_ Props_${e}
+       . Union attrs attrs_ ${propType}
       => Record attrs
       -> JSX
     ${symbol} = element (unsafeCreateDOMComponent "${e}")${
@@ -59,10 +102,14 @@ const domTypes = props.elements.html
     ${e}_ children = ${symbol} { children }`
     }
 `;
-  })
-  .map(x => x.replace(/^\n\ {4}/, "").replace(/\n\ {4}/g, "\n"))
+  }).map(x => x.replace(/^\n\ {4}/, "").replace(/\n\ {4}/g, "\n"))
   .join("\n");
 
-console.log(`Writing "${genFile}" ...`);
-fs.writeFileSync(genFile, header + domTypes);
+const htmlTagTypes = generatePropTypes(htmlProps.elements.html, htmlProps, null);
+const svgTagTypes = generatePropTypes(Object.keys(camelCaseSvgProps), camelCaseSvgProps, 'SharedSVGProps');
+
+console.log(`Writing "${htmlGenFile}" ...`);
+fs.writeFileSync(htmlGenFile, htmlHeader + htmlTagTypes);
+console.log(`Writing "${svgGenFile}" ...`);
+fs.writeFileSync(svgGenFile, svgHeader + svgTagTypes);
 console.log("Done.");

codegen/package.json

@@ -5,6 +5,8 @@
   "main": "index.js",
   "author": "",
   "dependencies": {
-    "react-html-attributes": "^1.4.6"
+    "react-html-attributes": "^1.4.6",
+    "change-case": "^3.1.0",
+    "svg-element-attributes": "^1.3.0"
   }
 }