Standalone .js version in use in userscripts (like in arrive.js)

[darkred]

(continuing from your comment here: uzairfarooq/arrive#32 (comment))
Firstly, thank you for your work rewriting arrive and making it work in iframes!

---

I'd like to use monitoring in a userscript (with Tampermonkey/Violentmonkey)

I know that .mjs is an extension for EcmaScript modules, so
// @require https://github.com/kylekyle/monitoring/raw/master/dist/monitoring-latest.min.mjs
doesn't work.

I already tried browserify + esmify browserify index.js -p esmify > bundle.js inside the src folder
and I got this file bundle.js
but it still doesn't work if I manually add it in the Editor|Externals of my userscript.

 

Could you please help in making a standalone .js version (like in arrive.js) ?

[kylekyle]

It would be nice to use monitoring in places that don't support modules, like tampermonkey. I think the simplest solution would to have two rollup output targets, a module and a standalone. I'll have a look.

[typkrft]

I hate to pollute comments with nothing of use, but this would be fantastic to have.

[bburky]

I'd also like a non ES module for easy use in Greasemonkey scripts, but for anyone who wants this now you can actually do this in a script:

(async function() {
  'use strict';
  const { default: monitoring} = await import('https://cdn.jsdelivr.net/npm/monitoring/dist/monitoring-latest.min.mjs'); 
  const monitor = monitoring(document.body);
  monitor.added('div', div => console.log('div added:', div));
})();

Tested in Violentmonkey on Chrome.