Agent SkillsfeigeCode/navop › gpui-async

gpui-async

GitHub

提供GPUI中异步操作与后台任务的处理指南,涵盖前台UI更新(cx.spawn)、后台计算(cx.background_spawn)及任务生命周期管理。包含数据获取、周期性任务等核心模式,并警示禁止从后台线程直接更新实体,确保UI线程安全。

.codex/skills/gpui-async/SKILL.md feigeCode/navop

Trigger Scenarios

GPUI异步编程 后台任务处理 UI线程更新 并发操作协调

Install

npx skills add feigeCode/navop --skill gpui-async -g -y
More Options

Non-standard path

npx skills add https://github.com/feigeCode/navop/tree/dev/.codex/skills/gpui-async -g -y

Use without installing

npx skills use feigeCode/navop@gpui-async

指定 Agent (Claude Code)

npx skills add feigeCode/navop --skill gpui-async -a claude-code -g -y

安装 repo 全部 skill

npx skills add feigeCode/navop --all -g -y

预览 repo 内 skill

npx skills add feigeCode/navop --list

SKILL.md

Frontmatter
{
    "name": "gpui-async",
    "description": "Async operations and background tasks in GPUI. Use when working with async, spawn, background tasks, or concurrent operations. Essential for handling async I\/O, long-running computations, and coordinating between foreground UI updates and background work."
}

Overview

GPUI provides integrated async runtime for foreground UI updates and background computation.

Key Concepts:

  • Foreground tasks: UI thread, can update entities (cx.spawn)
  • Background tasks: Worker threads, CPU-intensive work (cx.background_spawn)
  • All entity updates happen on foreground thread

Quick Start

Foreground Tasks (UI Updates)

impl MyComponent {
    fn fetch_data(&mut self, cx: &mut Context<Self>) {
        let entity = cx.entity().downgrade();

        cx.spawn(async move |cx| {
            // Runs on UI thread, can await and update entities
            let data = fetch_from_api().await;

            entity.update(cx, |state, cx| {
                state.data = Some(data);
                cx.notify();
            }).ok();
        }).detach();
    }
}

Background Tasks (Heavy Work)

impl MyComponent {
    fn process_file(&mut self, cx: &mut Context<Self>) {
        let entity = cx.entity().downgrade();

        cx.background_spawn(async move {
            // Runs on background thread, CPU-intensive
            let result = heavy_computation().await;
            result
        })
        .then(cx.spawn(move |result, cx| {
            // Back to foreground to update UI
            entity.update(cx, |state, cx| {
                state.result = result;
                cx.notify();
            }).ok();
        }))
        .detach();
    }
}

Task Management

struct MyView {
    _task: Task<()>,  // Prefix with _ if stored but not accessed
}

impl MyView {
    fn new(cx: &mut Context<Self>) -> Self {
        let entity = cx.entity().downgrade();

        let _task = cx.spawn(async move |cx| {
            // Task automatically cancelled when dropped
            loop {
                tokio::time::sleep(Duration::from_secs(1)).await;
                entity.update(cx, |state, cx| {
                    state.tick();
                    cx.notify();
                }).ok();
            }
        });

        Self { _task }
    }
}

Core Patterns

1. Async Data Fetching

cx.spawn(async move |cx| {
    let data = fetch_data().await?;
    entity.update(cx, |state, cx| {
        state.data = Some(data);
        cx.notify();
    })?;
    Ok::<_, anyhow::Error>(())
}).detach();

2. Background Computation + UI Update

cx.background_spawn(async move {
    heavy_work()
})
.then(cx.spawn(move |result, cx| {
    entity.update(cx, |state, cx| {
        state.result = result;
        cx.notify();
    }).ok();
}))
.detach();

3. Periodic Tasks

cx.spawn(async move |cx| {
    loop {
        tokio::time::sleep(Duration::from_secs(5)).await;
        // Update every 5 seconds
    }
}).detach();

4. Task Cancellation

Tasks are automatically cancelled when dropped. Store in struct to keep alive.

Common Pitfalls

❌ Don't: Update entities from background tasks

// ❌ Wrong: Can't update entities from background thread
cx.background_spawn(async move {
    entity.update(cx, |state, cx| { // Compile error!
        state.data = data;
    });
});

✅ Do: Use foreground task or chain

// ✅ Correct: Chain with foreground task
cx.background_spawn(async move { data })
    .then(cx.spawn(move |data, cx| {
        entity.update(cx, |state, cx| {
            state.data = data;
            cx.notify();
        }).ok();
    }))
    .detach();

Reference Documentation

Complete Guides

  • API Reference: See api-reference.md

    • Task types, spawning methods, contexts
    • Executors, cancellation, error handling
  • Patterns: See patterns.md

    • Data fetching, background processing
    • Polling, debouncing, parallel tasks
    • Pattern selection guide
  • Best Practices: See best-practices.md

    • Error handling, cancellation
    • Performance optimization, testing
    • Common pitfalls and solutions

Version History

  • e768f09 Current 2026-07-19 08:48

Same Skill Collection

.codex/skills/gpui-action/SKILL.md
.codex/skills/gpui-context/SKILL.md
.codex/skills/gpui-element/SKILL.md
.codex/skills/gpui-entity/SKILL.md
.codex/skills/gpui-event/SKILL.md
.codex/skills/gpui-focus-handle/SKILL.md
.codex/skills/gpui-global/SKILL.md
.codex/skills/gpui-layout-and-style/SKILL.md
.codex/skills/gpui-style-guide/SKILL.md
.codex/skills/gpui-test/SKILL.md
.codex/skills/navop-release-notes/SKILL.md
.codex/skills/new-component/SKILL.md

Metadata

Files
0
Version
ba0720c
Hash
603e0892
Indexed
2026-07-19 08:48

Accueil - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-07-22 01:03
浙ICP备14020137号-1 $Carte des visiteurs$