Mutation indicator overlays for CableReady operations
Tiny at <100 LOC
This Stimulus controller intercepts CableReady after- DOM events. When it detects an operation that mutates an element, it will create a titled overlay which briefly announces when an element is modified.
Morph operations will be orange, while all others are green.
If an operation was initiated by StimulusReflex, additional information will be presented about the Reflex action in the title.
First, add Radiolabel to your package.json:
yarn add radiolabel
Then, just add Radiolabel to your main JS entry point or Stimulus controllers root folder:
import { Application } from 'stimulus'
import Radiolabel from 'radiolabel'
import { definitionsFromContext } from 'stimulus/webpack-helpers'
const application = Application.start()
const context = require.context('../controllers', true, /\.js$/)
application.load(definitionsFromContext(context))
// Manually register Radiolabel as a Stimulus controller
application.register('radiolabel', Radiolabel)
Optionally, you can restrict the import to your development environment:
import { Application } from 'stimulus'
import { definitionsFromContext } from 'stimulus/webpack-helpers'
const application = Application.start()
const context = require.context('../controllers', true, /\.js$/)
application.load(definitionsFromContext(context))
if (process.env.RAILS_ENV === 'development') {
import('radiolabel').then(Radiolabel =>
application.register('radiolabel', Radiolabel.default)
)
}
If Stimulus can't locate a controller at runtime, the data-controller attribute is ignored, meaning your template can reference radiolabel in the production environment and nothing will happen.
<body data-controller="radiolabel"></body>
If you'd like to change the default 7 second visual effect duration, just set a new value on the same element that the controller is defined on.
<body data-controller="radiolabel" data-radiolabel-duration-value="2"></body>
Yes, that's really it.
Bug reports and pull requests are welcome.
This package is available as open source under the terms of the MIT License.
FAQs
Mutation indicator overlays for CableReady operations
The npm package radiolabel receives a total of 143 weekly downloads. As such, radiolabel popularity was classified as not popular.
We found that radiolabel demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.
Security News
Michigan TypeScript founder Dimitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.