From 574cb3561c4730e8122e3ec95a60dbd345e4e3af Mon Sep 17 00:00:00 2001 From: Alfonso Garcia-Caro Date: Tue, 11 Dec 2018 11:56:27 +0100 Subject: [PATCH] Better semantic for names --- src/react.fs | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/react.fs b/src/react.fs index 8bdf6cd..44d37a2 100644 --- a/src/react.fs +++ b/src/react.fs @@ -17,7 +17,7 @@ module Program = open Fable.Import.Browser - let withReactUsing lazyView2With placeholderId (program:Elmish.Program<_,_,_,_>) = + let withReactBatchedUsing lazyView2With placeholderId (program:Elmish.Program<_,_,_,_>) = let mutable lastRequest = None let setState model dispatch = match lastRequest with @@ -32,7 +32,7 @@ module Program = { program with setState = setState } - let withReactUnoptimizedUsing lazyView2With placeholderId (program:Elmish.Program<_,_,_,_>) = + let withReactSynchronousUsing lazyView2With placeholderId (program:Elmish.Program<_,_,_,_>) = let setState model dispatch = Fable.Import.ReactDom.render( lazyView2With (fun x y -> obj.ReferenceEquals(x,y)) program.view model dispatch, @@ -50,15 +50,25 @@ module Program = { program with setState = setState } - /// Setup rendering of root React component inside html element identified by placeholderId + /// Renders React root component inside html element identified by placeholderId. + /// Uses `requestAnimationFrame` to batch updates to prevent drops in frame rate. + /// NOTE: This may have unexpected effects in React controlled inputs, see https://github.com/elmish/react/issues/12 + let withReactBatched placeholderId (program:Elmish.Program<_,_,_,_>) = + Internal.withReactBatchedUsing lazyView2With placeholderId program + + /// Renders React root component inside html element identified by placeholderId. + /// New renders are triggered immediately after an update. + let withReactSynchronous placeholderId (program:Elmish.Program<_,_,_,_>) = + Internal.withReactSynchronousUsing lazyView2With placeholderId program + + [] let withReact placeholderId (program:Elmish.Program<_,_,_,_>) = - Internal.withReactUsing lazyView2With placeholderId program + Internal.withReactBatchedUsing lazyView2With placeholderId program - /// `withReact` uses `requestAnimationFrame` to optimize rendering in scenarios with updates at a higher rate than 60FPS, but this makes the cursor jump to the end in `input` elements. - /// This function works around the glitch if you don't need the optimization (see https://github.com/elmish/react/issues/12). + [] let withReactUnoptimized placeholderId (program:Elmish.Program<_,_,_,_>) = - Internal.withReactUnoptimizedUsing lazyView2With placeholderId program + Internal.withReactSynchronousUsing lazyView2With placeholderId program - /// Setup rendering of root React component inside html element identified by placeholderId using React.hydrate + /// Renders React root component inside html element identified by placeholderId using `React.hydrate`. let withReactHydrate placeholderId (program:Elmish.Program<_,_,_,_>) = Internal.withReactHydrateUsing lazyView2With placeholderId program