Как компонентизировать приложение Purescript-галоген

Question

Я хотел бы написать конкретные компоненты моего интерфейса, используя галоген Purescript.

Например, я хотел бы создать регистрационную форму, используя галоген. Это будет выглядеть примерно так:

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 модуль, который обрабатывает вход пользователя в приложение.

Мне интересно, как организовать мой исходный код, создать исходный код и вызвать мой код Purescript из Javascript?

В настоящее время мой исходный код организован следующим образом:

$ 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

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, так что это определенно правильно.

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 чтобы это работало.