[英]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.