Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ProjectEvergreen/wcc
Experimental native Web Components compiler.
https://github.com/ProjectEvergreen/wcc
greenwood ssr webcomponents
Last synced: 3 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 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-13T18:43:46.000Z (7 months ago)
- Last Synced: 2024-04-14T10:59:10.709Z (7 months ago)
- Topics: greenwood, ssr, webcomponents
- Language: JavaScript
- Homepage: https://merry-caramel-524e61.netlify.app
- Size: 660 KB
- Stars: 70
- Watchers: 6
- Forks: 5
- Open Issues: 31
-
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 Actions status](https://github.com/ProjectEvergreen/wcc/workflows/Master%20Integration/badge.svg)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/ProjectEvergreen/wcc/master/LICENSE.md)> _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
```### CommonJS
If you need CommonJS support, a separate pre-bundled (with Rollup) distribution of **WCC** is available at _dist/wcc.dist.cjs_. Example:
```js
const { renderToString } = require('wc-compiler/dist/wcc.dist.cjs');
```## 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 focused on producing raw HTML from Web Components with the intent of being easily integrated into a site generator or framework, like [**Greenwood**](https://github.com/ProjectEvergreen/greenwood/) or [**Eleventy**](https://github.com/ProjectEvergreen/eleventy-plugin-wcc/), the original motivation for creating [this project](https://github.com/ProjectEvergreen/greenwood/issues/935).
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).