Stimulus Autoscroll and Broadcasting Messages Discussion

Very nice, I'm enjoying these videos where you walk through the approaches and build on them piece-by-piece! One StimulusJS-specific update could be converting your message partial to:

<p class="flex items-center" data-conversation-target="message">
  <div class="messenger">
    <span class="message-avatar"><%= user_avatar(message.user) %></span>
    <span><%= message.user.name.capitalize %></span>
  </div>

  <%= message.content %>
</p>

And then in your stimulus controller you can use the:

messageTargetConnected(element) {
  this.setScrollPosition()
}

Stimulus provides lifecycle callbacks for adding/removing target elements, so you don't have to manage that yourself.

Great videos. I love how you break down all the concepts by referencing the docs and then showing them step by step in the example app. It's very informative.

I solved the scroll into view using this JS.

this.messagesTarget.scrollIntoView({ behavior: 'smooth' })

Is it intentional not to use broadcasts_refreshes?

Up to this point, yes. Don't worry it's coming though ;)

[Deprecation]Listener added for a 'DOMNodeInserted' mutation event. Support for this event type has been removed, and this event will no longer be fired.

Thanks, Peter! Very good to know. I've updated the code to use a mutation observer which is what they have been deprecated in favor of instead. The code for the Stimulus controller has been updated on the repo but I'm going to add it here as well for anyone coming to this video:

export default class extends Controller {
  static targets = [ "messages", "textArea" ]

  connect() {
    this.setScrollPosition();
    this.observer = new MutationObserver((mutations) => {
      const hasNewNodes = mutations.some(mutation => 
        mutation.type === 'childList' && mutation.addedNodes.length > 0
      );

      if (hasNewNodes) {
        this.setScrollPosition();
      }
    });

    this.observer.observe(this.messagesTarget, {
      childList: true,
      subtree: true
    });
  }

  disconnect() {
    if (this.observer) {
      this.observer.disconnect();
    }
  }

  setScrollPosition() {
    this.messagesTarget.scrollTop = this.messagesTarget.scrollHeight - this.messagesTarget.clientHeight 
  }

  submitForm(event) {
    if (event.key === "Enter" && !event.shiftKey) {
      event.preventDefault();
      const form = event.target.closest("form");
      form.submit();
    }
  }
}