✨ Feature – Allow interop with JS or TS

[ryan-haskell]

Problem

Elm supports interop with JavaScript via flags, ports, and web components. It is not clear in the guide how working with those things is possible with Elm Land.

Solution

The high-level idea is to allow users to create an src/interop.js file in their project that looks like this:

export const flags = ({ env }) => {
  return {}
}

export const onReady = ({ env, app }) => {
  // Ports are available on `app.ports`
}

This is currently supported in JavaScript, but I need to explore how involved src/interop.ts would be. Mainly I'm interested in whether supporting Typescript will require extra configuration, build steps, or have serious performance impact.

[jamesrweb]

Is there a way we could create something like an Environment.elm which exports a environment function for the build / server to pull in and then users can always remain within the ecosystem rather than creating a JS file? Basically what is already in place for Route and so on within the internals and in that way all environment settings, ports and so on is on the framework level to handle and users can remain in elm land 😉. In that way, for example with environment, it could just be passed to all pages as a normal param or as a separate argument as part of the init flow, WDYT?

update: better yet in the case of environment a simple .env in the root directory being parsed in by the CLI and then given to the initialiser method for pages could be a really nice feature. Then it's standardised and no new files other than that .env for environment (flags) would be required.

[ryan-haskell]

Hey there 👋

100% agree on adding .env file support, that's a missing feature that will benefit everyone!

Elm Land will still use the elm-land.json and the src/interop.js files to provide environment variables via flags, and those same variables will be available for folks working with JS web components etc

---

If you're interested, you should definitely join the Discord channel and share more of your pain points there!

( I mostly use GitHub issues to track planned work, and am slower to see comments here )

[jamesrweb]

Hey there 👋

100% agree on adding .env file support, that's a missing feature that will benefit everyone!

Elm Land will still use the elm-land.json and the src/interop.js files to provide environment variables via flags, and those same variables will be available for folks working with JS web components etc

---

If you're interested, you should definitely join the Discord channel and share more of your pain points there!

( I mostly use GitHub issues to track planned work, and am slower to see comments here )

Thanks for the tip, I'll consider it!

As to your point about the interop JS file and to clarify how you would implement the environment variable parsing, is this your plan?

• Parse dotenv file
• Pass environment variables to interop JS as a function argument to the default export (making an assumption 😉)
• Take return value of that function as the flags to be passed to all Elm page init functions

If that is the flow you had in mind, I still don't understand why the interop JS is required since we could just pass the environment variables into a record to all page init constructors.

I guess I also don't understand the point about web components, why would they need access to flags?

Perhaps it's just a big misunderstanding on my part 🙈!

[ryan-haskell]

Both TypeScript support and .env files have been added in #54 , and will be released with v0.18.0 🚀