Giter Club home page Giter Club logo

elmish.hotreload.bolero's Introduction

Elmish.HotReload.Bolero

Elmish.HotReload.Bolero is a package that enables (experimental) stateful hot-reloading of the Elmish pipeline for Bolero. The "stateful" part of the reloading means that your model is preserved between reloads and the screen is automatically refreshed.

This library is brand new, please open issues for any problems you encounter or suggestions you may have.

Enable HotReload

Enabling Bolero Reload comes in 2 parts. Elmish.HotReload relies on the Elmish model and message types to be obj in order to hot-swap them individually at runtime.

  1. Use a compiler directive to indicate a ProgramComponent<obj, obj>() will be used during debug, but a properly typed ProgramComponent will be used in Release.
  2. Use Program.withHotReload to erase the Program component and indicate where your view and update functions live.
type MyApp () =
#if !DEBUG
    inherit ProgramComponent<Model, Message> ()
#else
    inherit ProgramComponent<obj, obj>()
#endif

    override this.Program =
        Program.mkProgram (fun _ -> initModel, Cmd.none) update view
            |> Program.withErrorHandler (fun (msg, exn) -> printfn "Error: %s\n\n%A" msg exn)
#if DEBUG
            |> Program.withHotReload (None) <@ view @> <@ update @>
#endif

Run with HotReloading

  1. Install the bolero-live tool with the following command dotnet install -g bolero-live
  2. Run bolero-live from your Bolero project directory.

How does this work?

File watch and compilation

FCSWatch takes care of watching your project and compiling it when updates occur. FCS watch also exposes a WebHook to indicate when an update has occured. This webhook is received by the Bolero CLI tool which then reads the updated assemblies and updates the Bolero Web Server as well as all running clients.

Client Updates

The Bolero CLI Tool exposes a small webserver (to listen for the FCSWatch hook) and a SignalR Hub. The SignalR Hub is used for client communication. When your Bolero app starts up, Elmish.HotReload.Bolero registers the client with the SignalR Hub. After the CLI tool receives an update from FCSWatch the assemblies are streamed down to the client and the pipeline is reloaded.

Maintaining the model

Elmish.HotReload also contains some logic for magically mapping from a previous type of model, to a newly updated model. Currently the support is mainly aimed at models with the same shape can be mapped to themselves (an unfortunate artifact of reloading requires this). Some other model changes are supported, with deeper, more robust support to follow.

Known Issues

  1. Refreshing the page will only yield the latest updates if running in Debug mode.

    This is because FCSWatch does not currently update the distribution dll locations for Blazor and the bolero hotreload cli tool takes care of updated the default directory only.

  2. Some model and message type changes fail at runtime.

    In order to do stateful hot-reloading, Elmish.HotReload must infer how to fill in a new model shape from the old model shape, effort on this will continue, however not all use-cases may be captured at this time. To work around this issue, simple refresh your browser window.

elmish.hotreload.bolero's People

Contributors

tylerhartwig avatar

Stargazers

Andrii Chebukin avatar Andre Bossard avatar Joe Miyamoto avatar Sebastian Probst Eide avatar Brad Pillow avatar Steve Goguen avatar binwen avatar Dejan Milicic avatar Scott Hutchinson avatar Ryan Riley avatar Loïc Denuzière avatar Adam Granicz avatar Nat Elkins avatar Nino Floris avatar

Watchers

Chet Husk avatar Adam Granicz avatar  avatar  avatar

elmish.hotreload.bolero's Issues

Transitive dependency error when referencing 0.1.3 via PackageReference

I'm trying to get hot reload setup with my Bolero project. However, when I add the reference to my fsproj

<PackageReference Include="Elmish.HotReload.Bolero" Version="0.1.3" />

Then the build/restore throws the error

error NU1101: Unable to find package BlazorSignalR.JS

A few things I've tried

  • using the preview version
    • restores properly, but then Program.withHotReload requires undocumented parameters
  • Checking to see if the package BlazorSignalR.JS exists on nuget
    • It doesn't
  • Checking this project's paket files for the dependency
    • This project references BlazorSignalR but I can't find any version that references BlazorSignalR.JS
  • Cloning and restoring this project
    • Restores just fine

At this point, it seems like my final option is to convert my own project to paket and see if that works. I don't especially want to do that though.

Any ideas?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.