ReflexesLink to heading

In addition to setting props and slots, LiveComponent allows calling methods on components from the front-end. The library borrows a term from Stimulus Reflex and names these method calls "reflexes."

Calling a component method (reflex)Link to heading

Reflexes are really no different than slot methods, but they use a slightly different syntax. Let's take a look at an example component.

class UpcaseComponent < ApplicationComponent
  include LiveComponent::Base

  def initialize(value:)
    @value = value
  end

  def upcase(silly: false)
    @value.upcase!
    @value << "😛" if silly
  end
end

class UpcaseComponent < ApplicationComponent
  include LiveComponent::Base

  def initialize(value:)
    @value = value
  end

  def upcase(silly: false)
    @value.upcase!
    @value << "😛" if silly
  end
end

Rather than set the value attribute in JavaScript, we can call the upcase method instead and leave the logic on the server. Here's the corresponding controller:

import { live, LiveController } from "@camertron/live-component";

@live("UpcaseComponent")
export class UpcaseComponent extends LiveController {
  // wired to a button or something via data-action attribute (not shown)
  on_click() {
    this.render((component) => {
      component.call("upcase");
    });
  }
}

import { live, LiveController } from "@camertron/live-component";

@live("UpcaseComponent")
export class UpcaseComponent extends LiveController {
  // wired to a button or something via data-action attribute (not shown)
  on_click() {
    this.render((component) => {
      component.call("upcase");
    });
  }
}

Reflexes can also accept keyword arguments, which are passed as the second argument to the call method.

import { live, LiveController } from "@camertron/live-component";

@live("UpcaseComponent")
export class UpcaseComponent extends LiveController {
  // wired to a button or something via data-action attribute (not shown)
  on_click() {
    this.render((component) => {
      component.call("upcase", { silly: true });
    });
  }
}

import { live, LiveController } from "@camertron/live-component";

@live("UpcaseComponent")
export class UpcaseComponent extends LiveController {
  // wired to a button or something via data-action attribute (not shown)
  on_click() {
    this.render((component) => {
      component.call("upcase", { silly: true });
    });
  }
}

Note that reflex arguments use the same serialization and deserialization mechanism as component and slot arguments. See the section on serialization for more information.

Slots

Stimulus helpers

Reflexes Link to heading

Calling a component method (reflex) Link to heading

ReflexesLink to heading

Calling a component method (reflex)Link to heading