Etcher
A
Why?
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
- Event handling
- Reusability
- Reactivity
and much more.
VS Code Extension
Etcher comes with a VS Code extension that allows you to access syntax highlighting, code completion, and more.
Installation
npm i @etcher/core -gUsage
To 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 your pages, run:
etcher -b # build
etcher -w # watch
etcher <> -s # serveThis will move all your pages into your public directory and add the necessary scripts to them.
Configuration
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: [
// ...
],
};Example
<!-- 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>{{props.label}}</button>