A ✨ blazingly fast ✨ frontend 'framework' to create reusable web components without touching a single line of javascript.
This is a monolithic repository that contains the source code for the following packages:
- @etcher/core - Etcher's core library
- create-etcher - The
npm create etcherpackage - etcher-vscode - VSCode support for Etcher
Etcher allows you to take advantage of custom elements, a feature natively supported in all major browsers.
Ethcer's custom web elements have
- CSS Scoping through the Shadow DOM
- Reusability
- Event handling
and much more.
Etcher comes with a VS Code extension that allows you to access syntax highlighting, code completion, and more.
npm i @etcher/core -gTo use etcher, you need to follow this directory structure:
├── src
│ ├── components
│ | └── ...component xtml files
│ ├── pages
│ | └── ...page xtml files
(You can configure these directories in the etcher.config.js file.)
To generate chisel, run:
etcher -b # build
etcher -w # watchThis will move all your pages into your public directory, and generate a _chisel.js file, which is the output of etcher.
You can configure etcher by creating a etcher.config.js file in the root directory of your project. Here's an example:
export default {
input: 'src',
output: 'dist',
plugins: [
// ...
],
};<!-- src/pages/index.xtml -->
<html>
<body>
<!-- our `label` attribute will be passed to the button file -->
<etcher-Button label="Click Me!"></etcher-Button>
</body>
</html><!-- src/components/Button.xtml -->
<button>{{label}}</button>