Removed SharedProps in favour of "*" from react-html-attributes (#84)

* Codegen now supports global and React-specific attributes.

These are the ones stored under the key "*" in react-html-attributes.
How to handle some of these is currently unclear (to me).

Fixes #83.

* codegen: support dangerouslySetInnerHTML as a plain record.

* codegen: resolved TODO attributes, turned out all to be Strings.

Needed to look into the React source code, see
https://github.com/facebook/react/blob/master/fixtures/attribute-behavior/AttributeTableSnapshot.md

They are apparently not documented anywhere else that I could find.

* codegen: HTML attribute types may differ across containing elements.

* Bumped version of react-html-attributes we depend on.

Fixes #76.

* Use own copy of react-html-attributes.

Currently unmodified 1.4.6.

* Removed SharedProps, in favour of "*" in react-html-attributes.

* Added global attribute "ref".

* Updated generated-docs.

Author: tesujimath

codegen/consts.js

@@ -1,43 +1,93 @@
-module.exports.props = require("react-html-attributes");
+// 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.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.
+// These appear in the typesByElement object, using "*" as a default element
+// (required only if the default attribute type is other than `String`).
+// For clarity, it is an error for any attribute to be in both `types` and `typesByElement`.
+module.exports.typesByElement = {
+  "cols": {
+    "textarea": "Int",
+  },
+  "max": {
+    "meter": "Number",
+    "progress": "Number"
+  },
+  "min": {
+    "meter": "Number"
+  },
+  "rows": {
+    "textarea": "Int"
+  },
+  "size" : {
+    "input": "Int",
+    "select": "Int"
+  }
+};
 module.exports.types = {
   "allowFullScreen": "Boolean",
+  "allowTransparency": "Boolean",
   "async": "Boolean",
+  "autoComplete": "Boolean",
+  "autoFocus": "Boolean",
   "autoPlay": "Boolean",
   "capture": "Boolean",
   "checked": "Boolean",
   "children": "Array JSX",
-  "cols": "Number",
+  "colSpan": "Int",
+  "contentEditable": "Boolean",
   "controls": "Boolean",
+  "dangerouslySetInnerHTML": "{ __html :: String }",
   "default": "Boolean",
   "defer": "Boolean",
   "disabled": "Boolean",
+  "draggable": "Boolean",
   "formNoValidate": "Boolean",
   "hidden": "Boolean",
   "itemScope": "Boolean",
   "loop": "Boolean",
-  "max": "Number",
-  "min": "Number",
+  "maxLength": "Int",
+  "minLength": "Int",
   "multiple": "Boolean",
   "muted": "Boolean",
+  "noValidate": "Boolean",
+  "onBlur": "EventHandler",
+  "onChange": "EventHandler",
   "onClick": "EventHandler",
+  "onFocus": "EventHandler",
   "onInput": "EventHandler",
   "onInvalid": "EventHandler",
+  "onKeyDown": "EventHandler",
+  "onKeyPress": "EventHandler",
+  "onKeyUp": "EventHandler",
+  "onMouseDown": "EventHandler",
+  "onMouseEnter": "EventHandler",
+  "onMouseLeave": "EventHandler",
+  "onMouseMove": "EventHandler",
+  "onMouseOut": "EventHandler",
+  "onMouseOver": "EventHandler",
+  "onMouseUp": "EventHandler",
   "onSubmit": "EventHandler",
-  "noValidate": "Boolean",
-  "onChange": "EventHandler",
   "open": "Boolean",
   "playsInline": "Boolean",
   "readOnly": "Boolean",
+  "ref": "Ref (Nullable Node)",
   "required": "Boolean",
   "reversed": "Boolean",
-  "rowSpan": "Number",
-  "rows": "Number",
+  "rowSpan": "Int",
   "scoped": "Boolean",
   "seamless": "Boolean",
   "selected": "Boolean",
-  "size": "Number",
-  "span": "Number",
-  "start": "Number"
+  "span": "Int",
+  "spellCheck": "Boolean",
+  "srcDoc": "JSX",
+  "start": "Int",
+  "style": "CSS",
+  "suppressContentEditableWarning": "Boolean",
+  "tabIndex": "Int",
+  "unselectable": "Boolean"
 };
 module.exports.reserved = ["module", "data", "type", "newtype", "class", "instance", "where", "derive", "if", "then", "else", "case", "of"];

codegen/index.js

@@ -1,5 +1,5 @@
 const fs = require("fs");
-const { props, voids, types, reserved } = require("./consts");
+const { props, voids, types, typesByElement, reserved } = require("./consts");
 const genFile = "../src/React/Basic/DOM/Generated.purs";
 
 const header = `-- | ----------------------------------------
@@ -8,17 +8,31 @@ const header = `-- | ----------------------------------------
 
 module React.Basic.DOM.Generated where
 
+import Data.Nullable (Nullable)
 import Prim.Row (class Union)
-import React.Basic (JSX, element)
-import React.Basic.DOM.Internal (SharedProps, unsafeCreateDOMComponent)
+import Web.DOM (Node)
+import React.Basic (JSX, Ref, element)
+import React.Basic.DOM.Internal (CSS, unsafeCreateDOMComponent)
 import React.Basic.Events (EventHandler)
 
 `;
 
-const printRecord = elProps =>
+const propType = (e, p) => {
+  const elPropTypes = typesByElement[p];
+  if (elPropTypes) {
+    if (types[p]) {
+      throw new TypeError(`${p} appears in both types and typesByElement`);
+    }
+    return elPropTypes[e] || elPropTypes["*"] || "String";
+  } else {
+    return types[p] || "String";
+  }
+}
+
+const printRecord = (e, elProps) =>
   elProps.length
     ? `
-  ( ${elProps.map(p => `${p} :: ${types[p] || "String"}`).join("\n  , ")}
+  ( ${elProps.map(p => `${p} :: ${propType(e, p)}`).join("\n  , ")}
   )`
     : "()";
 
@@ -27,13 +41,13 @@ const domTypes = props.elements.html
     const noChildren = voids.includes(e);
     const symbol = reserved.includes(e) ? `${e}'` : e;
     return `
-    type Props_${e} =${printRecord(
-      (noChildren ? [] : ["children"]).concat(props[e] || []).sort()
+    type Props_${e} =${printRecord(e,
+      (noChildren ? [] : ["children"]).concat(props[e] || [], props["*"] || []).sort()
     )}
 
     ${symbol}
       :: forall attrs attrs_
-       . Union attrs attrs_ (SharedProps Props_${e})
+       . Union attrs attrs_ Props_${e}
       => Record attrs
       -> JSX
     ${symbol} = element (unsafeCreateDOMComponent "${e}")${

codegen/package.json

@@ -5,6 +5,6 @@
   "main": "index.js",
   "author": "",
   "dependencies": {
-    "react-html-attributes": "^1.4.3"
+    "react-html-attributes": "^1.4.6"
   }
 }