Add StimulusReflex

app/webpacker/controllers/example_controller.js

@@ -1,18 +1,73 @@
-// This is what a basic Stimulus Controller looks like. To apply it to an element you can do:
-// div{"data-controller": "example"}
-// or:
-// div{data: {controller: "example"}}
+import ApplicationController from "./application_controller";
 
-import { Controller } from "stimulus";
+/* This is the custom StimulusReflex controller for the Example Reflex.
+ * Learn more at: https://docs.stimulusreflex.com
+ */
+export default class extends ApplicationController {
+  /*
+   * Regular Stimulus lifecycle methods
+   * Learn more at: https://stimulusjs.org/reference/lifecycle-callbacks
+   *
+   * If you intend to use this controller as a regular stimulus controller as well,
+   * make sure any Stimulus lifecycle methods overridden in ApplicationController call super.
+   *
+   * Important:
+   * By default, StimulusReflex overrides the -connect- method so make sure you
+   * call super if you intend to do anything else when this controller connects.
+   */
 
-export default class extends Controller {
-  // connect() is a built-in lifecycle callback for Stimulus Controllers. It fires when the
-  // element is loaded on the page, and that also *includes* when some HTML is asynchronously
-  // injected into the DOM. This means initialization is not tied to the page load event, but
-  // will also happen dynamically if and when new DOM elements are added or removed.
   connect() {
-    console.log("We're connected!");
+    super.connect();
+    // add your code here, if applicable
   }
-}
 
-// For more info take a look at https://stimulus.hotwired.dev/handbook/introduction
+  /* Reflex specific lifecycle methods.
+   *
+   * For every method defined in your Reflex class, a matching set of lifecycle methods become available
+   * in this javascript controller. These are optional, so feel free to delete these stubs if you don't
+   * need them.
+   *
+   * Important:
+   * Make sure to add data-controller="example" to your markup alongside
+   * data-reflex="Example#dance" for the lifecycle methods to fire properly.
+   *
+   * Example:
+   *
+   *   <a href="#" data-reflex="click->Example#dance" data-controller="example">Dance!</a>
+   *
+   * Arguments:
+   *
+   *   element - the element that triggered the reflex
+   *             may be different than the Stimulus controller's this.element
+   *
+   *   reflex - the name of the reflex e.g. "Example#dance"
+   *
+   *   error/noop - the error message (for reflexError), otherwise null
+   *
+   *   reflexId - a UUID4 or developer-provided unique identifier for each Reflex
+   */
+
+  // Assuming you create a "Example#dance" action in your Reflex class
+  // you'll be able to use the following lifecycle methods:
+
+  // beforeDance(element, reflex, noop, reflexId) {
+  //  element.innerText = 'Putting dance shoes on...'
+  // }
+
+  // danceSuccess(element, reflex, noop, reflexId) {
+  //   element.innerText = '\nDanced like no one was watching! Was someone watching?'
+  // }
+
+  // danceError(element, reflex, error, reflexId) {
+  //   console.error('danceError', error);
+  //   element.innerText = "\nCouldn\'t dance!"
+  // }
+
+  // afterDance(element, reflex, noop, reflexId) {
+  //   element.innerText = '\nWhatever that was, it\'s over now.'
+  // }
+
+  // finalizeDance(element, reflex, noop, reflexId) {
+  //   element.innerText = '\nNow, the cleanup can begin!'
+  // }
+}