Mint 🍃: Creating Packages
Tags: javascript, mintlang, webdev
Published: 2019-05-25 09:13:27

_This is the sixth post in a series that showcases the features of Mint, you can find the previous posts here:_
* _[Mint 🍃: Getting Started](/gdotdesign/getting-started-with-mint-3k2o)_
* _[Mint 🍃: Components](/gdotdesign/components-in-mint-4a4n)_
* _[Mint 🍃: Events and State of Components](/gdotdesign/mint-events-and-state-of-components-3j3a)_
* _[Mint 🍃: Handling HTTP Requests](/gdotdesign/mint-handling-http-requests-2ep3)_
* _[Mint 🍃: Styling Elements](/gdotdesign/mint-styling-elements-295o)_

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:

{% github mint-lang/mint-textarea-counter %}

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

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


If you like to learn more about Mint check out the [guide](https://guide.mint-lang.com) 📖

In the next part I'm going to show how you [how you can use the built in routing system](/gdotdesign/mint-routing-2h69) 😉 see you there 👋