Experimental Web Components compiler. It's Web Components all the way down! 🐢
- 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 © ${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 © 2022</h4> </footer> </template> </wcc-footer>
WCC runs on NodeJS and can be installed from npm.
$ npm install wc-compiler --save-devSee our website for API docs and examples.
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.