Stimulus JS Twitter UI: Part 2 Discussion

Another great episode.
Stimulus isn't at the level of react/vue that provide great abstraction (no direct dom manipulation, html changes magically with state change etc).
It feels just like writing jquery.

BUT, the killer feature, over jquery, is the "sprinkled html".
Now, just by reading html we can get a hang of what's happening. Inability to do this always bugged when trying to reverse engineer a js behaviour in a website.

And here's a tad-bit refactored tweetform controller with constants, getters/setters:

import { Controller } from "stimulus"

class TweetFormController extends Controller {
  static targets = [ "body", "characterCount" ]

  initialize() {
    this.update()
  }

  update() {
    this.characterCount = this.bodyLength
    if (this.notATweet()) {
      this.characterCountTarget.classList.add('text-danger')
    } else {
      this.characterCountTarget.classList.remove('text-danger')
    }
  }

  submit(event) {
    if (this.notATweet()) {
      console.log('yup not a tweet')
      event.preventDefault()
    }
  }

  notATweet() {
    return (this.body.length > TweetFormController.maxTweetLength)
  }

  get body() {
    return this.bodyTarget.value
  }

  get bodyLength() {
    return this.body.length
  }

  set characterCount(value) {
    this.characterCountTarget.textContent = value
  }
}

TweetFormController.maxTweetLength = 10

export default TweetFormController

Hi All!

Any idea a good way to edit all fields in a model, like in a crm.

As this example is only editing one field 'body', what if I wanted to edit; title, body and more fields?

Thanks

Dan

Also found this for anyone trying to accomplish the same https://github.com/eelcoj/stimulus-inline-edit

Instead of using create.js.erb and update.js.erb it would be nice to see a reactive programming example with Stimulus Reflex. This way you do not have to manage DOM elements yourself and thanks to WebSockets the update should be faster than AJAX