Fix: Feliz.Elmish SSG

docs/docs/ecosystem/04_Hooks/Feliz.UseElmish.mdx

@@ -7,6 +7,7 @@ sidebar_position: 9
 
 import ComponentRender from '@site/src/components/ComponentRender';
 import CodeBlock from '@theme/CodeBlock';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 Besides being able to use Feliz in existing Elmish applications, you can also use Elmish as _part_ of your Feliz application. This is a different approach to building standalone React components that use Elmish internally to manage the state of the component but from the perspective of the consumer, it is just another React component.
 
@@ -30,11 +31,18 @@ Unable to show live example because Feliz.UseElmish does not support Server-Side
 
 Here is an example to demonstrate how to build such component:
 
+import ElmishCounter from '../../feliz-docs/fableoutput/Examples/React/ElmishCounter'
 import RawElmishCounter from '!!raw-loader!../../feliz-docs/Examples/React/ElmishCounter.fs'
 
-<CodeBlock language="fsharp" showLineNumbers>
-{RawElmishCounter}
-</CodeBlock>
+<ComponentRender code={RawElmishCounter}><ElmishCounter /></ComponentRender>
+
+
+<BrowserOnly fallback={<div>Loading in browser...</div>} >
+    {() => 
+    <ComponentRender code={RawElmishCounter}><ElmishCounter /></ComponentRender>
+    }
+</BrowserOnly>
+
 
 The difference here from a full-fledged Elmish applications is that there isn't an "Elmish entry point" to run the component and manage its life-cycle. Instead, the `React.useElmish` hooks manages the Elmish life-cycle internally within the React component so that it can run standalone inside other React components:
 

src/Feliz.UseElmish/Feliz.UseElmish.fsproj

@@ -16,4 +16,7 @@
     <ItemGroup>
         <PackageReference Include="Fable.Elmish"/>
     </ItemGroup>
+    <ItemGroup>
+        <ProjectReference Include="..\Feliz\Feliz.fsproj" />
+    </ItemGroup>
 </Project>

src/Feliz.UseElmish/UseElmish.fs

@@ -1,19 +1,10 @@
 module Feliz.UseElmish
 
+open System
 open Fable.Core
 open Elmish
 
 module private Util =
