🌟 Zog.js Support for VS Code

An extension providing essential tooling and syntax support for the minimal reactive framework, Zog.js.

This extension significantly improves the development experience by offering proper syntax highlighting and basic IntelliSense for Zog.js directives within HTML files.

✨ Features

This extension supports key Zog.js features inspired by modern reactive frameworks:

• Syntax Highlighting: Properly colors and highlights all Zog.js directives and interpolation tags in HTML.
  • z-if, z-for, z-model, z-text, z-html, z-show, and z-else.
  • Event handlers like @click, @input, etc.
  • Dynamic attributes using shorthand notation like :class, :style, etc.
  • Text Interpolation: {{ expression }}.
• Basic IntelliSense (Code Completion): Provides suggestions for common directives when typing inside an HTML tag.
• Snippets: Quick access to common directive structures (e.g., typing z-for suggests the full z-for="item in items" structure).

🚀 Installation

1. Through the VS Code Marketplace (Recommended)

1. Open VS Code.
2. Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X).
3. Search for Zog.js Support.
4. Click Install.

2. Manual VSIX Installation

If you compiled the extension yourself:

1. Download the .vsix file.
2. Open the Extensions view in VS Code.
3. Click the ... (More Actions) menu and select Install from VSIX...
4. Select the downloaded .vsix file.

🛠️ Usage Examples

The extension automatically activates in standard HTML files (.html).

1. Text Interpolation

Code within the interpolation brackets will be highlighted as JavaScript.

<div>Hello, {{ user.name }}! Today's count is {{ count + 1 }}.</div>

2. Directives

Directives are highlighted distinctly, and the values (which are JavaScript expressions) are colored appropriately.

<div z-if="isVisible" :class="{ 'active-class': isActive }">
    <input type="text" z-model="message" @input="updateCount($event)">
    
    <div z-for="item in items" z-text="item.name"></div>
    <div z-else>The element is hidden.</div>
</div>

📜 Supported Directives

Directive	Type	Description
z-if	Structural	Conditionally renders the element.
z-else	Structural	Renders if the preceding z-if condition is falsy.
z-for	Structural	Iterates over an array to render a list of elements.
z-model	Two-Way	Binds an input's value to a reactive reference (ref).
z-text	Content	Sets the element's textContent to an expression result.
z-html	Content	Sets the element's innerHTML to an expression result (use with caution).
z-show	Display	Toggles the element's visibility via CSS display: none.
@event	Events	Shorthand for event listeners (e.g., @click, @input).
:attr	Attributes	Shorthand for dynamic attribute binding (e.g., :href, :class).

---

🤝 Contributing

Found a bug or have a suggestion? Feel free to open an issue or submit a Pull Request on the GitHub repository.

---