glazier-react-widget 0.2.0.0 → 0.3.0.0

raw patch · 6 files changed

+355/−105 lines, 6 filesdep ~glazier-reactPVP ok

version bump matches the API change (PVP)

Dependency ranges changed: glazier-react

API changes (from Hackage documentation)

Files

• README.md +268/−1
• glazier-react-widget.cabal +2/−2
• src/Glazier/React/Widgets/Input.hs +34/−41
• src/Glazier/React/Widgets/Input/Run.hs +2/−9
• src/Glazier/React/Widgets/List.hs +48/−51
• src/Glazier/React/Widgets/List/Run.hs +1/−1

@@ -1,3 +1,270 @@ [![Hackage](https://img.shields.io/hackage/v/glazier-react-widget.svg)](https://hackage.haskell.org/package/glazier-react-widget) -Composable Widget library using Glazier.React+This is a library of reusable composable widget using +[`Glazier.React`](https://github.com/louispan/glazier-react). Please help me to add more widgets to this library!++# Prerequisite reading++## Glazier+Please read the [README.md](https://github.com/louispan/glazier) for a brief overview of glazier.++## Glazier.React+Please read the [README.md](https://github.com/louispan/glazier-react) for a brief overview of glazier-react.++# Widget best practice++The following documents the expected conventions and best practices when defining a `Glazier.React.Widgets` widget.++## Exports+All widgets should export at the minimum the following:+```+module Glazier.React.Widgets.Input+    ( Command(..)+    , Action(..)+    , AsAction(..)+    , Plan(..)+    , HasPlan(..)+    , mkPlan+    , Model(..)+    , HasModel(..)+    , Design+    , Frame+    , SuperModel+    , Widget+    , widget+    , window+    , gadget+    ) where+```+This provides a consistent way to interact and use every widget.++Since all widgets export the same names, any widget should be imported qualified.++## Command+`Command`s are the result of the `Gadget` stateful processing of `Action`. It is a pure value that is interpreted effectfully.+```+data Command+    = RenderCommand (SuperModel Model Plan) [Property] JSVal+    | DisposeCommand SomeDisposable+    | MakerCommand (F (Maker Action) Action)+```+Some common commands are:++### RenderCommand+```+RenderCommand (SuperModel Model Plan) [Property] JSVal+```+This is send by `Gadget` when the re-rendering is required. It contains the`SuperModel` of the widget (to swap the latest `Design` into the `Frame`), the new React component state as a list of properties (usually just a sequence number), and the javascript reference to the javascript component.++### DisposeCommand+```+DisposeCommand SomeDisposable+```+This contains the list of callbacks to dispose after the next render frame (after [`componentDidUpdate`](https://facebook.github.io/react/docs/react-component.html#componentdidupdate) is called.++### MakerCommand+```+MakerCommand (F (Maker Action) Action)+```+This is the command to run the `Maker` instruction in the `Maker` interpreter which results in an `Action` to dispatch back tot he gadget.++## Action+This contains the events that the widget `Gadget` processes.+```+data Action+    = ComponentRefAction JSVal+    | RenderAction+    | ComponentDidUpdateAction+makeClassyPrisms ''Action+```+`Action`s should have [`makeClassyPrisms`](https://hackage.haskell.org/package/lens-4.15.1/docs/Control-Lens-TH.html#v:makeClassyPrisms) generated to facilitate embedding it in larger `Gadget` with [`magnify`](https://hackage.haskell.org/package/lens-4.15.1/docs/Control-Lens-Zoom.html#v:magnify).++Some common `Action`s are:+###  ComponentRefAction+```+ComponentRefAction JSVal+```+This action is generated by the [`ref`](https://facebook.github.io/react/docs/refs-and-the-dom.html) event listener and contains a javascript reference to the react component. This ref is used in the `RenderCommand`.++###  RenderAction+```+RenderAction+```+You can generate this action to force a widget to return the `RenderCommand` to force a re-render.++###  ComponentDidUpdateAction+```+ComponentDidUpdateAction JSVal+```++This action is generated by the [`componentDidUpdate`](https://facebook.github.io/react/docs/react-component.html#componentdidupdate) event listener. This event is usually used to generate the `DisposeCommand` to dispose callbacks from removed widgets.++## Model+This contains the pure data for state processing logic and rendering (the nouns).+```+data Model = Model+    { _uid :: J.JSString+    , _componentRef :: J.JSVal+    , _frameNum :: Int+    , _deferredCommands :: D.DList (Command key itemWidget)+    }+makeClassy ''Model+```+`Model`s should have [`makeClassy`](https://hackage.haskell.org/package/lens-4.15.1/docs/Control-Lens-TH.html#v:makeClassy) generated to facilitate embedding it in larger widget with [`magnify`](https://hackage.haskell.org/package/lens-4.15.1/docs/Control-Lens-Zoom.html#v:magnify) and [`zoom`](https://hackage.haskell.org/package/lens-4.15.1/docs/Control-Lens-Zoom.html#v:zoom).++Some common Model fields are+### uid+```+_uid :: JSString+```+`uid` is used to ensure a unique [key](https://facebook.github.io/react/docs/lists-and-keys.html) for React's efficient rendering of a list.++### componentRef+```+_componentRef :: JSVal+```+`componentRef` is used to store the reference to the instance of the React shim component from the `ComponentRefAction` and used in the `RenderCommand`++### frameNum+```+_frameNum :: Int+```+`frameNum` is the sequence number used in `RenderCommand`.++### _deferredCommands+```+_deferredCommands :: DList Command+```+`deferredCommands` keep the list of commands to run at the next `ComponentDidUpdateAction`. It usually contains `DisposeCommand`.++## Plan+The `Plan` contains the callbacks for integrating with React (the verbs). It also contains a javascript reference to the instance of shim component used for the widget. This reference is used to trigger rendering with  [`setState`](https://facebook.github.io/react/docs/react-component.html#setstate).++```+data Plan = Plan+    { _component :: R.ReactComponent+    , _onRender :: J.Callback (J.JSVal -> IO J.JSVal)+    , _onComponentRef :: J.Callback (J.JSVal -> IO ())+    , _onComponentDidUpdate :: J.Callback (J.JSVal -> IO ())   makeClassy ''Plan+```+`Plan`s should have [`makeClassy`](https://hackage.haskell.org/package/lens-4.15.1/docs/Control-Lens-TH.html#v:makeClassy) generated to allow consistent usage of lens to access `Model` and `Plan` fields.++Some common `Plan` fields are++### _component+```+_component :: ReactComponent+```+This contains the reference to the shim `React.PureComponent` class that is used to start the rendering.++### _onRender+```+_onRender :: Callback (JSVal -> IO JSVal)+```+The is the callback from the shim component's [`render`](https://facebook.github.io/react/docs/react-component.html#render) handler. It contains a javascript reference to the shim component's state, which is currently not used, but might be in the future.++### _onComponentRef+```+_onComponentRef :: Callback (JSVal -> IO ())+```+The is the callback from the shim component's [`ref`](https://facebook.github.io/react/docs/refs-and-the-dom.html) event listener. The callback is expected to generate the `ComponentRefAction`.++### _onComponentDidUpdate+```+_onComponentDidUpdate :: Callback (JSVal -> IO ())+```+The is the callback from the shim component's  [`componentDidUpdate`](https://facebook.github.io/react/docs/react-component.html#componentdidupdate) event listener.  The callback is expected to generate the `ComponentDidUpdateAction`.++## mkPlan+This is the missing piece required to construct a widget's `SuperModel`.+It contains the code to create a widget's `Plan` using the `Maker` DSL.++The `Applicative` typeclass makes this easy to define.+```+mkPlan :: Frame Model Plan -> F (Maker Action) Plan+mkPlan frm = Plan+    <$> getComponent+    <*> (mkRenderer frm $ const render)+    <*> (mkHandler $ pure . pure . InputRefAction)+    <*> (mkHandler $ pure . pure . ComponentRefAction)+    <*> (mkHandler $ pure . pure . const ComponentDidUpdateAction)+```++## Common code+All widgets should have implementation of the following++### Disposing Model and Plan+```+instance Disposing Plan+instance Disposing Model where+    disposing _ = DisposeNone+```++### Link HasPlan and HasModel+Link `Glazier.React.Model`'s genericHasPlan/HasModel with this widget's specific `HasPlan`/`HasModel` from generated from `makeClassy`++```+instance HasPlan (R.Design Model Plan) where+    plan = R.plan+instance HasModel (R.Design Model Plan) where+    model = R.model+instance HasPlan (R.SuperModel Model Plan) where+    plan = R.design . plan+instance HasModel (R.SuperModel Model Plan) where+    model = R.design . model+```++### Synonums to Design, Frame, and SuperModel+```+type Design = R.Design Model Plan+type Frame = R.Frame Model Plan+type SuperModel = R.SuperModel Model Plan+```++### Widget definitions+`widget` is a record of functions of the essential functions required to make, render and interact with the widget. By convention, `mkPlan`, `window`, and `gadget` is exported, but sometimes it's convenient to have all three grouped together in a record.+```+type Widget = Widget Command Action Model Plan+widget :: Widget Command Action Model Plan+widget = Widget+    mkPlan+    window+    gadget+```+`widget` is always an instance of `IsWidget` typeclass, so exporting a type synomym `Widget` will allow generic widget manipulation code.++For example, the [`List` widget](https://github.com/louispan/glazier-react-widget/blob/54a771f492b864ff422e31949284ea4b23aa02c6/src/Glazier/React/Widgets/List.hs#L128) uses the `IsWidget` typeclass of the item widgets in order to define the `widget` record value.++## window+This is the starting rendering function to start the rendering. It always only renders the shim React component with the specific callbacks:++```+window :: WindowT (Design Model Plan) (ReactMlT Identity) ()+window = do+    s <- ask+    lift $ lf (s ^. component . to toJS)+        [ ("key",  s ^. uid . to toJS)+        , ("render", s ^. onRender . to toJS)+        , ("ref", s ^. onComponentRef . to toJS)+        , ("componentDidUpdate", s ^. onComponentDidUpdate . to toJS)+        ]+```+This a a monad transformer stack over `Identity`. This ensures only pure effects are allowed.++## render+This is the inner rendering function. React will render the shim component from `window` above, and then call the `Plan`'s `onRender` callback of the shim component, which triggers this rendering function.++This contains the widget specific rendering instructions.+```+render :: WindowT (Design Model Plan) (ReactMlT Identity) ()+```+This a a monad transformer stack over `Identity`. This ensures only pure effects are allowed.++## gadget+This contains the state update logic:+```+gadget :: G.GadgetT Action (R.SuperModel Model Plan) Identity (DList Command)+```+This a a monad transformer stack over `Identity`. This ensures only pure effects are allowed.++When required, `STM`  can always be [`hoist (hoist generalize)`](https://github.com/louispan/glazier-react-examples/blob/32b5b077faa499e7501cb8e5417105b340de9ad3/examples/todo/haskell/app/Main.hs#L92) into the gadget using [`Control.Monad.Morph`](https://hackage.haskell.org/package/mmorph/docs/Control-Monad-Morph.html).

@@ -1,5 +1,5 @@ name:                glazier-react-widget-version:             0.2.0.0+version:             0.3.0.0 synopsis:            Generic widget library using glazier-react description:         Generic widget library using glazier-react homepage:            https://github.com/louispan/glazier-react-widget#readme@@ -25,7 +25,7 @@                      , dlist >= 0.8 && < 0.9                      , free >= 4.12 && < 5                      , glazier >= 0.10 && < 1-                     , glazier-react >= 0.2 && < 1+                     , glazier-react >= 0.3 && < 1                      , javascript-extras >= 0.2 && < 1                      , lens >= 4 && < 5                      , mmorph >= 1 && < 2

@@ -17,11 +17,11 @@     , mkPlan     , Model(..)     , HasModel(..)-    , mkSuperModel-    , Widget     , Design-    , Replica+    , Frame     , SuperModel+    , Widget+    , widget     , window     , gadget     , whenKeyDown@@ -43,20 +43,17 @@ import qualified Glazier.React.Event as R import qualified Glazier.React.Maker as R import qualified Glazier.React.Markup as R+import qualified Glazier.React.Model as R import qualified Glazier.React.Widget as R import qualified JavaScript.Extras as JE -data Command act+data Command     = SetPropertyCommand JE.Property J.JSVal-    | GetPropertyCommand J.JSString J.JSVal (J.JSVal -> act)-    deriving Functor -data Action act-    = SendCommandsAction [Command act]+data Action+    = SendCommandsAction [Command]     | SubmitAction J.JSString     | InputRefAction J.JSVal-    | GetPropertyAction J.JSString (J.JSVal -> act)-    deriving Functor  data Model = Model     { _uid :: J.JSString@@ -76,40 +73,40 @@ makeClassy ''Plan makeClassy ''Model -mkPlan :: R.Replica Model Plan -> F (R.Maker (Action act)) Plan-mkPlan mm = Plan+mkPlan :: R.Frame Model Plan -> F (R.Maker Action) Plan+mkPlan frm = Plan     <$> R.getComponent-    <*> (R.mkRenderer mm $ const render)+    <*> (R.mkRenderer frm $ const render)     <*> (R.mkHandler $ pure . pure . InputRefAction)     <*> (R.mkHandler onKeyDown') +instance CD.Disposing Plan instance CD.Disposing Model where     disposing _ = CD.DisposeNone -mkSuperModel :: Model -> F (R.Maker (Action act)) (SuperModel act)-mkSuperModel mdl = R.mkSuperModel mkPlan (R.Design mdl)--data Widget act-instance R.IsWidget (Widget act) where-    type WidgetAction (Widget act) = Action act-    type WidgetCommand (Widget act) = Command act-    type WidgetModel (Widget act) = Model-    type WidgetPlan (Widget act) = Plan-type Design act = R.WidgetDesign (Widget act)-type Replica act = R.WidgetReplica (Widget act)-type SuperModel act = R.WidgetSuperModel (Widget act)-instance CD.Disposing Plan+-- Link Glazier.React.Model's HasPlan/HasModel with this widget's HasPlan/HasModel from makeClassy instance HasPlan (R.Design Model Plan) where-    plan = R.widgetPlan+    plan = R.plan instance HasModel (R.Design Model Plan) where-    model = R.widgetModel+    model = R.model instance HasPlan (R.SuperModel Model Plan) where     plan = R.design . plan instance HasModel (R.SuperModel Model Plan) where     model = R.design . model --- | This is used by parent components to render this component-window :: Monad m => G.WindowT (Design act) (R.ReactMlT m) ()+type Design = R.Design Model Plan+type Frame = R.Frame Model Plan+type SuperModel = R.SuperModel Model Plan++type Widget = R.Widget Command Action Model Plan+widget :: R.Widget Command Action Model Plan+widget = R.Widget+    mkPlan+    window+    gadget++-- | Exposed to parent components to render this component+window :: G.WindowT (R.Design Model Plan) (R.ReactMlT Identity) () window = do     s <- ask     lift $ R.lf (s ^. component . to JE.toJS)@@ -117,8 +114,8 @@         , ("render", s ^. onRender . to JE.toJS)         ] --- | This is used by the React render callback-render :: Monad m => G.WindowT (Design act) (R.ReactMlT m) ()+-- | Internal rendering used by the React render callback+render :: G.WindowT (R.Design Model Plan) (R.ReactMlT Identity) () render = do     s <- ask     lift $ R.lf (JE.strJS "input")@@ -139,17 +136,17 @@         let k = R.keyCode evt''         case k of             -- FIXME: ESCAPE_KEY-            27 -> pure $ (Nothing, input)+            27 -> pure (Nothing, input)             -- FIXME: ENTER_KEY             13 -> do                 v <- MaybeT $ JE.getProperty "value" input >>= JE.fromJS-                pure $ (Just v, input)+                pure (Just v, input)             _ -> empty -onKeyDown' :: J.JSVal -> MaybeT IO [Action act]+onKeyDown' :: J.JSVal -> MaybeT IO [Action] onKeyDown' = R.eventHandlerM whenKeyDown goLazy   where-    goLazy :: (Maybe J.JSString, J.JSVal) -> MaybeT IO [Action act]+    goLazy :: (Maybe J.JSString, J.JSVal) -> MaybeT IO [Action]     goLazy (ms, j) = pure $         SendCommandsAction [SetPropertyCommand ("value", JE.toJS J.empty) j]         : maybe [] (pure . SubmitAction) ms@@ -158,7 +155,7 @@ -- The best practice is to leave this in general Monad m (eg, not MonadIO). -- This allows gadget to use STM as the base monad which allows for combining concurrently -- with other stateful STM effects and still maintain a single source of truth.-gadget :: Monad m => G.GadgetT (Action act) (SuperModel act) m (D.DList (Command act))+gadget :: G.GadgetT Action (R.SuperModel Model Plan) Identity (D.DList Command) gadget = do     a <- ask     case a of@@ -170,7 +167,3 @@         InputRefAction v -> do             inputRef .= v             pure mempty--        GetPropertyAction prop f -> do-            j <- use inputRef-            pure $ D.singleton $ GetPropertyCommand prop j f

@@ -2,16 +2,9 @@     ( run     ) where -import Control.Concurrent.STM-import Control.Monad import qualified JavaScript.Extras as JE-import qualified Pipes.Concurrent as PC import Glazier.React.Widgets.Input -run :: PC.Output act -> Command act -> IO ()--run _ (SetPropertyCommand prop j) = JE.setProperty prop j+run :: Command -> IO () -run output (GetPropertyCommand prop j f) = do-    v <- JE.getProperty prop j-    void $ atomically $ PC.send output (f v)+run (SetPropertyCommand prop j) = JE.setProperty prop j

@@ -19,11 +19,11 @@     , mkPlan     , Model(..)     , HasModel(..)-    , mkSuperModel-    , Widget     , Design-    , Replica+    , Frame     , SuperModel+    , Widget+    , widget     , window     , gadget     ) where@@ -47,6 +47,7 @@ import qualified Glazier.React.Component as R import qualified Glazier.React.Maker as R import qualified Glazier.React.Markup as R+import qualified Glazier.React.Model as R import qualified Glazier.React.Widget as R import qualified JavaScript.Extras as JE @@ -54,17 +55,17 @@     = RenderCommand (R.SuperModel (Model key itemWidget) Plan) [JE.Property] J.JSVal     | DisposeCommand CD.SomeDisposable     | MakerCommand (F (R.Maker (Action key itemWidget)) (Action key itemWidget))-    | ItemCommand key (R.WidgetCommand itemWidget)+    | ItemCommand key (R.CommandOf itemWidget)  data Action key itemWidget     = ComponentRefAction J.JSVal     | RenderAction     | ComponentDidUpdateAction     | DestroyItemAction key-    | MakeItemAction (key -> key) (key -> F (R.Maker (R.WidgetAction itemWidget)) (R.WidgetModel itemWidget))-    | AddItemAction key (R.WidgetSuperModel itemWidget)-    | ItemAction key (R.WidgetAction itemWidget)-    | SetFilterAction (R.WidgetSuperModel itemWidget -> Bool)+    | MakeItemAction (key -> key) (key -> F (R.Maker (R.ActionOf itemWidget)) (R.ModelOf itemWidget))+    | AddItemAction key (R.SuperModelOf itemWidget)+    | ItemAction key (R.ActionOf itemWidget)+    | SetFilterAction (R.SuperModelOf itemWidget -> Bool)  data Model key itemWidget = Model     { _uid :: J.JSString@@ -73,8 +74,8 @@     , _deferredCommands :: D.DList (Command key itemWidget)     , _className ::J.JSString     , _itemKey :: key-    , _itemsModel :: M.Map key (R.WidgetSuperModel itemWidget)-    , _itemsFilter :: R.WidgetSuperModel itemWidget -> Bool+    , _itemsModel :: M.Map key (R.SuperModelOf itemWidget)+    , _itemsFilter :: R.SuperModelOf itemWidget -> Bool     }  data Plan = Plan@@ -89,51 +90,48 @@ makeClassy ''Model  mkPlan-    :: G.WindowT (R.WidgetDesign itemWidget) (R.ReactMlT Identity) ()-    -> R.ReactMlT Identity ()-    -> Replica key itemWidget+    :: R.ReactMlT Identity ()+    -> G.WindowT (R.DesignOf itemWidget) (R.ReactMlT Identity) ()+    -> R.Frame (Model key itemWidget) Plan     -> F (R.Maker (Action key itemWidget)) Plan-mkPlan itemWindow separator mm = Plan+mkPlan separator itemWindow frm = Plan     <$> R.getComponent-    <*> (R.mkRenderer mm $ const (render itemWindow separator))+    <*> (R.mkRenderer frm $ const (render separator itemWindow))     <*> (R.mkHandler $ pure . pure . ComponentRefAction)     <*> (R.mkHandler $ pure . pure . const ComponentDidUpdateAction) -instance ( CD.Disposing (R.WidgetPlan itemWidget)-         , CD.Disposing (R.WidgetModel itemWidget)-         ) =>+instance CD.Disposing Plan+instance (CD.Disposing (R.SuperModelOf itemWidget)) =>          CD.Disposing (Model key itemWidget) where-    disposing s =-        CD.DisposeList $ foldr ((:) . CD.disposing) [] (s ^. itemsModel)--mkSuperModel-    :: G.WindowT (R.WidgetDesign itemWidget) (R.ReactMlT Identity) ()-    -> R.ReactMlT Identity ()-    -> Model key itemWidget-    -> F (R.Maker (Action key itemWidget)) (SuperModel key itemWidget)-mkSuperModel itemWindow separator mdl = R.mkSuperModel (mkPlan itemWindow separator) (R.Design mdl)+    disposing s = CD.DisposeList $ foldr ((:) . CD.disposing) [] (_itemsModel s) -data Widget key itemWidget-instance R.IsWidget (Widget key itemWidget) where-    type WidgetAction (Widget key itemWidget) = Action key itemWidget-    type WidgetCommand (Widget key itemWidget) = Command key itemWidget-    type WidgetModel (Widget key itemWidget) = Model key itemWidget-    type WidgetPlan (Widget key itemWidget) = Plan-type Design key itemWidget = R.WidgetDesign (Widget key itemWidget)-type Replica key itemWidget = R.WidgetReplica (Widget key itemWidget)-type SuperModel key itemWidget = R.WidgetSuperModel (Widget key itemWidget)-instance CD.Disposing Plan+-- Link Glazier.React.Model's HasPlan/HasModel with this widget's HasPlan/HasModel from makeClassy instance HasPlan (R.Design (Model key itemWidget) Plan) where-    plan = R.widgetPlan+    plan = R.plan instance HasModel (R.Design (Model key itemWidget) Plan) key itemWidget where-    model = R.widgetModel+    model = R.model instance HasPlan (R.SuperModel (Model key itemWidget) Plan) where     plan = R.design . plan instance HasModel (R.SuperModel (Model key itemWidget) Plan) key itemWidget where     model = R.design . model --- | This is used by parent components to render this component-window :: Monad m => G.WindowT (Design key itemWidget) (R.ReactMlT m) ()+type Design key itemWidget = R.Design (Model key itemWidget) Plan+type Frame key itemWidget = R.Frame (Model key itemWidget) Plan+type SuperModel key itemWidget = R.SuperModel (Model key itemWidget) Plan++type Widget key itemWidget = R.Widget (Command key itemWidget) (Action key itemWidget) (Model key itemWidget) Plan+widget+    :: (R.IsWidget itemWidget, Ord key)+    => R.ReactMlT Identity ()+    -> itemWidget+    -> R.Widget (Command key itemWidget) (Action key itemWidget) (Model key itemWidget) Plan+widget separator itemWidget = R.Widget+    (mkPlan separator (R.window itemWidget))+    window+    (gadget (R.mkSuperModel itemWidget) (R.gadget itemWidget))++-- | Exposed to parent components to render this component+window :: G.WindowT (R.Design (Model key itemWidget) Plan) (R.ReactMlT Identity) () window = do     s <- ask     lift $ R.lf (s ^. component . to JE.toJS)@@ -143,13 +141,12 @@         , ("componentDidUpdate", s ^. onComponentDidUpdate . to JE.toJS)         ] --- | This is used by the React render callback+-- | Internal rendering used by the React render callback render-    :: Monad m-    => G.WindowT (R.WidgetDesign itemWidget) (R.ReactMlT m) ()-    -> R.ReactMlT m ()-    -> G.WindowT (Design key itemWidget) (R.ReactMlT m) ()-render itemWindow separator = do+    :: R.ReactMlT Identity ()+    -> G.WindowT (R.DesignOf itemWidget) (R.ReactMlT Identity) ()+    -> G.WindowT (R.Design (Model key itemWidget) Plan) (R.ReactMlT Identity) ()+render separator itemWindow = do     s <- ask     items <- fmap (view R.design) . filter (s ^. itemsFilter) . fmap snd .  M.toList <$> view itemsModel     lift $ R.bh (JE.strJS "ul") [ ("key", s ^. uid . to JE.toJS)@@ -160,10 +157,10 @@         sequenceA_ separatedWindows  gadget-    :: (Ord key, Monad m, CD.Disposing (R.WidgetModel itemWidget), CD.Disposing (R.WidgetPlan itemWidget))-    => (R.WidgetModel itemWidget -> F (R.Maker (R.WidgetAction itemWidget)) (R.WidgetSuperModel itemWidget))-    -> G.GadgetT (R.WidgetAction itemWidget) (R.WidgetSuperModel itemWidget) m (D.DList (R.WidgetCommand itemWidget))-    -> G.GadgetT (Action key itemWidget) (SuperModel key itemWidget) m (D.DList (Command key itemWidget))+    :: (Ord key, CD.Disposing (R.ModelOf itemWidget), CD.Disposing (R.PlanOf itemWidget))+    => (R.ModelOf itemWidget -> F (R.Maker (R.ActionOf itemWidget)) (R.SuperModelOf itemWidget))+    -> G.GadgetT (R.ActionOf itemWidget) (R.SuperModelOf itemWidget) Identity (D.DList (R.CommandOf itemWidget))+    -> G.GadgetT (Action key itemWidget) (R.SuperModel (Model key itemWidget) Plan) Identity (D.DList (Command key itemWidget)) gadget mkItemSuperModel itemGadget = do     a <- ask     case a of

@@ -20,7 +20,7 @@ import qualified Pipes.Concurrent as PC  run-    :: (key -> R.WidgetCommand itemWidget -> IO ()) -- command runner for the items+    :: (key -> R.CommandOf itemWidget -> IO ()) -- command runner for the items     -> R.ReactComponent -- for Maker     -> PC.Output (Action key itemWidget)     -> Command key itemWidget