stimulus_reflex 3.5.0.pre9 → 3.5.0.pre10

data/lib/generators/stimulus_reflex/templates/app/javascript/channels/index.js.vite.tt

@@ -0,0 +1 @@
+const channels = import.meta.globEager('./**/*_channel.js')

data/lib/generators/stimulus_reflex/templates/app/javascript/channels/index.js.webpacker.tt

@@ -0,0 +1,5 @@
+// Load all the channels within this directory and all subdirectories.
+// Channel files must be named *_channel.js.
+
+const channels = require.context('.', true, /_channel\.js$/)
+channels.keys().forEach(channels)

data/lib/generators/stimulus_reflex/templates/app/javascript/config/cable_ready.js.tt

@@ -0,0 +1,4 @@
+import consumer from '../channels/consumer'
+import CableReady from 'cable_ready'
+
+CableReady.initialize({ consumer })

data/lib/generators/stimulus_reflex/templates/app/javascript/config/index.js.tt

@@ -0,0 +1,2 @@
+import './cable_ready'
+import './stimulus_reflex'

data/lib/generators/stimulus_reflex/templates/app/javascript/config/mrujs.js.tt

@@ -0,0 +1,9 @@
+import CableReady from "cable_ready"
+import mrujs from "mrujs"
+import { CableCar } from "mrujs/plugins"
+
+mrujs.start({
+  plugins: [
+    new CableCar(CableReady)
+  ]
+})

data/lib/generators/stimulus_reflex/templates/app/javascript/config/stimulus_reflex.js.tt

@@ -0,0 +1,5 @@
+import { application } from "../controllers/application"
+import controller from "../controllers/application_controller"
+import StimulusReflex from "stimulus_reflex"
+
+StimulusReflex.initialize(application, { controller, isolate: true })

data/lib/generators/stimulus_reflex/templates/app/javascript/controllers/%file_name%_controller.js.tt

