search

kylekyle / monitoring

A simple, efficient, and lightweight ES module to monitor the DOM for when elements are added, removed, have appeared, have disappeared, or are resized.
17 stars 1 forks source link

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

Open darkred opened 3 years ago

darkred commented 3 years ago

(continuing from your comment here: https://github.com/uzairfarooq/arrive/issues/32#issuecomment-687367567) 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 commented 3 years ago

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 commented 3 years ago

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

bburky commented 3 years ago

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.