mint-textarea-counter
This repository is an example of a Mint package.
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.
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!
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
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.
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.
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:
mint-textarea-counter
(this must match the name
field in the packages mint.json
)repository
fieldconstraint
fieldAfter 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:
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 π