diff --git a/README.md b/README.md --- a/README.md +++ b/README.md @@ -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). diff --git a/glazier-react-widget.cabal b/glazier-react-widget.cabal --- a/glazier-react-widget.cabal +++ b/glazier-react-widget.cabal @@ -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 diff --git a/src/Glazier/React/Widgets/Input.hs b/src/Glazier/React/Widgets/Input.hs --- a/src/Glazier/React/Widgets/Input.hs +++ b/src/Glazier/React/Widgets/Input.hs @@ -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 diff --git a/src/Glazier/React/Widgets/Input/Run.hs b/src/Glazier/React/Widgets/Input/Run.hs --- a/src/Glazier/React/Widgets/Input/Run.hs +++ b/src/Glazier/React/Widgets/Input/Run.hs @@ -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 diff --git a/src/Glazier/React/Widgets/List.hs b/src/Glazier/React/Widgets/List.hs --- a/src/Glazier/React/Widgets/List.hs +++ b/src/Glazier/React/Widgets/List.hs @@ -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 diff --git a/src/Glazier/React/Widgets/List/Run.hs b/src/Glazier/React/Widgets/List/Run.hs --- a/src/Glazier/React/Widgets/List/Run.hs +++ b/src/Glazier/React/Widgets/List/Run.hs @@ -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