_      !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~      !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^ None034579;>CLN None034579;>CLN ]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.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 component 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 :: String , todoComplete :: Bool , todoIsEditing :: Bool } deriving (Show, Typeable) newtype TodoState = TodoState { todoList :: [(Int, Todo)] } deriving (Show, Typeable) data TodoAction = TodoCreate String | TodoDelete Int | TodoEdit Int | UpdateText Int String | 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.aAn 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.bOThis 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 c. The d 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 dC waiting for a previous transform to complete if one is in process. Call  on the store and action.e`abfg he`abf  e`abfg hNone034579;>CLN A writer monad for  7s which is used in the rendering function of all views.do notation or the i 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./Keys in React can either be strings or integers&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.%>The first parameter of an event handler registered with React.'%This type is for the return value of React.createElement*%This type is for the return value of React.createClass- Create a   containing a given  ..;Create a text element from a string. This is an alias for j_. 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./9Create an element containing text which is the result of kRing the argument. Note that the resulting string is then escaped to be HTML safe.0Create a React element.1$Transclude the children passed into   or  < into the current rendering. Use this where you would use this.props.children in a javascript React class.3Execute 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.4  !"#$%&'()*+,lm-./0(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).123this.props.childrennopqrstu*  !"#$%&'()*+,-./0123**+,'()%&" !#$  ./01-32  " !#$%&'()*+,lm-./0123nopqrstu None034579;>CLN 4A 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.5rEvent handlers in a controller-view and a view transform events into actions, but are not allowed to perform any v.61A 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.7.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_ todoState8MA 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 6P provides more than just a Haskell function when used with a key property with ;`. 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_ [ "className" @= (unwords $ [ "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 = viewWithKey todoItem (fst todo) todo mempty9A 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.htmlinteactivity 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. _data TextInputArgs = TextInputArgs { tiaId :: Maybe String , tiaClass :: String , tiaPlaceholder :: String , tiaOnSave :: String -> [SomeStoreAction] , tiaValue :: Maybe String } 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 (null curState) then (tiaOnSave args curState, Just "") else ([], Nothing) , onKeyDown $ \_ evt curState -> if keyCode evt == 13 && not (null curState) -- 13 is enter then (tiaOnSave args curState, Just "") else ([], Nothing) ] todoTextInput_ :: TextInputArgs -> ReactElementM eventHandler () todoTextInput_ args = view todoTextInput args mempty:Create an element from a view. I suggest you make a combinator for each of your views, similar to the examples above such as  todoItem_.;oCreate an element from a view, and also pass in a 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.< Create a  L for a class defined in javascript. For example, if you would like to use  )https://github.com/JedWatson/react-select react-select, you could do so as follows: {foreign import javascript unsafe "window['Select']" js_ReactSelectClass :: JSRef () reactSelect_ :: [PropertyOrHandler eventHandler] -> ReactElementM eventHandler () reactSelect_ props = foreignClass js_ReactSelectClass props mempty onSelectChange :: FromJSON a => (a -> handler) -- ^ receives the new value and performs an action. -> PropertyOrHandler handler onSelectChange f = callback "onChange" (f . parse) where parse v = case fromJSON v of Error err -> error $ "Unable to parse new value for select onChange: " ++ err Success e -> e@This could then be used as part of a rendering function like so:  reactSelect_ [ "name" $= "form-field-name" , "value" $= "one" , "options" @= [ object [ "value" .= "one", "label" .= "One" ] , object [ "value" .= "two", "label" .= "Two" ] ] , onSelectChange dispatchSomething ] 456wxy7=A name for this view, used only for debugging/console logging0The store this controller view should attach to.The rendering function8=A name for this view, used only for debugging/console loggingThe rendering function9=A name for this view, used only for debugging/console loggingThe initial stateThe rendering function:the view5the properties to pass into the instance of this viewThe children of the element;the view2A value unique within the siblings of this element+The properties to pass to the view instanceThe children of the view<%The javascript reference to the classHproperties and handlers to pass when creating an instance of this class.The child element or elements 456wxy789:;< 456wxy789:;<None034579;>CLNj The data for the keyboard eventszThe actions for the fake store{In 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.x[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/targetCreate a property.kCreate a text-valued property. This is here to avoid problems when OverloadedStrings extension is enabledCreate 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.$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.|;Create an event handler from a name and a handler function.hThis can also be used to pass in arbitrary callbacks to foreign javascript React classes. Indeed, what |R does is create a callback and then add a property with key the string passed to | and value the callback.}KConstruct a handler from a detail parser, used by the various events below.~The 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.html=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwz{xyz{|}~|}The event name6A function parsing the details for the specific event.&The function implementing the handler.~u=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~uxyz{|}~jklmnopqrstuvwghiWXYZ[\]^_`abcdefMNOPQRSTUVCDEFGHIJKL=>?@ABQ=>?@ABC DEFGHIJKLM NOPQRSTUVWXYZ[\]^_`abcdefghij klmnopqrstuvwz{x yz{|}~|}~None034579;>CLNzThis class allows the DOM combinators to optionally take a list of properties or handlers, or for the list to be omitted.      !"#$%&'()*+,-./0123456      !"#$%&'()*+,-./0123465      !"#$%&'()*+,-./01234      !"#$%&'()*+,-./0123456None034579;>CLN 7The 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 E.>cReceives the old props and state as arguments. The current props and state can be accessed using E@Set the state of the class.AHObtain the browser DOM element for either the component as a whole with C$ or for various nodes with a given  :https://facebook.github.io/react/docs/more-about-refs.htmlref property with D.E3Actions to access the current properties and state.IA default configuration, which does not specify any lifecycle events. You should start with this and override the functions you need.J5Create a lifecycle view from the given configuration. myView :: ReactView String myVew = defineLifecycleView "my view" (10 :: Int) lifecycleConfig { lRender = \state props -> ... , lComponentWillMount = \propsAndState setStateFn -> ... }789:;<=>?@ABCDEFGHIJ789:;<=>?@ABCDEFGHIJJI789:;<=>?EFGHABCD@789:;<=>?@ABCDEFGHIJNone034579;>CLNK+Render your React application into the DOM.KVThe 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 view ./1456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~      !"#$%&'()*+,-./01234K 678954 ./:;1<KKNone034579;>CLNLGAn action to start or stop performance measurement. For details, see  /https://facebook.github.io/react/docs/perf.html.O<What to print after stopping performance measurement. See  /https://facebook.github.io/react/docs/perf.html for documentation.T,The properties for the CSS Transition Group.Z]Default properties for CSS Transition Group, using "react-transition" as the transition name.[The  4https://facebook.github.io/react/docs/animation.htmlReactCSSTransitionGroup@ element. At the moment, only the high-level API is supported.\SConvert a performance action into a store action. Use this if you are not using ]."The performance toggle button view]A 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.LMNOPQRSTUVWXYZ[\]LMNOPQRSTUVWXYZ[\][TUVWXYZLMNOPQRS]\LMNOPQRSTUVWXYZ[\]None034579;>CLN^ A bootstrap  0http://react-bootstrap.github.io/components.html component. For example, *bootstrap_ "Alert" [ "bsStyle" $= "danger"f, callback "onDismiss" (const $ dispatch CloseAlert) ] $ > p_ "Hello, World!"^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.^^^           !"#$%&'()*+,-./0011233456789:; < = > ? @ A BCCDEFGHHIJKLMNOPQQRSTUVWXYZZ[\]^_`abcdefghiijkklmnopqrstuvwxxyz{|}~      !"#$%&'()*+,-./01234556789:;<=>>?@AABCDEFGHIJKLMNOOPQRSTUVWXYZ[ \ ] ^_`a_`b  ^ c d_ef_gh_ijcklmnopqrstuv > w cxyz{|}~ycreact_LQLUC9kS47oJGTaSN1s6VS React.FluxReact.Flux.InternalReact.Flux.PropertiesAndEventsReact.Flux.DOMReact.Flux.LifecycleReact.Flux.Addons.ReactReact.Flux.Addons.BootstrapReact.Flux.ExportReact.Flux.Storeview viewWithKeyReact.Flux.ViewsSomeStoreAction StoreData StoreAction transform ReactStore getStoreDatamkStore alterStore executeAction ReactElementMrunReactElementM ReactElementForeignElementfNamefPropsfChild ViewElementceClassceKeycePropsceChildChildrenPassedToViewContentAppend EmptyElement ReactViewKeytoKeyRefPropertyOrHandlerProperty EventHandlerevtHandlerName evtHandlerCallbackProperty callbackName callbackFn HandlerArgReactElementRefreactElementRef ReactViewRef reactViewRef elementToMelemTextelemShowelchildrenPassedToView toJSStringmkReactElementStatefulViewEventHandlerViewEventHandler ReactViewdefineControllerView defineViewdefineStatefulView foreignClass 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 EventTarget@=$=callbackeventTargetProptargetpreventDefaultstopPropagation capturePhase onKeyDown onKeyPressonKeyUponBluronFocusonChangeonInputonSubmitonClick onContextMenu onDoubleClickonDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStartonDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUpinitializeTouchEvents onTouchCancel onTouchEnd onTouchMove onTouchStartonScrollonWheelonLoadonErrorTermterma_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_line_linearGradient_mask_path_pattern_polygon_ polyline_radialGradient_rect_stop_svg_text_tspan_,$fTermeventHandlerReactElementMReactElementM$fTermeventHandler[](->)LifecycleViewConfiglRenderlComponentWillMountlComponentDidMountlComponentWillReceivePropslComponentWillUpdatelComponentDidUpdatelComponentWillUnmount LSetStateFnLDOMlThislRefLPropsAndState lGetProps lGetStatelifecycleConfigdefineLifecycleView reactRender PerfAction PerfStartPerfStopAndPrint PerfPrintPerfPrintInclusivePerfPrintExclusivePerfPrintWasted PerfPrintDOMCSSTransitionPropstransitionNametransitionAppeartransitionEntertransitionLeavedefaultTransitionPropscssTransitionGroupperfAperfToggleButton_ bootstrap_deeps_LbCWUlehDDeLxurARKDH5oControl.DeepSeqNFDatastoreRef storeData ReactStoreRefbaseGHC.MVarreadMVarMVarJSRef$fNFDataSomeStoreActionGHC.BaseMonoid Data.String fromStringGHC.ShowshowCallback$fIsStringReactElementM$fMonoidReactElementM$fFunctorReactElement$fMonoidReactElement$fReactViewKeyInt$fReactViewKey[]$fFunctorPropertyOrHandler$fShowHandlerArgghc-prim GHC.TypesIO reactViewFakeEventStoreActionFakeEventStoreDataon mkHandlerfakeEventStorePreventDefaultStopPropagation FromJSRefJSArrayJSStringnullRef parseEventparseKeyboardEventparseFocusEventparseMouseEvent parseTouchparseTouchListparseTouchEventparseWheelEvent js_getPropjs_getArrayProp.:getModifierState arrayLength arrayIndex$fShowTouchEvent$fShowMouseEvent$fShowKeyboardEvent$fNFDataFakeEventStoreAction$fStoreDataFakeEventStoreData$fShowEventTarget HTMLElementperfToggleButton PerfStoreData perfIsActive perfStorejs_perf$fStoreDataPerfStoreData$fNFDataPerfAction$fNFDataPerfPrint