@@ -0,0 +1,141 @@
+import ApplicationController from './application_controller'
+
+<%- if class_name == "Example" -%>
+// 
+// This is the Stimulus controller for the Example Reflex.
+//
+// It corresponds to the server-side Reflex class located at /app/reflexes/example.rb
+//
+// Learn more at: https://docs.stimulusreflex.com/guide/reflexes
+//
+
+<%- end -%>
+export default class extends ApplicationController {
+  connect () {
+<%- if class_name == "Example" -%>
+    //
+    // StimulusReflex overrides the Stimulus `connect` method. Make sure to call
+    // `super.connect()` so that any code in your superclass `connect` is run.
+    //
+<%- end -%>
+    super.connect()
+  }
+<%- if class_name == "Example" -%>
+
+  // With StimulusReflex active in your project, it will continuously scan your DOM for
+  // `data-reflex` attributes on your elements, even if they are dynamically created.
+  //
+  //   <a href="#" data-reflex="click->Example#dance">Dance!</a>
+  //
+  // We call this a "declared" Reflex, because it doesn't require any JS to run.
+  //
+  // When your user clicks this link, a Reflex is launched and it calls the `dance` method
+  // on your Example Reflex class. You don't have to do anything else!
+  //
+  // This Stimulus controller doesn't even need to exist for StimulusReflex to work its magic.
+  // https://docs.stimulusreflex.com/guide/reflexes#declaring-a-reflex-in-html-with-data-attributes
+  //
+  // However...
+  //
+  // If we do create an `example` Stimulus controller that extends `ApplicationController`,
+  // we can unlock several additional capabilities, including creating Reflexes with code.
+  //
+  //   <a href="#" data-controller="example" data-action="example#dance">Dance!</a>
+  //
+  // StimulusReflex gives our controller a new method, `stimulate`:
+  //
+  // dance() {
+  //   this.stimulate('Example#dance')
+  // }
+  //
+  // The `stimulate` method is very flexible, and it gives you the opportunity to pass
+  // parameter options that will be passed to the `dance` method on the server.
+  // https://docs.stimulusreflex.com/guide/reflexes#calling-a-reflex-in-a-stimulus-controller
+  //
+  // Reflex lifecycle methods
+  //
+  // For every method defined in your Reflex class, a matching set of optional
+  // lifecycle callback methods become available in this javascript controller.
+  // https://docs.stimulusreflex.com/guide/lifecycle#client-side-reflex-callbacks
+  //
+  //   <a href="#" data-reflex="click->Example#dance" data-controller="example">Dance!</a>
+  //
+  // StimulusReflex will check for the presence of several methods:
+  //
+  //   afterReflex(element, reflex, noop, id) {
+  //     // fires after every Example Reflex action
+  //   }
+  //
+  //   afterDance(element, reflex, noop, id) {
+  //     // fires after Example Reflexes calling the dance action
+  //   }
+  //
+  // 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
+  //
+  //   id - a UUID4 or developer-provided unique identifier for each Reflex
+  //
+  // Access to the client-side Reflex objects created by this controller
+  //
+  // Every Reflex you create is represented by an object in the global Reflexes collection.
+  // You can access the Example Reflexes created by this controller via the `reflexes` proxy.
+  //
+  //   this.reflexes.last
+  //   this.reflexes.all
+  //   this.reflexes.all[id]
+  //   this.reflexes.error
+  //
+  // The proxy allows you to access the most recent Reflex, an array of all Reflexes, a specific
+  // Reflex specified by its `id` and an array of all Reflexes in a given lifecycle stage.
+  //
+  // If you explore the Reflex object, you'll see all relevant details,
+  // including the `data` that is being delivered to the server.
+  //
+  // Pretty cool, right?
+  //
+<%- end -%>
+<%- actions.each do |action| -%>
+
+  // <%= "before_#{action}".camelize(:lower) %>(element, reflex, noop, id) {
+  //  console.log("before <%= action %>", element, reflex, id)
+  // }
+
+  // <%= "#{action}_queued".camelize(:lower) %>(element, reflex, noop, id) {
+  //   console.log("<%= action %> enqueued for delivery upon connection", element, reflex, id)
+  // }
+
+  // <%= "#{action}_delivered".camelize(:lower) %>(element, reflex, noop, id) {
+  //   console.log("<%= action %> delivered to the server", element, reflex, id)
+  // }
+
+  // <%= "#{action}_success".camelize(:lower) %>(element, reflex, noop, id) {
+  //   console.log("<%= action %> successfully executed", element, reflex, id)
+  // }
+
+  // <%= "#{action}_error".camelize(:lower) %>(element, reflex, error, id) {
+  //   console.error("<%= action %> server-side error", element, reflex, error, id)
+  // }
+
+  // <%= "#{action}_halted".camelize(:lower) %>(element, reflex, noop, id) {
+  //   console.warn("<%= action %> halted before execution", element, reflex, id)
+  // }
+
+  // <%= "#{action}_forbidden".camelize(:lower) %>(element, reflex, noop, id) {
+  //   console.warn("<%= action %> forbidden from executing", element, reflex, id)
+  // }
+
+  // <%= "after_#{action}".camelize(:lower) %>(element, reflex, noop, id) {
+  //   console.log("<%= action %> has been executed by the server", element, reflex, id)
+  // }
+
+  // <%= "finalize_#{action}".camelize(:lower) %>(element, reflex, noop, id) {
+  //   console.log("<%= action %> changes have been applied", element, reflex, id)
+  // }
+<%- end -%>
+}

data/lib/generators/stimulus_reflex/templates/app/javascript/controllers/application.js.tt

@@ -0,0 +1,11 @@
+import { Application } from "@hotwired/stimulus"
+import consumer from "../channels/consumer"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+application.consumer = consumer
+window.Stimulus   = application
+
+export { application }

data/lib/generators/stimulus_reflex/templates/app/javascript/controllers/application_controller.js.tt

@@ -0,0 +1,74 @@
+import { Controller } from '@hotwired/stimulus'
+import StimulusReflex from 'stimulus_reflex'
+
+// This is the Stimulus ApplicationController.
+// All StimulusReflex controllers should inherit from this class.
+//
+// Example:
+//
+//   import ApplicationController from './application_controller'
+//
+//   export default class extends ApplicationController { ... }
+//
+// Learn more at: https://docs.stimulusreflex.com
+//
+
+export default class extends Controller {
+  connect () {
+    StimulusReflex.register(this)
+  }
+
+  // Application-wide lifecycle methods
+  //
+  // Use these methods to handle lifecycle callbacks for all controllers.
+  // Using lifecycle methods is optional, so feel free to delete these if you don't need them.
+  //
+  // 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#demo"
+  //
+  //   error/noop - the error message (for reflexError), otherwise null
+  //
+  //   id - a UUID4 or developer-provided unique identifier for each Reflex
+  //
+
+  beforeReflex (element, reflex, noop, id) {
+    // document.body.classList.add('wait')
+  }
+
+  reflexQueued (element, reflex, noop, id) {
+    // Reflex will be delivered to server upon reconnection
+  }
+
+  reflexDelivered (element, reflex, noop, id) {
+    // Reflex has been delivered to the server
+  }
+
+  reflexSuccess (element, reflex, noop, id) {
+    // show success message
+  }
+
+  reflexError (element, reflex, error, id) {
+    // show error message
+  }
+
+  reflexForbidden (element, reflex, noop, id) {
+    // Reflex action did not have permission to run
+    // window.location = '/'
+  }
+
+  reflexHalted (element, reflex, noop, id) {
+    // handle aborted Reflex action
+  }
+
+  afterReflex (element, reflex, noop, id) {
+    // document.body.classList.remove('wait')
+  }
+
+  finalizeReflex (element, reflex, noop, id) {
+    // all operations have completed, animation etc is now safe
+  }
+}

