Mint 🍃: Creating Packages

#javascript #mintlang #webdev

This is the sixth post in a series that showcases the features of Mint, you can find the previous posts here:

In this post I will show you how to create a package to share with others.

Mint has built in support for packages - code shared on any public Git repository - which allows you to share Components, Modules and even Stores with others.

Creating a package

In this post we will create a package for a textarea which has a built in counter.

First we need to create a new Mint application (which itself is a package):

➜  Projects git:(master) ✗ mint init mint-textarea-counter    
Mint - Initializing a new project
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚙ Creating directory structure...
⚙ Writing initial files...

There are no dependencies!

There is nothing to do!
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Adding a component

Instead of a Main component we will create one for the textarea named Textarea.Counter (source/Texarea.Counter.mint):

component Textarea.Counter {
  property onChange : Function(String, a) = (value : String) : Void { void }
  property value : String = ""

  style base {
    border: 1px solid #DDD;

    flex-direction: column;
    display: inline-flex;
  }

  style textarea {
    font-family: sans-serif;
    font-size: 16px;

    padding: 10px;
    margin: 0;
    border: 0;
  }

  style counter {
    font-family: sans-serif;
    background: #EEE;
    font-size: 14px;
    padding: 10px;
  }

  fun handleChange (event : Html.Event) : a {
    event.target
    |> Dom.getValue()
    |> onChange()
  }

  fun render : Html {
    <div::base>
      <div::counter>
        "Character Count: "

        <{
          value
          |> String.size()
          |> Number.toString()
        }>
      </div>

      <textarea::textarea
        onChange={handleChange}
        value={value}/>
    </div>
  }
}

During development I suggest creating a Main component for testing which is not added to the Git repository.

Creating the Git repository

To share this component with others we need to create a Git repository, in this case we will created one on Github and we need to push our code to it:

➜  mint-textarea-counter ✗ git init
Initialized empty Git repository in /home/.../mint-textarea-counter/.git/

➜  mint-textarea-counter git:(master) ✗ git remote add origin .../mint-textarea-counter.git

➜  mint-textarea-counter git:(master) ✗ git add .

➜  mint-textarea-counter git:(master) ✗ git commit -m "Initial commit."
[master (root-commit) 5250277] Initial commit.
 3 files changed, 60 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 mint.json
 create mode 100644 source/Textarea.Counter.mint

➜  mint-textarea-counter git:(master) git push origin HEAD

Now we have the repository set up, the next thing is to create a tag for the first version:

➜  mint-textarea-counter git:(master) git tag 1.0.0
➜  mint-textarea-counter git:(master) git push origin HEAD --tags           
Total 0 (delta 0), reused 0 (delta 0)
To github.com:mint-lang/mint-textarea-counter.git
 * [new tag]         1.0.0 -> 1.0.0

Now the package is ready to be used.

Using the package

In an other Mint application we can use this package by defining it as a dependency in dependencies field in mint.json:

{
  ...

  "dependencies": {
    "mint-textarea-counter": {
      "repository": "https://github.com/mint-lang/mint-textarea-counter",
      "constraint": "1.0.0 <= v < 2.0.0"
    }
  }
}

I'll explain what the code above means:

we have defined the dependency: mint-textarea-counter (this must match the name field in the packages mint.json)
we specified which Git repository it lives in using the repository field
we specified the version constraint in the constraint field

After that we only need to install the dependencies with the mint install command:

➜  test git:(master) ✗ mint install
Mint - Installing dependencies
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚙ Constructing dependency tree...
  ✔ Cloned mint-textarea-counter(https://github.com/mint-lang/mint-textarea-counter.git)

⚙ Resolving dependency tree...
  ◈ mint-textarea-counter ➔ 1.0.0

⚙ Copying packages...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
All done in 1.231s!

And then we can use the component the same way if it was defined in the project:

component Main {
  state value : String = "Initial value..."

  fun handleChange (value : String) : Promise(Never, Void) {
    next { value = value }
  }

  fun render : Html {
    <Textarea.Counter
      onChange={handleChange}
      value={value}/>
  }
}

Here you can find the repository: