Try Install Learn Blog API Packages GitHub
Pages

Inlining JavaScript

Since Mint itself compiles to JavaScript , including additional JavaScript is pretty straightforward. Simply wrap the JavaScript in backticks anywhere you would write an expression. Mint assumes that the type of the value returned by this expression matches whatever is needed by the surrounding Mint code (but see decoding for a way to safely convert it).

Inlining allows you to invoke arbitrary JavaScript code. This can cause unexpected runtime errors. You can bypass the Mint type system, storing invalid data in Mint variables and cause Mint itself to be the source of the runtime error. Use it with care!

Here is an example inlining a call to the JavaScript function Window.alert :

component Main {
  fun handleClick (event : Html.Event) : Void {
    `alert("Hello")`
  }

  fun render : Html {
    <div onClick={handleClick}>
      <{ "Click to alert!" }>
    </div>
  }
}

Inlined JavaScript Statements

Since Mint is an expression based language, the inlined JavaScript code must also be an expression. If you need to execute multiple JavaScript statements, wrap the code in a Immediately Invoked Function Expression :

module Greeter {
  fun greet (name : String) : String {
    `
    (() => {
      const uppercaseName = name.toUpperCase()

      return "Hello " + #{uppercaseName} + "!"
    })()
    `
  }
}

Your code need not return a value if you know that Mint does not expect one in that context (such as at the end of a sequence expression or a function of type Void ).

You should expect your code to be used in a return statement.

Interpolation in inlined JavaScript Statements

In certain cases you might want access to the Mint scope (so to speak), you can do that by using the interpolation syntax #{...} in inlined JavaScript. The code inside is evaluated in Mint in the current scope.

module Greeter {
  get name : String {
    "Me"
  }

  fun greet : String {
    `
    (() => {
      return "Hello " + #{name} + "!"
    })()
    `
  }
}

Specifying the type

To help the type checker, the type of an inlined JavaScript statement can be defined with the as keyword:

`"Hello World!"` as String