Add createPortal (#57)

* Add createPortal

* Simplify Makefiles

Author: spicydonuts

examples/component/Makefile

@@ -1,7 +1,6 @@
 all: node_modules
 	purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
-	purs bundle output/*/*.js > output/bundle.js
-	echo 'PS.Main.main();' >> output/bundle.js
+	purs bundle -m Main --main Main output/*/*.js > output/bundle.js
 	node_modules/.bin/browserify output/bundle.js -o html/index.js
 
 node_modules:

examples/controlled-input/Makefile

@@ -1,7 +1,6 @@
 all: node_modules
 	purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
-	purs bundle output/*/*.js > output/bundle.js
-	echo 'PS.Main.main();' >> output/bundle.js
+	purs bundle -m Main --main Main output/*/*.js > output/bundle.js
 	node_modules/.bin/browserify output/bundle.js -o html/index.js
 
 node_modules:

examples/counter/Makefile

@@ -1,7 +1,6 @@
 all: node_modules
 	purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
-	purs bundle output/*/*.js > output/bundle.js
-	echo 'PS.Main.main();' >> output/bundle.js
+	purs bundle -m Main --main Main output/*/*.js > output/bundle.js
 	node_modules/.bin/browserify output/bundle.js -o html/index.js
 
 node_modules:

src/React/Basic/DOM.js

@@ -18,6 +18,10 @@ exports.findDOMNode_ = function(instance) {
   return ReactDOM.findDOMNode(instance);
 };
 
+exports.createPortal_ = function(jsx, node) {
+  return ReactDOM.createPortal(jsx, node);
+};
+
 exports.mergeStyles = function(styles) {
   return Object.assign.apply(null, [ {} ].concat(styles));
 };

src/React/Basic/DOM.purs

@@ -13,6 +13,7 @@ module React.Basic.DOM
   , hydrate'
   , unmount
   , findDOMNode
+  , createPortal
   , text
   , css
   , mergeStyles
@@ -22,6 +23,7 @@ module React.Basic.DOM
 import Prelude
 
 import Data.Either (Either)
+import Data.Function.Uncurried (Fn2, runFn2)
 import Data.Maybe (Maybe(..))
 import Data.Nullable (Nullable, toMaybe)
 import Effect (Effect)
@@ -98,6 +100,14 @@ findDOMNode instance_ = try do
 -- | Warning: Relies on `ReactDOM.findDOMNode` which may throw exceptions
 foreign import findDOMNode_ :: EffectFn1 ComponentInstance (Nullable Node)
 
+-- | Divert a render tree into a separate DOM node. The node's
+-- | content will be overwritten and managed by React, similar
+-- | to `render` and `hydrate`.
+createPortal :: JSX -> Element -> JSX
+createPortal = runFn2 createPortal_
+
+foreign import createPortal_ :: Fn2 JSX Element JSX
+
 -- | Create a text node.
 text :: String -> JSX
 text = unsafeCoerce