API Refactor

README.md

@@ -21,36 +21,36 @@ bower install git@github.com:lumihq/purescript-react-basic.git
 Here is an example component which renders a label read from props along with a counter:
 
 ```purescript
-module React.Basic.Example where
+module Counter where
 
 import Prelude
 
-import React.Basic (ReactComponent, react)
+import React.Basic as React
 import React.Basic.DOM as R
 import React.Basic.Events as Events
 
 -- The props for the component
-type ExampleProps =
+type Props =
   { label :: String
   }
 
 -- Create a component by passing a record to the `react` function.
 -- The `render` function takes the props and current state, as well as a
 -- state update callback, and produces a document.
-component :: ReactComponent ExampleProps
-component = react { displayName: "Counter", initialState, receiveProps, render }
+component :: React.Component Props
+component = React.component { displayName: "Counter", initialState, receiveProps, render }
   where
     initialState =
       { counter: 0
       }
 
-    receiveProps _ _ _ =
+    receiveProps _ =
       pure unit
 
-    render props state setState =
+    render { props, state, setState } =
       R.button
         { onClick: Events.handler_ do
-                     setState \s -> s { counter = s.counter + 1 }
+            setState \s -> s { counter = s.counter + 1 }
         , children: [ R.text (props.label <> ": " <> show state.counter) ]
         }
 ```

bower.json

@@ -17,6 +17,12 @@
     "purescript-nullable": "^4.0.0",
     "purescript-typelevel-prelude": "^3.0.0",
     "purescript-record": "^1.0.0",
-    "purescript-effect": "^2.0.0"
+    "purescript-effect": "^2.0.0",
+    "purescript-web-events": "^1.0.0",
+    "purescript-web-dom": "^1.0.0",
+    "purescript-exceptions": "^4.0.0"
+  },
+  "devDependencies": {
+    "purescript-web-html": "^1.0.0"
   }
 }

codegen/index.js

@@ -1,12 +1,27 @@
+const fs = require('fs');
 const { props, voids, types, reserved } = require('./consts');
+const genFile = "../src/React/Basic/DOM/Generated.purs";
+
+const header = `-- | ----------------------------------------
+-- | THIS FILE IS GENERATED -- DO NOT EDIT IT
+-- | ----------------------------------------
+
+module React.Basic.DOM.Generated where
+
+import Prim.Row (class Union)
+import React.Basic (JSX, element)
+import React.Basic.DOM.Internal (SharedProps, unsafeCreateDOMComponent)
+import React.Basic.Events (EventHandler)
+
+`;
 
 const printRecord = (elProps) => elProps.length ? `
   ( ${ elProps.map((p) =>
        `${p} :: ${types[p] || "String"}`).join("\n  , ")
      }
   )` : "()"
 
