ES6 module support inside ops

ES6 modules can be used now natively in some browsers (Chrome, Firefox, Safari).

For example if you look at my little test snippet below:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <tile>ES6 Module Test</tile>
    <script type="module">
        import debounce from 'https://unpkg.com/lodash-es@4.17.11/debounce.js';
        (debounce(() => console.log('It works!'), 500))();
    </script>
</head>
<body>

</body>
</html>

Using the webservice unpkg the NPM package lodash-es is unpacked, which makes it possible to link directly to one of its files, debounce.js.

Running this code outside of cables successfully loads the ES6 module and executes the debounce function.
The important part here is that the script (entrypoint) must be marked as module:

    <script type="module">...</script>

Being able to use the external NPM packages in cables would be huge and offer a lot of possibilities.
My recommendation would be to add a user setting “Enable experimental ES6 module support”.
When activated the cables script would be marked as module, also when the cables patch is exported the script would need to be marked as module.

What do you think @pandur?

Edit:
I think this should not be used in native cables ops, but for private ops for experimentation this would be great!

2 Likes

interesting. i ll have a look at it.
our current js async loader does not support the module attribute yet,

1 Like

Any news on this front?
I’m trying to load external librairies but it’s quite difficult with the current implementation.
I’m currently injecting a script via head something like this:

But I couldn’t find a way to load a module.

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.head;
    var script = document.createElement('script');
    if (isModule.get())
        script.type = 'module';  // doesn't work
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

exe.onTriggered = () => {
    loaded.set(false);

    if (!url.get()) {
        console.error('Empty url');
        return;
    }

    loadScript(url.get(), (obj) => {
        console.log(obj);
        ...