Prepare 2.2.1 release

CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## Version 2.2.1 (2024-05-20)
+
+## Fixed
+
+* Add UMD build of Coconned missing in 2.2.0 
+
 ## Version 2.2.0 (2024-05-20)
 
 ## Added

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    cocooned (2.2.0)
+    cocooned (2.2.1)
       rails (>= 6.0, <= 7.2)
 
 GEM

app/assets/javascripts/cocooned.js

@@ -248,63 +248,10 @@
     }
   }
 
-  /**
-   * 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
-      }
-
-      node.setAttribute(this.attribute, value.replace(this.#regexp, this.#replacement(id)));
-    }
-
-    /* Protected and private attributes and methods */
-    #name
-    #startDelimiter
-    #endDelimiter
-
-    #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')
-    }
-
-    #escape (string) {
-      return (string && reHasRegExpChar.test(string))
-        ? string.replace(reRegExpChar, '\\$&')
-        : (string || '')
-    }
-  }
-
   class Builder {
-    constructor (documentFragment, association) {
+    constructor (documentFragment, replacements) {
       this.#documentFragment = documentFragment;
-      this.#association = association;
-      this.#replacements = [
-        new Replacement('for', association, '_'),
-        new Replacement('id', association, '_'),
-        new Replacement('name', association, '[', ']')
-      ];
+      this.#replacements = replacements;
     }
 
     build (id) {
@@ -314,13 +261,14 @@
     }
 
     /* Protected and private attributes and methods */
-    #association
     #documentFragment
     #replacements
 
     #applyReplacements (node, id) {
       this.#replacements.forEach(replacement => {
-        node.querySelectorAll(`*[${replacement.attribute}]`).forEach(node => replacement.apply(node, id));
+        node.querySelectorAll(`${replacement.tag}[${replacement.attribute}]`).forEach(node => {
+          return replacement.apply(node, id)
+        });
       });
 
       node.querySelectorAll('template').forEach(template => {
@@ -478,7 +426,10 @@
         return null
       }
 
-      return new Builder(template.content, `new_${this.#dataset.association}`)
+      return new Builder(
+        template.content,
+        this.#cocooned.replacementsFor(`new_${this.#dataset.association}`)
+      )
     }
 
     _extractCount () {
@@ -675,6 +626,56 @@
     }
   }
 
+  /**
+   * Borrowed from Lodash
+   * See https://lodash.com/docs/#escapeRegExp
+   */
+  const reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+  const reHasRegExpChar = RegExp(reRegExpChar.source);
+
+  class Replacement {
+    attribute
+    tag
+
+    constructor ({ tag = '*', attribute, association, delimiters }) {
+      this.attribute = attribute;
+      this.tag = tag;
+
+      this.#association = association;
+      this.#startDelimiter = delimiters[0];
+      this.#endDelimiter = delimiters[delimiters.length - 1];
+    }
+
+    apply (node, id) {
+      const value = node.getAttribute(this.attribute);
+      if (!this.#regexp.test(value)) {
+        return
+      }
+
+      node.setAttribute(this.attribute, value.replace(this.#regexp, this.#replacement(id)));
+    }
+
+    /* Protected and private attributes and methods */
+    #association
+    #startDelimiter
+    #endDelimiter
+
+    #replacement (id) {
+      return `${this.#startDelimiter}${id}${this.#endDelimiter}$1`
+    }
+
+    get #regexp () {
+      const escaped = this.#escape(`${this.#startDelimiter}${this.#association}${this.#endDelimiter}`);
+      return new RegExp(`${escaped}(.*?)`, 'g')
+    }
+
+    #escape (string) {
+      return (string && reHasRegExpChar.test(string))
+        ? string.replace(reRegExpChar, '\\$&')
+        : (string || '')
+    }
+  }
+
   function clickHandler$1 (callback) {
     return e => {
       e.preventDefault();
@@ -708,6 +709,18 @@
   }
 
   const coreMixin = (Base) => class extends Base {
+    static registerReplacement ({ tag = '*', attribute, delimiters }) {
+      this.__replacements.push({ tag, attribute, delimiters });
+    }
+
+    static get replacements () {
+      return this.__replacements
+    }
+
+    static replacementsFor (association) {
+      return this.replacements.map(r => new Replacement({ association, ...r }))
+    }
+
     static get selectors () {
       return {
         ...super.selectors,
@@ -736,6 +749,21 @@
         })
       );
     }
