HMR breaks the whole app after dispatching any message

Zaid-Ajaj commented 5 years ago

Description

On the initial load, HMR works properly and I am able to make changes on the fly:

hmr-working

but after dispatching any message, the whole dispatch loop is frozen and the application stops working

hmr-not-working

Repro code

To reproduce the bug, I made a repo elmish-hmr-bug, follow the steps:

git clone https://github.com/Zaid-Ajaj/elmish-hmr-bug.git
cd elmish-hmr-bug
npm install
npm start
navigate to localhost:8080
Verify that HMR works at first before dispatching any message
Dispatch a message using the "+" or "-" buttons
Make changes to source code
Verify that nothing changes and that you cannot dispatch any more messages

Expected and actual results

Expected HMR to work after dispatching a message.

Related information

  <ItemGroup>
    <PackageReference Include="Fable.Elmish.HMR" Version="4.0.0" />
    <PackageReference Include="Fable.Elmish.React" Version="3.0.1" />
  </ItemGroup>

elmish version: 3.0 stable
fable-compiler version: 2.3.0
fable-core version: 3.0 stable
Operating system: Windows 10

MangelMaxime commented 5 years ago

Hum so the problem is that when triggering HMR, the view rendered/accessible is the old one.

So when you click you are clicking in the old program instance which is marked as Inactive. I need to understand why the view from the new program instance is not rendered to take precedence over the old view.

MangelMaxime commented 5 years ago

It should be fixed in Elmish.HMR 4.0.1

The problem was because we had open Elmish.React at the top of the file. Then when shadowing Elmish.React API we were using the LazyView from Elmish.React instead of the one from Elmish.HMR which knows when to force a rendering. :)

Zaid-Ajaj commented 5 years ago

You are awesome @MangelMaxime I just tested it and works really nice! thanks a lot

elmish / hmr