How to compile a purescript-halogen application

Question

I would like to write specific components of my interface using the Purescript Halogen.

For example, I would like to create a registration form using Halogen. It will look something like this:

module RegistrationForm where import Prelude ... -- | The state of the application newtype State = State { email :: String, password :: String } derive instance genericState :: Generic State instance showState :: Show State where show = gShow instance eqState :: Eq State where eq = gEq initialState :: State initialState = State { email: "", password: "" } -- | Inputs to the state machine data Input a = FormSubmit a | UpdateEmail String a | UpdatePassword String a | NoAction a type AppEffects eff = HalogenEffects (ajax :: AJAX, console :: CONSOLE | eff) ui :: forall eff . Component State Input (Aff (AppEffects eff)) ui = component render eval where render :: Render State Input render (State state) = H.div_ [ H.h1_ [ H.text "Register" ] , ... ] eval :: Eval Input State Input (Aff (AppEffects eff)) eval (NoAction next) = pure next eval (FormSubmit next) = do ... eval (UpdateEmail email next) = do ... eval (UpdatePassword password next) = do ... runRegistrationForm :: Eff (AppEffects ()) Unit runRegistrationForm = runAff throwException (const (pure unit)) $ do { node: node, driver: driver } <- runUI ui initialState appendTo ".registration" node 

Similarly, I have a LoginForm module that handles user input into the application.

I am wondering how to organize my source code, create source code and call my Purescript code from Javascript ?

Currently, my source code is organized as follows:

 $ cd my-application/ $ tree . ├── bower.json ├── README.md ├── site/ │ └── index.html ├── src/ │  ├── LoginForm.purs │  └── RegistrationForm.purs └── test/  └── Test.purs 

However, since I do not have Main.purs , I cannot do any of the following to build the source code:

 $ pulp build --to site/app.js $ pulp browserify --to site/app.js $ pulp server 

It would be nice to create my purescript code in javascript boolean files. For example, src/LoginForm.purs can be built as site/loginForm.js , and src/RegistrationForm.purs can be built as site/registrationForm.js .

Then I could include loginForm.js and registrationForm.js in my actual html pages as needed.

Answer 1

Pulp does not actually extend to this use case; it is intended only for applications where there is one Main .

I would suggest using the gulp installation for this, using gulpfile something like this:

 "use strict"; var gulp = require("gulp"), purescript = require("gulp-purescript"), webpack = require("webpack-stream"); var sources = [ "src/**/*.purs", "bower_components/purescript-*/src/**/*.purs", ]; var foreigns = [ "src/**/*.js", "bower_components/purescript-*/src/**/*.js" ]; gulp.task("make", function() { return purescript.psc({ src: sources, ffi: foreigns }); }); var mkBundleTask = function (name, main) { gulp.task("prebundle-" + name, ["make"], function() { return purescript.pscBundle({ src: "output/**/*.js", output: "tmp/js/" + name + ".js", module: main, main: main }); }); gulp.task("bundle-" + name, ["prebundle-" + name], function () { return gulp.src("tmp/js/" + name + ".js") .pipe(webpack({ resolve: { modulesDirectories: ["node_modules"] }, output: { filename: name + ".js" } })) .pipe(gulp.dest("site/js")); }); return "bundle-" + name; }; gulp.task("bundle", [ mkBundleTask("loginForm", "LoginForm"), mkBundleTask("registrationForm", "RegistrationForm") ]); gulp.task("default", ["bundle"]); 

This may not be entirely correct, but I extracted it from the way we do things with SlamData, so it is definitely along the right lines.

Answer 2

This is possible with pulp , using the --to and --main :

 pulp build --main LoginForm -O --to site/loginForm.js pulp build --main RegistrationForm -O --to site/registrationForm.js 

Of course, for the LoginForm and RegistrationForm modules, you will need to export the main value for this.