Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@grrr/hansel
Advanced tools
Readme
Based on the article "Progressive enhancement with handlers and enhancers" by Hidde de Vries. We've been using this model for many years with great pleasure, fine-tuning here and there. Read the article for a deeper explanation.
Built with ❤️ by GRRR.
$ npm install @grrr/hansel
Note: depending on your setup additional configuration might be needed, since this package is published with untranspiled JavaScript.
Import into your main JavaScript file:
import { enhance, handle } from '@grrr/hansel';
enhance(document.documentElement, {
enhancer1(elm) {
// Enhance elements with this enhancer.
},
enhancer2(elm) { /* */ },
enhancerN(elm) { /* */ },
});
handle(document.documentElement, {
handler1(elm, event) {
// Handle clicks on elements with this handler.
},
handler2(elm, event) { /* */ },
handlerN(elm, event) { /* */ },
});
In a more modular setup, this would look like:
import { enhance, handle } from '@grrr/hansel';
import { enhancer as fooEnhancer, handler as fooHandler } from './foo';
import { enhancer as barEnhancer, handler as barHandler } from './bar';
enhance(document.documentElement, {
fooEnhancer,
barEnhancer,
});
handle(document.documentElement, {
fooHandler,
barHandler,
});
The enhance
function will look for DOM nodes containing the data-enhancer
attribute.
The second argument is a lookup table for enhancer functions. The value of the data-enhancer
attribute will be matched with the table and if found, executed, given the element as first argument:
// Given <p data-enhancer="foo" data-message="Hello!"></p>
enhance(document.documentElement, {
foo(elm) {
console.log(elm.getAttribute('data-message')); //=> "Hello!"
}
});
Multiple enhancers are possible by comma-separating them:
<div data-enhancer="foo,bar"></div>
Handlers are called on click, using a global event listener on the document
.
// Given <button data-handler="shout" data-message="Hello!">shout</button>
handle(document.documentElement, {
shout(elm, e) {
alert(elm.getAttribute('data-message')); //=> "Hello!"
e.preventDefault();
}
});
Multiple handlers are possible by comma-separating them:
<a data-handler="foo,bar" href="/">Do the thing</a>
It's possible to register a handler with options. To do so, register the handler via an object with an fn
and options
key:
handle(document.documentElement, {
foo(elm, e) { /* */ },
bar(elm, e) { /* */ },
baz: {
fn: baz(el, e) {
// The handler function.
},
options: {
// The handler options.
},
},
});
The following options are available:
By default, modifier-clicks (metaKey, ctrlKey, altKey and shiftKey) on anchors (<a>
) are caught, and are not passed on to the handler. To disable this behaviour, register the handler with the allowModifierKeys
option:
options: {
allowModifierKeys: true,
},
Thanks to the global click listener, handlers do not have to be re-initialized to dynamically added content. The presence of a data-handler
attribute is enough.
Enhancers are run immediately however, so you might want to run them again, for instance when loading new DOM nodes in response to an AJAX call. The first argument to enhance
is the container element within which nodes are searched. Therefore, you can pass the parent to the newly created nodes as reference to enhance all its children:
const myContainer = document.querySelector('foo');
myContainer.innerHTML = htmlContainingEnhancedElements;
enhance(myContainer, myEnhancers);
FAQs
Runner of handlers/enhancers.
The npm package @grrr/hansel receives a total of 5 weekly downloads. As such, @grrr/hansel popularity was classified as not popular.
We found that @grrr/hansel demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.