leastbad

import { Controller } from "stimulus"
import SlimSelect from "slim-select"
import "slim-select/dist/slimselect.min.css"
import "../style/slimselect-customized.css"

export default class extends Controller {
  connect() {
    const limit = this.data.get("limit")
    const placeholder = this.data.get("placeholder")
    const searchText = this.data.get("no-results")

leastbad

config.action_controller.relative_url_root = '/somebaseurl'

config.middleware.use RecodeUrl

class RecodeUrl
  def initialize(app, options = {})
    @app = app
  end

  def call(env)

leastbad

cable_ready.outer_html(html: render(partial)).broadcast

leastbad

class TenantFilterReflex < ApplicationReflex
  def filter_property
    find_tenant_filter(element).update_attribute :property_id, element.value
  end

  def filter_unit
    find_tenant_filter(element).update_attribute :unit_id, element.value
  end

  def fuzzy_name_search

leastbad

aasm do
  state :invited, initial: true
  state :identified
  state :details_added
  state :bank_details_added
  state :completed

  event :identify do
    transitions from: :invited, to: :identified
  end

leastbad

add_flash_types :primary, :secondary, :success, :danger, :warning, :info, :light, :dark

leastbad

https://github.com/google/diff-match-patch

leastbad

Just a few notes/caveats:

1. I've learned a lot since I wrote this, and lots of things could probably be better. I'd probably use a Mutation Observer to watch for new notifications, or tie it in with CableReady events. Lots of fun paths open to us now.
2. consumer comes from/through your Stimulus application.
3. You definitely should swap out the jQuery etc with something good like notyf or noty
4. line 9 means that you can access the internal state of the controller via the DOM element
5. Like your solution, it's designed to build on the Flash concept. And as I mentioned, it removes things from the DOM to make Turbolinks caching work well.
6. document.hidden is the "is this tab visible" magic.
7. It will attempt to send a native notification, apparently! It's been a long time since I worked on this. I would use CableReady's notification operation instead at this point.
8. The idea is that you put this controller on your body and the partial is included anywhere - d-none is a Bootstrap class to m

leastbad

Here are the Turbolinks events which fire when you do things.

first visit: load

click: click before-visit request-start visit request-end before-cache before-render render load

back: visit before-cache before-render render load

cached: click before-visit request-start visit before-cache before-render render request-end before-render render load

leastbad

With apologies for the half-baked solution presented, this is the interesting parts of a polymorphic comment engine that makes use of Stimulus, StimulusReflex and CableReady.

Note that app/javascript/controllers/index.js has to set application.consumer = consumer

This was written in the pre-morphs era, so I've done my best to fill in the blanks on what I'd do today in the Reflex.

Not shown: any view templates. Basic idea:

<%= render partial: "comments/comment", collection: @comments %>