miso-jswidget-example's Introduction

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.

miso-jswidget-example's People

Contributors

Stargazers

Watchers

miso-jswidget-example's Issues

compilation error

I ran nix-build in the root directory and got a compilation error:

Building miso-isomorphic-example-0.1.0.0...
Preprocessing executable 'server' for miso-isomorphic-example-0.1.0.0...
[1 of 2] Compiling Common           ( shared/Common.hs, dist/build/server/server-tmp/Common.dyn_o )
[2 of 2] Compiling Main             ( server/Main.hs, dist/build/server/server-tmp/Main.dyn_o )

server/Main.hs:80:9: error:
    • Couldn't match expected type ‘m3 b0 -> L.HtmlT m ()’
                  with actual type ‘L.HtmlT m2 ()’
    • The first argument of ($) takes one argument,
      but its type ‘L.HtmlT m2 ()’ has none
      In the expression:
        L.doctype_
        $ do { L.head_
               $ do { L.title_ "Miso isomorphic example";
                      L.meta_ [...];
                      .... };
               L.body_ (L.toHtml x) }
      In an equation for ‘toHtml’:
          toHtml (HtmlPage x)
            = L.doctype_
              $ do { L.head_
                     $ do { L.title_ "Miso isomorphic example";
                            .... };
                     L.body_ (L.toHtml x) }
    • Relevant bindings include
        toHtml :: HtmlPage a -> L.HtmlT m () (bound at server/Main.hs:79:5)
builder for '/nix/store/z5g8jmv8a2r6i050m3vapadzzvslli4n-miso-isomorphic-example-0.1.0.0.drv' failed with exit code 1
cannot build derivation '/nix/store/s1vdj4di6m51kg1d2b475c6cqfz3ypxp-miso-ismorphic-example.drv': 1 dependencies couldn't be built
error: build of '/nix/store/s1vdj4di6m51kg1d2b475c6cqfz3ypxp-miso-ismorphic-example.drv' failed

Recommend Projects