stimulus_reflex 3.3.0.pre0 → 3.3.0.pre5

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

@@ -1,56 +1,88 @@
 import ApplicationController from './application_controller'
 
-/* This is the custom StimulusReflex controller for <%= class_name %>Reflex.
+/* This is the custom StimulusReflex controller for the <%= class_name %> 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.
+  */
+
+  connect () {
+    super.connect()
+    // add your code here, if applicable
+  }
+
   /* Reflex specific lifecycle methods.
-   * Use methods similar to this example to handle lifecycle concerns for a specific Reflex method.
-   * Using the lifecycle is optional, so feel free to delete these stubs if you don't need them.
+   *
+   * 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="<%= class_name.underscore.dasherize %>" to your markup alongside
+   * data-reflex="<%= class_name %>#dance" for the lifecycle methods to fire properly.
    *
    * Example:
    *
-   *   <a href="#" data-reflex="<%= class_name %>Reflex#example">Example</a>
+   *   <a href="#" data-reflex="click-><%= class_name %>#dance" data-controller="<%= class_name.underscore.dasherize %>">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. "<%= class_name %>Reflex#example"
+   *   reflex - the name of the reflex e.g. "<%= class_name %>#dance"
+   *
+   *   error/noop - the error message (for reflexError), otherwise null
    *
-   *   error - error message from the server
+   *   reflexId - a UUID4 or developer-provided unique identifier for each Reflex
    */
 
 <% if actions.empty? -%>
-  // beforeUpdate(element, reflex) {
-  //  element.innerText = 'Updating...'
+  // Assuming you create a "<%= class_name %>#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...'
   // }
 
-  // updateSuccess(element, reflex) {
-  //   element.innerText = 'Updated Successfully.'
+  // danceSuccess(element, reflex, noop, reflexId) {
+  //   element.innerText = 'Danced like no one was watching! Was someone watching?'
   // }
 
-  // updateError(element, reflex, error) {
-  //   console.error('updateError', error);
-  //   element.innerText = 'Update Failed!'
+  // danceError(element, reflex, error, reflexId) {
+  //   console.error('danceError', error);
+  //   element.innerText = "Couldn't dance!"
   // }
 <% end -%>
 <% actions.each do |action| -%>
-  // <%= "before_#{action}".camelize(:lower) %>(element, reflex) {
-  //  console.log("before <%= action %>", element, reflex)
+  // <%= "before_#{action}".camelize(:lower) %>(element, reflex, noop, reflexId) {
+  //  console.log("before <%= action %>", element, reflex, reflexId)
+  // }
+
+  // <%= "#{action}_success".camelize(:lower) %>(element, reflex, noop, reflexId) {
+  //   console.log("<%= action %> success", element, reflex, reflexId)
   // }
 
-  // <%= "#{action}_success".camelize(:lower) %>(element, reflex) {
-  //   console.log("<%= action %> success", element, reflex)
+  // <%= "#{action}_error".camelize(:lower) %>(element, reflex, error, reflexId) {
+  //   console.error("<%= action %> error", element, reflex, error, reflexId)
   // }
 
-  // <%= "#{action}_error".camelize(:lower) %>(element, reflex, error) {
-  //   console.error("<%= action %> error", element, reflex, error)
+  // <%= "#{action}_halted".camelize(:lower) %>(element, reflex, noop, reflexId) {
+  //   console.warn("<%= action %> halted", element, reflex, reflexId)
   // }
 
-  // <%= "after_#{action}".camelize(:lower) %>(element, reflex, error) {
-  //   console.log("after <%= action %>", element, reflex, error)
+  // <%= "after_#{action}".camelize(:lower) %>(element, reflex, noop, reflexId) {
+  //   console.log("after <%= action %>", element, reflex, reflexId)
   // }
 <%= "\n" unless action == actions.last -%>
 <% end -%>

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

@@ -1,7 +1,7 @@
 import { Controller } from 'stimulus'
 import StimulusReflex from 'stimulus_reflex'
 
-/* This is your application's ApplicationController.
+/* This is your ApplicationController.
  * All StimulusReflex controllers should inherit from this class.
  *
  * Example:
@@ -17,7 +17,8 @@ export default class extends Controller {
     StimulusReflex.register(this)
   }
 
-  /* Application wide lifecycle methods.
+  /* Application-wide lifecycle methods
+   *
    * Use these methods to handle lifecycle concerns for the entire application.
    * Using the lifecycle is optional, so feel free to delete these stubs if you don't need them.
    *
@@ -26,24 +27,26 @@ export default class extends Controller {
    *   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. "ExampleReflex#demo"
+   *   reflex - the name of the reflex e.g. "Example#demo"
+   *
+   *   error/noop - the error message (for reflexError), otherwise null
    *
-   *   error - error message from the server
+   *   reflexId - a UUID4 or developer-provided unique identifier for each Reflex
    */
 
