cocooned 1.4.1 → 2.0.0

data/app/assets/javascripts/cocooned.js

@@ -1,480 +1,1010 @@
-/* globals define */
-
-// Use Universal Module Definition pattern to load Cocooned
-// See https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js
-(function (root, factory) {
-  if (typeof define === 'function' && define.amd) {
-    // AMD. Register as an anonymous module.
-    define(['jquery'], function (jquery) {
-      return (root.Cocooned = factory(jquery));
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Cocooned = factory());
+})(this, (function () { 'use strict';
+
+  class Emitter {
+    constructor (namespaces = ['cocooned']) {
+      this.#namespaces = namespaces;
+    }
+
+    emit (target, type, detail = {}) {
+      return !this.#emitted(target, type, detail).some(e => e.defaultPrevented)
+    }
+
+    /* Protected and private attributes and methods */
+    #namespaces
+
+    #emitted (target, type, detail = {}) {
+      const events = this.#events(type, detail);
+      events.forEach(e => this.#dispatch(target, e));
+
+      return events
+    }
+
+    #dispatch (target, event) {
+      return target.dispatchEvent(event)
+    }
+
+    #events (type, detail) {
+      return this.#namespaces.map(ns => this.#event(`${ns}:${type}`, detail))
+    }
+
+    #event (type, detail) {
+      return new CustomEvent(type, { bubbles: true, cancelable: true, detail })
+    }
+  }
+
+  // Borrowed from <https://stackoverflow.com/a/2117523>
+  function uuidv4 () {
+    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+      (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+    )
+  }
+
+  function hideMarkedForDestruction (cocooned, items) {
+    items.forEach(item => {
+      const destroy = item.querySelector('input[type=hidden][name$="[_destroy]"]');
+      if (destroy === null) {
+        return
+      }
+      if (destroy.getAttribute('value') !== 'true') {
+        return
+      }
+
+      cocooned.hide(item, { animate: false });
     });
-  } else if (typeof module === 'object' && module.exports) {
-    // Node. Does not work with strict CommonJS, but
-    // only CommonJS-like environments that support module.exports,
-    // like Node.
-    module.exports = factory(require('jquery'));
-  } else {
-    // Browser globals
-    root.Cocooned = factory(root.jQuery);
   }
-}(typeof self !== 'undefined' ? self : this, function ($) {
-  var Cocooned = function (container, options) {
-    this.container = $(container);
-    var opts = $.extend({}, this.defaultOptions(), (options || {}));
-
-    // Autoload plugins
-    for (var pluginName in Cocooned.Plugins) {
-      if (Cocooned.Plugins.hasOwnProperty(pluginName)) {
-        var plugin = Cocooned.Plugins[pluginName];
-        var optionName = pluginName.charAt(0).toLowerCase() + pluginName.slice(1);
-
-        if (opts[optionName] !== false) {
-          if (plugin.hasOwnProperty('normalizeConfig') && typeof plugin['normalizeConfig'] === 'function') {
-            opts[optionName] = plugin.normalizeConfig(opts[optionName]);
-          }
-
-          for (var method in plugin) {
-            if (method === 'normalizeConfig') {
-              continue;
-            }
-            if (!plugin.hasOwnProperty(method) || typeof plugin[method] !== 'function') {
-              continue;
-            }
-
-            this[method] = plugin[method];
-          }
-        }
+
+  function defaultAnimator (item, fetch = false) {
+    if (fetch) {
+      item.dataset.cocoonedScrollHeight = item.scrollHeight;
+    }
+
+    return [
+      { height: `${item.dataset.cocoonedScrollHeight}px`, opacity: 1 },
+      { height: `${item.dataset.cocoonedScrollHeight}px`, opacity: 0 },
+      { height: 0, opacity: 0 }
+    ]
+  }
+
+  const instances = Object.create(null);
+
+  class Base {
+    static get defaultOptions () {
+      const element = document.createElement('div');
+      return {
+        animate: ('animate' in element && typeof element.animate === 'function'),
+        animator: defaultAnimator,
+        duration: 450
       }
     }
 
-    this.options = opts;
-    this.init();
-  };
+    static get eventNamespaces () {
+      return ['cocooned']
+    }
 
-  Cocooned.Plugins = {};
-  Cocooned.prototype = {
-
-    elementsCounter: 0,
-
-    // Compatibility with Cocoon
-    // TODO: Remove in 3.0 (Only Cocoon namespaces).
-    namespaces: {
-      events: ['cocooned', 'cocoon']
-    },
-
-    // Compatibility with Cocoon
-    // TODO: Remove in 3.0 (Only Cocoon class names).
-    classes: {
-      // Actions link
-      add: ['cocooned-add', 'add_fields'],
-      remove: ['cocooned-remove', 'remove_fields'],
-      up: ['cocooned-move-up'],
-      down: ['cocooned-move-down'],
-      // Containers
-      container: ['cocooned-container'],
-      item: ['cocooned-item', 'nested-fields']
-    },
-
-    defaultOptions: function () {
-      var options = {};
-
-      for (var moduleName in Cocooned.Plugins) {
-        if (Cocooned.Plugins.hasOwnProperty(moduleName)) {
-          var module = Cocooned.Plugins[moduleName];
-          var optionName = moduleName.charAt(0).toLowerCase() + moduleName.slice(1);
-
-          options[optionName] = module.defaultOptionValue;
-        }
+    static get selectors () {
+      return {
+        container: ['[data-cocooned-container]', '.cocooned-container'],
+        item: ['[data-cocooned-item]', '.cocooned-item']
       }
+    }
 
-      return options;
-    },
+    static getInstance (uuid) {
+      return instances[uuid]
+    }
 
-    notify: function (node, eventType, eventData) {
-      return !(this.namespaces.events.some(function (namespace) {
-        var namespacedEventType = [namespace, eventType].join(':');
-        var event = $.Event(namespacedEventType, eventData);
+    constructor (container, options) {
+      this._container = container;
+      this._uuid = uuidv4();
+      this._options = this.constructor._normalizeOptions({
+        ...this.constructor.defaultOptions,
+        ...('cocoonedOptions' in container.dataset ? JSON.parse(container.dataset.cocoonedOptions) : {}),
+        ...(options || {})
+      });
+    }
 
-        node.trigger(event, [eventData.node, eventData.cocooned]);
+    get container () {
+      return this._container
+    }
 
-        return (event.isPropagationStopped() || event.isDefaultPrevented());
-      }));
-    },
+    get options () {
+      return this._options
+    }
 
-    selector: function (type, selector) {
-      var s = selector || '&';
-      return this.classes[type].map(function (klass) { return s.replace(/&/, '.' + klass); }).join(', ');
-    },
+    start () {
+      this.container.dataset.cocoonedContainer = true;
+      this.container.dataset.cocoonedUuid = this._uuid;
+      instances[this._uuid] = this;
 
-    namespacedNativeEvents: function (type) {
-      var namespaces = this.namespaces.events.map(function (ns) { return '.' + ns; });
-      namespaces.unshift(type);
-      return namespaces.join('');
-    },
+      const hideDestroyed = () => { hideMarkedForDestruction(this, this.items); };
+
+      hideDestroyed();
+      this.container.ownerDocument.addEventListener('page:load', hideDestroyed);
+      this.container.ownerDocument.addEventListener('turbo:load', hideDestroyed);
+      this.container.ownerDocument.addEventListener('turbolinks:load', hideDestroyed);
+    }
 
-    buildId: function () {
-      return (new Date().getTime() + this.elementsCounter++);
-    },
+    notify (node, eventType, eventData) {
+      return this._emitter.emit(node, eventType, eventData)
+    }
 
-    buildContentNode: function (content) {
-      var id = this.buildId();
-      var html = (content || this.content);
-      var braced = '[' + id + ']';
-      var underscored = '_' + id + '_';
+    /* Selections methods */
+    get items () {
+      return Array.from(this.container.querySelectorAll(this._selector('item')))
+        .filter(item => this.toContainer(item) === this.container)
+        .filter(item => !('display' in item.style && item.style.display === 'none'))
+    }
 
-      ['associations', 'association'].forEach(function (a) {
-        html = html.replace(this.regexps[a]['braced'], braced + '$1');
-        html = html.replace(this.regexps[a]['underscored'], underscored + '$1');
-      }, this);
+    toContainer (node) {
+      return node.closest(this._selector('container'))
+    }
 
-      return $(html);
-    },
+    toItem (node) {
+      return node.closest(this._selector('item'))
+    }
 
-    getInsertionNode: function (adder) {
-      var $adder = $(adder);
-      var insertionNode = $adder.data('association-insertion-node');
-      var insertionTraversal = $adder.data('association-insertion-traversal');
+    contains (node) {
+      return this.items.includes(this.toItem(node))
+    }
 
-      if (!insertionNode) {
-        return $adder.parent();
+    hide (item, options = {}) {
+      const opts = this._animationOptions(options);
+      const keyframes = opts.animator(item, true);
+      const after = () => { item.style.display = 'none'; };
+
+      if (!opts.animate) {
+        return Promise.resolve(after()).then(() => item)
       }
+      return item.animate(keyframes, opts.duration).finished.then(after).then(() => item)
+    }
+
+    show (item, options = {}) {
+      const opts = this._animationOptions(options);
+      const keyframes = opts.animator(item, false).reverse();
+      const before = () => { item.style.display = null; };
 
-      if (typeof insertionNode === 'function') {
-        return insertionNode($adder);
+      const promise = Promise.resolve(before());
+      if (!opts.animate) {
+        return promise.then(() => item)
       }
+      return promise.then(() => item.animate(keyframes, opts.duration).finished).then(() => item)
+    }
+
+    /* Protected and private attributes and methods */
+    static _normalizeOptions (options) {
+      return options
+    }
 
-      if (insertionTraversal) {
-        return $adder[insertionTraversal](insertionNode);
+    _container
+    _options
+    __uuid
+    __emitter
+
+    get _emitter () {
+      if (typeof this.__emitter === 'undefined') {
+        this.__emitter = new Emitter(this.constructor.eventNamespaces);
       }
 
-      return insertionNode === 'this' ? $adder : $(insertionNode);
-    },
+      return this.__emitter
+    }
 
-    getInsertionMethod: function (adder) {
-      var $adder = $(adder);
-      return $adder.data('association-insertion-method') || 'before';
-    },
+    _selectors (name) {
+      return this.constructor.selectors[name]
+    }
 
-    getItems: function (selector) {
-      selector = selector || '';
-      var self = this;
-      return $(this.selector('item', selector), this.container).filter(function () {
-        return ($(this).closest(self.selector('container')).get(0) === self.container.get(0));
-      });
-    },
+    _selector (name) {
+      return this._selectors(name).join(', ')
+    }
+
+    _animationOptions (options) {
+      const defaults = (({ animate, animator, duration }) => ({ animate, animator, duration }))(this._options);
+      return { ...defaults, ...options }
+    }
+  }
+
+  class Trigger {
+    constructor (trigger, cocooned) {
+      this._trigger = trigger;
+      this._cocooned = cocooned;
+    }
+
+    get trigger () {
+      return this._trigger
+    }
+
+    handle (event) {
+      throw new TypeError('handle() must be defined in subclasses')
+    }
+
+    /* Protected and private attributes and methods */
+    _cocooned
+    _trigger
 
-    findContainer: function (addLink) {
-      var $adder = $(addLink);
-      var insertionNode = this.getInsertionNode($adder);
-      var insertionMethod = this.getInsertionMethod($adder);
+    get _item () {
+      return this._cocooned.toItem(this._trigger)
+    }
+
+    get _notified () {
+      return this._item
+    }
 
-      switch (insertionMethod) {
-        case 'before':
-        case 'after':
-        case 'replaceWith':
-          return insertionNode.parent();
+    _notify (eventName, originalEvent) {
+      return this._cocooned.notify(this._notified, eventName, this._eventData(originalEvent))
+    }
+
+    _eventData (originalEvent) {
+      return { link: this._trigger, node: this._item, cocooned: this._cocooned, originalEvent }
+    }
+
+    _hide (node, callback) {
+      return this._cocooned.hide(node, callback)
+    }
+
+    _show (node, callback) {
+      return this._cocooned.show(node, callback)
+    }
+  }
 
-        case 'append':
-        case 'prepend':
-        default:
-          return insertionNode;
+  /**
+   * Borrowed from Lodash
+   * See https://lodash.com/docs/#escapeRegExp
+   */
+  const reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+  const reHasRegExpChar = RegExp(reRegExpChar.source);
+
+  class Replacement {
+    attribute
+
+    constructor (attribute, name, startDelimiter, endDelimiter = null) {
+      this.attribute = attribute;
+
+      this.#name = name;
+      this.#startDelimiter = startDelimiter;
+      this.#endDelimiter = endDelimiter || startDelimiter;
+    }
+
+    apply (node, id) {
+      const value = node.getAttribute(this.attribute);
+      if (!this.#regexp.test(value)) {
+        return
       }
-    },
 
-    findItem: function (removeLink) {
-      return $(removeLink).closest(this.selector('item'));
-    },
+      node.setAttribute(this.attribute, value.replace(this.#regexp, this.#replacement(id)));
+    }
+
+    /* Protected and private attributes and methods */
+    #name
+    #startDelimiter
+    #endDelimiter
 
-    init: function () {
-      var self = this;
+    #replacement (id) {
+      return `${this.#startDelimiter}${id}${this.#endDelimiter}$1`
+    }
+
+    get #regexp () {
+      const escaped = this.#escape(`${this.#startDelimiter}${this.#name}${this.#endDelimiter}`);
+      return new RegExp(`${escaped}(.*?)`, 'g')
+    }
 
-      this.addLinks = $(this.selector('add')).filter(function () {
-        var container = self.findContainer(this);
-        return (container.get(0) === self.container.get(0));
+    #escape (string) {
+      return (string && reHasRegExpChar.test(string))
+        ? string.replace(reRegExpChar, '\\$&')
+        : (string || '')
+    }
+  }
+
+  class Builder {
+    constructor (documentFragment, association) {
+      this.#documentFragment = documentFragment;
+      this.#association = association;
+      this.#replacements = [
+        new Replacement('for', association, '_'),
+        new Replacement('id', association, '_'),
+        new Replacement('name', association, '[', ']')
+      ];
+    }
+
+    build (id) {
+      const node = this.#documentFragment.cloneNode(true);
+      this.#replacements.forEach(replacement => {
+        node.querySelectorAll(`*[${replacement.attribute}]`).forEach(node => replacement.apply(node, id));
       });
 
-      var addLink = $(this.addLinks.get(0));
-
-      this.content = addLink.data('association-insertion-template');
-      this.regexps = {
-        association: {
-          braced: new RegExp('\\[new_' + addLink.data('association') + '\\](.*?\\s)', 'g'),
-          underscored: new RegExp('_new_' + addLink.data('association') + '_(\\w*)', 'g')
-        },
-        associations: {
-          braced: new RegExp('\\[new_' + addLink.data('associations') + '\\](.*?\\s)', 'g'),
-          underscored: new RegExp('_new_' + addLink.data('associations') + '_(\\w*)', 'g')
-        }
-      };
-
-      this.initUi();
-      this.bindEvents();
-    },
-
-    initUi: function () {
-      var self = this;
-
-      if (!this.container.attr('id')) {
-        this.container.attr('id', this.buildId());
-      }
-      this.container.addClass(this.classes['container'].join(' '));
-
-      $(function () { self.hideMarkedForDestruction(); });
-      $(document).on('page:load turbolinks:load turbo:load', function () { self.hideMarkedForDestruction(); });
-    },
-
-    bindEvents: function () {
-      var self = this;
-
-      // Bind add links
-      this.addLinks.on(
-        this.namespacedNativeEvents('click'),
-        function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-
-          self.add(this, e);
-        });
-
-      // Bind remove links
-      // (Binded on document instead of container to not bypass click handler defined in jquery_ujs)
-      $(document).on(
-        this.namespacedNativeEvents('click'),
-        this.selector('remove', '#' + this.container.attr('id') + ' &'),
-        function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-
-          self.remove(this, e);
-        });
-
-      // Bind options events
-      $.each(this.options, function (name, value) {
-        var bindMethod = 'bind' + name.charAt(0).toUpperCase() + name.slice(1);
-        if (value && self[bindMethod]) {
-          self[bindMethod]();
+      return node
+    }
+
+    /* Protected and private attributes and methods */
+    #association
+    #documentFragment
+    #replacements
+  }
+
+  class Traverser {
+    constructor (origin, traversal) {
+      this.#origin = origin;
+      this.#traversal = traversal;
+    }
+
+    resolve (selector) {
+      if (this.#traversal in this.#origin && typeof this.#origin[this.#traversal] === 'function') {
+        return this._tryMethod(this.#traversal, selector)
+      }
+
+      if (this.#traversal in this.#origin) {
+        return this._tryProperty(this.#traversal)
+      }
+
+      const method = `_${this.#traversal}`;
+      if (method in this) {
+        return this[method](selector)
+      }
+
+      return null
+    }
+
+    /* Protected and private attributes and methods */
+    #origin
+    #traversal
+
+    _tryMethod (method, selector) {
+      try {
+        const resolved = this.#origin[method](selector);
+        if (resolved instanceof HTMLElement) {
+          return resolved
         }
-      });
-    },
-
-    add: function (adder, originalEvent) {
-      var $adder = $(adder);
-      var insertionMethod = this.getInsertionMethod($adder);
-      var insertionNode = this.getInsertionNode($adder);
-      var contentTemplate = $adder.data('association-insertion-template');
-      var count = parseInt($adder.data('count'), 10) || 1;
-
-      for (var i = 0; i < count; i++) {
-        var contentNode = this.buildContentNode(contentTemplate);
-        var eventData = { link: $adder, node: contentNode, cocooned: this, originalEvent: originalEvent };
-        var afterNode = (insertionMethod === 'replaceWith' ? contentNode : insertionNode);
-
-        // Insertion can be prevented through a 'cocooned:before-insert' event handler
-        if (!this.notify(insertionNode, 'before-insert', eventData)) {
-          return false;
+      } catch (e) {}
+
+      return null
+    }
+
+    _tryProperty (property) {
+      const resolved = this.#origin[property];
+      if (resolved instanceof HTMLElement) {
+        return resolved
+      }
+
+      return null
+    }
+
+    _parent (selector) {
+      if (this.#origin.parentElement.matches(selector)) {
+        return this.#origin.parentElement
+      }
+      return null
+    }
+
+    _prev (selector) {
+      if (this.#origin.previousElementSibling.matches(selector)) {
+        return this.#origin.previousElementSibling
+      }
+      return null
+    }
+
+    _next (selector) {
+      if (this.#origin.nextElementSibling.matches(selector)) {
+        return this.#origin.nextElementSibling
+      }
+      return null
+    }
+
+    _siblings (selector) {
+      return this.#origin.parentElement.querySelector(selector)
+    }
+  }
+
+  class Deprecator {
+    logger
+    package
+    version
+
+    constructor (version, packageName, logger) {
+      this.version = version;
+      this.package = packageName;
+      this.logger = logger;
+    }
+
+    warn (message, replacement = null) {
+      if (message in this.#emitted) {
+        return
+      }
+
+      const warning = `${message}. It will be removed from ${this.package} ${this.version}`;
+      const alternative = (replacement !== null ? `, use ${replacement} instead` : '');
+      this.logger.warn(`DEPRECATION WARNING: ${warning}${alternative}.`);
+
+      this.#emitted[message] = true;
+    }
+
+    /* Protected and private attributes and methods */
+    #emitted = Object.create(null)
+  }
+
+  const deprecators = Object.create(null);
+
+  function deprecator (version, packageName = 'Cocooned', logger = console) {
+    const hash = [version, packageName].join('#');
+    if (!(hash in deprecators)) {
+      deprecators[hash] = new Deprecator(version, packageName, logger);
+    }
+
+    return deprecators[hash]
+  }
+
+  class Extractor {
+    constructor (trigger) {
+      this.#trigger = trigger;
+    }
+
+    extract () {
+      return ['builder', 'count', 'node', 'method'].reduce((options, option) => {
+        // Sadly, this does not seem to work with #privateMethods
+        const method = `_extract${option.charAt(0).toUpperCase() + option.slice(1)}`;
+        const extracted = this[method]();
+        if (extracted !== null) {
+          options[option] = extracted;
         }
 
-        insertionNode[insertionMethod](contentNode);
+        return options
+      }, {})
+    }
+
+    /* Protected and private attributes and methods */
+    #trigger
+
+    get #dataset () {
+      return this.#trigger.dataset
+    }
+
+    _extractBuilder () {
+      if (!('template' in this.#dataset && 'association' in this.#dataset)) {
+        return null
+      }
+
+      const template = document.querySelector(`template[data-name="${this.#dataset.template}"]`);
+      if (template === null) {
+        return null
+      }
+
+      return new Builder(template.content, `new_${this.#dataset.association}`)
+    }
+
+    _extractCount () {
+      if ('associationInsertionCount' in this.#dataset) {
+        return parseInt(this.#dataset.associationInsertionCount, 10)
+      }
+
+      if ('count' in this.#dataset) {
+        return parseInt(this.#dataset.count, 10)
+      }
+
+      return null
+    }
+
+    _extractMethod () {
+      if ('associationInsertionMethod' in this.#dataset) {
+        return this.#dataset.associationInsertionMethod
+      }
+
+      return 'before'
+    }
+
+    _extractNode () {
+      if (!('associationInsertionNode' in this.#dataset)) {
+        return this.#trigger.parentElement
+      }
+
+      const node = this.#dataset.associationInsertionNode;
+      if (node === 'this') {
+        return this.#trigger
+      }
+
+      if (!('associationInsertionTraversal' in this.#dataset)) {
+        return this.#trigger.ownerDocument.querySelector(node)
+      }
+
+      deprecator('3.0').warn('associationInsertionTraversal is deprecated');
+      const traverser = new Traverser(this.#trigger, this.#dataset.associationInsertionTraversal);
+
+      return traverser.resolve(node)
+    }
+  }
+
+  class Validator {
+    static validates (options) {
+      const validator = new Validator(options);
+      return validator.validates()
+    }
+
+    constructor (options) {
+      this.#options = options;
+    }
+
+    validates () {
+      const optionNames = new Set(Object.keys(this.#options));
+      const expected = new Set(['builder', 'count', 'node', 'method']);
+      const missing = new Set(Array.from(expected.values()).filter(key => !optionNames.has(key)));
+
+      if (missing.size !== 0) {
+        throw new TypeError(`Missing options: ${Array.from(missing.values()).join(', ')}`)
+      }
+
+      this._validateBuilder();
+      this._validateMethod();
+    }
+
+    /* Protected and private attributes and methods */
+    #options
 
-        this.notify(afterNode, 'after-insert', eventData);
+    _validateBuilder () {
+      const builder = this.#options.builder;
+      if (!(builder instanceof Builder)) {
+        throw new TypeError(
+          `Invalid builder option: instance of Builder expected, got ${builder.constructor.name}`
+        )
       }
-    },
+    }
 
-    remove: function (remover, originalEvent) {
-      var self = this;
-      var $remover = $(remover);
-      var nodeToDelete = this.findItem($remover);
-      var triggerNode = nodeToDelete.parent();
-      var eventData = { link: $remover, node: nodeToDelete, cocooned: this, originalEvent: originalEvent };
+    _validateMethod () {
+      const method = this.#options.method;
+      const supported = ['after', 'before', 'append', 'prepend', 'replaceWith'];
 
-      // Deletion can be prevented through a 'cocooned:before-remove' event handler
-      if (!this.notify(triggerNode, 'before-remove', eventData)) {
-        return false;
+      if (!supported.includes(method)) {
+        throw new TypeError(
+          `Invalid method option: expected one of ${supported.join(', ')}, got ${method}`
+        )
       }
+    }
+  }
+
+  let counter = 0;
+
+  function uniqueId () {
+    return `${new Date().getTime()}${counter++}`
+  }
+
+  class Add extends Trigger {
+    static create (trigger, cocooned) {
+      const extractor = new Extractor(trigger);
+      return new Add(trigger, cocooned, extractor.extract())
+    }
 
-      var timeout = triggerNode.data('remove-timeout') || 0;
+    constructor (trigger, cocooned, options = {}) {
+      super(trigger, cocooned);
 
-      setTimeout(function () {
-        if ($remover.hasClass('dynamic')) {
-          nodeToDelete.remove();
-        } else {
-          nodeToDelete.find('input[required], select[required]').each(function (index, element) {
-            $(element).removeAttr('required');
-          });
-          $remover.siblings('input[type=hidden][name$="[_destroy]"]').val('true');
-          nodeToDelete.hide();
+      this.#options = { ...this.#options, ...options };
+      Validator.validates(this.#options);
+    }
+
+    get insertionNode () {
+      return this.#options.node
+    }
+
+    handle (event) {
+      for (let i = 0; i < this.#options.count; i++) {
+        this.#item = this._build();
+
+        // Insert can be prevented through a 'cocooned:before-insert' event handler
+        if (!this._notify('before-insert', event)) {
+          return false
         }
-        self.notify(triggerNode, 'after-remove', eventData);
-      }, timeout);
-    },
-
-    hideMarkedForDestruction: function () {
-      var self = this;
-      $(this.selector('remove', '&.existing.destroyed'), this.container).each(function (i, removeLink) {
-        var node = self.findItem(removeLink);
-        node.hide();
+
+        this._insert();
+        this._notify('after-insert', event);
+      }
+    }
+
+    /* Protected and private attributes and methods */
+    #item
+    #options = {
+      count: 1
+      // Other expected options:
+      // builder: A Builder instance
+      // method: Insertion method (one of: append, prepend, before, after, replaceWith)
+      // node: Insertion Node as a DOM Element
+    }
+
+    get _item () {
+      return this.#item
+    }
+
+    get _notified () {
+      return this.#options.node
+    }
+
+    _insert () {
+      this.#options.node[this.#options.method](this._item);
+    }
+
+    _build () {
+      return this.#options.builder.build(uniqueId()).firstElementChild
+    }
+  }
+
+  class Remove extends Trigger {
+    handle (event) {
+      // Removal can be prevented through a 'cocooned:before-remove' event handler
+      if (!this._notify('before-remove', event)) {
+        return false
+      }
+
+      this._hide(this._item).then(() => {
+        this._remove();
+        this._notify('after-remove', event);
       });
     }
+
+    /* Protected and private attributes and methods */
+    #notified
+
+    // Dynamic nodes are plainly removed from document, so we need to trigger
+    // events on their parent and memoize it so we still can find it after removal
+    get _notified () {
+      if (typeof this.#notified === 'undefined') {
+        this.#notified = this._item.parentElement;
+      }
+
+      return this.#notified
+    }
+
+    _remove () {
+      this._removable() ? this._item.remove() : this._markForDestruction();
+    }
+
+    _removable () {
+      return this._trigger.matches('.dynamic') ||
+        ('cocoonedPersisted' in this._trigger.dataset && this._trigger.dataset.cocoonedPersisted === 'false')
+    }
+
+    _markForDestruction () {
+      this._item.querySelector('input[type=hidden][name$="[_destroy]"]').setAttribute('value', 'true');
+      this._item.querySelectorAll('input[required], select[required]')
+        .forEach(input => input.removeAttribute('required'));
+    }
+  }
+
+  function clickHandler$1 (callback) {
+    return e => {
+      e.preventDefault();
+      callback(e);
+    }
+  }
+
+  function delegatedClickHandler (selector, callback) {
+    return e => {
+      const { target } = e;
+      if (!target.matches(selector)) {
+        return
+      }
+
+      e.preventDefault();
+      callback(e);
+    }
+  }
+
+  const coreMixin = (Base) => class extends Base {
+    static get selectors () {
+      return {
+        ...super.selectors,
+        'triggers.add': ['[data-cocooned-trigger="add"]', '.cocooned-add'],
+        'triggers.remove': ['[data-cocooned-trigger="remove"]', '.cocooned-remove']
+      }
+    }
+
+    start () {
+      super.start();
+
+      this.addTriggers = Array.from(this.container.ownerDocument.querySelectorAll(this._selector('triggers.add')))
+        .map(element => Add.create(element, this))
+        .filter(trigger => this.toContainer(trigger.insertionNode) === this.container);
+
+      this.addTriggers.forEach(add => add.trigger.addEventListener(
+        'click',
+        clickHandler$1((e) => add.handle(e))
+      ));
+
+      this.container.addEventListener(
+        'click',
+        delegatedClickHandler(this._selector('triggers.remove'), (e) => {
+          const trigger = new Remove(e.target, this);
+          trigger.handle(e);
+        })
+      );
+    }
   };
 
-  Cocooned.Plugins.Limit = {
+  let Cocooned$1 = class Cocooned extends coreMixin(Base) {
+    static create (container, options) {
+      if ('cocoonedUuid' in container.dataset) {
+        return Cocooned.getInstance(container.dataset.cocoonedUuid)
+      }
 
-    defaultOptionValue: false,
+      const cocooned = new this.constructor(container, options);
+      cocooned.start();
+
+      return cocooned
+    }
+
+    static start () {
+      document.querySelectorAll('[data-cocooned-container], [data-cocooned-options]')
+        .forEach(element => this.constructor.create(element));
+    }
+  };
 
-    bindLimit: function () {
-      this.limit = this.options['limit'];
-      this.container.on('cocooned:before-insert', function (e) {
-        var cocooned = e.cocooned;
-        if (cocooned.getLength() < cocooned.limit) {
-          return;
+  const limitMixin = (Base) => class extends Base {
+    static get defaultOptions () {
+      return { ...super.defaultOptions, ...{ limit: false } }
+    }
+
+    start () {
+      super.start();
+      if (this.options.limit === false) {
+        return
+      }
+
+      this.container.addEventListener('cocooned:before-insert', e => {
+        if (this.items.length < this.options.limit) {
+          return
         }
 
-        e.stopPropagation();
-        var eventData = { link: e.link, node: e.node, cocooned: cocooned, originalEvent: e };
-        cocooned.notify(cocooned.container, 'limit-reached', eventData);
+        e.preventDefault();
+        this.notify(this.container, 'limit-reached', e.detail);
       });
-    },
-
-    getLength: function () {
-      return this.getItems('&:visible').length;
     }
   };
 
-  Cocooned.Plugins.Reorderable = {
-
-    defaultOptionValue: false,
-    defaultConfig: { startAt: 1 },
-
-    normalizeConfig: function(config) {
-      if (typeof config === 'boolean' && config) {
-        return this.defaultConfig;
-      }
-      return config;
-    },
-
-    bindReorderable: function () {
-      var self = this;
-
-      // Maintain indexes
-      this.container
-        .on('cocooned:after-insert', function (e) { self.reindex(e); })
-        .on('cocooned:after-remove', function (e) { self.reindex(e); })
-        .on('cocooned:after-move', function (e) { self.reindex(e); });
-
-      // Move items
-      this.container.on(
-        this.namespacedNativeEvents('click'),
-        [this.selector('up'), this.selector('down')].join(', '),
-        function (e) {
-          e.preventDefault();
-          e.stopPropagation();
-
-          var node = this;
-          var up = self.classes['up'].some(function (klass) {
-            return node.className.indexOf(klass) !== -1;
-          });
-          self.move(this, up ? 'up' : 'down', e);
-        });
-
-      // Ensure positions are unique before save
-      this.container.closest('form').on(
-        this.namespacedNativeEvents('submit'),
-        function (e) {
-          self.reindex(e);
-        });
-    },
-
-    move: function (moveLink, direction, originalEvent) {
-      var self = this;
-      var $mover = $(moveLink);
-      var node = $mover.closest(this.selector('item'));
-      var siblings = (direction === 'up'
-        ? node.prevAll(this.selector('item', '&:eq(0)'))
-        : node.nextAll(this.selector('item', '&:eq(0)')));
-
-      if (siblings.length === 0) {
-        return;
-      }
-
-      // Move can be prevented through a 'cocooned:before-move' event handler
-      var eventData = { link: $mover, node: node, cocooned: this, originalEvent: originalEvent };
-      if (!self.notify(node, 'before-move', eventData)) {
-        return false;
-      }
-
-      var height = self.container.outerHeight();
-      var width = self.container.outerWidth();
-
-      self.container.css('height', height).css('width', width);
-      self.hide(node, function () {
-        var movedNode = $(this).detach();
-        movedNode[(direction === 'up' ? 'insertBefore' : 'insertAfter')](siblings);
-
-        self.show(movedNode, function () {
-          self.container.css('height', '').css('width', ''); // Object notation does not work here.
-          self.notify(movedNode, 'after-move', eventData);
-        });
+  class Move extends Trigger {
+    handle (event) {
+      if (this._pivotItem === null) {
+        return
+      }
+
+      // Moves can be prevented through a 'cocooned:before-move' event handler
+      if (!this._notify('before-move', event)) {
+        return false
+      }
+
+      this._hide(this._item).then(() => {
+        this._move();
+        this._show(this._item).then(() => this._notify('after-move', event));
       });
-    },
+    }
 
-    reindex: function (originalEvent) {
-      var i = this.options.reorderable.startAt;
-      var nodes = this.getItems('&:visible');
-      var eventData = { link: null, nodes: nodes, cocooned: this, originalEvent: originalEvent };
+    /* Protected and private attributes and methods */
+    get _pivotItem () {
+      throw new TypeError('_pivotItem() must be defined in subclasses')
+    }
+
+    _move () {
+      throw new TypeError('_move() must be defined in subclasses')
+    }
+
+    _findPivotItem (origin, method) {
+      let sibling = origin;
+
+      do {
+        sibling = sibling[method];
+        if (sibling !== null && this._cocooned.contains(sibling)) {
+          break
+        }
+      } while (sibling !== null)
+
+      return sibling
+    }
+  }
+
+  class Up extends Move {
+    /* Protected and private attributes and methods */
+    #pivotItem
+
+    get _pivotItem () {
+      if (typeof this.#pivotItem === 'undefined') {
+        this.#pivotItem = this._findPivotItem(this._item, 'previousElementSibling');
+      }
+
+      return this.#pivotItem
+    }
+
+    _move () {
+      this._pivotItem.before(this._item);
+    }
+  }
+
+  class Down extends Move {
+    /* Protected and private attributes and methods */
+    #pivotItem
+
+    get _pivotItem () {
+      if (typeof this.#pivotItem === 'undefined') {
+        this.#pivotItem = this._findPivotItem(this._item, 'nextElementSibling');
+      }
+
+      return this.#pivotItem
+    }
+
+    _move () {
+      this._pivotItem.after(this._item);
+    }
+  }
+
+  class Reindexer {
+    constructor (cocooned, startAt = 0) {
+      this.#cocooned = cocooned;
+      this.#startAt = startAt;
+    }
 
+    reindex (event) {
       // Reindex can be prevented through a 'cocooned:before-reindex' event handler
-      if (!this.notify(this.container, 'before-reindex', eventData)) {
-        return false;
+      if (!this.#notify('before-reindex', event)) {
+        return false
       }
 
-      nodes.each(function () { $('input[id$=_position]', this).val(i++); });
-      this.notify(this.container, 'after-reindex', eventData);
-    },
+      this.#positionFields.forEach((field, i) => field.setAttribute('value', i + this.#startAt));
+      this.#notify('after-reindex', event);
+    }
 
-    show: function (node, callback) {
-      callback = callback || function () { return true; };
+    /* Protected and private attributes and methods */
+    #cocooned
+    #startAt
 
-      node.addClass('cocooned-visible-item');
-      setTimeout(function () {
-        callback.apply(node);
-        node.removeClass('cocooned-hidden-item');
-      }, 500);
-    },
+    get #positionFields () {
+      return this.#nodes.map(node => node.querySelector('input[name$="[position]"]'))
+    }
 
-    hide: function (node, callback) {
-      node.removeClass('cocooned-visible-item').addClass('cocooned-hidden-item');
-      if (callback) {
-        setTimeout(function () {
-          callback.apply(node);
-        }, 500);
+    get #nodes () {
+      return this.#cocooned.items
+    }
+
+    #notify (eventName, originalEvent) {
+      return this.#cocooned.notify(this.#cocooned.container, eventName, this.#eventData(originalEvent))
+    }
+
+    #eventData (originalEvent) {
+      return { nodes: this.#nodes, cocooned: this.#cocooned, originalEvent }
+    }
+  }
+
+  function clickHandler (selector, cocooned, TriggerClass) {
+    return delegatedClickHandler(selector, (e) => {
+      const trigger = new TriggerClass(e.target, cocooned);
+      trigger.handle(e);
+    })
+  }
+
+  const reorderableMixin = (Base) => class extends Base {
+    static get defaultOptions () {
+      return { ...super.defaultOptions, ...{ reorderable: false } }
+    }
+
+    static get selectors () {
+      return {
+        ...super.selectors,
+        'triggers.up': ['[data-cocooned-trigger="up"]', '.cocooned-move-up'],
+        'triggers.down': ['[data-cocooned-trigger="down"]', '.cocooned-move-down']
       }
     }
-  };
 
-  // Expose a jQuery plugin
-  $.fn.cocooned = function (options) {
-    return this.each(function () {
-      var container = $(this);
-      if (typeof container.data('cocooned') !== 'undefined') {
-        return;
+    start () {
+      super.start();
+      if (this.options.reorderable === false) {
+        return
       }
 
-      var opts = options;
-      if (typeof container.data('cocooned-options') !== 'undefined') {
-        opts = $.extend(opts, container.data('cocooned-options'));
+      this.container.addEventListener('cocooned:after-insert', e => this._reindexer.reindex(e));
+      this.container.addEventListener('cocooned:after-remove', e => this._reindexer.reindex(e));
+      this.container.addEventListener('cocooned:after-move', e => this._reindexer.reindex(e));
+      const form = this.container.closest('form');
+      if (form !== null) {
+        form.addEventListener('submit', e => this._reindexer.reindex(e));
       }
 
-      var cocooned = new Cocooned(container, opts);
-      container.data('cocooned', cocooned);
-    });
+      this.container.addEventListener('click', clickHandler(this._selector('triggers.up'), this, Up));
+      this.container.addEventListener('click', clickHandler(this._selector('triggers.down'), this, Down));
+    }
+
+    /* Protected and private attributes and methods */
+    static _normalizeOptions (options) {
+      const normalized = super._normalizeOptions(options);
+      if (typeof normalized.reorderable === 'boolean' && normalized.reorderable) {
+        normalized.reorderable = { startAt: 1 };
+      }
+
+      return normalized
+    }
+
+    #reindexer
+
+    get _reindexer () {
+      if (typeof this.#reindexer === 'undefined') {
+        this.#reindexer = new Reindexer(this, this.options.reorderable.startAt);
+      }
+
+      return this.#reindexer
+    }
+  };
+
+  const cocoonSupportMixin = (Base) => class extends Base {
+    static get eventNamespaces () {
+      return [...super.eventNamespaces, 'cocoon']
+    }
+
+    static get selectors () {
+      const selectors = super.selectors;
+      selectors.item.push('.nested-fields');
+      selectors['triggers.add'].push('.add_fields');
+      selectors['triggers.remove'].push('.remove_fields');
+
+      return selectors
+    }
+  };
+
+  const findInsertionNode = function (trigger, $) {
+    const insertionNode = trigger.data('association-insertion-node');
+    const insertionTraversal = trigger.data('association-insertion-traversal');
+
+    if (!insertionNode) return trigger.parent()
+    if (typeof insertionNode === 'function') return insertionNode(trigger)
+    if (insertionTraversal) return trigger[insertionTraversal](insertionNode)
+    return insertionNode === 'this' ? trigger : $(insertionNode)
+  };
+
+  const findContainer = function (trigger, $) {
+    const $trigger = $(trigger);
+    const insertionNode = findInsertionNode($trigger, $);
+    const insertionMethod = $trigger.data('association-insertion-method') || 'before';
+
+    if (['before', 'after', 'replaceWith'].includes(insertionMethod)) return insertionNode.parent()
+    return insertionNode
+  };
+
+  const cocoonAutoStart = function (jQuery) {
+    jQuery('.add_fields')
+      .map((_i, adder) => findContainer(adder, jQuery))
+      .each((_i, container) => jQuery(container).cocooned());
   };
 
+  class Cocooned extends reorderableMixin(limitMixin(cocoonSupportMixin(Cocooned$1))) {
+    static create (container, options = {}) {
+      if ('cocoonedUuid' in container.dataset) {
+        return Cocooned.getInstance(container.dataset.cocoonedUuid)
+      }
+
+      const cocooned = new Cocooned(container, options);
+      cocooned.start();
+
+      return cocooned
+    }
+
+    static start () {
+      document.querySelectorAll('[data-cocooned-container], [data-cocooned-options]')
+        .forEach(element => Cocooned.create(element));
+    }
+  }
+
+  const jQueryPluginMixin = function (jQuery, Cocooned) {
+    jQuery.fn.cocooned = function (options) {
+      return this.each((_i, el) => Cocooned.create(el, options))
+    };
+  };
+
+  /* global jQuery, $ */
+
+  // Expose a jQuery plugin
+  jQueryPluginMixin(jQuery, Cocooned);
+
   // On-load initialization
-  $(function () {
-    $('*[data-cocooned-options]').each(function (i, el) {
-      $(el).cocooned();
-    });
-  });
+  const cocoonedAutoStart = () => Cocooned.start();
+  $(cocoonedAutoStart);
+
+  $(() => cocoonAutoStart($));
+
+  deprecator('3.0').warn(
+    'Loading @notus.sh/cocooned/cocooned is deprecated',
+    '@notus.sh/cocooned/jquery, @notus.sh/cocooned or `@notus.sh/cocooned/src/cocooned/cocooned`'
+  );
 
   return Cocooned;
+
 }));