PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Attractive.js custom actions can start as a short js: expression, grow into a registered function, and become a class with a run() method when the behavior needs more structure. The registration pattern remains Attractive.activate({ addActions: ... }) for functions and classes. The main trade-off: the compact js: shortcut uses new Function(), so it requires unsafe-eval in the site’s Content Security Policy.
Choose an implementation form that fits the behavior
The Rails Designer author’s custom-actions guide presents three ways to add behavior. Use the smallest form that stays clear and reusable; promote the logic as it gains a name, structure, or helper needs.
| Form | Best fit | Main consideration |
|---|---|---|
js: expression |
A short, one-off expression | Compact, but uses new Function() and requires unsafe-eval in the CSP. |
| Registered function | A named behavior with modest logic that may be reused | Receives the element and a context object; register it through addActions. |
Class with run() |
A larger behavior that benefits from instance structure or helpers | Uses the same registration configuration; the optional Action base class adds helpers. |
Use js: only for a small expression
The guide describes js: as a way to evaluate a JavaScript expression on the element, using Attractive.js’s normal action pipeline. That means the expression can participate in configured events and attributes such as data-debounce and data-delay. It is intended for behavior too small to justify a named action.
There is a CSP consequence: the author says the implementation uses new Function(), which requires the unsafe-eval directive. If your site’s Content Security Policy disallows unsafe-eval, do not use this shortcut; register a function or class instead. The guide is describing the implementation, not offering an independent security assessment.
#1 Best Overall
Promote reusable logic to a registered function
When behavior deserves a name but does not need a class, define a function and register it with Attractive.activate. For example, a sharing action might accept the triggering element and the context’s dataset:
function sharePage(element, { dataset }) {
// Use element and dataset to implement the sharing behavior.
}
Attractive.activate({
addActions: { sharePage }
});According to the guide, the function receives the element plus a context object that can include value, target, targets, event, and dataset. Use the context values relevant to the action rather than reaching for a class solely to access them.
Rank #2
Use a class when the action needs structure
For behavior that has grown beyond a compact function, the guide shows a class with a run() method, still registered through addActions. An instance receives element and options. The optional Action base class provides value, dataset, and a dispatchEvent helper.
The author’s Reorder example uses that helper to emit a reorder:done event carrying IDs. This is useful when an action needs to report a result to other code, rather than only changing the triggering element. The guide does not establish that every action should extend Action; treat the base class as an optional source of helpers.
Organize actions and handle lifecycle events
Keep a growing set easy to find
For several actions, the author suggests storing each in its own file, importing them into a barrel module, and passing the resulting object to Attractive.activate({ addActions: actions }). This is an organizational option, not a required project convention.
Use hooks for shared handling
The guide describes three hooks: beforeAction runs before each action and can cancel it by returning false; afterAction runs after a successful action; and onError handles an action that throws. It also says a failure does not stop the rest of a chained action from continuing, and mentions Attractive.onError as a global fallback suitable for monitoring integration. These are claims from the author’s implementation guide, not independently tested behavior.
Rank #4
Keep related APIs separate from the custom-action choice
The same guide mentions optional keyboard support for event keys and global hotkeys, integration with native browser constraint validation, a shared JSON reactive store with text bindings, and Attractive Element, a custom-element base class that scopes actions and targets. These are related capabilities; none is a prerequisite for choosing between an expression, function, or class.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteA separate overview published on 10 September 2026 described Attractive.js 1.0.0 as a pre-release at that time, and discussed @action/@target syntax and bundled actions. That is publication-time context, not confirmation of the project’s release status on 10 October 2026. The API descriptions here likewise reflect the Rails Designer author’s guide; current project documentation was not independently verified.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
