This Eleventy plugin will add Web Component definitions automatically by reading custom tags from HTML pages.
The eleventy-plugin-add-web-component-definitions is a powerful tool designed to streamline the integration of Web Components into your HTML pages. With this plugin, developers can easily manage the definitions of custom elements, ensuring that their projects are equipped with the necessary scripts for each component. This not only saves time but also keeps your code organized and efficient.
By simply configuring a few options within your Eleventy setup, you can enhance your workflow and guarantee that all components render correctly across your website. Whether you’re working with multiple custom tags or need specific paths for your components, this plugin offers the flexibility required for modern web development.
Automatic Definition Addition: Automatically injects Web Component definitions into your HTML pages, eliminating the need for manual script tag management.
Path Configuration: Customize the output path for your component scripts using a flexible function or string format, ensuring compatibility with various deployment setups.
Custom Tag Specifiers: Override the default path for specific tags with a straightforward object input, providing precise control over script locations.
Position Flexibility: Choose the position of your script tag relative to the body element with multiple options (beforeend, afterbegin), allowing for tailored integration.
Verbose Logging Option: Enable verbose logging to debug and monitor the plugin’s actions, making it easier to resolve issues during development.
Silent Mode: Activate a quiet mode that suppresses console logs, ensuring a clean output during deployment while still retaining the functionality.
Single Script Output: Generate a single script containing all import statements when needed, streamlining the HTML structure for projects that prefer this setup.
Module Preloading: Utilize module preload links for efficient loading of components, further enhancing performance without complicating your codebase.
