The stimulus component affirms that the controller should read as follows
import { Application } from '@hotwired/stimulus'
import PasswordVisibility from 'stimulus-password-visibility'
const application = Application.start()
application.register('password-visibility', PasswordVisibility)
when most controllers are initialized as import { Controller } from "@hotwired/stimulus"
The naming of the controller is apparently agnostic to its contents, as the documentation suggests index.js
. The following case uses passwordview_controller.js
Whatever the attempts, in the following three variants, the following errors are encountered in the browser console:
import { Application } / Application.start()
import { Controller } / Application.start()
import { Controller } / Controller.start()
config/importmap.rb
includes pin "stimulus-password-visibility", to: "https://ga.jspm.io/npm:[email protected]/dist/stimulus-password-visibility.es.js"
view set to
<div data-controller="password-visibility">
<input type="password" data-password-visibility-target="input" spellcheck="false" style='appearance: none; display: block; margin: 0; padding: 8px 12px 8px 48px; tab-size: 4;' />
<button type="button" data-action="password-visibility#toggle" style='cursor: pointer; display: flex; margin: 0; padding: 0 12px 0 0; position: absolute; right: 0px; text-transform: none; top: 0px;' >
<span data-password-visibility-target="icon"><%= fa_icon('eye', class: 'fa-1g') %></span>
<span data-password-visibility-target="icon" class="hidden"><%= fa_icon('eye-slash', class: 'fa-1g') %></span>
</button>
</div>
do note that there is a css issue, where buttons appear below the input field, which was subject to a failed attempted to be fixed here, in an initial case, before defining a specific class for this use-case, via style definitions (tailwind is uber-view-polluting IMHO) - may require a different issue
GIven the rails out-of-the-box contents of javascript/application.js
import { Application } from "@hotwired/stimulus"
const application = Application.start()
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
export { application }
how should this component be effectively written?
This is pertinent to all these components as they follow an identical pattern...