stimulus_reflex 3.5.0.pre10 → 3.5.0.rc2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b7cb01c3a44e8b59bd999bc745276af2f32d073e7a96503f229b72681ab482a3
-  data.tar.gz: 2978f4e101687acc6740da064c8d002cd5b137f566e8d9bed5e80a93f7c69942
+  metadata.gz: 332456c0049281bf252fc97db164c2304a45b19b0087b5ca9cfc41288a8c7457
+  data.tar.gz: 5eed33fa8212d85f370167f91868cbc2b1c611daf66286cec0a5d1414136f889
 SHA512:
-  metadata.gz: d39ef8e76cc723f99813eb3bbb45c69954f87a915b35a90fb73e094b59a43eff92a236bafe9f19af3d749c0ad553b2687812f9a7bb487a36349fc12f705e536e
-  data.tar.gz: e632dc8af1e1e7d370b49014f4b8eb1d8ad002f55c8c7e2016a21902c8dc041385aa2360e71dfbd14cc9f2d3e430f094f943fea313b2f87ecb66a8a45f6e0d9a
+  metadata.gz: 608f0f87a1910cc47df7a9e1a2b6a4f6169fc548e575c08ea1ed064a64582a026707a4d9e0898e340437d86957fed85bc0d3c727e3272b2d339a4fb74a5d44bb
+  data.tar.gz: 6c73096dd78ebd2801dddc6c421d21823bf87f51a513c7adcf0c2bfd72d0ebe360b914187ebb728155580a1136c533c4505ffb9f5ed232a7b237927f5ea6a9f9

data/Gemfile.lock

@@ -1,14 +1,14 @@
 PATH
   remote: .
   specs:
-    stimulus_reflex (3.5.0.pre10)
+    stimulus_reflex (3.5.0.rc2)
       actioncable (>= 5.2, < 8)
       actionpack (>= 5.2, < 8)
       actionview (>= 5.2, < 8)
       activesupport (>= 5.2, < 8)
-      cable_ready (>= 5.0.0.pre10)
+      cable_ready (>= 5.0.0.rc2)
       nokogiri (~> 1.0)
-      rack (~> 2.0)
+      rack (>= 2, < 4)
       railties (>= 5.2, < 8)
       redis (>= 4.0, < 6.0)
 
@@ -82,14 +82,14 @@ GEM
       tzinfo (~> 2.0)
     ast (2.4.2)
     builder (3.2.4)
-    cable_ready (5.0.0.pre10)
+    cable_ready (5.0.0.rc2)
       actionpack (>= 5.2)
       actionview (>= 5.2)
       activesupport (>= 5.2)
       railties (>= 5.2)
       thread-local (>= 1.1.0)
-    concurrent-ruby (1.2.0)
-    connection_pool (2.3.0)
+    concurrent-ruby (1.2.2)
+    connection_pool (2.4.0)
     crass (1.0.6)
     date (3.3.3)
     erubi (1.12.0)
@@ -111,7 +111,7 @@ GEM
     marcel (1.0.2)
     method_source (1.0.0)
     mini_mime (1.1.2)
-    minitest (5.17.0)
+    minitest (5.18.0)
     mocha (1.13.0)
     net-imap (0.3.4)
       date
@@ -131,8 +131,8 @@ GEM
     parser (3.2.1.0)
       ast (~> 2.4.1)
     racc (1.6.2)
-    rack (2.2.6.2)
-    rack-test (2.0.2)
+    rack (2.2.6.4)
+    rack-test (2.1.0)
       rack (>= 1.3)
     rails (7.0.4.2)
       actioncable (= 7.0.4.2)
@@ -164,7 +164,7 @@ GEM
     rake (13.0.6)
     redis (5.0.6)
       redis-client (>= 0.9.0)
-    redis-client (0.12.2)
+    redis-client (0.14.0)
       connection_pool
     regexp_parser (2.7.0)
     rexml (3.2.5)

data/README.md

@@ -84,7 +84,7 @@ Please note that we are not actively providing support on Stack Overflow. If you
 
 ## 🚀 Installation and upgrading
 
