[FireMonkey] import statement handling

[LucidicShadow]

Hi,

I'm wondering how FireMonkey handles import statements, i.e.

import { function } from 'script';

Do they work in user scripts?

I've had issues with them recently, and have been working around this by using libraries that add themselves as a global object, but I would much prefer using imports if they work.

[erosman]

FireMonkey handles the injection of the script into the tab. From then on, everything, except GM API, is pure JavaScript.

In the following code, where exactly is 'script' located?

import { function } from 'script';

Normally, 'script' is somewhere that can be accessed by the JS (in the same context).
In a userscript, in order to get the 'script', it needs to use @require to get the module. After that I am not sure. I will ask around.

[erosman]

I have discussed import in userscript context with Mozilla engineers.

Normally, the JavaScript engine would get the module and then make it available to the JS code that imported it.

That is not possible within userscript context since there is no process to get the the module.

Module Import example

Module app.js

export {App};

class App {

  static run() {
    console.log('App.run called');
  }
}

Importer

import {App} from './app.js';

App.run();

Mimic Module Import in userscript example

Note: import/export cause error

SyntaxError: export declarations may only appear at top level of a module
SyntaxError: import declarations may only appear at top level of a module

Module

// ==UserScript==
// @name          Module
// @author        erosman
// @version       1.0
// ==/UserScript==

// export {App};                        // causes error

class App {

  static run() {
    console.log('App.run called');
  }
}

Importer
Note: @require can also be a remote script

// ==UserScript==
// @name          Module Importer
// @match         *://*.example.com/*
// @author        erosman
// @version       1.0
// @require       Module
// ==/UserScript==

// import {App} from './app.js';        // causes error

App.run();                              // App.run called

[LucidicShadow]

Thanks for digging into that with the Mozilla devs, I appreciate your effort to get a definitive answer.

I’ve found that external scripts which export an object with methods, rather than individual functions, work quite reliably, à la jQuery. I’d been having issues using some IndexedDB wrapper libraries, but found this method to work.
I guess now we know why!

I’ll have to change my workflow in VS Code a little to accommodate.