Add support for 'data-*' attributes

Author: maddie927

bower.json

@@ -1,7 +1,12 @@
 {
   "name": "purescript-react-basic",
   "license": "Apache-2.0",
-  "ignore": ["**/.*", "node_modules", "bower_components", "output"],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "output"
+  ],
   "repository": {
     "type": "git",
     "url": "git://github.com/lumihq/purescript-react-basic.git"
@@ -17,6 +22,7 @@
     "purescript-unsafe-coerce": "^4.0.0",
     "purescript-web-dom": ">=1.0.0 <4.0.0",
     "purescript-web-html": ">=1.0.0 <3.0.0",
-    "purescript-web-events": ">=1.0.0 <3.0.0"
+    "purescript-web-events": ">=1.0.0 <3.0.0",
+    "purescript-foreign-object": "^2.0.3"
   }
 }

codegen/consts.js

@@ -29,6 +29,7 @@ module.exports.typesByElement = {
   }
 };
 module.exports.types = {
+  "_data": "Object String",
   "allowFullScreen": "Boolean",
   "allowTransparency": "Boolean",
   "async": "Boolean",

codegen/index.js

@@ -11,6 +11,7 @@ const htmlHeader = `-- | ----------------------------------------
 module React.Basic.DOM.Generated where
 
 import Data.Nullable (Nullable)
+import Foreign.Object (Object)
 import Prim.Row (class Union)
 import Web.DOM (Node)
 import React.Basic (JSX, Ref, element)
@@ -37,6 +38,7 @@ const svgHeader = `-- | ----------------------------------------
 
 module React.Basic.DOM.SVG where
 
+import Foreign.Object (Object)
 import Prim.Row (class Union)
 import React.Basic (JSX, element)
 import React.Basic.DOM.Internal (SharedSVGProps, unsafeCreateDOMComponent)
@@ -98,7 +100,7 @@ const generatePropTypes = (elements, props, sharedPropType) =>
 
     return `
     type Props_${e} =${printRecord(e,
-      (noChildren ? [] : ["children"]).concat(props[e] || [], props["*"] || []).sort()
+      (noChildren ? [] : ["children", "_data"]).concat(props[e] || [], props["*"] || []).sort()
     )}
 
     ${symbol}

examples/async/src/AsyncCounter.purs

@@ -37,7 +37,7 @@ asyncCounter = make component { initialState, render }
         , keyed (show self.state) $
             asyncWithLoader (R.text "Loading...") do
               liftEffect $ log "start"
-              delay $ Milliseconds 2000.0
+              delay $ Milliseconds 1000.0
               liftEffect $ log "done"
               pure $ R.text $ "Done: " <> show self.state
         ]

src/React/Basic.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var React = require("react");
+var createElement = React.createElement;
 var Fragment = React.Fragment || "div";
 
 exports.createComponent = (function() {
@@ -160,20 +161,36 @@ exports.make = function(_unionDict) {
 exports.empty = null;
 
 exports.keyed_ = function(key, child) {
-  return React.createElement(Fragment, { key: key }, child);
+  return createElement(Fragment, { key: key }, child);
 };
 
-exports.element_ = function(component, props) {
-  return React.createElement.apply(
+function flattenDataProp(component, props) {
+  var data = null;
+  if (typeof component === "string" && props._data != null) {
+    data = { _data: undefined };
+    Object.entries(props._data).forEach(function(entry) {
+      data["data-" + entry[0]] = entry[1];
+    });
+  }
+  return data == null ? props : Object.assign({}, props, data);
+}
+
+exports.element_ = function(component, props, areChildrenDynamic) {
+  var args = [component, flattenDataProp(component, props)];
+  return createElement.apply(
     null,
-    [component, props].concat((props && props.children) || null)
+    areChildrenDynamic || props.children == null
+      ? args
+      : args.concat(props.children)
   );
 };
 
-exports.elementKeyed_ = exports.element_;
+exports.elementKeyed_ = function(component, props) {
+  return exports.element_(component, props, true);
+};
 
 exports.fragment = function(children) {
-  return React.createElement.apply(null, [Fragment, {}].concat(children));
+  return createElement.apply(null, [Fragment, null].concat(children));
 };
 
 exports.displayNameFromComponent = function($$type) {
@@ -210,7 +227,7 @@ exports.toReactComponent = function(_unionDict) {
             $$props: fromJSProps(this.props),
             $$spec: $$specPadded
           };
-          return React.createElement($$type, props);
+          return createElement($$type, props);
         };
 
         return Component;
@@ -220,7 +237,7 @@ exports.toReactComponent = function(_unionDict) {
 };
 
 exports.createContext = function(defaultValue) {
-  return function () {
+  return function() {
     return React.createContext(defaultValue);
   };
 };

src/React/Basic/DOM.js

@@ -23,5 +23,5 @@ exports.createPortal_ = function(jsx, node) {
 };
 
 exports.mergeStyles = function(styles) {
-  return Object.assign.apply(null, [ {} ].concat(styles));
+  return Object.assign.apply(null, [{}].concat(styles));
 };