Comments (2)
more general
function getElementTransformer(selector, options = {}) {
const defaultOptions = {
name: 'div',
attributes: (e => Object.fromEntries(Array.from(e.attributes).map(a => [a.name, a.value]))),
class: (e => e.localName),
};
options = Object.assign(defaultOptions, options);
const getName = (typeof options.name == 'function') ? (e => options.name(e)) : (() => options.name);
const getAttributes = (
(typeof options.attributes == 'function') ? (e => options.attributes(e)) :
(typeof options.attributes == 'object') ? (() => options.attributes) :
(() => false)
);
const getExtraClass = (
(typeof options.class == 'function') ? (e => options.class(e)) :
(typeof options.class == 'string') ? (() => options.class) :
(() => false)
);
const domTransformer = {
selector,
transform: ({ elements, document }) => {
for (let e = 0; e < elements.length; e++) {
const element = elements[e];
const nameNew = getName(element);
if (!nameNew) continue; // no replace
const attributesNew = getAttributes(element) || {};
const extraClassNew = getExtraClass(element);
const elementNew = document.createElement(nameNew);
for (const [name, value] of Object.entries(attributesNew)) {
elementNew.setAttribute(name, value);
}
elementNew.innerHTML = element.innerHTML;
if (extraClassNew) elementNew.classList.add(extraClassNew);
//element.parentNode.replaceChild(elementNew, element);
element.replaceWith(elementNew);
}
},
};
return domTransformer;
}
eleventyConfig.addPlugin(transformDomPlugin, [
getElementTransformer('page', { class: 'page-element' }),
getElementTransformer('nw', { name: 'span', class: 'nowrap-element' }),
...(['de', 'en']).map(langKey =>
getElementTransformer(langKey,
{ name: 'span', attributes: (e => ({ lang: e.localName })), class: false })
)
]);
from eleventy-plugin-transformdom.
Wow! I hadn't considered the plugin being used in this way, but it's very cool!
Thanks for the detailed code too! I think this would be a really interesting example of how the plugin can be used 😃
I'm flat out at the moment - any chance you'd be willing to fork the repo, add your example to the "examples" directory (feel free to use one of the existing example directories as a template), and submit a PR?
from eleventy-plugin-transformdom.
Related Issues (1)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eleventy-plugin-transformdom.