Skip to content

sharkdp/purescript-sparkle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

71 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Example

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:

Sparkle widget

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.

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.