https://github.com/luwes/wesc
We are the Superlative Components!
https://github.com/luwes/wesc
custom-elements shadow-dom ssg ssr web-components
Last synced: 28 days ago
JSON representation
We are the Superlative Components!
- Host: GitHub
- URL: https://github.com/luwes/wesc
- Owner: luwes
- Created: 2023-02-25T23:37:59.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-21T07:33:08.000Z (over 1 year ago)
- Last Synced: 2024-10-30T06:29:29.386Z (12 months ago)
- Topics: custom-elements, shadow-dom, ssg, ssr, web-components
- Language: Rust
- Homepage: https://wesc-nextjs.vercel.app
- Size: 2.27 MB
- Stars: 21
- Watchers: 3
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# WeSC
We are the Superlative Components!
### Goals
- HTML first ([The Rule of Least Power](https://www.w3.org/2001/tag/doc/leastPower.html))
- Stay close to web standards
- Define and create a superlative component authoring experience
- Server language agnostic
## [WeSC Bundler](./crates/wesc/README.md)
A streaming web component bundler written in Rust using the [lol-html](https://github.com/cloudflare/lol-html) parser.
The idea is to create a single-file HTML component format and builder that builds
the HTML result super fast (streaming, low memory) and is server language agnostic.
### Features
- [x] Streaming HTML bundler
- [x] Web component definition
- [x] Default and named slots with fallback content
- [x] Declarative Shadow DOM
- [x] CSS bundling
- [ ] JS bundling
### Example
```sh
wesc ./index.html
```
### Syntax
**index.html**
```html
Title
Description
```
**components/card.html**
```html
@scope {
h3 {
color: red;
}
}
Add a slotted title
Add default slotted content
w-card {
display: block;
}
class WCard extends HTMLElement {
connectedCallback() {
console.log('w-card connected');
}
}
customElements.define('w-card', WCard);
```
## WeSC DOM - Custom element server-side rendering
Custom elements are a crucial part of reaching these goals.
The first problem WeSC is aiming to solve is rendering DSD
([declarative shadow DOM](https://developer.chrome.com/en/articles/declarative-shadow-dom/))
in a simple and approachable way for most use cases.
### Examples
Have a look at the [examples](./examples) to see if your use case is handled and
feel free to open an [issue](https://github.com/luwes/wesc/issues/new) if not.
- [Cloudflare Worker](https://wesc.luwes.workers.dev/?url=https%3A%2F%2Fmedia-chrome.mux.dev%2Fexamples%2Fvanilla%2Fadvanced.html) ([source](./examples/cloudflare-worker))
- [Eleventy](https://wesc-eleventy.netlify.app/) ([source](./examples/eleventy))
- [Astro](https://wesc-astro-luwes.vercel.app/) ([source](./examples/astro))
- [Next.js](https://wesc-nextjs.vercel.app/) ([source](./examples/nextjs))
- [Sveltekit](https://wesc-sveltekit.vercel.app/) ([source](./examples/sveltekit))
- [Remix](https://wesc-remixrun.netlify.app/) ([source](./examples/remixrun))
- [Node](https://wesc-node.netlify.app/) ([source](./examples/node))
### Simple Node usage
```bash
npm install wesc
```
#### index.js
```js
import { promises as fs } from 'fs';
import { renderToString } from 'wesc/dom/server';
// Import web component library
import 'media-chrome';
// Process full page
let html = await fs.readFile('./app.html');
let out = await renderToString(html);
await fs.writeFile('./index.html', out);
```
#### app.html
```html
```
#### HTML output
view-source:https://wesc-node.netlify.app
## Related
- [Linkedom](https://github.com/WebReflection/linkedom) - This project is powered by Linkedom.
- [Ocean](https://github.com/matthewp/ocean) - Web component server-side rendering.
- [Web Components Compiler (WCC)](https://github.com/ProjectEvergreen/wcc) - Experimental native Web Components compiler.
- [custom-elements-ssr](https://github.com/thepassle/custom-elements-ssr/) - Renders Lit custom elements on the server.
- [WebC](https://github.com/11ty/webc)