SharpSync.Tool 0.3.0

⚡ SharpSync

SharpSync is a high-performance, developer-friendly .NET to TypeScript synchronization engine. It automatically transforms your C# Controllers and DTOs into fully typed, production-ready TanStack Query hooks and Zod validation schemas.

Stop manually writing frontend API clients. Focus on your C# logic, and let SharpSync handle the rest.

🚀 Key Features

• 🎯 Multi-Framework Ready: Generates fully typed hooks for React Query, Vue Query, and Svelte Query.
• 🛡️ Selective Zod Validation: Automatically translates C# Data Annotations into Zod schemas.
• 🏗️ Advanced Type Handling: Native support for Generics, Dictionaries, and Inheritance.
• 📡 SignalR Synchronization: High-fidelity, strongly-typed SignalR clients for Hubs and Client interfaces.
• 📦 Modular Architecture: Generates a clean, multi-file structure with automated dependency tracking.
• 📎 Smart FormData Support: Intelligent handling of [FromForm] attributes and file uploads.
• 🔌 Client Agnostic: Built-in scaffolds for both Axios and Fetch API.
• 🔍 RFC 7807 Error Handling: Robust, standardized error handling for consistent frontend feedback.

🛠️ Installation

1. Add the Core attributes (NuGet)

Install the core attributes package to your Web API project to enable selective features:

dotnet add package SharpSync.Core

2. Install the CLI Tool

Install the SharpSync global tool to generate your TypeScript files:

dotnet tool install --global SharpSync.Tool

📖 Quick Start

1. Annotate your C# Controller

Decorate any controller you want to sync. Use [SharpSyncForm] on methods that require Zod validation.

[ApiController]
[Route("api/[controller]")]
public class WeatherForecastController : ControllerBase
{
    [HttpPost]
    [SharpSyncForm] // Opt-in to Zod schema generation for this DTO
    public async Task<ActionResult<ForecastDto>> Create([FromBody] CreateForecastDto dto)
    {
        // Your logic...
    }
}

public class CreateForecastDto 
{
    [Required, MinLength(3)]
    public string Summary { get; set; }

    [Range(-100, 100)]
    public int TemperatureC { get; set; }
}

2. Run the Generator

Point the tool to your compiled assembly:

# Generate Vue Query hooks using Fetch
sharpsync "path/to/YourProject.dll" --output "./src/api" --framework vue --client fetch

3. Use in React/Next.js

SharpSync generates a clean directory with hooks and models:

import { useCreateMutation } from './api/hooks/WeatherForecastHooks';

export function CreateForecastForm() {
    const { mutate, isLoading } = useCreateMutation();

    const onSubmit = (data: CreateForecastDto) => {
        mutate(data);
    };

    // ...
}

📂 Generated Structure

SharpSync follows a modular approach for better bundle size and maintainability:

SharpSyncGenerated/
├── apiClient.ts           # Configurable base client
├── models/                # Interfaces & Zod schemas (1 file per DTO)
│   ├── CreateForecastDto.ts
│   └── ForecastDto.ts
└── hooks/                 # TanStack Query Hooks (1 file per Controller)
    └── WeatherForecastHooks.ts

⚙️ CLI Options

🧩 Data Annotations Support

SharpSync automatically translates the following to Zod rules:

• [Required] → .min(1)
• [StringLength(max, MinimumLength = min)] → .max(max).min(min)
• [Range(min, max)] → .min(min).max(max)
• [EmailAddress] → .email()
• [Url] → .url()
• [RegularExpression] → .regex()

🏗️ Advanced Type Mapping

SharpSync handles complex C# types with ease:

• Inheritance: public class Child : Parent becomes interface Child extends Parent.
• Generics: public class Result<T> becomes interface Result<T>.
• Dictionaries: Dictionary<string, int> becomes Record<string, number>.
• Enums: C# Enums are translated to TypeScript string Enums.

📡 SignalR Hubs

SharpSync can generate strongly-typed clients for your SignalR Hubs.

1. Define your Hub and Client Interface

public interface IChatClient {
    Task ReceiveMessage(string user, string message);
}

[SharpSyncHub]
public class ChatHub : Hub<IChatClient> {
    public async Task SendMessage(string user, string message) {
        await Clients.All.ReceiveMessage(user, message);
    }
}

2. Use the Generated Hook (React Example)

import { useChatHub } from './hubs/ChatHub';

export function ChatComponent() {
    const hub = useChatHub('/chatHub');

    useEffect(() => {
        if (!hub) return;

        // Strongly-typed listener
        const unsubscribe = hub.onReceiveMessage((user, message) => {
            console.log(`${user}: ${message}`);
        });

        return unsubscribe;
    }, [hub]);

    const handleSend = () => {
        // Strongly-typed invoker
        hub?.sendMessage('Me', 'Hello World!');
    };
}

📄 License

MIT License. Feel free to use and contribute! ",Description: