Enhance hashcash_hidden_field_tag

[elalemanyo]

This pull request enhances the hashcash_hidden_field_ta helper adding:

• Unique ID Assignment: Automatically generates a unique ID for the hidden field using SecureRandom.hex(4). This ID can be useful for DOM interactions and debugging, ensuring that each hashcash_hidden_field_tag has a unique identifier.

• Flexible HTML Attributes: By accepting additional HTML attributes **html_attributes, allows greater customization of the hidden field, making it more versatile.

• Default Stimulus Controller data-controller: Adds a default data-controller="hashcash" attribute, seamlessly integrating this helper with Stimulus. This makes it immediately available for client-side interactions managed by a hashcash Stimulus controller, reducing the need to manually add the controller each time the helper is used.

• Default and Overridable Options: id, data-hashcash and data-controller can be overridden if specific values are needed, offering a blend of helpful defaults and customization options.

These changes should be backward-compatible with existing implementations of hashcash_hidden_field_tag.

[alexisbernard]

Indeed, it sounds useful to add options. If you change the id, the JS won't detect the input since it does document.querySelector("input#hashcash"). I'm curious why you connect a Stimulus controller. That would help me to understand your use case. Are you using many hashcash on the same page?

[elalemanyo]

@alexisbernard This suggestion has come out after using it in different applications.
Some of our forms were rendered using turbo, after having some problems with the initialization we thought the easiest thing to do was to make a wrapper to initialize everything using stimulus, since in the past this solved all our problems with the timing.

On the other hand, using a unique id allows us to have multiple forms without having any collisions. In order not to break previous implementations I have modified the selector.

Currently we use a fairly simple stimulus controller, but it's still not a bad idea to separate the javascript and create an npm library with the javascript part. I think that would have a lot of benefits.
Example of our implementation:

hashcash_controller.js

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  connect () {
    const initializeHashcash = () => {
      if (typeof Hashcash !== 'undefined') {
        this.produceHashcash()
        clearInterval(this.hashcashInterval)
      }
    }

    this.hashcashInterval = setInterval(initializeHashcash, 100)
  }

  produceHashcash () {
    this.hashcashInstance = new Hashcash(this.element)
  }

  disconnect () {
    clearInterval(this.hashcashInterval)
  }
}

But we can think of putting all the logic into the controller, here is a very basic example.

Let me know what you think 🙂