Skip to content

ProjectEvergreen/wcc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

22078ee · Nov 21, 2024
Jan 6, 2024
Nov 7, 2024
Nov 7, 2024
Nov 21, 2024
Nov 21, 2024
Aug 13, 2022
Apr 3, 2022
Apr 12, 2024
Apr 3, 2022
Jan 5, 2024
Apr 1, 2023
Mar 9, 2024
Apr 12, 2024
Jan 5, 2024
Nov 7, 2024
Jun 10, 2022
Jan 5, 2024
Nov 21, 2024
Nov 21, 2024
Mar 9, 2024
Jun 22, 2024
Jun 22, 2024

Repository files navigation

Web Components Compiler (WCC)

Netlify Status GitHub release GitHub Actions status GitHub license

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

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