<commit_before>homepage: https://github.com/louispan/glazier-react#readme
changelog-type: ''
hash: eb6b02cbce94e61f6f21795e09222e79ffcee2097e4ec62454547423afb64474
test-bench-deps: {}
maintainer: <EMAIL>
synopsis: ReactJS binding using Glazier and Pipes.Fluid
changelog: ''
basic-deps:
  semigroupoids: ! '>=5 && <6'
  free: ! '>=4.12 && <5'
  javascript-extras: ! '>=0.2 && <1'
  stm: ! '>=2.4 && <3'
  base: ! '>=4.7 && <5'
  unordered-containers: ! '>=0.2.7 && <0.3'
  text: ! '>=1.2 && <1.3'
  disposable: ! '>=0.2.0.2 && <1'
  dlist: ! '>=0.8 && <0.9'
  containers: ! '>=0.5 && <0.6'
  lens: ! '>=4 && <5'
  pipes-concurrency: ! '>=2 && <3'
  mtl: ! '>=2 && <3'
  mmorph: ! '>=1 && <2'
  ghcjs-base-stub: ! '>=0.1.0.1 && <1'
  transformers: ! '>=0.4 && <0.6'
  deepseq: ! '>=1.4 && <1.5'
  glazier: ! '>=0.10 && <1'
  profunctors: ! '>=5 && <6'
