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
eleventy-plugin-add-web-component-definitions's People
Contributors
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Stargazers
Watchers
eleventy-plugin-add-web-component-definitions's Issues
Plugin interferes with RSS feeds
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:
- add an
ignoreglob config option - change the 2nd condition to
content.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.
Deal with `permalink: false`
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.
Support for the `is` attribute for customized built-in elements
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.
passing eleventyConfig to path functions
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'
}
)Dead filter
...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...
Would you take a PR to replace JSDom with parse5?
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?
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.