React side of reproduction of alexmingoia/purescript-pux#132

.babelrc

@@ -0,0 +1,12 @@
+{
+  "plugins": [
+    ["module-resolver", {
+      "root": ["./src"],
+      "alias": {
+        "react": "preact-compat",
+        "react-dom": "preact-compat"
+      }
+    }]
+  ],
+  "presets": ["es2015", "react", "stage-0"]
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "pux-todomvc",
+  "name": "pux-todomvc-react",
   "version": "1.2.0",
   "description": "Pux TodoMVC.",
   "main": "support/index.js",
@@ -11,8 +11,10 @@
   "scripts": {
     "postinstall": "bower cache clean && bower install",
     "clean": "rimraf static/dist",
-    "build": "npm run clean && webpack --config ./webpack.config.js --progress --profile --colors",
-    "watch": "npm run clean && webpack-dev-server --content-base static/ --hot --inline --config webpack.config.js",
+    "build": "npm run clean && npm run build:babel && webpack --config ./webpack.config.js --progress --profile --colors",
+    "build:babel": "babel --out-dir src/App/Component src/App/Component/React",
+    "watch:babel": "babel --watch --out-dir src/App/Component src/App/Component/React",
+    "watch": "npm run clean && webpack-dev-server --watch --content-base static/ --hot --inline --config webpack.config.js",
     "serve": "npm run build && serve static",
     "start": "npm run watch",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -41,5 +43,12 @@
     "webpack-dev-server": "^2.4.5",
     "webpack-node-externals": "^1.5.4",
     "xhr2": "^0.1.3"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-plugin-module-resolver": "^2.7.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1"
   }
 }

src/App/Component/List.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.listComponent = undefined;
+
+var _preactCompat = require('preact-compat');
+
+var _preactCompat2 = _interopRequireDefault(_preactCompat);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var listComponent = exports.listComponent = function listComponent(_ref) {
+  var children = _ref.children;
+
+  console.log('listSort.children', children);
+  return _preactCompat2.default.createElement(
+    'ul',
+    null,
+    children
+  );
+};

src/App/Component/List.purs

@@ -0,0 +1,11 @@
+module App.Component where
+
+import React (ReactClass)
+
+import Pux.DOM.HTML (HTML)
+import Pux.Renderer.React (reactClass)
+
+foreign import listComponent :: ∀ props. ReactClass props
+
+list :: ∀ ev.  HTML ev -> HTML ev
+list = reactClass listComponent "list"

src/App/Component/React/List.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const listComponent = ({ children }) => {
+  console.log('listSort.children', children);
+  return (
+    <ul>
+      {children}
+    </ul>
+  );
+};

src/App/Events.purs

@@ -47,7 +47,7 @@ foldp (Navigate url ev) state =
   ]
 
 foldp (NewTodoInput ev) (State st) = noEffects $ State
-  if (eventToKeyPressed $ spy $ ev) == "Enter"
+  if (eventToKeyPressed ev) == "Enter"
     then st
       { newTodo = ""
       , todos = snoc st.todos $ Todo

src/App/View/TodoList.purs

@@ -4,6 +4,8 @@ import Prelude hiding (div)
 import App.Routes (Route(..))
 import App.State (State(..), Todo(..))
 import App.Events (Event(..))
+import App.Component (list)
+
 import Data.Array (filter, length)
 import Data.Foldable (for_)
 import Data.Monoid (mempty)
@@ -58,7 +60,7 @@ view (State st) =
       section ! className "main" $ do
         input ! className "toggle-all" ! type' "checkbox"
         label ! for "toggle-all" $ text "Mark all as complete"
-        ul ! className "todo-list" $ do
+        list ! className "todo-list" $ do
           for_ filtered item
       if ((length st.todos) == 0) then mempty else footer ! className "footer" $ do
         span ! className "todo-count" $ do