Revert "feat(debugger): frame image validation (#373)" (#374)

This reverts commit c7a3b2b.
framesjs · May 8, 2024 · e8e3685 · e8e3685
1 parent fc8e469
commit e8e3685
Show file tree

Hide file tree

Showing 14 changed files with 6 additions and 380 deletions.
diff --git a/.changeset/funny-toys-confess.md b/.changeset/funny-toys-confess.md
diff --git a/packages/debugger/app/components/frame-debugger.tsx b/packages/debugger/app/components/frame-debugger.tsx
@@ -4,7 +4,6 @@ import {
   type Frame,
   ParsingReport,
   SupportedParsingSpecification,
-  FrameFlattened,
 } from "frames.js";
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
 import React from "react";
@@ -45,11 +44,9 @@ import { cn } from "@/lib/utils";
 import { hasWarnings } from "../lib/utils";
 import { useRouter } from "next/navigation";
 import { WithTooltip } from "./with-tooltip";
-import { InvalidImageAspectRatioError, InvalidImageError, InvalidImageTypeError, validateFrameImage } from "../lib/validateFrameImage";
 
 type FrameDebuggerFramePropertiesTableRowsProps = {
   stackItem: FramesStackItem;
-  specification: SupportedParsingSpecification;
 };
 
 function paramsToObject(entries: IterableIterator<[string, string]>): object {
@@ -74,29 +71,27 @@ function isPropertyExperimental([key, value]: [string, string]) {
 
 function FrameDebuggerFramePropertiesTableRow({
   stackItem,
-  specification,
 }: FrameDebuggerFramePropertiesTableRowsProps) {
-  const [currentStackItem, setCurrentStackItem] = useState(stackItem);
   const properties = useMemo(() => {
     /** tuple of key and value */
     const validProperties: [string, string][] = [];
     /** tuple of key and error message */
     const invalidProperties: [string, ParsingReport[]][] = [];
     const visitedInvalidProperties: string[] = [];
 
-    if (currentStackItem.status === "pending") {
+    if (stackItem.status === "pending") {
       return { validProperties, invalidProperties, isValid: true };
     }
 
-    if (currentStackItem.status === "requestError") {
+    if (stackItem.status === "requestError") {
       return { validProperties, invalidProperties, isValid: false };
     }
 
-    if (currentStackItem.status === "message") {
+    if (stackItem.status === "message") {
       return { validProperties, invalidProperties, isValid: true };
     }
 
-    const result = currentStackItem.frame;
+    const result = stackItem.frame;
 
     // we need to check validation errors first because getFrame incorrectly return a value for a key even if it's invalid
     for (const [key, errors] of Object.entries(result.reports)) {
@@ -107,8 +102,7 @@ function FrameDebuggerFramePropertiesTableRow({
 
     const flattenedFrame = getFrameFlattened(result.frame, {
       "frames.js:version":
-        "frames.js:version" in result.frame &&
-        typeof result.frame["frames.js:version"] === "string"
+        "frames.js:version" in result.frame && typeof result.frame["frames.js:version"] === "string"
           ? result.frame["frames.js:version"]
           : undefined,
     });
@@ -136,90 +130,8 @@ function FrameDebuggerFramePropertiesTableRow({
       isValid: invalidProperties.length === 0,
       hasExperimentalProperties,
     };
-  }, [currentStackItem]);
-
-  useEffect(() => {
-    setCurrentStackItem(stackItem);
   }, [stackItem]);
 
-  useEffect(() => {
-    if (stackItem.status === "done" && stackItem.frame.frame.image) {
-      const imageKey: keyof FrameFlattened =
-      specification === "farcaster" ? "fc:frame:image" : "of:image";
-    const imageAspectRatioKey: keyof FrameFlattened =
-      specification === "farcaster"
-        ? "fc:frame:image:aspect_ratio"
-        : "of:image:aspect_ratio";
-
-
-      const src = stackItem.frame.frame.image;
-
-      validateFrameImage({
-        src,
-        aspectRatio: stackItem.frame.frame.imageAspectRatio ?? "",
-      }).catch(e => {
-        if (e instanceof InvalidImageAspectRatioError) {
-          setCurrentStackItem({
-            ...stackItem,
-            frame: {
-              ...stackItem.frame,
-              status: "failure",
-              reports: {
-                ...stackItem.frame.reports,
-                [imageAspectRatioKey]: [
-                  ...(stackItem.frame.reports[imageAspectRatioKey] ?? []),
-                  {
-                    source: specification,
-                    level: "error",
-                    message: e.message,
-                  },
-                ],
-              },
-            },
-          });
-        } else if (e instanceof InvalidImageTypeError || e instanceof InvalidImageError) {
-          setCurrentStackItem({
-            ...stackItem,
-            frame: {
-              ...stackItem.frame,
-              status: "failure",
-              reports: {
-                ...stackItem.frame.reports,
-                [imageKey]: [
-                  ...(stackItem.frame.reports[imageKey] ?? []),
-                  {
-                    source: specification,
-                    level: "error",
-                    message: e.message,
-                  },
-                ],
-              },
-            },
-          });
-        } else {
-          setCurrentStackItem({
-            ...stackItem,
-            frame: {
-              ...stackItem.frame,
-              status: "failure",
-              reports: {
-                ...stackItem.frame.reports,
-                [imageKey]: [
-                  ...(stackItem.frame.reports[imageKey] ?? []),
-                  {
-                    source: specification,
-                    level: "error",
-                    message: e instanceof Error ? e.message : `Failed to load image, invalid file type or corrupted image file`,
-                  },
-                ],
-              },
-            },
-          });
-        }
-      });
-    }
-  }, [stackItem, specification]);
-
   return (
     <>
       {properties.validProperties.map(([propertyKey, value]) => {
@@ -855,7 +767,6 @@ export function FrameDebugger({
                         </TableCell>
                       </TableRow>
                       <FrameDebuggerFramePropertiesTableRow
-                        specification={specification}
                         stackItem={frameState.frame}
                       ></FrameDebuggerFramePropertiesTableRow>
                     </TableBody>

diff --git a/packages/debugger/app/image-proxy/route.ts b/packages/debugger/app/image-proxy/route.ts
diff --git a/packages/debugger/app/lib/validateFrameImage.ts b/packages/debugger/app/lib/validateFrameImage.ts
diff --git a/packages/debugger/next.config.js b/packages/debugger/next.config.js
@@ -18,7 +18,7 @@ const nextConfig = {
       },
     ],
   },
-  webpack: (config, context) => {
+  webpack: (config) => {
     config.externals.push(
       "pino-pretty",
       "lokijs",
@@ -28,17 +28,6 @@ const nextConfig = {
       // so it is installed on user's system
       "@xmtp/user-preferences-bindings-wasm"
     );
-
-    // fixes file-types package so we can import it client side
-    config.plugins.push(
-      new context.webpack.NormalModuleReplacementPlugin(
-        /^node:/,
-        (resource) => {
-          resource.request = resource.request.replace(/^node:/, "");
-        }
-      )
-    );
-
     return config;
   },
 };

diff --git a/packages/debugger/package.json b/packages/debugger/package.json
@@ -60,7 +60,6 @@
     "cmdk": "^0.2.1",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.1.0",
-    "file-type": "^19.0.0",
     "frames.js": "^0.15.2",
     "lucide-react": "^0.344.0",
     "postcss": "^8",

diff --git a/templates/next-starter-with-examples/app/examples/new-api-invalid-images/frames/frames.ts b/templates/next-starter-with-examples/app/examples/new-api-invalid-images/frames/frames.ts
diff --git a/...r-with-examples/app/examples/new-api-invalid-images/frames/invalid-aspect-ratio/route.tsx b/...r-with-examples/app/examples/new-api-invalid-images/frames/invalid-aspect-ratio/route.tsx
diff --git a/...ter-with-examples/app/examples/new-api-invalid-images/frames/invalid-image-type/route.tsx b/...ter-with-examples/app/examples/new-api-invalid-images/frames/invalid-image-type/route.tsx
diff --git a/...-starter-with-examples/app/examples/new-api-invalid-images/frames/invalid-image/route.tsx b/...-starter-with-examples/app/examples/new-api-invalid-images/frames/invalid-image/route.tsx