Tighter React.JS integration, composable classes, modular animations.

example/src/Chain.hs

@@ -8,6 +8,8 @@ import Haste hiding (fromString)
 import Haste.JSON
 import Lens.Family2 hiding (view)
 import React
+import React.Anim
+import React.Anim.Class
 
 
 -- model
@@ -71,9 +73,8 @@ derive t | t < 1 =
     )
 derive t = (finalWidth, finalHeight)
 
-view :: ChainState -> Chain React'
-view status = div_ [ class_ "chain-container" ] $ do
-    animState <- getAnimationState
+view :: ChainState -> Double -> Chain ReactA'
+view status animState = div_ [ class_ "chain-container" ] $ do
 
     let numStatus = if status == Open then 1 else 0
         t = animState + numStatus
@@ -92,6 +93,6 @@ view status = div_ [ class_ "chain-container" ] $ do
          ]
          ""
 
-chainClass :: IO (Chain ReactClass)
+chainClass :: IO (Chain ReactClassA')
 chainClass =
     createClass view transition initialClassState initialAnimationState []

example/src/Circles.hs

@@ -10,6 +10,8 @@ import Lens.Family2
 import Haste hiding (fromString)
 import Haste.JSON
 import React
+import React.Anim
+import React.Anim.Class
 
 
 -- model
@@ -93,15 +95,15 @@ fillorange = Color 245 175 51
 fill_' = fill_ . fromString . show
 
 
-circ :: Circ -> Color -> Circles React'
+circ :: Circ -> Color -> Circles ReactA'
 circ c = circ' True (const (Just (SingleFlash c))) (coord c)
 
 
 circ' :: Bool
       -> (MouseEvent -> Maybe Transition)
       -> (Double, Double)
       -> Color
-      -> Circles React'
+      -> Circles ReactA'
 circ' clickable handler (x, y) color =
     let lst = [ cx_ x
               , cy_ y
@@ -115,9 +117,8 @@ circ' clickable handler (x, y) color =
     in circle_ (if clickable then lst' else lst)
 
 
-mainView :: CircState -> Circles React'
-mainView (CircState c _) = div_ $ do
-    AnimState c1 c2 c3 c4 trans <- getAnimationState
+mainView :: CircState -> AnimState -> Circles ReactA'
+mainView (CircState c _) (AnimState c1 c2 c3 c4 trans) = div_ $ do
 
     svg_ [ width_ 600
          , height_ 600
@@ -130,6 +131,6 @@ mainView (CircState c _) = div_ $ do
         circ' False (const Nothing) (coord c `animSub` trans) fillblue
 
 
-circlesClass :: IO (Circles ReactClass)
+circlesClass :: IO (Circles ReactClassA')
 circlesClass =
     createClass mainView transition initialState initialAnimationState [RepeatingFlash]

example/src/Easing.hs

@@ -11,6 +11,9 @@ import Prelude hiding (lookup)
 import Haste hiding (fromString)
 import Haste.JSON hiding ((!))
 import React hiding (repeat)
+import React.Anim
+import React.Anim.Class
+
 import Lens.Family2 hiding (view)
 
 -- model
@@ -84,16 +87,15 @@ transition Toggle (Easings Open easings) =
 
 -- view
 
-buttonBox :: Ease React'
+buttonBox :: Ease ReactA'
 buttonBox = div_ [ class_ "button-box" ] $
     button_ [ class_ "btn btn--m btn--gray-border"
             , onClick (const (Just Toggle))
             ]
             "toggle easing"
 
-view :: EasingState -> Ease React'
-view (Easings direction easings) = div_ $ do
-    EasingMap runningEasings <- getAnimationState
+view :: EasingState -> AnimState -> Ease ReactA'
+view (Easings direction easings) (EasingMap runningEasings) = div_ $ do
     let t = if direction == Closed then 0 else 1
 
     buttonBox
@@ -126,7 +128,7 @@ safeShow x =
     in if take 2 shown == "--" then drop 2 shown else shown
 
 -- Trying to replicate http://www.objc.io/issue-12/view-layer-synergy.html
-subView :: Double -> Easing -> Ease React'
+subView :: Double -> Easing -> Ease ReactA'
 subView t easing = svg_ [ width_ 100
                         , height_ 100
                         , viewBox_ "0 0 100 100"
@@ -177,6 +179,6 @@ subView t easing = svg_ [ width_ 100
           ]
 
 
-easingClass :: IO (Ease ReactClass)
+easingClass :: IO (Ease ReactClassA')
 easingClass =
     createClass view transition initialClassState initialAnimationState []

example/src/Simple.hs

@@ -4,6 +4,7 @@ module Simple (simpleClass) where
 import Haste
 import Haste.JSON
 import React
+import React.Class
 
 -- model
 
@@ -15,23 +16,24 @@ data SimpleState = SimpleState
     , fighter2 :: JSString
     , typing :: JSString -- what the user's currently typing
     }
-type Simple a = a SimpleState Transition ()
+type Simple a = a SimpleState Transition
 
 initialState = SimpleState "little mac!" "pit" ""
 
 -- update
 
-transition :: Transition -> SimpleState -> (SimpleState, [AnimConfig Transition ()])
-transition (Typing str) state = (state{typing=str}, [])
+transition :: Transition -> SimpleState -> SimpleState
+transition (Typing str) state = state{typing=str}
 transition Enter SimpleState{fighter1, typing} =
-    (SimpleState typing fighter1 "", [])
+    SimpleState typing fighter1 ""
 
 -- view
 
 view :: SimpleState -> Simple React'
 view (SimpleState fighter1 fighter2 typing) = div_ $ do
     div_ $ do
         "send a new competitor into the ring: "
+        div_ [] $ text_ typing
         input_
             [ value_ typing
 
@@ -52,4 +54,4 @@ view (SimpleState fighter1 fighter2 typing) = div_ $ do
         text_ fighter2
 
 simpleClass :: IO (Simple ReactClass)
-simpleClass = createClass view transition initialState () []
+simpleClass = createClass view transition initialState []

example/src/Slide.hs

@@ -8,6 +8,8 @@ import Haste
 import Haste.JSON
 import Lens.Family2 hiding (view)
 import React
+import React.Anim
+import React.Anim.Class
 
 
 -- model
@@ -42,9 +44,9 @@ transition Toggle Closed = (Open, [ slide (-paneWidth) ])
 
 -- view
 
-view :: SlideState -> Slide React'
-view slid = div_ [ class_ "slider-container" ] $ do
-    animWidth <- getAnimationState
+view :: SlideState -> Double -> Slide ReactA'
+view slid animWidth = div_ [ class_ "slider-container" ] $ do
+
     let inherentWidth = case slid of
             Open -> paneWidth
             Closed -> 0
@@ -55,6 +57,6 @@ view slid = div_ [ class_ "slider-container" ] $ do
          ]
          ""
 
-slideClass :: IO (Slide ReactClass)
+slideClass :: IO (Slide ReactClassA')
 slideClass =
     createClass view transition initialClassState initialAnimationState []

lib/stubs.js

@@ -242,6 +242,7 @@ function js_id(a) {return a;}
 // custom
 function js_React_DOM_leaf(name, a) { return React.DOM[name](a); }
 function js_React_DOM_parent(name, a, c) { return React.DOM[name](a, c); }
+function js_React_DOM_class(klass) { return React.createElement(klass, null); }
 
 function js_parseChangeEvent(raw) {
     // wrap the string in two constructors - Ptr and JSString
@@ -320,9 +321,17 @@ function js_raf(cb) {
     });
 }
 
-function js_createClass(render, setState) {
+function js_createClass(render, getInitialState, _) {
     return React.createClass({
-        render: render
+        render: function() {
+          // render :: a -> b -> IO ForeignNode
+          // need either
+          //   - something like runIO
+          //   - render to not run in the IO monad
+          //   - React to use continuation style passing
+          return B(A(render, [[0, this], [0, this.state.hs], 0]))[1];
+        },
+        getInitialState: function() { return {hs: B(A(getInitialState, [[0, this], 0]))} }
     });
 }
 
@@ -331,9 +340,25 @@ function js_bezier(x0, y0, x1, y1, x) {
 }
 
 function js_render(e, r){
-    React.render(e, r);
+    React.render(React.createElement(e, null), r);
 }
 
 function js_cancelRaf(id) {
     window.cancelAnimationFrame(id);
 }
+
+function js_getState(inst) {
+  return inst.state.hs;
+}
+
+function js_setState(inst, state) {
+  inst.replaceState({hs: state});
+}
+
+function js_overState(inst, func) {
+  inst.replaceState({hs: B(A(func, [[0, inst.state.hs], 0]))[1]});
+}
+
+function js_performance_now() {
+  return window.performance.now();
+}

react-haskell.cabal

@@ -51,12 +51,11 @@ source-repository head
   location: https://github.com/joelburget/react-haskell.git
 
 library
-  exposed-modules: React
+  exposed-modules: React, React.Class, React.Anim, React.Anim.Class
   other-modules:
-    React.Anim,
     React.Attrs,
-    React.Class,
     React.Elements,
+    React.ElemTypes,
     React.Events,
     React.Imports,
     React.Interpret,

src/React.hs

@@ -9,20 +9,15 @@ module React
     ( module X
 
     -- React.Anim
-    , Color(..)
-    , getAnimationState
-    , Animatable(..) -- XXX
-
-    -- React.Class
-    , ReactClass()
-    , createClass
+    --, Color(..)
+    --, getAnimationState
+    --, Animatable(..) -- XXX
 
     -- React.Local
     , locally
     , GeneralizeSignal(..)
 
     -- React.Render
-    , cancelRender
     , render
 
     -- React.Types
@@ -31,8 +26,8 @@ module React
     , React'
     , Pure
     , RenderHandle(..)
-    , AnimConfig(..)
-    , Easing(..)
+    --, AnimConfig(..)
+    --, Easing(..)
     , EventProperties(..)
     , ModifierKeys(..)
     , MouseEvent(..)
@@ -58,13 +53,13 @@ module React
 -- store elem in monad
 -- escaping / dangerouslySetInnerHTML
 
-import React.Anim
 import React.Class
 -- import React.Imports
 -- import React.Interpret
 import React.Local
-import React.Render
 import React.Types
+import React.Render
+import React.ElemTypes
 
 import React.Attrs as X
 import React.Elements as X