cable_ready - npm Package Compare versions

Comparing version 4.0.3 to 4.0.4

cable_ready.js

 import morphdom from 'morphdom';
 
-const dispatch = (name, detail = {}) => {
-  DOMOperations.dispatchEvent({ name, detail });
+const xpathToElement = xpath => {
+  return document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
 };
@@ -11,8 +11,4 @@
   dispatchEvent: config => {
-    let target = document;
-    if (config.selector)
-      target = document.querySelector(config.selector) || document;
-    const event = new Event(config.name);
-    event.detail = config.detail;
-    target.dispatchEvent(event);
+    const { element, name, detail } = config;
+    element.dispatchEvent(new CustomEvent(name, { detail }));
   },
@@ -22,72 +18,64 @@
 
-  morph: config => {
-    let template = document.createElement('template');
-    template.innerHTML = String(config.html).trim();
-    dispatch('cable-ready:before-morph', { config, content: template.content });
-    morphdom(document.querySelector(config.selector), template.content, {
-      childrenOnly: !!config.childrenOnly,
-    });
-    if (config.focusSelector) {
-      document.querySelector(config.focusSelector).focus();
-    }
-    dispatch('cable-ready:after-morph', { config, content: template.content });
+  morph: detail => {
+    const { element, html, childrenOnly, focusSelector } = detail;
+    const template = document.createElement('template');
+    template.innerHTML = String(html).trim();
+    detail = { ...detail, content: template.content };
+    element.dispatchEvent(new CustomEvent('cable-ready:before-morph', { detail }));
+    morphdom(element, template.content, { childrenOnly: !!childrenOnly });
+    if (focusSelector) document.querySelector(focusSelector).focus();
+    element.dispatchEvent(new CustomEvent('cable-ready:after-morph', { detail }));
   },
 
-  innerHtml: config => {
-    dispatch('cable-ready:before-inner-html', config);
-    document.querySelector(config.selector).innerHTML = config.html;
-    if (config.focusSelector) {
-      document.querySelector(config.focusSelector).focus();
-    }
-    dispatch('cable-ready:after-inner-html', config);
+  innerHtml: detail => {
+    const { element, html, focusSelector } = detail;
+    element.dispatchEvent(new CustomEvent('cable-ready:before-inner-html', { detail }));
+    element.innerHTML = html;
+    if (focusSelector) document.querySelector(focusSelector).focus();
+    element.dispatchEvent(new CustomEvent('cable-ready:after-inner-html', { detail }));
   },
 
-  outerHtml: config => {
-    dispatch('cable-ready:before-outer-html', config);
-    const element = document.querySelector(config.selector);
-    element.outerHTML = config.html;
-    if (config.focusSelector) {
-      document.querySelector(config.focusSelector).focus();
-    }
-    dispatch('cable-ready:after-outer-html', config);
+  outerHtml: detail => {
+    const { element, html, focusSelector } = detail;
+    element.dispatchEvent(new CustomEvent('cable-ready:before-outer-html', { detail }));
+    element.outerHTML = html;
+    if (focusSelector) document.querySelector(focusSelector).focus();
+    element.dispatchEvent(new CustomEvent('cable-ready:after-outer-html', { detail }));
   },
 
-  textContent: config => {
-    dispatch('cable-ready:before-text-content', config);
-    document.querySelector(config.selector).textContent = config.text;
-    dispatch('cable-ready:after-text-content', config);
+  textContent: detail => {
+    const { element, text } = detail;
+    element.dispatchEvent(new CustomEvent('cable-ready:before-text-content', { detail }));
+    element.textContent = text;
+    element.dispatchEvent(new CustomEvent('cable-ready:after-text-content', { detail }));
   },
 
-  insertAdjacentHtml: config => {
-    dispatch('cable-ready:before-insert-adjacent-html', config);
-    document
-      .querySelector(config.selector)
-      .insertAdjacentHTML(config.position || 'beforeend', config.html);
-    if (config.focusSelector) {
-      document.querySelector(config.focusSelector).focus();
-    }
-    dispatch('cable-ready:after-insert-adjacent-html', config);
+  insertAdjacentHtml: detail => {
+    const { element, html, position, focusSelector } = detail;
+    element.dispatchEvent(new CustomEvent('cable-ready:before-insert-adjacent-html', { detail }));
+    element.insertAdjacentHTML(position || 'beforeend', html);
+    if (focusSelector) document.querySelector(focusSelector).focus();
+    element.dispatchEvent(new CustomEvent('cable-ready:after-insert-adjacent-html', { detail }));
   },
 
-  insertAdjacentText: config => {
-    dispatch('cable-ready:before-insert-adjacent-text', config);
-    document
-      .querySelector(config.querySelector)
-      .insertAdjacentText(config.position || 'beforeend', config.text);
-    dispatch('cable-ready:after-insert-adjacent-text', config);
+  insertAdjacentText: detail => {
+    const { element, text, position } = detail;
+    element.dispatchEvent(new CustomEvent('cable-ready:before-insert-adjacent-text', { detail }));
+    element.insertAdjacentText(position || 'beforeend', text);
+    element.dispatchEvent(new CustomEvent('cable-ready:after-insert-adjacent-text', { detail }));
   },
 
-  remove: config => {
-    dispatch('cable-ready:before-remove', config);
-    document.querySelector(config.selector).remove();
-    if (config.focusSelector) {
-      document.querySelector(config.focusSelector).focus();
-    }
-    dispatch('cable-ready:after-remove', config);
+  remove: detail => {
+    const { element, focusSelector } = detail;
+    element.dispatchEvent(new CustomEvent('cable-ready:before-remove', { detail }));
+    element.remove();
+    if (focusSelector) document.querySelector(focusSelector).focus();
+    element.dispatchEvent(new CustomEvent('cable-ready:after-remove', { detail }));
   },
 
-  setValue: config => {
-    dispatch('cable-ready:before-set-value', config);
-    document.querySelector(config.selector).value = config.value;
-    dispatch('cable-ready:after-set-value', config);
+  setValue: detail => {
+    const { element, value } = detail;
+    element.dispatchEvent(new CustomEvent('cable-ready:before-set-value', { detail }));
+    element.value = value;
+    element.dispatchEvent(new CustomEvent('cable-ready:after-set-value', { detail }));
   },
@@ -97,14 +85,14 @@
 
-  setAttribute: config => {
-    dispatch('cable-ready:before-set-attribute', config);
-    document
-      .querySelector(config.selector)
-      .setAttribute(config.name, config.value);
-    dispatch('cable-ready:after-set-attribute', config);
+  setAttribute: detail => {
+    const { element, name, value } = detail;
+    element.dispatchEvent(new CustomEvent('cable-ready:before-set-attribute', { detail }));
+    element.setAttribute(name, value);
+    element.dispatchEvent(new CustomEvent('cable-ready:after-set-attribute', { detail }));
   },
 
-  removeAttribute: config => {
-    dispatch('cable-ready:before-remove-attribute', config);
-    document.querySelector(config.selector).removeAttribute(config.name);
-    dispatch('cable-ready:after-remove-attribute', config);
+  removeAttribute: detail => {
+    const { element, name } = detail;
+    element.dispatchEvent(new CustomEvent('cable-ready:before-remove-attribute', { detail }));
+    element.removeAttribute(name);
+    element.dispatchEvent(new CustomEvent('cable-ready:after-remove-attribute', { detail }));
   },
@@ -114,12 +102,14 @@
 
-  addCssClass: config => {
-    dispatch('cable-ready:before-add-css-class', config);
-    document.querySelector(config.selector).classList.add(config.name);
-    dispatch('cable-ready:after-add-css-class', config);
+  addCssClass: detail => {
+    const { element, name } = detail;
+    element.dispatchEvent(new CustomEvent('cable-ready:before-add-css-class', { detail }));
+    element.classList.add(name);
+    element.dispatchEvent(new CustomEvent('cable-ready:after-add-css-class', { detail }));
   },
 
-  removeCssClass: config => {
-    dispatch('cable-ready:before-remove-css-class', config);
-    document.querySelector(config.selector).classList.remove(config.name);
-    dispatch('cable-ready:after-remove-css-class', config);
+  removeCssClass: detail => {
+    const { element, name } = detail;
+    element.dispatchEvent(new CustomEvent('cable-ready:before-remove-css-class', { detail }));
+    element.classList.remove(name);
+    element.dispatchEvent(new CustomEvent('cable-ready:after-remove-css-class', { detail }));
   },
@@ -129,6 +119,7 @@
 
-  setDatasetProperty: config => {
-    dispatch('cable-ready:before-set-dataset-property', config);
-    document.querySelector(config.selector).dataset[config.name] = config.value;
-    dispatch('cable-ready:after-set-dataset-property', config);
+  setDatasetProperty: detail => {
+    const { element, name, value } = detail;
+    element.dispatchEvent(new CustomEvent('cable-ready:before-set-dataset-property', { detail }));
+    element.dataset[name] = value;
+    element.dispatchEvent(new CustomEvent('cable-ready:after-set-dataset-property', { detail }));
   },
@@ -143,4 +134,11 @@ };
         try {
-          const config = entries[i];
-          DOMOperations[name](config);
+          const detail = entries[i];
+          if (detail.selector) {
+            detail.element = detail.xpath
+              ? xpathToElement(detail.selector)
+              : document.querySelector(detail.selector);
+          } else {
+            detail.element = document;
+          }
+          DOMOperations[name](detail);
         } catch (e) {
@@ -147,0 +145,0 @@ console.log(`CableReady detected an error in ${name}! ${e.message}`);

package.json

 {
   "name": "cable_ready",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "main": "./cable_ready.js",
+  "scripts": {
+    "prettier-check": "yarn run prettier --check ./cable_ready.js"
+  },
   "repository": {
@@ -13,3 +16,6 @@ "type": "git",
     "morphdom": "^2.5.6"
+  },
+  "devDependencies": {
+    "prettier": "^1.18.2"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6628

increased by21.77%

Number of package files

3

increased by50%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Lines of code

124

decreased by-1.59%

No dependency changes