data/lib/generators/stimulus_reflex/templates/app/javascript/controllers/index.js.esbuild.tt

@@ -0,0 +1,7 @@
+import { application } from "./application"
+
+import controllers from "./**/*_controller.js"
+
+controllers.forEach((controller) => {
+  application.register(controller.name, controller.module.default)
+})

data/lib/generators/stimulus_reflex/templates/app/javascript/controllers/index.js.importmap.tt

@@ -0,0 +1,5 @@
+import { application } from "./application"
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

data/lib/generators/stimulus_reflex/templates/app/javascript/controllers/index.js.shakapacker.tt

@@ -0,0 +1,5 @@
+import { application } from "./application"
+import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
+
+const controllers = definitionsFromContext(require.context("controllers", true, /_controller\.js$/))
+application.load(controllers)

data/lib/generators/stimulus_reflex/templates/app/javascript/controllers/index.js.vite.tt

@@ -0,0 +1,5 @@
+import { application } from "./application"
+import { registerControllers } from "stimulus-vite-helpers"
+
+const controllers = import.meta.globEager("./**/*_controller.js");
+registerControllers(application, controllers)

data/lib/generators/stimulus_reflex/templates/app/javascript/controllers/index.js.webpacker.tt

@@ -0,0 +1,5 @@
+import { application } from "./application"
+import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
+
+const controllers = definitionsFromContext(require.context("controllers", true, /_controller\.js$/))
+application.load(controllers)

data/{test/tmp/app/reflexes/user_reflex.rb → lib/generators/stimulus_reflex/templates/app/reflexes/%file_name%_reflex.rb.tt}

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
-class UserReflex < ApplicationReflex
+class <%= class_name %>Reflex < ApplicationReflex
+<%- if class_name == "Example" -%>
   # Add Reflex methods in this file.
   #
   # All Reflex instances include CableReady::Broadcaster and expose the following properties:
@@ -16,28 +17,56 @@ class UserReflex < ApplicationReflex
   #     - signed    - use a signed Global ID to map dataset attribute to a model eg. element.signed[:foo]
   #     - unsigned  - use an unsigned Global ID to map dataset attribute to a model  eg. element.unsigned[:foo]
   #   - cable_ready - a special cable_ready that can broadcast to the current visitor (no brackets needed)
-  #   - reflex_id   - a UUIDv4 that uniquely identies each Reflex
+  #   - id          - a UUIDv4 that uniquely identifies each Reflex
+  #   - tab_id      - a UUIDv4 that uniquely identifies the browser tab
   #
   # Example:
   #
   #   before_reflex do
   #     # throw :abort # this will prevent the Reflex from continuing
-  #     # learn more about callbacks at https://docs.stimulusreflex.com/rtfm/lifecycle
+  #     # learn more about callbacks at https://docs.stimulusreflex.com/guide/lifecycle
   #   end
   #
   #   def example(argument=true)
-  #     # Your logic here...
+  #     # Your logic here! Update models, launch jobs, poll Redis...
+  #
+  #     # By default, Reflexes call the controller action for the current page and render the view.
   #     # Any declared instance variables will be made available to the Rails controller and view.
+  #
+  #     # You can also use the `morph` method to mark a Reflex as Selector or Nothing.
+  #     # https://docs.stimulusreflex.com/guide/morph-modes#introducing-morphs
   #   end
   #
-  # Learn more at: https://docs.stimulusreflex.com/rtfm/reflex-classes
+  # Learn more at: https://docs.stimulusreflex.com/guide/reflex-classes
 
