stimulus_reflex 3.5.0.pre9 → 3.5.0.pre10

data/app/assets/javascripts/stimulus_reflex.umd.min.js

@@ -1,14 +1,44 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@hotwired/stimulus"), require("cable_ready"), require("@rails/actioncable")) : typeof define === "function" && define.amd ? define([ "exports", "@hotwired/stimulus", "cable_ready", "@rails/actioncable" ], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, 
-  factory(global.StimulusReflex = {}, global.Stimulus, global.CableReady, global.actioncable));
-})(this, (function(exports, stimulus, CableReady, actioncable) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@hotwired/stimulus"), require("@rails/actioncable"), require("cable_ready")) : typeof define === "function" && define.amd ? define([ "exports", "@hotwired/stimulus", "@rails/actioncable", "cable_ready" ], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, 
+  factory(global.StimulusReflex = {}, global.Stimulus, global.ActionCable, global.CableReady));
+})(this, (function(exports, stimulus, actioncable, CableReady) {
   "use strict";
-  function _interopDefaultLegacy(e) {
-    return e && typeof e === "object" && "default" in e ? e : {
-      default: e
-    };
-  }
-  var CableReady__default = _interopDefaultLegacy(CableReady);
+  let deprecationWarnings = true;
+  var Deprecate = {
+    get enabled() {
+      return deprecationWarnings;
+    },
+    get disabled() {
+      return !deprecationWarnings;
+    },
+    get value() {
+      return deprecationWarnings;
+    },
+    set(value) {
+      deprecationWarnings = !!value;
+    },
+    set deprecate(value) {
+      deprecationWarnings = !!value;
+    }
+  };
+  let debugging = false;
+  var Debug$1 = {
+    get enabled() {
+      return debugging;
+    },
+    get disabled() {
+      return !debugging;
+    },
+    get value() {
+      return debugging;
+    },
+    set(value) {
+      debugging = !!value;
+    },
+    set debug(value) {
+      debugging = !!value;
+    }
+  };
   const defaultSchema = {
     reflexAttribute: "data-reflex",
     reflexPermanentAttribute: "data-reflex-permanent",
@@ -29,94 +59,15 @@
         ...application.schema
       };
       for (const attribute in schema) {
-        Object.defineProperty(this, attribute.slice(0, -9), {
-          get: () => schema[attribute]
+        const attributeName = attribute.slice(0, -9);
+        Object.defineProperty(this, attributeName, {
+          get: () => schema[attribute],
+          configurable: true
         });
       }
     }
   };
-  let debugging = false;
-  var Debug$1 = {
-    get enabled() {
-      return debugging;
-    },
-    get disabled() {
-      return !debugging;
-    },
-    get value() {
-      return debugging;
-    },
-    set(value) {
-      debugging = !!value;
-    },
-    set debug(value) {
-      debugging = !!value;
-    }
-  };
-  const reflexes = {};
-  const request = (reflexId, target, args, controller, element, controllerElement) => {
-    const reflex = reflexes[reflexId];
-    if (Debug$1.disabled || reflex.promise.data.suppressLogging) return;
-    reflex.timestamp = new Date;
-    console.log(`↑ stimulus ↑ ${target}`, {
-      reflexId: reflexId,
-      args: args,
-      controller: controller,
-      element: element,
-      controllerElement: controllerElement
-    });
-  };
-  const success = (event, halted) => {
-    const {detail: detail} = event || {};
-    const {selector: selector, payload: payload} = detail || {};
-    const {reflexId: reflexId, target: target, morph: morph} = detail.stimulusReflex || {};
-    const reflex = reflexes[reflexId];
-    if (Debug$1.disabled || reflex.promise.data.suppressLogging) return;
-    const progress = reflex.totalOperations > 1 ? ` ${reflex.completedOperations}/${reflex.totalOperations}` : "";
-    const duration = reflex.timestamp ? `in ${new Date - reflex.timestamp}ms` : "CLONED";
-    const operation = event.type.split(":")[1].split("-").slice(1).join("_");
-    console.log(`↓ reflex ↓ ${target} → ${selector || "∞"}${progress} ${duration}`, {
-      reflexId: reflexId,
-      morph: morph,
-      operation: operation,
-      halted: halted,
-      payload: payload
-    });
-  };
-  const error$1 = event => {
-    const {detail: detail} = event || {};
-    const {reflexId: reflexId, target: target, payload: payload} = detail.stimulusReflex || {};
-    const reflex = reflexes[reflexId];
-    if (Debug$1.disabled || reflex.promise.data.suppressLogging) return;
-    const duration = reflex.timestamp ? `in ${new Date - reflex.timestamp}ms` : "CLONED";
-    console.log(`↓ reflex ↓ ${target} ${duration} %cERROR: ${event.detail.body}`, "color: #f00;", {
-      reflexId: reflexId,
-      payload: payload
-    });
-  };
-  var Log = {
-    request: request,
-    success: success,
-    error: error$1
-  };
-  let deprecationWarnings = true;
-  var Deprecate = {
-    get enabled() {
-      return deprecationWarnings;
-    },
-    get disabled() {
-      return !deprecationWarnings;
-    },
-    get value() {
-      return deprecationWarnings;
-    },
-    set(value) {
-      deprecationWarnings = !!value;
-    },
-    set deprecate(value) {
-      deprecationWarnings = !!value;
-    }
-  };
+  const {debounce: debounce, dispatch: dispatch, xpathToElement: xpathToElement, xpathToElementArray: xpathToElementArray} = CableReady.Utils;
   const uuidv4 = () => {
     const crypto = window.crypto || window.msCrypto;
     return ([ 1e7 ] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)));
@@ -141,33 +92,19 @@
     if (uppercaseFirstLetter) value = value.substr(0, 1).toUpperCase() + value.substr(1);
     return value;
   };
-  const debounce = (callback, delay = 250) => {
-    let timeoutId;
-    return (...args) => {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout((() => {
-        timeoutId = null;
-        callback(...args);
-      }), delay);
-    };
-  };
+  const XPathToElement = xpathToElement;
+  const XPathToArray = xpathToElementArray;
+  const emitEvent = (name, detail = {}) => dispatch(document, name, detail);
   const extractReflexName = reflexString => {
     const match = reflexString.match(/(?:.*->)?(.*?)(?:Reflex)?#/);
     return match ? match[1] : "";
   };
-  const emitEvent = (event, detail) => {
-    document.dispatchEvent(new CustomEvent(event, {
-      bubbles: true,
-      cancelable: false,
-      detail: detail
-    }));
-    if (window.jQuery) window.jQuery(document).trigger(event, detail);
-  };
   const elementToXPath = element => {
     if (element.id !== "") return "//*[@id='" + element.id + "']";
     if (element === document.body) return "/html/body";
+    if (element.nodeName === "HTML") return "/html";
     let ix = 0;
-    const siblings = element?.parentNode ? element.parentNode.childNodes : [];
+    const siblings = element && element.parentNode ? element.parentNode.childNodes : [];
     for (var i = 0; i < siblings.length; i++) {
       const sibling = siblings[i];
       if (sibling === element) {
@@ -181,14 +118,354 @@
       }
     }
   };
-  const XPathToElement = xpath => document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
-  const XPathToArray = (xpath, reverse = false) => {
-    const snapshotList = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-    const snapshots = [];
-    for (let i = 0; i < snapshotList.snapshotLength; i++) {
-      snapshots.push(snapshotList.snapshotItem(i));
+  const elementInvalid = element => element.type === "number" && element.validity && element.validity.badInput;
+  const getReflexElement = (args, element) => args[0] && args[0].nodeType === Node.ELEMENT_NODE ? args.shift() : element;
+  const getReflexOptions = args => {
+    const options = {};
+    if (args[0] && typeof args[0] === "object" && Object.keys(args[0]).filter((key => [ "id", "attrs", "selectors", "reflexId", "resolveLate", "serializeForm", "suppressLogging", "includeInnerHTML", "includeTextContent" ].includes(key))).length) {
+      const opts = args.shift();
+      Object.keys(opts).forEach((o => {
+        if (o === "reflexId") {
+          if (Deprecate.enabled) console.warn("reflexId option will be removed in v4. Use id instead.");
+          options["id"] = opts["reflexId"];
+        } else options[o] = opts[o];
+      }));
+    }
+    return options;
+  };
+  const getReflexRoots = element => {
+    let list = [];
+    while (list.length === 0 && element) {
+      let reflexRoot = element.getAttribute(Schema.reflexRoot);
+      if (reflexRoot) {
+        if (reflexRoot.length === 0 && element.id) reflexRoot = `#${element.id}`;
+        const selectors = reflexRoot.split(",").filter((s => s.trim().length));
+        if (Debug$1.enabled && selectors.length === 0) {
+          console.error(`No value found for ${Schema.reflexRoot}. Add an #id to the element or provide a value for ${Schema.reflexRoot}.`, element);
+        }
+        list = list.concat(selectors.filter((s => document.querySelector(s))));
+      }
+      element = element.parentElement ? element.parentElement.closest(`[${Schema.reflexRoot}]`) : null;
+    }
+    return list;
+  };
+  const stages = [ "created", "before", "delivered", "queued", "after", "finalized", "success", "error", "halted", "forbidden" ];
+  let lastReflex;
+  const reflexes = new Proxy({}, {
+    get: function(target, prop) {
+      if (stages.includes(prop)) return Object.fromEntries(Object.entries(target).filter((([_, reflex]) => reflex.stage === prop))); else if (prop === "last") return lastReflex; else if (prop === "all") return target;
+      return Reflect.get(...arguments);
+    },
+    set: function(target, prop, value) {
+      target[prop] = value;
+      lastReflex = value;
+      return true;
+    }
+  });
+  const invokeLifecycleMethod = (reflex, stage) => {
+    const specificLifecycleMethod = reflex.controller[[ "before", "after", "finalize" ].includes(stage) ? `${stage}${camelize(reflex.action)}` : `${camelize(reflex.action, false)}${camelize(stage)}`];
+    const genericLifecycleMethod = reflex.controller[[ "before", "after", "finalize" ].includes(stage) ? `${stage}Reflex` : `reflex${camelize(stage)}`];
+    if (typeof specificLifecycleMethod === "function") {
+      specificLifecycleMethod.call(reflex.controller, reflex.element, reflex.target, reflex.error, reflex.id, reflex.payload);
+    }
+    if (typeof genericLifecycleMethod === "function") {
+      genericLifecycleMethod.call(reflex.controller, reflex.element, reflex.target, reflex.error, reflex.id, reflex.payload);
+    }
+  };
+  const dispatchLifecycleEvent = (reflex, stage) => {
+    if (!reflex.controller.element.parentElement) {
+      if (Debug$1.enabled && !reflex.warned) {
+        console.warn(`StimulusReflex was not able execute callbacks or emit events for "${stage}" or later life-cycle stages for this Reflex. The StimulusReflex Controller Element is no longer present in the DOM. Could you move the StimulusReflex Controller to an element higher in your DOM?`);
+        reflex.warned = true;
+      }
+      return;
+    }
+    reflex.stage = stage;
+    reflex.lifecycle.push(stage);
+    const event = `stimulus-reflex:${stage}`;
+    const action = `${event}:${reflex.action}`;
+    const detail = {
+      reflex: reflex.target,
+      controller: reflex.controller,
+      id: reflex.id,
+      element: reflex.element,
+      payload: reflex.payload
+    };
+    const options = {
+      bubbles: true,
+      cancelable: false,
+      detail: detail
+    };
+    reflex.controller.element.dispatchEvent(new CustomEvent(event, options));
+    reflex.controller.element.dispatchEvent(new CustomEvent(action, options));
+    if (window.jQuery) {
+      window.jQuery(reflex.controller.element).trigger(event, detail);
+      window.jQuery(reflex.controller.element).trigger(action, detail);
+    }
+  };
+  document.addEventListener("stimulus-reflex:before", (event => invokeLifecycleMethod(reflexes[event.detail.id], "before")), true);
+  document.addEventListener("stimulus-reflex:queued", (event => invokeLifecycleMethod(reflexes[event.detail.id], "queued")), true);
+  document.addEventListener("stimulus-reflex:delivered", (event => invokeLifecycleMethod(reflexes[event.detail.id], "delivered")), true);
+  document.addEventListener("stimulus-reflex:success", (event => {
+    const reflex = reflexes[event.detail.id];
+    invokeLifecycleMethod(reflex, "success");
+    dispatchLifecycleEvent(reflex, "after");
+  }), true);
+  document.addEventListener("stimulus-reflex:nothing", (event => dispatchLifecycleEvent(reflexes[event.detail.id], "success")), true);
+  document.addEventListener("stimulus-reflex:error", (event => {
+    const reflex = reflexes[event.detail.id];
+    invokeLifecycleMethod(reflex, "error");
+    dispatchLifecycleEvent(reflex, "after");
+  }), true);
+  document.addEventListener("stimulus-reflex:halted", (event => invokeLifecycleMethod(reflexes[event.detail.id], "halted")), true);
+  document.addEventListener("stimulus-reflex:forbidden", (event => invokeLifecycleMethod(reflexes[event.detail.id], "forbidden")), true);
+  document.addEventListener("stimulus-reflex:after", (event => invokeLifecycleMethod(reflexes[event.detail.id], "after")), true);
+  document.addEventListener("stimulus-reflex:finalize", (event => invokeLifecycleMethod(reflexes[event.detail.id], "finalize")), true);
+  let app = {};
+  var App = {
+    get app() {
+      return app;
+    },
+    set(application) {
+      app = application;
+    }
+  };
+  let isolationMode = false;
+  var IsolationMode = {
+    get disabled() {
+      return !isolationMode;
+    },
+    set(value) {
+      isolationMode = value;
+      if (Deprecate.enabled && !isolationMode) {
+        document.addEventListener("DOMContentLoaded", (() => console.warn("Deprecation warning: the next version of StimulusReflex will standardize isolation mode, and the isolate option will be removed.\nPlease update your applications to assume that every tab will be isolated. Use CableReady operations to broadcast updates to other tabs and users.")), {
+          once: true
+        });
+      }
+    }
+  };
+  class Reflex {
+    constructor(data, controller) {
+      this.data = data.valueOf();
+      this.controller = controller;
+      this.element = data.reflexElement;
+      this.id = data.id;
+      this.error = null;
+      this.payload = null;
+      this.stage = "created";
+      this.lifecycle = [ "created" ];
+      this.warned = false;
+      this.target = data.target;
+      this.action = data.target.split("#")[1];
+      this.selector = null;
+      this.morph = null;
+      this.operation = null;
+      this.timestamp = new Date;
+      this.cloned = false;
+    }
+    get getPromise() {
+      const promise = new Promise(((resolve, reject) => {
+        this.promise = {
+          resolve: resolve,
+          reject: reject,
+          data: this.data
+        };
+      }));
+      promise.id = this.id;
+      Object.defineProperty(promise, "reflexId", {
+        get() {
+          if (Deprecate.enabled) console.warn("reflexId is deprecated and will be removed from v4. Use id instead.");
+          return this.id;
+        }
+      });
+      promise.reflex = this;
+      if (Debug$1.enabled) promise.catch((() => {}));
+      return promise;
+    }
+  }
+  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}`);
+      return;
+    }
+    let reflexOperations = [];
+    for (let i = data.operations.length - 1; i >= 0; i--) {
+      if (data.operations[i].stimulusReflex) {
+        reflexOperations.push(data.operations[i]);
+        data.operations.splice(i, 1);
+      }
+    }
+    if (reflexOperations.some((operation => operation.stimulusReflex.url !== location.href))) {
+      if (Debug$1.enabled) {
+        console.error("Reflex failed due to mismatched URL.");
+        return;
+      }
+    }
+    let reflexData;
+    if (reflexOperations.length) {
+      reflexData = reflexOperations[0].stimulusReflex;
+      reflexData.payload = reflexOperations[0].payload;
+    }
+    if (reflexData) {
+      const {id: id, payload: payload} = reflexData;
+      let reflex;
+      if (!reflexes[id] && IsolationMode.disabled) {
+        const controllerElement = XPathToElement(reflexData.xpathController);
+        const reflexElement = XPathToElement(reflexData.xpathElement);
+        controllerElement.reflexController = controllerElement.reflexController || {};
+        controllerElement.reflexData = controllerElement.reflexData || {};
+        controllerElement.reflexError = controllerElement.reflexError || {};
+        const controller = App.app.getControllerForElementAndIdentifier(controllerElement, reflexData.reflexController);
+        controllerElement.reflexController[id] = controller;
+        controllerElement.reflexData[id] = reflexData;
+        reflex = new Reflex(reflexData, controller);
+        reflexes[id] = reflex;
+        reflex.cloned = true;
+        reflex.element = reflexElement;
+        controller.lastReflex = reflex;
+        dispatchLifecycleEvent(reflex, "before");
+        reflex.getPromise;
+      } else {
+        reflex = reflexes[id];
+      }
+      if (reflex) {
+        reflex.payload = payload;
+        reflex.totalOperations = reflexOperations.length;
+        reflex.pendingOperations = reflexOperations.length;
+        reflex.completedOperations = 0;
+        reflex.piggybackOperations = data.operations;
+        CableReady.perform(reflexOperations);
+      }
+    } else {
+      if (data.operations.length && reflexes[data.operations[0].reflexId]) {
+        CableReady.perform(data.operations);
+      }
+    }
+  };
+  let consumer;
+  let params;
+  let subscription;
+  let active;
+  const initialize$1 = (consumerValue, paramsValue) => {
+    consumer = consumerValue;
+    params = paramsValue;
+    document.addEventListener("DOMContentLoaded", (() => {
+      active = false;
+      connectionStatusClass();
+      if (Deprecate.enabled && consumerValue) console.warn("Deprecation warning: the next version of StimulusReflex will obtain a reference to consumer via the Stimulus application object.\nPlease add 'application.consumer = consumer' to your index.js after your Stimulus application has been established, and remove the consumer key from your StimulusReflex initialize() options object.");
+    }));
+    document.addEventListener("turbolinks:load", connectionStatusClass);
+    document.addEventListener("turbo:load", connectionStatusClass);
+  };
+  const subscribe = controller => {
+    if (subscription) return;
+    consumer = consumer || controller.application.consumer || actioncable.createConsumer();
+    const {channel: channel} = controller.StimulusReflex;
+    const request = {
+      channel: channel,
+      ...params
+    };
+    const identifier = JSON.stringify(request);
+    subscription = consumer.subscriptions.findAll(identifier)[0] || consumer.subscriptions.create(request, {
+      received: received,
+      connected: connected,
+      rejected: rejected,
+      disconnected: disconnected
+    });
+  };
+  const connected = () => {
+    active = true;
+    connectionStatusClass();
+    emitEvent("stimulus-reflex:connected");
+    Object.values(reflexes.queued).forEach((reflex => {
+      subscription.send(reflex.data);
+      dispatchLifecycleEvent(reflex, "delivered");
+    }));
+  };
+  const rejected = () => {
+    active = false;
+    connectionStatusClass();
+    emitEvent("stimulus-reflex:rejected");
+    if (Debug.enabled) console.warn("Channel subscription was rejected.");
+  };
+  const disconnected = willAttemptReconnect => {
+    active = false;
+    connectionStatusClass();
+    emitEvent("stimulus-reflex:disconnected", willAttemptReconnect);
+  };
+  const deliver = reflex => {
+    if (active) {
+      subscription.send(reflex.data);
+      dispatchLifecycleEvent(reflex, "delivered");
+    } else dispatchLifecycleEvent(reflex, "queued");
+  };
+  const connectionStatusClass = () => {
+    const list = document.body.classList;
+    if (!(list.contains("stimulus-reflex-connected") || list.contains("stimulus-reflex-disconnected"))) {
+      list.add(active ? "stimulus-reflex-connected" : "stimulus-reflex-disconnected");
+      return;
+    }
+    if (active) {
+      list.replace("stimulus-reflex-disconnected", "stimulus-reflex-connected");
+    } else {
+      list.replace("stimulus-reflex-connected", "stimulus-reflex-disconnected");
     }
-    return reverse ? snapshots.reverse() : snapshots;
+  };
+  var ActionCableTransport = {
+    subscribe: subscribe,
+    deliver: deliver,
+    initialize: initialize$1
+  };
+  const request = reflex => {
+    if (Debug$1.disabled || reflex.data.suppressLogging) return;
+    console.log(`↑ stimulus ↑ ${reflex.target}`, {
+      id: reflex.id,
+      args: reflex.data.args,
+      controller: reflex.controller.identifier,
+      element: reflex.element,
+      controllerElement: reflex.controller.element
+    });
+  };
+  const success = reflex => {
+    if (Debug$1.disabled || reflex.data.suppressLogging) return;
+    const output = {
+      id: reflex.id,
+      morph: reflex.morph,
+      payload: reflex.payload
+    };
+    if (reflex.operation !== "dispatch_event") output.operation = reflex.operation;
+    console.log(`↓ reflex ↓ ${reflex.target} → ${reflex.selector || "∞"}${progress(reflex)} ${duration(reflex)}`, output);
+  };
+  const halted$1 = reflex => {
+    if (Debug$1.disabled || reflex.data.suppressLogging) return;
+    console.log(`↓ reflex ↓ ${reflex.target} ${duration(reflex)} %cHALTED`, "color: #ffa500;", {
+      id: reflex.id,
+      payload: reflex.payload
+    });
+  };
+  const forbidden$1 = reflex => {
+    if (Debug$1.disabled || reflex.data.suppressLogging) return;
+    console.log(`↓ reflex ↓ ${reflex.target} ${duration(reflex)} %cFORBIDDEN`, "color: #BF40BF;", {
+      id: reflex.id,
+      payload: reflex.payload
+    });
+  };
+  const error$1 = reflex => {
+    if (Debug$1.disabled || reflex.data.suppressLogging) return;
+    console.log(`↓ reflex ↓ ${reflex.target} ${duration(reflex)} %cERROR: ${reflex.error}`, "color: #f00;", {
+      id: reflex.id,
+      payload: reflex.payload
+    });
+  };
+  const duration = reflex => !reflex.cloned ? `in ${new Date - reflex.timestamp}ms` : "CLONED";
+  const progress = reflex => reflex.totalOperations > 1 ? ` ${reflex.completedOperations}/${reflex.totalOperations}` : "";
+  var Log = {
+    request: request,
+    success: success,
+    halted: halted$1,
+    forbidden: forbidden$1,
+    error: error$1
   };
   const multipleInstances = element => {
     if ([ "checkbox", "radio" ].includes(element.type)) {
@@ -198,8 +475,8 @@
   };
   const collectCheckedOptions = element => Array.from(element.querySelectorAll("option:checked")).concat(Array.from(document.querySelectorAll(`input[type="${element.type}"][name="${element.name}"]`)).filter((elem => elem.checked))).map((o => o.value));
   const attributeValue = (values = []) => {
-    const value = values.filter((v => v && String(v).length)).map((v => v.trim())).join(" ").trim();
-    return value.length ? value : null;
+    const value = Array.from(new Set(values.filter((v => v && String(v).length)).map((v => v.trim())))).join(" ").trim();
+    return value.length > 0 ? value : null;
   };
   const attributeValues = value => {
     if (!value) return [];
@@ -307,217 +584,76 @@
     }
     return attrs;
   };
-  let isolationMode = false;
-  var IsolationMode = {
-    get disabled() {
-      return !isolationMode;
-    },
-    set(value) {
-      isolationMode = value;
-    }
+  var name = "stimulus_reflex";
+  var version = "3.5.0-pre10";
+  var description = "Build reactive applications with the Rails tooling you already know and love.";
+  var keywords = [ "ruby", "rails", "websockets", "actioncable", "turbolinks", "reactive", "cable", "ujs", "ssr", "stimulus", "reflex", "stimulus_reflex", "dom", "morphdom" ];
+  var homepage = "https://docs.stimulusreflex.com";
+  var bugs = "https://github.com/stimulusreflex/stimulus_reflex/issues";
+  var repository = "https://github.com/stimulusreflex/stimulus_reflex";
+  var license = "MIT";
+  var author = "Nathan Hopkins <natehop@gmail.com>";
+  var contributors = [ "Andrew Mason <andrewmcodes@protonmail.com>", "Julian Rubisch <julian@julianrubisch.at>", "Marco Roth <marco.roth@intergga.ch>", "Nathan Hopkins <natehop@gmail.com>" ];
+  var main = "./dist/stimulus_reflex.js";
+  var module = "./dist/stimulus_reflex.js";
+  var browser = "./dist/stimulus_reflex.js";
+  var unpkg = "./dist/stimulus_reflex.umd.js";
+  var umd = "./dist/stimulus_reflex.umd.js";
+  var files = [ "dist/*", "javascript/*" ];
+  var scripts = {
+    lint: "yarn run format --check",
+    format: "yarn run prettier-standard ./javascript/**/*.js rollup.config.mjs",
+    build: "yarn rollup -c",
+    "build:watch": "yarn rollup -wc",
+    watch: "yarn build:watch",
+    test: "web-test-runner javascript/test/**/*.test.js",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   };
-  const invokeLifecycleMethod = (stage, reflexElement, controllerElement, reflexId, payload) => {
-    if (!controllerElement || !controllerElement.reflexData[reflexId]) return;
-    const controller = controllerElement.reflexController[reflexId];
-    const reflex = controllerElement.reflexData[reflexId].target;
-    const reflexMethodName = reflex.split("#")[1];
-    const specificLifecycleMethodName = [ "before", "after", "finalize" ].includes(stage) ? `${stage}${camelize(reflexMethodName)}` : `${camelize(reflexMethodName, false)}${camelize(stage)}`;
-    const specificLifecycleMethod = controller[specificLifecycleMethodName];
-    const genericLifecycleMethodName = [ "before", "after", "finalize" ].includes(stage) ? `${stage}Reflex` : `reflex${camelize(stage)}`;
-    const genericLifecycleMethod = controller[genericLifecycleMethodName];
-    if (typeof specificLifecycleMethod === "function") {
-      specificLifecycleMethod.call(controller, reflexElement, reflex, controllerElement.reflexError[reflexId], reflexId, payload);
-    }
-    if (typeof genericLifecycleMethod === "function") {
-      genericLifecycleMethod.call(controller, reflexElement, reflex, controllerElement.reflexError[reflexId], reflexId, payload);
-    }
-    if (reflexes[reflexId] && stage === reflexes[reflexId].finalStage) {
-      Reflect.deleteProperty(controllerElement.reflexController, reflexId);
-      Reflect.deleteProperty(controllerElement.reflexData, reflexId);
-      Reflect.deleteProperty(controllerElement.reflexError, reflexId);
-    }
+  var peerDependencies = {
+    "@hotwired/stimulus": ">= 3.0"
   };
-  document.addEventListener("stimulus-reflex:before", (event => invokeLifecycleMethod("before", event.detail.element, event.detail.controller.element, event.detail.reflexId, event.detail.payload)), true);
-  document.addEventListener("stimulus-reflex:success", (event => {
-    invokeLifecycleMethod("success", event.detail.element, event.detail.controller.element, event.detail.reflexId, event.detail.payload);
-    dispatchLifecycleEvent("after", event.detail.element, event.detail.controller.element, event.detail.reflexId, event.detail.payload);
-  }), true);
-  document.addEventListener("stimulus-reflex:nothing", (event => {
-    dispatchLifecycleEvent("success", event.detail.element, event.detail.controller.element, event.detail.reflexId, event.detail.payload);
-  }), true);
-  document.addEventListener("stimulus-reflex:error", (event => {
-    invokeLifecycleMethod("error", event.detail.element, event.detail.controller.element, event.detail.reflexId, event.detail.payload);
-    dispatchLifecycleEvent("after", event.detail.element, event.detail.controller.element, event.detail.reflexId, event.detail.payload);
-  }), true);
-  document.addEventListener("stimulus-reflex:halted", (event => invokeLifecycleMethod("halted", event.detail.element, event.detail.controller.element, event.detail.reflexId, event.detail.payload)), true);
-  document.addEventListener("stimulus-reflex:after", (event => invokeLifecycleMethod("after", event.detail.element, event.detail.controller.element, event.detail.reflexId, event.detail.payload)), true);
-  document.addEventListener("stimulus-reflex:finalize", (event => invokeLifecycleMethod("finalize", event.detail.element, event.detail.controller.element, event.detail.reflexId, event.detail.payload)), true);
-  const dispatchLifecycleEvent = (stage, reflexElement, controllerElement, reflexId, payload) => {
-    if (!controllerElement) {
-      if (Debug$1.enabled && !reflexes[reflexId].warned) {
-        console.warn(`StimulusReflex was not able execute callbacks or emit events for "${stage}" or later life-cycle stages for this Reflex. The StimulusReflex Controller Element is no longer present in the DOM. Could you move the StimulusReflex Controller to an element higher in your DOM?`);
-        reflexes[reflexId].warned = true;
-      }
-      return;
-    }
-    if (!controllerElement.reflexController || controllerElement.reflexController && !controllerElement.reflexController[reflexId]) {
-      if (Debug$1.enabled && !reflexes[reflexId].warned) {
-        console.warn(`StimulusReflex detected that the StimulusReflex Controller responsible for this Reflex has been replaced with a new instance. Callbacks and events for "${stage}" or later life-cycle stages cannot be executed.`);
-        reflexes[reflexId].warned = true;
-      }
-      return;
-    }
-    const {target: target} = controllerElement.reflexData[reflexId] || {};
-    const controller = controllerElement.reflexController[reflexId] || {};
-    const event = `stimulus-reflex:${stage}`;
-    const action = `${event}:${target.split("#")[1]}`;
-    const detail = {
-      reflex: target,
-      controller: controller,
-      reflexId: reflexId,
-      element: reflexElement,
-      payload: payload
-    };
-    const options = {
-      bubbles: true,
-      cancelable: false,
-      detail: detail
-    };
-    controllerElement.dispatchEvent(new CustomEvent(event, options));
-    controllerElement.dispatchEvent(new CustomEvent(action, options));
-    if (window.jQuery) {
-      window.jQuery(controllerElement).trigger(event, detail);
-      window.jQuery(controllerElement).trigger(action, detail);
-    }
+  var dependencies = {
+    "@hotwired/stimulus": ">= 3.0, < 4",
+    "@rails/actioncable": ">= 6.0, < 8",
+    cable_ready: "5.0.0-pre10"
   };
-  const localReflexControllers = (app, element) => attributeValues(element.getAttribute(Schema.controller)).reduce(((memo, name) => {
-    const controller = app.getControllerForElementAndIdentifier(element, name);
-    if (controller && controller.StimulusReflex) memo.push(controller);
-    return memo;
-  }), []);
-  const allReflexControllers = (app, element) => {
-    let controllers = [];
-    while (element) {
-      controllers = controllers.concat(localReflexControllers(app, element));
-      element = element.parentElement;
-    }
-    return controllers;
+  var devDependencies = {
+    "@open-wc/testing": "^3.1.7",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@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",
+    "prettier-standard": "^16.4.1",
+    rollup: "^3.17.1",
+    vitepress: "^1.0.0-alpha.47"
   };
-  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;
-    }));
-    return controller || controllers[0];
+  var packageInfo = {
+    name: name,
+    version: version,
+    description: description,
+    keywords: keywords,
+    homepage: homepage,
+    bugs: bugs,
+    repository: repository,
+    license: license,
+    author: author,
+    contributors: contributors,
+    main: main,
+    module: module,
+    browser: browser,
+    import: "./dist/stimulus_reflex.js",
+    unpkg: unpkg,
+    umd: umd,
+    files: files,
+    scripts: scripts,
+    peerDependencies: peerDependencies,
+    dependencies: dependencies,
+    devDependencies: devDependencies
   };
-  const received = data => {
-    if (!data.cableReady) return;
-    if (data.version.replace(".pre", "-pre") !== CableReady__default["default"].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__default["default"].version}`);
-      return;
-    }
-    let reflexOperations = [];
-    for (let i = data.operations.length - 1; i >= 0; i--) {
-      if (data.operations[i].stimulusReflex) {
-        reflexOperations.push(data.operations[i]);
-        data.operations.splice(i, 1);
-      }
-    }
-    if (reflexOperations.some((operation => operation.stimulusReflex.url !== location.href))) {
-      return;
-    }
-    let reflexData;
-    if (reflexOperations.length) {
-      reflexData = reflexOperations[0].stimulusReflex;
-      reflexData.payload = reflexOperations[0].payload;
-    }
-    if (reflexData) {
-      const {reflexId: reflexId, payload: payload} = reflexData;
-      if (!reflexes[reflexId] && IsolationMode.disabled) {
-        const controllerElement = XPathToElement(reflexData.xpathController);
-        const reflexElement = XPathToElement(reflexData.xpathElement);
-        controllerElement.reflexController = controllerElement.reflexController || {};
-        controllerElement.reflexData = controllerElement.reflexData || {};
-        controllerElement.reflexError = controllerElement.reflexError || {};
-        controllerElement.reflexController[reflexId] = reflexes.app.getControllerForElementAndIdentifier(controllerElement, reflexData.reflexController);
-        controllerElement.reflexData[reflexId] = reflexData;
-        dispatchLifecycleEvent("before", reflexElement, controllerElement, reflexId, payload);
-        registerReflex(reflexData);
-      }
-      if (reflexes[reflexId]) {
-        reflexes[reflexId].totalOperations = reflexOperations.length;
-        reflexes[reflexId].pendingOperations = reflexOperations.length;
-        reflexes[reflexId].completedOperations = 0;
-        reflexes[reflexId].piggybackOperations = data.operations;
-        CableReady__default["default"].perform(reflexOperations);
-      }
-    } else {
-      if (data.operations.length && reflexes[data.operations[0].reflexId]) {
-        CableReady__default["default"].perform(data.operations);
-      }
-    }
-  };
-  const registerReflex = data => {
-    const {reflexId: reflexId} = data;
-    reflexes[reflexId] = {
-      finalStage: "finalize"
-    };
-    const promise = new Promise(((resolve, reject) => {
-      reflexes[reflexId].promise = {
-        resolve: resolve,
-        reject: reject,
-        data: data
-      };
-    }));
-    promise.reflexId = reflexId;
-    if (Debug$1.enabled) promise.catch((() => {}));
-    return promise;
-  };
-  const getReflexRoots = element => {
-    let list = [];
-    while (list.length === 0 && element) {
-      let reflexRoot = element.getAttribute(Schema.reflexRoot);
-      if (reflexRoot) {
-        if (reflexRoot.length === 0 && element.id) reflexRoot = `#${element.id}`;
-        const selectors = reflexRoot.split(",").filter((s => s.trim().length));
-        if (Debug$1.enabled && selectors.length === 0) {
-          console.error(`No value found for ${Schema.reflexRoot}. Add an #id to the element or provide a value for ${Schema.reflexRoot}.`, element);
-        }
-        list = list.concat(selectors.filter((s => document.querySelector(s))));
-      }
-      element = element.parentElement ? element.parentElement.closest(`[${Schema.reflexRoot}]`) : null;
-    }
-    return list;
-  };
-  const setupDeclarativeReflexes = debounce((() => {
-    document.querySelectorAll(`[${Schema.reflex}]`).forEach((element => {
-      const controllers = attributeValues(element.getAttribute(Schema.controller));
-      const reflexAttributeNames = attributeValues(element.getAttribute(Schema.reflex));
-      const actions = attributeValues(element.getAttribute(Schema.action));
-      reflexAttributeNames.forEach((reflexName => {
-        const controller = findControllerByReflexName(reflexName, allReflexControllers(reflexes.app, element));
-        let action;
-        if (controller) {
-          action = `${reflexName.split("->")[0]}->${controller.identifier}#__perform`;
-          if (!actions.includes(action)) actions.push(action);
-        } else {
-          action = `${reflexName.split("->")[0]}->stimulus-reflex#__perform`;
-          if (!controllers.includes("stimulus-reflex")) {
-            controllers.push("stimulus-reflex");
-          }
-          if (!actions.includes(action)) actions.push(action);
-        }
-      }));
-      const controllerValue = attributeValue(controllers);
-      const actionValue = attributeValue(actions);
-      if (controllerValue && element.getAttribute(Schema.controller) != controllerValue) {
-        element.setAttribute(Schema.controller, controllerValue);
-      }
-      if (actionValue && element.getAttribute(Schema.action) != actionValue) element.setAttribute(Schema.action, actionValue);
-    }));
-    emitEvent("stimulus-reflex:ready");
-  }), 20);
-  var version = "3.5.0-pre9";
   class ReflexData {
     constructor(options, reflexElement, controllerElement, reflexController, permanentAttributeName, target, args, url, tabId) {
       this.options = options;
@@ -534,9 +670,9 @@
       this._attrs = this._attrs || this.options["attrs"] || extractElementAttributes(this.reflexElement);
       return this._attrs;
     }
-    get reflexId() {
-      this._reflexId = this._reflexId || this.options["reflexId"] || uuidv4();
-      return this._reflexId;
+    get id() {
+      this._id = this._id || this.options["id"] || uuidv4();
+      return this._id;
     }
     get selectors() {
       this._selectors = this._selectors || this.options["selectors"] || getReflexRoots(this.reflexElement);
@@ -581,7 +717,7 @@
         attrs: this.attrs,
         dataset: this.dataset,
         selectors: this.selectors,
-        reflexId: this.reflexId,
+        id: this.id,
         resolveLate: this.resolveLate,
         suppressLogging: this.suppressLogging,
         xpathController: this.xpathController,
@@ -595,198 +731,202 @@
         args: this.args,
         url: this.url,
         tabId: this.tabId,
-        version: version
+        version: packageInfo.version
       };
     }
   }
