![New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions](https://cdn.sanity.io/images/cgdhsj6q/production/86e6ebdea652d20da070ebbda20134b839972db7-1024x1024.webp?w=800&fit=max&auto=format)
Security News
New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
dom-mutator
Advanced tools
For those times you need to apply persistent DOM changes on top of HTML you don’t control.
Readme
For those times you need to apply persistent DOM changes on top of HTML you don’t control.
View demo: https://growthbook.github.io/dom-mutator/
const mutation = mutate.html("#greeting", html => html + ' world');
// works even if the selector doesn't exist yet
document.body.innerHTML += "<div id='greeting'>hello</div>";
// "hello world"
// re-applies if there's an external change
document.getElementById('greeting').innerHTML = 'hola';
// "hola world"
// Revert to the last externally set value
mutation.revert();
// "hola"
import mutate from "dom-mutator";
mutate.html("h1", html => html.toUpperCase());
mutate.classes("div.greeting", classes => classes.add("new-class"));
mutate.attribute(".get-started", "title", (oldVal) => "This is my new title attribute");
Features:
Install with npm or yarn (recommended):
yarn add dom-mutator
OR npm install --save dom-mutator
.
import mutate from "dom-mutator";
...
OR use with unpkg:
<script type="module">
import mutate from "https://unpkg.com/dom-mutator/dist/dom-mutator.esm.js";
...
</script>
There are 4 mutate methods available: html
, classes
, attribute
, and declarative
.
Mutate an element's innerHTML
// Signature
mutate.html(selector: string, (oldInnerHTML: string) => string);
// Example
mutate.html("h1", x => x.toUpperCase());
Mutate the set of classes for an element
// Signature
mutate.classes(selector: string, (classes: Set<string>) => void);
// Example
mutate.classes("h1", (classes) => {
classes.add("green");
classes.remove("red");
});
Mutate the value of an HTML element's attribute
// Signature
mutate.attribute(selector: string, attribute: string, (oldValue: string) => string);
// Example
mutate.attribute(".link", "href", (href) => href + "?foo");
Mutate the html, classes, or attributes using a declarative syntax instead of callbacks. Perfect for serialization.
// Signature
mutate.declarative({
selector: string,
action: "set" | "append" | "remove",
attribute: "html" | "class" | string,
value: string
});
// Examples
const mutations = [
{
selector: "h1",
action: "set",
attribute: "html",
value: "new text"
},
{
selector: ".get-started",
action: "remove",
attribute: "class",
value: "green"
},
{
selector: "a",
action: "append",
attribute: "href",
value: "?foo"
}
];
mutations.forEach(m=>mutate.declarative(m));
When you create a mutation, we start watching the document for elements matching the selector to appear. We do this with a single shared MutationObserver on the body.
When a matching element is found, we attach a separate MutationObserver filtered to the exact attribute being mutated. If an external change happens (e.g. from a React render), we re-apply your mutation on top of the new baseline value.
When revert
is called, we undo the change and go back to the last externally set value. We also disconnect the element's MutationObserver to save resources.
While the library is waiting for elements to appear, it runs document.querySelectorAll
every time a batch of elements is added or removed from the DOM.
This is performant enough in most cases, but if you want more control, you can pause and resume the global MutationObserver on demand.
One example use case is if you are making a ton of DOM changes that you know have nothing to do with the elements you are watching. You would pause right before making the changes and resume after.
import {disconnectGlobalObserver, connectGlobalObserver} from "dom-mutator";
// Pause
disconnectGlobalObserver();
// ... do a bunch of expensive DOM updates
// Resume
connectGlobalObserver();
Built with TSDX.
npm start
or yarn start
to rebuild on file change.
npm run build
or yarn build
to bundle the package to the dist
folder.
npm test --coverage
or yarn test --coverage
to run the Jest test suite with coverage report.
npm run lint --fix
or yarn lint --fix
to lint your code and autofix problems when possible.
FAQs
For those times you need to apply persistent DOM changes on top of HTML you don’t control.
The npm package dom-mutator receives a total of 148,481 weekly downloads. As such, dom-mutator popularity was classified as popular.
We found that dom-mutator demonstrated a healthy version release cadence and project activity because the last version was released less than 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
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.