purescript-sparkle

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 formatNumber by simply calling:

sparkle "formatNumber" formatNumber

The result looks like this:

Notice how each input type (Number, Int, Char, Boolean) is represented by an appropriate input field. Check out the demo page for an interactive version.

• 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.