Installation

pnpm add @asyncflowstate/astro @asyncflowstate/core

Quick Start

Basic Astro Action Flow

import { createAstroFlow } from "@asyncflowstate/astro";

// Use within any Astro Island (React, Vue, Svelte, Solid)
const flow = createAstroFlow(async (data) => {
  return await actions.todo.create(data);
});

Comprehensive Examples

1. Zero-Config Optimistic UI

Update your Astro Island state instantly while the background Action processes.

const flow = createAstroFlow(actions.likePost, {
  optimisticResult: (prev) => ({ ...prev, liked: true }),
  rollbackOnError: true,
});

2. AI-Powered: Speculative Prefetching

Astro's static nature meets dynamic intent. Pre-warm your actions based on user hover intent.

const flow = createAstroFlow(actions.getDetails, {
  predictive: { prefetchOnHover: true },
});

return (
  <button onMouseEnter={flow.prewarm} onClick={() => flow.execute()}>
    View Details
  </button>
);

3. Edge-First Flows

Native support for Astro on the Edge (Cloudflare, Vercel). Automatic detection of Edge runtime capabilities.

const flow = createAstroFlow(apiAction, {
  edge: { cache: "force-cache" },
});

4. Cross-Island State Sync

Synchronize async state between different framework islands (e.g., React and Vue) on the same page.

const flow = createAstroFlow(actions.updateProfile, {
  crossTab: { sync: true, channel: "astro-islands-mesh" },
});

New in v3.0

• Flow DNA: Self-healing actions for Astro hybrid rendering.
• Speculative Execution: Predicted user intent for zero-latency interactions.
• Ambient Intelligence: Background monitoring for Astro island hydration.
• Collaborative Mesh: Real-time state synchronization across islands.
• Edge-First Logic: Optimized for Astro Edge middleware and adapters.
• Telemetry Dashboard: Live monitoring of Astro action performance.

License

MIT © AsyncFlowState Contributors