Integrating Purescript Flare UI Component into Webpack/NG2/TS ProjectPosted on August 21, 2017
localState as it goes. Removing the need for any Angular code in managing the UI or updating the
Things I have assumed…
- A *nix-like terminal environment
- A functioning install of NodeJS with
npmon the $PATH
- A basic, or working knowledge of Purescript, and a desire for more
- A functioning install of Purescript 0.11.5 or greater,
pursavailable on the $PATH
- Have worked through the tutorial for Integrating Purescript to a Webpack Project
Adding a bit of Flare
Flare is a special purpose UI library that sacrifices some flexibility for expressiveness and simplicity. It’s this simplicity that makes it a good candidate for our demonstration. As an example, the following Flare code:
Will produce a UI with two
number type text fields, labelled “a” and “b” respectively, alongside a display of the result of multiplying the input value of “a” by “b”. See the Flare website for more examples.
Install the Flare package and then we’ll start with a self-contained UI component.
$ bower install --save purescript-flare
Now create a new module
Flarey.purs, next to our
Import some Flare components, and some other bits we’ll need…
Then we’ll create a small Flare UI component, taken from their set of examples, it will be composed of two text input fields that displays their combined inputs. The UI elements in Flare have a
Semigroup instance that allows us to use the
<> operator to combine their input values using the instance for the input type.
This function describes the individual UI component, however it doesn’t actually run it, we need to pass it to the runFlare function for that. That function requires a HTML Element ID value so it knows where the UI input component is to be placed, as well as an Element ID for where the output will be placed.
Now to add this to the
home.component, first add the required elements to the HTML. Open
home.component.html and just above the heading for ‘Local State’, add the following:
Then in our
home.component.ts import our
Flarey module and wire everything up. This time however we don’t want to have to wait for a submit to happen before our UI component is available on the page. So we’ll put our call the create our Flare UI component in the
Import The Module, ES6 Style:
Then add the instantiation function to
Purescript functions only take one argument
Note that each input to the
combineTextEle function is given as a separate function call. This is intentional and is because every Purescript function only ever takes one argument. Returning either a result or a function that needs more input.
In the previous tutorial, our
doubler function took one String argument and returned a String result, without any side effects.
This time our function signature is:
Pass in our first argument and that returns the following function:
Then the second, returning the following function:
This is an effect causing function, that must be evaluated to produce the desired effect. Often this is handled by the
For this standalone component that is all you need to do. Save your changes, and if you don’t have it running already, kick off the development server and you should see another two text fields on the home page the display your input in the container you specified. Weeeeeeee!
So far our interactions have been either a pure function (
Helpfully, Flare comes with a couple of functions that let us run effectful functions over the output of a Flare UI Component instead of applying the output to the DOM.
To start with, we need runFlareWith.
The Purescript type of this function is:
Normally, you might write such a type signature like this:
Because you want to indicate in the type of the function that it may cause DOM changes to occur. You’re also able to trace back all of the other effects that are in play when this function is called because the type requires that they be passed in through the
eff type variable.
Another change is that we are no longer relying on Flare to display this result in the DOM. So we do not need the “output” element ID. We will replace it with our
InputFn and our new
combineTextEle function should look something like:
Update the import for Flare to import
runFlareWith instead of
home.component.ts update our
Our goal here is to create a Flare UI component that will operate on some state that we give to it. Update the
localState property to have a new key:
Now we define our ‘effectful function’ that will be passed to Purescript. Recall from earlier that every Purescript function only takes one argument, and that
Eff functions are ‘thunks’ that are evaluated to run their respective effects. Knowing that, we have to create this:
ngOnInit function, lets define this function to update our
localState with the given input:
This isn’t quite right though, as we have to construct our ‘effectful’ function as the final return value. Otherwise when this function is run by Purescript it won’t work as expected. In this case we only have to build an
Eff thunk, which takes no arguments and returns no output (
We do this by wrapping our function in another function:
Notice how this mirrors the FFI requirements for Purescript:
We can now replace our second argument to the
Flarey.combineTextEle with this
With your app running, you should see a new element present in the display for
If you type something into the input fields for the Flare component, you should then see their combined output displayed as you type: