Replace events with nanoevents (#260)

There are a few concerns about "events"

- it's bulitin node module and confuses bundlers
- not well maintained
- got size increase in recent version (https://bundlephobia.com/package/events@3.3.0)
- inheritance makes it kinda implicit

NanoEvents package is very small (72 bytes minified and gzipped) and
written in es modules which allows to avoid any commonjs related size increases.

gulpfile.js

@@ -81,7 +81,7 @@ async function js(entry, outputPath) {
         preventAssignment: true,
         SVGOMG_VERSION: JSON.stringify(changelog[0].version),
       }),
-      rollupResolve({ preferBuiltins: false, browser: true }),
+      rollupResolve({ browser: true }),
       rollupCommon({ include: /node_modules/ }),
       rollupTerser()
     ]

package.json

@@ -6,12 +6,12 @@
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-replace": "^3.0.0",
     "eslint": "^7.32.0",
-    "events": "^3.3.0",
     "gulp": "^4.0.2",
     "gulp-htmlmin": "^5.0.1",
     "gulp-nunjucks": "^5.1.0",
     "gulp-sass": "^5.0.0",
     "gulp-sourcemaps": "^3.0.0",
+    "nanoevents": "^6.0.1",
     "pako": "^1.0.11",
     "prismjs": "^1.6.0",
     "rollup": "^2.56.3",

src/js/page/main-controller.js

@@ -41,12 +41,12 @@ export default class MainController {
     this._viewTogglerUi = new ViewToggler();
 
     // ui events
-    this._settingsUi.on('change', () => this._onSettingsChange());
-    this._settingsUi.on('reset', oldSettings => this._onSettingsReset(oldSettings));
-    this._mainMenuUi.on('svgDataLoad', e => this._onInputChange(e));
-    this._dropUi.on('svgDataLoad', e => this._onInputChange(e));
-    this._mainMenuUi.on('error', ({error}) => this._handleError(error));
-    this._viewTogglerUi.on('change', e => this._onViewSelectionChange(e));
+    this._settingsUi.emitter.on('change', () => this._onSettingsChange());
+    this._settingsUi.emitter.on('reset', oldSettings => this._onSettingsReset(oldSettings));
+    this._mainMenuUi.emitter.on('svgDataLoad', e => this._onInputChange(e));
+    this._dropUi.emitter.on('svgDataLoad', e => this._onInputChange(e));
+    this._mainMenuUi.emitter.on('error', ({error}) => this._handleError(error));
+    this._viewTogglerUi.emitter.on('change', e => this._onViewSelectionChange(e));
     window.addEventListener('keydown', e => this._onGlobalKeyDown(e));
 
     // state

src/js/page/ui/file-drop.js

@@ -1,15 +1,15 @@
+import { createNanoEvents } from 'nanoevents';
 import {
   strToEl,
   domReady,
   transitionToClass,
   transitionFromClass,
   readFileAsText
 } from '../utils';
-import { EventEmitter } from 'events';
 
-export default class FileDrop extends EventEmitter {
+export default class FileDrop {
   constructor() {
-    super();
+    this.emitter = createNanoEvents();
     this.container = strToEl(
       '<div class="drop-overlay">Drop it!</div>' +
     '');
@@ -54,7 +54,7 @@ export default class FileDrop extends EventEmitter {
     const file = event.dataTransfer.files[0];
     if (!file) return;
 
-    this.emit('svgDataLoad', {
+    this.emitter.emit('svgDataLoad', {
       data: await readFileAsText(file),
       filename: file.name
     });

src/js/page/ui/main-menu.js

@@ -5,12 +5,11 @@ import {
   readFileAsText
 } from '../utils';
 import Spinner from './spinner';
-import { EventEmitter } from 'events';
+import { createNanoEvents } from 'nanoevents';
 
-export default class MainMenu extends EventEmitter {
+export default class MainMenu {
   constructor() {
-    super();
-
+    this.emitter = createNanoEvents()
     this.allowHide = false;
     this._spinner = new Spinner();
 
@@ -78,7 +77,7 @@ export default class MainMenu extends EventEmitter {
       this._pasteLabel.appendChild(this._spinner.container);
       this._spinner.show();
 
-      this.emit('svgDataLoad', {
+      this.emitter.emit('svgDataLoad', {
         data: val,
         filename: 'image.svg'
       });
@@ -99,7 +98,7 @@ export default class MainMenu extends EventEmitter {
     this._loadFileBtn.appendChild(this._spinner.container);
     this._spinner.show();
 
-    this.emit('svgDataLoad', {
+    this.emitter.emit('svgDataLoad', {
       data: await readFileAsText(file),
       filename: file.name
     });
@@ -112,7 +111,7 @@ export default class MainMenu extends EventEmitter {
     this._spinner.show();
 
     try {
-      this.emit('svgDataLoad', {
+      this.emitter.emit('svgDataLoad', {
         data: await fetch('test-svgs/car-lite.svg').then(r => r.text()),
         filename: 'car-lite.svg'
       });
@@ -132,7 +131,7 @@ export default class MainMenu extends EventEmitter {
           error = Error("Couldn't fetch demo SVG");
         }
 
-        this.emit('error', { error });
+        this.emitter.emit('error', { error });
       }
     }
   }

src/js/page/ui/settings.js

@@ -1,13 +1,12 @@
-import { EventEmitter } from 'events';
+import { createNanoEvents } from 'nanoevents';
 
 import { domReady } from '../utils';
 import MaterialSlider from './material-slider';
 import Ripple from './ripple';
 
-export default class Settings extends EventEmitter {
+export default class Settings {
   constructor() {
-    super();
-
+    this.emitter = createNanoEvents()
     this._throttleTimeout = null;
 
     domReady.then(() => {
@@ -62,10 +61,10 @@ export default class Settings extends EventEmitter {
 
     // throttle range
     if (event.target.type == 'range') {
-      this._throttleTimeout = setTimeout(() => this.emit('change'), 150);
+      this._throttleTimeout = setTimeout(() => this.emitter.emit('change'), 150);
     }
     else {
-      this.emit('change');
+      this.emitter.emit('change');
     }
   }
 
@@ -86,8 +85,8 @@ export default class Settings extends EventEmitter {
       inputEl.checked = inputEl.hasAttribute('checked');
     }
 
-    this.emit('reset', oldSettings);
-    this.emit('change');
+    this.emitter.emit('reset', oldSettings);
+    this.emitter.emit('change');
   }
 
   setSettings(settings) {

src/js/page/ui/view-toggler.js

@@ -1,12 +1,12 @@
-import { EventEmitter } from 'events';
+import { createNanoEvents } from 'nanoevents';
 import { domReady } from '../utils';
 
 /**
  * Tabs that toggle between showing the SVG image and XML markup.
  */
-export default class ViewToggler extends EventEmitter {
+export default class ViewToggler {
   constructor() {
-    super();
+    this.emitter = createNanoEvents();
     /** @type {HTMLFormElement | null} */
     this.container = null;
 
@@ -29,6 +29,6 @@ export default class ViewToggler extends EventEmitter {
       }, '');
     }
 
-    this.emit("change", { value });
+    this.emitter.emit("change", { value });
   }
 }