chore: make use frame backward compatible

Author: michalkvasnicak

packages/render/src/helpers.ts

@@ -1,4 +1,7 @@
-import type { ParseFramesWithReportsResult } from "frames.js/frame-parsers";
+import type {
+  ParseFramesWithReportsResult,
+  ParseResult,
+} from "frames.js/frame-parsers";
 
 export async function tryCallAsync<TResult>(
   promiseFn: () => Promise<TResult>
@@ -38,3 +41,13 @@ export function isParseFramesWithReportsResult(
     "farcaster" in value
   );
 }
+
+export function isParseResult(value: unknown): value is ParseResult {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "status" in value &&
+    !("openframes" in value) &&
+    !("farcaster" in value)
+  );
+}

packages/render/src/next/GET.tsx

@@ -1,8 +1,13 @@
 import type { NextRequest } from "next/server";
 import { parseFramesWithReports } from "frames.js/parseFramesWithReports";
 import type { ParseFramesWithReportsResult } from "frames.js/frame-parsers";
+import { getFrame, type GetFrameResult } from "frames.js";
+import { isSpecificationValid } from "./validators";
 
-export type GETResponse = ParseFramesWithReportsResult | { message: string };
+export type GETResponse =
+  | ParseFramesWithReportsResult
+  | GetFrameResult
+  | { message: string };
 
 /** Proxies fetching a frame through a backend to avoid CORS issues and preserve user IP privacy */
 export async function GET(request: Request | NextRequest): Promise<Response> {
@@ -12,6 +17,9 @@ export async function GET(request: Request | NextRequest): Promise<Response> {
         ? request.nextUrl.searchParams
         : new URL(request.url).searchParams;
     const url = searchParams.get("url");
+    const specification = searchParams.get("specification") ?? "farcaster";
+    const multiSpecificationEnabled =
+      searchParams.get("multispecification") === "true";
 
     if (!url) {
       return Response.json({ message: "Invalid URL" } satisfies GETResponse, {
@@ -21,9 +29,29 @@ export async function GET(request: Request | NextRequest): Promise<Response> {
 
     const urlRes = await fetch(url);
     const html = await urlRes.text();
-    const result: ParseFramesWithReportsResult = parseFramesWithReports({
-      html,
-      fallbackPostUrl: url,
+
+    if (multiSpecificationEnabled) {
+      const result: ParseFramesWithReportsResult = parseFramesWithReports({
+        html,
+        fallbackPostUrl: url,
+      });
+
+      return Response.json(result satisfies GETResponse);
+    }
+
+    if (!isSpecificationValid(specification)) {
+      return Response.json(
+        { message: "Invalid specification" } satisfies GETResponse,
+        {
+          status: 400,
+        }
+      );
+    }
+
+    const result = getFrame({
+      htmlString: html,
+      url,
+      specification,
     });
 
     return Response.json(result satisfies GETResponse);

packages/render/src/next/POST.tsx

@@ -1,9 +1,14 @@
-import type { FrameActionPayload } from "frames.js";
-import type { ParseFramesWithReportsResult } from "frames.js/frame-parsers";
+import {
+  getFrame,
+  type FrameActionPayload,
+  type GetFrameResult,
+} from "frames.js";
+import { type ParseFramesWithReportsResult } from "frames.js/frame-parsers";
 import { parseFramesWithReports } from "frames.js/parseFramesWithReports";
 import type { JsonObject, JsonValue } from "frames.js/types";
 import type { NextRequest } from "next/server";
 import { tryCallAsync } from "../helpers";
+import { isSpecificationValid } from "./validators";
 
 export type POSTResponseError = { message: string };
 
@@ -12,6 +17,7 @@ export type POSTResponseRedirect = { location: string };
 export type POSTTransactionResponse = JsonObject;
 
 export type POSTResponse =
+  | GetFrameResult
   | ParseFramesWithReportsResult
   | POSTResponseError
   | POSTResponseRedirect
@@ -37,6 +43,9 @@ export async function POST(req: Request | NextRequest): Promise<Response> {
     const isPostRedirect = searchParams.get("postType") === "post_redirect";
     const isTransactionRequest = searchParams.get("postType") === "tx";
     const postUrl = searchParams.get("postUrl");
+    const multiSpecificationEnabled =
+      searchParams.get("multispecification") === "true";
+    const specification = searchParams.get("specification") ?? "farcaster";
 
     if (!postUrl) {
       return Response.json(
@@ -170,9 +179,31 @@ export async function POST(req: Request | NextRequest): Promise<Response> {
     }
 
     const html = await response.text();
-    const result: ParseFramesWithReportsResult = parseFramesWithReports({
-      html,
-      fallbackPostUrl: body.untrustedData.url,
+
+    if (multiSpecificationEnabled) {
+      const result = parseFramesWithReports({
+        html,
+        fallbackPostUrl: body.untrustedData.url,
+        fromRequestMethod: "POST",
+      });
+
+      return Response.json(result satisfies ParseFramesWithReportsResult);
+    }
+
+    if (!isSpecificationValid(specification)) {
+      return Response.json(
+        {
+          message: "Invalid specification",
+        } satisfies POSTResponseError,
+        { status: 400 }
+      );
+    }
+
+    const result = getFrame({
+      htmlString: html,
+      url: body.untrustedData.url,
+      fromRequestMethod: "POST",
+      specification,
     });
 
     return Response.json(result satisfies POSTResponse);

packages/render/src/next/validators.ts

@@ -0,0 +1,10 @@
+import type { SupportedParsingSpecification } from "frames.js";
+
+export function isSpecificationValid(
+  specification: unknown
+): specification is SupportedParsingSpecification {
+  return (
+    typeof specification === "string" &&
+    ["farcaster", "openframes"].includes(specification)
+  );
+}

packages/render/src/use-fetch-frame.ts

@@ -39,6 +39,7 @@ import {
 } from "./errors";
 import {
   isParseFramesWithReportsResult,
+  isParseResult,
   tryCall,
   tryCallAsync,
 } from "./helpers";
@@ -241,30 +242,41 @@ export function useFetchFrame<
         return;
       }
 
-      if (!isParseFramesWithReportsResult(parseResult)) {
-        const error = new Error("The server returned an unexpected response.");
-
-        stackAPI.markAsFailed({
-          endTime,
+      if (isParseFramesWithReportsResult(parseResult)) {
+        stackAPI.markAsDone({
           pendingItem: frameStackPendingItem,
-          requestError: error,
+          endTime,
+          frameResult: parseResult[specification],
           response,
-          responseBody: parseResult,
-          responseStatus: 500,
         });
 
-        tryCall(() => {
-          onError(error);
+        return;
+      }
+
+      if (isParseResult(parseResult)) {
+        stackAPI.markAsDone({
+          pendingItem: frameStackPendingItem,
+          endTime,
+          frameResult: parseResult,
+          response,
         });
 
         return;
       }
 
-      stackAPI.markAsDone({
-        pendingItem: frameStackPendingItem,
+      const error = new Error("The server returned an unexpected response.");
+
+      stackAPI.markAsFailed({
         endTime,
-        frameResult: parseResult[specification],
+        pendingItem: frameStackPendingItem,
+        requestError: error,
         response,
+        responseBody: parseResult,
+        responseStatus: 500,
+      });
+
+      tryCall(() => {
+        onError(error);
       });
 
       return;
@@ -480,33 +492,46 @@ export function useFetchFrame<
         return;
       }
 
-      if (!isParseFramesWithReportsResult(responseData)) {
-        const error = new Error("The server returned an unexpected response.");
-
-        stackAPI.markAsFailed({
+      if (isParseFramesWithReportsResult(responseData)) {
+        stackAPI.markAsDone({
           endTime,
+          frameResult: responseData[specification],
           pendingItem,
-          requestError: error,
           response,
-          responseBody: responseData,
-          responseStatus: 500,
         });
-        tryCall(() => {
-          onError(error);
+
+        tryCall(() => options?.onSuccess?.());
+
+        return;
+      }
+
+      if (isParseResult(responseData)) {
+        stackAPI.markAsDone({
+          endTime,
+          frameResult: responseData,
+          pendingItem,
+          response,
         });
-        tryCall(() => options?.onError?.(error));
+
+        tryCall(() => options?.onSuccess?.());
 
         return;
       }
 
-      stackAPI.markAsDone({
+      const error = new Error("The server returned an unexpected response.");
+
+      stackAPI.markAsFailed({
         endTime,
-        frameResult: responseData[specification],
         pendingItem,
+        requestError: error,
         response,
+        responseBody: responseData,
+        responseStatus: 500,
       });
-
-      tryCall(() => options?.onSuccess?.());
+      tryCall(() => {
+        onError(error);
+      });
+      tryCall(() => options?.onError?.(error));
 
       return;
     }

packages/render/src/use-frame-stack.ts

@@ -16,15 +16,12 @@ import type {
   SignedFrameAction,
   SignerStateActionContext,
 } from "./types";
+import { isParseResult } from "./helpers";
 
 function computeDurationInSeconds(start: Date, end: Date): number {
   return Number(((end.getTime() - start.getTime()) / 1000).toFixed(2));
 }
 
-export function isParseResult(result: unknown): result is ParseResult {
-  return typeof result === "object" && result !== null && "status" in result;
-}
-
 function framesStackReducer(
   state: FramesStack,
   action: FrameReducerActions