Miso JS widget example

Elegantly embedding arbitrary Javascript widgets in Miso.

Note:

🎉 Now working with the latest version (0.14.0.0) of Miso! 🎉

Also currently incompatible with Miso's isomorphism feature.

Try it live!

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

About

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 explained

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 and a viewModel function. The main app embeds the flatpickr component defined in Flatpickr.hs, but also creates some buttons and some text.

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 clean up any callbacks when the DOM element it was attached to disappears.

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

Building the example

This example is built using Nix.

Build by running the following command:

nix-build

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