https://github.com/ProjectEvergreen/wcc

Experimental native Web Components compiler.
https://github.com/ProjectEvergreen/wcc

greenwood ssr webcomponents

Last synced: 6 months ago
JSON representation

Experimental native Web Components compiler.

• Host: GitHub
• URL: https://github.com/ProjectEvergreen/wcc
• Owner: ProjectEvergreen
• Created: 2022-04-03T23:00:27.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2025-04-05T16:41:40.000Z (7 months ago)
• Last Synced: 2025-04-25T00:45:53.289Z (6 months ago)
• Topics: greenwood, ssr, webcomponents
• Language: JavaScript
• Homepage: https://merry-caramel-524e61.netlify.app
• Size: 792 KB
• Stars: 106
• Watchers: 7
• Forks: 10
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

• awesome-web-components - Web Components Compiler - Compiler to make server-side rendering of native web components easier. (Meta Frameworks / Svelte)

README

          


# Web Components Compiler (WCC)

[![Netlify Status](https://api.netlify.com/api/v1/badges/e718eac2-b3bc-4986-8569-49706a430beb/deploy-status)](https://app.netlify.com/sites/merry-caramel-524e61/deploys)

[![GitHub release](https://img.shields.io/github/tag/ProjectEvergreen/wcc.svg)](https://github.com/ProjectEvergreen/wcc/tags)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/ProjectEvergreen/wcc/master/LICENSE.md)

[![NodeJS compatibility](https://img.shields.io/node/v/wc-compiler.svg)](https://nodejs.org/en/about/previous-releases")

[![Discord Chat](https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord)](https://www.greenwoodjs.dev/discord/)

> _Experimental Web Components compiler.  It's Web Components all the way down!_  🐢

## How It Works

1. Write a Web Component

    ```js

    const template = document.createElement('template');

    template.innerHTML = `

      

        .footer {

          color: white;

          background-color: #192a27;

        }

      

      

        
My Blog © ${new Date().getFullYear()}

      

    `;


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

    ```

1. Run it through the compiler

    ```js

    import { renderToString } from 'wc-compiler';

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

    ```

1. Get HTML!

    ```html

    

      

        

          .footer {

            color: white;

            background-color: #192a27;

          }

        

        

          
My Blog © 2022

        

      

    

    ```


## Installation

**WCC** runs on NodeJS and can be installed from npm.

```shell

$ npm install wc-compiler --save-dev

```

## Documentation

See our [website](https://merry-caramel-524e61.netlify.app/) 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**](https://www.greenwoodjs.dev).  The Project Evergreen team also maintains similar integrations for [**Eleventy**](https://github.com/ProjectEvergreen/eleventy-plugin-wcc/) and [Astro](https://github.com/ProjectEvergreen/astro-wcc).

In addition, **WCC** hopes to provide a surface area to explore patterns around [streaming](https://github.com/ProjectEvergreen/wcc/issues/5), [serverless and edge rendering](https://github.com/thescientist13/web-components-at-the-edge), and as acting as a test bed for the [Web Components Community Groups](https://github.com/webcomponents-cg)'s discussions around community protocols, like [hydration](https://github.com/ProjectEvergreen/wcc/issues/3).