-  def update
-  end
+<%- end -%>
+<%- if class_name == "Example" -%>
+  def increment
+    count = session[:count] || 0
+    session[:count] = count + 1
+
+    morph "#time", Time.now
+    morph "#count", session[:count]
 
-  def do_stuff
+    cable_ready.set_value(selector: "progress", value: session[:count])
+
+    if session[:count] == 5
+      cable_ready.text_content(selector: "#reload", text: "Try reloading your browser window. The count is persisted in the session!")
+    end
+
+    if session[:count] >= 10
+      cable_ready.dispatch_event(name: "fireworks")
+    end
   end
 
-  def do_more_stuff
+  def reset
+    session[:count] = 0
+  end
+<%- else -%>
+  <%- actions.each do |action| -%>
+  def <%= action %>
   end
+  <%= "\n" unless action == actions.last -%>
+  <%- end -%>
+<%- end -%>
 end

data/lib/generators/stimulus_reflex/templates/app/reflexes/application_reflex.rb.tt

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class ApplicationReflex < StimulusReflex::Reflex
+  # Put application-wide Reflex behavior and callbacks in this file.
+  #
+  # Learn more at: https://docs.stimulusreflex.com/guide/reflex-classes
+  #
+  # If your ActionCable connection is: `identified_by :current_user`
+  #   delegate :current_user, to: :connection
+  #
+  # current_user delegation alloqs you to use the Current pattern, too:
+  #   before_reflex do
+  #     Current.user = current_user
+  #   end
+  #
+  # To access view helpers inside Reflexes:
+  #   delegate :helpers, to: :ApplicationController
+  #
+  # If you need to localize your Reflexes, you can set the I18n locale here:
+  #
+  #   before_reflex do
+  #     I18n.locale = :fr
+  #   end
+  #
+  # For code examples, considerations and caveats, see:
+  # https://docs.stimulusreflex.com/guide/patterns#internationalization
+end

data/lib/generators/stimulus_reflex/templates/app/views/examples/show.html.erb.tt

