@flightdev/desktop

Desktop app support for Flight Framework via Tauri. Build Windows, macOS, and Linux apps with the same codebase.

Philosophy

Flight doesn't impose - install only the Tauri plugins you need. All plugins are optional peer dependencies. Hooks gracefully degrade on web.

Features

• Cross-platform - Windows, macOS, Linux from one codebase
• React hooks - useWindow, useFileSystem, useDialog, and more
• Vue composables - Reactive wrappers for Tauri APIs
• Tauri powered - Rust backend, tiny bundle size
• Plugin freedom - Install only what you need
• Web fallback - Graceful degradation

Installation

# Core package
npm install @flightdev/desktop

# Install Tauri CLI and plugins you need
npm install @tauri-apps/cli @tauri-apps/api
npm install @tauri-apps/plugin-dialog    # Optional
npm install @tauri-apps/plugin-fs        # Optional
npm install @tauri-apps/plugin-shell     # Optional
npm install @tauri-apps/plugin-clipboard-manager # Optional

Quick Start

React

import { usePlatform, useWindow, useFileSystem, useDialog } from '@flightdev/desktop/react';

function App() {
    const { isDesktop, isMac, isWindows } = usePlatform();
    const { minimize, maximize, close, isMaximized } = useWindow();
    const { readFile, writeFile } = useFileSystem();
    const { selectFile, saveFile } = useDialog();
    
    return (
        <div>
            {/* Custom titlebar */}
            <div data-tauri-drag-region className="titlebar">
                <button onClick={minimize}>_</button>
                <button onClick={maximize}>[max]</button>
                <button onClick={close}>×</button>
            </div>
            
            <button onClick={async () => {
                const path = await selectFile();
                if (path) {
                    const content = await readFile(path as string);
                    console.log(content);
                }
            }}>
                Open File
            </button>
        </div>
    );
}

Vue

<script setup>
import { usePlatform, useWindow, useDialog } from '@flightdev/desktop/vue';

const { isDesktop, isMac } = usePlatform();
const { minimize, maximize, close, isMaximized } = useWindow();
const { selectFile, message } = useDialog();
</script>

<template>
    <div v-if="isDesktop" class="titlebar" data-tauri-drag-region>
        <button @click="minimize">_</button>
        <button @click="maximize">[max]</button>
        <button @click="close">×</button>
    </div>
</template>

Hooks

usePlatform

Detect platform.

const { platform, isDesktop, isWindows, isMac, isLinux, isWeb } = usePlatform();

useWindow

Control window.

const { minimize, maximize, close, setTitle, isMaximized, isFullscreen } = useWindow();

useFileSystem

Read/write files.

const { readFile, writeFile, exists, mkdir, readDir } = useFileSystem();

const content = await readFile('/path/to/file.txt');
await writeFile('/path/to/file.txt', 'Hello World');

useDialog

Native dialogs.

const { selectFile, selectFolder, saveFile, message, confirm } = useDialog();

const path = await selectFile({ filters: [{ name: 'Text', extensions: ['txt'] }] });
const folder = await selectFolder();
const confirmed = await confirm('Delete this file?');

useClipboard

Copy/paste.

const { read, write } = useClipboard();

await write('Copied text');
const text = await read();

useShell

Open URLs and paths.

const { openUrl, openPath } = useShell();

await openUrl('https://example.com');
await openPath('/path/to/folder');

Configuration

// tauri.conf.json helper
import { defineDesktopConfig } from '@flightdev/desktop/config';

export default defineDesktopConfig({
    identifier: 'com.example.myapp',
    productName: 'My App',
    mainWindow: {
        title: 'My App',
        width: 1200,
        height: 800,
        decorations: false, // Custom titlebar
    },
});

Build Commands

# Initialize Tauri
npx tauri init

# Development
npx tauri dev

# Build for production
npx tauri build

License

MIT