Architecture

Etcher is a two-part process, first you use the CLI to compile your components into chunks and migrate pages, then etcher’s client script transforms your components into usable Web Components.

1. CLI

Etcher’s cli is part of the @etcher/core package. It can be used just to build your site, or to serve it and watch for changes.

Build

Etcher reads your component directory and serialises each component into a ‘chunk’. It then embeds it’s client script into each of your pages and creates a tiny js file for each chunk. The CLI then proceeds to migrate your pages, which are transformed into normal HTML files.

A single chunk could look something like this:

/* /@etcher/etcher-4bee4dc8.js */

window.etcher.transform(`<h1>🎉 Hello {{name}}... 🎉</h1>

<style>h1 {
  color: #4e56ce;
  font-size: 3rem;
}</style>`, 'etcher-4bee4dc8');

Serve

Under the hood, Etcher uses Vite to serve your site. This means that you can use all of Vite’s features, such as hot module reloading.

2. Client Script

The client script is a terser minified <script> tag that defines a few things for your components to work then transforms them all.

Transform

The client script defines a transform function (also accessible at Window.etcher.transform) that takes a component as a string and registers it as a Web Component.

It also deals with any XTML enhancements that may be included in your component.

function transform(componentBody: string, componentName: HTMLCustomElementName): void