@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>StimulusReflex Demo</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%%= csrf_meta_tags %>
+    <%%= csp_meta_tag %>
+
+    <%% unless Rails.root.join("config/importmap.rb").exist? %>
+    <script type="importmap">
+      {
+        "imports": {
+          "fireworks-js": "https://ga.jspm.io/npm:fireworks-js@2.10.0/dist/index.es.js"
+        }
+      }
+    </script>
+    <%% end %>
+
+    <%% if respond_to?(:vite_javascript_tag) %>
+    <%%= vite_client_tag %>
+    <%%= vite_javascript_tag "application", defer: true %>
+    <%% elsif respond_to?(:javascript_pack_tag) %>
+    <%%= javascript_pack_tag "application", defer: true %>
+    <%% elsif respond_to?(:javascript_importmap_tags) %>
+    <%%= javascript_importmap_tags %>
+    <%% elsif respond_to?(:javascript_include_tag) %>
+    <%%= javascript_include_tag "application", defer: true %>
+    <%% end %>
+
+    <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>
+    <script type="module">
+      import { Fireworks } from 'fireworks-js'
+
+      const fireworks = new Fireworks(document.querySelector('.fireworks'))
+      document.addEventListener('fireworks', () => fireworks.launch(12))
+    </script>
+
+    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
+  </head>
+
+  <body style="cursor: auto;">
+    <main class="container">
+      <h1>StimulusReflex</h1>
+
+      <p>Actual demonstrations will show up in this space, soon. In the meantime, verify that your installation was successful:</p>
+
+      <button data-reflex="click->Example#increment">Increment</button>
+      <button data-reflex="click->Example#reset">Reset</button>
+
+      <br />
+
+      <div>
+        Last Refresh:
+        <b><mark id="time"><%%= Time.now %></mark></b>
+      </div>
+
+      <div>
+        Clicked
+        <b><mark id="count"><%%= session[:count] || 0 %></mark></b>
+        times
+      </div>
+
+      <br/>
+
+      <progress value="<%%= session[:count] %>" max="10"></progress>
+
+      <div id="reload"></div>
+
+      <h1>CableReady</h1>
+
+      <p>CableReady lets you control one or many clients from the server in real-time.</p>
+
+      <p>Everything in CableReady revolves around its <a href="https://cableready.stimulusreflex.com/reference/operations" target="_blank">38+</a> <b>operations</b>, which are commands that can update content, raise events, write cookies and even play audio. A group of one or more operations is called a <b>broadcast</b>. Broadcasts follow a <a href="https://dev.to/leastbad/the-cableready-language-implementation-project-4hjd">simple JSON format</a>.</p>
+
+      <p>We're going to go through the main ways developers use CableReady with some live demonstrations and code samples. We recommend that you open the controller class and ERB template for this page to follow along.</p>
+
+      <article>
+        <h3>Subscribe to a channel to receive broadcasts</h3>
+
+        WebSockets is the primary way most Rails developers use CableReady, via the <ins>cable_ready</ins> method.
+
+        <p>Use the <ins>cable_ready_stream_from</ins> helper to create a secure Action Cable subscription:</p>
+
+        <kbd>cable_ready_stream_from :example_page</kbd>
+
+        <%%= cable_ready_stream_from :example_page %>
+
+        <p style="margin-top: 1rem;">Every user looking at a page subscribed to the <ins>:example_page</ins> channel will receive the same broadcasts.</p>
+
+        <p>You can call <ins>cable_ready</ins> <a href="https://cableready.stimulusreflex.com/guide/cableready-everywhere" target="_blank">pretty much anywhere</a> in your application. Try it in your <kbd>rails console</kbd> now:</p>
+
+        <kbd>include CableReady::Broadcaster<br>cable_ready[:example_page].text_content("#cable_ready_stream_from_output", text: "Hello from the console!").broadcast</kbd>
+
+        <p style="margin-top: 1rem;">Any message you send will appear in the <ins>#cable_ready_stream_from_output</ins> DIV below &mdash; even if you <i>open multiple tabs</i>.</p>
+
+        <div id="cable_ready_stream_from_output" style="height: 2rem; font-weight: bolder; border: coral 2px dashed; padding: 0.15rem 0.4rem;"></div>
+
+        <p style="margin-top: 1rem;">While it's easy to <a href="https://cableready.stimulusreflex.com/guide/broadcasting-to-resources" target="_blank">create your own custom Action Cable channels</a>, <ins>cable_ready_stream_from</ins> will be the first tool you reach for, because it doesn't require any additional code.</p>
+
+        <p>Specify Active Record models or compound qualifiers to go full-ninja: 🥷</p>
+
+        <kbd>cable_ready_stream_from current_user</kbd><br>
+
+        <kbd style="margin-top: 0.3rem;">cable_ready_stream_from @post, :comments</kbd>
+
+        <p style="margin-top: 1rem;">These examples barely scrape the surface of what's possible. Be sure to check out the <a href="https://cableready.stimulusreflex.com/guide/identifiers" target="_blank">Stream Identifiers</a> chapter.</p>
+      </article>
+
+      <article>
+        <h3>Updatable: magically update the DOM when server-side data changes</h3>
+
+        <p>The <ins>updates_for</ins> helper allow you to designate sections of your page that will <a href="https://cableready.stimulusreflex.com/guide/updatable" target="_blank">update automatically</a> with new content when an Active Record model changes. 🤯</p>
+
+        <small>It's difficult to demonstrate this feature without creating a temporary model and a migration; a road to hell, paved with good intentions. However, you likely have these models (or similar) in your application. Uncomment, tweak if necessary and follow along!</small>
+
+        <p style="margin-top: 1rem;">First, call <ins>enable_updates</ins> in your model. You can use it on associations, too.</p>
+
+        <kbd> class User < ApplicationRecord<br>
+                &nbsp;&nbsp;enable_updates<br>
+                &nbsp;&nbsp;has_many :posts, enable_updates: true<br>
+              end<br>
+              <br>
+              class Post < ApplicationRecord<br>
+                &nbsp;&nbsp;belongs_to :user<br>
+              end
+        </kbd>
+
+        <p style="margin-top: 1rem;">By default, updates will be broadcast when any CRUD action is performed on the model. You can customize this behavior by passing options such as <ins>on: [:create, :update]</ins> or <ins>if: -> { id.even? }</ins>.</p>
+
+        <p>Next, use the <ins>updates_for</ins> helper to create one or more containers that will receive content updates.</p>
+
+        <kbd> &lt;%= cable_ready_updates_for current_user do %&gt;<br>
+                &nbsp;&nbsp;&lt;%= current_user.name %&gt;<br>
+              &lt;% end %&gt;
+        </kbd>
+
+        <!--
+        <%%#= cable_ready_updates_for current_user do %>
+          <p style="margin-top: 1rem;"><%%#= current_user.name %></p>
+        <%%# end %>
+        -->
+
+        <p style="margin-top: 1rem;">Update the current user in Rails console, and your page instantly reflects the new name. 🪄</p>
+
+        <p>Specify the class constant to get updates when records are created or deleted:</p>
+
+        <kbd> &lt;%= cable_ready_updates_for User do %&gt;<br>
+              &nbsp;&nbsp;&lt;ul&gt;<br>
+              &nbsp;&nbsp;&lt;% @users.each do |user| %&gt;<br>
+              &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;%= user.name %&gt;&lt;/li&gt;<br>
+              &nbsp;&nbsp;&lt;% end %&gt;<br>
+              &nbsp;&nbsp;&lt;/ul&gt;<br>
+              &lt;% end %&gt;
+        </kbd>
+
+        <!--
+        <%%#= cable_ready_updates_for User do %>
+          <ul style="margin-top: 1rem;">
+            <%%# @users.each do |user| %>
+              <li><%%#= user.name %></li>
+            <%%# end %>
+          </ul>
+        <%%# end %>
+        -->
+
+        <p style="margin-top: 1rem;">Update when new posts are created by the current user:</p>
+
+        <kbd> &lt;%= cable_ready_updates_for current_user, :posts do %&gt;<br>
+              &nbsp;&nbsp;&lt;ul&gt;<br>
+              &nbsp;&nbsp;&lt;% @posts.each do |post| %&gt;<br>
+              &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;%= post.title %&gt;&lt;/li&gt;<br>
+              &nbsp;&nbsp;&lt;% end %&gt;<br>
+              &nbsp;&nbsp;&lt;/ul&gt;<br>
+              &lt;% end %&gt;
+        </kbd>
+
+        <!--
+        <%%#= cable_ready_updates_for current_user, :posts do %>
+          <ul style="margin-top: 1rem;">
+            <%%# @posts.each do |post| %>
+              <li><%%#= post.title %></li>
+            <%%# end %>
+          </ul>
+        <%%# end %>
+        -->
+
+        <p style="margin-top: 1rem;">One major advantage of the Updatable approach is that each visitor sees <b>personalized content</b>. This is difficult with a WebSockets broadcast, where every subscriber receives the same data.</p>
+
+        <p>Instead, Updatable notifies all subscribers that an update is available, prompting each client to make a fetch request and refresh sections of the page.</p>
+
+        <p>There's more to <a href="https://cableready.stimulusreflex.com/guide/updatable" target="_blank">Updatable</a> than what's covered here... <i>but, not much more</i>. It really is that simple.</p>
+      </article>
+
+      <article>
+        <p>If you're finished with this example page and resource controller, you can destroy them:</p>
+
+        <kbd>rails destroy stimulus_reflex example</kbd>
+      </article>
+
+      <p>As always, please drop by the <a href="https://discord.gg/stimulus-reflex" target="_blank">StimulusReflex Discord server</a> if you have any questions or need support of any kind. We're incredibly proud of the community that has formed around these libraries, and we discuss everything from JavaScript/Ruby/CSS to View Component/Phlex to databases and CRDTs. <b>We'd love to hear what you're building with StimulusReflex and CableReady.</b></p>
+
+      <p>You can find the documentation for StimulusReflex <a href="https://docs.stimulusreflex.com" target="_blank">here</a> and CableReady <a href="https://cableready.stimulusreflex.com" target="_blank">here</a>.</p>
+    </main>
+    <div class="fireworks" style="position: fixed; bottom: 0; width: 100vw; height: 100vh; pointer-events: none;"></div>
+  </body>
+</html>

data/lib/generators/stimulus_reflex/templates/config/initializers/cable_ready.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+CableReady.configure do |config|
+  # Enable/disable exiting / warning when the sanity checks fail options:
+  # `:exit` or `:warn` or `:ignore`
+  #
+  # config.on_failed_sanity_checks = :exit
+
+  # Enable/disable assets compilation
+  # `true` or `false`
+  #
+  # config.precompile_assets = true
+
+  # Define your own custom operations
+  # https://cableready.stimulusreflex.com/customization#custom-operations
+  #
+  # config.add_operation_name :jazz_hands
+
+  # Change the default Active Job queue used for broadcast_later and broadcast_later_to
+  #
+  # config.broadcast_job_queue = :default
+end