Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ jobs:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v4
- name: Setup .NET
uses: actions/setup-dotnet@v1
uses: actions/setup-dotnet@v4
with:
dotnet-version: 6.0.x
dotnet-version: '9.0.x'
- name: Build
run: ./build.fsx
3 changes: 0 additions & 3 deletions appveyor.yml
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
image: Visual Studio 2022

install:
- ps: Install-Product node 17 x64

build_script:
- cmd: dotnet fsi build.fsx

Expand Down
2 changes: 1 addition & 1 deletion build.fsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
#r "nuget: Fake.Core.Target"
#r "nuget: Fake.Core.ReleaseNotes"
#r "nuget: Fake.Tools.Git"

#r "nuget: MSBuild.StructuredLogger, 2.2.441"

open Fake.Core
open Fake.Core.TargetOperators
Expand Down
2 changes: 1 addition & 1 deletion global.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"sdk": {
"version": "6.0.100",
"version": "9.0.100",
"rollForward": "latestMinor"
}
}
74 changes: 22 additions & 52 deletions src/react.fs
Original file line number Diff line number Diff line change
Expand Up @@ -19,76 +19,46 @@ module Program =
open Browser
open Elmish

// Use the new rendering API in React 18+
let useRootApi = try int ReactBindings.React.version.[ .. 1 ] >= 18 with _ -> false

let withReactBatchedUsing lazyView2With placeholderId (program:Program<_,_,_,_>) =
let setState =
let mutable lastRequest = None
let root = ReactDomClient.createRoot (document.getElementById placeholderId)

if useRootApi then
let root = ReactDomClient.createRoot (document.getElementById placeholderId)

fun model dispatch ->
match lastRequest with
| Some r -> window.cancelAnimationFrame r
| _ -> ()

lastRequest <- Some (window.requestAnimationFrame (fun _ ->
root.render (lazyView2With (fun x y -> obj.ReferenceEquals(x,y)) (Program.view program) model dispatch)))
else
fun model dispatch ->
match lastRequest with
| Some r -> window.cancelAnimationFrame r
| _ -> ()
fun model dispatch ->
match lastRequest with
| Some r -> window.cancelAnimationFrame r
| _ -> ()

lastRequest <- Some (window.requestAnimationFrame (fun _ ->
ReactDom.render(
lazyView2With (fun x y -> obj.ReferenceEquals(x,y)) (Program.view program) model dispatch,
document.getElementById placeholderId
)))
lastRequest <- Some (window.requestAnimationFrame (fun _ ->
root.render (lazyView2With (fun x y -> obj.ReferenceEquals(x,y)) (Program.view program) model dispatch)))

program
|> Program.withSetState setState

let withReactSynchronousUsing lazyView2With placeholderId (program:Elmish.Program<_,_,_,_>) =
let setState =
if useRootApi then
let root = ReactDomClient.createRoot (document.getElementById placeholderId)
let root = ReactDomClient.createRoot (document.getElementById placeholderId)

fun model dispatch ->
root.render (lazyView2With (fun x y -> obj.ReferenceEquals(x,y)) (Program.view program) model dispatch)
else
fun model dispatch ->
ReactDom.render(
lazyView2With (fun x y -> obj.ReferenceEquals(x,y)) (Program.view program) model dispatch,
document.getElementById placeholderId
)
fun model dispatch ->
root.render (lazyView2With (fun x y -> obj.ReferenceEquals(x,y)) (Program.view program) model dispatch)

program
|> Program.withSetState setState

let withReactHydrateUsing lazyView2With placeholderId (program:Elmish.Program<_,_,_,_>) =
let setState =
if useRootApi then
let mutable root = None

fun model dispatch ->
match root with
| None ->
root <-
ReactDomClient.hydrateRoot (
document.getElementById placeholderId,
lazyView2With (fun x y -> obj.ReferenceEquals(x,y)) (Program.view program) model dispatch
) |> Some
| Some root ->
root.render (lazyView2With (fun x y -> obj.ReferenceEquals(x,y)) (Program.view program) model dispatch)
else
fun model dispatch ->
ReactDom.hydrate(
lazyView2With (fun x y -> obj.ReferenceEquals(x,y)) (Program.view program) model dispatch,
document.getElementById placeholderId
)
let mutable root = None

fun model dispatch ->
match root with
| None ->
root <-
ReactDomClient.hydrateRoot (
document.getElementById placeholderId,
lazyView2With (fun x y -> obj.ReferenceEquals(x,y)) (Program.view program) model dispatch
) |> Some
| Some root ->
root.render (lazyView2With (fun x y -> obj.ReferenceEquals(x,y)) (Program.view program) model dispatch)

program
|> Program.withSetState setState
Expand Down