Installation

pnpm add @asyncflowstate/remix @asyncflowstate/react @asyncflowstate/core

Quick Start

Basic Action Flow

import { useActionFlow } from "@asyncflowstate/remix";

export function CreatePost() {
  const flow = useActionFlow({
    onSuccess: () => toast.success("Post created!"),
  });

  return (
    <form method="post" onSubmit={flow.form().onSubmit}>
      <input name="title" />
      <button type="submit" disabled={flow.isSubmitting}>
        {flow.isSubmitting ? "Creating..." : "Create Post"}
      </button>
    </form>
  );
}

Comprehensive Examples

1. Optimistic UI with Deep-Diff Rollback

Instantly update your UI and let AsyncFlowState handle the rollback if the Remix Action fails.

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

2. AI-Powered: Speculative Navigation

Predict which action the user will take and pre-warm the server-side state.

const flow = useActionFlow({
  predictive: { prefetchOnHover: true },
});

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

3. Multi-Step Sequences

Orchestrate complex sequences involving multiple Remix Actions or external APIs.

const sequence = useFlowSequence([
  { name: "Step 1", flow: action1 },
  { name: "Step 2", flow: action2 },
]);

New in v3.0

• Flow DNA: Self-healing actions that adapt to user behavior patterns.
• Speculative Execution: Low-latency interactions via intent prediction.
• Ambient Intelligence: Background monitoring of Remix navigation lifecycle.
• Collaborative Mesh: Sync action states across multiple browser tabs.
• Edge-First Fetching: Optimized for Remix on Cloudflare Workers and Vercel Edge.
• Telemetry Dashboard: Live monitoring of action health and latency.

License

MIT © AsyncFlowState Contributors