all-versions:
- '0.1.0.0'
- '0.2.0.0'
- '0.3.0.0'
- '0.3.0.1'
- '0.3.0.2'
author: <NAME>
latest: '0.3.0.2'
description-type: markdown
description: ! "[![Hackage](https://img.shields.io/hackage/v/glazier-react.svg)](https://hackage.haskell.org/package/glazier-react)\n[`Glazier.React`](https://github.com/louispan/glazier-react)
  contains efficient haskell bindings to React JS where render will only be called
  for the react components with changed states.\n\nIt uses the haskell [glazier](https://github.com/louispan/glazier)
  library to enable composable windows\n\n# Features\n\n## Efficient rendering\nUsing
  `React.PureComponent` and react `render` will only be called for component who's
  state actually changed, instead of requiring react to diff the entire DOM.\n\n##
  Composable widgets\n[`Glazier`](https://github.com/louispan/glazier) allows disciplined
  and lawful ways of creating composable widgets. Larger  can be created out of other
  widgets without modifying existing widget code, or manual [\"lifting state\"](https://facebook.github.io/react/docs/lifting-state-up.html)
  into larger widgets.\n\nFor example, [List Widget](https://github.com/louispan/glazier-react-widget/blob/master/src/Glazier/React/Widgets/List.hs)
  creates a list of any other widget.\n\n## Isolation of IO\nThe  stateful effects
  are pure and do not involve IO. This has the benefit of allowing better testing
  of the intention of gadgets; increasing confidence of the behaviour of the gadget,
  \ reducing the surface area of IO misbehaviour.\n\nThere are only two places where
  IO is allowed:\n1. in the gadget `Command` interpreter,\n2. in the event callback
  handlers, due to the need to read properties from `javascript` and dispatching `Actions`.
  Besides dispatching `Actions`, it is bad practice to create any other observable
  side effects in event handlers.\n\n## Combine multiple concurrent stateful effects\nAFAIK,
  Haskell is the only language where you can [combine multiple concurrent stateful
  effects consistently.](https://github.com/louispan/glazier#combine-multiple-concurrent-stateful-effects)\n\n##
  Compile using GHC as well as GHCJS\n`Glazier.React` uses [ghcjs-base-stub](https://github.com/louispan/ghcjs-base-stub)
  allows compiling GHCJS projects using GHC, which means you can develop using intero.\n\n##
  Easier management of GHCJS callbacks\n`Glazier.React` uses [disposable](https://github.com/louispan/disposable)
  to ease cleanup of GHCJS callbacks. It also uses a Free Monad [`Maker`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Maker.hs)
  DSL to ease creation of callbacks for widgets.\n\n## blaze/lucid style do notation\nReact
  elements can be coded using blaze/lucid-style `do` notation using [`ReactMlT`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Markup.hs)\n\n##
  Haskell-driven rendering\nAll state and processing is in Haskell, meaning only a
  simple shim `React.Component` is required. This  reduces the amount of `javascript`
  required and reduces the need for complex stateful integration with `React`.\n\n#
  Examples\n\n## TodoMVC\nThis is a fully featured TodoMVC in in Haskell and ReactJS
  using the [glazier-react](https://github.com/louispan/glazier-react) library.\n\nFor
  a live demo, see https://louispan.github.io/glazier-react-examples/\n\nFor more
  details, see the [todo example README.md](https://github.com/louispan/glazier-react-examples/tree/master/examples/todo)\n\n#
  Documentation\n\n## React\n* Please refer to [react docs](https://facebook.github.io/react/docs).
  You only need to read up to [handling events](https://facebook.github.io/react/docs/handling-events.html).\n*
  Also read [Lists and Keys](https://facebook.github.io/react/docs/lists-and-keys.html),
  and [Refs and the DOM](https://facebook.github.io/react/docs/refs-and-the-dom.html).\n*
  Ignore controlled input in [Forms](https://facebook.github.io/react/docs/forms.html).
  In my experience, controlled input is error-prone and it is better to use it uncontrolled.\n
  \   * Using uncontrolled input doesn't stop you from subscribing to onChange and
  obtaining the latest value of the input. Just do not force a render with react[`setState`](https://facebook.github.io/react/docs/react-component.html#setstate).\n\n##
  Glazier\nPlease read the [README.md](https://github.com/louispan/glazier) for a
  brief overview of glazier.\n\n## Markup\n[`Glazier.React.Markup`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Markup.hs)
  is a StateT monad that enables blaze/lucid style `do` notation to markup React elements
  to render.\n\n```\nbh (strJS \"footer\") [(\"className\", strJS \"footer\")] $ do\n
  \   bh (strJS \"span\") [ (\"className\", strJS \"todo-count\")\n                      ,
  (\"key\", strJS \"todo-count\")] $ do\n            bh (strJS \"strong\") [(\"key\",
  strJS \"items\")]\n                (s ^. activeCount . to (txt . pack . show))\n
  \           txt \" items left\"\n```\n\n## Event handling\nReact re-uses SyntheticEvent
  from a pool, which means it may no longer be valid if we lazily parse it. However,
  we still want lazy parsing so we don't parse unnecessary fields.\n\nAdditionally,
  we don't want to block during the event handling.The reason this is a problem is
  because Javascript is single threaded, but Haskell is lazy.\nTherefore GHCJS threads
  are a strange mixture of synchronous and asynchronous threads, where a synchronous
  thread might be converted to an asynchronous thread if a \"black hole\" is encountered.\nSee
  https://github.com/ghcjs/ghcjs-base/blob/master/GHCJS/Concurrent.hs\n\n[`Glazier.React.Event`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Event.hs)
  uses the event handling idea from the haskell [`react-flux`](https://hackage.haskell.org/package/react-flux/docs/React-Flux-PropertiesAndEvents.html)
  library to allow lazy parsing of event safely.\n\nEvent handling should only be
  done via [`eventHandler` or `eventHandlerM`](https://github.com/louispan/glazier-react/blob/33f4e244cff1a3e98ee1845f9ae2392818b9e512/src/Glazier/React/Event.hs#L90).\n\n```\neventHandlerM
  :: (Monad m, NFData a) => (evt -> m a) -> (a -> m b) -> (evt -> m b)\n```\n\nThis
  safe interface requires two input functions:\n1. a function to reduce SyntheticEvent
  to a NFData. The mkEventCallback will ensure that the NFData is forced which will
  ensure all the required fields from Synthetic event has been parsed. This function
  must not block.\n2. a second function that uses the NFData. This function is allowed
  to block.\n\n mkEventHandler results in a function that you can safely pass into
  'GHC.Foreign.Callback.syncCallback1' with 'GHCJS.Foreign.Callback.ContinueAsync'.\n\n##
  Simple and efficient React.Component integration\n`Glazier.React` only uses `ReactJS`
  as a thin layer for rendering and registering event handlers.  All state and event
  processing are performed in Haskell, which means only a simple shim `React.PureComponent`
  is required.\n\nOnly [one shim React component](https://github.com/louispan/glazier-react/blob/master/jsbits/react.js)
  is ever used and the only methods are required are  [`setState`](https://facebook.github.io/react/docs/react-component.html#setstate),
  \ [`render`](https://facebook.github.io/react/docs/react-component.html#render)
  and [`componentDidUpdate`](https://facebook.github.io/react/docs/react-component.html#componentdidupdate),\n\nThe
  shim component only has one thing in it's state, a sequence number. This sequence
  number is only changed with [`setState`](https://facebook.github.io/react/docs/react-component.html#setstate)
  when the `Glazier.Gadget` determined that there is a need for re-rendering. This
  is easy and efficient to determine since `Gadget` is the `StateT` responsible for
  changing the state in the first place.\n\nThis has the benefits of:\n* Only the
  react shim components with changed haskell state will be re-rendered.\n* React is
  able to efficiently determine if state has changed (just a single integer comparison)\n*
  The shim React component is very simple.\n\n## Modelling\n[`Glazier.React.Model`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Model.hs)
  contain many nuanced concepts of Model.\n\n### Model\nThe `Model` is the pure data
  used for rendering and stateful logic (the nouns).\nIt may contain `SuperModel`
  (see below) of other widgets.\n\n### Plan\nThe `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).\n\n###
  Design\n`Design` is basically a tuple of `Model` and `Plan`. It is a separate data
  type in order to generate convenient lenses to the fields.\n`Design` is all that
  a `Window` needs to purely generate rendering instructions.\n\n### Frame\n`Frame`
  is a type synonym of `MVar Design`. It is a mutable holder of a copy of `Design`.
  This is so how the official state from Haskell is communicated to the React [`render`](https://facebook.github.io/react/docs/react-component.html#render)
  callback. The [`render`](https://facebook.github.io/react/docs/react-component.html#render)
  callback will read the latest copy of `Design` from the `MVar` and pass it to the
  widget `Window` for rendering.\n\n### SuperModel\n`SuperModel` is basically a tuple
  of `Design` and `Frame`. It is a separate data type in order to generate convenient
  lenses to the fields.\nThis contains everything a widget needs for rendering and
  state processing.\nMost state processing is performed using the pure `Design`. The
  `Frame` is only used for the `RenderCommand`, to copy the latest `Design` into the
  `Frame` when re-rendering is required.\n\n## Maker\n`MVars` for `Frame`s and `Callback`s
  for `Plan`s may only be created in IO.  Using Free Monads, [`Glazier.React.Maker`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Maker.hs)
  provides a safe way to create them without allowing other arbitrary IO.\n\nThe `Maker`
  can also be used create the initial `SuperModel` state for the widgets.\nThe `Maker`
  DSL has an `action` type parameter which indicated the type of action that is dispatched
  by the widget.\nThe `action` type can be mapped and hoisted to a larger `action`
  type, allow for embedding the smaller widget action in larger widget actions.\n\nFor
  example, the [TodoMVC application](https://github.com/louispan/glazier-react-examples/blob/32b5b077faa499e7501cb8e5417105b340de9ad3/examples/todo/haskell/app/Main.hs#L44)
  uses `Maker` to create the initial application `SuperModel` which involves making
  and hoisting the `SuperModel` of the input, list of todos widget, and footer widget.\n\n##
  Disposable\nGHCJS `Callback`s has resources that are not automatically collected
  by the garbage collector. `Callback`s need to be released manually. The [disposable](https://github.com/louispan/disposable)
  library provides a safe and easy way to convert the `Callback` into a storable `SomeDisposable`
  that can be queued up to be released after the next rendering frame.\n\n[disposable](https://github.com/louispan/disposable)
  allows generic instances of `Disposing` to be easily created, which make it easy
  to create instances of `Disposing`\nfor a `Plan` of `Callback`s,  and therefore
  the parent container`Design`, `SuperModel`, and `Model` (which may contain other
  widget `SuperModel`s)\n\nThe [`List` widget](https://github.com/louispan/glazier-react-widget/blob/54a771f492b864ff422e31949284ea4b23aa02c6/src/Glazier/React/Widgets/List.hs#L181)
  shows how the disposables can be queued for destruction after the next rendered
  frame.\n\n## Widget\nA [`Glazier.React.Widget`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Widget.hs)
  is the combination of:\n\nThe `Maker` instruction on how to create the `Plan` of
  that widget:\n```\nmkPlan :: Frame Model Plan -> F (Maker Action) Plan\n```\nThe
  rendering instructions for that widget:\n```\nwindow:: WindowT (Design Model Plan)
  (ReactMlT Identity) ()\n```\nThe state changes from `Action` events:\n```\ngadget
  :: GadgetT Action (SuperModel Model Plan) Identity (DList Command)\n```\nThis is
  everything you need in order to create, render and interact with a widget.\n\n`Glazier.React.IsWidget`
  is a typeclass that provides handy XXXOf type functions to get to the type of `Command`,
  `Action`, `Model`, `Plan` of the Widget. It also ensures that the `Model` and `Plan`
  is an instance of `Disposing`.\n\n```\ninstance (CD.Disposing m, CD.Disposing p)
  =>\n         IsWidget (Widget c a m p) where\n    type CommandOf (Widget c a m p)
  = c\n    type ActionOf (Widget c a m p) = a\n    type ModelOf (Widget c a m p) =
  m\n    type PlanOf (Widget c a m p) = p\n    mkPlan (Widget f _ _) = f\n    window
  (Widget _ f _) = f\n    gadget (Widget _ _ f) = f\n```\n\nThis is useful for creating
  widgets that is composed of other Widgets. For example:\nThe [List widget](https://github.com/louispan/glazier-react-widget/blob/54a771f492b864ff422e31949284ea4b23aa02c6/src/Glazier/React/Widgets/List.hs#L122)
  uses the IsWidget typeclass in order to ensure that the `itemWidget` can be disposed.\n\n##
  Widget best practices\nPlease refer to [`glazier-react-widget`](https://github.com/louispan/glazier-react-widget)
  for documentation on the best practices for creating `Glazier.React.Widgets`\n"
license-name: BSD3
<commit_msg>Update from Hackage at 2017-03-23T09:49:39Z<commit_after>homepage: https://github.com/louispan/glazier-react#readme
changelog-type: ''
hash: e76ef219340c0839dbafbb12d32eb16e2104490a1af8ea6f5ac5946d15b753c6
test-bench-deps: {}
maintainer: <EMAIL>
synopsis: ReactJS binding using Glazier and Pipes.Fluid
changelog: ''
basic-deps:
  semigroupoids: ! '>=5 && <6'
  free: ! '>=4.12 && <5'
  javascript-extras: ! '>=0.2.0.2 && <1'
  stm: ! '>=2.4 && <3'
  base: ! '>=4.7 && <5'
  unordered-containers: ! '>=0.2.7 && <0.3'
  text: ! '>=1.2 && <1.3'
  disposable: ! '>=0.2.0.3 && <1'
  dlist: ! '>=0.8 && <0.9'
  containers: ! '>=0.5 && <0.6'
  lens: ! '>=4 && <5'
  pipes-concurrency: ! '>=2 && <3'
  mtl: ! '>=2 && <3'
  mmorph: ! '>=1 && <2'
  ghcjs-base-stub: ! '>=0.1.0.1 && <1'
  transformers: ! '>=0.4 && <0.6'
  deepseq: ! '>=1.4 && <1.5'
  glazier: ! '>=0.10 && <1'
  profunctors: ! '>=5 && <6'
all-versions:
- '0.1.0.0'
- '0.2.0.0'
- '0.3.0.0'
- '0.3.0.1'
- '0.3.0.2'
- '0.4.0.0'
author: <NAME>
latest: '0.4.0.0'
description-type: markdown
description: ! "[![Hackage](https://img.shields.io/hackage/v/glazier-react.svg)](https://hackage.haskell.org/package/glazier-react)\n[`Glazier.React`](https://github.com/louispan/glazier-react)
  contains efficient haskell bindings to React JS where render will only be called
  for the react components with changed states.\n\nIt uses the haskell [glazier](https://github.com/louispan/glazier)
  library to enable composable windows\n\n# Features\n\n## Efficient rendering\nUsing
  `React.PureComponent` and react `render` will only be called for component who's
  state actually changed, instead of requiring react to diff the entire DOM.\n\n##
  Composable widgets\n[`Glazier`](https://github.com/louispan/glazier) allows disciplined
  and lawful ways of creating composable widgets. Larger  can be created out of other
  widgets without modifying existing widget code, or manual [\"lifting state\"](https://facebook.github.io/react/docs/lifting-state-up.html)
  into larger widgets.\n\nFor example, [List Widget](https://github.com/louispan/glazier-react-widget/blob/master/src/Glazier/React/Widgets/List.hs)
  creates a list of any other widget.\n\n## Isolation of IO\nThe  stateful effects
  are pure and do not involve IO. This has the benefit of allowing better testing
  of the intention of gadgets; increasing confidence of the behaviour of the gadget,
  \ reducing the surface area of IO misbehaviour.\n\nThere are only two places where
  IO is allowed:\n1. in the gadget `Command` interpreter,\n2. in the event callback
  handlers, due to the need to read properties from `javascript` and dispatching `Actions`.
  Besides dispatching `Actions`, it is bad practice to create any other observable
  side effects in event handlers.\n\n## Combine multiple concurrent stateful effects\nAFAIK,
  Haskell is the only language where you can [combine multiple concurrent stateful
  effects consistently.](https://github.com/louispan/glazier#combine-multiple-concurrent-stateful-effects)\n\n##
  Compile using GHC as well as GHCJS\n`Glazier.React` uses [ghcjs-base-stub](https://github.com/louispan/ghcjs-base-stub)
  allows compiling GHCJS projects using GHC, which means you can develop using intero.\n\n##
  Easier management of GHCJS callbacks\n`Glazier.React` uses [disposable](https://github.com/louispan/disposable)
  to ease cleanup of GHCJS callbacks. It also uses a Free Monad [`Maker`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Maker.hs)
  DSL to ease creation of callbacks for widgets.\n\n## blaze/lucid style do notation\nReact
  elements can be coded using blaze/lucid-style `do` notation using [`ReactMlT`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Markup.hs)\n\n##
  Haskell-driven rendering\nAll state and processing is in Haskell, meaning only a
  simple shim `React.Component` is required. This  reduces the amount of `javascript`
  required and reduces the need for complex stateful integration with `React`.\n\n#
  Examples\n\n## TodoMVC\nThis is a fully featured TodoMVC in in Haskell and ReactJS
  using the [glazier-react](https://github.com/louispan/glazier-react) library.\n\nFor
  a live demo, see https://louispan.github.io/glazier-react-examples/\n\nFor more
  details, see the [todo example README.md](https://github.com/louispan/glazier-react-examples/tree/master/examples/todo)\n\n#
  Documentation\n\n## React\n* Please refer to [react docs](https://facebook.github.io/react/docs).
  You only need to read up to [handling events](https://facebook.github.io/react/docs/handling-events.html).\n*
  Also read [Lists and Keys](https://facebook.github.io/react/docs/lists-and-keys.html),
  and [Refs and the DOM](https://facebook.github.io/react/docs/refs-and-the-dom.html).\n*
  Ignore controlled input in [Forms](https://facebook.github.io/react/docs/forms.html).
  In my experience, controlled input is error-prone and it is better to use it uncontrolled.\n
  \   * Using uncontrolled input doesn't stop you from subscribing to onChange and
  obtaining the latest value of the input. Just do not force a render with react[`setState`](https://facebook.github.io/react/docs/react-component.html#setstate).\n\n##
  Glazier\nPlease read the [README.md](https://github.com/louispan/glazier) for a
  brief overview of glazier.\n\n## Markup\n[`Glazier.React.Markup`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Markup.hs)
  is a StateT monad that enables blaze/lucid style `do` notation to markup React elements
  to render.\n\n```\nbh (strJS \"footer\") [(\"className\", strJS \"footer\")] $ do\n
  \   bh (strJS \"span\") [ (\"className\", strJS \"todo-count\")\n                      ,
  (\"key\", strJS \"todo-count\")] $ do\n            bh (strJS \"strong\") [(\"key\",
  strJS \"items\")]\n                (s ^. activeCount . to (txt . pack . show))\n
  \           txt \" items left\"\n```\n\n## Event handling\nReact re-uses SyntheticEvent
  from a pool, which means it may no longer be valid if we lazily parse it. However,
  we still want lazy parsing so we don't parse unnecessary fields.\n\nAdditionally,
  we don't want to block during the event handling.The reason this is a problem is
  because Javascript is single threaded, but Haskell is lazy.\nTherefore GHCJS threads
  are a strange mixture of synchronous and asynchronous threads, where a synchronous
  thread might be converted to an asynchronous thread if a \"black hole\" is encountered.\nSee
  https://github.com/ghcjs/ghcjs-base/blob/master/GHCJS/Concurrent.hs\n\n[`Glazier.React.Event`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Event.hs)
  uses the event handling idea from the haskell [`react-flux`](https://hackage.haskell.org/package/react-flux/docs/React-Flux-PropertiesAndEvents.html)
  library to allow lazy parsing of event safely.\n\nEvent handling should only be
  done via [`eventHandler` or `eventHandlerM`](https://github.com/louispan/glazier-react/blob/33f4e244cff1a3e98ee1845f9ae2392818b9e512/src/Glazier/React/Event.hs#L90).\n\n```\neventHandlerM
  :: (Monad m, NFData a) => (evt -> m a) -> (a -> m b) -> (evt -> m b)\n```\n\nThis
  safe interface requires two input functions:\n1. a function to reduce SyntheticEvent
  to a NFData. The mkEventCallback will ensure that the NFData is forced which will
  ensure all the required fields from Synthetic event has been parsed. This function
  must not block.\n2. a second function that uses the NFData. This function is allowed
  to block.\n\n mkEventHandler results in a function that you can safely pass into
  'GHC.Foreign.Callback.syncCallback1' with 'GHCJS.Foreign.Callback.ContinueAsync'.\n\n##
  Simple and efficient React.Component integration\n`Glazier.React` only uses `ReactJS`
  as a thin layer for rendering and registering event handlers.  All state and event
  processing are performed in Haskell, which means only a simple shim `React.PureComponent`
  is required.\n\nOnly [one shim React component](https://github.com/louispan/glazier-react/blob/master/jsbits/react.js)
  is ever used and the only methods are required are  [`setState`](https://facebook.github.io/react/docs/react-component.html#setstate),
  \ [`render`](https://facebook.github.io/react/docs/react-component.html#render)
  and [`componentDidUpdate`](https://facebook.github.io/react/docs/react-component.html#componentdidupdate),\n\nThe
  shim component only has one thing in it's state, a sequence number. This sequence
  number is only changed with [`setState`](https://facebook.github.io/react/docs/react-component.html#setstate)
  when the `Glazier.Gadget` determined that there is a need for re-rendering. This
  is easy and efficient to determine since `Gadget` is the `StateT` responsible for
  changing the state in the first place.\n\nThis has the benefits of:\n* Only the
  react shim components with changed haskell state will be re-rendered.\n* React is
  able to efficiently determine if state has changed (just a single integer comparison)\n*
  The shim React component is very simple.\n\n## Modelling\n[`Glazier.React.Model`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Model.hs)
  contain many nuanced concepts of Model.\n\n### Model\nThe `Model` is the pure data
  used for rendering and stateful logic (the nouns).\nIt may contain `SuperModel`
  (see below) of other widgets.\n\n### Plan\nThe `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).\n\n###
  Design\n`Design` is basically a tuple of `Model` and `Plan`. It is a separate data
  type in order to generate convenient lenses to the fields.\n`Design` is all that
  a `Window` needs to purely generate rendering instructions.\n\n### Frame\n`Frame`
  is a type synonym of `MVar Design`. It is a mutable holder of a copy of `Design`.
  This is so how the official state from Haskell is communicated to the React [`render`](https://facebook.github.io/react/docs/react-component.html#render)
  callback. The [`render`](https://facebook.github.io/react/docs/react-component.html#render)
  callback will read the latest copy of `Design` from the `MVar` and pass it to the
  widget `Window` for rendering.\n\n### SuperModel\n`SuperModel` is basically a tuple
  of `Design` and `Frame`. It is a separate data type in order to generate convenient
  lenses to the fields.\nThis contains everything a widget needs for rendering and
  state processing.\nMost state processing is performed using the pure `Design`. The
  `Frame` is only used for the `RenderCommand`, to copy the latest `Design` into the
  `Frame` when re-rendering is required.\n\n## Maker\n`MVars` for `Frame`s and `Callback`s
  for `Plan`s may only be created in IO.  Using Free Monads, [`Glazier.React.Maker`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Maker.hs)
  provides a safe way to create them without allowing other arbitrary IO.\n\nThe `Maker`
  can also be used create the initial `SuperModel` state for the widgets.\nThe `Maker`
  DSL has an `action` type parameter which indicated the type of action that is dispatched
  by the widget.\nThe `action` type can be mapped and hoisted to a larger `action`
  type, allow for embedding the smaller widget action in larger widget actions.\n\nFor
  example, the [TodoMVC application](https://github.com/louispan/glazier-react-examples/blob/32b5b077faa499e7501cb8e5417105b340de9ad3/examples/todo/haskell/app/Main.hs#L44)
  uses `Maker` to create the initial application `SuperModel` which involves making
  and hoisting the `SuperModel` of the input, list of todos widget, and footer widget.\n\n##
  Disposable\nGHCJS `Callback`s has resources that are not automatically collected
  by the garbage collector. `Callback`s need to be released manually. The [disposable](https://github.com/louispan/disposable)
  library provides a safe and easy way to convert the `Callback` into a storable `SomeDisposable`
  that can be queued up to be released after the next rendering frame.\n\n[disposable](https://github.com/louispan/disposable)
  allows generic instances of `Disposing` to be easily created, which make it easy
  to create instances of `Disposing`\nfor a `Plan` of `Callback`s,  and therefore
  the parent container`Design`, `SuperModel`, and `Model` (which may contain other
  widget `SuperModel`s)\n\nThe [`List` widget](https://github.com/louispan/glazier-react-widget/blob/54a771f492b864ff422e31949284ea4b23aa02c6/src/Glazier/React/Widgets/List.hs#L181)
  shows how the disposables can be queued for destruction after the next rendered
  frame.\n\n## Widget\nA [`Glazier.React.Widget`](https://github.com/louispan/glazier-react/blob/master/src/Glazier/React/Widget.hs)
  is the combination of:\n\nThe `Maker` instruction on how to create the `Plan` of
  that widget:\n```\nmkPlan :: Frame Model Plan -> F (Maker Action) Plan\n```\nThe
  rendering instructions for that widget:\n```\nwindow:: WindowT (Design Model Plan)
  (ReactMlT Identity) ()\n```\nThe state changes from `Action` events:\n```\ngadget
  :: GadgetT Action (SuperModel Model Plan) Identity (DList Command)\n```\nThis is
  everything you need in order to create, render and interact with a widget.\n\n`Glazier.React.IsWidget`
  is a typeclass that provides handy XXXOf type functions to get to the type of `Command`,
  `Action`, `Model`, `Plan` of the Widget. It also ensures that the `Model` and `Plan`
  is an instance of `Disposing`.\n\n```\ninstance (CD.Disposing m, CD.Disposing p)
  =>\n         IsWidget (Widget c a m p) where\n    type CommandOf (Widget c a m p)
  = c\n    type ActionOf (Widget c a m p) = a\n    type ModelOf (Widget c a m p) =
  m\n    type PlanOf (Widget c a m p) = p\n    mkPlan (Widget f _ _) = f\n    window
  (Widget _ f _) = f\n    gadget (Widget _ _ f) = f\n```\n\nThis is useful for creating
  widgets that is composed of other Widgets. For example:\nThe [List widget](https://github.com/louispan/glazier-react-widget/blob/54a771f492b864ff422e31949284ea4b23aa02c6/src/Glazier/React/Widgets/List.hs#L122)
  uses the IsWidget typeclass in order to ensure that the `itemWidget` can be disposed.\n\n##
  Widget best practices\nPlease refer to [`glazier-react-widget`](https://github.com/louispan/glazier-react-widget)
  for documentation on the best practices for creating `Glazier.React.Widgets`\n"
license-name: BSD3

{'fraction_non_alphanumeric': 0.12195288961928238, 'fraction_numerical': 0.017940290331416052, 'mean_word_length': 4.116307584515677, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 61, 'https://': 90, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 18, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5753974', 'n_tokens_mistral': 9839, 'n_tokens_neox': 9497, 'n_words': 3031}