jdvivar / eleventy-plugin-add-web-component-definitions Goto Github PK
View Code? Open in Web Editor NEWThis Eleventy plugin will add Web Component definitions automatically by reading custom tags from HTML pages.
License: MIT License
This Eleventy plugin will add Web Component definitions automatically by reading custom tags from HTML pages.
License: MIT License
Hello Daniel,
first of all, thank you so much for the plugin. It does exactly what I was looking for and it saved me a lot of work. Great work! Thank you!
Unfortunately, I'm running into a small issue. I use eleventy to also generate RSS feeds and since I enabled the plugin my RSS broke. ๐
I debugged a little bit and saw that the plugin changes files with the file type html
or files that start with <
. The 2nd condition is true for RSS feeds and that leads to malformed feed files.
To solve the issue I see two options:
ignore
glob config optioncontent.toLowerCase().startsWith('<!doctype html')
(not sure if that's a breaking change though).Thanks so much for the hard work, and I'm also happy to hand in a PR if you prefer that.
Hi! ๐
Firstly, thanks for your work on this project! ๐
Today I used patch-package to patch [email protected]
for the project I'm working on because templates with permalink: false
cause an error when running the package.
Here is the diff that solved my problem:
diff --git a/node_modules/eleventy-plugin-add-web-component-definitions/add-web-component-definitions.js b/node_modules/eleventy-plugin-add-web-component-definitions/add-web-component-definitions.js
index 2fbc2d6..da3ac31 100644
--- a/node_modules/eleventy-plugin-add-web-component-definitions/add-web-component-definitions.js
+++ b/node_modules/eleventy-plugin-add-web-component-definitions/add-web-component-definitions.js
@@ -16,6 +16,9 @@ const addChild = (body, child, position) => {
}
module.exports = function (options, content, outputPath) {
+ if (typeof outputPath !== 'string')
+ return content;
+
if (!!options.path && !!options.specifiers) {
throw new Error('You may configure a path function or import specifiers, but not both')
}
This issue body was partially generated by patch-package.
Web components can also be customized built-in elements using the is
attribute as long as the web component specifically extends that element. The plugin adds web component definitions based on the tag name but doesn't check for built-in elements using is
.
I've actually been messing around with this locally and think I have it working, but didn't want to open a pull request before discussing the feature and checking for contribution requirements.
What do you think of passing in the config object?
eleventyConfig.addPlugin(addWebComponentDefinitions, {
path: (tag, config) => config.environment === 'production'
? `/my-project/components/${tag}.js`
: `/components/${tag}.js`
}
)
eleventyConfig.addPlugin(addWebComponentDefinitions, {
specifiers: {
'custom-tag-one': (tag, config) => `/${config.pathPrefix}/assets/${tag}.js`,
'custom-tag-two': 'my-module'
}
)
...is now dead (unless path is a null string, which could/should be another throw Error), and the line can be deleted, because of this improvement...
Howdy
I put together an alternate implementation that uses parse5 and hast instead of JSDom, and is quite performant.
Rather than publish under some other name, would you be interested in taking a PR?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.