-  beforeReflex (element, reflex) {
+  beforeReflex (element, reflex, noop, reflexId) {
     // document.body.classList.add('wait')
   }
 
-  reflexSuccess (element, reflex, error) {
+  reflexSuccess (element, reflex, noop, reflexId) {
     // show success message etc...
   }
 
-  reflexError (element, reflex, error) {
+  reflexError (element, reflex, error, reflexId) {
     // show error message etc...
   }
 
-  afterReflex (element, reflex) {
+  afterReflex (element, reflex, noop, reflexId) {
     // document.body.classList.remove('wait')
   }
 }

data/lib/stimulus_reflex.rb

@@ -11,15 +11,77 @@ require "cable_ready"
 require "stimulus_reflex/version"
 require "stimulus_reflex/reflex"
 require "stimulus_reflex/element"
-require "stimulus_reflex/broadcaster"
-require "stimulus_reflex/morph_mode"
 require "stimulus_reflex/channel"
-require "stimulus_reflex/morph_mode/nothing_morph_mode"
-require "stimulus_reflex/morph_mode/page_morph_mode"
-require "stimulus_reflex/morph_mode/selector_morph_mode"
+require "stimulus_reflex/broadcasters/broadcaster"
+require "stimulus_reflex/broadcasters/nothing_broadcaster"
+require "stimulus_reflex/broadcasters/page_broadcaster"
+require "stimulus_reflex/broadcasters/selector_broadcaster"
 require "generators/stimulus_reflex_generator"
 
 module StimulusReflex
   class Engine < Rails::Engine
+    NODE_VERSION_FORMAT = /(\d\.\d\.\d.*):/
+    JSON_VERSION_FORMAT = /(\d\.\d\.\d.*)\"/
+
+    initializer "stimulus_reflex.verify_caching_enabled" do
+      unless caching_enabled?
+        puts <<~WARN
+          Stimulus Reflex requires caching to be enabled. Caching allows the session to be modified during ActionCable requests.
+          To enable caching in development, run:
+
+            rails dev:cache
+        WARN
+        exit
+      end
+    end
+
+    initializer "stimulus_reflex.verify_npm_package_version" do
+      unless node_version_matches?
+        puts <<~WARN
+          The Stimulus Reflex javascript package version (#{node_package_version}) does not match the Rubygem version (#{gem_version}).
+          To update the Stimulus Reflex node module:
+
+            yarn upgrade stimulus_reflex@#{gem_version}
+        WARN
+        exit
+      end
+    end
+
+    private
+
+    def caching_enabled?
+      Rails.application.config.action_controller.perform_caching &&
+        Rails.application.config.cache_store != :null_store
+    end
+
+    def node_version_matches?
+      node_package_version == gem_version
+    end
+
+    def gem_version
+      StimulusReflex::VERSION.gsub(".pre", "-pre")
+    end
+
+    def node_package_version
+      match = File.foreach(yarn_lock_path).grep(/^stimulus_reflex/)
+      return match.first[NODE_VERSION_FORMAT, 1] if match.present?
+
+      match = File.foreach(yarn_link_path).grep(/version/)
+      return match.first[JSON_VERSION_FORMAT, 1] if match.present?
+
+      puts <<~WARN
+        Can't locate the stimulus_reflex NPM package. 
+        Either add it to your package.json as a dependency or use "yarn link stimulus_reflex" if you are doing development.
+      WARN
+      exit
+    end
+
+    def yarn_lock_path
+      Rails.root.join("yarn.lock")
+    end
+
+    def yarn_link_path
+      Rails.root.join("node_modules", "stimulus_reflex", "package.json")
+    end
   end
 end

data/lib/stimulus_reflex/broadcasters/broadcaster.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module StimulusReflex
+  class Broadcaster
+    include CableReady::Broadcaster
+
+    attr_reader :reflex, :logger
+    delegate :permanent_attribute_name, :stream_name, to: :reflex
+
+    def initialize(reflex)
+      @reflex = reflex
+      @logger = Rails.logger
+    end
+
+    def nothing?
+      false
+    end
+
+    def page?
+      false
+    end
+
+    def selector?
+      false
+    end
+
+    def enqueue_message(subject:, body: nil, data: {})
+      logger.error "\e[31m#{body}\e[0m" if subject == "error"
+      cable_ready[stream_name].dispatch_event(
+        name: "stimulus-reflex:server-message",
+        detail: {
+          reflexId: data["reflexId"],
+          stimulus_reflex: data.merge(
+            broadcaster: to_sym,
+            server_message: {subject: subject, body: body}
+          )
+        }
+      )
+    end
+
+    def broadcast_message(subject:, body: nil, data: {})
+      enqueue_message subject: subject, body: body, data: data
+      cable_ready.broadcast
+    end
+
+    # abstract method to be implemented by subclasses
+    def broadcast(*args)
+      raise NotImplementedError
+    end
+
+    # abstract method to be implemented by subclasses
+    def to_sym
+      raise NotImplementedError
+    end
+  end
+end

data/lib/stimulus_reflex/{morph_mode/nothing_morph_mode.rb → broadcasters/nothing_broadcaster.rb}

@@ -1,15 +1,17 @@
+# frozen_string_literal: true
+
 module StimulusReflex
-  class NothingMorphMode < MorphMode
-    def broadcast(reflex, selectors, data)
+  class NothingBroadcaster < Broadcaster
+    def broadcast(_, data)
       broadcast_message subject: "nothing", data: data
     end
 
-    def to_sym
-      :nothing
-    end
-
     def nothing?
       true
     end
+
+    def to_sym
+      :nothing
+    end
   end
 end

data/lib/stimulus_reflex/broadcasters/page_broadcaster.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module StimulusReflex
+  class PageBroadcaster < Broadcaster
+    def broadcast(selectors, data)
+      reflex.controller.process reflex.url_params[:action]
+      page_html = reflex.controller.response.body
+
+      return unless page_html.present?
+
+      document = Nokogiri::HTML(page_html)
+      selectors = selectors.select { |s| document.css(s).present? }
+      selectors.each do |selector|
+        html = document.css(selector).inner_html
+        cable_ready[stream_name].morph(
+          selector: selector,
+          html: html,
+          children_only: true,
+          permanent_attribute_name: permanent_attribute_name,
+          stimulus_reflex: data.merge({
+            broadast_type: to_sym
+          })
+        )
+      end
+      cable_ready.broadcast
+    end
+
+    def to_sym
+      :page
+    end
+
+    def page?
+      true
+    end
+  end
+end

data/lib/stimulus_reflex/broadcasters/selector_broadcaster.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module StimulusReflex
+  class SelectorBroadcaster < Broadcaster
+    def broadcast(_, data = {})
+      morphs.each do |morph|
+        selectors, html = morph
+        updates = selectors.is_a?(Hash) ? selectors : Hash[selectors, html]
+        updates.each do |selector, html|
+          html = html.to_s
+          fragment = Nokogiri::HTML.fragment(html)
+          match = fragment.at_css(selector)
+          if match.present?
+            cable_ready[stream_name].morph(
+              selector: selector,
+              html: match.inner_html,
+              children_only: true,
+              permanent_attribute_name: permanent_attribute_name,
+              stimulus_reflex: data.merge({
+                broadast_type: to_sym
+              })
+            )
+          else
+            cable_ready[stream_name].inner_html(
+              selector: selector,
+              html: fragment.to_html,
+              stimulus_reflex: data.merge({
+                broadast_type: to_sym
+              })
+            )
+          end
+        end
+      end
+
+      cable_ready.broadcast
+      morphs.clear
+    end
+
+    def morphs
+      @morphs ||= []
+    end
+
+    def to_sym
+      :selector
+    end
+
+    def selector?
+      true
+    end
+  end
+end

data/lib/stimulus_reflex/channel.rb

@@ -1,8 +1,6 @@
 # frozen_string_literal: true
 
 class StimulusReflex::Channel < ActionCable::Channel::Base
-  include StimulusReflex::Broadcaster
-
   def stream_name
     ids = connection.identifiers.map { |identifier| send(identifier).try(:id) || send(identifier) }
     [
@@ -34,21 +32,26 @@ class StimulusReflex::Channel < ActionCable::Channel::Base
         reflex = reflex_class.new(self, url: url, element: element, selectors: selectors, method_name: method_name, permanent_attribute_name: permanent_attribute_name, params: params)
         delegate_call_to_reflex reflex, method_name, arguments
       rescue => invoke_error
-        reflex&.rescue_with_handler(invoke_error)
         message = exception_message_with_backtrace(invoke_error)
-        return broadcast_message subject: "error", body: "StimulusReflex::Channel Failed to invoke #{target}! #{url} #{message}", data: data
+        body = "StimulusReflex::Channel Failed to invoke #{target}! #{url} #{message}"
+        if reflex
+          reflex.rescue_with_handler(invoke_error)
+          reflex.broadcast_message subject: "error", body: body, data: data
+        else
+          logger.error "\e[31m#{body}\e[0m"
+        end
+        return
       end
 
       if reflex.halted?
-        broadcast_message subject: "halted", data: data
+        reflex.broadcast_message subject: "halted", data: data
       else
         begin
-          reflex.morph_mode.stream_name = stream_name
-          reflex.morph_mode.broadcast(reflex, selectors, data)
+          reflex.broadcast(selectors, data)
         rescue => render_error
           reflex.rescue_with_handler(render_error)
           message = exception_message_with_backtrace(render_error)
-          broadcast_message subject: "error", body: "StimulusReflex::Channel Failed to re-render #{url} #{message}", data: data
+          reflex.broadcast_message subject: "error", body: "StimulusReflex::Channel Failed to re-render #{url} #{message}", data: data
         end
       end
     ensure