Chuleta de StimulusReflex

Conceptos Fundamentales

StimulusReflex permite interfaces de usuario reactivas y en tiempo real en aplicaciones Rails mediante WebSockets (ActionCable) y CableReady.

Reflex Básico

<!-- view.html.erb -->
<button data-reflex="click->Counter#increment">Increment</button>

# app/reflexes/counter_reflex.rb
class CounterReflex < ApplicationReflex
  def increment
    @count = element.dataset[:count].to_i + 1
  end
end

Modos de Morph

Page Morph (Por defecto)

Vuelve a renderizar la página completa a través del controlador y aplica las diferencias al DOM.

Selector Morph

# app/reflexes/example_reflex.rb
class ExampleReflex < ApplicationReflex
  def update_metric
    morph "#metric-display", render(partial: "metrics/metric", locals: { value: 42 })
  end
end

Nothing Morph

Ejecuta la lógica del servidor sin modificar el DOM del cliente.

class ExampleReflex < ApplicationReflex
  def background_task
    LongRunningJob.perform_later
    morph :nothing
  end
end

Métodos de Ciclo de Vida

Callbacks en el Servidor

class ExampleReflex < ApplicationReflex
  before_reflex :authenticate
  around_reflex :measure_time
  after_reflex :log_activity
end

Callbacks Genéricos en el Cliente

beforeReflex(element, reflex, noop, reflexId): Antes de enviar la petición WebSocket
reflexSuccess(element, reflex, noop, reflexId): Tras la ejecución del reflex y la actualización del DOM
reflexError(element, reflex, error, reflexId): Cuando el servidor lanza un error no controlado
reflexHalted(element, reflex, noop, reflexId): Cuando el reflex se cancela con throw :abort
afterReflex(element, reflex, noop, reflexId): Ejecutado tanto en caso de éxito como de fallo
finalizeReflex(element, reflex, noop, reflexId): Hook de limpieza final

Eventos del DOM

stimulus-reflex:before
stimulus-reflex:success
stimulus-reflex:error
stimulus-reflex:halted
stimulus-reflex:after
stimulus-reflex:connected
stimulus-reflex:disconnected
stimulus-reflex:ready

Patrones Prácticos

Manejo de Formularios

Los reflexes activados en elementos de formulario serializan automáticamente los campos en params.

Encadenamiento de Promesas

this.stimulate('Comments#create')
  .then(() => this.showSuccess())
  .catch((err) => this.handleError(err))

Elementos Permanentes

Marca elementos con data-reflex-permanent para que los morphs de página completa no los alteren.

<div data-reflex-permanent>
  <video id="player" src="video.mp4" controls></video>
</div>

Referencias

Documentación de StimulusReflex