Add childish dom codegen

Design:

- For each HTML element there's a single function, suffixed with underscore, like `div_`, `body_`, `data_`, `main_`. The "add an underscore suffix to **every** name" idea is taken from [lucid](https://chrisdone.com/posts/lucid#naming-issues).
- Functions for void elements simply take the props record.
- Other functions take props record and an array of children.
- If no props need to be specified, the record can be left empty:
  `div_ {} [ text "Foo", text "Bar" ]`

The advantage is that this:

- Avoids name collisions with some "standard" and reserved names
  (`a`, `b`, head`, `div`). However, I'm debating the usefullness of that
	since the module could be just use qualified and the only reserved
  name conflict is `data`.
- This model maps to DOM tree model in a more straightforward way
  (each leaf is a tag with attributes and a children tree), very
  similar to XML/JSX. This also makes codegen simpler (no need to
  insert the extra `children` property into `Prop` type or do name
  mangling)
- Makes it much easier to make and review changes. Especially
  switching from an element with no props (`div_ []`) to an element
	with a prop `div { className: "foo", children: [] }`.

Author: zudov

codegen/childish.js

@@ -0,0 +1,104 @@
+const props = require("react-html-attributes");
+
+const voids = ["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"];
+
+const types = {
+  "allowFullScreen": "Boolean",
+  "async": "Boolean",
+  "autoPlay": "Boolean",
+  "capture": "Boolean",
+  "checked": "Boolean",
+  "children": "Array JSX",
+  "cols": "Number",
+  "controls": "Boolean",
+  "default": "Boolean",
+  "defer": "Boolean",
+  "disabled": "Boolean",
+  "formNoValidate": "Boolean",
+  "hidden": "Boolean",
+  "itemScope": "Boolean",
+  "loop": "Boolean",
+  "max": "Number",
+  "min": "Number",
+  "multiple": "Boolean",
+  "muted": "Boolean",
+  "onClick": "EventHandler",
+  "onInput": "EventHandler",
+  "onInvalid": "EventHandler",
+  "onSubmit": "EventHandler",
+  "noValidate": "Boolean",
+  "onChange": "EventHandler",
+  "open": "Boolean",
+  "playsInline": "Boolean",
+  "readOnly": "Boolean",
+  "required": "Boolean",
+  "reversed": "Boolean",
+  "rowSpan": "Number",
+  "rows": "Number",
+  "scoped": "Boolean",
+  "seamless": "Boolean",
+  "selected": "Boolean",
+  "size": "Number",
+  "span": "Number",
+  "start": "Number"
+};
+
+printRecord = (elProps) => elProps.length ? `
+  ( ${ elProps.map((p) =>
+       `${p} :: ${types[p] || "String"}`).join("\n  , ")
+     }
+  )` : "()"
+
+const header =
+`
+module React.Basic.DOM.Childish
+  ( module React.Basic.DOM
+  , module React.Basic.DOM.Childish
+  ) where
+
+import Prim.Row (class Union)
+import React.Basic (JSX, ReactComponent, createElement, createElementKeyed)
+import React.Basic.DOM (text, CSS, css, mergeStyles, SharedProps, unsafeCreateDOMComponent)
+import React.Basic.Events (EventHandler)
+import Record (union)
+
+createChildishElement
+  :: forall children props
+   . ReactComponent { children :: children | props }
+  -> { | props }
+  -> children
+  -> JSX
+createChildishElement component props children =
+  createElement component (union { children } props)
+
+createChildishKeyedElement
+  :: forall children props
+   . ReactComponent { children :: children | props }
+  -> { key :: String | props }
+  -> children
+  -> JSX
+createChildishKeyedElement component props children =
+  createElementKeyed component (union { children } props)
+
+-- | -------------------------------
+-- | GENERATED CODE BELOW THIS LINE!
+-- | -------------------------------
+`.trim();
+
+console.log(header);
+console.log();
+
+props.elements.html
+  .map((e) => {
+    const noChildren = voids.includes(e);
+    return `
+    type Props_${e} =${printRecord((props[e] || []).sort())}
+
+    ${e}_
+      :: forall attrs attrs_
+       . Union attrs attrs_ (SharedProps Props_${e})
+      => Record attrs${noChildren ? "" : ` -> Array JSX`}
+      -> JSX
+    ${e}_ = ${noChildren ? "createElement" : "createChildishElement"} (unsafeCreateDOMComponent "${e}")
+`;
+}).forEach((x) => console.log(x.replace(/^\n\ {4}/, "").replace(/\n\ {4}/g, "\n")))