Release 0.10.0 · mint-lang/mint

Language Features

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.

All providers need to implement the update function which is called any time the subscriptions for that provider change. This allows changing the state accordingly, for example by adding or removing event listeners from entities (window, document, etc...)

If you are curious about them you can check the currently available providers here: https://github.com/mint-lang/mint/tree/master/core/source/Provider

Directives

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

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

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

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

The @format directive returns the formatted string version of the code it's given and the result of the code in a tuple Tuple(a, String). This is created to make it easy to display a simple example of Mint code:

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

  <div>
    <{ result }>

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

The @documentation directive compiles the JSON documentation of the given entity into the resulting JavaScript code so it can be used to display information about the entity.

record Component {
  name : String
}

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

  decoded.name
}

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.

Html

Html expressions can now be used for attributes:
```
<Field label=<{ "Hello" }>/>
```

Html expressions can now be used as expressions:

try {
  label =
    <{ "Hello" }>

  <Field label={label}/>
}

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

<{
  "String"

  <div>
    "Hello"
  </div>

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

Record Update

Record update now supports updating the result of an expression instead of just
updating a record pointing to a variable:

{ { a = "b" } | a = "x" } # { a = "x" }

Constants

Constants are now compiled into properties with static value instead of a
property getter.
Constants now can have numbers in them: const SOME_CONSTANT_01 = "A"

References

Component and DOM element references are property returning a Maybe.

Formatter

Multiple operations can now be forced to format into multiple lines:
```
"Hello" == "True" &&
  "a" == "b" &&
  "c" == "d"
```
Case branches can now be forced to format as multiple by placing the expression in a new line:
```
Maybe::Nothing =>
  "Hello There!"
```
Constants can now be forced to format as multiple by placing the expression in a new line:
```
const HELLO =
  "Hello There!"
```
Html elements with only a string child will now be formatted in one line:
```
<div>"Hello There!"</div>
```
Html fragments and Html expressions are formatted more consistently

CSS

Added the following properties:

overscroll-behavior
overscroll-behavior-x
overscroll-behavior-y

Standard Library

In this release there are a lot of additions to the standard library.

Added

Array.findByAndMap
Dom.getElementsBySelector
Dom.containsMaybe
Dom.setAttribute
Dom.getTagName
Dom.getChildren
Dom.getTextContent
Dom.getActiveElement
Dom.blurActiveElement
Dom.getTextWidth
Dom.getFocusableElements
Dom.focusFirst
Dom.smoothScrollTo
Dom.scrollTo
Dom.getClientWidth
Dom.getClientHeight
Dom.getScrollLeft
Dom.getScrollWidth
Dom.getScrollTop
Dom.getScrollHeight
Dom.getTableOfContents
Html.isNotEmpty
Map.entries
Promise.never1
Promise.never2
Promise.never3
Promise.create
String.isNotEmpty
String.isBlank
String.isNotBlank
String.dropLeft
String.parameterize
Test.Context.spyOn
Test.Context.assertFunctionCalled
Test.Context.assertFunctionNotCalled
Window.alert
Window.isActiveURL
Window.triggerHashJump
Window.addEventListener
Window.addMediaQueryListener
Window.matchesMediaQuery

Changed

String.isAnagarm -> String.isAnagram
Http.sendWithID -> Http.sendWithId
Test.Html.assertCSSOf -> Test.Html.assertCssOf
Dom.getAttribute now returns Maybe(String)
Map is now using arrays for the implementation #268
Set is now using arrays for the implementation #268

Fixed

Dom.getElementFromPoint no longer results in a runtime error
Dom.getAttribute no longer results in a runtime error

Web Api Wrappers

WebSocket - #285 #276
AnimationFrame
MutationObserver
ResizeObserver
IntersectionObserver

New Providers

Provider.ElementSize
Provider.Intersection
Provider.Keydown
Provider.Keyup
Provider.Mutation
Provider.OutsideClick
Provider.TabFocus
Provider.Url
Provider.WebSocket

New Modules

Validation

Minor fixes

Fix formatting of a global component with a comment
Fix formatting of constant access
Fix an issue of generating wrong CSS
Fix formatting of number literals #263 #247
Make sure Tuple(Bool) can be destructured in case branches
CSS definitions can now have numbers in them
The format command now formats using the given pattern
The Main component cannot have properties and will result in a type error
Updated scaffolding of a new project to include a head file

Fixed issues

#241 - Array destructuring conflicting with array access
#242 - Required property does not generate a type checker error
#243 - Emit compilation error message to the CLI for mint start
#248 - Serve Documentation Assets With Proper Content Type
#295 - Error message text does not fit in its container
#252 - Not enough context in required props error
#247, #263 - Mint formatting of Numbers doesn't round-trip
#271 - Add entries to Map

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

0.10.0