https://github.com/etcherjs/etcher
Create reusable web components without touching a single line of javascript.
https://github.com/etcherjs/etcher
etcher etcherjs framework javascript vscode-extension web-components
Last synced: 12 months ago
JSON representation
Create reusable web components without touching a single line of javascript.
- Host: GitHub
- URL: https://github.com/etcherjs/etcher
- Owner: etcherjs
- License: mit
- Created: 2022-09-14T10:53:42.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-05T01:05:46.000Z (about 3 years ago)
- Last Synced: 2024-04-26T12:20:41.878Z (almost 2 years ago)
- Topics: etcher, etcherjs, framework, javascript, vscode-extension, web-components
- Language: TypeScript
- Homepage: https://etcherjs.vercel.app/
- Size: 1.02 MB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[size-img]: https://img.shields.io/bundlephobia/minzip/@etcher/core?color=d34ebb&style=for-the-badge
[latest-img]: https://img.shields.io/npm/v/@etcher/core/latest?color=d34ebb&label=latest&style=for-the-badge
[next-img]: https://img.shields.io/npm/v/@etcher/core/next?color=d34ebb&label=next&style=for-the-badge
[license-img]: https://img.shields.io/npm/l/@etcher/core?color=d34ebb&style=for-the-badge
[discord-img]: https://img.shields.io/badge/Discord-d34ebb?style=for-the-badge
[site-img]: https://img.shields.io/badge/EtcherJS-d34ebb?style=for-the-badge
[![EtcherJS][site-img]](https://etcherjs.vercel.app)
[![Discord][discord-img]](https://discord.gg/Vqd3BRFR5D)
[![Size][size-img]](https://bundlephobia.com/result?p=@etcher/core)
[![Latest][latest-img]](https://www.npmjs.com/package/@etcher/core)
[![Next][next-img]](https://www.npmjs.com/package/@etcher/core)
[![License][license-img]](https://github.com/etcherjs/etcher/tree/main/packages/core/LICENSE.md)
# Etcher
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](packages/core) - Etcher's core library
- [create-etcher](packages/create-etcher) - The `npm create etcher` package
- [etcher-vscode](packages/etcher-vscode) - VSCode support for Etcher
# Why?
Etcher allows you to take advantage of custom elements, a feature [natively supported in **all** major browsers](https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements#browser_compatibility).
Ethcer's custom web elements have
- CSS Scoping through the Shadow DOM
- Reusability
- Event handling
and much more.
# VS Code Extension
Etcher comes with a VS Code extension that allows you to access syntax highlighting, code completion, and more.
[](https://github.com/etcherjs/etcher/tree/main/packages/vscode-etcher)
[](https://marketplace.visualstudio.com/items?itemName=TheCommieAxolotl.etcher-vscode)
# Installation
```bash
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 chisel, run:
```bash
etcher -b # build
etcher -w # watch
```
This will move all your pages into your `public` directory, and generate a `_chisel.js` file, which is the output of etcher.
# Configuration
You can configure etcher by creating a `etcher.config.js` file in the root directory of your project. Here's an example:
```js
export default {
input: 'src',
output: 'dist',
plugins: [
// ...
],
};
```
# Example
```html
```
```html
{{label}}
```