This is the sixth post in a series that showcases the features of Mint, you can find the previous posts here:
- Mint ๐: Getting Started
- Mint ๐: Components
- Mint ๐: Events and State of Components
- Mint ๐: Handling HTTP Requests
- Mint ๐: Styling Elements
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 thename
field in the packagesmint.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:
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 ๐
Top comments (4)
Mint is written in Crystal is it not?
Yes it is written in Crystal :)
Going through the source, I noticed that Mint is using React.JS under the hood.
I really loved the Mint :)
Thanks :)