wc-compiler

Web Components Compiler (WCC)

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

How It Works

• 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);
  

• Run it through the compiler

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

• Get HTML!

  <wcc-footer>
    <template shadowrootmode="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

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 as acting as a test bed for the Web Components Community Groups's discussions around community protocols, like hydration.