Embeding Elm app on arbitrary websites

Learn
1

Hi all,

This is more of JavaScript question really, but it still belongs here, because the JS code in question is produced by elm-make.

I’m using Elm to build app that is embeddable on arbitrary websites. One issue that I came across was that some websites that contain JS built with RequireJS expose AMD API and will generaly have this evaluate to true:

if (typeof define === "function" && define['amd']) {

This is built into elm-make as a condition that, when true, will invoke define and return.

I’ve managed to workaround this by setting a path to my Elm app via require.config({paths: ...}) and using it to load Elm app with a call to require, when these are exposed. This works well in most cases, however, recently I’ve discovered that some websites that use RequireJS Almond will have these functions exposed, but Almond itself doesn’t actually support dynamic loading. Almond has an config option ‘wrap’ that, as the name suggests:

will wrap the optimized file in a closure, so the define/require AMD API does not escape the file

Problem is that I’m not in control of these websites, but I would still like to be able to support them, even when they expose AMD API. Any help would be much appreciated!

Cheers,
Tomas

2

If you don’t have control over the Almond thing I see these options:

  • Patch the Almond define after the fact by typeof define !== "undefined" && delete define.amd could work but may produce sideeffects for other modules
  • Remove the AMD registration of the built Elm artifact after the fact and use it via the Elm global - personally I’d do this
  • Build and load your Elm with something like webpack where you can control how it’s exposed
2 Likes
3

Thank you for the suggestions, Martin!

I was already building with webpack, so I’ve used ‘string-replace-loader’ module to remove the AMD registration, works like a charm.

4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.