sync-construction-async-property-ui-render-gate-pattern

Export synchronously constructed clients with attached async initialization via whenSynced.

4.7k|374|Updated Mar 16, 2023
One-click install
npx skills add https://github.com/EpicenterHQ/epicenter --skill sync-construction-async-property-ui-render-gate-pattern
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sync-construction-async-property-ui-render-gate-pattern
Source: https://github.com/EpicenterHQ/epicenter/tree/main/.agents/skills/sync-construction-async-property-ui-render-gate-pattern
Command: npx skills add https://github.com/EpicenterHQ/epicenter --skill sync-construction-async-property-ui-render-gate-pattern

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Export a client that initializes asynchronously by attaching the async work to the instance, enabling synchronous access to the API while background tasks run.

Core Features & Use Cases

  • Synchronous export with attached async work: The instance is exported immediately and exposes sync methods, with asynchronous initialization tracked on a property.
  • UI render gate: Consumers can await a ready promise (whenSynced) at the root to ensure readiness before rendering children.
  • Composable initialization: Use a withCapabilities builder to attach specific async tasks (e.g., persistence, data loading) without blocking construction.

Quick Start

Create your client instance and await its whenSynced in the root UI gate to render children.

Frequently Asked Questions about sync-construction-async-property-ui-render-gate-pattern

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I export a module with an async client instance without blocking synchronous access?

To export a client with async init, construct the instance synchronously and attach the async work to it via a whenSynced property, allowing consumers to import and call methods immediately while initialization runs in the background.

What is the best way to attach asynchronous initialization tasks to a synchronously constructed client?

Use a withCapabilities builder to attach specific async tasks like data loading or persistence to the instance, composing initialization dynamically without blocking the synchronous construction path or immediate module export.

Does this sync construction pattern work with UI frameworks that require immediate module exports?

Yes, the sync construction async init pattern suits UI frameworks and module systems where consumers require immediate synchronous access to the exported client while asynchronous initialization tasks run in the background.

Why does my exported client return undefined when called before asynchronous initialization completes?

Calling methods before async init completes causes undefined returns because background tasks are still running; await the instance's whenSynced property to guarantee the client is fully ready before invoking its methods.

When should I avoid using a synchronous export with attached async work?

Avoid sync construction with attached async work if your module consumers cannot handle a readiness promise or if your client lacks a synchronous construction path and requires full blocking initialization before export.