DEV Community

Cover image for Mint ๐Ÿƒ: Creating Packages
Szikszai Gusztรกv
Szikszai Gusztรกv

Posted on • Updated on

Mint ๐Ÿƒ: Creating Packages

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!
โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”
Enter fullscreen mode Exit fullscreen mode

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>
  }
}

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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!

Enter fullscreen mode Exit fullscreen mode

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}/>
  }
}

Enter fullscreen mode Exit fullscreen mode

Here you can find the repository:

GitHub logo mint-lang / mint-textarea-counter

Example package to share a component.

mint-textarea-counter

This repository is an example of a Mint package.

That's it for today, thank you for reading ๐Ÿ™


If you like to learn more about Mint check out the guide ๐Ÿ“–

In the next part I'm going to show how you how you can use the built in routing system ๐Ÿ˜‰ see you there ๐Ÿ‘‹

Discussion (4)

Collapse
watzon profile image
Chris Watson

Mint is written in Crystal is it not?

Collapse
gdotdesign profile image
Szikszai Gusztรกv Author

Yes it is written in Crystal :)

Collapse
devhammed profile image
Hammed Oyedele

Going through the source, I noticed that Mint is using React.JS under the hood.

Collapse
itachiuchiha profile image
Itachi Uchiha

I really loved the Mint :)

Thanks :)