wesc
| Crates.io | wesc |
| lib.rs | wesc |
| version | 0.2.1 |
| source | src |
| created_at | 2024-03-17 13:37:22.954827 |
| updated_at | 2024-03-23 16:37:31.944371 |
| description | We are the Superlative Components! |
| homepage | |
| repository | https://github.com/luwes/wesc |
| max_upload_size | |
| id | 1176500 |
| size | 61,919 |
Wesley Luyten (luwes)
documentation
README
WeSC
We are the Superlative Components!
A streaming web component bundler written in Rust using the 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.
TODO: The JS (and CSS) in the top level script and style tag are bundled up separately and can be output as JS and CSS files.
Features
-
Streaming HTML bundler
-
Web component definition
-
Default and named slots with fallback content
-
Declarative Shadow DOM
-
CSS bundling
-
JS bundling
Example
wesc ./index.html
Syntax
index.html
<!doctype html>
<html>
<head>
<link rel="definition" name="w-card" href="./components/card.html">
</head>
<body>
<w-card>
<h3 slot="title">Title</h3>
Description
</w-card>
</body>
</html>
components/card.html
<template>
<!-- or <template shadowrootmode="open"> -->
<style>
@scope {
h3 {
color: red;
}
}
</style>
<div>
<h3><slot name="title">Add a slotted title</slot></h3>
<p><slot>Add default slotted content</slot></p>
</div>
</template>
<!-- TODO: bundle to a global styles.css -->
<style>
w-card {
display: block;
}
</style>
<!-- TODO: bundle to a global scripts.js -->
<script>
class WCard extends HTMLElement {
connectedCallback() {
console.log('w-card connected');
}
}
customElements.define('w-card', WCard);
</script>