Uploaded by
Published on

Automatically create reactive web interfaces from type signatures.

Live demo and tutorial | Conference talk | Try in your browser | Documentation

Sparkle is a library that leverages the power of PureScripts type system to automatically create user interfaces based on type signatures.

The internal mechanism of this library is similar to QuickCheck. However, instead of using randomly generated input data, Sparkle creates reactive web interfaces for "interactive testing". It uses the Flare library to create those widgets.


Consider the following (hypothetic) function:

formatNumber :: Number -> Int -> Char -> Boolean -> String
formatNumber value precision decimalMark isSigned = ...

Sparkle can automatically create a user interface for these inputs by calling:

sparkle "formatNumber" formatNumber

The result looks like this:

Sparkle widget

Notice how each input type (Number, Int, Char, Boolean) is represented by an appropriate input field.

Quick start

  • Start a PureScript project in a new folder:

    pulp init
  • Install Sparkle:

    bower install --save purescript-sparkle
  • Write your own code (src/MyModule.purs), for example:

    module MyModule (substring) where
    import Prelude
    import Data.String
    substring :: Int -> Int -> String -> String
    substring start end str = take (end - start) (drop start str)
  • Write the module that creates the interactive Sparkle tests (test/Main.purs):

    module Test.Main where
    import Prelude
    import MyModule
    import Sparkle
    main = sparkle "substring" substring
  • Compile and bundle:

    pulp build -O -I test -m Test.Main -t test.js
  • Copy the index.html and sparkle.css file from the assets folder:

    cp bower_components/purescript-sparkle/assets/* .
  • Open index.html in the browser.