ld      !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~      !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~                                                         None59:;<=?ADIRT None59:;<=?ADIRT ]An existential type for some store action. It is used as the output of the dispatcher. The > instance is important for performance, for details see below.:The data in a store must be an instance of this typeclass.#The actions that this store accepts]Transform the store data according to the action. This is the only place in your app where IO should occur. The transform function should complete quickly, since the UI will not be re-rendered until the transform is complete. Therefore, if you need to perform some longer action, you should fork a thread from inside . The thread can then call  with another action with the result of its computation. This is very common to communicate with the backend using AJAX. Indeed, the  J utility function implements exactly this strategy since it is so common.Note that if the transform throws an exception, the transform will be aborted and the old store data will be kept unchanged. The exception will then be thrown from .For the best performance, care should be taken in only modifying the part of the store data that changed (see below for more information on performance).<A store contains application state, receives actions from the dispatcher, and notifies controller-views to re-render themselves. You can have multiple stores; it should be the case that all of the state required to render the page is contained in the stores. A store keeps a global reference to a value of type  storeData, which must be an instance of .Stores also work when compiled with GHC instead of GHCJS. When compiled with GHC, the store is just an MVar containing the store data and there are no controller views. ! can still be used, but it just s the store and does not notify any controller-views since there are none. Compiling with GHC instead of GHCJS can be helpful for unit testing, although GHCJS plus node can also be used for unit testing. data Todo = Todo { todoText :: Text , todoComplete :: Bool , todoIsEditing :: Bool } deriving (Show, Typeable) newtype TodoState = TodoState { todoList :: [(Int, Todo)] } deriving (Show, Typeable) data TodoAction = TodoCreate Text | TodoDelete Int | TodoEdit Int | UpdateText Int Text | ToggleAllComplete | TodoSetComplete Int Bool | ClearCompletedTodos deriving (Show, Typeable, Generic, NFData) instance StoreData TodoState where type StoreAction TodoState = TodoAction transform action (TodoState todos) = ... todoStore :: ReactStore TodoState todoStore = mkStore $ TodoState [ (0, Todo "Learn react" True False) , (1, Todo "Learn react-flux" False False) ]8A reference to the foreign javascript part of the store.An MVar containing the current store data. Normally, the MVar is full and contains the current store data. When applying an action, the MVar is kept empty for the entire operation of transforming to the new data and sending the new data to all component views. This effectively operates as a lock allowing only one thread to modify the store at any one time. This lock is safe because only the  function ever writes this MVar.OThis type is used to represent the foreign javascript object part of the store.XObtain the store data from a store. Note that the store data is stored in an MVar, so  can block since it uses . The  is empty exactly when the store is being transformed, so there is a possiblity of deadlock if two stores try and access each other's data during transformation.)Create a new store from the initial data.First,  the store data according to the given action. Next, if compiled with GHCJS, notify all registered controller-views to re-render themselves. (If compiled with GHC, the store data is just transformed since there are no controller-views.)gOnly a single thread can be transforming the store at any one time, so this function will block on an C waiting for a previous transform to complete if one is in process. Call  on the store and action.    None59:;<=?ADIRT A writer monad for  7s which is used in the rendering function of all views.do notation or the  instance is used to sequence sibling elements. Child elements are specified via function application; the combinator creating an element takes the child element as a parameter. The OverloadedStrings( extension is used to create plain text. kul_ $ do li_ (b_ "Hello") li_ "World" li_ $ ul_ (li_ "Nested" <> li_ "List")would build something like p<ul> <li><b>Hello</b><li> <li>World</li> <li><ul> <li>Nested</li> <li>List</li> </ul></li> </ul>The React.Flux.DOMJ module contains a large number of combinators for creating HTML elements. A React element is a node or list of nodes in a virtual tree. Elements are the output of the rendering functions of classes. React takes the output of the rendering function (which is a tree of elements) and then reconciles it with the actual DOM elements in the browser. The   is a monoid, so dispite its name can represent more than one element. Multiple elements are rendered into the browser DOM as siblings.&Either a property or an event handler.The combination of all properties and event handlers are used to create the javascript object passed as the second argument to React.createElement.&will be passed this.context2>The first parameter of an event handler registered with React.4%This type is for the return value of React.createElement7%This type is for the return value of React.createClass;@Create a property from anything that can be converted to a JSVal<UCreate a property for anything that can be converted to a javascript value using the ToJSVal class from the  ghcjs-base- package.. This is just an infix version of ;.= Create a   containing a given  .>Create a text element from a string. The text content is escaped to be HTML safe. If you need to insert HTML, instead use the  Ehttps://facebook.github.io/react/tips/dangerously-set-inner-html.htmldangerouslySetInnerHTML" property. This is an alias for .?UCreate a text element from a text value. The text content is escaped to be HTML safe.@Create a text element from a JSString. This is more efficient for hard-coded strings than converting from text to a JavaScript string. The string is escaped to be HTML safe.A9Create an element containing text which is the result of Ring the argument. Note that the resulting string is then escaped to be HTML safe.BCreate a React element.C$Transclude the children passed into  or < into the current rendering. Use this where you would use this.props.children in a javascript React class.DExecute a ReactElementM to create a javascript React element and a list of callbacks attached to nodes within the element. These callbacks will need to be released with releaseCallback once the class is re-rendered.Q  !"#$%&'()*+,-./0123456789: !";<=>?@AB(The element name (the first argument to React.createElement).>The properties to pass to the element (the second argument to React.createElement).*The child elements (the third argument to React.createElement).CD this.contextthis.props.childrenEFGHIJKLMNOPQRSTU=  !"#$%&'()*+,-./0123456789:;<=>?@ABCDEF=78945623 !"#$%&'()*+,-./01;<  >?@ABC=DFE:'   !"#$%&'()*+,-./0123456789: !";<=>?@ABCDEFGHIJKLMNOPQRSTUNone59:;<=?ADIRTZ>A type needed to make GHC happy when solving for instances of \.\#A class which is used to implement  https://wiki.haskell.org/Varargsvariable argument functionsL. These variable argument functions are used to convert from a JavaScript  Uhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/argumentsarguments array to a Haskell value of type props.,Any function where each argument implements # and the result is Z} is an instance of this class. Entries from the JavaScript arguments array are matched one-by-one to the arguments before ZJ value. If the Haskell function has more parameters than the javascript  argumentsB object, a javascript null is used for the conversion. Since the $ instance of # converts null references to %Q, you can exploit this to handle arguments not given to the JavaScript function.]/Keys in React can either be strings or integers^A stateful-view event handler produces a list of store actions and potentially a new state. If the new state is nothing, no change is made to the state (which allows an optimization in that we do not need to re-render the view).Changing the state causes a re-render which will cause a new event handler to be created. If the handler closes over the state passed into the rendering function, there is a race if multiple events occur before React causes a re-render. Therefore, the handler takes the current state as input. Your handlers therefore should ignore the state passed into the render function and instead use the state passed directly to the handler._rEvent handlers in a controller-view and a view transform events into actions, but are not allowed to perform any &.`1A view is conceptually a rendering function from propsX and some internal state to a tree of elements. The function receives a value of type props from its parent in the virtual DOM. Additionally, the rendering function can depend on some internal state or store data. Based on the props and the internal state, the rendering function produces a virtual tree of elements which React then reconciles with the browser DOM.This module supports 3 kinds of views. All of the views provided by this module are pure, in the sense that the rendering function and event handlers cannot perform any IO. All IO occurs inside the  function of a store.Due to React limitations (see  -https://github.com/facebook/react/issues/2127 issue2127), React views must have a single top-level element. If your haskell code returns multiple top-level elements, react-flux will wrap them in a container divq. You should not rely on this and instead make sure each view returns only a single top-level element (such as todoItem below returning only a single li element).a.A controller view provides the glue between a  and the DOM. The controller-view registers with the given store, and whenever the store is transformed the controller-view re-renders itself. Each instance of a controller-view also accepts properties of type props from its parent. Whenever the parent re-renders itself, the new properties will be passed down to the controller-view causing it to re-render itself.GEvents registered on controller-views are expected to produce lists of . Since lists of R are the output of the dispatcher, each event handler should just be a call to a dispatcher function. Once the event fires, the actions are executed causing the store(s) to transform which leads to the controller-view(s) re-rendering. This one-way flow of data from actions to store to controller-views is central to the flux design.It is recommended to have one controller-view for each significant section of the page. Controller-views deeper in the page tree can cause complexity because data is now flowing into the page in multiple possibly conflicting places. You must balance the gain of encapsulated components versus the complexity of multiple entry points for data into the page. Note that multiple controller views can register with the same store. todoApp :: ReactView () todoApp = defineControllerView "todo app" todoStore $ \todoState () -> div_ $ do todoHeader_ mainSection_ todoState todoFooter_ todoStatebMA view is a re-usable component of the page which accepts properties of type propsG from its parent and re-renders itself whenever the properties change.KOne option to implement views is to just use a Haskell function taking the props as input and producing a  ?. For small views, such a Haskell function is ideal. Using a `P provides more than just a Haskell function when used with a key property with f and g`. The key property allows React to more easily reconcile the virtual DOM with the browser DOM.$The following is two example views:  mainSection_ is just a Haskell function and todoItem is a React view. We use the convention that an underscore suffix signifies a combinator which can be used in the rendering function. mainSection_ :: TodoState -> ReactElementM ViewEventHandler () mainSection_ st = section_ ["id" $= "main"] $ do input_ [ "id" $= "toggle-all" , "type" $= "checkbox" , "checked" $= if all (todoComplete . snd) $ todoList st then "checked" else "" , onChange $ \_ -> dispatchTodo ToggleAllComplete ] label_ [ "htmlFor" $= "toggle-all"] "Mark all as complete" ul_ [ "id" $= "todo-list" ] $ mapM_ todoItem_ $ todoList st todoItem :: ReactView (Int, Todo) todoItem = defineView "todo item" $ \(todoIdx, todo) -> li_ [ classNames [("completed", todoComplete todo), ("editing", todoIsEditing todo)] , "key" @= todoIdx ] $ do div_ [ "className" $= "view"] $ do input_ [ "className" $= "toggle" , "type" $= "checkbox" , "checked" @= todoComplete todo , onChange $ \_ -> dispatchTodo $ TodoSetComplete todoIdx $ not $ todoComplete todo ] label_ [ onDoubleClick $ \_ _ -> dispatchTodo $ TodoEdit todoIdx] $ elemText $ todoText todo button_ [ "className" $= "destroy" , onClick $ \_ _ -> dispatchTodo $ TodoDelete todoIdx ] mempty when (todoIsEditing todo) $ todoTextInput_ TextInputArgs { tiaId = Nothing , tiaClass = "edit" , tiaPlaceholder = "" , tiaOnSave = dispatchTodo . UpdateText todoIdx , tiaValue = Just $ todoText todo } todoItem_ :: (Int, Todo) -> ReactElementM eventHandler () todoItem_ !todo = viewWithIKey todoItem (fst todo) todo memptycA stateful view is a re-usable component of the page which keeps track of internal state. Try to keep as many views as possible stateless. The React documentation on  Hhttps://facebook.github.io/react/docs/interactivity-and-dynamic-uis.htmlinteractivity and dynamic UIsF has some discussion of what should and should not go into the state.lThe rendering function is a pure function of the state and the properties from the parent. The view will be re-rendered whenever the state or properties change. The only way to transform the internal state of the view is via an event handler, which can optionally produce new state. Any more complicated state should be moved out into a (possibly new) store. ldata TextInputArgs = TextInputArgs { tiaId :: Maybe JSString , tiaClass :: JSString , tiaPlaceholder :: JSString , tiaOnSave :: Text -> [SomeStoreAction] , tiaValue :: Maybe Text } deriving (Typeable) todoTextInput :: ReactView TextInputArgs todoTextInput = defineStatefulView "todo text input" "" $ \curText args -> input_ $ maybe [] (\i -> ["id" &= i]) (tiaId args) ++ [ "className" &= tiaClass args , "placeholder" &= tiaPlaceholder args , "value" &= curText , "autoFocus" &= True , onChange $ \evt _ -> ([], Just $ target evt "value") , onBlur $ \_ _ curState -> if not (Text.null curState) then (tiaOnSave args curState, Just "") else ([], Nothing) , onKeyDown $ \_ evt curState -> if keyCode evt == 13 && not (Text.null curState) -- 13 is enter then (tiaOnSave args curState, Just "") else ([], Nothing) ] todoTextInput_ :: TextInputArgs -> ReactElementM eventHandler () todoTextInput_ !args = view todoTextInput args memptydCreate an element from a view. I suggest you make a combinator for each of your views, similar to the examples above such as  todoItem_.ehA deprecated way to create a view with a key which has problems when OverloadedStrings is active. Use f or g instead.fvCreate an element from a view, and also pass in a string key property for the instance. Key properties speed up the  9https://facebook.github.io/react/docs/reconciliation.htmlreconciliation of the virtual DOM with the DOM. The key does not need to be globally unqiue, it only needs to be unique within the siblings of an element.g Similar to f2, but with an integer key instead of a string key.h Create a  * for a class defined in javascript. See , for a convenient wrapper and some examples.iExport a Haskell view to a JavaScript function. This allows you to embed a Haskell react-flux application into a larger existing JavaScript React application. If you want to use JavaScript classes in your Haskell application, you should instead use  and h.!The way this works is as follows: iYou create a Haskell function which translates the javascript arguments of into a Haskell value of type ReturnProps props2. This is a variable-argument function using the \ class. For example,  data MyProps = MyProps { theInt :: Int, theString :: String } myArgsToProps :: Int -> String -> ReturnProps MyProps myArgsToProps i s = ReturnProps $ MyProps i s pYou create a view which receives these properties and renders itself. This view will not receive any children. O myView :: ReactView MyProps myView = defineView "my view" $ \myProps -> ... You can then use i to create a JavaScript function. When this JavaScript function is executed, the JavaScript arguments are converted to the props, the view is rendered using the props, and the resulting React element is returned from the JavaScript function.  foreign import javascript unsafe "window['myHaskellView'] = $1;" js_setMyView :: JSVal -> IO () exportMyView :: IO () exportMyView = exportViewToJavaScript myView myArgsToProps >>= js_setMyView  exportMyView< should be called from your main function. After executing  exportMyView, the window.myHaskellView( property will be a javascript function.Call the javascript function with two arguments to return a React element which can be used in a JavaScript React class rendering function.  var myJsView = React.createClass({ render: function() { return <div>{window.myHaskellView(5, "Hello World")}</div>; } }; Z[\'](^_`)*#+,-a=A name for this view, used only for debugging/console logging0The store this controller view should attach to.The rendering functionb=A name for this view, used only for debugging/console loggingThe rendering functionc=A name for this view, used only for debugging/console loggingThe initial stateThe rendering functiondthe view5the properties to pass into the instance of this viewThe children of the elementethe view2A value unique within the siblings of this element+The properties to pass to the view instanceThe children of the viewfthe view;The key, a value unique within the siblings of this element+The properties to pass to the view instanceThe children of the viewgthe view;The key, a value unique within the siblings of this element+The properties to pass to the view instanceThe children of the viewh%The javascript reference to the classHproperties and handlers to pass when creating an instance of this class.The child element or elementsi./01Z[\'](^_`)*#+,-abcdefghiZ[\'](^_`)*#+,-abcdefghi./01None59:;<=?ADIRTjThe response after XMLHttpRequest indicates that the  readyState is done.nThe raw XMLHttpRequest[ object. Use this if you want more status about the response, such as response headers.o)The input to an AJAX request built using XMLHttpRequest.vAn optional timeout to use for XMLHttpRequest.timeout<. When a request times out, a status code of 504 is set in l$ and the response handler executes.yIf you are going to use z or {, you must call yK once from your main function. The call should appear before the call to  reactRender.zUse XMLHttpRequestG to send a request to the backend. Once the response arrives and the  readyStates is done, the response will be passed to the given handler and the resulting actions will be executed. Note that zA returns immedietly and does not wait for the request to finish.{Use XMLHttpRequest to send a request with a JSON body, parse the response body as JSON, and then dispatch some actions with the response. This should be used from within the transform function of your store. For example, data Target = AlienShip | AlienPlanet deriving (Show, Typeable, Generic, ToJSON, FromJSON) data Trajectory = Trajectory { x :: Double, y :: Double, z :: Double, vx :: Double, vy :: Double, vz :: Double } deriving (Show, Typeable, Generic, ToJSON, FromJSON) data UpdatePending = NoUpdatePending | UpdatePending Text | PreviousUpdateHadError Text data MyStore = MyStore { currentTrajectory :: Maybe Trajectory, launchUpdate :: UpdatePending } data MyStoreAction = LaunchTheMissiles Target | MissilesLaunched Trajectory | UnableToLaunchMissiles Text deriving (Typeable, Generic, NFData) instance StoreData MyStore where type StoreAction MyStore = MyStoreAction transform (LaunchTheMissiles t) s = do jsonAjax NoTimeout "PUT" "/launch-the-missiles" [] t $ \case Left (_, msg) -> return [SomeStoreAction myStore $ UnableToLaunchMissiles msg] Right traj -> return [SomeStoreAction myStore $ MissilesLaunched traj] return s { launchUpdate = UpdatePending ("Requesting missle launch against " ++ T.pack (show t)) } transform (MissilesLaunched traj) s = return s { currentTrajectory = Just traj, launchUpdate = NoUpdatePending } transform (UnableToLaunchMissiles err) s = return s { launchUpdate = PreviousUpdateHadError err } myStore :: ReactStore MyStore myStore = mkStore $ MyStore Nothing NoUpdatePending@And then in your view, you can render this using something like: >myView :: ReactView () myView = defineControllerView "launch the missles" myStore $ \s () -> do case launchUpdate s of NoUpdatePending -> return () UpdatePending msg -> span_ $ faIcon_ "rocket" <> elemText msg PreviousUpdateHadErroer err -> span_ $ faIcon_ "exclamation" <> elemText err clbutton_ ["pure-button button-success"] ([SomeStoreAction myStore $ LaunchTheMissiles AlienShip]) $ do faIcon_ "rocket" "Launch the missles against the alien ship!" p_ $ elemString $ "Current trajectory " ++ show (currentTrajectory s)jklmnopqrstuvwxyz{ the methodthe URI,the headers. In addition to these headers, { adds two headers: Content-Type: application/json and Accept: application/json.the bodyOnce XMLHttpRequest changes the  readyState[ to done this handler will be executed and the resulting actions dispatched to the stores.If the response status is 200-, the body will be parsed as JSON and a 2` value will be passed to this handler. If there is an error parsing the JSON response, a 3 value with 500@ and the error message from aeson is given to the handler. +If the response status is anything besides 200, a 3Z value with a pair of the response status and response text is passed to the handler.jklmnopqrstuvwxyz{yvwx{opqrstujklmnzjklmnopqrstuvwxyz{None59:;<=?ADIRT The data for the keyboard events4The actions for the fake store5In a hack, the prevent default and stop propagation are actions since that is the easiest way of allowing users to specify these actions (IO is not available in view event handlers). We create a fake store to handle these actions.[Every event in React is a synthetic event, a cross-browser wrapper around the native event.6A reference to the object that dispatched the event. =https://developer.mozilla.org/en-US/docs/Web/API/Event/target#A class which is used to implement  https://wiki.haskell.org/Varargsvariable argument functions/. Any function where each argument implements 6 and the result is either _ or ^ is an instance of this class.tSome third-party React classes allow passing React elements as properties. This function will first run the given  m to obtain an element or elements, and then use that element as the value for a property with the given key.Allows you to create nested object properties. The list of properties passed in will be converted to an object which is then set as the value for a property with the given name. For example, Q[ nestedProperty "Hello" [ "a" @= (100 :: Int), "b" $= "World" ] , "c" $= "!!!" ] would create a javascript object +{"Hello": {a: 100, b: "World"}, "c": "!!!"}Create a callback property. This is primarily intended for foreign React classes which expect callbacks to be passed to them as properties. For events on DOM elements, you should instead use the handlers below. The function funcR can be any function, as long as each argument to the function is an instance of 6# and the result of the function is handler. Internally, 3 creates a javascript function which accesses the  arguments0 javascript object and then matches entries in  arguments to the parameters of func. If func* has more parameters than the javascript  argumentsB object, a javascript null is used for the conversion. Since the $ instance of 6 converts a null reference to %I, you can exploit this to create variable-argument javascript callbacks.EFor example, all three of the following functions could be passed as func inside a view. mfoo :: Int -> Maybe String -> ViewEventHandler bar :: Aeson.Value -> ViewEventHandler baz :: ViewEventHandler1For another example, see the haddock comments in React.Flux.Addons.Bootstrap.Create a zero-argument callback property. When this callback function is executed, it will render the given view and return the resulting React element. If you need to create a callback which expects arguments, use  instead.Create a callback that when called will render a view. This is useful for interacting with third-party React classes that expect a property which is a function which when called returns a React element. The way this works is as follows: vYou create a Haskell function which translates the javascript arguments of the callback into a Haskell value of type ReturnProps props2. This is a variable-argument function using the \ class. For example,  data MyProps = MyProps { theInt :: Int, theString :: String } myArgsToProps :: Int -> String -> ReturnProps MyProps myArgsToProps i s = ReturnProps $ MyProps i s pYou create a view which receives these properties and renders itself. This view will not receive any children. O myView :: ReactView MyProps mYView = defineView "my view" $ \myProps -> ... You can then use  to create a property which is a JavaScript function. When this JavaScript function is executed, the JavaScript arguments are converted to the props, the view is rendered using the props, and the resulting React element is returned from the JavaScript function. # someOtherView :: ReactView () someOtherView = defineView "some other view" $ \() -> div_ $ foreignClass_ "theForeginThing" [ callbackViewWithProps "the_propname_to_pass_to_theForeignThing" myView myArgsToProps , "hello" $= "world" ] mempty theForeignThing- React class will receive a property called 'the_propname_to_pass_to_theForeignThingj. The value of this property is a JavaScript function which when executed will convert the arguments to props;, render the view, and return the resulting React element.?Create a property from any aeson value (the at sign looks like A for aeson)kCreate a text-valued property. This is here to avoid problems when OverloadedStrings extension is enabledSet the  Bhttps://facebook.github.io/react/docs/class-name-manipulation.html className property to consist of all the names which are matched with True, allowing you to easily toggle class names based on a computation.$Access a property in an event target A version of  which accesses the property of , in the event. This is useful for example: xdiv_ $ input_ [ "type" @= "checked" , onChange $ \evt -> let val = target evt "value" in ... ]In this case, val/ would coorespond to the javascript expression evt.target.value.Use this to create an event handler for an event not covered by the rest of this module. (Events are not covered if they don't have extra arguments that require special handling.) For example, onPlay and onPause are events you could use with on.7KConstruct a handler from a detail parser, used by the various events below.8The fake store, doesn't store any data. Also, the dispatch function correctly detects nullRef and will not attempt to notify any controller-views.KPrevent the default browser action from occuring in response to this event.}Stop propagating this event, either down the DOM tree during the capture phase or up the DOM tree during the bubbling phase.By default, the handlers below are triggered during the bubbling phase. Use this to switch them to trigger during the capture phase.jThe onChange event is special in React and should be used for all input change events. For details, see 0https://facebook.github.io/react/docs/forms.htmlWInitialize touch events is only needed with React 0.13, in version 0.14 it was removed.~49:5;<=6>?@A7The event name6A function parsing the details for the specific event.&The function implementing the handler.8BCDEFGHIJKLMN     ;<Z[\~;\Z[<~s~  49:5; <=6>?@A78BCDEFGHIJKLMN     None59:;<=?ADIRTzThis class allows the DOM combinators to optionally take a list of properties or handlers, or for the list to be omitted. !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~ !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~ !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~ !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~None579:;<=?ADIRTA wrapper around h that looks up the class on the windowJ. I use it for several third-party react components. For example, with  &https://github.com/reactjs/react-modal react-modal , assuming `window.ReactModal`& contains the definition of the class, 3foreign_ "ReactModal" [ "isOpen" @= isModelOpen myProps , callback "onRequestClose" $ dispatch closeModel , "style" @= Aeson.object [ "overlay" @= Aeson.object ["left" $= "50%", "right" $= "50%"]] ] $ do h1_ "Hello, World!" p_ "...."Here is another example using  )https://github.com/JedWatson/react-select react-select: reactSelect_ :: [PropertyOrHandler eventHandler] -> ReactElementM eventHandler () reactSelect_ props = foreign_ "Select" props mempty someView :: ReactView () someView = defineView "some view" $ \() -> reactSelect_ [ "name" $= "form-field-name" , "value" $= "one" , "options" @= [ object [ "value" .= "one", "label" .= "One" ] , object [ "value" .= "two", "label" .= "Two" ] ] , callback "onChange" $ \(i :: String) -> dispatch $ ItemChangedTo i ]A > with the given class name (multiple classes can be separated by spaces). This is useful for defining rows and columns in your CSS framework of choice. I use  http://purecss.io/forms/Pure CSS so I use it something like: cldiv_ "pure-g" $ do cldiv_ "pure-u-1-3" $ p_ "First Third" cldiv_ "pure-u-1-3" $ p_ "Middle Third" cldiv_ "pure-u-1-3" $ p_ "Last Third"A 0 with the given class names and  handler. xclbutton_ "pure-button button-success" (dispatch LaunchTheMissiles) $ do faIcon_ "rocket" "Launch the missiles!"A Y and an UB together. Useful for laying out forms. For example, a stacked  http://purecss.io/forms/ Pure CSS Form could be %form_ ["className" $= "pure-form pure-form-stacked"] $ fieldset_ $ do legend_ "A stacked form" labeledInput_ "email" "Email" ["type" $= "email"] labeledInput_ "password" ($(message "password-label" "Your password") []) ["type" $= "password"] The second  shows an example using React.Flux.Addons.Intl.A  *http://fortawesome.github.io/Font-Awesome/ Font AwesomeT icon. The given string is prefixed by `fa fa-` and then used as the class for an i+ element. This allows you to icons such as faIcon_ "fighter-jet" -- produces <i class="fa fa-fighter-jet"> faIcon_ "refresh fa-spin" -- produces <i class="fa fa-refresh fa-spin">$A simple combinator to easily write  8https://facebook.github.io/react/tips/inline-styles.html inline styles on elements.O)this should be the name of a property on window which contains a react class. propertieschildrenclass names separated by spaces"the onClick handler for the button the childrenthe ID for the input element)the label content. This is wrapped in a Y with a htmlFor! property equal to the given ID.the properties to pass to U. A property with key P% is added to this list of properties.ONone59:;<=?ADIRT The class rendering function, together with optional callbacks for the various lifecycle events. As mentioned above, care must be taken in each callback to write only IO that will not block.&Receives the new props as an argument.cReceives the new props and state as arguments. The current props and state can be accessed using .cReceives the old props and state as arguments. The current props and state can be accessed using Set the state of the class.HObtain the browser DOM element for either the component as a whole with $ or for various nodes with a given  :https://facebook.github.io/react/docs/more-about-refs.htmlref property with .3Actions to access the current properties and state.A default configuration, which does not specify any lifecycle events. You should start with this and override the functions you need.5Create a lifecycle view from the given configuration. myView :: ReactView String myVew = defineLifecycleView "my view" (10 :: Int) lifecycleConfig { lRender = \state props -> ... , lComponentWillMount = \propsAndState setStateFn -> ... }QQNone59:;<=?ADIRT@Render your React application into the DOM. Use this from your main% function, and only in the browser.  only works when compiled with GHCJS (not GHC), because we rely on the React javascript code to actually perform the rendering.7Render your React application to a string using either ReactDOMServer.renderToString$ if the first argument is false or #ReactDOMServer.renderToStaticMarkupV if the first argument is true. Use this only on the server when running with node.  only works when compiled with GHCJS (not GHC), because we rely on the React javascript code to actually perform the rendering.FIf you are interested in isomorphic React, I suggest instead of using  you use iv and then write a small top-level JavaScript view which can then integrate with all the usual isomorphic React tools.VThe ID of the HTML element to render the application into. (This string is passed to document.getElementById))A single instance of this view is created"the properties to pass to the viewfRender to static markup? If true, this won't create extra DOM attributes that React uses internally.)A single instance of this view is created"the properties to pass to the view. ;<>?@ACZ[\]^_`abcdefghi~ !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~% `abc_^ >?@AdfgChi\Z[e]None59:;<=?ADIRTGAn action to start or stop performance measurement. For details, see  /https://facebook.github.io/react/docs/perf.html.<What to print after stopping performance measurement. See  /https://facebook.github.io/react/docs/perf.html for documentation.The  4https://facebook.github.io/react/docs/animation.htmlReactCSSTransitionGroup% element. For example in React 0.14, cssTransitionGroup ["transitionName" $= "example", transitionAppear @= True, transitionAppearTimeout @= (100 :: Int)] $ h1_ "Fading at initial mount"SConvert a performance action into a store action. Use this if you are not using .R"The performance toggle button viewA button which when clicked toggles the performance measurement on and off. When the measurement is stopped, the given measurements are printed. If you want more control over the performance tools, you can use ' directly from your own event handlers.STUVRW   STUVRW None59:;<=?ADIRT A bootstrap  0http://react-bootstrap.github.io/components.html component. For example, bootstrap_ "Alert" [ "bsStyle" $= "danger" , callback "onDismiss" $ dispatch CloseAlert ] $ p_ "Hello, World!" bootstrap_ "Nav" [ "activeKey" @= (1 :: Int) , callback "onSelect" $ \(i :: Int) -> dispatch $ TabChange i ] $ do bootstrap_ "NavItem" ["eventKey" @= (1 :: Int)] "Item 1" bootstrap_ "NavItem" ["eventKey" @= (2 :: Int)] "Item 2" bootstrap_ "NavItem" ["eventKey" @= (3 :: Int)] "Item 3"The component name. Uses window['ReactBootstrap'][name]A to find the class, so the name can be anything exported to the window.ReactBoostrap object.KProperties and callbacks to pass to the ReactBootstrap class. You can use  to create function properties.'The child or children of the component. None59:;<=?ADIRT6X;This is the type stored in the Q monad with qGetQ and qPutQ A message.:A description intended to provide context for translators.The default message written in  )http://formatjs.io/guides/message-syntax/ICU message syntax.5An identifier for a message, must be globally unique.pHow to display a time. Each non-Nothing component will be displayed while Nothing components will be ommitted.>These properties coorespond directly the options accepted by  _https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormatIntl.DateTimeFormat.'possible values are numeric and 2-digit'possible values are numeric and 2-digit'possible values are numeric and 2-digit"possible values are short and longHow to display a date. Each non-Nothing component will be displayed while the Nothing components will be ommitted. If everything is nothing, then it is assumed that year, month, and day are each numeric.>These properties coorespond directly the options accepted by  _https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormatIntl.DateTimeFormat.+possible values are narrow, short, and long+possible values are narrow, short, and long'possible values are numeric and 2-digit=possible values are numeric, 2-digit, narrow, short, and long'possible values are numeric and 2-digitsA property and value that is passed to the intl elements below in situations where React elements can not be used.(Some of the intl elements below such as W (among others) allow other React elements to be passed as properties. In this case, J is used as the type for the parameters and elements can be passed using ,. But for some intl elements below such as ), a limitation on the internals of this  react-flux package disallow element properties to be created and so only basic javascript values can be passed. In these situations, the type @ is used to restrict the properties to basic javascript values.WConvert a day to a javascript Date. This is useful to pass a date as a property to a  . Note that JSVal is an instance of ToJSVal so the result of ) can be passed as a property via '(&=)'.bConvert a UTCTime to a javascript date object. This is useful to pass a time as a property to a  . Note that JSVal is an instance of ToJSVal so the result of ) can be passed as a property via '(&=)'. Create an R from a property name and anything that can be converted to a javascript value. (ToJSVal lives in GHCJS.Foreign.Marshal module in the  ghcjs-base package.)Convert a day to a javascript date and set it as a property. This is primarily useful to be able to pass a date as a property to . Convert a Yv to a javascript date and set it as a property. This is primarily useful to be able to pass a time as a property to . Use the IntlProvider to set the locale, formats, and messages property.Format an integer using  and the default style.Format a double using  and the default style.A  *http://formatjs.io/react/#formatted-numberFormattedNumber which allows arbitrary properties and therefore allows control over the style and format of the number. The accepted properties are any options supported by  ]https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormatIntl.NumberFormat.KFormat a number as a string, and then use it as the value for a property. , , or h should be prefered because as components they can avoid re-rendering when the number has not changed. z is needed if the formatted number has to be a property on another element, such as the placeholder for an input element.Z<Convert a format to the properties accepted by FormattedDateJA short day format, where month is "short" and year and day are "numeric".[AConvert a time format to properties for the FormattedDate element&A default date and time format, using 0 and then numeric for hour, minute, and second. Display a \ in the given format using the  FormattedDate$ class and then wrap it in a HTML5  >https://developer.mozilla.org/en-US/docs/Web/HTML/Element/timetime element. Display a Y using the given format. Despite giving the time in UTC, it will be displayed to the user in their current timezone. In addition, wrap it in a HTML5  >https://developer.mozilla.org/en-US/docs/Web/HTML/Element/timetime element.A raw  (http://formatjs.io/react/#formatted-date FormattedDate@ class which allows custom properties to be passed. The given \ or YB will be converted to a javascript Date object and passed in the valueA property. The remaining properties can be any properties that  _https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormatIntl.DateTimeFormat` accepts. For example, you could pass in "timeZone" to specify a specific timezone to display.PFormat a day or time as a string, and then use it as the value for a property. , , or f should be prefered because as components they can avoid re-rendering when the date has not changed. x is needed if the formatted date has to be a property on another element, such as the placeholder for an input element. Display the Y@ as a relative time. In addition, wrap the display in a HTML5  >https://developer.mozilla.org/en-US/docs/Web/HTML/Element/timetime element.#Format the given UTCTime using the  ,http://formatjs.io/react/#formatted-relativeFormattedRelative6 class to display a relative time to now. The given Y is passed in the value property. The supported style/formatting properties are "units" which can be one of second, minute, hour, day, month, or year and "style" which if given must be numeric.WFormat a time as a relative time string, and then use it as the value for a property.  or f should be prefered because as components they can avoid re-rendering when the date has not changed. x is needed if the formatted date has to be a property on another element, such as the placeholder for an input element.A simple plural formatter useful if you do not want the full machinery of messages. This does not support translation, for that you must use messages which via the ICU message syntax support pluralization. The properties passed to  must be value0, and then at least one of the properties from other, zero, one, two, few, many._Format a number properly based on pluralization, and then use it as the value for a property.  should be preferred, but f can be used in places where a component is not possible such as the placeholder of an input element.]>Utility function to build the properties for FormattedMessage.vRender a message and also record it during compilation. This template haskell splice produces an expression of type B[PropertyOrHandler eventHandler] -> ReactElementM eventHandler ()B, which should be passed the values for the message. For example, Qli_ ["id" $= "some-id"] $ $(message "num_photos" "{name} took {numPhotos, plural, =0 {no photos} =1 {one photo} other {# photos}} {takenAgo}.") [ "name" $= "Neil Armstrong" , "numPhotos" @= (100 :: Int) , elementProperty "takenAgo" $ relativeTo_ (UTCTime (fromGregorian 1969 7 20) (2*60*60 + 56*60)) ]This will first lookup the  (in this case  num_photos ) in the messages parameter passed to . If no messages were passed,  was not called, or the , was not found, the default message is used.)In my project, I create a wrapper around  which sets the  as the sha1 hash of the message. I did not implement it in react-flux because I did not want to add cryptohash as a dependency. For example, import Crypto.Hash (hash, SHA1) import qualified Data.Text as T import qualified Data.Text.Encoding as T msg :: T.Text -> ExpQ msg txt = message (T.pack $ show (hash (T.encodeUtf8 txt) :: Digest SHA1)) txt Similar to $, but produce an expression of type [] -> PropertyOrHandler handler, which should be passed the values for the message. This allows you to format messages in places where using a component like > is not possible, such as the placeholder of input elements. a should be prefered since it can avoid re-rendering the formatting if the value has not changed. import Data.Aeson ((.=)) input_ [ "type" $= "numeric" , $(messageProp "placeholder" "ageplaceholder" "Hello {name}, enter your age") [ "name" .= nameFrom storeData ] ] A variant of : which allows you to specify some context for translators. A varient of : which allows you to specify some context for translators. Similar to  but use a FormattedHTMLMessageO which allows HTML inside the message. It is recomended that you instead use  together with Q to include rich text inside the message. This splice produces a value of type B[PropertyOrHandler eventHandler] -> ReactElementM eventHandler (), the same as . A variant of 9 that allows you to specify some context for translators.^Utility function for messagesA raw FormattedMessage element. The given properties are passed directly with no handling. Any message is not recorded in Template Haskell and will not appear in any resulting message file created by .A raw FormattedHTMLMessage element. The given properties are passed directly with no handling. Any message is not recorded in Template Haskell and will not appear in any resulting message file created by .Perform an arbitrary IO action on the accumulated messages at compile time, which usually should be to write the messages to a file. Despite producing a value of type Q [Dec]@, no declarations are produced. Instead, this is purly to allow IO to happen. A call to this function should be placed at the bottom of the file, since it only will output messages that appear above the call. Also, to provide consistency, I suggest you create a utility wrapper around this function. For example, {-# LANGUAGE TemplateHaskell #-} module MessageUtil where import Language.Haskell.TH import Language.Haskell.TH.Syntax import React.Flux.Addons.Intl writeMessages :: String -> Q [Dec] writeMessages name = writeIntlMessages (intlFormatJson $ "some/diretory/" ++ name ++ ".json")UNote that all paths in template haskell are relative to the directory containing the .cabal* file. You can then use this as follows: @{-# LANGUAGE TemplateHaskell #-} module SomeViews where import React.Flux import React.Flux.Addons.Intl import MessageUtil someView :: ReactView () someView = defineView .... use $(message) in render ... anotherView :: ReactView () anotherView = defineView ... use $(message) in render ... writeMessages "some-views"EFormat messages as json. The format is an object where keys are the 4s, and the value is an object with two properties, message and optionally  description+. This happens to the the same format as  5https://developer.chrome.com/extensions/i18n-messageschrome, although the syntax of placeholders uses ICU message syntax instead of chrome's syntax. This does not pretty-print the JSON, but I suggest before adding these messages in source control you pretty print and sort by MessageIds so diffs are easy to read. This can be done with the  aeson-pretty7 package, but I did not want to add it as a dependency. dFormat messages as json, ignoring the description. The format is an object where the keys are the {s and the value is the message string. This format is used by many javascript libraries, so many translation tools exist. Format messages in  Hhttp://developer.android.com/guide/topics/resources/string-resource.html Android XML3 format, but just using strings. String arrays and plurals are handled in the ICU message, instead of in the XML. There are many utilities to translate these XML messages, and the format has the advantage that it can include the descriptions as well as the messages. Also, the messages are sorted by Q so that if the output is placed in source control the diffs are easy to review.IX_`abcdefghijthe locale to useGA reference to translated messages, which must be an object with keys p and value the translated message. Set this as Nothing if you are not using translated messages, since either NothingJ or a null JSVal will cause the messages from the source code to be used.An object to use for the formats parameter which allows custom formats. I suggest you use custom formats only for messages. Custom formats for numbers and dates not in a message is better done by writing a small Haskell utility function wrapping for example .VThe children of this element. All descendents will use the given locale and messages.the property to setthe number to formatany options accepted by ]https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormatIntl.NumberFormatZ[the property to setthe day or time to formatAny options supported by  _https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormatIntl.DateTimeFormat.te property to setthe time to formatan object with properties "units" and "style". "units" accepts values second, minute, hour day, month, or year and "style" accepts only the value "numeric".]The default message written in  )http://formatjs.io/guides/message-syntax/ICU message syntaxe. This message is used if no translation is found, and is also the message given to the translators.the property name to setthe message identifier2the default message written in ICU message syntax.9A description indented to provide context for translators1The default message written in ICU message syntaxproperty to set9A description intended to provide context for translators1The default message written in ICU message syntax-default message written in ICU message syntax9A description intended to provide context for translators1The default message written in ICU message syntaxk^l  m 4  4  :X_`abcdefghijZ[]k^l  m n           !"#$%&'()*+,-./0123456789:;<=>?@ABBCCDEEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefgghijklmnopqrsttuvwxxyz{|}~       !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~                                                      `                       !"#$l%&'()* +, +-./0123/456789:;<=>?@ABCD EFGHHIJK LMNO P QMRS T U  G   V W X Y Z [ \ ] ^ _ `a'react-flux-1.2.2-ASL2TkML9NG61KP9cCvszz React.FluxReact.Flux.InternalReact.Flux.PropertiesAndEventsReact.Flux.AjaxReact.Flux.DOMReact.Flux.CombinatorsReact.Flux.LifecycleReact.Flux.Addons.ReactReact.Flux.Addons.BootstrapReact.Flux.Addons.IntlReact.Flux.ExportReact.Flux.StorejsonAjaxview viewWithKeyReact.Flux.Viewsforeign_SomeStoreAction StoreData StoreAction transform ReactStore getStoreDatamkStore alterStore executeAction ReactElementMrunReactElementM ReactElementForeignElement ViewElementChildrenPassedToViewContentAppend EmptyElementfNamefPropsfChildceClassceKeycePropsceChildPropertyOrHandlerPropertyPropertyFromContextNestedPropertyElementProperty!CallbackPropertyWithArgumentArray"CallbackPropertyWithSingleArgumentCallbackPropertyReturningView propertyName propertyValpropFromThisNamepropFromThisValnestedPropertyNamenestedPropertyValselementPropertyName elementValuecaPropertyNamecaFunccsPropertyNamecsFunccretPropertyName cretArgToPropcretView HandlerArgReactElementRefreactElementRef ReactViewRef reactViewRefJSStringproperty&= elementToM elemStringelemText elemJSStringelemShowelchildrenPassedToViewmkReactElement toJSStringexportViewToJs$fIsStringReactElementM$fMonoidReactElementM$fFunctorReactElement$fMonoidReactElement$fFunctorPropertyOrHandler$fShowHandlerArg$fIsJSValHandlerArg$fIsJSValReactElementRef$fIsJSValReactViewRef $fToJSVal[] $fIsJSVal[] $fIsJSVal() $fToJSVal() $fToJSValText$fToJSValValue$fFunctorReactElementM$fApplicativeReactElementM$fMonadReactElementM$fFoldableReactElementM ReturnPropsArgumentsToProps ReactViewKeyStatefulViewEventHandlerViewEventHandler ReactViewdefineControllerView defineViewdefineStatefulView viewWithSKey viewWithIKey foreignClassexportViewToJavaScript AjaxResponse respStatusrespResponseTextrespResponseXHR AjaxRequest reqMethodreqURI reqTimeout reqHeadersreqBodyRequestTimeoutTimeoutMilliseconds NoTimeoutinitAjaxajax$fGenericAjaxRequest$fGenericAjaxResponse WheelEventwheelDeltaMode wheelDeltaX wheelDeltaY wheelDeltaZ TouchEvent touchAltKeychangedTouches touchCtrlKeytouchGetModifierState touchMetaKey touchShiftKey touchTargetstouchesTouchtouchIdentifier touchTarget touchScreenX touchScreenY touchClientX touchClientY touchPageX touchPageY MouseEvent mouseAltKey mouseButton mouseButtons mouseClientX mouseClientY mouseCtrlKeymouseGetModifierState mouseMetaKey mousePageX mousePageYmouseRelatedTarget mouseScreenX mouseScreenY mouseShiftKey FocusEventfocusRelatedTarget KeyboardEvent keyEvtAltKeykeyEvtCharCode keyEvtCtrlKeykeyGetModifierStatekeyKeykeyCode keyLocale keyLocation keyMetaKey keyRepeat keyShiftKeykeyWhichEventevtType evtBubbles evtCancelableevtCurrentTargetevtDefaultPreventedevtPhase evtIsTrusted evtTarget evtTimestamp evtHandlerArg EventTargetCallbackFunctionelementPropertynestedPropertycallback callbackViewcallbackViewWithProps@=$= classNameseventTargetProptargetonpreventDefaultstopPropagation capturePhase onKeyDown onKeyPressonKeyUponBluronFocusonChangeonInputonSubmitonClick onContextMenu onDoubleClickonDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStartonDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUpinitializeTouchEvents onTouchCancel onTouchEnd onTouchMove onTouchStartonScrollonWheelonLoadonError$fShowTouchEvent$fShowMouseEvent$fShowKeyboardEvent$fNFDataFakeEventStoreAction$fStoreDataFakeEventStoreData$fShowEventTarget$fIsJSValEventTarget$fCallbackFunctionhandler(->)$fCallbackFunction(->)(->)$fCallbackFunction[][]$fFromJSVal(,,,,,,,)$fFromJSVal(,,,,,,)$fFromJSVal(,,,,,)$fFromJSVal(,,,,)$fFromJSVal(,,,)$fFromJSVal(,,)$fFromJSVal(,)$fFromJSValValue$fFromJSValDouble$fFromJSValFloat$fFromJSValWord32$fFromJSValWord16$fFromJSValWord8$fFromJSValWord$fFromJSValInt32$fFromJSValInt16$fFromJSValInt8$fFromJSValInt$fFromJSValBool$fFromJSValChar$fFromJSValText$fFromJSValMaybe $fFromJSVal[] $fFromJSVal() $fShowEvent$fShowFocusEvent $fShowTouch$fShowWheelEventTermterma_abbr_address_area_article_aside_audio_b_base_bdi_bdo_big_ blockquote_body_br_button_canvas_caption_cite_code_col_ colgroup_data_ datalist_dd_del_details_dfn_dialog_div_dl_dt_em_embed_ fieldset_ figcaption_figure_footer_form_h1_h2_h3_h4_h5_h6_head_header_hr_html_i_iframe_img_input_ins_kbd_keygen_label_legend_li_link_main_map_mark_menu_ menuitem_meta_meter_nav_ noscript_object_ol_ optgroup_option_output_p_param_picture_pre_ progress_q_rp_rt_ruby_s_samp_script_section_select_small_source_span_strong_style_sub_summary_sup_table_tbody_td_ textarea_tfoot_th_thead_time_title_tr_track_u_ul_var_video_wbr_circle_ clipPath_defs_ellipse_g_image_line_linearGradient_mask_path_pattern_polygon_ polyline_radialGradient_rect_stop_svg_text_tspan_,$fTermeventHandlerReactElementMReactElementM$fTermeventHandler[](->)cldiv_ clbutton_ labeledInput_faIcon_styleLifecycleViewConfiglRenderlComponentWillMountlComponentDidMountlComponentWillReceivePropslComponentWillUpdatelComponentDidUpdatelComponentWillUnmount LSetStateFnLDOMlThislRefLPropsAndState lGetProps lGetStatelifecycleConfigdefineLifecycleView reactRenderreactRenderToString PerfAction PerfStartPerfStopAndPrint PerfPrintPerfPrintInclusivePerfPrintExclusivePerfPrintWasted PerfPrintDOMcssTransitionGroupperfAperfToggleButton_$fStoreDataPerfStoreData$fNFDataPerfAction$fNFDataPerfPrint$fShowPerfPrint $fEqPerfPrint$fGenericPerfPrint$fShowPerfAction$fEqPerfAction$fGenericPerfAction bootstrap_MessagemsgDescription msgDefaultMsg MessageId TimeFormathourFminuteFsecondF timeZoneNameF DayFormatweekdayFeraFyearFmonthFdayF IntlProperty dayToJSVal timeToJSValipropdayProptimeProp intlProvider_int_double_formattedNumber_formattedNumberProp shortDate shortDateTimeday_utcTime_formattedDate_formattedDateProp relativeTo_formattedRelative_formattedRelativePropplural_ pluralPropmessage messagePropmessage' messageProp'htmlMsghtmlMsg'formattedMessage_formattedHtmlMessage_writeIntlMessagesintlFormatJson intlFormatJsonWithoutDescriptionintlFormatAndroidXML$fShowDayFormat$fShowTimeFormat $fShowMessagedeepseq-1.4.2.0Control.DeepSeqNFDatastoreRef storeData ReactStoreRefbaseGHC.MVarreadMVarMVarIsJSValJSVal$fNFDataSomeStoreAction$fIsJSValReactStoreRefGHC.BaseMonoid Data.String fromStringGHC.ShowshowCallbackToReleaseJSArrayToJSVal FromJSValMaybeNothingghc-prim GHC.TypesIOreturnViewFromArgumentstoKeyRef reactViewpToJSVal$fArgumentsToPropsprops(->)"$fArgumentsToPropspropsReturnProps$fReactViewKeyInt$fReactViewKey[] Data.EitherRightLeftFakeEventStoreActionFakeEventStoreDataon2fakeEventStorePreventDefaultStopPropagationapplyFromArgumentsnullRef parseEventparseKeyboardEventparseFocusEventparseMouseEvent parseTouchparseTouchListparseTouchEventparseWheelEvent js_getPropjs_getArrayProp.:getModifierState arrayLength arrayIndexjs_lookupWindowid HTMLElementperfToggleButton PerfStoreData perfIsActive perfStorejs_perf MessageMap time-1.6.0.1Data.Time.Clock.UTCUTCTime dayFtoProps timeFtoPropsData.Time.Calendar.DaysDaymessageToProps formatMessagejs_intlProviderjs_formatNumber js_formatDatejs_formatRelativejs_formatPlural js_formatMsgjs_formatHtmlMsg formatCtx recordMessageformatMessageProp escapeForXml