+
+    replacementsFor (association) {
+      return this.constructor.replacementsFor(association)
+    }
+
+    /* Protected and private attributes and methods */
+    static __replacements = [
+      // Default attributes
+      { tag: 'label', attribute: 'for', delimiters: ['_'] },
+      { tag: '*', attribute: 'id', delimiters: ['_'] },
+      { tag: '*', attribute: 'name', delimiters: ['[', ']'] },
+
+      // Compatibility with Trix. See #65 on Github.
+      { tag: 'trix-editor', attribute: 'input', delimiters: ['_'] }
+    ]
   };
 
   let Cocooned$1 = class Cocooned extends coreMixin(Base) {

lib/cocooned/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Cocooned
-  VERSION = '2.2.0'
+  VERSION = '2.2.1'
 end

npm/__tests__/fixtures/rails.json

@@ -1 +1 @@
-{"link":"<form action=\"/lists\" accept-charset=\"UTF-8\" method=\"post\">\n\n  <div class=\"field\">\n    <label for=\"list_name\">Name</label>\n    <input type=\"text\" name=\"list[name]\" id=\"list_name\">\n  </div>\n\n  <h3>Items</h3>\n  <div class=\"cocooned-container\" data-cocooned-container=\"true\" data-cocooned-options='{\"limit\":5,\"reorderable\":true}'>\n    \n    <div>\n        <a partial=\"lists/form/item\" class=\"cocooned-add add_fields\" data-association=\"items\" data-template=\"e0a4b684-0ce0-4f89-ac21-d4e9dd23ad44\" data-association-insertion-count=\"1\" data-cocooned-trigger=\"add\" href=\"#\">Add item</a><template data-name=\"e0a4b684-0ce0-4f89-ac21-d4e9dd23ad44\"><div class=\"cocooned-item nested-fields\" data-cocooned-item=\"true\">\n    <input value=\"false\" autocomplete=\"off\" type=\"hidden\" name=\"list[items_attributes][new_items][_destroy]\" id=\"list_items_attributes_new_items__destroy\"><a class=\"cocooned-remove remove_fields\" data-cocooned-trigger=\"remove\" data-cocooned-persisted=\"false\" href=\"#\">Remove</a>\n    <a class=\"cocooned-move-up\" data-cocooned-trigger=\"up\" href=\"#\">Move up</a>\n    <a class=\"cocooned-move-down\" data-cocooned-trigger=\"down\" href=\"#\">Move down</a>\n\n  <label for=\"list_items_attributes_new_items_label\">Label</label>\n  <input type=\"text\" name=\"list[items_attributes][new_items][label]\" id=\"list_items_attributes_new_items_label\">\n  <input autocomplete=\"off\" type=\"hidden\" name=\"list[items_attributes][new_items][position]\" id=\"list_items_attributes_new_items_position\">\n</div></template>\n    </div>\n</div>\n  <div class=\"actions\">\n    <input type=\"submit\" name=\"commit\" value=\"Create List\" data-disable-with=\"Create List\">\n  </div>\n</form>","button":"<form action=\"/lists\" accept-charset=\"UTF-8\" method=\"post\">\n\n  <div class=\"field\">\n    <label for=\"list_name\">Name</label>\n    <input type=\"text\" name=\"list[name]\" id=\"list_name\">\n  </div>\n\n  <h3>Items</h3>\n  <div class=\"cocooned-container\" data-cocooned-container=\"true\" data-cocooned-options='{\"limit\":5,\"reorderable\":true}'>\n    \n    <div>\n        <button name=\"button\" type=\"button\" partial=\"lists/form/item\" class=\"cocooned-add add_fields\" data-association=\"items\" data-template=\"a9302068-8867-4e18-ae9c-7299738dbdc9\" data-association-insertion-count=\"1\" data-cocooned-trigger=\"add\">Add item</button><template data-name=\"a9302068-8867-4e18-ae9c-7299738dbdc9\"><div class=\"cocooned-item nested-fields\" data-cocooned-item=\"true\">\n    <input value=\"false\" autocomplete=\"off\" type=\"hidden\" name=\"list[items_attributes][new_items][_destroy]\" id=\"list_items_attributes_new_items__destroy\"><button name=\"button\" type=\"button\" class=\"cocooned-remove remove_fields\" data-cocooned-trigger=\"remove\" data-cocooned-persisted=\"false\">Remove</button>\n    <button name=\"button\" type=\"button\" class=\"cocooned-move-up\" data-cocooned-trigger=\"up\">Move up</button>\n    <button name=\"button\" type=\"button\" class=\"cocooned-move-down\" data-cocooned-trigger=\"down\">Move down</button>\n\n  <label for=\"list_items_attributes_new_items_label\">Label</label>\n  <input type=\"text\" name=\"list[items_attributes][new_items][label]\" id=\"list_items_attributes_new_items_label\">\n  <input autocomplete=\"off\" type=\"hidden\" name=\"list[items_attributes][new_items][position]\" id=\"list_items_attributes_new_items_position\">\n</div></template>\n    </div>\n</div>\n  <div class=\"actions\">\n    <input type=\"submit\" name=\"commit\" value=\"Create List\" data-disable-with=\"Create List\">\n  </div>\n</form>"}
+{"link":"<form action=\"/lists\" accept-charset=\"UTF-8\" method=\"post\">\n\n  <div class=\"field\">\n    <label for=\"list_name\">Name</label>\n    <input type=\"text\" name=\"list[name]\" id=\"list_name\">\n  </div>\n\n  <h3>Items</h3>\n  <div class=\"cocooned-container\" data-cocooned-container=\"true\" data-cocooned-options='{\"limit\":5,\"reorderable\":true}'>\n    \n    <div>\n        <a partial=\"lists/form/item\" class=\"cocooned-add add_fields\" data-association=\"items\" data-template=\"83a2d416-85e4-4ca3-b80b-23f8ee80c80a\" data-association-insertion-count=\"1\" data-cocooned-trigger=\"add\" href=\"#\">Add item</a><template data-name=\"83a2d416-85e4-4ca3-b80b-23f8ee80c80a\"><div class=\"cocooned-item nested-fields\" data-cocooned-item=\"true\">\n    <input value=\"false\" autocomplete=\"off\" type=\"hidden\" name=\"list[items_attributes][new_items][_destroy]\" id=\"list_items_attributes_new_items__destroy\"><a class=\"cocooned-remove remove_fields\" data-cocooned-trigger=\"remove\" data-cocooned-persisted=\"false\" href=\"#\">Remove</a>\n    <a class=\"cocooned-move-up\" data-cocooned-trigger=\"up\" href=\"#\">Move up</a>\n    <a class=\"cocooned-move-down\" data-cocooned-trigger=\"down\" href=\"#\">Move down</a>\n\n  <label for=\"list_items_attributes_new_items_label\">Label</label>\n  <input type=\"text\" name=\"list[items_attributes][new_items][label]\" id=\"list_items_attributes_new_items_label\">\n  <input autocomplete=\"off\" type=\"hidden\" name=\"list[items_attributes][new_items][position]\" id=\"list_items_attributes_new_items_position\">\n</div></template>\n    </div>\n</div>\n  <div class=\"actions\">\n    <input type=\"submit\" name=\"commit\" value=\"Create List\" data-disable-with=\"Create List\">\n  </div>\n</form>","button":"<form action=\"/lists\" accept-charset=\"UTF-8\" method=\"post\">\n\n  <div class=\"field\">\n    <label for=\"list_name\">Name</label>\n    <input type=\"text\" name=\"list[name]\" id=\"list_name\">\n  </div>\n\n  <h3>Items</h3>\n  <div class=\"cocooned-container\" data-cocooned-container=\"true\" data-cocooned-options='{\"limit\":5,\"reorderable\":true}'>\n    \n    <div>\n        <button name=\"button\" type=\"button\" partial=\"lists/form/item\" class=\"cocooned-add add_fields\" data-association=\"items\" data-template=\"2e109952-ae80-4e49-8443-605fafdedeaf\" data-association-insertion-count=\"1\" data-cocooned-trigger=\"add\">Add item</button><template data-name=\"2e109952-ae80-4e49-8443-605fafdedeaf\"><div class=\"cocooned-item nested-fields\" data-cocooned-item=\"true\">\n    <input value=\"false\" autocomplete=\"off\" type=\"hidden\" name=\"list[items_attributes][new_items][_destroy]\" id=\"list_items_attributes_new_items__destroy\"><button name=\"button\" type=\"button\" class=\"cocooned-remove remove_fields\" data-cocooned-trigger=\"remove\" data-cocooned-persisted=\"false\">Remove</button>\n    <button name=\"button\" type=\"button\" class=\"cocooned-move-up\" data-cocooned-trigger=\"up\">Move up</button>\n    <button name=\"button\" type=\"button\" class=\"cocooned-move-down\" data-cocooned-trigger=\"down\">Move down</button>\n\n  <label for=\"list_items_attributes_new_items_label\">Label</label>\n  <input type=\"text\" name=\"list[items_attributes][new_items][label]\" id=\"list_items_attributes_new_items_label\">\n  <input autocomplete=\"off\" type=\"hidden\" name=\"list[items_attributes][new_items][position]\" id=\"list_items_attributes_new_items_position\">\n</div></template>\n    </div>\n</div>\n  <div class=\"actions\">\n    <input type=\"submit\" name=\"commit\" value=\"Create List\" data-disable-with=\"Create List\">\n  </div>\n</form>"}

package.json

@@ -19,9 +19,9 @@
     "eslint": "^8.25.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.1",
+    "eslint-plugin-jest": "^28.5.0",
     "eslint-plugin-jest-dom": "^5.1.0",
-    "eslint-plugin-n": "^16.2.0",
+    "eslint-plugin-n": "^17.7.0",
     "eslint-plugin-promise": "^6.0.1",
     "givens": "^1.3.9",
     "jest": "^29.1.2",