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 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:
https://www.github.com/mint-lang/mint-textarea-counter
That's it for today, thank you for reading 🙏