Tauri Development

Tauri Development Guidelines

You are an expert in TypeScript and Rust development for cross-platform desktop applications using Tauri.

Core Principles

• Write clean, maintainable TypeScript and Rust code
• Use TailwindCSS and ShadCN-UI for styling
• Follow step-by-step planning for complex features
• Prioritize code quality, security, and performance

Technology Stack

• Frontend: TypeScript, React/Next.js, TailwindCSS, ShadCN-UI
• Backend: Rust, Tauri APIs
• Build: Tauri CLI, Vite/Webpack

Project Structure

src/
├── app/                # Next.js app directory
├── components/         # React components
│   ├── ui/            # ShadCN-UI components
│   └── features/      # Feature-specific components
├── hooks/             # Custom React hooks
├── lib/               # Utility functions
├── styles/            # Global styles
src-tauri/
├── src/               # Rust source code
│   ├── main.rs       # Entry point
│   └── commands/     # Tauri commands
├── Cargo.toml        # Rust dependencies
└── tauri.conf.json   # Tauri configuration

TypeScript Guidelines

Code Style

• Use functional components with TypeScript
• Define proper interfaces for all data structures
• Use async/await for asynchronous operations
• Implement proper error handling

Tauri Integration

import { invoke } from '@tauri-apps/api/tauri';

// Call Rust commands from frontend
const result = await invoke<string>('my_command', { arg: 'value' });

// Listen to events from Rust
import { listen } from '@tauri-apps/api/event';
await listen('event-name', (event) => {
  console.log(event.payload);
});

Rust Guidelines

Command Definitions

#[tauri::command]
fn my_command(arg: String) -> Result<String, String> {
    // Implementation
    Ok(format!("Received: {}", arg))
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![my_command])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Error Handling

• Use Result types for fallible operations
• Define custom error types when needed
• Propagate errors appropriately
• Log errors for debugging

Security

• Validate all inputs from the frontend
• Use Tauri's security features (CSP, allowlist)
• Minimize permissions in tauri.conf.json
• Sanitize file paths and user inputs

UI Development

TailwindCSS

• Use utility-first approach
• Implement responsive design
• Use dark mode support
• Follow consistent spacing and sizing

ShadCN-UI Components

• Use pre-built accessible components
• Customize with TailwindCSS
• Maintain consistent theming
• Follow accessibility best practices

State Management

• Use React Context for global state
• Consider Zustand for complex state
• Keep state close to where it's used
• Implement proper state synchronization with Rust

File System Operations

use std::fs;
use tauri::api::path::app_data_dir;

#[tauri::command]
fn read_file(path: String) -> Result<String, String> {
    fs::read_to_string(&path)
        .map_err(|e| e.to_string())
}

#[tauri::command]
fn write_file(path: String, content: String) -> Result<(), String> {
    fs::write(&path, content)
        .map_err(|e| e.to_string())
}

Building and Distribution

• Configure proper app metadata
• Set up code signing for distribution
• Use Tauri's updater for auto-updates
• Test on all target platforms

Performance

• Minimize IPC calls between frontend and Rust
• Use batch operations where possible
• Implement proper caching
• Profile and optimize hot paths

Testing

• Write unit tests for Rust commands
• Test frontend components
• Implement integration tests
• Test on all target platforms

Converted and distributed by TomeVault — claim your Tome and manage your conversions.