Mint

https://mint-lang.com/docs/
Admin
Mint is a language and complete toolset for building single page applications with a bundler, code...
Tokens:3,285
Snippets:15
Trust Score:7.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Mint CLI Commands: Initialize, Install, and Start

Source: https://mint-lang.com/docs/index

This snippet demonstrates the basic command-line usage for initializing a new Mint project, installing dependencies, and starting the development server. It showcases the integrated tooling provided by Mint for SPA development.

```bash
$ mint init my-awesome-project
Mint - Initializing a new project━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━⚙ Creating directory structure...⚙ Writing initial files...━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━All done in 2.231ms!
$ 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!
$ 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 CLI Commands for Project Management

Source: https://context7.com/context7/mint-lang/llms.txt

Illustrates common command-line interface commands for managing Mint projects. These include initializing new projects, installing dependencies, starting a development server with hot-reloading, formatting code, running tests, and generating documentation.

```bash
$ mint init my-awesome-project
Mint - Initializing a new project
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚙ Creating directory structure...
⚙ Writing initial files...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
All done in 2.231ms!
```

```bash
$ 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!
```

```bash
$ 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/

# With custom port and host
$ mint start --port 8080 --host 0.0.0.0

# Production build
$ mint build --optimize
```

```bash
$ mint format
Mint - Formatting files
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚙ Formatting source/Main.mint
⚙ Formatting source/Components/TodoList.mint
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
All done in 45ms!

# Format specific files
$ mint format source/Main.mint source/Utils.mint
```

```bash
$ mint test
Mint - Running tests
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ✔ Counter component increments correctly
  ✔ Counter component decrements correctly
  ✔ TodoStore adds items
  ✔ TodoStore removes items
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
4 tests, 0 failures in 125ms
```

```bash
$ mint docs
Mint - Generating documentation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚙ Parsing source files...
⚙ Generating HTML documentation...
⚙ Documentation written to docs/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
All done in 1.2s!
```

--------------------------------

### Mint Routing Configuration

Source: https://mint-lang.com/docs/index

Example of defining routes in Mint, including basic paths, parameter handling (e.g., '/blog/:slug'), and asynchronous operations for loading data before setting the page.

```mint
routes {
  / {
    Application.setPage(Page.Home)
  }

  /blog {
    Application.setPage(Page.Blog)
  }

  /blog/:slug (slug : String) {
    await Posts.load(slug)
    Application.setPage(Page.Post)
  }

  * {
    Application.setPage(Page.NotFound)
  }
}
```

--------------------------------

### Mint Type Definitions for Data Structures

Source: https://context7.com/context7/mint-lang/llms.txt

Defines custom data types in Mint using named fields for creating type-safe structures. Examples include User, Post, and a generic Result type, showcasing how to define complex data models and error handling mechanisms.

```mint
type User {
  id : Number,
  name : String,
  email : String,
  verified : Bool
}

type Post {
  id : Number,
  title : String,
  content : String,
  author : User,
  tags : Array(String),
  publishedAt : Time
}

type Result(error, value) {
  Ok(value),
  Err(error)
}
```

--------------------------------

### Mint Routing with Type-Safe Parameters

Source: https://context7.com/context7/mint-lang/llms.txt

Defines routing configurations in Mint, demonstrating how to set up different paths with type-safe parameters like 'slug' (String), 'id' (Number), and query parameters like 'q' (String). It includes a catch-all route for 404 pages.

```mint
routes {
  / {
    Application.setPage(Page.Home)
  }

  /blog {
    Application.setPage(Page.Blog)
  }

  /blog/:slug (slug : String) {
    await Posts.load(slug)
    Application.setPage(Page.Post)
  }

  /user/:id (id : Number) {
    await User.loadById(id)
    Application.setPage(Page.UserProfile)
  }

  /search?q=:query (query : String) {
    await Search.query(query)
    Application.setPage(Page.SearchResults)
  }

  * {
    Application.setPage(Page.NotFound)
  }
}
```

--------------------------------

### Mint Component with Advanced Styling

Source: https://context7.com/context7/mint-lang/llms.txt

Demonstrates a 'StyledCard' component in Mint, featuring advanced styling with CSS variables ('#{theme == "light" ? "#fff" : "#333"}'), conditional styles ('if (isActive)'), media queries ('@media'), and pseudo-classes ('&:hover'). It highlights Mint's integrated styling capabilities.

```mint
component StyledCard {
  property isActive = false
  property theme = "light"

  style container {
    padding: 20px;
    border-radius: 8px;
    background: #{theme == "light" ? "#fff" : "#333"};

    if (isActive) {
      border: 2px solid #007bff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    @media (max-width: 768px) {
      padding: 10px;
    }

    &:hover {
      transform: translateY(-2px);
      transition: transform 0.2s;
    }
  }

  fun render {
    <div::container>
      "Card Content"
    </div>
  }
}
```

--------------------------------

### Mint Stores and State Management

Source: https://context7.com/context7/mint-lang/llms.txt

Shows how to define a 'Todos' store in Mint for global state management, including 'add', 'delete', and 'toggle' functions. It also defines a 'TodoList' component that connects to this store, displays todos, and allows adding new ones, demonstrating state synchronization.

```mint
type Todo {
  label : String,
  done : Bool
}

