Merge pull request #697 from mjblacker/UseElmish-SSG

Fix: Feliz.Elmish SSG

Author: Freymaurer

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

@@ -24,17 +24,14 @@ or
 dotnet femto install Feliz.UseElmish
 ```
 
-:::danger
-Unable to show live example because Feliz.UseElmish does not support Server-Side Rendering (SSR). Help me out by contributing a PR if you need this feature.
-:::
-
 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>
 
 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:
 
@@ -113,12 +110,12 @@ ReactDOM.render(App(), document.getElementById "feliz-app")
 
 Next, let's combine this hook with other React hooks such as `React.useState` and `React.useEffect`:
 
+import ElmishCounterSubscription from '../../feliz-docs/fableoutput/Examples/React/ElmishCounterSubscription'
 import RawElmishCounterSubscription from '!!raw-loader!../../feliz-docs/Examples/React/ElmishCounterSubscription.fs'
 
-<CodeBlock language="fsharp" >
-  {RawElmishCounterSubscription}
-</CodeBlock>
-
+<ComponentRender code={RawElmishCounterSubscription}>
+    <ElmishCounterSubscription />
+</ComponentRender>
 
 ### Disposing of resources
 

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
@@ -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/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 [
 
         ]