edge-tags v0.0.3

edge-tags

Seamlessly transpile HTML-like tag syntax <x-badge color="primary" /> into native Edge.js components.

Installation & Setup

Install the package using your preferred package manager:

pnpm install edge-tags
# or
npm install edge-tags
# or
yarn add edge-tags

Register the plugin with your Edge.js instance:

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

Example Transformation

When you write HTML-style custom elements:

<x-button class="bg-white" a="b" :foo="bar" baz="{{ 1 + 2 }}">
  Hello
</x-button>

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

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

Intelligent Component Resolution

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

• 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 💛