DEV: improves sk api (#9653)

- reduces the API to 3 actions for now: appendContent/prependContent/onChange
- well tested
- removes all previous APIS which were only half supported or too dangerous as they could collide with other plugins or core behaviors
- this plugins also puts every sk test helpers in one file

app/assets/javascripts/select-kit/components/select-kit.js

@@ -16,12 +16,8 @@ import {
 } from "@ember/runloop";
 import { Promise } from "rsvp";
 import {
-  applyHeaderContentPluginApiCallbacks,
-  applyModifyNoSelectionPluginApiCallbacks,
   applyContentPluginApiCallbacks,
-  applyOnOpenPluginApiCallbacks,
-  applyOnClosePluginApiCallbacks,
-  applyOnInputPluginApiCallbacks
+  applyOnChangePluginApiCallbacks
 } from "select-kit/mixins/plugin-api";
 
 export const MAIN_COLLECTION = "MAIN_COLLECTION";
@@ -379,15 +375,7 @@ export default Component.extend(
         cancel(this._searchPromise);
       }
 
-      const input = applyOnInputPluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        event,
-        this.selectKit
-      );
-
-      if (input) {
-        debounce(this, this._debouncedInput, event.target.value, 200);
-      }
+      debounce(this, this._debouncedInput, event.target.value, 200);
     },
 
     _debouncedInput(filter) {
@@ -430,6 +418,9 @@ export default Component.extend(
         }
 
         this._boundaryActionHandler("onChange", value, items);
+
+        applyOnChangePluginApiCallbacks(value, items, this);
+
         resolve(items);
       }).finally(() => {
         if (!this.isDestroying && !this.isDestroyed) {
@@ -448,11 +439,7 @@ export default Component.extend(
     _modifyContentWrapper(content) {
       content = this.modifyContent(content);
 
-      return applyContentPluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        content,
-        this.selectKit
-      );
+      return applyContentPluginApiCallbacks(content, this);
     },
 
     modifyContent(content) {
@@ -460,13 +447,7 @@ export default Component.extend(
     },
 
     _modifyNoSelectionWrapper() {
-      let none = this.modifyNoSelection();
-
-      return applyModifyNoSelectionPluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        none,
-        this.selectKit
-      );
+      return this.modifyNoSelection();
     },
 
     modifyNoSelection() {
@@ -498,12 +479,6 @@ export default Component.extend(
     },
 
     _modifySelectionWrapper(item) {
-      applyHeaderContentPluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        item,
-        this.selectKit
-      );
-
       return this.modifySelection(item);
     },
 
@@ -731,30 +706,14 @@ export default Component.extend(
       this.selectKit.change(null, null);
     },
 
-    _onOpenWrapper(event) {
-      let boundaryAction = this._boundaryActionHandler("onOpen");
-
-      boundaryAction = applyOnOpenPluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        this.selectKit,
-        event
-      );
-
-      return boundaryAction;
+    _onOpenWrapper() {
+      return this._boundaryActionHandler("onOpen");
     },
 
-    _onCloseWrapper(event) {
+    _onCloseWrapper() {
       this.set("selectKit.highlighted", null);
 
-      let boundaryAction = this._boundaryActionHandler("onClose");
-
-      boundaryAction = applyOnClosePluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        this.selectKit,
-        event
-      );
-
-      return boundaryAction;
+      return this._boundaryActionHandler("onClose");
     },
 
     _toggle(event) {
@@ -772,9 +731,7 @@ export default Component.extend(
 
       this.clearErrors();
 
-      if (!this.selectKit.onClose(event)) {
-        return;
-      }
+      this.selectKit.onClose(event);
 
       this.selectKit.setProperties({
         isExpanded: false,
@@ -789,9 +746,7 @@ export default Component.extend(
 
       this.clearErrors();
 
-      if (!this.selectKit.onOpen(event)) {
-        return;
-      }
+      this.selectKit.onOpen(event);
 
       if (!this.popper) {
         const anchor = document.querySelector(

app/assets/javascripts/select-kit/mixins/plugin-api.js

@@ -12,257 +12,55 @@ function appendContent(pluginApiIdentifiers, contentFunction) {
 }
 
 let _prependContentCallbacks = {};
-function prependContent(pluginApiIdentifiers, contentFunction) {
-  if (isNone(_prependContentCallbacks[pluginApiIdentifiers])) {
-    _prependContentCallbacks[pluginApiIdentifiers] = [];
+function prependContent(targetedIdentifier, contentFunction) {
+  if (isNone(_prependContentCallbacks[targetedIdentifier])) {
+    _prependContentCallbacks[targetedIdentifier] = [];
   }
 
-  _prependContentCallbacks[pluginApiIdentifiers].push(contentFunction);
+  _prependContentCallbacks[targetedIdentifier].push(contentFunction);
 }
 
-let _filterContentCallbacks = {};
-function filterContent(pluginApiIdentifiers, contentFunction) {
-  if (isNone(_filterContentCallbacks[pluginApiIdentifiers])) {
-    _filterContentCallbacks[pluginApiIdentifiers] = [];
+let _onChangeCallbacks = {};
+function onChange(pluginApiIdentifiers, mutationFunction) {
+  if (isNone(_onChangeCallbacks[pluginApiIdentifiers])) {
+    _onChangeCallbacks[pluginApiIdentifiers] = [];
   }
 
-  _filterContentCallbacks[pluginApiIdentifiers].push(contentFunction);
+  _onChangeCallbacks[pluginApiIdentifiers].push(mutationFunction);
 }
 
-let _modifyContentCallbacks = {};
-function modifyContent(pluginApiIdentifiers, contentFunction) {
-  if (isNone(_modifyContentCallbacks[pluginApiIdentifiers])) {
-    _modifyContentCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _modifyContentCallbacks[pluginApiIdentifiers].push(contentFunction);
-}
-
-let _modifyHeaderComputedContentCallbacks = {};
-function modifyHeaderComputedContent(pluginApiIdentifiers, contentFunction) {
-  if (isNone(_modifyHeaderComputedContentCallbacks[pluginApiIdentifiers])) {
-    _modifyHeaderComputedContentCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _modifyHeaderComputedContentCallbacks[pluginApiIdentifiers].push(
-    contentFunction
-  );
-}
-
-let _modifyNoSelectionCallbacks = {};
-function modifyNoSelection(pluginApiIdentifiers, contentFunction) {
-  if (isNone(_modifyNoSelectionCallbacks[pluginApiIdentifiers])) {
-    _modifyNoSelectionCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _modifyNoSelectionCallbacks[pluginApiIdentifiers].push(contentFunction);
-}
-
-let _modifyCollectionHeaderCallbacks = {};
-function modifyCollectionHeader(pluginApiIdentifiers, contentFunction) {
-  if (isNone(_modifyCollectionHeaderCallbacks[pluginApiIdentifiers])) {
-    _modifyCollectionHeaderCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _modifyCollectionHeaderCallbacks[pluginApiIdentifiers].push(contentFunction);
-}
-
-let _onSelectCallbacks = {};
-function onSelect(pluginApiIdentifiers, mutationFunction) {
-  if (isNone(_onSelectCallbacks[pluginApiIdentifiers])) {
-    _onSelectCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _onSelectCallbacks[pluginApiIdentifiers].push(mutationFunction);
-}
-
-let _onOpenCallbacks = {};
-function onOpen(pluginApiIdentifiers, mutationFunction) {
-  if (isNone(_onOpenCallbacks[pluginApiIdentifiers])) {
-    _onOpenCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _onOpenCallbacks[pluginApiIdentifiers].push(mutationFunction);
-}
-
-let _onCloseCallbacks = {};
-function onClose(pluginApiIdentifiers, mutationFunction) {
-  if (isNone(_onCloseCallbacks[pluginApiIdentifiers])) {
-    _onCloseCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _onCloseCallbacks[pluginApiIdentifiers].push(mutationFunction);
-}
-
-let _onInputCallbacks = {};
-function onInput(pluginApiIdentifiers, mutationFunction) {
-  if (isNone(_onInputCallbacks[pluginApiIdentifiers])) {
-    _onInputCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _onInputCallbacks[pluginApiIdentifiers].push(mutationFunction);
-}
-
-export function applyContentPluginApiCallbacks(
-  identifiers,
-  content,
-  selectKit
-) {
-  identifiers.forEach(key => {
+export function applyContentPluginApiCallbacks(content, component) {
+  makeArray(component.pluginApiIdentifiers).forEach(key => {
     (_prependContentCallbacks[key] || []).forEach(c => {
-      content = makeArray(c(selectKit, content)).concat(content);
+      content = makeArray(c(component, content)).concat(content);
     });
     (_appendContentCallbacks[key] || []).forEach(c => {
-      content = content.concat(makeArray(c(selectKit, content)));
-    });
-    const filterCallbacks = _filterContentCallbacks[key] || [];
-    if (filterCallbacks.length) {
-      content = content.filter(c => {
-        let kept = true;
-        filterCallbacks.forEach(cb => {
-          kept = cb(selectKit, c);
-        });
-        return kept;
-      });
-    }
-    (_modifyContentCallbacks[key] || []).forEach(c => {
-      content = c(selectKit, content);
+      content = content.concat(makeArray(c(component, content)));
     });
   });
 
   return content;
 }
 
-export function applyHeaderContentPluginApiCallbacks(
-  identifiers,
-  content,
-  context
-) {
-  identifiers.forEach(key => {
-    (_modifyHeaderComputedContentCallbacks[key] || []).forEach(c => {
-      content = c(context, content);
-    });
-  });
-
-  return content;
-}
-export function applyModifyNoSelectionPluginApiCallbacks(
-  identifiers,
-  content,
-  context
-) {
-  identifiers.forEach(key => {
-    (_modifyNoSelectionCallbacks[key] || []).forEach(c => {
-      content = c(context, content);
-    });
-  });
-
-  return content;
-}
-
-export function applyCollectionHeaderCallbacks(
-  identifiers,
-  content,
-  selectKit
-) {
-  identifiers.forEach(key => {
-    (_modifyCollectionHeaderCallbacks[key] || []).forEach(c => {
-      content = c(selectKit, content);
-    });
-  });
-
-  return content;
-}
-
-export function applyOnSelectPluginApiCallbacks(identifiers, val, selectKit) {
-  identifiers.forEach(key => {
-    (_onSelectCallbacks[key] || []).forEach(c => c(selectKit, val));
+export function applyOnChangePluginApiCallbacks(value, items, component) {
+  makeArray(component.pluginApiIdentifiers).forEach(key => {
+    (_onChangeCallbacks[key] || []).forEach(c => c(component, value, items));
   });
 }
 
-export function applyOnOpenPluginApiCallbacks(identifiers, selectKit, event) {
-  let keepBubbling = true;
-  identifiers.forEach(key => {
-    (_onOpenCallbacks[key] || []).forEach(
-      c => (keepBubbling = c(selectKit, event))
-    );
-  });
-  return keepBubbling;
-}
-
-export function applyOnClosePluginApiCallbacks(identifiers, selectKit, event) {
-  let keepBubbling = true;
-  identifiers.forEach(key => {
-    (_onCloseCallbacks[key] || []).forEach(
-      c => (keepBubbling = c(selectKit, event))
-    );
-  });
-  return keepBubbling;
-}
-
-export function applyOnInputPluginApiCallbacks(identifiers, event, selectKit) {
-  let keepBubbling = true;
-  identifiers.forEach(key => {
-    (_onInputCallbacks[key] || []).forEach(
-      c => (keepBubbling = c(selectKit, event))
-    );
-  });
-  return keepBubbling;
-}
-
-export function modifySelectKit(pluginApiIdentifiers) {
+export function modifySelectKit(targetedIdentifier) {
   return {
-    appendContent: content => {
-      appendContent(pluginApiIdentifiers, () => {
-        return content;
-      });
-      return modifySelectKit(pluginApiIdentifiers);
+    appendContent: callback => {
+      appendContent(targetedIdentifier, callback);
+      return modifySelectKit(targetedIdentifier);
     },
-    prependContent: content => {
-      prependContent(pluginApiIdentifiers, () => {
-        return content;
-      });
-      return modifySelectKit(pluginApiIdentifiers);
+    prependContent: callback => {
+      prependContent(targetedIdentifier, callback);
+      return modifySelectKit(targetedIdentifier);
     },
-    filterContent: filterFunction => {
-      filterContent(pluginApiIdentifiers, filterFunction);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    modifyContent: callback => {
-      modifyContent(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    modifyHeaderComputedContent: callback => {
-      modifyHeaderComputedContent(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    modifySelection: callback => {
-      modifyHeaderComputedContent(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    modifyNoSelection: callback => {
-      modifyNoSelection(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    modifyCollectionHeader: callback => {
-      modifyCollectionHeader(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    onSelect: callback => {
-      onSelect(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    onClose: callback => {
-      onClose(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    onOpen: callback => {
-      onOpen(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
-    },
-    onInput: callback => {
-      onInput(pluginApiIdentifiers, callback);
-      return modifySelectKit(pluginApiIdentifiers);
+    onChange: callback => {
+      onChange(targetedIdentifier, callback);
+      return modifySelectKit(targetedIdentifier);
     }
   };
 }
@@ -270,15 +68,7 @@ export function modifySelectKit(pluginApiIdentifiers) {
 export function clearCallbacks() {
   _appendContentCallbacks = {};
   _prependContentCallbacks = {};
-  _filterContentCallbacks = {};
-  _modifyNoSelectionCallbacks = {};
-  _modifyContentCallbacks = {};
-  _modifyHeaderComputedContentCallbacks = {};
-  _modifyCollectionHeaderCallbacks = {};
-  _onSelectCallbacks = {};
-  _onCloseCallbacks = {};
-  _onOpenCallbacks = {};
-  _onInputCallbacks = {};
+  _onChangeCallbacks = {};
 }
 
 const EMPTY_ARRAY = Object.freeze([]);