wc-compiler

Web Components Compiler (WCC)

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

How It Works

1. Write a Web Component

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

2. Run it through the compiler

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

3. Get HTML!

   <wcc-footer>
     <template shadowroot="open">
       <style>
         .footer {
           color: white;
           background-color: #192a27;
         }
       </style>
   
       <footer class="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

CommonJS

If you need CommonJS support, a separate pre-bundled (with Rollup) distribution of WCC is available at dist/wcc.dist.cjs. Example:

const { renderToString } = require('wc-compiler/dist/wcc.dist.cjs');

Documentation

See our website for API docs and examples.

Motivation

WCC is not a static site generator, framework or bundler. It is focused on producing raw HTML from Web Components with the intent of being easily integrated into a site generator or framework, like Greenwood or Eleventy, the original motivation for creating this project.

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