Topic/spec display name

docs/React.md

@@ -155,7 +155,7 @@ A rendering function.
 #### `UISpec`
 
 ``` purescript
-type UISpec props state eff = { render :: Render props state eff, 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 -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, shouldComponentUpdate :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Boolean, componentWillUpdate :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentDidUpdate :: UIRef -> 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 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 -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, shouldComponentUpdate :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Boolean, componentWillUpdate :: UIRef -> Eff (props :: ReactProps props, state :: ReactState ReadWrite state, refs :: ReactRefs ReadOnly | eff) Unit, componentDidUpdate :: UIRef -> 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 }
 ```
 
 A specification of a component.

src/React.js

@@ -38,11 +38,16 @@ exports.mkUI = function(ss) {
     var result = {};
     for (var s in ss) {
         if (ss.hasOwnProperty(s)) {
+          if (s === "displayName") {
+            result[s] = ss[s];
+          }
+          else {
             result[s] = (function(impl) {
                 return function() {
                     return impl(this)();
                 }
             })(ss[s]);
+          }
         }
     }
     result.getInitialState = function() {

src/React.purs

@@ -1,47 +1,47 @@
 -- | This module defines foreign types and functions which wrap React's functionality.
 
-module React 
+module React
   ( UI()
   , UIRef()
-  
+
   , EventHandler()
-  
+
   , Disallowed()
   , Read()
   , Write()
   , Only()
   , ReadWrite()
   , ReadOnly()
-  
+
   , ReactState()
   , ReactProps()
   , ReactRefs()
-  
+
   , Refs()
-  
+
   , Render()
-  
+
   , UISpec()
-  
+
   , Event()
   , MouseEvent()
   , KeyboardEvent()
-  
+
   , EventHandlerContext()
-  
+
   , spec
-  
+
   , getProps
   , getRefs
-  
+
   , readState
   , writeState
   , transformState
-  
+
   , mkUI
-  
+
   , handle
-  
+
   , renderToString
   , renderToBody
   , renderToElementById
@@ -103,13 +103,13 @@ foreign import data Refs :: *
 foreign import data Event :: *
 
 -- | The type of mouse events.
-type MouseEvent = 
+type MouseEvent =
   { pageX :: Number
-  , pageY :: Number 
+  , pageY :: Number
   }
 
 -- | The type of keyboard events.
-type KeyboardEvent = 
+type KeyboardEvent =
   { altKey   :: Boolean
   , ctrlKey  :: Boolean
   , charCode :: Int
@@ -124,7 +124,7 @@ type KeyboardEvent =
   }
 
 -- | A function which handles events.
-type EventHandlerContext eff props state result =  
+type EventHandlerContext eff props state result =
   Eff ( props :: ReactProps props
       , refs :: ReactRefs ReadOnly
       , state :: ReactState ReadWrite state
@@ -143,6 +143,7 @@ type Render props state eff =
 -- | A specification of a component.
 type UISpec props state eff =
   { render :: Render props state eff
+  , displayName :: String
   , getInitialState
       :: UIRef ->
          Eff ( props :: ReactProps props
@@ -205,6 +206,7 @@ type UISpec props state eff =
 spec :: forall props state eff. state -> Render props state eff -> UISpec props state eff
 spec st render =
   { render:                    render
+  , displayName:               ""
   , getInitialState:           \_ -> pure st
   , componentWillMount:        \_ -> return unit
   , componentDidMount:         \_ -> return unit
@@ -216,30 +218,30 @@ spec st render =
   }
 
 -- | Read the component props.
-foreign import getProps :: forall props eff. 
-                             UIRef -> 
+foreign import getProps :: forall props eff.
+                             UIRef ->
                              Eff (props :: ReactProps props | eff) props
 
 -- | Read the component refs.
 foreign import getRefs :: forall write eff.
-                            UIRef -> 
+                            UIRef ->
                             Eff (refs :: ReactRefs (Read write) | eff) Refs
 
 -- | Write the component state.
-foreign import writeState :: forall state eff. 
-                               UIRef -> 
-                               state -> 
+foreign import writeState :: forall state eff.
+                               UIRef ->
+                               state ->
                                Eff (state :: ReactState ReadWrite state | eff) state
 
 -- | Read the component state.
-foreign import readState :: forall state write eff. 
+foreign import readState :: forall state write eff.
                               UIRef ->
                               Eff (state :: ReactState (Read write) state | eff) state
 
 -- | Transform the component state by applying a function.
-transformState :: forall state statePerms eff. 
+transformState :: forall state statePerms eff.
                     UIRef ->
-                    (state -> state) -> 
+                    (state -> state) ->
                     Eff (state :: ReactState ReadWrite state | eff) state
 transformState ctx f = do
   state <- readState ctx
@@ -248,7 +250,7 @@ transformState ctx f = do
 -- | Create a component from a component spec.
 foreign import mkUI :: forall props state eff.
                          UISpec props state eff ->
-                         props -> 
+                         props ->
                          UI
 
 -- | Create an event handler.

src/React/DOM.js

@@ -5,17 +5,17 @@
 
 function mkProps(props) {
     var result = {};
-    
+
     for (var i = 0, len = props.length; i < len; i++) {
         var prop = props[i];
-        
+
         for (var key in prop) {
             if (prop.hasOwnProperty(key)) {
                 result[key] = prop[key];
             }
         }
     }
-    
+
     return result;
 };
 

src/React/DOM/Props.purs

@@ -9,7 +9,7 @@ foreign import data Props :: *
 foreign import unsafeMkProps :: forall val. String -> val -> Props
 
 foreign import unsafeUnfoldProps :: forall vals. String -> { | vals } -> Props
-    
+
 aria :: forall ariaAttrs. { | ariaAttrs } -> Props
 aria = unsafeUnfoldProps "aria"
 
@@ -422,4 +422,4 @@ onScroll :: forall eff props state result. (Event -> EventHandlerContext eff pro
 onScroll f = unsafeMkProps "onScroll" (handle f)
 
 onWheel :: forall eff props state result. (Event -> EventHandlerContext eff props state result) -> Props
-onWheel f = unsafeMkProps "onWheel" (handle f)
+onWheel f = unsafeMkProps "onWheel" (handle f)

src/React/DOM/SVG.purs

@@ -1,9 +1,9 @@
 module React.DOM.SVG where
-    
+
 import React
 import React.DOM (mkDOM)
 import React.DOM.Props (Props())
-    
+
 circle :: Array Props -> Array UI -> UI
 circle = mkDOM "circle"
 
@@ -56,4 +56,4 @@ text :: Array Props -> Array UI -> UI
 text = mkDOM "text"
 
 tspan :: Array Props -> Array UI -> UI
-tspan = mkDOM "tspan"
+tspan = mkDOM "tspan"