Web Components Compiler (WCC)

Native Web Components compiler. It's Web Components all the way down! 🐢

How It Works

1. Write a Web Component

   consttemplate=document.createElement('template');template.innerHTML=` <style> .footer { color: white; background-color: #192a27; } </style> <footer class="footer"> <h4>My Blog &copy; ${newDate().getFullYear()}</h4> </footer>`;classFooterextendsHTMLElement{connectedCallback(){if(!this.shadowRoot){this.attachShadow({mode: 'open'});this.shadowRoot.appendChild(template.content.cloneNode(true));}}}exportdefaultFooter;customElements.define('wcc-footer',Footer);

2. Run it through the compiler

   import{renderToString}from'wc-compiler';const{ html }=awaitrenderToString(newURL('./path/to/component.js',import.meta.url));

3. Get HTML!

   <wcc-footer><templateshadowrootmode="open"><style>
   .footer {
   color: white;
   background-color:#192a27;
   }
   </style><footerclass="footer"><h4>My Blog &copy; 2022</h4></footer></template></wcc-footer>

Installation

WCC runs on NodeJS and can be installed from npm.

$ npm install wc-compiler --save-dev

Documentation

See our website for API docs and examples.

Motivation

WCC is not a static site generator, framework or bundler. It is designed with the intent of being able to produce raw HTML from standards compliant Web Components and easily integrated into a site generator or framework, like Greenwood. The Project Evergreen team also maintains similar integrations for Eleventy and Astro.

In addition, WCC hopes to provide a surface area to explore patterns around streaming, serverless and edge rendering, and acting as a test bed for the Web Components Community Groups's discussions around community protocols, like hydration.