wc-compiler 0.2.2 → 0.4.0

package/README.md

@@ -1,44 +1,17 @@
-# wcc
-
 <img src="https://merry-caramel-524e61.netlify.app/assets/wcc-logo.png" width="30%"/>
 
-> _Experimental Web Components compiler.  It's Web Components all the way down!_  🐢
-
-## Overview
-
-**Web Components Compiler (WCC)** is a NodeJS package designed to make server-side rendering (SSR) of native Web Components easier.  It can render (within reason 😅) your Web Component into static HTML leveraging [Declarative Shadow DOM](https://web.dev/declarative-shadow-dom/).
-
-It is not a static site generator or framework.  It is focused on producing raw HTML from Web Components with the intent of being easily _integrated_ into a site generator or framework.
-
-> _The original motivation for this project was to create a [purpose built, lighter weight alternative to puppeteer for SSR of native `HTMLElement` based Web Components](https://github.com/ProjectEvergreen/greenwood/issues/935) for the project [**Greenwood**](https://www.greenwoodjs.io/)._
-
-In addition, WCC hopes to provide a surface area to explore patterns around [streaming](https://github.com/ProjectEvergreen/wcc/issues/5) and serverless rendering, as well as acting as a test bed for the [Web Components Community Groups](https://github.com/webcomponents-cg) discussions around community protocols, like [hydration](https://github.com/ProjectEvergreen/wcc/issues/3).
-
-## Key Features
+# Web Components Compiler (WCC)
 
-1. Supports the following `HTMLElement` lifecycles and methods on the server side
-    - `constructor`
-    - `connectedCallback`
-    - `attachShadow`
-    - `innerHTML`
-    - `[get|set|has]Attribute`
-1. Recursive rendering of nested custom elements
-1. Optional Declarative Shadow DOM (for producing purely content driven static pages)
-1. Metadata and runtime hints to support progressive hydration and lazy loading strategies
+[![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)
 
-## Installation
-
-**wcc** can be installed from npm.
-
-```shell
-$ npm install wc-compiler --save-dev
-```
-
-## Usage
+> _Experimental Web Components compiler.  It's Web Components all the way down!_  🐢
 
-WCC exposes a few utilities to render your Web Components.  Below is one example, with [full docs and more examples](https://merry-caramel-524e61.netlify.app/) available on the website.
+## How It Works
 
-1. Given a custom element like so:
+1. Write a Web Component
     ```js
     const template = document.createElement('template');
 
@@ -68,17 +41,13 @@ WCC exposes a few utilities to render your Web Components.  Below is one example
 
     customElements.define('wcc-footer', Footer);
     ```
-
-1. Using NodeJS, create a file that imports `renderToString` and provide it the path to your web component
+1. Run it through the compiler
     ```js
     import { renderToString } from 'wc-compiler';
 
-    const { html } = await renderToString(new URL('./path/to/footer.js', import.meta.url));
-
-    console.debug({ html })
+    const { html } = await renderToString(new URL('./path/to/component.js', import.meta.url));
     ```
-
-1. You will get the following HTML output that can be used in conjunction with your preferred site framework or templating solution.
+1. Get HTML!
     ```html
     <wcc-footer>
       <template shadowroot="open">
@@ -96,5 +65,27 @@ WCC exposes a few utilities to render your Web Components.  Below is one example
     </wcc-footer>
     ```
 
+## 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.js_.  Example:
+```js
+const { renderToString } = require('wc-compiler/dist/wcc.dist');
+```
+
+## 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/), the original motivation for creating [this project](https://github.com/ProjectEvergreen/greenwood/issues/935).
 
-> _**Make sure to test in Chrome, or other Declarative Shadow DOM compatible browser, otherwise you will need to include the [DSD polyfill](https://web.dev/declarative-shadow-dom/#polyfill).**_
+In addition, **WCC** hopes to provide a surface area to explore patterns around [streaming](https://github.com/ProjectEvergreen/wcc/issues/5) and serverless rendering, as well as acting as a test bed for the [Web Components Community Groups](https://github.com/webcomponents-cg) discussions around community protocols, like [hydration](https://github.com/ProjectEvergreen/wcc/issues/3).