The remoteDev NPM package has a security vulnerability, and this tool depends on it.
See also SAFE-Stack/SAFE-template#602

Description

I have a console application. It doesn't use Fable. It doesn't have a UI at all.
I would like to be able to use |> Program.withDebugger or even |> Program.withDebuggerAt (Debugger.Remote("localhost", 8000)) but when I try to start the app, I immediately get an exception on Program.withDebugger:

System.TypeInitializationException
  HResult=0x80131534
  Message=The type initializer for '<StartupCode$Fable-Core>.$Fable.Core.JS' threw an exception.
  Source=Fable.Elmish.Debugger
  StackTrace:
   at Elmish.Debug.Debugger.showError(FSharpList`1 msgs)
   at Program.main(String[] argv) in Program.fs:line 20

Inner Exception 1:
Exception: JS only

Repro code

Brand new F# Console Application (Visual Studio 2019). This is the code in Program.fs:

open Elmish
open Elmish.Debug

type Model = int

type Msg = NoOp

let init _ =
    0, Cmd.none

let update msg model =
    model, Cmd.none

let view _ _ = 
    ignore

[<EntryPoint>]
let main argv =
    do Program.mkProgram init update view
    |> Program.withDebuggerAt (Debugger.Remote("localhost", 8000))
    |> Program.run 
    
    0

Expected and actual results

I expect to be able to use a time travel debugger in a desktop (non fable, non browser) Elmish application. I expect not to get an exception 😅 As stated in the docs: Whether you target browser, native or any other platform, as long as you can connect to a monitor you can start collecting and visualizing the events.

Related information

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>netcoreapp3.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <Compile Include="Program.fs" />
  </ItemGroup>
  <ItemGroup>
    <PackageReference Include="Elmish" Version="3.0.3" />
    <PackageReference Include="Fable.Elmish.Debugger" Version="3.0.2" />
  </ItemGroup>
</Project>

• fable-compiler version: ??
• fable-core version: ??
• Operating system: Windows 10 Pro x64 Version 1809, OS Build 17763.504

Could you please update dependencies to Fable.Core/Fable.PowerPack 2 (prerelease) and release a prerelease version?

Also, inflate/deflate have been deprecated so we need to use Thoth.Json for the serialization (probably with auto decoders to be less invasive) cc @MangelMaxime

A .NET-native implementation of the debugger would be nice (for Xamarin/WPF consumers), maybe @zalmoxisus could offer some pointers for the wire specification?

/cc @Lleutch

When using latest npm to install JS dependencies there's a warning about remote dev that cannot be automatically fixed. See: SAFE-Stack/SAFE-template#113

Unfortunately the issue has been reported a while ago but there's not been a new release in two years: zalmoxisus/remotedev#10

Maybe we need to fork the project and release our own package with updated dependencies. It would be also possible to bundle the JS code and include in the Fable.Elmish.Browser nuget package.

React SPA doesn't redraw the state. The state is passed in by the Chrome extension, but is not rendered. Fails in every app I tried.
Would be great If someone could confirm if that's not my local issue.

Investigating in the meantime...

Description

Some browsers don't support the redux dev tool extensions and so are being flooded by lot of errors.

Would you be ok if we try to capture the error and print the message only once ?

Description

Getting a maximum call stack size exceeded error when triggering a simple message.

Repro code

module App.View

open Elmish
open Fable.Helpers.React
open Fable.Helpers.React.Props
open Fulma
open Fulma.FontAwesome
open Fable.Core
open Fable.Core.JsInterop



type Model =
    { Value : string }

type Msg =
    | MapClick of obj

let init _ = { Value = "" }, Cmd.none

let private update msg model =
    match msg with
    | MapClick latLng ->
        { model with Value = sprintf "%A" latLng }, Cmd.none

let private view model dispatch =
    printfn "view"
    div [] [
        p [] [str model.Value]
        button [OnClick (box >> Msg.MapClick >> dispatch)] [str "click"]
    ]

open Elmish.React
open Elmish.Debug
open Elmish.HMR

Program.mkProgram init update view
#if DEBUG
|> Program.withHMR
#endif
|> Program.withReactUnoptimized "elmish-app"
#if DEBUG
|> Program.withDebugger // Code works when this line is commented.
#endif
|> Program.run

Expected and actual results

When clicking the button, the error is triggered.

Related information

• elmish version: 1.0.3
• fable-compiler version: 1.3.17
• fable-core version: 1.3.17
• Operating system: Windows

Project was create with the Fulma template

Description

At the moment this won't compile with Fable 4 failing with below error

./src/Client/fable-output/fable_modules/Fable.Elmish.Debugger.3.3.0/debugger.fs(127,12): (127,51) error FSHARP: Type mismatch. Expecting a
    'Program<'a,'model,'msg,'view> -> Program<'a,'model,'msg,'view>'    
but given a
    '(('msg -> bool) * ('model -> unit) -> ('msg -> bool) * ('model -> unit)) -> Program<'b,'model,'msg,'c> -> Program<'b,'model,'msg,'c>'    
The type 'Program<'a,'model,'msg,'view>' does not match the type '('msg -> bool) * ('model -> unit) -> ('msg -> bool) * ('model -> unit)' (code 1)
./src/Client/fable-output/fable_modules/Fable.Elmish.Debugger.3.3.0/debugger.fs(127,42): (127,51) error FSHARP: Type mismatch. Expecting a
    '('model -> Sub<'msg>) -> 'model -> Sub<'msg>'    
but given a
    '('model -> Cmd<'msg>) -> 'model -> Cmd<'msg>'    
The type 'SubId * Subscribe<'msg>' does not match the type 'Effect<'msg>' (code 1)

Description

No UI refresh when travel debug / replay is enabled.

Repro code

1. Create a new awesome app using the elmish template as of https://github.com/elmish/templates
2. Install redux devtools extension (firefox in my case)

Expected and actual results

Expected result:
UI refresh.

Actual result:

The counter value should be 0 in this case.

Related information

• elmish version: 4.0.1
• fable-compiler version:4.1.4
• fable-core version: 4.0
• Operating system: Ubuntu 22.04

paket.lock.zip

It seems that the interaction between the components are complicated especially when react and stores are involved. Would it be impossible to provide a way to refresh the ui (functionality) for the debugger?

Description

We use the debugger in the integration-test suite (to test various stuff) and in order to make it work properly we need to shutdown the underlying socket.
To do this we need:

• zalmoxisus/remotedev#17
• Some changes in this Repository to use this new destroy function.

While technically this requires elmish/elmish#162
We have implemented it by "abusing" the init function in the following way: If init is called with a parameter of null we assume this is a program shutdown, which is good enough for our testing scenario.

This issue is a remainder and a starting point for discussion.
Is there interest in bringing these changes to this repository, maybe even depending on my fork of remotedev?

I spoke about this issue in the past here and here

Description

When using elmish/debugger with Redux Devtools, the chart of the State only contains one data point with "error":

Repro code

The Increment/Decrement Elmish demo in conjunction with elmish/debugger reproduces the problem.
A minimal demo can be found here: https://github.com/vlot/fable3-esbuild/blob/main/src/App.fs

Expected and actual results

Expected: The state chart is correctly displayed
Actual: The state chart only contains one data point with "error"

Related information

• elmish version: 3.1.0
• fable-compiler version: 3.4.9
• fable-core version: 3.4.0
• Operating system: Linux

I'm getting many errors recently when Thoth.Json auto serialization is not capable of serializing the model. We should:

• Improve the error message: at first I always think this is a REST issue.
• Allow passing extra coders to the debugger
• Fall graciously
• Use more relaxed serialization?

I'll try to send a PR :)

Description

The allowed version range of Thoth.Json is currently >=3.0.0. Projects using e.g. Thoth.Json 3.4.1 will encounter compiler errors when building a project using the Elmish Debugger with the .NET Core SDK dotnet build command.

Repro code

This repository contains a working repro of the issue. The Fable Compiler appears to work, FSC included in the .NET Core SDK (tested for versions >= 3.0.100 including the newest previews) will fail.

Expected and actual results

Expected:
Dependencies within the version range should not cause failures

Actual:
A dependency within the version range causes a build failure.

Extra:
I assume this is just me, not having the full picture. Paying closer attention to the template projects I saw that Fable projects are virtually never compiled with the .NET Core SDK and always via the Fable Compile using the webpack loader. I just stumbled upon this failure because I didn't use the templates and manually added the project to the .sln which caused it to have a build target. Is this behavior expected for the 'normal' Fable setup?

Related information

• elmish version: 3.0.6
• fable-compiler version: 2.4.7
• fable-core version: 3.1.3
• Operating system: Windows 10 1909

Description

When using the debugger via remotedev, the getActionType is set to None. This will cause that every message in the system is shown as update. The debugger is not really helpful if you can't see the message.

Repro code

Program.mkProgram init update view
      |> Program.withReactBatched domId
      #if DEBUG
      |> Program.withDebuggerAt (Debugger.Remote ("localhost", 8000))
      #endif
      |> Program.runWith flags

Expected and actual results

Expected:
Encoded message (with payload) from the program is shown in Redux-Devtools.

Actual:
string update is shown as message without payload.

Related information

• elmish version: 3.0.6
• elmish-debugger version: 3.0.2
• fable-compiler version: 2.3.18
• fable-core version: 3.0
• Operating system: Windows 10

Description

The extension allows specifying a name. I think it can be very handy to be able to specify name if your app has multiple elmish loops, in particular with Fable.Lit where you have different web components.

Program.withDebuggerName "my-comp"

Description

Recently I try to upgrade my project to fable 3, and I also use pdf.js to load pdf but with Program.withDebugger I got below error:

prelude.fs?2d7c:14 Unable to process the message: UserMsg UserMsg OnExtensionMsg PdfViewerMsg LoadedPdf {Doc = [object Object];
 NumPages = 5} TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at fallbackDeflater (VM24236 Client.fs:151)
    at deflate (VM24236 Client.fs:190)
    at update (VM24630 debugger.fs:51)
    at eval (Util.js?4b41:570)
    at eval (Util.js?4b41:518)
    at mapUpdate (VM24236 Client.fs:60)
    at eval (Util.js?4b41:570)
    at Elmish_Program.eval [as update] (Util.js?4b41:518)
    at dispatch (program.fs?87c9:140)

Expected and actual results

Should behavior like the old version

Related information

• elmish version: 3.0
• fable-compiler version: 2.3.5
• fable-core version: 3.0
• Operating system: windows 10

Description

I have noticed that when replying from redux tools, it sends an array, and elmish debugger doesn't even check what type it is serializing. if target type is a list, instead it gives an empty list.

Repro code

Create a model with a list more than one elements, and console log list length in your view function. Then replay some state from redux tools.

Expected and actual results

Expected : List should be reconstructed
Please provide the expected and actual results.
Actual : We get an empty list

Related information

• fable-compiler version: 2.0.4

[ELMISH DEBUGGER] Cannot generate auto encoder for System.Decimal. Please pass an extra encoder.

I think this error is rooted at:

I've installed the SAFE template, updated it, and managed to get all the package errors out of the way.

#if DEBUG
|> Program.withDebugger
#endif

The debugger is set on as expected. But when I run the program using dotnet run, and enter the http://localhost:8080/ page in the browser, I do not see anything related to debugging on the page itself. The only related to it are the WebSocket connection to 'ws://localhost:8000/socketcluster/' failed: in the Chrome console. What should I do about that?

They go away if I comment out the code fragment I posted, but I'd like to learn how to use the debugger.

Description

I have not quite debugged our issue but I feel like the upgrade to fable 2 broke the debugger for us

Repro code

This is a bit hard because basically what we do is embed TypeScript "elmish" components (basically update/view/init written in typescript) into our fable emlish application. This worked fine.

The problem I see is this:

The parameter seems to originate from the following Typescript definition:

type Msg =
    { type: "LanguageMapping", translations: object } |
    { type: "GetInstanceName", name: string | undefined } |
    { type: "TestConnectionAvailable" } |
    { type: "ConnectionAvailable", available: boolean } |
    ... several other cases left out ...;

Expected and actual results

Expected: Debugger can work with non-F# objects
Actual: Debugger fails

Related information

• elmish version: Fable.Elmish (2.0.3)
• fable-compiler version: "fable-compiler": { "version": "2.1.10",
• fable-core version: Fable.Core (2.0.3)
• Operating system: Win 7 (I know but I'm pretty sure it is not related to the OS)

Is there a way to influence how messages / models are printed?

At the moment, all the information is there, but you need to click down a lot until you see anything usefull:

Description

I have the following code

let viewTime (timer : int array) =
    timer.[0..2] 
        |> Array.map (fun s -> s.ToString("00")) 
        |> String.concat ":"

This seems to work fine, but with redux replay I get the following error:

timer.slice is not a function

• fable-compiler version: 2.0.6

Description

I'm trying to use this with React Native and it's failing with connection timeout.

"TimeoutError: Event response for 'login' timed out
    at SCSocket._handleEventAckTimeout (blob:http://localhost:8081/26f10f58-4ab3-4aa1-8116-d08fdb9bae27:84260:19)
    at blob:http://localhost:8081/26f10f58-4ab3-4aa1-8116-d08fdb9bae27:84286:12
    at blob:http://localhost:8081/26f10f58-4ab3-4aa1-8116-d08fdb9bae27:23291:21
    at _callTimer (blob:http://localhost:8081/26f10f58-4ab3-4aa1-8116-d08fdb9bae27:23208:9)
    at Object.callTimers (blob:http://localhost:8081/26f10f58-4ab3-4aa1-8116-d08fdb9bae27:23415:9)
    at MessageQueue.__callFunction (blob:http://localhost:8081/26f10f58-4ab3-4aa1-8116-d08fdb9bae27:10183:44)
    at blob:http://localhost:8081/26f10f58-4ab3-4aa1-8116-d08fdb9bae27:9953:17
    at MessageQueue.__guardSafe (blob:http://localhost:8081/26f10f58-4ab3-4aa1-8116-d08fdb9bae27:10145:11)
    at MessageQueue.callFunctionReturnFlushedQueue (blob:http://localhost:8081/26f10f58-4ab3-4aa1-8116-d08fdb9bae27:9952:14)
    at http://localhost:8081/debugger-ui/debuggerWorker.js:72:58"

Repro code

Here's what I'm using to set it up:

Program.mkProgram App.init App.update App.view
|> Program.withSubscription subscribe
#if RELEASE
#else
|> Program.withDebuggerAt (Debugger.Remote("localhost", 8081))
|> Program.withConsoleTrace
|> Program.withHMR
#endif
|> Program.withReactNative "demoApp"
|> Program.run

Expected and actual results

Please provide the expected and actual results.

Related information

• elmish version: 1.0.3
• fable-compiler version: 1.3.17
• fable-core version: 1.3.17
• Operating system: Windows 10

Description

v3.0.0 version is commited in repo, but missing in nuget.
Could you please publish it to nuget ?

Expected and actual results

See v3.0.0 on https://www.nuget.org/packages/fable.elmish.debugger

Currently latest stable is 2.0.3