Gleeb LSP - Language Server Protocol for Fern UI Framework

Gleeb is a simple but powerful Language Server Protocol (LSP) implementation for the Fern UI framework, providing intelligent code completion, diagnostics, and hover information for C++ applications using Fern.

Features

Core LSP Features

• Code Completion: Intelligent autocomplete for Fern widgets, layouts, colors, and functions
• Diagnostics: Real-time error detection and warnings for common Fern usage patterns
• Hover Information: Detailed documentation and usage examples on hover
• Syntax Highlighting: Enhanced highlighting for Fern-specific constructs

Fern-Specific Features

• Widget Completion: Autocomplete for all Fern widgets (Text, Button, TextInput, Slider, etc.)
• Layout Helpers: Smart completion for layout widgets (Column, Row, Padding, Center, etc.)
• Color Constants: Completion for predefined color constants (Colors::White, Colors::Red, etc.)
• Function Signatures: Intelligent completion for Fern core functions
• Include Detection: Automatic detection of missing Fern includes
• Namespace Validation: Ensures proper using namespace Fern; usage

Installation

Prerequisites

• Node.js (v16 or higher)
• npm
• VS Code (for the client extension)

Building the LSP Server

# Clone or navigate to the gleeb directory
cd gleeb

# Install dependencies
npm install

# Build the TypeScript source
npm run build

# Test the server
npm start

Using with VS Code

1. Option 1: Direct LSP Connection

   • Install the "vscode-languageclient" extension
   • Configure your settings.json to connect to the gleeb server:

   {
     "gleeb.maxNumberOfProblems": 100,
     "gleeb.enableDiagnostics": true,
     "gleeb.enableCompletion": true
   }

2. Option 2: As a VS Code Extension

   • The extension.json file provides a template for creating a VS Code extension
   • Copy the extension configuration to a separate VS Code extension project
   • Package and install the extension

Using with Other Editors

Gleeb follows the standard LSP specification and can be used with any LSP-compatible editor:

• Vim/Neovim: Use with coc-nvim, vim-lsp, or nvim-lspconfig
• Emacs: Use with lsp-mode
• Sublime Text: Use with LSP package
• Others: Any editor supporting LSP can connect to gleeb

Usage Examples

Basic Fern Application with LSP Support

#include <fern/fern.hpp>  // Gleeb detects this include
#include <iostream>

using namespace Fern;     // Gleeb validates namespace usage

void setupUI() {
    // Gleeb provides completion for widgets
    auto title = Text(Point(100, 50), "Hello Fern!", 3, Colors::White);
    
    // Gleeb provides layout completion
    auto column = Column({
        title,
        SizedBox(0, 20),
        Button(ButtonConfig(0, 0, 200, 50)
            .text("Click Me!")
            .backgroundColor(Colors::Blue))
    });
    
    // Gleeb provides function completion
    addWidget(Center(column));
}

int main() {
    Fern::initialize();    // Gleeb provides hover documentation
    setupUI();
    Fern::startRenderLoop();
    return 0;
}

LSP Features in Action

• Type Fern:: → Get completion for initialize, getWidth, getHeight, etc.
• Type Colors:: → Get completion for White, Black, Red, Green, etc.
• Type Text( → Get hover documentation with function signature
• Missing include? → Get diagnostic warning with fix suggestion
• Hover over widgets → Get detailed documentation and usage examples

Configuration

Server Settings

The LSP server can be configured through your editor's LSP settings:

{
  "gleeb.maxNumberOfProblems": 100,
  "gleeb.enableDiagnostics": true,
  "gleeb.enableCompletion": true
}

Supported File Types

Gleeb automatically activates for:

• .cpp files containing Fern includes
• .c files containing Fern includes
• .fern.cpp and .fern.c files (if configured)

Architecture

gleeb/
├── src/
│   ├── server.ts         # Main LSP server implementation
│   ├── completion.ts     # Code completion provider
│   ├── diagnostics.ts    # Diagnostic analysis
│   └── hover.ts          # Hover information provider
├── dist/                 # Compiled JavaScript output
├── package.json          # Node.js dependencies
├── tsconfig.json         # TypeScript configuration
└── extension.json        # VS Code extension template

Contributing

Adding New Features

1. New Widget Support: Add to fernWidgets array in completion.ts
2. New Functions: Add to fernFunctions array in completion.ts
3. New Diagnostics: Add validation rules in diagnostics.ts
4. New Hover Info: Add documentation in hover.ts

Development Workflow

# Watch mode for development
npm run watch

# Run tests (if available)
npm test

# Build for production
npm run build

Roadmap

Phase 1: Core Features

• Basic LSP server scaffold
• Widget/layout completion
• Color constants completion
• Function signatures
• Include diagnostics
• Hover documentation

Phase 2: Advanced Features

• Go-to-definition support
• Find references
• Workspace symbol search
• Code actions (quick fixes)
• Snippet support
• Enhanced diagnostics

Phase 3: Integration 📋

• VS Code extension packaging
• Vim/Neovim plugin
• Emacs integration
• CI/CD pipeline
• Documentation website

Migration to New Repository

This LSP server is designed to be easily migrated to a separate repository:

1. Copy the entire gleeb/ folder
2. Initialize as new git repository
3. Update package.json with new repository URL
4. Add CI/CD configuration
5. Publish to npm registry

License

MIT License - see LICENSE file for details

Support

• Issues: Report bugs and feature requests
• Discussions: Ask questions and share ideas
• Contributing: See CONTRIBUTING.md for guidelines

---