The programming language for writing single page applications.
Mint has all the tools you need to write error free, easily readable and maintainable applications in record time.
component Counter {
state counter = 0
fun increment {
next { counter: counter + 1 }
}
fun decrement {
next { counter: counter - 1 }
}
fun render {
<div>
<button onClick={decrement}>
"Decrement"
</button>
<span>
<{ Number.toString(counter) }>
</span>
<button onClick={increment}>
"Increment"
</button>
</div>
}
}
Styling
In Mint you can
style elements
directly
with CSS
using
style
blocks.
Inside a
style
block you can nest as many
sub selectors
and
media queries
as you like.
Interpolate any
Mint expressions
in any value using the
interpolation syntax:
#{...}
You can even use
if
and
case
expressions inside any block to
apply styles conditionally.
Styling Reference
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>
}
}
Data Management
In Mint a
store
contains and manages some data.
Stores are globally accessible and can be connected to components.
When the data in a store changes the connected components are re-rendered.
Stores Reference
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 }
...
}
Routing
In Mint routing is a language feature instead of a library.
Routes can be defined in a
routes
block, with support for
typed path parameters.
The runtime handles clicks on anchor tags and navigates in a smart way so you don't have to.
Routing Reference
routes {
/ {
Application.setPage(Page::Home)
}
/blog {
Application.setPage(Page::Blog)
}
/blog/:slug (slug : String) {
Posts.load(slug)
Application.setPage(Page::Post)
}
* {
Application.setPage(Page::NotFound)
}
}
JavaScript Interoperability
You can
inline
any
JavaScript code
easily by using
bacticks:
`...`
There are constructs for helping converting values:
-
encode
converts a typed value into a JavaScript object -
decode
converts a JavaScript object into a typed value
Interpolating Mint code in the inlined JavaScript can be done with the
interpolation syntax:
#{...}
Interop Reference
module MyFunctions {
fun alert(message : String) : Promise(Never, Void) {
`
(new Promise((resolve) => {
alert(#{message})
resolve()
})()
`
}
fun decode : Maybe(TodoItem) {
let object =
`{ label: "Check out Mint!",
done: false }`
Result.toMaybe(decode object as TodoItem)
}
}
Batteries Included
Mint has all the features you need, built in:
- Development Server
- Code Formatter
- Test Runner
- Package Manager
- Documentation Generator
- Build Tool
Cli Reference
$ mint init my-awesome-project
Mint - Initializing a new project
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚙ Creating directory structure...
⚙ Writing initial files...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
All done in 2.231ms!
$ mint start --auto-format
Mint - Running the development server
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚙ Ensuring dependencies... 181μs
⚙ Parsing files... 2.608ms
⚙ Development server started on http://127.0.0.1:3000/
$ mint install
Mint - Installing dependencies
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚙ Constructing dependency tree...
✔ Cloned mint-codemirror (https://github.com/mint...)
⚙ Resolving dependency tree...
◈ mint-codemirror ➔ 6.0.0
⚙ Copying packages...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
All done in 2.75s!