edge-tags


Seamlessly transpile HTML-like tag syntax into native Edge.js components.

Installation & Setup

Install the package using your preferred package manager:

``sh
pnpm install edge-tags


or

npm install edge-tags

or

yarn add edge-tags
`

Register the plugin with your Edge.js instance:

`js
import { Edge } from "edge.js";
import { edgeTags } from "edge-tags";

const edge = Edge.create();

/**
* Register the edge-tags plugin
*/
edge.use(edgeTags);
`

How It Works

$3

When you write HTML-style custom elements:

`edge

Hello




Hello



World



Footer Content




`

Edge-tags automatically converts it to Edge.js component syntax:

`edge
@component('button', { class: 'bg-white', a: 'b', foo: bar, baz: ${1 + 2} })
Hello
@end

@component('card')
@component('card/title')
Hello
@end

@component('card/body')
World
@end

@slot('footer')
Footer Content
@end
@end

@component('diskName::avatar')
@end
`

$3

Edge-tags smartly resolves your component paths based on file structure:

- button.edge → References as "button"
- components/button.edge → References as "components/button"
- components/button/index.edge → References as "components/button/index"

This automatic resolution eliminates path management headaches and ensures your components are always correctly referenced.

Development

Local Development Guide

- Clone this repository
- Install latest LTS version of Node.js
- Enable Corepack using corepack enable
- Install dependencies using pnpm install
- Run interactive tests using pnpm dev`

License

Published under the MIT license.
Made by community 💛