feat: support new unstable api in debugger

Author: michalkvasnicak

.changeset/twenty-pugs-roll.md

@@ -0,0 +1,7 @@
+---
+"frames.js": patch
+"@frames.js/debugger": patch
+"@frames.js/render": patch
+---
+
+feat: multi specification support

packages/debugger/app/components/action-debugger.tsx

@@ -7,8 +7,6 @@ import {
 } from "@/components/ui/hover-card";
 import { cn } from "@/lib/utils";
 import {
-  type FarcasterFrameContext,
-  type FrameActionBodyPayload,
   OnComposeFormActionFuncReturnType,
   defaultTheme,
 } from "@frames.js/render";
@@ -33,7 +31,6 @@ import { Button } from "../../@/components/ui/button";
 import { FrameDebugger } from "./frame-debugger";
 import IconByName from "./octicons";
 import { MockHubActionContext } from "../utils/mock-hub-utils";
-import { useFrame } from "@frames.js/render/use-frame";
 import { WithTooltip } from "./with-tooltip";
 import { useToast } from "@/components/ui/use-toast";
 import type { CastActionDefinitionResponse } from "../frames/route";
@@ -42,7 +39,7 @@ import { AwaitableController } from "../lib/awaitable-controller";
 import type { ComposerActionFormResponse } from "frames.js/types";
 import { CastComposer, CastComposerRef } from "./cast-composer";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import type { FarcasterSigner } from "@frames.js/render/identity/farcaster";
+import { useFrame } from "@frames.js/render/unstable-use-frame";
 
 type FrameDebuggerFramePropertiesTableRowsProps = {
   actionMetadataItem: CastActionDefinitionResponse;
@@ -177,13 +174,7 @@ function ShortenedText({
 
 type ActionDebuggerProps = {
   actionMetadataItem: CastActionDefinitionResponse;
-  farcasterFrameConfig: Parameters<
-    typeof useFrame<
-      FarcasterSigner | null,
-      FrameActionBodyPayload,
-      FarcasterFrameContext
-    >
-  >[0];
+  farcasterFrameConfig: Parameters<typeof useFrame>[0];
   refreshUrl: (arg0?: string) => void;
   mockHubContext?: Partial<MockHubActionContext>;
   setMockHubContext?: Dispatch<SetStateAction<Partial<MockHubActionContext>>>;

packages/debugger/app/components/cast-composer.tsx

@@ -11,7 +11,6 @@ import {
   ExternalLinkIcon,
 } from "lucide-react";
 import IconByName from "./octicons";
-import { useFrame } from "@frames.js/render/use-frame";
 import { WithTooltip } from "./with-tooltip";
 import type {
   FarcasterFrameContext,
@@ -23,17 +22,12 @@ import { useToast } from "@/components/ui/use-toast";
 import { ToastAction } from "@radix-ui/react-toast";
 import Link from "next/link";
 import type { FarcasterSigner } from "@frames.js/render/identity/farcaster";
+import { useFrame } from "@frames.js/render/unstable-use-frame";
 
 type CastComposerProps = {
   composerAction: Partial<ComposerActionResponse>;
   onComposerActionClick: (state: ComposerActionState) => any;
-  farcasterFrameConfig: Parameters<
-    typeof useFrame<
-      FarcasterSigner | null,
-      FrameActionBodyPayload,
-      FarcasterFrameContext
-    >
-  >[0];
+  farcasterFrameConfig: Parameters<typeof useFrame>[0];
 };
 
 export type CastComposerRef = {
@@ -119,13 +113,7 @@ export const CastComposer = React.forwardRef<
 CastComposer.displayName = "CastComposer";
 
 type CastEmbedPreviewProps = {
-  farcasterFrameConfig: Parameters<
-    typeof useFrame<
-      FarcasterSigner | null,
-      FrameActionBodyPayload,
-      FarcasterFrameContext
-    >
-  >[0];
+  farcasterFrameConfig: Parameters<typeof useFrame>[0];
   url: string;
   onRemove: () => void;
 };

packages/debugger/app/components/frame-debugger.tsx

@@ -63,6 +63,7 @@ import type { AnonymousSigner } from "@frames.js/render/identity/anonymous";
 import type { LensSigner } from "@frames.js/render/identity/lens";
 import type { FarcasterSigner } from "@frames.js/render/identity/farcaster";
 import type { XmtpSigner } from "@frames.js/render/identity/xmtp";
+import type { UseFrameReturnValue } from "@frames.js/render/unstable-use-frame";
 
 type FrameDiagnosticsProps = {
   stackItem: FramesStackItem;
@@ -160,8 +161,8 @@ function FrameDiagnostics({ stackItem }: FrameDiagnosticsProps) {
             {stackItem.speed > 5
               ? `Request took more than 5s (${stackItem.speed} seconds). This may be normal: first request will take longer in development (as next.js builds), but in production, clients will timeout requests after 5s`
               : stackItem.speed > 4
-              ? `Warning: Request took more than 4s (${stackItem.speed} seconds). Requests will fail at 5s. This may be normal: first request will take longer in development (as next.js builds), but in production, if there's variance here, requests could fail in production if over 5s`
-              : `${stackItem.speed} seconds`}
+                ? `Warning: Request took more than 4s (${stackItem.speed} seconds). Requests will fail at 5s. This may be normal: first request will take longer in development (as next.js builds), but in production, if there's variance here, requests could fail in production if over 5s`
+                : `${stackItem.speed} seconds`}
           </TableCell>
         </TableRow>
         {properties.validProperties.map(([propertyKey, value]) => {
@@ -282,9 +283,7 @@ const FramesRequestCardContentIcon: React.FC<{
 
 const FramesRequestCardContent: React.FC<{
   stack: FramesStack;
-  fetchFrame: FrameState<
-    FarcasterSigner | XmtpSigner | LensSigner | AnonymousSigner | null
-  >["fetchFrame"];
+  fetchFrame: UseFrameReturnValue["fetchFrame"];
 }> = ({ fetchFrame, stack }) => {
   return stack.map((frameStackItem, i) => {
     return (
@@ -369,10 +368,10 @@ type FrameDebuggerSharedProps = {
 type FrameDebuggerProps = FrameDebuggerSharedProps &
   (
     | {
-        useFrameHook: () => FrameState<any, any>;
+        useFrameHook: () => UseFrameReturnValue;
       }
     | {
-        frameState: FrameState<any, any>;
+        frameState: UseFrameReturnValue;
       }
   );