Creating Packages Saturday, May 25th, 2019

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, Promise(Never, Void)) =
    (value : String) : Promise(Never, Void) { next { } }

  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) : Promise(Never, Void) {
    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:
https://www.github.com/mint-lang/mint-textarea-counter

That's it for today, thank you for reading 🙏