diff --git a/README.md b/README.md index f263f4e..2a2e03e 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,13 @@ Low-level React DOM bindings for PureScript - [Module Documentation](docs/) + +## Installation + +``` +bower install purescript-react-dom +``` + +## Example + +Please refer to [purescript-react-example](https://github.com/ethul/purescript-react-example) diff --git a/bower.json b/bower.json index 83da363..5d5d180 100644 --- a/bower.json +++ b/bower.json @@ -1,8 +1,22 @@ { "name": "purescript-react-dom", + "description": "PureScript bindings for react-dom", "main": "", + "keywords": [ + "purescript", + "react" + ], + "license": "MIT", "ignore": [ "*", "!src/**/*" - ] + ], + "repository": { + "type": "git", + "url": "git://github.com/purescript-contrib/purescript-react-dom.git" + }, + "dependencies": { + "purescript-dom": "~0.2.15", + "purescript-react": "~0.6.0" + } } diff --git a/docs/ReactDOM.md b/docs/ReactDOM.md new file mode 100644 index 0000000..0fb76be --- /dev/null +++ b/docs/ReactDOM.md @@ -0,0 +1,43 @@ +## Module ReactDOM + +#### `render` + +``` purescript +render :: forall eff. ReactElement -> Element -> Eff (dom :: DOM | eff) (Maybe ReactComponent) +``` + +Render a React element in a document element. Returns Nothing for stateless components. + +#### `unmountComponentAtNode` + +``` purescript +unmountComponentAtNode :: forall eff. Element -> Eff (dom :: DOM | eff) Boolean +``` + +Removes a mounted React element in a document element. Returns true if it was unmounted, false otherwise. + +#### `findDOMNode` + +``` purescript +findDOMNode :: forall eff. ReactComponent -> Eff (dom :: DOM | eff) Element +``` + +Finds the DOM node rendered by the component. + +#### `renderToString` + +``` purescript +renderToString :: ReactElement -> String +``` + +Render a React element as a string. + +#### `renderToStaticMarkup` + +``` purescript +renderToStaticMarkup :: ReactElement -> String +``` + +Render a React element as static markup string without extra DOM attributes. + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..7419f60 --- /dev/null +++ b/package.json @@ -0,0 +1,7 @@ +{ + "name": "purescript-react-dom", + "files": [], + "peerDependencies": { + "react-dom": "^0.14.6" + } +} diff --git a/src/ReactDOM.js b/src/ReactDOM.js new file mode 100644 index 0000000..ea7983c --- /dev/null +++ b/src/ReactDOM.js @@ -0,0 +1,34 @@ +/* global exports */ +"use strict"; + +// module ReactDOM + +var ReactDOM = require('react-dom'); + +var ReactDOMServer = require('react-dom/server'); + +function renderFn(nothing, just, element, container) { + return function(){ + var result = ReactDOM.render(element, container); + return result === null ? nothing : just(result); + } +} +exports.renderFn = renderFn; + +function unmountComponentAtNode(container) { + return function(){ + return ReactDOM.unmountComponentAtNode(container); + }; +} +exports.unmountComponentAtNode = unmountComponentAtNode; + +function findDOMNode(component) { + return function(){ + return ReactDOM.findDOMNode(component); + }; +} +exports.findDOMNode = findDOMNode; + +exports.renderToString = ReactDOMServer.renderToString; + +exports.renderToStaticMarkup = ReactDOMServer.renderToStaticMarkup; diff --git a/src/ReactDOM.purs b/src/ReactDOM.purs new file mode 100644 index 0000000..fc2dfb7 --- /dev/null +++ b/src/ReactDOM.purs @@ -0,0 +1,40 @@ +module ReactDOM + ( render + , unmountComponentAtNode + , findDOMNode + , renderToString + , renderToStaticMarkup + ) where + +import Control.Monad.Eff (Eff()) + +import Data.Function (Fn4(), runFn4) +import Data.Maybe (Maybe(..)) + +import DOM (DOM()) +import DOM.Node.Types (Element()) + +import React (ReactElement(), ReactComponent()) + +-- | Render a React element in a document element. Returns Nothing for stateless components. +render :: forall eff. ReactElement -> Element -> Eff (dom :: DOM | eff) (Maybe ReactComponent) +render = runFn4 renderFn Nothing Just + +foreign import renderFn + :: forall eff. Fn4 (Maybe ReactComponent) + (ReactComponent -> Maybe ReactComponent) + ReactElement + Element + (Eff (dom :: DOM | eff) (Maybe ReactComponent)) + +-- | Removes a mounted React element in a document element. Returns true if it was unmounted, false otherwise. +foreign import unmountComponentAtNode :: forall eff. Element -> Eff (dom :: DOM | eff) Boolean + +-- | Finds the DOM node rendered by the component. +foreign import findDOMNode :: forall eff. ReactComponent -> Eff (dom :: DOM | eff) Element + +-- | Render a React element as a string. +foreign import renderToString :: ReactElement -> String + +-- | Render a React element as static markup string without extra DOM attributes. +foreign import renderToStaticMarkup :: ReactElement -> String