-CLI and manual setup procedures are fully detailed in the [official docs](https://docs.stimulusreflex.com/setup).
+CLI and manual setup procedures are fully detailed in the [official docs](https://docs.stimulusreflex.com/hello-world/setup.html).
 
 ### Rubygem
 
@@ -109,7 +109,7 @@ yarn add stimulus_reflex
 
 # ...
 
-pin 'stimulus_reflex', to: 'stimulus_reflex.min.js', preload: true
+pin 'stimulus_reflex', to: 'stimulus_reflex.js', preload: true
 ```
 
 #### Rails Asset pipeline (Sprockets):
@@ -117,7 +117,7 @@ pin 'stimulus_reflex', to: 'stimulus_reflex.min.js', preload: true
 ```html+erb
 <!-- app/views/layouts/application.html.erb -->
 
-<%= javascript_include_tag "stimulus_reflex.umd.min.js", "data-turbo-track": "reload" %>
+<%= javascript_include_tag "stimulus_reflex.umd.js", "data-turbo-track": "reload" %>
 ```
 
 ## 🙏 Contributing

data/app/assets/javascripts/stimulus_reflex.js

@@ -1,8 +1,288 @@
 import { Controller } from "@hotwired/stimulus";
 
+import CableReady, { Utils } from "cable_ready";
+
 import { createConsumer } from "@rails/actioncable";
 
-import CableReady, { Utils } from "cable_ready";
+/*!
+ * Toastify js 1.12.0
+ * https://github.com/apvarun/toastify-js
+ * @license MIT licensed
+ *
+ * Copyright (C) 2018 Varun A P
+ */ class Toastify {
+  defaults={
+    oldestFirst: true,
+    text: "Toastify is awesome!",
+    node: undefined,
+    duration: 3e3,
+    selector: undefined,
+    callback: function() {},
+    destination: undefined,
+    newWindow: false,
+    close: false,
+    gravity: "toastify-top",
+    positionLeft: false,
+    position: "",
+    backgroundColor: "",
+    avatar: "",
+    className: "",
+    stopOnFocus: true,
+    onClick: function() {},
+    offset: {
+      x: 0,
+      y: 0
+    },
+    escapeMarkup: true,
+    ariaLive: "polite",
+    style: {
+      background: ""
+    }
+  };
+  constructor(options) {
+    this.version = "1.12.0";
+    this.options = {};
+    this.toastElement = null;
+    this._rootElement = document.body;
+    this._init(options);
+  }
+  showToast() {
+    this.toastElement = this._buildToast();
+    if (typeof this.options.selector === "string") {
+      this._rootElement = document.getElementById(this.options.selector);
+    } else if (this.options.selector instanceof HTMLElement || this.options.selector instanceof ShadowRoot) {
+      this._rootElement = this.options.selector;
+    } else {
+      this._rootElement = document.body;
+    }
+    if (!this._rootElement) {
+      throw "Root element is not defined";
+    }
+    this._rootElement.insertBefore(this.toastElement, this._rootElement.firstChild);
+    this._reposition();
+    if (this.options.duration > 0) {
+      this.toastElement.timeOutValue = window.setTimeout((() => {
+        this._removeElement(this.toastElement);
+      }), this.options.duration);
+    }
+    return this;
+  }
+  hideToast() {
+    if (this.toastElement.timeOutValue) {
+      clearTimeout(this.toastElement.timeOutValue);
+    }
+    this._removeElement(this.toastElement);
+  }
+  _init(options) {
+    this.options = Object.assign(this.defaults, options);
+    if (this.options.backgroundColor) {
+      console.warn('DEPRECATION NOTICE: "backgroundColor" is being deprecated. Please use the "style.background" property.');
+    }
+    this.toastElement = null;
+    this.options.gravity = options.gravity === "bottom" ? "toastify-bottom" : "toastify-top";
+    this.options.stopOnFocus = options.stopOnFocus === undefined ? true : options.stopOnFocus;
+    if (options.backgroundColor) {
+      this.options.style.background = options.backgroundColor;
+    }
+  }
+  _buildToast() {
+    if (!this.options) {
+      throw "Toastify is not initialized";
+    }
+    let divElement = document.createElement("div");
+    divElement.className = `toastify on ${this.options.className}`;
+    divElement.className += ` toastify-${this.options.position}`;
+    divElement.className += ` ${this.options.gravity}`;
+    for (const property in this.options.style) {
+      divElement.style[property] = this.options.style[property];
+    }
+    if (this.options.ariaLive) {
+      divElement.setAttribute("aria-live", this.options.ariaLive);
+    }
+    if (this.options.node && this.options.node.nodeType === Node.ELEMENT_NODE) {
+      divElement.appendChild(this.options.node);
+    } else {
+      if (this.options.escapeMarkup) {
+        divElement.innerText = this.options.text;
+      } else {
+        divElement.innerHTML = this.options.text;
+      }
+      if (this.options.avatar !== "") {
+        let avatarElement = document.createElement("img");
+        avatarElement.src = this.options.avatar;
+        avatarElement.className = "toastify-avatar";
+        if (this.options.position == "left") {
+          divElement.appendChild(avatarElement);
+        } else {
+          divElement.insertAdjacentElement("afterbegin", avatarElement);
+        }
+      }
+    }
+    if (this.options.close === true) {
+      let closeElement = document.createElement("button");
+      closeElement.type = "button";
+      closeElement.setAttribute("aria-label", "Close");
+      closeElement.className = "toast-close";
+      closeElement.innerHTML = "✖";
+      closeElement.addEventListener("click", (event => {
+        event.stopPropagation();
+        this._removeElement(this.toastElement);
+        window.clearTimeout(this.toastElement.timeOutValue);
+      }));
+      const width = window.innerWidth > 0 ? window.innerWidth : screen.width;
+      if (this.options.position == "left" && width > 360) {
+        divElement.insertAdjacentElement("afterbegin", closeElement);
+      } else {
+        divElement.appendChild(closeElement);
+      }
+    }
+    if (this.options.stopOnFocus && this.options.duration > 0) {
+      divElement.addEventListener("mouseover", (event => {
+        window.clearTimeout(divElement.timeOutValue);
+      }));
+      divElement.addEventListener("mouseleave", (() => {
+        divElement.timeOutValue = window.setTimeout((() => {
+          this._removeElement(divElement);
+        }), this.options.duration);
+      }));
+    }
+    if (typeof this.options.destination !== "undefined") {
+      divElement.addEventListener("click", (event => {
+        event.stopPropagation();
+        if (this.options.newWindow === true) {
+          window.open(this.options.destination, "_blank");
+        } else {
+          window.location = this.options.destination;
+        }
+      }));
+    }
+    if (typeof this.options.onClick === "function" && typeof this.options.destination === "undefined") {
+      divElement.addEventListener("click", (event => {
+        event.stopPropagation();
+        this.options.onClick();
+      }));
+    }
+    if (typeof this.options.offset === "object") {
+      const x = this._getAxisOffsetAValue("x", this.options);
+      const y = this._getAxisOffsetAValue("y", this.options);
+      const xOffset = this.options.position == "left" ? x : `-${x}`;
+      const yOffset = this.options.gravity == "toastify-top" ? y : `-${y}`;
+      divElement.style.transform = `translate(${xOffset},${yOffset})`;
+    }
+    return divElement;
+  }
+  _removeElement(toastElement) {
+    toastElement.className = toastElement.className.replace(" on", "");
+    window.setTimeout((() => {
+      if (this.options.node && this.options.node.parentNode) {
+        this.options.node.parentNode.removeChild(this.options.node);
+      }
+      if (toastElement.parentNode) {
+        toastElement.parentNode.removeChild(toastElement);
+      }
+      this.options.callback.call(toastElement);
+      this._reposition();
+    }), 400);
+  }
+  _reposition() {
+    let topLeftOffsetSize = {
+      top: 15,
+      bottom: 15
+    };
+    let topRightOffsetSize = {
+      top: 15,
+      bottom: 15
+    };
+    let offsetSize = {
+      top: 15,
+      bottom: 15
+    };
+    let allToasts = this._rootElement.querySelectorAll(".toastify");
+    let classUsed;
+    for (let i = 0; i < allToasts.length; i++) {
+      if (allToasts[i].classList.contains("toastify-top") === true) {
+        classUsed = "toastify-top";
+      } else {
+        classUsed = "toastify-bottom";
+      }
+      let height = allToasts[i].offsetHeight;
+      classUsed = classUsed.substr(9, classUsed.length - 1);
+      let offset = 15;
+      let width = window.innerWidth > 0 ? window.innerWidth : screen.width;
+      if (width <= 360) {
+        allToasts[i].style[classUsed] = `${offsetSize[classUsed]}px`;
+        offsetSize[classUsed] += height + offset;
+      } else {
+        if (allToasts[i].classList.contains("toastify-left") === true) {
+          allToasts[i].style[classUsed] = `${topLeftOffsetSize[classUsed]}px`;
+          topLeftOffsetSize[classUsed] += height + offset;
+        } else {
+          allToasts[i].style[classUsed] = `${topRightOffsetSize[classUsed]}px`;
+          topRightOffsetSize[classUsed] += height + offset;
+        }
+      }
+    }
+  }
+  _getAxisOffsetAValue(axis, options) {
+    if (options.offset[axis]) {
+      if (isNaN(options.offset[axis])) {
+        return options.offset[axis];
+      } else {
+        return `${options.offset[axis]}px`;
+      }
+    }
+    return "0px";
+  }
+}
+
+function StartToastifyInstance(options) {
+  return new Toastify(options);
+}
+
+CableReady.operations.stimulusReflexVersionMismatch = operation => {
+  const levels = {
+    info: {},
+    success: {
+      background: "#198754",
+      color: "white"
+    },
+    warn: {
+      background: "#ffc107",
+      color: "black"
+    },
+    error: {
+      background: "#dc3545",
+      color: "white"
+    }
+  };
+  const defaults = {
+    selector: setupToastify(),
+    close: true,
+    duration: 30 * 1e3,
+    gravity: "bottom",
+    position: "right",
+    newWindow: true,
+    style: levels[operation.level || "info"]
+  };
+  StartToastifyInstance({
+    ...defaults,
+    ...operation
+  }).showToast();
+};
+
+function setupToastify() {
+  const id = "stimulus-reflex-toast-element";
+  let element = document.querySelector(`#${id}`);
+  if (!element) {
+    element = document.createElement("div");
+    element.id = id;
+    document.documentElement.appendChild(element);
+    const styles = document.createElement("style");
+    styles.innerHTML = `\n      #${id} .toastify {\n         padding: 12px 20px;\n         color: #ffffff;\n         display: inline-block;\n         background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);\n         background: linear-gradient(135deg, #73a5ff, #5477f5);\n         position: fixed;\n         opacity: 0;\n         transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);\n         border-radius: 2px;\n         cursor: pointer;\n         text-decoration: none;\n         max-width: calc(50% - 20px);\n         z-index: 2147483647;\n         bottom: -150px;\n         right: 15px;\n      }\n\n      #${id} .toastify.on {\n        opacity: 1;\n      }\n\n      #${id} .toast-close {\n        background: transparent;\n        border: 0;\n        color: white;\n        cursor: pointer;\n        font-family: inherit;\n        font-size: 1em;\n        opacity: 0.4;\n        padding: 0 5px;\n      }\n    `;
+    document.head.appendChild(styles);
+  }
+  return element;
+}
 
 let deprecationWarnings = true;
 
@@ -170,6 +450,8 @@ const getReflexRoots = element => {
   return list;
 };
 
+const reflexNameToControllerIdentifier = reflexName => reflexName.replace(/([a-z0–9])([A-Z])/g, "$1-$2").replace(/(::)/g, "--").replace(/-reflex$/gi, "").toLowerCase();
+
 const stages = [ "created", "before", "delivered", "queued", "after", "finalized", "success", "error", "halted", "forbidden" ];
 
 let lastReflex;
@@ -326,8 +608,15 @@ class Reflex {
 
 const received = data => {
   if (!data.cableReady) return;
-  if (data.version.replace(".pre", "-pre") !== CableReady.version) {
-    if (Debug$1.enabled) console.error(`Reflex failed due to cable_ready gem/NPM package version mismatch. Package versions must match exactly.\nNote that if you are using pre-release builds, gems use the "x.y.z.preN" version format, while NPM packages use "x.y.z-preN".\n\ncable_ready gem: ${data.version}\ncable_ready NPM: ${CableReady.version}`);
+  if (data.version.replace(".pre", "-pre").replace(".rc", "-rc") !== CableReady.version) {
+    const mismatch = `CableReady failed to execute your reflex action due to a version mismatch between your gem and JavaScript version. Package versions must match exactly.\n\ncable_ready gem: ${data.version}\ncable_ready npm: ${CableReady.version}`;
+    console.error(mismatch);
+    if (Debug$1.enabled) {
+      CableReady.operations.stimulusReflexVersionMismatch({
+        text: mismatch,
+        level: "error"
+      });
+    }
     return;
   }
   let reflexOperations = [];
@@ -656,7 +945,7 @@ const extractDataAttributes = element => {
 
 var name = "stimulus_reflex";
 
-var version = "3.5.0-pre10";
+var version = "3.5.0-rc2";
 
 var description = "Build reactive applications with the Rails tooling you already know and love.";
 
@@ -693,8 +982,9 @@ var scripts = {
   "build:watch": "yarn rollup -wc",
   watch: "yarn build:watch",
   test: "web-test-runner javascript/test/**/*.test.js",
+  "test:watch": "yarn test --watch",
   "docs:dev": "vitepress dev docs",
-  "docs:build": "vitepress build docs",
+  "docs:build": "vitepress build docs && cp docs/_redirects docs/.vitepress/dist",
   "docs:preview": "vitepress preview docs"
 };
 
@@ -703,9 +993,9 @@ var peerDependencies = {
 };
 
 var dependencies = {
-  "@hotwired/stimulus": ">= 3.0, < 4",
-  "@rails/actioncable": ">= 6.0, < 8",
-  cable_ready: "5.0.0-pre10"
+  "@hotwired/stimulus": "^3",
+  "@rails/actioncable": "^6 || ^7",
+  cable_ready: "5.0.0-rc2"
 };
 
 var devDependencies = {
@@ -715,10 +1005,11 @@ var devDependencies = {
   "@rollup/plugin-terser": "^0.4.0",
   "@web/dev-server-esbuild": "^0.3.3",
   "@web/dev-server-rollup": "^0.3.21",
-  "@web/test-runner": "^0.15.0",
+  "@web/test-runner": "^0.15.1",
   "prettier-standard": "^16.4.1",
-  rollup: "^3.17.1",
-  vitepress: "^1.0.0-alpha.47"
+  rollup: "^3.19.1",
+  "toastify-js": "^1.12.0",
+  vitepress: "^1.0.0-alpha.56"
 };
 
 var packageInfo = {
@@ -948,11 +1239,11 @@ const error = (reflex, event) => {
   })));
 };
 
-const localReflexControllers = element => attributeValues(element.getAttribute(Schema.controller)).reduce(((memo, name) => {
-  const controller = App.app.getControllerForElementAndIdentifier(element, name);
-  if (controller && controller.StimulusReflex) memo.push(controller);
-  return memo;
-}), []);
+const localReflexControllers = element => {
+  const potentialIdentifiers = attributeValues(element.getAttribute(Schema.controller));
+  const potentialControllers = potentialIdentifiers.map((identifier => App.app.getControllerForElementAndIdentifier(element, identifier)));
+  return potentialControllers.filter((controller => controller && controller.StimulusReflex));
+};
 
 const allReflexControllers = element => {
   let controllers = [];
@@ -965,8 +1256,9 @@ const allReflexControllers = element => {
 
 const findControllerByReflexName = (reflexName, controllers) => {
   const controller = controllers.find((controller => {
-    if (!controller.identifier) return;
-    return extractReflexName(reflexName).replace(/([a-z0–9])([A-Z])/g, "$1-$2").replace(/(::)/g, "--").toLowerCase() === controller.identifier;
+    if (!controller || !controller.identifier) return;
+    const identifier = reflexNameToControllerIdentifier(extractReflexName(reflexName));
+    return identifier === controller.identifier;
   }));
   return controller || controllers[0];
 };
@@ -976,18 +1268,22 @@ const scanForReflexes = debounce((() => {
   reflexElements.forEach((element => scanForReflexesOnElement(element)));
 }), 20);
 
-const scanForReflexesOnElement = element => {
+const scanForReflexesOnElement = (element, controller = null) => {
   const controllerAttribute = element.getAttribute(Schema.controller);
-  const controllers = attributeValues(controllerAttribute);
+  const controllers = attributeValues(controllerAttribute).filter((controller => controller !== "stimulus-reflex"));
   const reflexAttribute = element.getAttribute(Schema.reflex);
   const reflexAttributeNames = attributeValues(reflexAttribute);
   const actionAttribute = element.getAttribute(Schema.action);
   const actions = attributeValues(actionAttribute).filter((action => !action.includes("#__perform")));
   reflexAttributeNames.forEach((reflexName => {
-    const controller = findControllerByReflexName(reflexName, allReflexControllers(element));
+    const potentialControllers = [ controller ].concat(allReflexControllers(element));
+    controller = findControllerByReflexName(reflexName, potentialControllers);
     const controllerName = controller ? controller.identifier : "stimulus-reflex";
     actions.push(`${reflexName.split("->")[0]}->${controllerName}#__perform`);
-    controllers.push(controllerName);
+    const parentControllerElement = element.closest(`[data-controller~=${controllerName}]`);
+    if (!parentControllerElement) {
+      controllers.push(controllerName);
+    }
   }));
   const controllerValue = attributeValue(controllers);
   const actionValue = attributeValue(actions);
@@ -1114,7 +1410,7 @@ const register = (controller, options = {}) => {
       });
     }
   });
-  scanForReflexesOnElement(controller.element);
+  scanForReflexesOnElement(controller.element, controller);
   emitEvent("stimulus-reflex:controller-registered", {
     detail: {
       controller: controller