• THIS USES HACKS: I decline all responsabilities.
• Calling JS from Elm is a bit of a controversy. This is not recognized as a standard practice among the Elm community. Favourise using ports and WebComponents, if you use a lot of JS in Elm maybe what you need is JS?
• You can find a previous version of this using Elm's Kernel in the Kernel branch of this repo, this version is a complete rip-off from joakin
• Do not forget: JS code within Elm is not touched by JS compilers/build tools.

This should work where modern javascript works: browsers, node, deno, bun...

Install both Elm & JS dependencies:

elm install Warry/elm-ffi
npm install elm-ffi --save
or cdn: https://cdn.jsdelivr.net/npm/[email protected]

Apply the polyfill before initialiazing your Elm app:

import 'elm-ffi' // just import it, and that's it.
import { Elm } from './Main.elm'
let app = Elm.Main.init(<your code>)

Read global values from javascript

read : JsCode -> Value

Create and call asynchronous javascript functions from Elm

function : List ( String, params -> Value ) -> JsCode -> params -> Task Error Value

import FFI
import Json.Encode exposing (Value)
import Json.Decode exposing (Decoder)
import Task

{-
when FFI.read fails, value is undefined (not readable by elm/json)
-}
language : String
language =
    FFI.read "return window.navigator.language"
    |> Decode.decodeValue Decode.string
    |> Result.withDefault "en"

{-
it's good practice to declare functions using only the first two parameters,
leaving the given function parameter to currying.
this way function code is cached properly, and execution will be fast.
-}
fetchJson : { url: String } -> Task Error Value
fetchJson =
    FFI.function
        [ ( "url", .url >> Json.Encode.string )
        ]
        """
        let res = await fetch(url)
        if (!res.ok) throw res.statusText
        return await res.json()
        """

fetchUser : Cmd (Result String User)
fetchUser =
    fetchJson { url = "/api/user" }
        |> FFI.decode decodeUser
        |> Task.mapError FFI.errorToString
        |> Task.perform identity

see example/

Faster than eval(), the little overhead consists in converting parameters' values to pojo then passing them to the function using the hack. If your functions are declared at the top level then they are pre-compiled on load.

• JS code is guaranteed to run within a Task meaning that your Elm runtime still can't break.
  • Effects are still managed, creating a JS function in Elm won't do anything until the Cmd is ran.
• JS code runs in isolation, meaning that you can only access function arguments and global references.