Minor code refactoring and simplification

Author: simonwep

packages/vanilla/src/index.ts

@@ -795,7 +795,7 @@ export default class SelectionArea extends EventTarget<SelectionEvents> {
 
     /**
      * Cancel the current selection process, pass true to fire a stop event after cancel
-     * @param keepEvent - If a stop event should be fired
+     * @param keepEvent If a stop event should be fired
      */
     cancel(keepEvent = false): void {
         this._onTapStop(null, !keepEvent);
@@ -823,8 +823,8 @@ export default class SelectionArea extends EventTarget<SelectionEvents> {
 
     /**
      * Adds elements to the selection
-     * @param query - CSS Query, can be an array of queries
-     * @param quiet - If this should not trigger the move event
+     * @param query CSS Query, can be an array of queries
+     * @param quiet If this should not trigger the move event
      */
     select(query: SelectAllSelectors, quiet = false): Element[] {
         const {changed, selected, stored} = this._selection;
@@ -853,8 +853,8 @@ export default class SelectionArea extends EventTarget<SelectionEvents> {
 
     /**
      * Removes a particular element from the selection
-     * @param query - CSS Query, can be an array of queries
-     * @param quiet - If this should not trigger the move event
+     * @param query CSS Query, can be an array of queries
+     * @param quiet If this should not trigger the move event
      */
     deselect(query: SelectAllSelectors, quiet = false) {
         const {selected, stored, changed} = this._selection;

packages/vanilla/src/utils/arrayify.ts

@@ -0,0 +1,2 @@
+// Turns a value into an array if it's not already an array
+export const arrayify = <T>(value: T | T[]): T[] => (Array.isArray(value) ? value : [value]);

packages/vanilla/src/utils/events.ts

@@ -1,30 +1,23 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import {arrayify} from './arrayify';
+
 type Method = 'addEventListener' | 'removeEventListener';
 type AnyFunction = (...arg: any) => any;
 
-export type EventBindingArgs = [
-    (EventTarget | undefined) | (EventTarget | undefined)[],
-    string | string[],
-    AnyFunction,
-    Record<string, unknown>?
-];
-
 const eventListener = (method: Method) => (
     items: (EventTarget | undefined) | (EventTarget | undefined)[],
     events: string | string[],
-    fn: AnyFunction, options = {}
-): EventBindingArgs => {
+    fn: AnyFunction,
+    options = {}
+) => {
 
     // Normalize array
     if (items instanceof HTMLCollection || items instanceof NodeList) {
         items = Array.from(items);
-    } else if (!Array.isArray(items)) {
-        items = [items];
     }
 
-    if (!Array.isArray(events)) {
-        events = [events];
-    }
+    events = arrayify(events)
+    items = arrayify(items);
 
     for (const el of items) {
         if (el) {
@@ -33,8 +26,6 @@ const eventListener = (method: Method) => (
             }
         }
     }
-
-    return [items, events, fn, options];
 };
 
 /**

packages/vanilla/src/utils/selectAll.ts

@@ -1,28 +1,21 @@
-export type SelectAllSelectors = readonly (string | Element)[] | string | Element;
+import {arrayify} from './arrayify';
+
+export type SelectAllSelectors = (string | Element)[] | string | Element;
 
 /**
  * Takes a selector (or array of selectors) and returns the matched nodes.
  * @param selector The selector or an Array of selectors.
  * @param doc
  * @returns {Array} Array of DOM-Nodes.
  */
-export const selectAll = (selector: SelectAllSelectors, doc: Document = document): Element[] => {
-    const list = !Array.isArray(selector) ? [selector] : selector;
-    let nodes: Element[] = [];
-
-    for (let i = 0, l = list.length; i < l; i++) {
-        const item = list[i];
-
-        if (typeof item === 'string') {
-            /**
-             * We can't use the spread operator here as with large amounts of elements
-             * we'll get a "Maximum call stack size exceeded"-error.
-             */
-            nodes = nodes.concat(Array.from(doc.querySelectorAll(item)));
-        } else if (item instanceof Element) {
-            nodes.push(item);
-        }
-    }
-
-    return nodes;
-};
+export const selectAll = (selector: SelectAllSelectors, doc: Document = document): Element[] =>
+    arrayify(selector)
+        .map(item =>
+            typeof item === 'string'
+                ? Array.from(doc.querySelectorAll(item))
+                : item instanceof Element
+                    ? item
+                    : null
+        )
+        .flat()
+        .filter(Boolean) as Element[];