Try Install Learn Blog API Packages GitHub
Posts

Mint 0.10.0 Tuesday, September 15th, 2020

Mint 0.10.0 has been released!

This release comes with changes to providers, bug fixes and introduces directives.

There are 184 commits since 0.9.0 by 8 contributors.

Let’s review some highlights in this release. But don’t miss out on the rest of the release changelog which has a lot of valuable information.

Directives

This release adds the @svg , @format and @documentation directives.

Directives are processed at compile time. They interact both with the code and outside of them (for example, files).

@svg

The @svg directive embeds the SVG at the given path (relative to the source file) as Html so it can be used directly in components:

<div>
  <{ @svg(../path/to/some/icon.svg) }>
</div>

The use case for this directive is embeddig custom icons and illustartions without the need to convert them to Mint code.

@format

The @format directive returns the result of given expression and its formatted code as a tuple Tuple(a, String):

{result, code} =
  @format {
    <div>
      "Hello There!"
    </div>
  }

<div>
  <{ result }>

  <pre>
    <code>
      <{ code }>
    </code>
  </pre>
</div>

The use case for this directive is to make it easier to show an example of a Mint code.

@documentation

The @documentation directive generates and inlines the documentation of a component as a JavaScript object which can be used later on to display said documenation:

record Component {
  name : String
}

try {
  decoded =
    decode @documentation(Main) as Component

  decoded.name
}

Updates to Providers

Providers got overhauled in this release, it is possible to write a provider entirely in Mint.

Providers now work like stores: they can have states, constants and getters, the next keyword can also be used.

Here is a simple provider that broadcasts the number of subscribers.

record SubscriberCount.Subscription {
  update : Function(Number, Promise(Never, Void))
}

provider SubscriberCount : SubscriberCount.Subscription {
  fun update {
    try {
      count =
        Array.size(subscriptions)

      for (subscriber of subscriptions) {
        subscriber.update(count)
      }
    }
  }
}

Also a bunch of new providers has added to the standard library:

  • Provider.ElementSize - track the size of an element
  • Provider.Intersection - track whether or not an element is in the viewport
  • Provider.Keydown - track global keydown events (window)
  • Provider.Keyup - track global keyup events (window)
  • Provider.Mutation - track mutation events of an element
  • Provider.OutsideClick - track clicks outside of element(s)
  • Provider.TabFocus - track focus in and out events of an element
  • Provider.Url - track changes to the URL (window)
  • Provider.WebSocket - track websocket connections

Keyword parameters for Enums

Enums now can have named parameters:

enum Item {
  Link(name : String, href : String)
}

Item::Link(name = "Home", href = "/")

This way there is no need to define a record for an enum item.

Updates to Html expressions

Html expressions can now be used in attributes:

<Field label=<{ "Hello" }>/>

also they can now be used as normal experssions:

try {
  label =
    <{ "Hello" }>

  <Field label={label}/>
}

and they now supports multiple expressions (without needing Html expressions):

<{
  "String"

  <div>
    "Hello"
  </div>

  if (Html.isNotEmpty(content)) {
    content
  } else {
    <{}>
  }
}>

Updates to the standard library

41 new functions added, wrappers for 5 new web APIs, and a new module added for validating data.

Next steps

Please update your Mint and report any issues. We will keep moving forward and start the development focusing on 0.11.0.


Special thanks to @Sija for doing an throughouh review of the code and updating Mint for Crystal 0.35.1 and to @sokil for helping with the issues on Github 🎉