Mint を試してみた
見かけたので試してみた．メモ．
Mint とは
- 再利用可能なコンポーネント
- スタイリング
- ルーティング
- グローバル，ローカルの状態のハンドリング
- 失敗する可能性がある同期，非同期処理
という特徴があって
- 開発者の幸せ
- 高速なコンパイル
- 可読性
に焦点を当てている SPA のための言語みたい．
インストールする
ここの INSTALL BINARIES を試したけれど
$ ./mint-0.2.0-osx dyld: Library not loaded: /usr/local/opt/bdw-gc/lib/libgc.1.dylib Referenced from: /Users/calmery/Projects/LearningMint/./mint Reason: image not found zsh: abort ./mint
となったので INSTALL FROM SOURCE を参考にしつつビルドした．
$ mint Mint - Help ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Usage: mint [flags...] [arg...] Mint Flags: --help # Displays help for the current command. Subcommands: build # Builds the project for production docs # Starts the documentation server format # Formats source files init # Initializes a new project install # Installs dependencies loc # Counts Lines of Code start # Starts the development server test # Runs the tests ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ All done in 49μs!
試してみる
ガイドを見ながら進める．
新しいアプリケーションを作成する
$ mint init my-app Mint - Initializing a new project ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚙ Creating directory structure... ⚙ Writing initial files... ⚙ Constructing dependency tree... ✔ Cloned mint-core(https://github.com/mint-lang/mint-core) ⚙ Resolving dependency tree... ◈ mint-core ➔ 0.2.0 ⚙ Copying packages... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ All done in 1.522s!
こんな感じになった．
$ tree -a -L 3
.
├── .gitignore
├── .mint
│ └── packages
│ └── mint-core
├── mint.json
├── source
│ └── Main.mint
└── tests
└── Main.mint
動かしてみる
$ mint start Mint - Running the development server ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚙ Ensuring dependencies... 126μs ⚙ Compiling... 67.456ms ⚙ Development server started on http://127.0.0.1:3000/
テストする
$ mint test Mint - Running Tests ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚙ Ensuring dependencies... 174μs ⚙ Compiling tests... 73.616ms ⚙ Starting test server... ⚙ Starting browser... ⚙ Test server started on http://127.0.0.1:3001/ ⚙ Running tests: . ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1 tests ➔ 1 passed ➔ 0 failed ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ All done in 461.161ms!
ビルドする
$ mint build Mint - Building for production ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚙ Ensuring dependencies... 7μs ⚙ Clearing the "dist" directory... 100μs ⚙ Compiling your appliction: ➔ Parsing 40 source files... 55.173ms ➔ Type checking: 4.486ms ➔ Compiling: 2.568ms ⚙ Writing index.html... 238μs ⚙ Generating icons... 30.551ms ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ All done in 96.88ms!
$ tree dist dist ├── icon-120x120.png ├── icon-128x128.png ├── icon-144x144.png ├── icon-152x152.png ├── icon-167x167.png ├── icon-16x16.png ├── icon-180x180.png ├── icon-196x196.png ├── icon-256x256.png ├── icon-32x32.png ├── icon-57x57.png ├── icon-76x76.png ├── icon-96x96.png ├── index.html └── index.js 0 directories, 15 files
ドキュメントを見る
良さそう．インストールしたパッケージとかのドキュメントを見ることができる．
$ mint docs Mint - Running the documentation server ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚙ Documentation server started on http://127.0.0.1:3002/
構文など
Atom にシンタックスハイライトのプラグインがないっぽい．とてもつらい．
where
fun greet (name : String) : String {
message + name
} where {
message = "Hello, "
}
record
Elm っぽい．
record User {
email : String,
name : String,
id : Number
}
user =
{
email = "john.doe@gmail.com",
name = "John Doe",
id = 0
}
updatedUser =
{ user | name = "Stuart" }
case
case (condition) {
match1 => value1
match2 => value2
match3 => value3
=> defaultValue
}
try
Result を返す．catch は複数持てるみたい．詳しくは try - Mint を見ると良さそう．
do
try とほとんど同じ．返り値は Promise 型か Result 型になる．ちなみに try 自体は Result 型になるのに対して do 自体は Void 型になるみたい．
store
状態を管理する Store を作成する．Connecting Stores - Mint を見るとわかる．
provider
非同期のイベントを扱うためのものみたい．
use Provider.Tick { ticks = () => {
next { counter = state.counter + 1 }
}mint-core の中を見ると AnimationFrame と Mouse，Scroll，Tick があった．
コンポーネント内で状態を管理する
コンポーネントの内部に状態を持つことができる．Internal State - Mint を見るとわかる．
気になったこと
使ってみて気になったところをまとめる．
- Store とは別にコンポーネントの内部で状態の管理ができるのはどうなの
- 吐き出されたコードを見ると React を使っているっぽい
- mint コマンドから他のパッケージを追加することはできないっぽい
- コンポーネント内に直接 CSS を記述していくと量が増えたとき読みにくそう（スコープは付けたいけど分けたい．そもそもそこまで大きなコンポーネントはできないはずなのであまり問題ではない？）
- mint.json の source-directories で指定したディレクトリ内のコンポーネントとか Store とかはインポートせずに使えるっぽくて気持ち悪い
- こことかがっつり Inline Javascript でとても辛そう
