diff --git a/examples/component/Makefile b/examples/component/Makefile index 8c34d8c..ecacfbe 100644 --- a/examples/component/Makefile +++ b/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: diff --git a/examples/controlled-input/Makefile b/examples/controlled-input/Makefile index 8c34d8c..ecacfbe 100644 --- a/examples/controlled-input/Makefile +++ b/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: diff --git a/examples/counter/Makefile b/examples/counter/Makefile index 8c34d8c..ecacfbe 100644 --- a/examples/counter/Makefile +++ b/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: diff --git a/src/React/Basic/DOM.js b/src/React/Basic/DOM.js index 51527c6..eee88bc 100644 --- a/src/React/Basic/DOM.js +++ b/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)); }; diff --git a/src/React/Basic/DOM.purs b/src/React/Basic/DOM.purs index fea3d84..53fa16d 100644 --- a/src/React/Basic/DOM.purs +++ b/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