Elegantly embedding arbitrary Javascript widgets in Miso.

Currently running off a fork of Miso, until the methods in this example have been fleshed out. Follow its progress here: dmjio/miso#362

Also currently incompatible with Miso's isomorphism feature.

https://fptje.github.io/miso-jswidget-example/

This example shows how to deeply integrate a javascript widget into your Miso app, such that:

• you can listen to custom events defined by the widget's library;
• the inevitable Javascript interop is encapsulated in a single component; and that
• this component can be re-used and placed anywhere in your application, following the components pattern;
• the state of your Miso Model is synced with the state of the widget, and the other way around.

This example embeds flatpickr, a date picker and calendar widget.

The example consists of two Haskell files: Main.hs and Flatpickr.hs. Main.hs contains a pretty standard Miso app, with a Model, some Actions, viewModel function and is the parent of a Flatpickr component. Main.hs is not aware of any Javascript shenanigans.

Flatpickr.hs fully encapsulates the flatpickr widget. It takes care of the following:

• create the widget (using Javascript interop) when it should be visible, passing options given by its parent;
• create an onChange event listener, turning all events into actions that are sent to its parent;
• define an Action with which the parent can modify the state of the widget, in our case just set the date;
• destroy the widget and cleans up any callbacks when the DOM element it was attached to disappears.

Comments in the code explain the details. Go check it out!

This example is built using Nix.

Build by running the following command:

nix-build

Then open result/index.html to run the example.