-    type UseSyncExternalStoreSubscribe = delegate of (unit -> unit) -> (unit -> unit)
-
-    [<ImportMember("react")>]
-    let useSyncExternalStore(subscribe: UseSyncExternalStoreSubscribe, getSnapshot: unit -> 'Model, getServerSnapshot: (unit -> 'Model) option): 'Model = jsNative
-
-    [<ImportMember("react")>]
-    let useState(init: unit -> 'State): 'State * ('State -> unit) = jsNative
-
-    [<ImportMember "react">]
-    let useEffect(effect: unit -> unit, dependencies: obj array) : unit = jsNative
 
     [<Emit "setTimeout($0)">]
     let setTimeout(callback: unit -> unit) : unit = jsNative
@@ -47,7 +38,7 @@ module private Util =
             let subscribed = false
             (model, initialDispatch, subscribed, queuedMessages), cmd
 
-        let subscribe = UseSyncExternalStoreSubscribe(fun callback ->
+        let subscribe = FsReact.createSyncExternalStoreSubscribe(fun callback ->
             // printfn "Subscribing %O..." guid
             let mutable dispose = false
             // needsDispose is used to determine whether the model inside state needs to be disposed of when the subscription is terminated.
@@ -105,21 +96,22 @@ module private Util =
         member _.IsOutdated(arg', dependencies') = arg <> arg' || dependencies <> dependencies'
 
 open Util
+open Feliz
 
 [<Erase>]
 type React =
     static member useElmish(program: unit -> Program<'Arg, 'Model, 'Msg, unit>, arg: 'Arg, ?dependencies: obj array): 'Model * ('Msg -> unit) =
-        let state, setState = useState(fun () -> ElmishState(program, arg, dependencies))
+        let state, setState = React.useState(fun () -> ElmishState(program, arg, dependencies))
         if state.IsOutdated(arg, dependencies) then
             ElmishState(program, arg, dependencies) |> setState
-        let finalState, dispatch, subscribed, queuedMessages = useSyncExternalStore(state.Subscribe, (fun () -> state.State), None)
+        let finalState, dispatch, subscribed, queuedMessages = React.useSyncExternalStore(state.Subscribe, UseSyncExternalStoreSnapshot(fun () -> state.State), UseSyncExternalStoreSnapshot(fun () -> state.State))
         // Run any queued messages that were dispatched before the Elmish program finished subscribing
-        useEffect((fun () ->
+        React.useEffect((fun () ->
             if subscribed && queuedMessages.Count > 0 then
                 for msg in queuedMessages do
                     setTimeout(fun () -> dispatch msg)
                 queuedMessages.Clear()
-        ), [| subscribed; queuedMessages |])
+        ), [| box subscribed; box queuedMessages |])
         finalState, dispatch
 
     static member inline useElmish(program: unit -> Program<unit, 'Model, 'Msg, unit>, ?dependencies: obj array) =

src/Feliz/React/FsReact.fs

@@ -59,3 +59,6 @@ type FsReact =
                 )
         )
         token
+
+    static member inline createSyncExternalStoreSubscribe(subscribe: (unit -> unit) -> (unit -> unit)) : UseSyncExternalStoreSubscribe =
+        UseSyncExternalStoreSubscribe(subscribe)

src/Feliz/React/React.fs

@@ -636,25 +636,25 @@ useLayoutEffect(() => {
     /// <param name='getSnapshot'>A function that returns the current value of the external data source.</param>
     /// <returns>The current value from the external data source.</returns>
     [<ImportMember("react")>]
-    static member inline useSyncExternalStore(subscribe: Func<(unit -> unit),(unit -> unit)> , getSnapshot: unit -> 'T, ?getServerSnapshot: unit -> 'T): 'T = jsNative
+    static member inline useSyncExternalStore(subscribe: UseSyncExternalStoreSubscribe, getSnapshot: UseSyncExternalStoreSnapshot<'T>, ?getServerSnapshot: UseSyncExternalStoreSnapshot<'T>): 'T = jsNative
 
     /// <summary>
     /// Subscribes to a data source, and returns the current value from it.
     /// </summary>
     /// <param name='subscribe'>A function that sets up a subscription to the external data source. It receives a callback to be called when the data source changes.</param>
     /// <param name='getSnapshot'>A function that returns the current value of the external data source.</param>
     /// <returns>The current value from the external data source.</returns>
-    static member inline useSyncExternalStore(subscribe: (unit -> unit) -> (unit -> unit), getSnapshot: unit -> 'T, ?getServerSnapshot: unit -> 'T): 'T =
-        React.useSyncExternalStore( Func<_,_> subscribe, getSnapshot, ?getServerSnapshot = getServerSnapshot)
+    static member inline useSyncExternalStore(subscribe: (unit -> unit) -> (unit -> unit), getSnapshot: UseSyncExternalStoreSnapshot<'T>, ?getServerSnapshot: UseSyncExternalStoreSnapshot<'T>): 'T = 
+        React.useSyncExternalStore( UseSyncExternalStoreSubscribe subscribe, getSnapshot, ?getServerSnapshot = getServerSnapshot)
 
     /// <summary>
     /// Subscribes to a data source, and returns the current value from it.
     /// </summary>
     /// <param name='subscribe'>A function that sets up a subscription to the external data source. It receives a callback to be called when the data source changes.</param>
     /// <param name='getSnapshot'>A function that returns the current value of the external data source.</param>
     /// <returns>The current value from the external data source.</returns>
-    static member inline useSyncExternalStore(subscribe: (unit -> unit) -> #IDisposable, getSnapshot: unit -> 'T, ?getServerSnapshot: unit -> 'T): 'T =
-        React.useSyncExternalStore( Func<_,_> 
+    static member inline useSyncExternalStore(subscribe: (unit -> unit) -> #IDisposable, getSnapshot: UseSyncExternalStoreSnapshot<'T>, ?getServerSnapshot: UseSyncExternalStoreSnapshot<'T>): 'T =
+        React.useSyncExternalStore( UseSyncExternalStoreSubscribe
             (fun (callback) ->
                 let disp = subscribe(callback)
                 fun () -> disp.Dispose()

src/Feliz/React/ReactTypes.fs

@@ -42,6 +42,9 @@ module ReactTypes =
 
     type ReactNode = U6<ReactElement, seq<ReactElement>, string, float, int, bool>
 
+    type UseSyncExternalStoreSubscribe = delegate of (unit -> unit) -> (unit -> unit)
+    type UseSyncExternalStoreSnapshot<'T> = delegate of unit -> 'T
+
     [<Erase>]
     type IReactRoot =
         /// Renders the provided React element into the DOM in the supplied container.

tests/Feliz/ReactBindings/UseSyncExternalStore.test.fs

@@ -35,7 +35,6 @@ type Components =
             snapshot
         )
 
-
         Html.div [
 
         ]