wie man die purescript-halogen applikation komponiert

Question

Ich möchte spezifische Komponenten meines Frontends mit Purescript's Halogen schreiben.

Zum Beispiel möchte ich ein Registrierungsformular mit Halogen erstellen. Es wäre so etwas wie folgt aussehen:

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 

Und ich habe ein LoginForm Modul, das einen Benutzer in die Anwendung Griffe anzumelden.

Ich frage mich , wie man meinen Quellcode organisiert, meinen Quellcode aufbaut und meinen Purescript Code von Javascript anruft?

Derzeit mein Quellcode wie folgt gegliedert:

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

Da ich aber keine Main.purs haben, kann ich nicht mit einer der folgenden meine Quellcode zu bauen:

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

Es wäre schön, die Lage sein, meinen PURESCRIPT Code in logische Javascript-Dateien zu erstellen. Zum Beispiel könnte src/LoginForm.purs als site/loginForm.js gebaut werden, und src/RegistrationForm.purs könnte als site/registrationForm.js gebaut werden.

Dann könnte ich und registrationForm.js in meine tatsächlichen HTML-Seiten wie erforderlich sein.

Answer 1

Pulp nicht wirklich diesen Anwendungsfall abdecken, ist es nur für Anwendungen vorgesehen, bei denen es einen einzigen Main ist.

Ich würde vorschlagen, eine gulp Setup mit, dies zu erreichen, ein gulpfile so etwas wie dies mit:

"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"]); 

Das ist nicht ganz richtig sein könnte, aber ich extrahierte es aus wie sie die Dinge mit SlamData tun, so ist es auf jeden Fall in die richtige Richtung.

Answer 2

Dies ist möglich, mit pulp, die --to und --main Optionen:

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

Natürlich sind die LoginForm und RegistrationForm Module werden beide benötigen einen Wert main hierfür genannt exportieren zu arbeiten.