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 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.