-props.elements.html
+const domTypes = props.elements.html
   .map((e) => {
     const noChildren = voids.includes(e);
     const symbol = reserved.includes(e) ? `${e}'` : e;
@@ -20,11 +35,15 @@ props.elements.html
        . Union attrs attrs_ (SharedProps Props_${e})
       => Record attrs
       -> JSX
-    ${symbol} = createElement (unsafeCreateDOMComponent "${e}")${
+    ${symbol} = element (unsafeCreateDOMComponent "${e}")${
       noChildren ? "" : `
 
     ${e}_ :: Array JSX -> JSX
     ${e}_ children = ${symbol} { children }`
     }
 `;
-}).forEach((x) => console.log(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);
+console.log("Done.");

examples/component/Makefile

@@ -1,8 +1,9 @@
 all: node_modules
 	purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
-	purs bundle --module Container output/*/*.js > output/bundle.js
-	echo 'module.exports = PS.Container;' >> output/bundle.js
-	node_modules/.bin/browserify output/bundle.js index.js -o html/index.js
+	purs bundle output/*/*.js > output/bundle.js
+	echo 'PS.Main.main();' >> output/bundle.js
+	node_modules/.bin/browserify output/bundle.js -o html/index.js
 
 node_modules:
 	npm install
+

examples/component/package.json

@@ -1,14 +1,9 @@
 {
-  "name": "component",
-  "version": "1.0.0",
-  "description": "",
-  "keywords": [],
-  "author": "",
   "dependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2"
   },
   "devDependencies": {
-    "browserify": "^16.1.0"
+    "browserify": "^16.2.2"
   }
 }

examples/component/src/Container.purs

@@ -1,16 +1,16 @@
 module Container where
 
-import React.Basic (ReactComponent, createElement, stateless)
+import React.Basic as React
 import React.Basic.DOM as R
 import ToggleButton as ToggleButton
 
-component :: ReactComponent {}
-component = stateless { displayName: "Container", render }
+component :: React.Component {}
+component = React.stateless { displayName: "Container", render }
   where
     render _ =
       R.div
         { children:
-            [ createElement ToggleButton.component { on: true }
-            , createElement ToggleButton.component { on: false }
+            [ React.element ToggleButton.component { on: true }
+            , React.element ToggleButton.component { on: false }
             ]
         }

examples/component/src/Main.purs

@@ -0,0 +1,23 @@
+module Main where
+
+import Prelude
+
+import Container as Container
+import Data.Maybe (Maybe(..))
+import Effect (Effect)
+import Effect.Exception (throw)
+import React.Basic (element)
+import React.Basic.DOM (render)
+import Web.DOM.NonElementParentNode (getElementById)
+import Web.HTML (window)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.Window (document)
+
+main :: Effect Unit
+main = do
+  container <- getElementById "container" =<< (map toNonElementParentNode $ document =<< window)
+  case container of
+    Nothing -> throw "Container element not found."
+    Just c  ->
+      let app = element Container.component {}
+       in render app c

examples/component/src/ToggleButton.purs

@@ -2,24 +2,24 @@ module ToggleButton where
 
 import Prelude
 
-import React.Basic (ReactComponent, react)
+import React.Basic as React
 import React.Basic.DOM as R
 import React.Basic.Events as Events
 
-type ExampleProps =
+type Props =
   { on :: Boolean
   }
 
-component :: ReactComponent ExampleProps
-component = react { displayName: "ToggleButton", initialState, receiveProps, render }
+component :: React.Component Props
+component = React.component { displayName: "ToggleButton", initialState, receiveProps, render }
   where
     initialState =
       { on: false }
 
-    receiveProps props _ setState =
+    receiveProps { props, setState } =
       setState _ { on = props.on }
 
-    render _ state setState =
+    render { state, setState } =
       R.button
         { onClick: Events.handler_ (setState \s -> s { on = not s.on })
         , children: [ R.text if state.on then "On" else "Off" ]

examples/controlled-input/Makefile

@@ -1,8 +1,9 @@
 all: node_modules
 	purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
-	purs bundle --module ControlledInput output/*/*.js > output/bundle.js
-	echo 'module.exports = PS.ControlledInput;' >> output/bundle.js
-	node_modules/.bin/browserify output/bundle.js index.js -o html/index.js
+	purs bundle output/*/*.js > output/bundle.js
+	echo 'PS.Main.main();' >> output/bundle.js
+	node_modules/.bin/browserify output/bundle.js -o html/index.js
 
 node_modules:
 	npm install
+

examples/controlled-input/package.json

@@ -1,15 +1,9 @@
 {
-  "name": "counter",
-  "version": "1.0.0",
-  "description": "",
-  "keywords": [],
-  "author": "",
   "dependencies": {
-    "create-react-class": "^15.6.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2"
   },
   "devDependencies": {
-    "browserify": "^16.1.0"
+    "browserify": "^16.2.2"
   }
 }

examples/controlled-input/src/ControlledInput.purs

@@ -3,24 +3,24 @@ module ControlledInput where
 import Prelude
 
 import Data.Maybe (Maybe(..), fromMaybe, maybe)
-import React.Basic (ReactComponent, fragment, react)
+import React.Basic as React
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (preventDefault, targetValue, timeStamp)
 import React.Basic.Events as Events
 
-component :: ReactComponent {}
-component = react { displayName: "ControlledInput", initialState, receiveProps, render }
+component :: React.Component {}
+component = React.component { displayName: "ControlledInput", initialState, receiveProps, render }
   where
     initialState =
       { value: "hello world"
       , timeStamp: Nothing
       }
 
-    receiveProps _ _ _ =
+    receiveProps _ =
       pure unit
-      
-    render _ state setState =
-      fragment
+
+    render { state, setState } =
+      React.fragment
         [ R.input
             { onChange:
                 Events.handler

examples/controlled-input/src/Main.purs

@@ -0,0 +1,23 @@
+module Main where
+
+import Prelude
+
+import ControlledInput as ControlledInput
+import Data.Maybe (Maybe(..))
+import Effect (Effect)
+import Effect.Exception (throw)
+import React.Basic (element)
+import React.Basic.DOM (render)
+import Web.DOM.NonElementParentNode (getElementById)
+import Web.HTML (window)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.Window (document)
+
+main :: Effect Unit
+main = do
+  container <- getElementById "container" =<< (map toNonElementParentNode $ document =<< window)
+  case container of
+    Nothing -> throw "Container element not found."
+    Just c  ->
+      let app = element ControlledInput.component {}
+       in render app c

examples/counter/Makefile

@@ -1,8 +1,8 @@
 all: node_modules
 	purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
-	purs bundle --module Counter output/*/*.js > output/bundle.js
-	echo 'module.exports = PS.Counter;' >> output/bundle.js
-	node_modules/.bin/browserify output/bundle.js index.js -o html/index.js
+	purs bundle output/*/*.js > output/bundle.js
+	echo 'PS.Main.main();' >> output/bundle.js
+	node_modules/.bin/browserify output/bundle.js -o html/index.js
 
 node_modules:
 	npm install

examples/counter/package.json

@@ -1,15 +1,9 @@
 {
-  "name": "counter",
-  "version": "1.0.0",
-  "description": "",
-  "keywords": [],
-  "author": "",
   "dependencies": {
-    "create-react-class": "^15.6.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2"
   },
   "devDependencies": {
-    "browserify": "^16.1.0"
+    "browserify": "^16.2.2"
   }
 }