Mint 是面向前端开发的编程语言,旨在从语言层面解决编写单页应用 (Single Page Application, SAP) 的常见问题。例如:
- 可复用组件
- 全局和局部状态处理
- 同步和异步计算
- 样式
- 路由
Mint 可帮助开发者编写无错误、易于阅读和可维护的应用程序。
语法示例
样式
在 Mint 语言中,支持使用style
块直接用 CSS 来为元素设置样式。
component TodoItem {
property color = "#333"
property label = ""
property done = false
style base {
align-items: center;
display: flex;
}
style label {
font-weight: bold;
color: #{color};
flex: 1;
if (done) {
text-decoration: line-through;
}
}
fun render {
<div::base>
<span::label>
<{ label }>
</span>
<Icon.Checkmark/>
<Icon.Trash/>
</div>
}
}
数据管理
Mint 语言的store
包含并用于管理数据,store
具有全局访问属性,并且可以连接到组件。当store
的数据发生变化时,连接的组件会被重新渲染。
record Todo {
label : String,
done : Bool
}
store Todos {
property items = [] of Todo
fun add (todo : Todo) {
next { items = Array.push(todo, items) }
}
fun delete (todo : Todo) {
next { items = Array.delete(todo, items) }
}
}
component TodoList {
connect Todos exposing { add, delete }
...
}
路由
Mint 语言中的路由是一项语言特性而不是工具库,路由可在routes
块中进行定义,并支持类型化的路径参数。
routes {
/ {
Application.setPage(Page::Home)
}
/blog {
Application.setPage(Page::Blog)
}
/blog/:slug (slug : String) {
sequence {
Posts.load(slug)
Application.setPage(Page::Post)
}
}
* {
Application.setPage(Page::NotFound)
}
}
与 JavaScript 的互操作性
使用`...`
语法即可内嵌任何 JavaScript 代码。
module MyFunctions {
fun alert(message : String) : Promise(Never, Void) {
`
(new Promise((resolve) => {
alert(#{message})
resolve()
})()
`
}
fun decode : Maybe(TodoItem) {
try {
object =
`{ label: "Check out Mint!",
done: false }`
result =
decode as TodoItem
Maybe::Just(result)
} catch {
Maybe::Nothing()
}
}
}
评论