[英]how to componentize purescript-halogen application
我想用Purescript的Halogen编写我的前端的特定组件。
例如,我想使用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
。
然后,我可以在我的实际html页面中包含loginForm.js
和registrationForm.js
。
Pulp并不真正涵盖这个用例,它仅适用于有单个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的工作方式中提取它,所以它肯定是沿着正确的方向。
这是可能的pulp
,用--to
和--main
选项:
pulp build --main LoginForm -O --to site/loginForm.js
pulp build --main RegistrationForm -O --to site/registrationForm.js
当然, LoginForm
和RegistrationForm
模块都需要导出一个名为main
的值才能工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.