如何组件化purescript卤素应用

Question

我想用Purescript的Halogen编写我前端的特定组件。

例如，我想创建一个使用卤素的注册表格。它看起来像下面：

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 

同样，我有一个LoginForm模块，处理用户登录到应用程序。

我想知道如何去组织我的源代码，构建我的源代码，并从Javascript调用我的Purescript代码？

目前，我的源代码被组织如下所示：

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

然而，由于我没有做Main.purs，我不能做以下打造我的源代码中的任何：

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

这将是很好能够建立我的purescript代码到逻辑JavaScript文件。例如，src/LoginForm.purs可以构建为site/loginForm.js，并且src/RegistrationForm.purs可以构建为site/registrationForm.js。

然后，我可以包括loginForm.js和registrationForm.js在我的实际HTML页面中的需要。

Answer 1

纸浆并没有真正涵盖这个用例，它只适用于那些只有一个Main的应用程序。

我建议使用一个gulp设置来实现这一点，使用gulpfile是这样的：

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

这也许不是很正确，但是我抽出它从我们如何做事情SlamData所以它的绝对沿着正确的路线。

Answer 2

这是可能的pulp，使用--to和--main选项：

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

当然，LoginForm和RegistrationForm模块都将需要导出一个名为main这个工作的价值。