@etcher/core

2.3.0 • Public • Published

EtcherJS Discord Size Latest Next License

Etcher

A blazingly fast frontend 'framework' to create reusable web components without touching a single line of javascript.

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.

GitHub Visual Studio Marketplace

Installation

npm i @etcher/core -g

Usage

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 # serve

This 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>

Package Sidebar

Install

npm i @etcher/core

Weekly Downloads

2

Version

2.3.0

License

MIT

Unpacked Size

567 kB

Total Files

41

Last publish

Collaborators

  • thecommieaxolotl