store Todos {
  state items = [] of Todo

  fun add (todo : Todo) {
    next { items: Array.push(items, todo) }
  }

  fun delete (todo : Todo) {
    next { items: Array.delete(items, todo) }
  }

  fun toggle (todo : Todo) {
    next {
      items: Array.map(items, (item) => {
        if (item == todo) {
          { ...todo, done: !todo.done }
        } else {
          item
        }
      })
    }
  }
}

component TodoList {
  connect Todos exposing { add, delete, items }

  state newLabel = ""

  fun handleAdd {
    await add({ label: newLabel, done: false })
    next { newLabel: "" }
  }

  fun render : Html {
    <div>
      <input
        value={newLabel}
        onChange={(e) => next { newLabel: e.target.value }}
      />
      <button onClick={handleAdd}>
        "Add Todo"
      </button>

      for item of items {
        <TodoItem
          label={item.label}
          done={item.done}
        />
      }
    </div>
  }
}
```

--------------------------------

### Mint Todo Store and List Component

Source: https://mint-lang.com/docs/index

Demonstrates Mint's store functionality for managing a list of todos. It includes functions to add and delete todos and a component that connects to the store to render the items.

```mint
type Todo {
  label : String,
  done : Bool
}

store Todos {
  state items = [] of Todo

  fun add (todo : Todo) {
    next { items: Array.push(items, todo) }
  }

  fun delete (todo : Todo) {
    next { items: Array.delete(items, todo) }
  }
}

component TodoList {
  connect Todos exposing { add, delete, items }

  fun render : Html {
    <div>
      for item of items {
        "Item rendered here..."
      }
    </div>
  }
}
```

--------------------------------

### Mint TodoItem Component with Styling

Source: https://mint-lang.com/docs/index

A TodoItem component in Mint, showcasing property definitions, conditional styling using 'if' statements, and basic structure for displaying a label and icons.

```mint
component TodoItem {
  property color = "#333"
  property done = false
  property label = ""

  style label {
    font-weight: bold;
    color: #{color};
    flex: 1;

    if (done) {
      text-decoration: line-through;
    }
  }

  fun render {
    <div>
      <span::label>
        label
      </span>

      <Icon.Checkmark/>
      <Icon.Trash/>
    </div>
  }
}
```

--------------------------------

### Mint JavaScript Interoperability Functions

Source: https://mint-lang.com/docs/index

Illustrates Mint's ability to interact with JavaScript. It shows how to define functions that execute JavaScript code directly using backticks and how to decode JavaScript objects into Mint types.

```mint
module MyFunctions {
  fun alert(message : String) : Promise(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)
  }
}
```

--------------------------------

### Mint Type Encoding and Decoding for API Interaction

Source: https://context7.com/context7/mint-lang/llms.txt

Illustrates Mint's capabilities for encoding and decoding between Mint types and JavaScript objects, crucial for interacting with external APIs. This includes functions for fetching user data and creating users, handling potential errors during HTTP requests, JSON parsing, and data validation.

```mint
module UserApi {
  fun fetchUser(id : Number) : Promise(Result(String, User)) {
    try {
      response =
        await Http.get("https://api.example.com/users/#{id}")

      object =
        Json.parse(response.body) or return Result.Err("Invalid JSON")

      user =
        decode object as User or return Result.Err("Invalid user data")

      Result.Ok(user)
    } catch Http.Error => error {
      Result.Err("Network error: #{error}")
    }
  }

  fun createUser(user : User) : Promise(Result(String, User)) {
    try {
      response =
        await Http.post("https://api.example.com/users")
        |> Http.jsonBody(encode user)

      object =
        Json.parse(response.body) or return Result.Err("Invalid JSON")

      created =
        decode object as User or return Result.Err("Invalid response")

      Result.Ok(created)
    } catch Http.Error => error {
      Result.Err("Failed to create user: #{error}")
    }
  }
}
```

--------------------------------

### Mint JavaScript Interoperability Functions

Source: https://context7.com/context7/mint-lang/llms.txt

Demonstrates how to embed and execute JavaScript code within Mint, enabling type-safe encoding and decoding of values between the two languages. This includes functions for displaying alerts, decoding JSON objects into Mint types, fetching data from APIs, and interacting with localStorage.

```mint
module MyFunctions {
  fun alert(message : String) : Promise(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)
  }

  fun fetchData : Promise(Result(Http.Error, String)) {
    `
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => #{encode data})
    `
  }

  fun localStorage(key : String, value : String) : Void {
    `localStorage.setItem(#{key}, #{value})`
  }
}
```

--------------------------------

### Mint Counter Component

Source: https://mint-lang.com/docs/index

A simple counter component written in Mint, demonstrating state management and event handling for incrementing and decrementing a counter value.

```mint
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>
        counter
      </span>

      <button onClick={increment}>
        "Increment"
      </button>
    </div>
  }
}
```
Tokens:
Raw