🌟 Zog.js Support for VS Code

An essential VS Code extension providing comprehensive syntax highlighting and IntelliSense for Zog.js - the minimal reactive UI framework.

This extension significantly improves the development experience by offering:

• ✨ Accurate syntax highlighting for all Zog.js directives
• 🎯 Smart IntelliSense with context-aware completions
• 📝 Rich snippets for faster development
• 🔍 Hover documentation for quick reference
• 🎨 PHP-aware highlighting that only works in HTML contexts

✨ Features

Syntax Highlighting

The extension provides intelligent syntax highlighting for:

• Interpolation: {{ expression }}
• Conditional Directives: z-if, z-else-if, z-else
• List Rendering: z-for with support for z-key / :key
• Two-way Binding: z-model
• Content Directives: z-text, z-html, z-show
• Attribute Directives: z-src, z-href, z-disabled, etc.
• Event Handlers: @click, @input, @submit, @keyup, etc.
• Dynamic Attributes: :class, :style, :href, :disabled, etc.

IntelliSense & Auto-completion

Get intelligent code completions while typing inside HTML tags:

• Type z- to see all Zog.js directives
• Type @ for event handlers
• Type : for dynamic attribute bindings
• Context-aware: Only activates inside HTML tags
• PHP-smart: In PHP files, completions only work in HTML sections, not inside <?php ... ?> blocks

Hover Documentation

Hover over any Zog.js directive to see:

• Quick description
• Usage information
• Syntax examples

Rich Snippets

Fast-track your development with comprehensive snippets:

🚀 Installation

From VS Code Marketplace

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

Manual Installation

1. Download the .vsix file
2. Open Extensions view in VS Code
3. Click ... → Install from VSIX...
4. Select the downloaded file

🎯 Usage Examples

Basic Template

<div id="app">
  <h1>{{ title }}</h1>
  
  <!-- Two-way binding -->
  <input z-model="name" placeholder="Enter your name" />
  <p z-text="greeting"></p>
  
  <!-- Conditional rendering -->
  <div z-if="isVisible">I'm visible!</div>
  <div z-else>I'm hidden!</div>
  
  <!-- List rendering with keys -->
  <ul>
    <li z-for="item in items" :key="item.id">
      {{ item.label }}
    </li>
  </ul>
  
  <!-- Event handling -->
  <button @click="increment">Count: {{ count }}</button>
  
  <!-- Dynamic attributes -->
  <div :class="{ active: isActive }" :style="{ color: textColor }">
    Styled content
  </div>
</div>

JavaScript Setup

import { createApp, ref, reactive, computed } from './zog.js';

createApp(() => {
  const title = ref('Hello Zog');
  const name = ref('');
  const count = ref(0);
  const isVisible = ref(true);
  
  const items = reactive([
    { id: 1, label: 'First' },
    { id: 2, label: 'Second' }
  ]);
  
  const greeting = computed(() => `Hi, ${name.value || 'friend'}!`);
  
  function increment() {
    count.value++;
  }
  
  return { 
    title, name, count, isVisible, 
    items, greeting, increment 
  };
}).mount('#app');

📜 Supported Directives

Structural Directives

Content Directives

Two-way Binding

Event Handlers

Dynamic Attributes

🔧 PHP File Support

The extension intelligently handles PHP files:

✅ Works in HTML sections:

<div class="container">
  <h1>{{ title }}</h1>
  <button @click="increment">Click me</button>
</div>

❌ Doesn't interfere with PHP code:

<?php
  // No Zog.js highlighting here
  $variable = "some value";
?>

🆕 What's New in v0.3.0

Major Improvements

• ✨ PHP-aware highlighting: Now correctly handles PHP files by only highlighting Zog.js directives in HTML contexts
• 🎯 Improved injection selectors: Better accuracy in determining when to apply syntax highlighting
• 📝 Expanded directives: Added support for z-key, :key, and more attribute directives
• 🔍 Hover documentation: Get instant help by hovering over directives
• 🎨 Better completion logic: Context-aware completions that only trigger inside HTML tags
• 📚 Enhanced snippets: More comprehensive snippet library including full templates

Fixed Issues

• Fixed highlighting appearing in PHP code blocks
• Improved regex patterns for better directive detection
• Better handling of edge cases in mixed HTML/PHP files

⚙️ Configuration

No configuration needed! The extension works out of the box.

For advanced users, you can customize VS Code's syntax highlighting colors in your settings.json:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "entity.other.attribute-name.directive.zog",
        "settings": {
          "foreground": "#C678DD"
        }
      },
      {
        "scope": "meta.interpolation.zog",
        "settings": {
          "foreground": "#E5C07B"
        }
      }
    ]
  }
}

🤝 Contributing

Found a bug or have a feature request?

• 🐛 Report an issue
• 💡 Submit a feature request
• 🔧 Contribute code

📄 License

MIT License - see LICENSE file for details

🔗 Links

• Zog.js Documentation
• VS Code Extension
• GitHub Repository

Enjoy using Zog.js! 🎉