-  let consumer;
-  let params;
-  let subscriptionActive;
-  const createSubscription = controller => {
-    consumer = consumer || controller.application.consumer || actioncable.createConsumer();
-    const {channel: channel} = controller.StimulusReflex;
-    const subscription = {
-      channel: channel,
-      ...params
-    };
-    const identifier = JSON.stringify(subscription);
-    controller.StimulusReflex.subscription = consumer.subscriptions.findAll(identifier)[0] || consumer.subscriptions.create(subscription, {
-      received: received,
-      connected: connected,
-      rejected: rejected,
-      disconnected: disconnected
-    });
-  };
-  const connected = () => {
-    subscriptionActive = true;
-    document.body.classList.replace("stimulus-reflex-disconnected", "stimulus-reflex-connected");
-    emitEvent("stimulus-reflex:connected");
-    emitEvent("stimulus-reflex:action-cable:connected");
-  };
-  const rejected = () => {
-    subscriptionActive = false;
-    document.body.classList.replace("stimulus-reflex-connected", "stimulus-reflex-disconnected");
-    emitEvent("stimulus-reflex:rejected");
-    emitEvent("stimulus-reflex:action-cable:rejected");
-    if (Debug.enabled) console.warn("Channel subscription was rejected.");
-  };
-  const disconnected = willAttemptReconnect => {
-    subscriptionActive = false;
-    document.body.classList.replace("stimulus-reflex-connected", "stimulus-reflex-disconnected");
-    emitEvent("stimulus-reflex:disconnected", willAttemptReconnect);
-    emitEvent("stimulus-reflex:action-cable:disconnected", willAttemptReconnect);
-  };
-  var ActionCableTransport = {
-    consumer: consumer,
-    params: params,
-    get subscriptionActive() {
-      return subscriptionActive;
+  let transport = {};
+  var Transport = {
+    get plugin() {
+      return transport;
     },
-    createSubscription: createSubscription,
-    connected: connected,
-    rejected: rejected,
-    disconnected: disconnected,
-    set(consumerValue, paramsValue) {
-      consumer = consumerValue;
-      params = paramsValue;
+    set(newTransport) {
+      transport = newTransport;
     }
   };
   const beforeDOMUpdate = event => {
-    const {stimulusReflex: stimulusReflex, payload: payload} = event.detail || {};
+    const {stimulusReflex: stimulusReflex} = event.detail || {};
     if (!stimulusReflex) return;
-    const {reflexId: reflexId, xpathElement: xpathElement, xpathController: xpathController} = stimulusReflex;
-    const controllerElement = XPathToElement(xpathController);
-    const reflexElement = XPathToElement(xpathElement);
-    const reflex = reflexes[reflexId];
-    const {promise: promise} = reflex;
+    const reflex = reflexes[stimulusReflex.id];
     reflex.pendingOperations--;
     if (reflex.pendingOperations > 0) return;
-    if (!stimulusReflex.resolveLate) setTimeout((() => promise.resolve({
-      element: reflexElement,
+    if (!stimulusReflex.resolveLate) setTimeout((() => reflex.promise.resolve({
+      element: reflex.element,
       event: event,
-      data: promise.data,
-      payload: payload,
-      reflexId: reflexId,
+      data: reflex.data,
+      payload: reflex.payload,
+      id: reflex.id,
       toString: () => ""
     })));
-    setTimeout((() => dispatchLifecycleEvent("success", reflexElement, controllerElement, reflexId, payload)));
+    setTimeout((() => dispatchLifecycleEvent(reflex, "success")));
   };
   const afterDOMUpdate = event => {
-    const {stimulusReflex: stimulusReflex, payload: payload} = event.detail || {};
+    const {stimulusReflex: stimulusReflex} = event.detail || {};
     if (!stimulusReflex) return;
-    const {reflexId: reflexId, xpathElement: xpathElement, xpathController: xpathController} = stimulusReflex;
-    const controllerElement = XPathToElement(xpathController);
-    const reflexElement = XPathToElement(xpathElement);
-    const reflex = reflexes[reflexId];
-    const {promise: promise} = reflex;
+    const reflex = reflexes[stimulusReflex.id];
     reflex.completedOperations++;
-    Log.success(event, false);
+    reflex.selector = event.detail.selector;
+    reflex.morph = event.detail.stimulusReflex.morph;
+    reflex.operation = event.type.split(":")[1].split("-").slice(1).join("_");
+    Log.success(reflex);
     if (reflex.completedOperations < reflex.totalOperations) return;
-    if (stimulusReflex.resolveLate) setTimeout((() => promise.resolve({
-      element: reflexElement,
+    if (stimulusReflex.resolveLate) setTimeout((() => reflex.promise.resolve({
+      element: reflex.element,
       event: event,
-      data: promise.data,
-      payload: payload,
-      reflexId: reflexId,
+      data: reflex.data,
+      payload: reflex.payload,
+      id: reflex.id,
       toString: () => ""
     })));
-    setTimeout((() => dispatchLifecycleEvent("finalize", reflexElement, controllerElement, reflexId, payload)));
-    if (reflex.piggybackOperations.length) CableReady__default["default"].perform(reflex.piggybackOperations);
+    setTimeout((() => dispatchLifecycleEvent(reflex, "finalize")));
+    if (reflex.piggybackOperations.length) CableReady.perform(reflex.piggybackOperations);
   };
   const routeReflexEvent = event => {
-    const {stimulusReflex: stimulusReflex, payload: payload, name: name, body: body} = event.detail || {};
+    const {stimulusReflex: stimulusReflex, name: name} = event.detail || {};
     const eventType = name.split("-")[2];
-    if (!stimulusReflex || ![ "nothing", "halted", "error" ].includes(eventType)) return;
-    const {reflexId: reflexId, xpathElement: xpathElement, xpathController: xpathController} = stimulusReflex;
-    const reflexElement = XPathToElement(xpathElement);
-    const controllerElement = XPathToElement(xpathController);
-    const reflex = reflexes[reflexId];
-    const {promise: promise} = reflex;
-    if (controllerElement) {
-      controllerElement.reflexError = controllerElement.reflexError || {};
-      if (eventType === "error") controllerElement.reflexError[reflexId] = body;
-    }
-    switch (eventType) {
-     case "nothing":
-      nothing(event, payload, promise, reflex, reflexElement);
-      break;
-
-     case "error":
-      error(event, payload, promise, reflex, reflexElement);
-      break;
-
-     case "halted":
-      halted(event, payload, promise, reflex, reflexElement);
-      break;
-    }
-    setTimeout((() => dispatchLifecycleEvent(eventType, reflexElement, controllerElement, reflexId, payload)));
-    if (reflex.piggybackOperations.length) CableReady__default["default"].perform(reflex.piggybackOperations);
-  };
-  const nothing = (event, payload, promise, reflex, reflexElement) => {
-    reflex.finalStage = "after";
-    Log.success(event, false);
-    setTimeout((() => promise.resolve({
-      data: promise.data,
-      element: reflexElement,
+    const eventTypes = {
+      nothing: nothing,
+      halted: halted,
+      forbidden: forbidden,
+      error: error
+    };
+    if (!stimulusReflex || !Object.keys(eventTypes).includes(eventType)) return;
+    const reflex = reflexes[stimulusReflex.id];
+    reflex.completedOperations++;
+    reflex.pendingOperations--;
+    reflex.selector = event.detail.selector;
+    reflex.morph = event.detail.stimulusReflex.morph;
+    reflex.operation = event.type.split(":")[1].split("-").slice(1).join("_");
+    if (eventType === "error") reflex.error = event.detail.error;
+    eventTypes[eventType](reflex, event);
+    setTimeout((() => dispatchLifecycleEvent(reflex, eventType)));
+    if (reflex.piggybackOperations.length) CableReady.perform(reflex.piggybackOperations);
+  };
+  const nothing = (reflex, event) => {
+    Log.success(reflex);
+    setTimeout((() => reflex.promise.resolve({
+      data: reflex.data,
+      element: reflex.element,
+      event: event,
+      payload: reflex.payload,
+      id: reflex.id,
+      toString: () => ""
+    })));
+  };
+  const halted = (reflex, event) => {
+    Log.halted(reflex, event);
+    setTimeout((() => reflex.promise.resolve({
+      data: reflex.data,
+      element: reflex.element,
       event: event,
-      payload: payload,
-      reflexId: promise.data.reflexId,
+      payload: reflex.payload,
+      id: reflex.id,
       toString: () => ""
     })));
   };
-  const halted = (event, payload, promise, reflex, reflexElement) => {
-    reflex.finalStage = "halted";
-    Log.success(event, true);
-    setTimeout((() => promise.resolve({
-      data: promise.data,
-      element: reflexElement,
+  const forbidden = (reflex, event) => {
+    Log.forbidden(reflex, event);
+    setTimeout((() => reflex.promise.resolve({
+      data: reflex.data,
+      element: reflex.element,
       event: event,
-      payload: payload,
-      reflexId: promise.data.reflexId,
+      payload: reflex.payload,
+      id: reflex.id,
       toString: () => ""
     })));
   };
-  const error = (event, payload, promise, reflex, reflexElement) => {
-    reflex.finalStage = "after";
-    Log.error(event);
-    setTimeout((() => promise.reject({
-      data: promise.data,
-      element: reflexElement,
+  const error = (reflex, event) => {
+    Log.error(reflex, event);
+    setTimeout((() => reflex.promise.reject({
+      data: reflex.data,
+      element: reflex.element,
       event: event,
-      payload: payload,
-      reflexId: promise.data.reflexId,
-      error: event.detail.body,
-      toString: () => event.detail.body
+      payload: reflex.payload,
+      id: reflex.id,
+      error: reflex.error,
+      toString: () => reflex.error
     })));
   };
+  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 allReflexControllers = element => {
+    let controllers = [];
+    while (element) {
+      controllers = controllers.concat(localReflexControllers(element));
+      element = element.parentElement;
+    }
+    return controllers;
+  };
+  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;
+    }));
+    return controller || controllers[0];
+  };
+  const scanForReflexes = debounce((() => {
+    const reflexElements = document.querySelectorAll(`[${Schema.reflex}]`);
+    reflexElements.forEach((element => scanForReflexesOnElement(element)));
+  }), 20);
+  const scanForReflexesOnElement = element => {
+    const controllerAttribute = element.getAttribute(Schema.controller);
+    const controllers = attributeValues(controllerAttribute);
+    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 controllerName = controller ? controller.identifier : "stimulus-reflex";
+      actions.push(`${reflexName.split("->")[0]}->${controllerName}#__perform`);
+      controllers.push(controllerName);
+    }));
+    const controllerValue = attributeValue(controllers);
+    const actionValue = attributeValue(actions);
+    let emitReadyEvent = false;
+    if (controllerValue && element.getAttribute(Schema.controller) != controllerValue) {
+      element.setAttribute(Schema.controller, controllerValue);
+      emitReadyEvent = true;
+    }
+    if (actionValue && element.getAttribute(Schema.action) != actionValue) {
+      element.setAttribute(Schema.action, actionValue);
+      emitReadyEvent = true;
+    }
+    if (emitReadyEvent) {
+      dispatch(element, "stimulus-reflex:ready", {
+        reflex: reflexAttribute,
+        controller: controllerValue,
+        action: actionValue,
+        element: element
+      });
+    }
+  };
   class StimulusReflexController extends stimulus.Controller {
     constructor(...args) {
       super(...args);
       register(this);
     }
   }
-  const initialize = (application, {controller: controller, consumer: consumer, debug: debug, params: params, isolate: isolate, deprecate: deprecate} = {}) => {
-    ActionCableTransport.set(consumer, params);
-    document.addEventListener("DOMContentLoaded", (() => {
-      document.body.classList.remove("stimulus-reflex-connected");
-      document.body.classList.add("stimulus-reflex-disconnected");
-      if (Deprecate.enabled && consumer) console.warn("Deprecation warning: the next version of StimulusReflex will obtain a reference to consumer via the Stimulus application object.\nPlease add 'application.consumer = consumer' to your index.js after your Stimulus application has been established, and remove the consumer key from your StimulusReflex initialize() options object.");
-      if (Deprecate.enabled && IsolationMode.disabled) console.warn("Deprecation warning: the next version of StimulusReflex will standardize isolation mode, and the isolate option will be removed.\nPlease update your applications to assume that every tab will be isolated.");
-    }), {
-      once: true
-    });
+  const tabId = uuidv4();
+  const initialize = (application, {controller: controller, consumer: consumer, debug: debug, params: params, isolate: isolate, deprecate: deprecate, transport: transport} = {}) => {
+    Transport.set(transport || ActionCableTransport);
+    Transport.plugin.initialize(consumer, params);
     IsolationMode.set(!!isolate);
-    reflexes.app = application;
+    App.set(application);
     Schema.set(application);
-    reflexes.app.register("stimulus-reflex", controller || StimulusReflexController);
+    App.app.register("stimulus-reflex", controller || StimulusReflexController);
     Debug$1.set(!!debug);
     if (typeof deprecate !== "undefined") Deprecate.set(deprecate);
-    const observer = new MutationObserver(setupDeclarativeReflexes);
+    const observer = new MutationObserver(scanForReflexes);
     observer.observe(document.documentElement, {
       attributeFilter: [ Schema.reflex, Schema.action ],
       childList: true,
       subtree: true
     });
+    emitEvent("stimulus-reflex:initialized");
   };
   const register = (controller, options = {}) => {
     const channel = "StimulusReflex::Channel";
@@ -794,38 +934,32 @@
       ...options,
       channel: channel
     };
-    ActionCableTransport.createSubscription(controller);
+    Transport.plugin.subscribe(controller);
     Object.assign(controller, {
-      isActionCableConnectionOpen() {
-        return this.StimulusReflex.subscription.consumer.connection.isOpen();
-      },
       stimulate() {
         const url = location.href;
+        const controllerElement = this.element;
         const args = Array.from(arguments);
         const target = args.shift() || "StimulusReflex::Reflex#default_reflex";
-        const controllerElement = this.element;
-        const reflexElement = args[0] && args[0].nodeType === Node.ELEMENT_NODE ? args.shift() : controllerElement;
-        if (reflexElement.type === "number" && reflexElement.validity && reflexElement.validity.badInput) {
+        const reflexElement = getReflexElement(args, controllerElement);
+        if (elementInvalid(reflexElement)) {
           if (Debug$1.enabled) console.warn("Reflex aborted: invalid numeric input");
           return;
         }
-        const options = {};
-        if (args[0] && typeof args[0] === "object" && Object.keys(args[0]).filter((key => [ "attrs", "selectors", "reflexId", "resolveLate", "serializeForm", "suppressLogging", "includeInnerHTML", "includeTextContent" ].includes(key))).length) {
-          const opts = args.shift();
-          Object.keys(opts).forEach((o => options[o] = opts[o]));
-        }
+        const options = getReflexOptions(args);
         const reflexData = new ReflexData(options, reflexElement, controllerElement, this.identifier, Schema.reflexPermanent, target, args, url, tabId);
-        const reflexId = reflexData.reflexId;
-        if (!this.isActionCableConnectionOpen()) throw "The ActionCable connection is not open! `this.isActionCableConnectionOpen()` must return true before calling `this.stimulate()`";
-        if (!ActionCableTransport.subscriptionActive) throw "The ActionCable channel subscription for StimulusReflex was rejected.";
+        const id = reflexData.id;
         controllerElement.reflexController = controllerElement.reflexController || {};
         controllerElement.reflexData = controllerElement.reflexData || {};
         controllerElement.reflexError = controllerElement.reflexError || {};
-        controllerElement.reflexController[reflexId] = this;
-        controllerElement.reflexData[reflexId] = reflexData.valueOf();
-        dispatchLifecycleEvent("before", reflexElement, controllerElement, reflexId);
+        controllerElement.reflexController[id] = this;
+        controllerElement.reflexData[id] = reflexData.valueOf();
+        const reflex = new Reflex(reflexData, this);
+        reflexes[id] = reflex;
+        this.lastReflex = reflex;
+        dispatchLifecycleEvent(reflex, "before");
         setTimeout((() => {
-          const {params: params} = controllerElement.reflexData[reflexId] || {};
+          const {params: params} = controllerElement.reflexData[id] || {};
           const check = reflexElement.attributes[Schema.reflexSerializeForm];
           if (check) {
             options["serializeForm"] = check.value !== "false";
@@ -835,16 +969,16 @@
           const formData = options["serializeForm"] === false ? "" : serializeForm(form, {
             element: reflexElement
           });
-          controllerElement.reflexData[reflexId] = {
+          reflex.data = {
             ...reflexData.valueOf(),
             params: params,
             formData: formData
           };
-          this.StimulusReflex.subscription.send(controllerElement.reflexData[reflexId]);
+          controllerElement.reflexData[id] = reflex.data;
+          Transport.plugin.deliver(reflex);
         }));
-        const promise = registerReflex(reflexData.valueOf());
-        Log.request(reflexId, target, args, this.context.scope.identifier, reflexElement, controllerElement);
-        return promise;
+        Log.request(reflex);
+        return reflex.getPromise;
       },
       __perform(event) {
         let element = event.target;
@@ -861,8 +995,23 @@
         }
       }
     });
+    if (!controller.reflexes) Object.defineProperty(controller, "reflexes", {
+      get() {
+        return new Proxy(reflexes, {
+          get: function(target, prop) {
+            if (prop === "last") return this.lastReflex;
+            return Object.fromEntries(Object.entries(target[prop]).filter((([_, reflex]) => reflex.controller === this)));
+          }.bind(this)
+        });
+      }
+    });
+    scanForReflexesOnElement(controller.element);
+    emitEvent("stimulus-reflex:controller-registered", {
+      detail: {
+        controller: controller
+      }
+    });
   };
-  const tabId = uuidv4();
   const useReflex = (controller, options = {}) => {
     register(controller, options);
   };
@@ -871,14 +1020,22 @@
   document.addEventListener("cable-ready:before-morph", beforeDOMUpdate);
   document.addEventListener("cable-ready:after-inner-html", afterDOMUpdate);
   document.addEventListener("cable-ready:after-morph", afterDOMUpdate);
-  window.addEventListener("load", setupDeclarativeReflexes);
+  document.addEventListener("readystatechange", (() => {
+    if (document.readyState === "complete") {
+      scanForReflexes();
+    }
+  }));
   var StimulusReflex = Object.freeze({
     __proto__: null,
     initialize: initialize,
+    reflexes: reflexes,
     register: register,
+    scanForReflexes: scanForReflexes,
+    scanForReflexesOnElement: scanForReflexesOnElement,
     useReflex: useReflex
   });
   const global = {
+    version: packageInfo.version,
     ...StimulusReflex,
     get debug() {
       return Debug$1.value;
@@ -894,9 +1051,12 @@
     }
   };
   window.StimulusReflex = global;
-  exports["default"] = global;
+  exports.default = global;
   exports.initialize = initialize;
+  exports.reflexes = reflexes;
   exports.register = register;
+  exports.scanForReflexes = scanForReflexes;
+  exports.scanForReflexesOnElement = scanForReflexesOnElement;
   exports.useReflex = useReflex;
   Object.defineProperty(exports, "__esModule", {
     value: true