Eleventy Plugin Webc

screenshot of Eleventy Plugin Webc
eleventy

Eleventy Plugin Webc

Adds support for WebC *.webc files to Eleventy

Overview

The eleventy-plugin-webc is a plugin that adds support for WebC, the single file web component format, to the Eleventy static site generator. This plugin allows users to create first-class components in Eleventy, expanding HTML elements to HTML with defined conventions from web standards. WebC components are compatible with server-side rendering and are Progressive Enhancement friendly. The plugin also provides features such as incremental builds, streaming compatibility, scoped component CSS, and easy bundling of CSS and JS for page-specific bundles. It can handle complex templating needs and works well with web component hydration using is-land.

Features

  • Brings first-class components to Eleventy: Allows the creation of components in Eleventy using the WebC format.
  • Expand HTML elements: Converts HTML elements, including custom elements, to HTML using defined conventions from web standards.
  • Compatible with server-side rendering: WebC components can be rendered on the server side without duplicating author-written markup.
  • Progressive Enhancement friendly: WebC components follow the principles of Progressive Enhancement.
  • Incremental builds: Provides first-class incremental builds for page templates, components, and Eleventy layouts.
  • Streaming friendly: Supports streaming on the Edge, optimizing performance.
  • Scoped component CSS: Easily scope component CSS or use your own scoping utility.
  • Global or per-page no-import components: Provides options to use global or per-page no-import components, avoiding the need for component imports.
  • Shadow DOM friendly: Works with or without Shadow DOM.
  • Async-friendly configuration extensions/hooks: All configuration extensions/hooks into WebC are async-friendly out of the box.
  • Bundler mode: Easily rolls up the CSS and JS used by WebC components on a page into page-specific bundles.
  • Dirt-simple critical CSS/JS: Loads only the necessary code with dirt-simple critical CSS/JS.
  • Render any existing Eleventy template syntax: Supports rendering of existing Eleventy template syntax (Liquid, markdown, Nunjucks, etc.) inside WebC.
  • Works with is-land for web component hydration: Works seamlessly with is-land for web component hydration.

Installation

To install the eleventy-plugin-webc, follow the steps below:

  1. Open your project directory in a terminal or command prompt.
  2. Run the following command to install the plugin via npm:
npm install eleventy-plugin-webc
  1. Once the installation is complete, you can require the plugin in your Eleventy configuration file:
// .eleventy.js
const webcPlugin = require("eleventy-plugin-webc");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(webcPlugin);
};
  1. Save the changes and run the Eleventy build command to generate your site with WebC support.

Summary

The eleventy-plugin-webc is a powerful plugin for Eleventy that brings first-class support for WebC, the single file web component format. It allows users to create components using defined conventions from web standards, compatible with server-side rendering and Progressive Enhancement. The plugin provides various features such as incremental builds, streaming compatibility, scoped component CSS, and easy bundling of CSS and JS. It offers flexibility in using global or per-page no-import components and supports rendering of existing Eleventy template syntax inside WebC. With its compatibility with is-land for web component hydration, the eleventy-plugin-webc enhances the capabilities of Eleventy for creating dynamic and modular websites.

eleventy
Eleventy

11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.

web-components
Web Components

Web components provide a way to create reusable, encapsulated UI components using standard web technologies such as HTML, CSS, and JavaScript. They allow developers to create complex UI components that can be easily shared across multiple projects and frameworks. Web components are built using four main specifications: Custom Elements, Shadow DOM, HTML Templates, and ES Modules.