https://github.com/rails-designer/i-runner
A tiny self-destructing custom element for one-off DOM actions (focus, reset and more)
https://github.com/rails-designer/i-runner
custom-element custom-elements hotwire rails turbo web-component
Last synced: 10 months ago
JSON representation
A tiny self-destructing custom element for one-off DOM actions (focus, reset and more)
- Host: GitHub
- URL: https://github.com/rails-designer/i-runner
- Owner: Rails-Designer
- License: mit
- Created: 2025-06-02T05:46:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-03T11:23:06.000Z (about 1 year ago)
- Last Synced: 2025-08-09T08:24:27.843Z (11 months ago)
- Topics: custom-element, custom-elements, hotwire, rails, turbo, web-component
- Language: JavaScript
- Homepage: https://railsdesigner.com/i-runner/
- Size: 40 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# i-runner
A tiny self-destructing custom element for one-off DOM actions (focus, reset and more).
**Sponsored By [Rails Designer](https://railsdesigner.com/)**
Want to be able to understand this JavaScript code? 😊 👉 [JavaScript for Rails Developers](https://javascriptforrails.com/)
## Installation
```bash
npm install i-runner
```
Then in your code:
```js
import "i-runner";
```
## Usage
Simply drop the `` tag in your HTML:
```html
```
## Attributes
- `action` (string, required). One of the below listed actions.
- `target` (string, optional). An element ID to select via `#id`.
- `targets` (string, optional). A class name to select via `.className`.
## Actions
i-runner includes a few first-party actions.
- focus; set focus to an input field;
- reset; reset a form;
- addClass; add one or many CSS classes to a field;
- setAttribute; add an attribute.
## Extensibility
You can register your own actions at runtime by tapping into the exported `ACTION_HANDLERS` map. Every action handler follows the signature:
```
(elements: HTMLElement[], options: { [attrName: string]: string }) ⇒ void
```
1. Import the registry (ESM) or access it from the global UMD object:
```js
import { ACTION_HANDLERS } from "i-runner";
```
2. Define your custom `fadeOut` handler:
```js
function fadeOutAction(elements, options) {
const duration = Number(options["data-duration"] || 300);
const easing = options["data-easing"] || "linear";
elements.forEach((element) => {
element.style.transition = `opacity ${duration}ms ${easing}`;
element.style.opacity = "0";
setTimeout(() => {
// Remove the element after the fade completes
element.remove();
}, duration);
});
}
```
3. Register it under a new name:
```js
ACTION_HANDLERS.fadeOut = fadeOutAction;
```
4. Use it in your HTML:
```html
```
## Development
```bash
# Install dev dependencies
npm install
# Build bundles (ESM + UMD)
npm run build
# Preview with a local server
npm dev
# Run basic test
npm test
```
## Release
Because I always forget how to do this and don't feel like pulling a third-party dependency for releasing.
```bash
npm version patch # or minor, or major
npm publish
git push
git push --tags
```