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 stylessrc-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 frontendconst result = await invoke<string>('my_command', { arg: 'value' });
// Listen to events from Rustimport { 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