Created comprehensive Tauri skill for building desktop and mobile applications with Rust backend and web frontend. Skill Content: - Complete Tauri 2.0 framework coverage - Cross-platform development (Windows, macOS, Linux, iOS, Android) - IPC communication patterns (commands, events, bridges) - Security best practices (capabilities, permissions, CSP) - Native API integration (system tray, notifications, file system) - Build and distribution guidance (code signing, auto-updater) Files Created: - skill.md - Main skill with 6 slash commands - templates/ - tauri.conf.json - Config template with all options - capabilities/default.json - Basic permissions - capabilities/fs-full.json - File system access - capabilities/network.json - Network permissions - src-tauri/commands/mod.rs - Rust command templates - src-tauri/events.rs - Event emission examples - examples/ - command-invoking.txt - Frontend command patterns - event-listening.txt - Event handling patterns - plugin-usage.txt - 10+ plugin examples (fs, http, dialog, etc.) - mobile-setup.txt - iOS/Android development guide Slash Commands: - /tauri-init - Initialize new Tauri project - /tauri-add-plugin - Add Tauri plugin - /tauri-build - Build for specific platform - /tauri-capability - Create permission capability - /tauri-ipc - Design IPC interface - /tauri-native - Add native feature Integration: - Uses rust-patterns for backend code quality - Integrates with react-dev, vue, svelte for frontend - Leverages architecture skill for system design - Uses test-driven-development for testing Credits: - Proper attribution to Tauri Team and The Commons Conservancy - Links to official documentation and community resources - Credits core dependencies: WRY, TAO, Tauri CLI Planned via /brainstorm with comprehensive Ralph-validated design. Co-Authored-By: Claude <noreply@anthropic.com>
96 lines
1.9 KiB
Plaintext
96 lines
1.9 KiB
Plaintext
# Frontend Command Invocation Examples
|
|
|
|
## Basic Command Call
|
|
```typescript
|
|
import { invoke } from '@tauri-apps/api/core';
|
|
|
|
// Simple command
|
|
const greeting = await invoke('greet', { name: 'World' });
|
|
console.log(greeting); // "Hello, World! From Rust backend!"
|
|
```
|
|
|
|
## Command with Structured Payload
|
|
```typescript
|
|
interface ExamplePayload {
|
|
data: string;
|
|
count: number;
|
|
}
|
|
|
|
const result = await invoke<ExamplePayload>('process_data', {
|
|
payload: {
|
|
data: 'test',
|
|
count: 42
|
|
}
|
|
});
|
|
```
|
|
|
|
## Async Command
|
|
```typescript
|
|
const asyncResult = await invoke('async_operation', {
|
|
input: 'test input'
|
|
});
|
|
console.log(asyncResult); // Returns after 1 second
|
|
```
|
|
|
|
## Error Handling
|
|
```typescript
|
|
try {
|
|
await invoke('command_with_error', {
|
|
should_fail: false
|
|
});
|
|
} catch (error) {
|
|
console.error('Command failed:', error);
|
|
}
|
|
```
|
|
|
|
## With Progress Tracking
|
|
```typescript
|
|
import { listen } from '@tauri-apps/api/event';
|
|
|
|
// Listen for progress events
|
|
const unlisten = await listen('progress', (event) => {
|
|
const { current, total, message } = event.payload as {
|
|
current: number;
|
|
total: number;
|
|
message: string;
|
|
};
|
|
console.log(`Progress: ${current}/${total} - ${message}`);
|
|
});
|
|
|
|
// Then call a long-running command
|
|
await invoke('long_running_task');
|
|
|
|
// Cleanup when done
|
|
unlisten();
|
|
```
|
|
|
|
## Type-Safe Commands
|
|
```typescript
|
|
// Define command types
|
|
interface GreetArgs {
|
|
name: string;
|
|
}
|
|
|
|
// Use with generics
|
|
const result = await invoke<string>('greet', { name: 'Claude' } as GreetArgs);
|
|
```
|
|
|
|
## Batch Commands
|
|
```typescript
|
|
const results = await Promise.all([
|
|
invoke('greet', { name: 'Alice' }),
|
|
invoke('greet', { name: 'Bob' }),
|
|
invoke('greet', { name: 'Charlie' })
|
|
]);
|
|
```
|
|
|
|
## With Window Reference
|
|
```typescript
|
|
import { getCurrentWindow } from '@tauri-apps/api/window';
|
|
|
|
const window = getCurrentWindow();
|
|
await invoke('window_command', {
|
|
windowLabel: window.label
|
|
});
|
|
```
|