Back to Details

tauri-solidjs

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Quick Usage (Already Configured)

快速使用（已配置完成）

Create new Tauri + SolidJS project

创建新的Tauri + SolidJS项目

bash
pnpm create tauri-app openwork --template solid-ts
bash
pnpm create tauri-app openwork --template solid-ts

Development

开发阶段

bash
pnpm tauri dev
bash
pnpm tauri dev

Build for production

生产环境构建

bash
pnpm tauri build
bash
pnpm tauri build

Build for mobile

移动平台构建

bash
undefined
bash
undefined

iOS

iOS

pnpm tauri ios dev pnpm tauri ios build
pnpm tauri ios dev pnpm tauri ios build

Android

Android

pnpm tauri android dev pnpm tauri android build
undefined
pnpm tauri android dev pnpm tauri android build
undefined

Project Structure

项目结构

openwork/
  packages/
    desktop/
      src-tauri/
        src/
          main.rs           # Rust entry point
          lib.rs            # Tauri commands and state
        Cargo.toml          # Rust dependencies
        tauri.conf.json     # Tauri configuration
        capabilities/       # Permission capabilities
      src/
        App.tsx             # SolidJS root component
        index.tsx           # Entry point
      components/           # UI components
      stores/               # Solid stores for state
      lib/                  # Utilities and OpenCode bridge
      index.html            # HTML template
      package.json          # Frontend dependencies
      vite.config.ts        # Vite configuration
openwork/
  packages/
    desktop/
      src-tauri/
        src/
          main.rs           # Rust 入口文件
          lib.rs            # Tauri 命令与状态管理
        Cargo.toml          # Rust 依赖配置
        tauri.conf.json     # Tauri 配置文件
        capabilities/       # 权限能力配置
      src/
        App.tsx             # SolidJS 根组件
        index.tsx           # 入口文件
      components/           # UI 组件
      stores/               # Solid 状态管理仓库
      lib/                  # 工具类与OpenCode桥接层
      index.html            # HTML 模板
      package.json          # 前端依赖配置
      vite.config.ts        # Vite 配置文件

Key Dependencies

核心依赖

Frontend (package.json)

前端依赖（package.json）

json
{
  "dependencies": {
    "solid-js": "^1.8.0",
    "@tauri-apps/api": "^2.0.0",
    "@tauri-apps/plugin-shell": "^2.0.0",
    "@tauri-apps/plugin-fs": "^2.0.0",
    "@tauri-apps/plugin-sql": "^2.0.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2.0.0",
    "vite": "^5.0.0",
    "vite-plugin-solid": "^2.8.0",
    "tailwindcss": "^3.4.0"
  }
}
json
{
  "dependencies": {
    "solid-js": "^1.8.0",
    "@tauri-apps/api": "^2.0.0",
    "@tauri-apps/plugin-shell": "^2.0.0",
    "@tauri-apps/plugin-fs": "^2.0.0",
    "@tauri-apps/plugin-sql": "^2.0.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2.0.0",
    "vite": "^5.0.0",
    "vite-plugin-solid": "^2.8.0",
    "tailwindcss": "^3.4.0"
  }
}

Backend (Cargo.toml)

后端依赖（Cargo.toml）

toml
[dependencies]
tauri = { version = "2", features = ["shell-open"] }
tauri-plugin-shell = "2"
tauri-plugin-fs = "2"
tauri-plugin-sql = { version = "2", features = ["sqlite"] }
serde = { version = "1", features = ["derive"] }
serde_json = "1"
toml
[dependencies]
tauri = { version = "2", features = ["shell-open"] }
tauri-plugin-shell = "2"
tauri-plugin-fs = "2"
tauri-plugin-sql = { version = "2", features = ["sqlite"] }
serde = { version = "1", features = ["derive"] }
serde_json = "1"

Tauri Commands (Rust -> JS)

Tauri 命令（Rust 到 JS）

rust
// packages/desktop/src-tauri/src/lib.rs
use tauri::Manager;

#[tauri::command]
async fn spawn_opencode(prompt: String) -> Result<String, String> {
    use std::process::Command;
    
    let output = Command::new("opencode")
        .args(["-p", &prompt, "-f", "json", "-q"])
        .output()
        .map_err(|e| e.to_string())?;
    
    String::from_utf8(output.stdout)
        .map_err(|e| e.to_string())
}

#[tauri::command]
fn get_opencode_db_path() -> String {
    // Return path to .opencode/opencode.db
    dirs::home_dir()
        .map(|p| p.join(".opencode/opencode.db").to_string_lossy().to_string())
        .unwrap_or_default()
}
rust
// packages/desktop/src-tauri/src/lib.rs
use tauri::Manager;

#[tauri::command]
async fn spawn_opencode(prompt: String) -> Result<String, String> {
    use std::process::Command;
    
    let output = Command::new("opencode")
        .args(["-p", &prompt, "-f", "json", "-q"])
        .output()
        .map_err(|e| e.to_string())?;
    
    String::from_utf8(output.stdout)
        .map_err(|e| e.to_string())
}

#[tauri::command]
fn get_opencode_db_path() -> String {
    // 返回 .opencode/opencode.db 的路径
    dirs::home_dir()
        .map(|p| p.join(".opencode/opencode.db").to_string_lossy().to_string())
        .unwrap_or_default()
}

Invoking Commands from SolidJS

在SolidJS中调用命令

tsx
import { invoke } from "@tauri-apps/api/core";

async function runTask(prompt: string) {
  const result = await invoke<string>("spawn_opencode", { prompt });
  return JSON.parse(result);
}
tsx
import { invoke } from "@tauri-apps/api/core";

async function runTask(prompt: string) {
  const result = await invoke<string>("spawn_opencode", { prompt });
  return JSON.parse(result);
}

Common Gotchas

常见注意事项

  • Tauri 2.x uses 
    @tauri-apps/api/core
    instead of 
    @tauri-apps/api/tauri
    .
  • Mobile builds require Xcode (iOS) or Android Studio (Android).
  • File access requires 
    tauri-plugin-fs
    and capability configuration.
  • SQLite access requires 
    tauri-plugin-sql
    .
  • Tauri 2.x 使用 
    @tauri-apps/api/core
    而非 
    @tauri-apps/api/tauri
    。
  • 移动平台构建需要 Xcode（iOS）或 Android Studio（Android）。
  • 文件访问需要 
    tauri-plugin-fs
    及权限能力配置。
  • SQLite 访问需要 
    tauri-plugin-sql
    。

First-Time Setup (If Not Configured)

首次设置（若未配置）

Install Tauri CLI

安装 Tauri CLI

bash
pnpm add -D @tauri-apps/cli
bash
pnpm add -D @tauri-apps/cli

Initialize Tauri in existing project

在现有项目中初始化 Tauri

bash
pnpm tauri init
bash
pnpm tauri init

Add mobile targets

添加移动平台目标

bash
pnpm tauri ios init
pnpm tauri android init
bash
pnpm tauri ios init
pnpm tauri android init

References

参考资料