How to create a custom SPECCER function

[phun-ky]

If you only want one of the features provided, you can do something like this, to make sure you only use what you need:

import { dissect } from '@phun-ky/speccer';

/**
 * helper functions
 */
const removeAll = (selector, el = document) => {
  [].forEach.call(el.querySelectorAll(selector),  (e) => {
    e.remove();
  });
};
const debounce = function (func, wait, immediate) {
  var timeout;

  return function () {
    var context = this,
      args = arguments;
    var later = function () {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};
/**
 * Custom SPECCER function
 */
const run = () => {
  const { element } = dissect;

  // Remove all SPECCER elements
  removeAll('.ph-speccer.speccer');
  
  const elsToBeDissected = document.querySelectorAll('[data-anatomy-section]');
  
  for (const el of elsToBeDissected) {
    element(el);
  }
}
/**
 * Code to initiate and resize
 */
const speccerEventFunc = debounce(() => {
    run();
  }, 100);

  window.removeEventListener('resize', speccerEventFunc);
  window.addEventListener('resize', speccerEventFunc);

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', run);
} else {
  // `DOMContentLoaded` already fired
  run();
}