From 2c040de6409ba5a6b5bd687446e582a181744a35 Mon Sep 17 00:00:00 2001 From: eric thul Date: Mon, 31 Aug 2015 20:59:14 -0400 Subject: [PATCH 1/5] Updates for React 0.13 Refactored the API to match React 0.13. Resolves #34 --- bower.json | 8 +++++--- src/React.js | 32 +++++++++++++++----------------- src/React.purs | 47 ++++++++++++++++++++++++----------------------- test/Main.purs | 42 +++++++++++++++++++++++++++++++----------- 4 files changed, 75 insertions(+), 54 deletions(-) diff --git a/bower.json b/bower.json index 9b3b31b..b65ff6e 100644 --- a/bower.json +++ b/bower.json @@ -16,8 +16,10 @@ "tests" ], "dependencies": { - "purescript-console": "^0.1.0", - "purescript-dom": "^0.1.1", - "react": "~0.12.2" + "purescript-console": "~0.1.1", + "purescript-dom": "~0.2.6" + }, + "devDependencies": { + "react": "~0.13.3" } } diff --git a/src/React.js b/src/React.js index 0596caa..af00d35 100644 --- a/src/React.js +++ b/src/React.js @@ -98,26 +98,24 @@ exports.handle = function(f) { }; }; -exports.renderToString = React.renderComponentToString; - -exports.renderToBody = function(component) { - return function() { - return React.renderComponent(component, document.body); - } +exports.createElement = function(clazz) { + return function(props) { + return function(children){ + return React.createElement.apply(React, [clazz, props].concat(children)); + }; + }; }; -exports.renderToElementById = function(id) { - return function(component) { - return function() { - return React.renderComponent(component, document.getElementById(id)); - } - } +exports.createFactory = function(clazz) { + return React.createFactory(clazz); }; -exports.createElement = function(factory) { - return function(props) { - return function(children){ - return React.createElement.apply(React, [factory, props].concat(children)); - }; +exports.render = function(element) { + return function(container) { + return function() { + return React.render(element, container); + } }; }; + +exports.renderToString = React.renderToString; diff --git a/src/React.purs b/src/React.purs index 68baed1..5d6926b 100644 --- a/src/React.purs +++ b/src/React.purs @@ -22,7 +22,7 @@ module React , Render() , UISpec() - , UIFactory() + , UIClass() , Event() , MouseEvent() @@ -44,18 +44,19 @@ module React , handle - , renderToString - , renderToBody - , renderToElementById , createElement + , createFactory + + , render + , renderToString ) where -import Prelude +import Prelude (Unit(), ($), bind, pure, return, unit) -import DOM +import DOM (DOM()) +import DOM.Node.Types (Element()) -import Control.Monad.Eff -import Control.Monad.Eff.Console +import Control.Monad.Eff (Eff()) -- | A virtual DOM node, or component. foreign import data UI :: * @@ -212,13 +213,10 @@ type UISpec props state eff = ) Unit } --- | Factory function for components. -type UIFactory props = props -> UI - -- | Create a component specification. spec :: forall props state eff. state -> Render props state eff -> UISpec props state eff -spec st render = - { render: render +spec st renderFn = + { render: renderFn , displayName: "" , getInitialState: \_ -> pure st , componentWillMount: \_ -> return unit @@ -230,6 +228,9 @@ spec st render = , componentWillUnmount: \_ -> return unit } +-- | Factory function for components. +foreign import data UIClass :: * -> * + -- | Read the component props. foreign import getProps :: forall props eff. UIRef -> @@ -265,24 +266,24 @@ transformState ctx f = do state <- readState ctx writeState ctx $ f state --- | Create a component from a component spec. +-- | Create a React class from a specification. foreign import mkUI :: forall props state eff. UISpec props state eff -> - UIFactory props + UIClass props -- | Create an event handler. foreign import handle :: forall eff ev props state result. (ev -> EventHandlerContext eff props state result) -> EventHandler ev --- | Render a component as a string. -foreign import renderToString :: UI -> String +-- | Render a React element in a document element. +foreign import render :: forall eff. UI -> Element -> Eff (dom :: DOM | eff) UI --- | Render a component to the document body. -foreign import renderToBody :: forall eff. UI -> Eff (dom :: DOM | eff) UI +-- | Render a React element as a string. +foreign import renderToString :: UI -> String --- | Render a component to the element with the specified ID. -foreign import renderToElementById :: forall eff. String -> UI -> Eff (dom :: DOM | eff) UI +-- | Create an element from a React class. +foreign import createElement :: forall props. UIClass props -> props -> Array UI -> UI --- | Create an element from a component factory. -foreign import createElement :: forall props. UIFactory props -> props -> Array UI -> UI +-- | Create a factory from a React class. +foreign import createFactory :: forall props. UIClass props -> props -> UI diff --git a/test/Main.purs b/test/Main.purs index 565bfc3..9407a62 100644 --- a/test/Main.purs +++ b/test/Main.purs @@ -5,6 +5,18 @@ import Prelude import Control.Monad.Eff import Control.Monad.Eff.Console +import Data.Maybe (Maybe(..)) +import Data.Maybe.Unsafe (fromJust) +import Data.Nullable (toMaybe) + +import DOM (DOM()) +import DOM.HTML (window) +import DOM.HTML.Document (body) +import DOM.HTML.Types (htmlElementToElement) +import DOM.HTML.Window (document) + +import DOM.Node.Types (Element()) + import React import qualified React.DOM as D @@ -34,6 +46,7 @@ counter = mkUI counterSpec val <- readState ctx print val } + render ctx = do val <- readState ctx return $ D.button [ P.className "Counter" @@ -45,14 +58,21 @@ counter = mkUI counterSpec , D.text " Click me to increment!" ] -main = do - let component = D.div' [ - hello { name: "World" }, - counter unit, - createElement container unit [ - D.p [] [ D.text "This is line one" ], - D.p [] [ D.text "This is line two" ] - ] - ] - - renderToBody component +main = body' >>= render ui + where + ui :: UI + ui = D.div' [ createFactory hello { name: "World" } + , createFactory counter unit + , createElement container unit + [ D.p [] [ D.text "This is line one" ] + , D.p [] [ D.text "This is line two" ] + ] + ] + + body' :: forall eff. Eff (dom :: DOM | eff) Element + body' = do + win <- window + doc <- document win + elm <- fromJust <$> toMaybe <$> body doc + return $ htmlElementToElement elm + From 09b7851d8a7a59e332c2167033e2ff75435a0687 Mon Sep 17 00:00:00 2001 From: eric thul Date: Mon, 31 Aug 2015 23:58:29 -0400 Subject: [PATCH 2/5] Updating README and documentation --- README.md | 29 ++++++++++++++++++++++++----- docs/React.md | 40 ++++++++++++++++++++-------------------- test/Main.purs | 1 - 3 files changed, 44 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 4ccb8f9..2952619 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ purescript-react ================ -[![Maintainer: paf31](https://img.shields.io/badge/maintainer-paf31-lightgrey.svg)](http://github.com/paf31) ![React: 0.12.2](https://img.shields.io/badge/react-0.12.2-lightgrey.svg) +[![Maintainer: paf31](https://img.shields.io/badge/maintainer-paf31-lightgrey.svg)](http://github.com/paf31) ![React: 0.13.3](https://img.shields.io/badge/react-0.13.3-lightgrey.svg) Low-level React Bindings for PureScript. @@ -28,6 +28,17 @@ import Prelude import Control.Monad.Eff +import Data.Maybe.Unsafe (fromJust) +import Data.Nullable (toMaybe) + +import DOM (DOM()) +import DOM.HTML (window) +import DOM.HTML.Document (body) +import DOM.HTML.Types (htmlElementToElement) +import DOM.HTML.Window (document) + +import DOM.Node.Types (Element()) + import React import qualified React.DOM as D @@ -41,12 +52,20 @@ counter = mkUI $ spec 0 \ctx -> do val <- readState ctx return $ D.p [ P.className "Counter" , P.onClick (incrementCounter ctx) - ] + ] [ D.text (show val) , D.text " Click me to increment!" ] -main = do - let component = D.div [] [ counter {} ] - renderToBody component +main = container >>= render ui + where + ui :: UI + ui = D.div [] [ createFactory counter {} ] + + container :: forall eff. Eff (dom :: DOM | eff) Element + container = do + win <- window + doc <- document win + elm <- fromJust <$> toMaybe <$> body doc + return $ htmlElementToElement elm ``` diff --git a/docs/React.md b/docs/React.md index 04aa068..0018a80 100644 --- a/docs/React.md +++ b/docs/React.md @@ -160,21 +160,21 @@ type UISpec props state eff = { render :: Render props state eff, displayName :: A specification of a component. -#### `UIFactory` +#### `spec` ``` purescript -type UIFactory props = props -> UI +spec :: forall props state eff. state -> Render props state eff -> UISpec props state eff ``` -Factory function for components. +Create a component specification. -#### `spec` +#### `UIClass` ``` purescript -spec :: forall props state eff. state -> Render props state eff -> UISpec props state eff +data UIClass :: * -> * ``` -Create a component specification. +Factory function for components. #### `getProps` @@ -227,10 +227,10 @@ Transform the component state by applying a function. #### `mkUI` ``` purescript -mkUI :: forall props state eff. UISpec props state eff -> UIFactory props +mkUI :: forall props state eff. UISpec props state eff -> UIClass props ``` -Create a component from a component spec. +Create a React class from a specification. #### `handle` @@ -240,36 +240,36 @@ handle :: forall eff ev props state result. (ev -> EventHandlerContext eff props Create an event handler. -#### `renderToString` +#### `render` ``` purescript -renderToString :: UI -> String +render :: forall eff. UI -> Element -> Eff (dom :: DOM | eff) UI ``` -Render a component as a string. +Render a React element in a document element. -#### `renderToBody` +#### `renderToString` ``` purescript -renderToBody :: forall eff. UI -> Eff (dom :: DOM | eff) UI +renderToString :: UI -> String ``` -Render a component to the document body. +Render a React element as a string. -#### `renderToElementById` +#### `createElement` ``` purescript -renderToElementById :: forall eff. String -> UI -> Eff (dom :: DOM | eff) UI +createElement :: forall props. UIClass props -> props -> Array UI -> UI ``` -Render a component to the element with the specified ID. +Create an element from a React class. -#### `createElement` +#### `createFactory` ``` purescript -createElement :: forall props. UIFactory props -> props -> Array UI -> UI +createFactory :: forall props. UIClass props -> props -> UI ``` -Create an element from a component factory. +Create a factory from a React class. diff --git a/test/Main.purs b/test/Main.purs index 9407a62..98f27e3 100644 --- a/test/Main.purs +++ b/test/Main.purs @@ -75,4 +75,3 @@ main = body' >>= render ui doc <- document win elm <- fromJust <$> toMaybe <$> body doc return $ htmlElementToElement elm - From 3c79233fc89c4fbd9a3171de3af30f1c49402e7a Mon Sep 17 00:00:00 2001 From: eric thul Date: Tue, 1 Sep 2015 00:00:18 -0400 Subject: [PATCH 3/5] Moving purescript-console to dev dependencies --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index b65ff6e..3c3c4bb 100644 --- a/bower.json +++ b/bower.json @@ -16,10 +16,10 @@ "tests" ], "dependencies": { - "purescript-console": "~0.1.1", "purescript-dom": "~0.2.6" }, "devDependencies": { + "purescript-console": "~0.1.1", "react": "~0.13.3" } } From 1061e68bae3ad1d5baa15168f46c8a9a150c8045 Mon Sep 17 00:00:00 2001 From: eric thul Date: Tue, 1 Sep 2015 00:34:39 -0400 Subject: [PATCH 4/5] Remove tutorial --- tutorial/Main.purs | 109 ----------------------------------------- tutorial/README.md | 16 ------ tutorial/bower.json | 26 ---------- tutorial/comments.json | 1 - tutorial/index.html | 13 ----- tutorial/server.py | 40 --------------- 6 files changed, 205 deletions(-) delete mode 100644 tutorial/Main.purs delete mode 100644 tutorial/README.md delete mode 100644 tutorial/bower.json delete mode 100644 tutorial/comments.json delete mode 100644 tutorial/index.html delete mode 100644 tutorial/server.py diff --git a/tutorial/Main.purs b/tutorial/Main.purs deleted file mode 100644 index aa8a54d..0000000 --- a/tutorial/Main.purs +++ /dev/null @@ -1,109 +0,0 @@ -module Main where - --- This is a mostly PureScript implementation of the tutorial found here: --- http://facebook.github.io/react/docs/tutorial.html - -import Control.Monad.Eff -import Data.Array hiding (span) -import React -import React.DOM -import Showdown -import Debug.Trace - -cBoxRender = do - state <- readState - pure $ div [ className "commentBox" ] - [ h1' [ text "Comments" ] - , commentList { data': state } - , commentForm { onCommentSubmit: commentSubmit } - ] - -commentBox = mkUI spec { - getInitialState = return [], - componentWillMount = componentWillMount - } cBoxRender - -foreign import componentWillMount - "function componentWillMount() {\ - \ var load = loadCommentsFromServer.bind(this);\ - \ load();\ - \ setInterval(function() { load(); }, this.props.pollInterval);\ - \}" :: forall eff. Eff ( reactState :: ReactState (read :: ReadAllowed) Unit | eff ) Unit - - -commentList = mkUI spec do - props <- getProps - pure $ div [ className "commentList" ] - (commentNodes <$> props.data') - -commentForm = mkUI spec do - props <- getProps - pure $ form [ className "commentForm" - , onSubmit submit - ] - [ input [ typeProp "text" - , placeholder "Your name" - , ref "author" - ] [] - , input [ typeProp "text" - , placeholder "Say something..." - , ref "text" - ] [] - , input [ typeProp "submit" - , value "Post" - ] [] - ] - -comment = mkUI spec do - props <- getProps - pure $ div [ className "comment" ] - [ h2 [ className "commentAuthor" ] - [ text props.author ] - , span [ dangerouslySetInnerHTML $ makeHtml props.children ] [] - ] - -commentNodes c = comment { author: c.author, children: c.text } - -foreign import commentSubmit - "function commentSubmit(comment) {\ - \ var comments = this.state.state;\ - \ var newComments = comments.concat([comment]);\ - \ this.setState({state: newComments});\ - \ $.ajax({\ - \ url: this.props.url,\ - \ dataType: 'json',\ - \ type: 'POST',\ - \ data: comment,\ - \ success: function(data) {\ - \ this.setState({state: data});\ - \ }.bind(this)\ - \ });\ - \}" :: forall eff. Eff eff {} - -foreign import submit - "function submit(e) {\ - \ e.preventDefault();\ - \ return function() { \ - \ var author = this.refs.author.getDOMNode().value.trim();\ - \ var text = this.refs.text.getDOMNode().value.trim();\ - \ this.props.onCommentSubmit.call(this, {author: author, text: text});\ - \ this.refs.author.getDOMNode().value = '';\ - \ this.refs.text.getDOMNode().value = '';\ - \ return false;\ - \ } \ - \}" :: Event -> forall eff. Eff eff Boolean - -foreign import loadCommentsFromServer - "function loadCommentsFromServer() {\ - \ $.ajax({\ - \ url: this.props.url,\ - \ dataType: 'json',\ - \ success: function(data) {\ - \ this.replaceState({state: data});\ - \ }.bind(this)\ - \ });\ - \}" :: forall a r. {props :: {url :: String}, replaceState :: {state :: a} -> {} | r} -> {} - -main = renderToElementById "content" $ commentBox { url: "comments.json" - , pollInterval: 2000 - } diff --git a/tutorial/README.md b/tutorial/README.md deleted file mode 100644 index ab9b2bf..0000000 --- a/tutorial/README.md +++ /dev/null @@ -1,16 +0,0 @@ -React.js tutorial in PureScript -=============================== - -This is just a quick implementation of the React.js [tutorial][tutorial] - -To view it in action: - -1. `bower install` in this directory. -It has different dependencies. -1. `gulp example-tutorial` from the root directory. -Paths are tricky. -1. `python server.py` in this directory. -It needs a simple server since it's dishing off AJAX. -1. Visit `http://localhost:8000` in the browser and play around. - -[tutorial]: http://facebook.github.io/react/docs/tutorial.html diff --git a/tutorial/bower.json b/tutorial/bower.json deleted file mode 100644 index f53cf5d..0000000 --- a/tutorial/bower.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "purescript-react-tutorial", - "version": "0.0.1", - "homepage": "https://github.com/purescript-contrib/purescript-react", - "description": "Purescript implementation of React.js tutorial", - "keywords": [ - "purescript", - "react" - ], - "license": "MIT", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ], - "private": true, - "devDependencies": { - "react": "~0.10.0", - "showdown": "~0.3.1", - "purescript-showdown": "https://github.com/joneshf/purescript-showdown.git", - "purescript-arrays": "~0.2.1", - "jquery": "~2.1.1" - } -} diff --git a/tutorial/comments.json b/tutorial/comments.json deleted file mode 100644 index 3876a16..0000000 --- a/tutorial/comments.json +++ /dev/null @@ -1 +0,0 @@ -[{"text": "This is one comment", "author": "Pete Hunt"}, {"text": "This is *another* comment", "author": "Jordan Walke"}, {"text": "React + PureScript = Love", "author": "Andrey Popp"}] diff --git a/tutorial/index.html b/tutorial/index.html deleted file mode 100644 index 707a1ac..0000000 --- a/tutorial/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - React.js tutorial in PureScript - - - - - -
- - - diff --git a/tutorial/server.py b/tutorial/server.py deleted file mode 100644 index d5db484..0000000 --- a/tutorial/server.py +++ /dev/null @@ -1,40 +0,0 @@ -# This is originally from https://github.com/nebstrebor/react-tutorial-simpleserver -# It was modified a bit in the process. - -import BaseHTTPServer -import SimpleHTTPServer -import json -import urlparse - - -class ReactTutorialHTTPRequestHandler(SimpleHTTPServer.SimpleHTTPRequestHandler): - """ - Extension of SimpleHTTPRequestHandler that works with the react.js tutorial. - In addition to standard SimpleHTTPServer file-webserver functionality, adds - POST-ability. - - USAGE: python server.py to serve files from the cwd - (works the same as running python -m SimpleHTTPServer in the directory) - """ - - def do_POST(self): - # (1) get posted data & convert it to python dict - content_length = int(self.headers['Content-Length']) - post_data = dict(urlparse.parse_qsl(self.rfile.read(content_length).decode('utf-8'))) - # (2) open the file at the requested URL (404 if bad) - with open(self.translate_path(self.path), 'r+w') as f: - comments = json.loads(f.read()) - comments.append(post_data) - f.seek(0, 0) - f.write(json.dumps(comments)) - f.truncate() - - return self.do_GET() - -def test(HandlerClass=ReactTutorialHTTPRequestHandler, - ServerClass=BaseHTTPServer.HTTPServer): - BaseHTTPServer.test(HandlerClass, ServerClass) - - -if __name__ == '__main__': - test() From 9738b8fc2a27413783f6fc4c67e4d6651c81ab04 Mon Sep 17 00:00:00 2001 From: eric thul Date: Tue, 1 Sep 2015 08:02:54 -0400 Subject: [PATCH 5/5] Renaming types and functions to align with React --- README.md | 4 +- docs/React.md | 62 +++--- docs/React/DOM.md | 452 ++++++++++++++++++++--------------------- docs/React/DOM/SVG.md | 36 ++-- src/React.js | 2 +- src/React.purs | 93 ++++----- src/React/DOM.purs | 452 ++++++++++++++++++++--------------------- src/React/DOM/SVG.purs | 36 ++-- test/Container.purs | 2 +- test/Main.purs | 6 +- 10 files changed, 563 insertions(+), 582 deletions(-) diff --git a/README.md b/README.md index 2952619..2da2941 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ incrementCounter ctx e = do val <- readState ctx writeState ctx (val + 1) -counter = mkUI $ spec 0 \ctx -> do +counter = createClass $ spec 0 \ctx -> do val <- readState ctx return $ D.p [ P.className "Counter" , P.onClick (incrementCounter ctx) @@ -59,7 +59,7 @@ counter = mkUI $ spec 0 \ctx -> do main = container >>= render ui where - ui :: UI + ui :: ReactElement ui = D.div [] [ createFactory counter {} ] container :: forall eff. Eff (dom :: DOM | eff) Element diff --git a/docs/React.md b/docs/React.md index 0018a80..d410c13 100644 --- a/docs/React.md +++ b/docs/React.md @@ -2,18 +2,18 @@ This module defines foreign types and functions which wrap React's functionality. -#### `UI` +#### `ReactElement` ``` purescript -data UI :: * +data ReactElement :: * ``` A virtual DOM node, or component. -#### `UIRef` +#### `ReactThis` ``` purescript -data UIRef :: * +data ReactThis :: * ``` A reference to a component, essentially React's `this`. @@ -147,15 +147,15 @@ A function which handles events. #### `Render` ``` purescript -type Render props state eff = UIRef -> Eff (props :: ReactProps props, refs :: ReactRefs Disallowed, state :: ReactState ReadOnly state | eff) UI +type Render props state eff = ReactThis -> Eff (props :: ReactProps props, refs :: ReactRefs Disallowed, state :: ReactState ReadOnly state | eff) ReactElement ``` A rendering function. -#### `UISpec` +#### `ReactSpec` ``` purescript -type UISpec props state eff = { render :: Render props state eff, displayName :: String, getInitialState :: UIRef -> Eff (props :: ReactProps props, state :: ReactState Disallowed state, refs :: ReactRefs Disallowed | eff) state, componentWillMount :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs Disallowed | eff) Unit, componentDidMount :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentWillReceiveProps :: UIRef -> props -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, shouldComponentUpdate :: UIRef -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Boolean, componentWillUpdate :: UIRef -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentDidUpdate :: UIRef -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadOnly state, refs :: ReactRefs ReadOnly | eff) Unit, componentWillUnmount :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadOnly state, refs :: ReactRefs ReadOnly | eff) Unit } +type ReactSpec props state eff = { render :: Render props state eff, displayName :: String, getInitialState :: ReactThis -> Eff (props :: ReactProps props, state :: ReactState Disallowed state, refs :: ReactRefs Disallowed | eff) state, componentWillMount :: ReactThis -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs Disallowed | eff) Unit, componentDidMount :: ReactThis -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentWillReceiveProps :: ReactThis -> props -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, shouldComponentUpdate :: ReactThis -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Boolean, componentWillUpdate :: ReactThis -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentDidUpdate :: ReactThis -> props -> state -> Eff (props :: ReactProps props, state :: ReactState ReadOnly state, refs :: ReactRefs ReadOnly | eff) Unit, componentWillUnmount :: ReactThis -> Eff (props :: ReactProps props, state :: ReactState ReadOnly state, refs :: ReactRefs ReadOnly | eff) Unit } ``` A specification of a component. @@ -163,23 +163,23 @@ A specification of a component. #### `spec` ``` purescript -spec :: forall props state eff. state -> Render props state eff -> UISpec props state eff +spec :: forall props state eff. state -> Render props state eff -> ReactSpec props state eff ``` Create a component specification. -#### `UIClass` +#### `ReactClass` ``` purescript -data UIClass :: * -> * +data ReactClass :: * -> * ``` -Factory function for components. +React class for components. #### `getProps` ``` purescript -getProps :: forall props eff. UIRef -> Eff (props :: ReactProps props | eff) props +getProps :: forall props eff. ReactThis -> Eff (props :: ReactProps props | eff) props ``` Read the component props. @@ -187,7 +187,7 @@ Read the component props. #### `getRefs` ``` purescript -getRefs :: forall write eff. UIRef -> Eff (refs :: ReactRefs (Read write) | eff) Refs +getRefs :: forall write eff. ReactThis -> Eff (refs :: ReactRefs (Read write) | eff) Refs ``` Read the component refs. @@ -195,7 +195,7 @@ Read the component refs. #### `getChildren` ``` purescript -getChildren :: forall props eff. UIRef -> Eff (props :: ReactProps props | eff) (Array UI) +getChildren :: forall props eff. ReactThis -> Eff (props :: ReactProps props | eff) (Array ReactElement) ``` Read the component children property. @@ -203,7 +203,7 @@ Read the component children property. #### `writeState` ``` purescript -writeState :: forall state eff. UIRef -> state -> Eff (state :: ReactState ReadWrite state | eff) state +writeState :: forall state eff. ReactThis -> state -> Eff (state :: ReactState ReadWrite state | eff) state ``` Write the component state. @@ -211,7 +211,7 @@ Write the component state. #### `readState` ``` purescript -readState :: forall state write eff. UIRef -> Eff (state :: ReactState (Read write) state | eff) state +readState :: forall state write eff. ReactThis -> Eff (state :: ReactState (Read write) state | eff) state ``` Read the component state. @@ -219,15 +219,15 @@ Read the component state. #### `transformState` ``` purescript -transformState :: forall state statePerms eff. UIRef -> (state -> state) -> Eff (state :: ReactState ReadWrite state | eff) state +transformState :: forall state eff. ReactThis -> (state -> state) -> Eff (state :: ReactState ReadWrite state | eff) state ``` Transform the component state by applying a function. -#### `mkUI` +#### `createClass` ``` purescript -mkUI :: forall props state eff. UISpec props state eff -> UIClass props +createClass :: forall props state eff. ReactSpec props state eff -> ReactClass props ``` Create a React class from a specification. @@ -240,36 +240,36 @@ handle :: forall eff ev props state result. (ev -> EventHandlerContext eff props Create an event handler. -#### `render` +#### `createElement` ``` purescript -render :: forall eff. UI -> Element -> Eff (dom :: DOM | eff) UI +createElement :: forall props. ReactClass props -> props -> Array ReactElement -> ReactElement ``` -Render a React element in a document element. +Create an element from a React class. -#### `renderToString` +#### `createFactory` ``` purescript -renderToString :: UI -> String +createFactory :: forall props. ReactClass props -> props -> ReactElement ``` -Render a React element as a string. +Create a factory from a React class. -#### `createElement` +#### `render` ``` purescript -createElement :: forall props. UIClass props -> props -> Array UI -> UI +render :: forall eff. ReactElement -> Element -> Eff (dom :: DOM | eff) ReactElement ``` -Create an element from a React class. +Render a React element in a document element. -#### `createFactory` +#### `renderToString` ``` purescript -createFactory :: forall props. UIClass props -> props -> UI +renderToString :: ReactElement -> String ``` -Create a factory from a React class. +Render a React element as a string. diff --git a/docs/React/DOM.md b/docs/React/DOM.md index 6b04f2f..4cec55b 100644 --- a/docs/React/DOM.md +++ b/docs/React/DOM.md @@ -3,1357 +3,1357 @@ #### `mkDOM` ``` purescript -mkDOM :: String -> Array Props -> Array UI -> UI +mkDOM :: String -> Array Props -> Array ReactElement -> ReactElement ``` #### `text` ``` purescript -text :: String -> UI +text :: String -> ReactElement ``` #### `a` ``` purescript -a :: Array Props -> Array UI -> UI +a :: Array Props -> Array ReactElement -> ReactElement ``` #### `a'` ``` purescript -a' :: Array UI -> UI +a' :: Array ReactElement -> ReactElement ``` #### `abbr` ``` purescript -abbr :: Array Props -> Array UI -> UI +abbr :: Array Props -> Array ReactElement -> ReactElement ``` #### `abbr'` ``` purescript -abbr' :: Array UI -> UI +abbr' :: Array ReactElement -> ReactElement ``` #### `address` ``` purescript -address :: Array Props -> Array UI -> UI +address :: Array Props -> Array ReactElement -> ReactElement ``` #### `address'` ``` purescript -address' :: Array UI -> UI +address' :: Array ReactElement -> ReactElement ``` #### `area` ``` purescript -area :: Array Props -> Array UI -> UI +area :: Array Props -> Array ReactElement -> ReactElement ``` #### `area'` ``` purescript -area' :: Array UI -> UI +area' :: Array ReactElement -> ReactElement ``` #### `article` ``` purescript -article :: Array Props -> Array UI -> UI +article :: Array Props -> Array ReactElement -> ReactElement ``` #### `article'` ``` purescript -article' :: Array UI -> UI +article' :: Array ReactElement -> ReactElement ``` #### `aside` ``` purescript -aside :: Array Props -> Array UI -> UI +aside :: Array Props -> Array ReactElement -> ReactElement ``` #### `aside'` ``` purescript -aside' :: Array UI -> UI +aside' :: Array ReactElement -> ReactElement ``` #### `audio` ``` purescript -audio :: Array Props -> Array UI -> UI +audio :: Array Props -> Array ReactElement -> ReactElement ``` #### `audio'` ``` purescript -audio' :: Array UI -> UI +audio' :: Array ReactElement -> ReactElement ``` #### `b` ``` purescript -b :: Array Props -> Array UI -> UI +b :: Array Props -> Array ReactElement -> ReactElement ``` #### `b'` ``` purescript -b' :: Array UI -> UI +b' :: Array ReactElement -> ReactElement ``` #### `base` ``` purescript -base :: Array Props -> Array UI -> UI +base :: Array Props -> Array ReactElement -> ReactElement ``` #### `base'` ``` purescript -base' :: Array UI -> UI +base' :: Array ReactElement -> ReactElement ``` #### `bdi` ``` purescript -bdi :: Array Props -> Array UI -> UI +bdi :: Array Props -> Array ReactElement -> ReactElement ``` #### `bdi'` ``` purescript -bdi' :: Array UI -> UI +bdi' :: Array ReactElement -> ReactElement ``` #### `bdo` ``` purescript -bdo :: Array Props -> Array UI -> UI +bdo :: Array Props -> Array ReactElement -> ReactElement ``` #### `bdo'` ``` purescript -bdo' :: Array UI -> UI +bdo' :: Array ReactElement -> ReactElement ``` #### `big` ``` purescript -big :: Array Props -> Array UI -> UI +big :: Array Props -> Array ReactElement -> ReactElement ``` #### `big'` ``` purescript -big' :: Array UI -> UI +big' :: Array ReactElement -> ReactElement ``` #### `blockquote` ``` purescript -blockquote :: Array Props -> Array UI -> UI +blockquote :: Array Props -> Array ReactElement -> ReactElement ``` #### `blockquote'` ``` purescript -blockquote' :: Array UI -> UI +blockquote' :: Array ReactElement -> ReactElement ``` #### `body` ``` purescript -body :: Array Props -> Array UI -> UI +body :: Array Props -> Array ReactElement -> ReactElement ``` #### `body'` ``` purescript -body' :: Array UI -> UI +body' :: Array ReactElement -> ReactElement ``` #### `br` ``` purescript -br :: Array Props -> Array UI -> UI +br :: Array Props -> Array ReactElement -> ReactElement ``` #### `br'` ``` purescript -br' :: Array UI -> UI +br' :: Array ReactElement -> ReactElement ``` #### `button` ``` purescript -button :: Array Props -> Array UI -> UI +button :: Array Props -> Array ReactElement -> ReactElement ``` #### `button'` ``` purescript -button' :: Array UI -> UI +button' :: Array ReactElement -> ReactElement ``` #### `canvas` ``` purescript -canvas :: Array Props -> Array UI -> UI +canvas :: Array Props -> Array ReactElement -> ReactElement ``` #### `canvas'` ``` purescript -canvas' :: Array UI -> UI +canvas' :: Array ReactElement -> ReactElement ``` #### `caption` ``` purescript -caption :: Array Props -> Array UI -> UI +caption :: Array Props -> Array ReactElement -> ReactElement ``` #### `caption'` ``` purescript -caption' :: Array UI -> UI +caption' :: Array ReactElement -> ReactElement ``` #### `cite` ``` purescript -cite :: Array Props -> Array UI -> UI +cite :: Array Props -> Array ReactElement -> ReactElement ``` #### `cite'` ``` purescript -cite' :: Array UI -> UI +cite' :: Array ReactElement -> ReactElement ``` #### `code` ``` purescript -code :: Array Props -> Array UI -> UI +code :: Array Props -> Array ReactElement -> ReactElement ``` #### `code'` ``` purescript -code' :: Array UI -> UI +code' :: Array ReactElement -> ReactElement ``` #### `col` ``` purescript -col :: Array Props -> Array UI -> UI +col :: Array Props -> Array ReactElement -> ReactElement ``` #### `col'` ``` purescript -col' :: Array UI -> UI +col' :: Array ReactElement -> ReactElement ``` #### `colgroup` ``` purescript -colgroup :: Array Props -> Array UI -> UI +colgroup :: Array Props -> Array ReactElement -> ReactElement ``` #### `colgroup'` ``` purescript -colgroup' :: Array UI -> UI +colgroup' :: Array ReactElement -> ReactElement ``` #### `_data` ``` purescript -_data :: Array Props -> Array UI -> UI +_data :: Array Props -> Array ReactElement -> ReactElement ``` #### `_data'` ``` purescript -_data' :: Array UI -> UI +_data' :: Array ReactElement -> ReactElement ``` #### `datalist` ``` purescript -datalist :: Array Props -> Array UI -> UI +datalist :: Array Props -> Array ReactElement -> ReactElement ``` #### `datalist'` ``` purescript -datalist' :: Array UI -> UI +datalist' :: Array ReactElement -> ReactElement ``` #### `dd` ``` purescript -dd :: Array Props -> Array UI -> UI +dd :: Array Props -> Array ReactElement -> ReactElement ``` #### `dd'` ``` purescript -dd' :: Array UI -> UI +dd' :: Array ReactElement -> ReactElement ``` #### `del` ``` purescript -del :: Array Props -> Array UI -> UI +del :: Array Props -> Array ReactElement -> ReactElement ``` #### `del'` ``` purescript -del' :: Array UI -> UI +del' :: Array ReactElement -> ReactElement ``` #### `details` ``` purescript -details :: Array Props -> Array UI -> UI +details :: Array Props -> Array ReactElement -> ReactElement ``` #### `details'` ``` purescript -details' :: Array UI -> UI +details' :: Array ReactElement -> ReactElement ``` #### `dfn` ``` purescript -dfn :: Array Props -> Array UI -> UI +dfn :: Array Props -> Array ReactElement -> ReactElement ``` #### `dfn'` ``` purescript -dfn' :: Array UI -> UI +dfn' :: Array ReactElement -> ReactElement ``` #### `dialog` ``` purescript -dialog :: Array Props -> Array UI -> UI +dialog :: Array Props -> Array ReactElement -> ReactElement ``` #### `dialog'` ``` purescript -dialog' :: Array UI -> UI +dialog' :: Array ReactElement -> ReactElement ``` #### `div` ``` purescript -div :: Array Props -> Array UI -> UI +div :: Array Props -> Array ReactElement -> ReactElement ``` #### `div'` ``` purescript -div' :: Array UI -> UI +div' :: Array ReactElement -> ReactElement ``` #### `dl` ``` purescript -dl :: Array Props -> Array UI -> UI +dl :: Array Props -> Array ReactElement -> ReactElement ``` #### `dl'` ``` purescript -dl' :: Array UI -> UI +dl' :: Array ReactElement -> ReactElement ``` #### `dt` ``` purescript -dt :: Array Props -> Array UI -> UI +dt :: Array Props -> Array ReactElement -> ReactElement ``` #### `dt'` ``` purescript -dt' :: Array UI -> UI +dt' :: Array ReactElement -> ReactElement ``` #### `em` ``` purescript -em :: Array Props -> Array UI -> UI +em :: Array Props -> Array ReactElement -> ReactElement ``` #### `em'` ``` purescript -em' :: Array UI -> UI +em' :: Array ReactElement -> ReactElement ``` #### `embed` ``` purescript -embed :: Array Props -> Array UI -> UI +embed :: Array Props -> Array ReactElement -> ReactElement ``` #### `embed'` ``` purescript -embed' :: Array UI -> UI +embed' :: Array ReactElement -> ReactElement ``` #### `fieldset` ``` purescript -fieldset :: Array Props -> Array UI -> UI +fieldset :: Array Props -> Array ReactElement -> ReactElement ``` #### `fieldset'` ``` purescript -fieldset' :: Array UI -> UI +fieldset' :: Array ReactElement -> ReactElement ``` #### `figcaption` ``` purescript -figcaption :: Array Props -> Array UI -> UI +figcaption :: Array Props -> Array ReactElement -> ReactElement ``` #### `figcaption'` ``` purescript -figcaption' :: Array UI -> UI +figcaption' :: Array ReactElement -> ReactElement ``` #### `figure` ``` purescript -figure :: Array Props -> Array UI -> UI +figure :: Array Props -> Array ReactElement -> ReactElement ``` #### `figure'` ``` purescript -figure' :: Array UI -> UI +figure' :: Array ReactElement -> ReactElement ``` #### `footer` ``` purescript -footer :: Array Props -> Array UI -> UI +footer :: Array Props -> Array ReactElement -> ReactElement ``` #### `footer'` ``` purescript -footer' :: Array UI -> UI +footer' :: Array ReactElement -> ReactElement ``` #### `form` ``` purescript -form :: Array Props -> Array UI -> UI +form :: Array Props -> Array ReactElement -> ReactElement ``` #### `form'` ``` purescript -form' :: Array UI -> UI +form' :: Array ReactElement -> ReactElement ``` #### `h1` ``` purescript -h1 :: Array Props -> Array UI -> UI +h1 :: Array Props -> Array ReactElement -> ReactElement ``` #### `h1'` ``` purescript -h1' :: Array UI -> UI +h1' :: Array ReactElement -> ReactElement ``` #### `h2` ``` purescript -h2 :: Array Props -> Array UI -> UI +h2 :: Array Props -> Array ReactElement -> ReactElement ``` #### `h2'` ``` purescript -h2' :: Array UI -> UI +h2' :: Array ReactElement -> ReactElement ``` #### `h3` ``` purescript -h3 :: Array Props -> Array UI -> UI +h3 :: Array Props -> Array ReactElement -> ReactElement ``` #### `h3'` ``` purescript -h3' :: Array UI -> UI +h3' :: Array ReactElement -> ReactElement ``` #### `h4` ``` purescript -h4 :: Array Props -> Array UI -> UI +h4 :: Array Props -> Array ReactElement -> ReactElement ``` #### `h4'` ``` purescript -h4' :: Array UI -> UI +h4' :: Array ReactElement -> ReactElement ``` #### `h5` ``` purescript -h5 :: Array Props -> Array UI -> UI +h5 :: Array Props -> Array ReactElement -> ReactElement ``` #### `h5'` ``` purescript -h5' :: Array UI -> UI +h5' :: Array ReactElement -> ReactElement ``` #### `h6` ``` purescript -h6 :: Array Props -> Array UI -> UI +h6 :: Array Props -> Array ReactElement -> ReactElement ``` #### `h6'` ``` purescript -h6' :: Array UI -> UI +h6' :: Array ReactElement -> ReactElement ``` #### `head` ``` purescript -head :: Array Props -> Array UI -> UI +head :: Array Props -> Array ReactElement -> ReactElement ``` #### `head'` ``` purescript -head' :: Array UI -> UI +head' :: Array ReactElement -> ReactElement ``` #### `header` ``` purescript -header :: Array Props -> Array UI -> UI +header :: Array Props -> Array ReactElement -> ReactElement ``` #### `header'` ``` purescript -header' :: Array UI -> UI +header' :: Array ReactElement -> ReactElement ``` #### `hr` ``` purescript -hr :: Array Props -> Array UI -> UI +hr :: Array Props -> Array ReactElement -> ReactElement ``` #### `hr'` ``` purescript -hr' :: Array UI -> UI +hr' :: Array ReactElement -> ReactElement ``` #### `html` ``` purescript -html :: Array Props -> Array UI -> UI +html :: Array Props -> Array ReactElement -> ReactElement ``` #### `html'` ``` purescript -html' :: Array UI -> UI +html' :: Array ReactElement -> ReactElement ``` #### `i` ``` purescript -i :: Array Props -> Array UI -> UI +i :: Array Props -> Array ReactElement -> ReactElement ``` #### `i'` ``` purescript -i' :: Array UI -> UI +i' :: Array ReactElement -> ReactElement ``` #### `iframe` ``` purescript -iframe :: Array Props -> Array UI -> UI +iframe :: Array Props -> Array ReactElement -> ReactElement ``` #### `iframe'` ``` purescript -iframe' :: Array UI -> UI +iframe' :: Array ReactElement -> ReactElement ``` #### `img` ``` purescript -img :: Array Props -> Array UI -> UI +img :: Array Props -> Array ReactElement -> ReactElement ``` #### `img'` ``` purescript -img' :: Array UI -> UI +img' :: Array ReactElement -> ReactElement ``` #### `input` ``` purescript -input :: Array Props -> Array UI -> UI +input :: Array Props -> Array ReactElement -> ReactElement ``` #### `input'` ``` purescript -input' :: Array UI -> UI +input' :: Array ReactElement -> ReactElement ``` #### `ins` ``` purescript -ins :: Array Props -> Array UI -> UI +ins :: Array Props -> Array ReactElement -> ReactElement ``` #### `ins'` ``` purescript -ins' :: Array UI -> UI +ins' :: Array ReactElement -> ReactElement ``` #### `kbd` ``` purescript -kbd :: Array Props -> Array UI -> UI +kbd :: Array Props -> Array ReactElement -> ReactElement ``` #### `kbd'` ``` purescript -kbd' :: Array UI -> UI +kbd' :: Array ReactElement -> ReactElement ``` #### `keygen` ``` purescript -keygen :: Array Props -> Array UI -> UI +keygen :: Array Props -> Array ReactElement -> ReactElement ``` #### `keygen'` ``` purescript -keygen' :: Array UI -> UI +keygen' :: Array ReactElement -> ReactElement ``` #### `label` ``` purescript -label :: Array Props -> Array UI -> UI +label :: Array Props -> Array ReactElement -> ReactElement ``` #### `label'` ``` purescript -label' :: Array UI -> UI +label' :: Array ReactElement -> ReactElement ``` #### `legend` ``` purescript -legend :: Array Props -> Array UI -> UI +legend :: Array Props -> Array ReactElement -> ReactElement ``` #### `legend'` ``` purescript -legend' :: Array UI -> UI +legend' :: Array ReactElement -> ReactElement ``` #### `li` ``` purescript -li :: Array Props -> Array UI -> UI +li :: Array Props -> Array ReactElement -> ReactElement ``` #### `li'` ``` purescript -li' :: Array UI -> UI +li' :: Array ReactElement -> ReactElement ``` #### `link` ``` purescript -link :: Array Props -> Array UI -> UI +link :: Array Props -> Array ReactElement -> ReactElement ``` #### `link'` ``` purescript -link' :: Array UI -> UI +link' :: Array ReactElement -> ReactElement ``` #### `main` ``` purescript -main :: Array Props -> Array UI -> UI +main :: Array Props -> Array ReactElement -> ReactElement ``` #### `main'` ``` purescript -main' :: Array UI -> UI +main' :: Array ReactElement -> ReactElement ``` #### `map` ``` purescript -map :: Array Props -> Array UI -> UI +map :: Array Props -> Array ReactElement -> ReactElement ``` #### `map'` ``` purescript -map' :: Array UI -> UI +map' :: Array ReactElement -> ReactElement ``` #### `mark` ``` purescript -mark :: Array Props -> Array UI -> UI +mark :: Array Props -> Array ReactElement -> ReactElement ``` #### `mark'` ``` purescript -mark' :: Array UI -> UI +mark' :: Array ReactElement -> ReactElement ``` #### `menu` ``` purescript -menu :: Array Props -> Array UI -> UI +menu :: Array Props -> Array ReactElement -> ReactElement ``` #### `menu'` ``` purescript -menu' :: Array UI -> UI +menu' :: Array ReactElement -> ReactElement ``` #### `menuitem` ``` purescript -menuitem :: Array Props -> Array UI -> UI +menuitem :: Array Props -> Array ReactElement -> ReactElement ``` #### `menuitem'` ``` purescript -menuitem' :: Array UI -> UI +menuitem' :: Array ReactElement -> ReactElement ``` #### `meta` ``` purescript -meta :: Array Props -> Array UI -> UI +meta :: Array Props -> Array ReactElement -> ReactElement ``` #### `meta'` ``` purescript -meta' :: Array UI -> UI +meta' :: Array ReactElement -> ReactElement ``` #### `meter` ``` purescript -meter :: Array Props -> Array UI -> UI +meter :: Array Props -> Array ReactElement -> ReactElement ``` #### `meter'` ``` purescript -meter' :: Array UI -> UI +meter' :: Array ReactElement -> ReactElement ``` #### `nav` ``` purescript -nav :: Array Props -> Array UI -> UI +nav :: Array Props -> Array ReactElement -> ReactElement ``` #### `nav'` ``` purescript -nav' :: Array UI -> UI +nav' :: Array ReactElement -> ReactElement ``` #### `noscript` ``` purescript -noscript :: Array Props -> Array UI -> UI +noscript :: Array Props -> Array ReactElement -> ReactElement ``` #### `noscript'` ``` purescript -noscript' :: Array UI -> UI +noscript' :: Array ReactElement -> ReactElement ``` #### `object` ``` purescript -object :: Array Props -> Array UI -> UI +object :: Array Props -> Array ReactElement -> ReactElement ``` #### `object'` ``` purescript -object' :: Array UI -> UI +object' :: Array ReactElement -> ReactElement ``` #### `ol` ``` purescript -ol :: Array Props -> Array UI -> UI +ol :: Array Props -> Array ReactElement -> ReactElement ``` #### `ol'` ``` purescript -ol' :: Array UI -> UI +ol' :: Array ReactElement -> ReactElement ``` #### `optgroup` ``` purescript -optgroup :: Array Props -> Array UI -> UI +optgroup :: Array Props -> Array ReactElement -> ReactElement ``` #### `optgroup'` ``` purescript -optgroup' :: Array UI -> UI +optgroup' :: Array ReactElement -> ReactElement ``` #### `option` ``` purescript -option :: Array Props -> Array UI -> UI +option :: Array Props -> Array ReactElement -> ReactElement ``` #### `option'` ``` purescript -option' :: Array UI -> UI +option' :: Array ReactElement -> ReactElement ``` #### `output` ``` purescript -output :: Array Props -> Array UI -> UI +output :: Array Props -> Array ReactElement -> ReactElement ``` #### `output'` ``` purescript -output' :: Array UI -> UI +output' :: Array ReactElement -> ReactElement ``` #### `p` ``` purescript -p :: Array Props -> Array UI -> UI +p :: Array Props -> Array ReactElement -> ReactElement ``` #### `p'` ``` purescript -p' :: Array UI -> UI +p' :: Array ReactElement -> ReactElement ``` #### `param` ``` purescript -param :: Array Props -> Array UI -> UI +param :: Array Props -> Array ReactElement -> ReactElement ``` #### `param'` ``` purescript -param' :: Array UI -> UI +param' :: Array ReactElement -> ReactElement ``` #### `picture` ``` purescript -picture :: Array Props -> Array UI -> UI +picture :: Array Props -> Array ReactElement -> ReactElement ``` #### `picture'` ``` purescript -picture' :: Array UI -> UI +picture' :: Array ReactElement -> ReactElement ``` #### `pre` ``` purescript -pre :: Array Props -> Array UI -> UI +pre :: Array Props -> Array ReactElement -> ReactElement ``` #### `pre'` ``` purescript -pre' :: Array UI -> UI +pre' :: Array ReactElement -> ReactElement ``` #### `progress` ``` purescript -progress :: Array Props -> Array UI -> UI +progress :: Array Props -> Array ReactElement -> ReactElement ``` #### `progress'` ``` purescript -progress' :: Array UI -> UI +progress' :: Array ReactElement -> ReactElement ``` #### `q` ``` purescript -q :: Array Props -> Array UI -> UI +q :: Array Props -> Array ReactElement -> ReactElement ``` #### `q'` ``` purescript -q' :: Array UI -> UI +q' :: Array ReactElement -> ReactElement ``` #### `rp` ``` purescript -rp :: Array Props -> Array UI -> UI +rp :: Array Props -> Array ReactElement -> ReactElement ``` #### `rp'` ``` purescript -rp' :: Array UI -> UI +rp' :: Array ReactElement -> ReactElement ``` #### `rt` ``` purescript -rt :: Array Props -> Array UI -> UI +rt :: Array Props -> Array ReactElement -> ReactElement ``` #### `rt'` ``` purescript -rt' :: Array UI -> UI +rt' :: Array ReactElement -> ReactElement ``` #### `ruby` ``` purescript -ruby :: Array Props -> Array UI -> UI +ruby :: Array Props -> Array ReactElement -> ReactElement ``` #### `ruby'` ``` purescript -ruby' :: Array UI -> UI +ruby' :: Array ReactElement -> ReactElement ``` #### `s` ``` purescript -s :: Array Props -> Array UI -> UI +s :: Array Props -> Array ReactElement -> ReactElement ``` #### `s'` ``` purescript -s' :: Array UI -> UI +s' :: Array ReactElement -> ReactElement ``` #### `samp` ``` purescript -samp :: Array Props -> Array UI -> UI +samp :: Array Props -> Array ReactElement -> ReactElement ``` #### `samp'` ``` purescript -samp' :: Array UI -> UI +samp' :: Array ReactElement -> ReactElement ``` #### `script` ``` purescript -script :: Array Props -> Array UI -> UI +script :: Array Props -> Array ReactElement -> ReactElement ``` #### `script'` ``` purescript -script' :: Array UI -> UI +script' :: Array ReactElement -> ReactElement ``` #### `section` ``` purescript -section :: Array Props -> Array UI -> UI +section :: Array Props -> Array ReactElement -> ReactElement ``` #### `section'` ``` purescript -section' :: Array UI -> UI +section' :: Array ReactElement -> ReactElement ``` #### `select` ``` purescript -select :: Array Props -> Array UI -> UI +select :: Array Props -> Array ReactElement -> ReactElement ``` #### `select'` ``` purescript -select' :: Array UI -> UI +select' :: Array ReactElement -> ReactElement ``` #### `small` ``` purescript -small :: Array Props -> Array UI -> UI +small :: Array Props -> Array ReactElement -> ReactElement ``` #### `small'` ``` purescript -small' :: Array UI -> UI +small' :: Array ReactElement -> ReactElement ``` #### `source` ``` purescript -source :: Array Props -> Array UI -> UI +source :: Array Props -> Array ReactElement -> ReactElement ``` #### `source'` ``` purescript -source' :: Array UI -> UI +source' :: Array ReactElement -> ReactElement ``` #### `span` ``` purescript -span :: Array Props -> Array UI -> UI +span :: Array Props -> Array ReactElement -> ReactElement ``` #### `span'` ``` purescript -span' :: Array UI -> UI +span' :: Array ReactElement -> ReactElement ``` #### `strong` ``` purescript -strong :: Array Props -> Array UI -> UI +strong :: Array Props -> Array ReactElement -> ReactElement ``` #### `strong'` ``` purescript -strong' :: Array UI -> UI +strong' :: Array ReactElement -> ReactElement ``` #### `style` ``` purescript -style :: Array Props -> Array UI -> UI +style :: Array Props -> Array ReactElement -> ReactElement ``` #### `style'` ``` purescript -style' :: Array UI -> UI +style' :: Array ReactElement -> ReactElement ``` #### `sub` ``` purescript -sub :: Array Props -> Array UI -> UI +sub :: Array Props -> Array ReactElement -> ReactElement ``` #### `sub'` ``` purescript -sub' :: Array UI -> UI +sub' :: Array ReactElement -> ReactElement ``` #### `summary` ``` purescript -summary :: Array Props -> Array UI -> UI +summary :: Array Props -> Array ReactElement -> ReactElement ``` #### `summary'` ``` purescript -summary' :: Array UI -> UI +summary' :: Array ReactElement -> ReactElement ``` #### `sup` ``` purescript -sup :: Array Props -> Array UI -> UI +sup :: Array Props -> Array ReactElement -> ReactElement ``` #### `sup'` ``` purescript -sup' :: Array UI -> UI +sup' :: Array ReactElement -> ReactElement ``` #### `table` ``` purescript -table :: Array Props -> Array UI -> UI +table :: Array Props -> Array ReactElement -> ReactElement ``` #### `table'` ``` purescript -table' :: Array UI -> UI +table' :: Array ReactElement -> ReactElement ``` #### `tbody` ``` purescript -tbody :: Array Props -> Array UI -> UI +tbody :: Array Props -> Array ReactElement -> ReactElement ``` #### `tbody'` ``` purescript -tbody' :: Array UI -> UI +tbody' :: Array ReactElement -> ReactElement ``` #### `td` ``` purescript -td :: Array Props -> Array UI -> UI +td :: Array Props -> Array ReactElement -> ReactElement ``` #### `td'` ``` purescript -td' :: Array UI -> UI +td' :: Array ReactElement -> ReactElement ``` #### `textarea` ``` purescript -textarea :: Array Props -> Array UI -> UI +textarea :: Array Props -> Array ReactElement -> ReactElement ``` #### `textarea'` ``` purescript -textarea' :: Array UI -> UI +textarea' :: Array ReactElement -> ReactElement ``` #### `tfoot` ``` purescript -tfoot :: Array Props -> Array UI -> UI +tfoot :: Array Props -> Array ReactElement -> ReactElement ``` #### `tfoot'` ``` purescript -tfoot' :: Array UI -> UI +tfoot' :: Array ReactElement -> ReactElement ``` #### `th` ``` purescript -th :: Array Props -> Array UI -> UI +th :: Array Props -> Array ReactElement -> ReactElement ``` #### `th'` ``` purescript -th' :: Array UI -> UI +th' :: Array ReactElement -> ReactElement ``` #### `thead` ``` purescript -thead :: Array Props -> Array UI -> UI +thead :: Array Props -> Array ReactElement -> ReactElement ``` #### `thead'` ``` purescript -thead' :: Array UI -> UI +thead' :: Array ReactElement -> ReactElement ``` #### `time` ``` purescript -time :: Array Props -> Array UI -> UI +time :: Array Props -> Array ReactElement -> ReactElement ``` #### `time'` ``` purescript -time' :: Array UI -> UI +time' :: Array ReactElement -> ReactElement ``` #### `title` ``` purescript -title :: Array Props -> Array UI -> UI +title :: Array Props -> Array ReactElement -> ReactElement ``` #### `title'` ``` purescript -title' :: Array UI -> UI +title' :: Array ReactElement -> ReactElement ``` #### `tr` ``` purescript -tr :: Array Props -> Array UI -> UI +tr :: Array Props -> Array ReactElement -> ReactElement ``` #### `tr'` ``` purescript -tr' :: Array UI -> UI +tr' :: Array ReactElement -> ReactElement ``` #### `track` ``` purescript -track :: Array Props -> Array UI -> UI +track :: Array Props -> Array ReactElement -> ReactElement ``` #### `track'` ``` purescript -track' :: Array UI -> UI +track' :: Array ReactElement -> ReactElement ``` #### `u` ``` purescript -u :: Array Props -> Array UI -> UI +u :: Array Props -> Array ReactElement -> ReactElement ``` #### `u'` ``` purescript -u' :: Array UI -> UI +u' :: Array ReactElement -> ReactElement ``` #### `ul` ``` purescript -ul :: Array Props -> Array UI -> UI +ul :: Array Props -> Array ReactElement -> ReactElement ``` #### `ul'` ``` purescript -ul' :: Array UI -> UI +ul' :: Array ReactElement -> ReactElement ``` #### `var` ``` purescript -var :: Array Props -> Array UI -> UI +var :: Array Props -> Array ReactElement -> ReactElement ``` #### `var'` ``` purescript -var' :: Array UI -> UI +var' :: Array ReactElement -> ReactElement ``` #### `video` ``` purescript -video :: Array Props -> Array UI -> UI +video :: Array Props -> Array ReactElement -> ReactElement ``` #### `video'` ``` purescript -video' :: Array UI -> UI +video' :: Array ReactElement -> ReactElement ``` #### `wbr` ``` purescript -wbr :: Array Props -> Array UI -> UI +wbr :: Array Props -> Array ReactElement -> ReactElement ``` #### `wbr'` ``` purescript -wbr' :: Array UI -> UI +wbr' :: Array ReactElement -> ReactElement ``` diff --git a/docs/React/DOM/SVG.md b/docs/React/DOM/SVG.md index d9e4afa..ac52202 100644 --- a/docs/React/DOM/SVG.md +++ b/docs/React/DOM/SVG.md @@ -3,109 +3,109 @@ #### `circle` ``` purescript -circle :: Array Props -> Array UI -> UI +circle :: Array Props -> Array ReactElement -> ReactElement ``` #### `clipPath` ``` purescript -clipPath :: Array Props -> Array UI -> UI +clipPath :: Array Props -> Array ReactElement -> ReactElement ``` #### `defs` ``` purescript -defs :: Array Props -> Array UI -> UI +defs :: Array Props -> Array ReactElement -> ReactElement ``` #### `ellipse` ``` purescript -ellipse :: Array Props -> Array UI -> UI +ellipse :: Array Props -> Array ReactElement -> ReactElement ``` #### `g` ``` purescript -g :: Array Props -> Array UI -> UI +g :: Array Props -> Array ReactElement -> ReactElement ``` #### `line` ``` purescript -line :: Array Props -> Array UI -> UI +line :: Array Props -> Array ReactElement -> ReactElement ``` #### `linearGradient` ``` purescript -linearGradient :: Array Props -> Array UI -> UI +linearGradient :: Array Props -> Array ReactElement -> ReactElement ``` #### `mask` ``` purescript -mask :: Array Props -> Array UI -> UI +mask :: Array Props -> Array ReactElement -> ReactElement ``` #### `path` ``` purescript -path :: Array Props -> Array UI -> UI +path :: Array Props -> Array ReactElement -> ReactElement ``` #### `pattern` ``` purescript -pattern :: Array Props -> Array UI -> UI +pattern :: Array Props -> Array ReactElement -> ReactElement ``` #### `polygon` ``` purescript -polygon :: Array Props -> Array UI -> UI +polygon :: Array Props -> Array ReactElement -> ReactElement ``` #### `polyline` ``` purescript -polyline :: Array Props -> Array UI -> UI +polyline :: Array Props -> Array ReactElement -> ReactElement ``` #### `radialGradient` ``` purescript -radialGradient :: Array Props -> Array UI -> UI +radialGradient :: Array Props -> Array ReactElement -> ReactElement ``` #### `rect` ``` purescript -rect :: Array Props -> Array UI -> UI +rect :: Array Props -> Array ReactElement -> ReactElement ``` #### `stop` ``` purescript -stop :: Array Props -> Array UI -> UI +stop :: Array Props -> Array ReactElement -> ReactElement ``` #### `svg` ``` purescript -svg :: Array Props -> Array UI -> UI +svg :: Array Props -> Array ReactElement -> ReactElement ``` #### `text` ``` purescript -text :: Array Props -> Array UI -> UI +text :: Array Props -> Array ReactElement -> ReactElement ``` #### `tspan` ``` purescript -tspan :: Array Props -> Array UI -> UI +tspan :: Array Props -> Array ReactElement -> ReactElement ``` diff --git a/src/React.js b/src/React.js index af00d35..ad620db 100644 --- a/src/React.js +++ b/src/React.js @@ -40,7 +40,7 @@ exports.readState = function(ctx) { }; }; -exports.mkUI = function(ss) { +exports.createClass = function(ss) { var result = {}; for (var s in ss) { if (ss.hasOwnProperty(s)) { diff --git a/src/React.purs b/src/React.purs index 5d6926b..df68ead 100644 --- a/src/React.purs +++ b/src/React.purs @@ -1,8 +1,8 @@ -- | This module defines foreign types and functions which wrap React's functionality. module React - ( UI() - , UIRef() + ( ReactElement() + , ReactThis() , EventHandler() @@ -21,8 +21,8 @@ module React , Render() - , UISpec() - , UIClass() + , ReactSpec() + , ReactClass() , Event() , MouseEvent() @@ -40,10 +40,9 @@ module React , writeState , transformState - , mkUI - , handle + , createClass , createElement , createFactory @@ -59,10 +58,10 @@ import DOM.Node.Types (Element()) import Control.Monad.Eff (Eff()) -- | A virtual DOM node, or component. -foreign import data UI :: * +foreign import data ReactElement :: * -- | A reference to a component, essentially React's `this`. -foreign import data UIRef :: * +foreign import data ReactThis :: * -- | An event handler. The type argument represents the type of the event. foreign import data EventHandler :: * -> * @@ -137,40 +136,40 @@ type EventHandlerContext eff props state result = -- | A rendering function. type Render props state eff = - UIRef -> + ReactThis -> Eff ( props :: ReactProps props , refs :: ReactRefs Disallowed , state :: ReactState ReadOnly state | eff - ) UI + ) ReactElement -- | A specification of a component. -type UISpec props state eff = +type ReactSpec props state eff = { render :: Render props state eff , displayName :: String , getInitialState - :: UIRef -> + :: ReactThis -> Eff ( props :: ReactProps props , state :: ReactState Disallowed state , refs :: ReactRefs Disallowed | eff ) state , componentWillMount - :: UIRef -> + :: ReactThis -> Eff ( props :: ReactProps props , state :: ReactState ReadWrite state , refs :: ReactRefs Disallowed | eff ) Unit , componentDidMount - :: UIRef -> + :: ReactThis -> Eff ( props :: ReactProps props , state :: ReactState ReadWrite state , refs :: ReactRefs ReadOnly | eff ) Unit , componentWillReceiveProps - :: UIRef -> + :: ReactThis -> props -> Eff ( props :: ReactProps props , state :: ReactState ReadWrite state @@ -178,7 +177,7 @@ type UISpec props state eff = | eff ) Unit , shouldComponentUpdate - :: UIRef -> + :: ReactThis -> props -> state -> Eff ( props :: ReactProps props @@ -187,7 +186,7 @@ type UISpec props state eff = | eff ) Boolean , componentWillUpdate - :: UIRef -> + :: ReactThis -> props -> state -> Eff ( props :: ReactProps props @@ -196,7 +195,7 @@ type UISpec props state eff = | eff ) Unit , componentDidUpdate - :: UIRef -> + :: ReactThis -> props -> state -> Eff ( props :: ReactProps props @@ -205,7 +204,7 @@ type UISpec props state eff = | eff ) Unit , componentWillUnmount - :: UIRef -> + :: ReactThis -> Eff ( props :: ReactProps props , state :: ReactState ReadOnly state , refs :: ReactRefs ReadOnly @@ -214,7 +213,7 @@ type UISpec props state eff = } -- | Create a component specification. -spec :: forall props state eff. state -> Render props state eff -> UISpec props state eff +spec :: forall props state eff. state -> Render props state eff -> ReactSpec props state eff spec st renderFn = { render: renderFn , displayName: "" @@ -228,62 +227,44 @@ spec st renderFn = , componentWillUnmount: \_ -> return unit } --- | Factory function for components. -foreign import data UIClass :: * -> * +-- | React class for components. +foreign import data ReactClass :: * -> * -- | Read the component props. -foreign import getProps :: forall props eff. - UIRef -> - Eff (props :: ReactProps props | eff) props +foreign import getProps :: forall props eff. ReactThis -> Eff (props :: ReactProps props | eff) props -- | Read the component refs. -foreign import getRefs :: forall write eff. - UIRef -> - Eff (refs :: ReactRefs (Read write) | eff) Refs +foreign import getRefs :: forall write eff. ReactThis -> Eff (refs :: ReactRefs (Read write) | eff) Refs -- | Read the component children property. -foreign import getChildren :: forall props eff. - UIRef -> - Eff (props :: ReactProps props | eff) (Array UI) +foreign import getChildren :: forall props eff. ReactThis -> Eff (props :: ReactProps props | eff) (Array ReactElement) -- | Write the component state. -foreign import writeState :: forall state eff. - UIRef -> - state -> - Eff (state :: ReactState ReadWrite state | eff) state +foreign import writeState :: forall state eff. ReactThis -> state -> Eff (state :: ReactState ReadWrite state | eff) state -- | Read the component state. -foreign import readState :: forall state write eff. - UIRef -> - Eff (state :: ReactState (Read write) state | eff) state +foreign import readState :: forall state write eff. ReactThis -> Eff (state :: ReactState (Read write) state | eff) state -- | Transform the component state by applying a function. -transformState :: forall state statePerms eff. - UIRef -> - (state -> state) -> - Eff (state :: ReactState ReadWrite state | eff) state +transformState :: forall state eff. ReactThis -> (state -> state) -> Eff (state :: ReactState ReadWrite state | eff) state transformState ctx f = do state <- readState ctx writeState ctx $ f state -- | Create a React class from a specification. -foreign import mkUI :: forall props state eff. - UISpec props state eff -> - UIClass props +foreign import createClass :: forall props state eff. ReactSpec props state eff -> ReactClass props -- | Create an event handler. -foreign import handle :: forall eff ev props state result. - (ev -> EventHandlerContext eff props state result) -> - EventHandler ev - --- | Render a React element in a document element. -foreign import render :: forall eff. UI -> Element -> Eff (dom :: DOM | eff) UI - --- | Render a React element as a string. -foreign import renderToString :: UI -> String +foreign import handle :: forall eff ev props state result. (ev -> EventHandlerContext eff props state result) -> EventHandler ev -- | Create an element from a React class. -foreign import createElement :: forall props. UIClass props -> props -> Array UI -> UI +foreign import createElement :: forall props. ReactClass props -> props -> Array ReactElement -> ReactElement -- | Create a factory from a React class. -foreign import createFactory :: forall props. UIClass props -> props -> UI +foreign import createFactory :: forall props. ReactClass props -> props -> ReactElement + +-- | Render a React element in a document element. +foreign import render :: forall eff. ReactElement -> Element -> Eff (dom :: DOM | eff) ReactElement + +-- | Render a React element as a string. +foreign import renderToString :: ReactElement -> String diff --git a/src/React/DOM.purs b/src/React/DOM.purs index a329347..f9a7fa6 100644 --- a/src/React/DOM.purs +++ b/src/React/DOM.purs @@ -5,678 +5,678 @@ import Prelude hiding (sub, div, map) import React import React.DOM.Props (Props()) -foreign import mkDOM :: String -> Array Props -> Array UI -> UI +foreign import mkDOM :: String -> Array Props -> Array ReactElement -> ReactElement -foreign import text :: String -> UI +foreign import text :: String -> ReactElement -a :: Array Props -> Array UI -> UI +a :: Array Props -> Array ReactElement -> ReactElement a = mkDOM "a" -a' :: Array UI -> UI +a' :: Array ReactElement -> ReactElement a' = a [] -abbr :: Array Props -> Array UI -> UI +abbr :: Array Props -> Array ReactElement -> ReactElement abbr = mkDOM "abbr" -abbr' :: Array UI -> UI +abbr' :: Array ReactElement -> ReactElement abbr' = abbr [] -address :: Array Props -> Array UI -> UI +address :: Array Props -> Array ReactElement -> ReactElement address = mkDOM "address" -address' :: Array UI -> UI +address' :: Array ReactElement -> ReactElement address' = address [] -area :: Array Props -> Array UI -> UI +area :: Array Props -> Array ReactElement -> ReactElement area = mkDOM "area" -area' :: Array UI -> UI +area' :: Array ReactElement -> ReactElement area' = area [] -article :: Array Props -> Array UI -> UI +article :: Array Props -> Array ReactElement -> ReactElement article = mkDOM "article" -article' :: Array UI -> UI +article' :: Array ReactElement -> ReactElement article' = article [] -aside :: Array Props -> Array UI -> UI +aside :: Array Props -> Array ReactElement -> ReactElement aside = mkDOM "aside" -aside' :: Array UI -> UI +aside' :: Array ReactElement -> ReactElement aside' = aside [] -audio :: Array Props -> Array UI -> UI +audio :: Array Props -> Array ReactElement -> ReactElement audio = mkDOM "audio" -audio' :: Array UI -> UI +audio' :: Array ReactElement -> ReactElement audio' = audio [] -b :: Array Props -> Array UI -> UI +b :: Array Props -> Array ReactElement -> ReactElement b = mkDOM "b" -b' :: Array UI -> UI +b' :: Array ReactElement -> ReactElement b' = b [] -base :: Array Props -> Array UI -> UI +base :: Array Props -> Array ReactElement -> ReactElement base = mkDOM "base" -base' :: Array UI -> UI +base' :: Array ReactElement -> ReactElement base' = base [] -bdi :: Array Props -> Array UI -> UI +bdi :: Array Props -> Array ReactElement -> ReactElement bdi = mkDOM "bdi" -bdi' :: Array UI -> UI +bdi' :: Array ReactElement -> ReactElement bdi' = bdi [] -bdo :: Array Props -> Array UI -> UI +bdo :: Array Props -> Array ReactElement -> ReactElement bdo = mkDOM "bdo" -bdo' :: Array UI -> UI +bdo' :: Array ReactElement -> ReactElement bdo' = bdo [] -big :: Array Props -> Array UI -> UI +big :: Array Props -> Array ReactElement -> ReactElement big = mkDOM "big" -big' :: Array UI -> UI +big' :: Array ReactElement -> ReactElement big' = big [] -blockquote :: Array Props -> Array UI -> UI +blockquote :: Array Props -> Array ReactElement -> ReactElement blockquote = mkDOM "blockquote" -blockquote' :: Array UI -> UI +blockquote' :: Array ReactElement -> ReactElement blockquote' = blockquote [] -body :: Array Props -> Array UI -> UI +body :: Array Props -> Array ReactElement -> ReactElement body = mkDOM "body" -body' :: Array UI -> UI +body' :: Array ReactElement -> ReactElement body' = body [] -br :: Array Props -> Array UI -> UI +br :: Array Props -> Array ReactElement -> ReactElement br = mkDOM "br" -br' :: Array UI -> UI +br' :: Array ReactElement -> ReactElement br' = br [] -button :: Array Props -> Array UI -> UI +button :: Array Props -> Array ReactElement -> ReactElement button = mkDOM "button" -button' :: Array UI -> UI +button' :: Array ReactElement -> ReactElement button' = button [] -canvas :: Array Props -> Array UI -> UI +canvas :: Array Props -> Array ReactElement -> ReactElement canvas = mkDOM "canvas" -canvas' :: Array UI -> UI +canvas' :: Array ReactElement -> ReactElement canvas' = canvas [] -caption :: Array Props -> Array UI -> UI +caption :: Array Props -> Array ReactElement -> ReactElement caption = mkDOM "caption" -caption' :: Array UI -> UI +caption' :: Array ReactElement -> ReactElement caption' = caption [] -cite :: Array Props -> Array UI -> UI +cite :: Array Props -> Array ReactElement -> ReactElement cite = mkDOM "cite" -cite' :: Array UI -> UI +cite' :: Array ReactElement -> ReactElement cite' = cite [] -code :: Array Props -> Array UI -> UI +code :: Array Props -> Array ReactElement -> ReactElement code = mkDOM "code" -code' :: Array UI -> UI +code' :: Array ReactElement -> ReactElement code' = code [] -col :: Array Props -> Array UI -> UI +col :: Array Props -> Array ReactElement -> ReactElement col = mkDOM "col" -col' :: Array UI -> UI +col' :: Array ReactElement -> ReactElement col' = col [] -colgroup :: Array Props -> Array UI -> UI +colgroup :: Array Props -> Array ReactElement -> ReactElement colgroup = mkDOM "colgroup" -colgroup' :: Array UI -> UI +colgroup' :: Array ReactElement -> ReactElement colgroup' = colgroup [] -_data :: Array Props -> Array UI -> UI +_data :: Array Props -> Array ReactElement -> ReactElement _data = mkDOM "data" -_data' :: Array UI -> UI +_data' :: Array ReactElement -> ReactElement _data' = _data [] -datalist :: Array Props -> Array UI -> UI +datalist :: Array Props -> Array ReactElement -> ReactElement datalist = mkDOM "datalist" -datalist' :: Array UI -> UI +datalist' :: Array ReactElement -> ReactElement datalist' = datalist [] -dd :: Array Props -> Array UI -> UI +dd :: Array Props -> Array ReactElement -> ReactElement dd = mkDOM "dd" -dd' :: Array UI -> UI +dd' :: Array ReactElement -> ReactElement dd' = dd [] -del :: Array Props -> Array UI -> UI +del :: Array Props -> Array ReactElement -> ReactElement del = mkDOM "del" -del' :: Array UI -> UI +del' :: Array ReactElement -> ReactElement del' = del [] -details :: Array Props -> Array UI -> UI +details :: Array Props -> Array ReactElement -> ReactElement details = mkDOM "details" -details' :: Array UI -> UI +details' :: Array ReactElement -> ReactElement details' = details [] -dfn :: Array Props -> Array UI -> UI +dfn :: Array Props -> Array ReactElement -> ReactElement dfn = mkDOM "dfn" -dfn' :: Array UI -> UI +dfn' :: Array ReactElement -> ReactElement dfn' = dfn [] -dialog :: Array Props -> Array UI -> UI +dialog :: Array Props -> Array ReactElement -> ReactElement dialog = mkDOM "dialog" -dialog' :: Array UI -> UI +dialog' :: Array ReactElement -> ReactElement dialog' = dialog [] -div :: Array Props -> Array UI -> UI +div :: Array Props -> Array ReactElement -> ReactElement div = mkDOM "div" -div' :: Array UI -> UI +div' :: Array ReactElement -> ReactElement div' = div [] -dl :: Array Props -> Array UI -> UI +dl :: Array Props -> Array ReactElement -> ReactElement dl = mkDOM "dl" -dl' :: Array UI -> UI +dl' :: Array ReactElement -> ReactElement dl' = dl [] -dt :: Array Props -> Array UI -> UI +dt :: Array Props -> Array ReactElement -> ReactElement dt = mkDOM "dt" -dt' :: Array UI -> UI +dt' :: Array ReactElement -> ReactElement dt' = dt [] -em :: Array Props -> Array UI -> UI +em :: Array Props -> Array ReactElement -> ReactElement em = mkDOM "em" -em' :: Array UI -> UI +em' :: Array ReactElement -> ReactElement em' = em [] -embed :: Array Props -> Array UI -> UI +embed :: Array Props -> Array ReactElement -> ReactElement embed = mkDOM "embed" -embed' :: Array UI -> UI +embed' :: Array ReactElement -> ReactElement embed' = embed [] -fieldset :: Array Props -> Array UI -> UI +fieldset :: Array Props -> Array ReactElement -> ReactElement fieldset = mkDOM "fieldset" -fieldset' :: Array UI -> UI +fieldset' :: Array ReactElement -> ReactElement fieldset' = fieldset [] -figcaption :: Array Props -> Array UI -> UI +figcaption :: Array Props -> Array ReactElement -> ReactElement figcaption = mkDOM "figcaption" -figcaption' :: Array UI -> UI +figcaption' :: Array ReactElement -> ReactElement figcaption' = figcaption [] -figure :: Array Props -> Array UI -> UI +figure :: Array Props -> Array ReactElement -> ReactElement figure = mkDOM "figure" -figure' :: Array UI -> UI +figure' :: Array ReactElement -> ReactElement figure' = figure [] -footer :: Array Props -> Array UI -> UI +footer :: Array Props -> Array ReactElement -> ReactElement footer = mkDOM "footer" -footer' :: Array UI -> UI +footer' :: Array ReactElement -> ReactElement footer' = footer [] -form :: Array Props -> Array UI -> UI +form :: Array Props -> Array ReactElement -> ReactElement form = mkDOM "form" -form' :: Array UI -> UI +form' :: Array ReactElement -> ReactElement form' = form [] -h1 :: Array Props -> Array UI -> UI +h1 :: Array Props -> Array ReactElement -> ReactElement h1 = mkDOM "h1" -h1' :: Array UI -> UI +h1' :: Array ReactElement -> ReactElement h1' = h1 [] -h2 :: Array Props -> Array UI -> UI +h2 :: Array Props -> Array ReactElement -> ReactElement h2 = mkDOM "h2" -h2' :: Array UI -> UI +h2' :: Array ReactElement -> ReactElement h2' = h2 [] -h3 :: Array Props -> Array UI -> UI +h3 :: Array Props -> Array ReactElement -> ReactElement h3 = mkDOM "h3" -h3' :: Array UI -> UI +h3' :: Array ReactElement -> ReactElement h3' = h3 [] -h4 :: Array Props -> Array UI -> UI +h4 :: Array Props -> Array ReactElement -> ReactElement h4 = mkDOM "h4" -h4' :: Array UI -> UI +h4' :: Array ReactElement -> ReactElement h4' = h4 [] -h5 :: Array Props -> Array UI -> UI +h5 :: Array Props -> Array ReactElement -> ReactElement h5 = mkDOM "h5" -h5' :: Array UI -> UI +h5' :: Array ReactElement -> ReactElement h5' = h5 [] -h6 :: Array Props -> Array UI -> UI +h6 :: Array Props -> Array ReactElement -> ReactElement h6 = mkDOM "h6" -h6' :: Array UI -> UI +h6' :: Array ReactElement -> ReactElement h6' = h6 [] -head :: Array Props -> Array UI -> UI +head :: Array Props -> Array ReactElement -> ReactElement head = mkDOM "head" -head' :: Array UI -> UI +head' :: Array ReactElement -> ReactElement head' = head [] -header :: Array Props -> Array UI -> UI +header :: Array Props -> Array ReactElement -> ReactElement header = mkDOM "header" -header' :: Array UI -> UI +header' :: Array ReactElement -> ReactElement header' = header [] -hr :: Array Props -> Array UI -> UI +hr :: Array Props -> Array ReactElement -> ReactElement hr = mkDOM "hr" -hr' :: Array UI -> UI +hr' :: Array ReactElement -> ReactElement hr' = hr [] -html :: Array Props -> Array UI -> UI +html :: Array Props -> Array ReactElement -> ReactElement html = mkDOM "html" -html' :: Array UI -> UI +html' :: Array ReactElement -> ReactElement html' = html [] -i :: Array Props -> Array UI -> UI +i :: Array Props -> Array ReactElement -> ReactElement i = mkDOM "i" -i' :: Array UI -> UI +i' :: Array ReactElement -> ReactElement i' = i [] -iframe :: Array Props -> Array UI -> UI +iframe :: Array Props -> Array ReactElement -> ReactElement iframe = mkDOM "iframe" -iframe' :: Array UI -> UI +iframe' :: Array ReactElement -> ReactElement iframe' = iframe [] -img :: Array Props -> Array UI -> UI +img :: Array Props -> Array ReactElement -> ReactElement img = mkDOM "img" -img' :: Array UI -> UI +img' :: Array ReactElement -> ReactElement img' = img [] -input :: Array Props -> Array UI -> UI +input :: Array Props -> Array ReactElement -> ReactElement input = mkDOM "input" -input' :: Array UI -> UI +input' :: Array ReactElement -> ReactElement input' = input [] -ins :: Array Props -> Array UI -> UI +ins :: Array Props -> Array ReactElement -> ReactElement ins = mkDOM "ins" -ins' :: Array UI -> UI +ins' :: Array ReactElement -> ReactElement ins' = ins [] -kbd :: Array Props -> Array UI -> UI +kbd :: Array Props -> Array ReactElement -> ReactElement kbd = mkDOM "kbd" -kbd' :: Array UI -> UI +kbd' :: Array ReactElement -> ReactElement kbd' = kbd [] -keygen :: Array Props -> Array UI -> UI +keygen :: Array Props -> Array ReactElement -> ReactElement keygen = mkDOM "keygen" -keygen' :: Array UI -> UI +keygen' :: Array ReactElement -> ReactElement keygen' = keygen [] -label :: Array Props -> Array UI -> UI +label :: Array Props -> Array ReactElement -> ReactElement label = mkDOM "label" -label' :: Array UI -> UI +label' :: Array ReactElement -> ReactElement label' = label [] -legend :: Array Props -> Array UI -> UI +legend :: Array Props -> Array ReactElement -> ReactElement legend = mkDOM "legend" -legend' :: Array UI -> UI +legend' :: Array ReactElement -> ReactElement legend' = legend [] -li :: Array Props -> Array UI -> UI +li :: Array Props -> Array ReactElement -> ReactElement li = mkDOM "li" -li' :: Array UI -> UI +li' :: Array ReactElement -> ReactElement li' = li [] -link :: Array Props -> Array UI -> UI +link :: Array Props -> Array ReactElement -> ReactElement link = mkDOM "link" -link' :: Array UI -> UI +link' :: Array ReactElement -> ReactElement link' = body [] -main :: Array Props -> Array UI -> UI +main :: Array Props -> Array ReactElement -> ReactElement main = mkDOM "main" -main' :: Array UI -> UI +main' :: Array ReactElement -> ReactElement main' = main [] -map :: Array Props -> Array UI -> UI +map :: Array Props -> Array ReactElement -> ReactElement map = mkDOM "map" -map' :: Array UI -> UI +map' :: Array ReactElement -> ReactElement map' = map [] -mark :: Array Props -> Array UI -> UI +mark :: Array Props -> Array ReactElement -> ReactElement mark = mkDOM "mark" -mark' :: Array UI -> UI +mark' :: Array ReactElement -> ReactElement mark' = mark [] -menu :: Array Props -> Array UI -> UI +menu :: Array Props -> Array ReactElement -> ReactElement menu = mkDOM "menu" -menu' :: Array UI -> UI +menu' :: Array ReactElement -> ReactElement menu' = menu [] -menuitem :: Array Props -> Array UI -> UI +menuitem :: Array Props -> Array ReactElement -> ReactElement menuitem = mkDOM "menuitem" -menuitem' :: Array UI -> UI +menuitem' :: Array ReactElement -> ReactElement menuitem' = menuitem [] -meta :: Array Props -> Array UI -> UI +meta :: Array Props -> Array ReactElement -> ReactElement meta = mkDOM "meta" -meta' :: Array UI -> UI +meta' :: Array ReactElement -> ReactElement meta' = meta [] -meter :: Array Props -> Array UI -> UI +meter :: Array Props -> Array ReactElement -> ReactElement meter = mkDOM "meter" -meter' :: Array UI -> UI +meter' :: Array ReactElement -> ReactElement meter' = meter [] -nav :: Array Props -> Array UI -> UI +nav :: Array Props -> Array ReactElement -> ReactElement nav = mkDOM "nav" -nav' :: Array UI -> UI +nav' :: Array ReactElement -> ReactElement nav' = nav [] -noscript :: Array Props -> Array UI -> UI +noscript :: Array Props -> Array ReactElement -> ReactElement noscript = mkDOM "noscript" -noscript' :: Array UI -> UI +noscript' :: Array ReactElement -> ReactElement noscript' = noscript [] -object :: Array Props -> Array UI -> UI +object :: Array Props -> Array ReactElement -> ReactElement object = mkDOM "object" -object' :: Array UI -> UI +object' :: Array ReactElement -> ReactElement object' = object [] -ol :: Array Props -> Array UI -> UI +ol :: Array Props -> Array ReactElement -> ReactElement ol = mkDOM "ol" -ol' :: Array UI -> UI +ol' :: Array ReactElement -> ReactElement ol' = ol [] -optgroup :: Array Props -> Array UI -> UI +optgroup :: Array Props -> Array ReactElement -> ReactElement optgroup = mkDOM "optgroup" -optgroup' :: Array UI -> UI +optgroup' :: Array ReactElement -> ReactElement optgroup' = optgroup [] -option :: Array Props -> Array UI -> UI +option :: Array Props -> Array ReactElement -> ReactElement option = mkDOM "option" -option' :: Array UI -> UI +option' :: Array ReactElement -> ReactElement option' = option [] -output :: Array Props -> Array UI -> UI +output :: Array Props -> Array ReactElement -> ReactElement output = mkDOM "output" -output' :: Array UI -> UI +output' :: Array ReactElement -> ReactElement output' = output [] -p :: Array Props -> Array UI -> UI +p :: Array Props -> Array ReactElement -> ReactElement p = mkDOM "p" -p' :: Array UI -> UI +p' :: Array ReactElement -> ReactElement p' = p [] -param :: Array Props -> Array UI -> UI +param :: Array Props -> Array ReactElement -> ReactElement param = mkDOM "param" -param' :: Array UI -> UI +param' :: Array ReactElement -> ReactElement param' = param [] -picture :: Array Props -> Array UI -> UI +picture :: Array Props -> Array ReactElement -> ReactElement picture = mkDOM "picture" -picture' :: Array UI -> UI +picture' :: Array ReactElement -> ReactElement picture' = picture [] -pre :: Array Props -> Array UI -> UI +pre :: Array Props -> Array ReactElement -> ReactElement pre = mkDOM "pre" -pre' :: Array UI -> UI +pre' :: Array ReactElement -> ReactElement pre' = pre [] -progress :: Array Props -> Array UI -> UI +progress :: Array Props -> Array ReactElement -> ReactElement progress = mkDOM "progress" -progress' :: Array UI -> UI +progress' :: Array ReactElement -> ReactElement progress' = progress [] -q :: Array Props -> Array UI -> UI +q :: Array Props -> Array ReactElement -> ReactElement q = mkDOM "q" -q' :: Array UI -> UI +q' :: Array ReactElement -> ReactElement q' = q [] -rp :: Array Props -> Array UI -> UI +rp :: Array Props -> Array ReactElement -> ReactElement rp = mkDOM "rp" -rp' :: Array UI -> UI +rp' :: Array ReactElement -> ReactElement rp' = rp [] -rt :: Array Props -> Array UI -> UI +rt :: Array Props -> Array ReactElement -> ReactElement rt = mkDOM "rt" -rt' :: Array UI -> UI +rt' :: Array ReactElement -> ReactElement rt' = rt [] -ruby :: Array Props -> Array UI -> UI +ruby :: Array Props -> Array ReactElement -> ReactElement ruby = mkDOM "ruby" -ruby' :: Array UI -> UI +ruby' :: Array ReactElement -> ReactElement ruby' = ruby [] -s :: Array Props -> Array UI -> UI +s :: Array Props -> Array ReactElement -> ReactElement s = mkDOM "s" -s' :: Array UI -> UI +s' :: Array ReactElement -> ReactElement s' = s [] -samp :: Array Props -> Array UI -> UI +samp :: Array Props -> Array ReactElement -> ReactElement samp = mkDOM "samp" -samp' :: Array UI -> UI +samp' :: Array ReactElement -> ReactElement samp' = samp [] -script :: Array Props -> Array UI -> UI +script :: Array Props -> Array ReactElement -> ReactElement script = mkDOM "script" -script' :: Array UI -> UI +script' :: Array ReactElement -> ReactElement script' = script [] -section :: Array Props -> Array UI -> UI +section :: Array Props -> Array ReactElement -> ReactElement section = mkDOM "section" -section' :: Array UI -> UI +section' :: Array ReactElement -> ReactElement section' = section [] -select :: Array Props -> Array UI -> UI +select :: Array Props -> Array ReactElement -> ReactElement select = mkDOM "select" -select' :: Array UI -> UI +select' :: Array ReactElement -> ReactElement select' = select [] -small :: Array Props -> Array UI -> UI +small :: Array Props -> Array ReactElement -> ReactElement small = mkDOM "small" -small' :: Array UI -> UI +small' :: Array ReactElement -> ReactElement small' = small [] -source :: Array Props -> Array UI -> UI +source :: Array Props -> Array ReactElement -> ReactElement source = mkDOM "source" -source' :: Array UI -> UI +source' :: Array ReactElement -> ReactElement source' = source [] -span :: Array Props -> Array UI -> UI +span :: Array Props -> Array ReactElement -> ReactElement span = mkDOM "span" -span' :: Array UI -> UI +span' :: Array ReactElement -> ReactElement span' = span [] -strong :: Array Props -> Array UI -> UI +strong :: Array Props -> Array ReactElement -> ReactElement strong = mkDOM "strong" -strong' :: Array UI -> UI +strong' :: Array ReactElement -> ReactElement strong' = strong [] -style :: Array Props -> Array UI -> UI +style :: Array Props -> Array ReactElement -> ReactElement style = mkDOM "style" -style' :: Array UI -> UI +style' :: Array ReactElement -> ReactElement style' = style [] -sub :: Array Props -> Array UI -> UI +sub :: Array Props -> Array ReactElement -> ReactElement sub = mkDOM "sub" -sub' :: Array UI -> UI +sub' :: Array ReactElement -> ReactElement sub' = sub [] -summary :: Array Props -> Array UI -> UI +summary :: Array Props -> Array ReactElement -> ReactElement summary = mkDOM "summary" -summary' :: Array UI -> UI +summary' :: Array ReactElement -> ReactElement summary' = summary [] -sup :: Array Props -> Array UI -> UI +sup :: Array Props -> Array ReactElement -> ReactElement sup = mkDOM "sup" -sup' :: Array UI -> UI +sup' :: Array ReactElement -> ReactElement sup' = sup [] -table :: Array Props -> Array UI -> UI +table :: Array Props -> Array ReactElement -> ReactElement table = mkDOM "table" -table' :: Array UI -> UI +table' :: Array ReactElement -> ReactElement table' = table [] -tbody :: Array Props -> Array UI -> UI +tbody :: Array Props -> Array ReactElement -> ReactElement tbody = mkDOM "tbody" -tbody' :: Array UI -> UI +tbody' :: Array ReactElement -> ReactElement tbody' = tbody [] -td :: Array Props -> Array UI -> UI +td :: Array Props -> Array ReactElement -> ReactElement td = mkDOM "td" -td' :: Array UI -> UI +td' :: Array ReactElement -> ReactElement td' = td [] -textarea :: Array Props -> Array UI -> UI +textarea :: Array Props -> Array ReactElement -> ReactElement textarea = mkDOM "textarea" -textarea' :: Array UI -> UI +textarea' :: Array ReactElement -> ReactElement textarea' = textarea [] -tfoot :: Array Props -> Array UI -> UI +tfoot :: Array Props -> Array ReactElement -> ReactElement tfoot = mkDOM "tfoot" -tfoot' :: Array UI -> UI +tfoot' :: Array ReactElement -> ReactElement tfoot' = tfoot [] -th :: Array Props -> Array UI -> UI +th :: Array Props -> Array ReactElement -> ReactElement th = mkDOM "th" -th' :: Array UI -> UI +th' :: Array ReactElement -> ReactElement th' = th [] -thead :: Array Props -> Array UI -> UI +thead :: Array Props -> Array ReactElement -> ReactElement thead = mkDOM "thead" -thead' :: Array UI -> UI +thead' :: Array ReactElement -> ReactElement thead' = thead [] -time :: Array Props -> Array UI -> UI +time :: Array Props -> Array ReactElement -> ReactElement time = mkDOM "time" -time' :: Array UI -> UI +time' :: Array ReactElement -> ReactElement time' = time [] -title :: Array Props -> Array UI -> UI +title :: Array Props -> Array ReactElement -> ReactElement title = mkDOM "title" -title' :: Array UI -> UI +title' :: Array ReactElement -> ReactElement title' = title [] -tr :: Array Props -> Array UI -> UI +tr :: Array Props -> Array ReactElement -> ReactElement tr = mkDOM "tr" -tr' :: Array UI -> UI +tr' :: Array ReactElement -> ReactElement tr' = tr [] -track :: Array Props -> Array UI -> UI +track :: Array Props -> Array ReactElement -> ReactElement track = mkDOM "track" -track' :: Array UI -> UI +track' :: Array ReactElement -> ReactElement track' = track [] -u :: Array Props -> Array UI -> UI +u :: Array Props -> Array ReactElement -> ReactElement u = mkDOM "u" -u' :: Array UI -> UI +u' :: Array ReactElement -> ReactElement u' = u [] -ul :: Array Props -> Array UI -> UI +ul :: Array Props -> Array ReactElement -> ReactElement ul = mkDOM "ul" -ul' :: Array UI -> UI +ul' :: Array ReactElement -> ReactElement ul' = ul [] -var :: Array Props -> Array UI -> UI +var :: Array Props -> Array ReactElement -> ReactElement var = mkDOM "var" -var' :: Array UI -> UI +var' :: Array ReactElement -> ReactElement var' = var [] -video :: Array Props -> Array UI -> UI +video :: Array Props -> Array ReactElement -> ReactElement video = mkDOM "video" -video' :: Array UI -> UI +video' :: Array ReactElement -> ReactElement video' = video [] -wbr :: Array Props -> Array UI -> UI +wbr :: Array Props -> Array ReactElement -> ReactElement wbr = mkDOM "body" -wbr' :: Array UI -> UI +wbr' :: Array ReactElement -> ReactElement wbr' = wbr [] diff --git a/src/React/DOM/SVG.purs b/src/React/DOM/SVG.purs index 339f695..a516372 100644 --- a/src/React/DOM/SVG.purs +++ b/src/React/DOM/SVG.purs @@ -4,56 +4,56 @@ import React import React.DOM (mkDOM) import React.DOM.Props (Props()) -circle :: Array Props -> Array UI -> UI +circle :: Array Props -> Array ReactElement -> ReactElement circle = mkDOM "circle" -clipPath :: Array Props -> Array UI -> UI +clipPath :: Array Props -> Array ReactElement -> ReactElement clipPath = mkDOM "clipPath" -defs :: Array Props -> Array UI -> UI +defs :: Array Props -> Array ReactElement -> ReactElement defs = mkDOM "defs" -ellipse :: Array Props -> Array UI -> UI +ellipse :: Array Props -> Array ReactElement -> ReactElement ellipse = mkDOM "ellipse" -g :: Array Props -> Array UI -> UI +g :: Array Props -> Array ReactElement -> ReactElement g = mkDOM "g" -line :: Array Props -> Array UI -> UI +line :: Array Props -> Array ReactElement -> ReactElement line = mkDOM "line" -linearGradient :: Array Props -> Array UI -> UI +linearGradient :: Array Props -> Array ReactElement -> ReactElement linearGradient = mkDOM "linearGradient" -mask :: Array Props -> Array UI -> UI +mask :: Array Props -> Array ReactElement -> ReactElement mask = mkDOM "mask" -path :: Array Props -> Array UI -> UI +path :: Array Props -> Array ReactElement -> ReactElement path = mkDOM "path" -pattern :: Array Props -> Array UI -> UI +pattern :: Array Props -> Array ReactElement -> ReactElement pattern = mkDOM "pattern" -polygon :: Array Props -> Array UI -> UI +polygon :: Array Props -> Array ReactElement -> ReactElement polygon = mkDOM "polygon" -polyline :: Array Props -> Array UI -> UI +polyline :: Array Props -> Array ReactElement -> ReactElement polyline = mkDOM "polyline" -radialGradient :: Array Props -> Array UI -> UI +radialGradient :: Array Props -> Array ReactElement -> ReactElement radialGradient = mkDOM "radialGradient" -rect :: Array Props -> Array UI -> UI +rect :: Array Props -> Array ReactElement -> ReactElement rect = mkDOM "rect" -stop :: Array Props -> Array UI -> UI +stop :: Array Props -> Array ReactElement -> ReactElement stop = mkDOM "stop" -svg :: Array Props -> Array UI -> UI +svg :: Array Props -> Array ReactElement -> ReactElement svg = mkDOM "svg" -text :: Array Props -> Array UI -> UI +text :: Array Props -> Array ReactElement -> ReactElement text = mkDOM "text" -tspan :: Array Props -> Array UI -> UI +tspan :: Array Props -> Array ReactElement -> ReactElement tspan = mkDOM "tspan" diff --git a/test/Container.purs b/test/Container.purs index 526409c..d2e4465 100644 --- a/test/Container.purs +++ b/test/Container.purs @@ -7,7 +7,7 @@ import React import qualified React.DOM as D import qualified React.DOM.Props as P -container = mkUI $ spec unit \ctx -> do +container = createClass $ spec unit \ctx -> do children <- getChildren ctx let ui = D.div [ P.style { borderColor: "red" diff --git a/test/Main.purs b/test/Main.purs index 98f27e3..271eeba 100644 --- a/test/Main.purs +++ b/test/Main.purs @@ -29,7 +29,7 @@ foreign import interval :: forall eff a. Eff eff a -> Eff eff Unit -hello = mkUI $ spec unit \ctx -> do +hello = createClass $ spec unit \ctx -> do props <- getProps ctx return $ D.h1 [ P.className "Hello" , P.style { background: "lightgray" } @@ -38,7 +38,7 @@ hello = mkUI $ spec unit \ctx -> do , D.text props.name ] -counter = mkUI counterSpec +counter = createClass counterSpec where counterSpec = (spec 0 render) { componentDidMount = \ctx -> @@ -60,7 +60,7 @@ counter = mkUI counterSpec main = body' >>= render ui where - ui :: UI + ui :: ReactElement ui = D.div' [ createFactory hello { name: "World" } , createFactory counter unit , createElement container unit