framesjs · stephancill · Mar 27, 2024 · Mar 27, 2024 · Mar 27, 2024
diff --git a/.changeset/warm-pandas-laugh.md b/.changeset/warm-pandas-laugh.md
@@ -0,0 +1,5 @@
+---
+"frames.js": patch
+---
+
+fix: correctly tree shake the bundle
diff --git a/packages/frames.js/package.json b/packages/frames.js/package.json
@@ -14,7 +14,7 @@
   },
   "scripts": {
     "lint": "eslint \"./src/**/*.{ts,tsx}\"",
-    "build": "NODE_OPTIONS='--max-old-space-size=16384' tsup `find ./src -type f \\( -regex '.*\\.tsx*' -a -not -regex '.*\\.test\\.tsx*' \\)` --format cjs,esm --dts",
+    "build": "NODE_OPTIONS='--max-old-space-size=16384' tsup",
     "dev": "npm run build -- --watch",
     "test:watch": "jest --watch",
     "update:proto": "curl https://raw.githubusercontent.com/farcasterxyz/hub-monorepo/main/packages/core/src/protobufs/generated/message.ts -o src/farcaster/generated/message.ts"
@@ -236,4 +236,4 @@
     "protobufjs": "^7.2.6",
     "viem": "^2.7.8"
   }
-}
+}
diff --git a/packages/frames.js/src/core/types.ts b/packages/frames.js/src/core/types.ts
@@ -1,9 +1,9 @@
 import { ImageResponse } from "@vercel/og";
-import { ClientProtocolId } from "..";
+import type { ClientProtocolId } from "../types";
 import { Button } from "./components";
 
 export type JsonObject = { [Key in string]: JsonValue } & {
  [Key in string]?: JsonValue | undefined;
 };

 export type JsonArray = JsonValue[] | readonly JsonValue[];
@@ -20,12 +20,12 @@
    Union extends unknown
      ? // The union type is used as the only argument to a function since the union
        // of function arguments is an intersection.
        (distributedUnion: Union) => void
      : // This won't happen.
        never
  ) extends // Infer the `Intersection` type since TypeScript represents the positional
  // arguments of unions of functions as an intersection of the union.
  (mergedIntersection: infer Intersection) => void
    ? // The `& Union` is to allow indexing by the resulting type
      Intersection & Union
    : never;
@@ -115,7 +115,7 @@
 type FramesMiddlewareNextFunction<
  TState extends JsonValue | undefined,
  TReturnedContext extends AllowedFramesContextShape,
 > = (context?: TReturnedContext) => FramesMiddlewareReturnType<TState>;

 export type FramesMiddlewareReturnType<TState extends JsonValue | undefined> =
  Promise<FramesHandlerFunctionReturnType<TState> | Response>;

diff --git a/packages/frames.js/src/getAddressForFid.ts b/packages/frames.js/src/getAddressForFid.ts
@@ -1,8 +1,8 @@
 import { createPublicClient, http, parseAbi } from "viem";
 import { optimism } from "viem/chains";
-import { AddressReturnType, HubHttpUrlOptions } from "./types";
+import type { AddressReturnType, HubHttpUrlOptions } from "./types";
 import { DEFAULT_HUB_API_KEY, DEFAULT_HUB_API_URL } from "./default";
-import { extractAddressFromJSONMessage } from ".";
+import { extractAddressFromJSONMessage } from "./utils";
 
 /**
  * Returns the first verified address for a given `Farcaster` users `fid` if available, falling back to their account custodyAddress

diff --git a/packages/frames.js/src/getAddressesForFid.ts b/packages/frames.js/src/getAddressesForFid.ts
@@ -1,8 +1,8 @@
 import { createPublicClient, http, parseAbi } from "viem";
 import { optimism } from "viem/chains";
-import { AddressWithType, HubHttpUrlOptions } from "./types";
+import type { AddressWithType, HubHttpUrlOptions } from "./types";
 import { DEFAULT_HUB_API_KEY, DEFAULT_HUB_API_URL } from "./default";
-import { extractAddressFromJSONMessage } from ".";
+import { extractAddressFromJSONMessage } from "./utils";
 
 async function getCustodyAddressForFid(fid: number): Promise<AddressWithType> {
   const publicClient = createPublicClient({

diff --git a/packages/frames.js/src/getFrameMessage.ts b/packages/frames.js/src/getFrameMessage.ts
@@ -1,16 +1,16 @@
-import { FrameActionMessage, Message } from "./farcaster";
-import { bytesToHex } from "viem";
-import {
+import { type FrameActionMessage, Message } from "./farcaster";
+import { bytesToHex } from "viem/utils";
+import { normalizeCastId } from "./utils";
+import type {
   FrameActionDataParsed,
   FrameActionDataParsedAndHubContext,
   FrameActionHubContext,
   FrameActionPayload,
   HubHttpUrlOptions,
-  getAddressesForFid,
-  getUserDataForFid,
-  normalizeCastId,
-  validateFrameMessage,
-} from ".";
+} from "./types";
+import { getAddressesForFid } from "./getAddressesForFid";
+import { getUserDataForFid } from "./getUserDataForFid";
+import { validateFrameMessage } from "./validateFrameMessage";
 import { DEFAULT_HUB_API_KEY, DEFAULT_HUB_API_URL } from "./default";
 
 export type GetFrameMessageOptions = {

diff --git a/packages/frames.js/src/hono/index.ts b/packages/frames.js/src/hono/index.ts
@@ -13,7 +13,7 @@ type CreateFramesForHono = types.CreateFramesFunctionDefinition<
  *
  * @example
  * import { createFrames, Button } from 'frames.js/hono';
- * import { Honoe } from 'hono';
+ * import { Hono } from 'hono';
  *
  * const frames = createFrames();
  * const honoHandler = frames(async (ctx) => {

diff --git a/packages/frames.js/src/middleware/__snapshots__/renderResponse.test.tsx.snap b/packages/frames.js/src/middleware/__snapshots__/renderResponse.test.tsx.snap
@@ -5,73 +5,81 @@ exports[`renderResponse middleware allows to render a frame as json if Accept he
 exports[`renderResponse middleware allows to render a frame with image defined as react element 1`] = `"<meta name="og:image" content="data:image/png;base64,AAAAAAAAAAAAAA=="/><meta name="fc:frame" content="vNext"/><meta name="fc:frame:image" content="data:image/png;base64,AAAAAAAAAAAAAA=="/><meta name="fc:frame:post_url" content=""/><meta name="fc:frame:image:aspect_ratio" content="1.91:1"/><meta name="fc:frame:button:1" content="Click me 1"/><meta name="fc:frame:button:1:action" content="post"/><meta name="fc:frame:button:1:target" content="https://example.com/?value=customStateValue1&__bi=1-p"/><meta name="fc:frame:button:2" content="Click me 2"/><meta name="fc:frame:button:2:action" content="post"/><meta name="fc:frame:button:2:target" content="https://example.com/a/b?a=true&__bi=2-p"/><meta name="fc:frame:button:3" content="Click me 3"/><meta name="fc:frame:button:3:action" content="post"/><meta name="fc:frame:button:3:target" content="https://example.com/test?value=10&__bi=3-p"/>"`;
 
 exports[`renderResponse middleware correctly renders image wich conditional content 1`] = `
-<div
-  style={
-    {
+{
+  "key": "",
+  "props": {
+    "children": [
+      {
+        "key": "",
+        "props": {
+          "children": <span>
+            Something is not there
+          </span>,
+          "style": {
+            "alignItems": "center",
+            "color": "black",
+            "display": "flex",
+            "flex": 1,
+            "flexDirection": "column",
+            "fontSize": 36,
+            "justifyContent": "center",
+            "lineHeight": 1.2,
+            "overflow": "hidden",
+          },
+        },
+        "type": "div",
+      },
+    ],
+    "style": {
       "alignItems": "stretch",
       "backgroundColor": "white",
       "display": "flex",
       "flexDirection": "row",
       "height": "100vh",
       "width": "100%",
-    }
-  }
->
-  <div
-    style={
-      {
-        "alignItems": "center",
-        "color": "black",
-        "display": "flex",
-        "flex": 1,
-        "flexDirection": "column",
-        "fontSize": 36,
-        "justifyContent": "center",
-        "lineHeight": 1.2,
-        "overflow": "hidden",
-      }
-    }
-  >
-    <span>
-      Something is not there
-    </span>
-  </div>
-</div>
+    },
+  },
+  "type": "div",
+}
 `;
 
 exports[`renderResponse middleware correctly renders image wich conditional content 2`] = `
-<div
-  style={
-    {
+{
+  "key": "",
+  "props": {
+    "children": [
+      {
+        "key": "",
+        "props": {
+          "children": <span>
+            Something is there
+          </span>,
+          "style": {
+            "alignItems": "center",
+            "color": "black",
+            "display": "flex",
+            "flex": 1,
+            "flexDirection": "column",
+            "fontSize": 36,
+            "justifyContent": "center",
+            "lineHeight": 1.2,
+            "overflow": "hidden",
+          },
+        },
+        "type": "div",
+      },
+    ],
+    "style": {
       "alignItems": "stretch",
       "backgroundColor": "white",
       "display": "flex",
       "flexDirection": "row",
       "height": "100vh",
       "width": "100%",
-    }
-  }
->
-  <div
-    style={
-      {
-        "alignItems": "center",
-        "color": "black",
-        "display": "flex",
-        "flex": 1,
-        "flexDirection": "column",
-        "fontSize": 36,
-        "justifyContent": "center",
-        "lineHeight": 1.2,
-        "overflow": "hidden",
-      }
-    }
-  >
-    <span>
-      Something is there
-    </span>
-  </div>
-</div>
+    },
+  },
+  "type": "div",
+}
 `;
 
 exports[`renderResponse middleware properly resolves against basePath 1`] = `"<meta name="og:image" content="data:image/png;base64,AAAAAAAAAAAAAA=="/><meta name="fc:frame" content="vNext"/><meta name="fc:frame:image" content="data:image/png;base64,AAAAAAAAAAAAAA=="/><meta name="fc:frame:post_url" content=""/><meta name="fc:frame:image:aspect_ratio" content="1.91:1"/><meta name="fc:frame:button:1" content="Click me 1"/><meta name="fc:frame:button:1:action" content="post"/><meta name="fc:frame:button:1:target" content="https://example.com/prefixed/test?value=customStateValue1&__bi=1-p"/>"`;

diff --git a/packages/frames.js/src/middleware/farcaster.ts b/packages/frames.js/src/middleware/farcaster.ts
@@ -1,14 +1,13 @@
+import type { ClientProtocolId, FrameActionPayload } from "../types";
 import {
-  ClientProtocolId,
-  FrameActionPayload,
-  FrameMessageReturnType,
+  type FrameMessageReturnType,
   getFrameMessage,
-} from "..";
+} from "../getFrameMessage";
 import {
   InvalidFrameActionPayloadError,
   RequestBodyNotJSONError,
 } from "../core/errors";
-import { FramesMiddleware, JsonValue } from "../core/types";
+import type { FramesMiddleware, JsonValue } from "../core/types";
 
 function isValidFrameActionPayload(
   value: unknown

diff --git a/packages/frames.js/src/middleware/farcasterHubContext.ts b/packages/frames.js/src/middleware/farcasterHubContext.ts
@@ -1,15 +1,17 @@
-import {
+import type {
   ClientProtocolId,
   FrameActionPayload,
-  FrameMessageReturnType,
   HubHttpUrlOptions,
+} from "../types";
+import {
+  type FrameMessageReturnType,
   getFrameMessage,
-} from "..";
+} from "../getFrameMessage";
 import {
   InvalidFrameActionPayloadError,
   RequestBodyNotJSONError,
 } from "../core/errors";
-import { FramesMiddleware, JsonValue } from "../core/types";
+import type { FramesMiddleware, JsonValue } from "../core/types";
 
 function isValidFrameActionPayload(
   value: unknown

diff --git a/packages/frames.js/src/middleware/framesjsMiddleware.ts b/packages/frames.js/src/middleware/framesjsMiddleware.ts
@@ -1,4 +1,4 @@
-import { FramesMiddleware } from "../core/types";
+import type { FramesMiddleware } from "../core/types";
 import {
   isFrameRedirect,
   parseButtonInformationFromTargetURL,

diff --git a/packages/frames.js/src/middleware/openframes.ts b/packages/frames.js/src/middleware/openframes.ts
@@ -1,6 +1,9 @@
-import { ClientProtocolId } from "..";
+import type { ClientProtocolId } from "../types";
 import { RequestBodyNotJSONError } from "../core/errors";
-import { FramesMiddleware, FramesMiddlewareReturnType } from "../core/types";
+import type {
+  FramesMiddleware,
+  FramesMiddlewareReturnType,
+} from "../core/types";
 import { isFrameDefinition } from "../core/utils";
 
 type OpenFrameMessage = any;

diff --git a/...ames.js/src/middleware/renderResponse.tsx → ...rames.js/src/middleware/renderResponse.ts b/...ames.js/src/middleware/renderResponse.tsx → ...rames.js/src/middleware/renderResponse.ts
@@ -1,8 +1,9 @@
-import React from "react";
 import { ImageResponse } from "@vercel/og";
-import { type Frame, getFrameFlattened, getFrameHtmlHead } from "..";
+import { getFrameHtmlHead } from "../getFrameHtml";
+import { getFrameFlattened } from "../getFrameFlattened";
+import { type Frame } from "../types";
 import type { ButtonProps } from "../core/components";
-import {
+import type {
   FrameButtonElement,
   FrameDefinition,
   FramesHandlerFunctionReturnType,
@@ -249,34 +250,41 @@ async function renderImage(
   options: FrameDefinition<any>["imageOptions"]
 ): Promise<string> {
   const response = new ImageResponse(
-    (
-      <div
-        style={{
+    // do not use React jsx here because it causes problem with tree shaking React
+    {
+      type: "div",
+      key: "",
+      props: {
+        style: {
           display: "flex", // Use flex layout
           flexDirection: "row", // Align items horizontally
           alignItems: "stretch", // Stretch items to fill the container height
           width: "100%",
           height: "100vh", // Full viewport height
           backgroundColor: "white",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-            lineHeight: 1.2,
-            fontSize: 36,
-            color: "black",
-            flex: 1,
-            overflow: "hidden",
-          }}
-        >
-          {element}
-        </div>
-      </div>
-    ),
+        },
+        children: [
+          {
+            type: "div",
+            key: "",
+            props: {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                lineHeight: 1.2,
+                fontSize: 36,
+                color: "black",
+                flex: 1,
+                overflow: "hidden",
+              },
+              children: element,
+            },
+          },
+        ],
+      },
+    },
     {
       ...(options?.aspectRatio === "1:1"
         ? {

diff --git a/packages/frames.js/src/middleware/stateMiddleware.ts b/packages/frames.js/src/middleware/stateMiddleware.ts
@@ -1,4 +1,4 @@
-import { FramesMiddleware, JsonValue } from "../core/types";
+import type { FramesMiddleware, JsonValue } from "../core/types";
 
 type StateMiddlewareContext<TState extends JsonValue | undefined> = {
   /**

diff --git a/packages/frames.js/src/next/fetchMetadata.ts b/packages/frames.js/src/next/fetchMetadata.ts
@@ -1,6 +1,6 @@
-import type { FrameFlattened } from "..";
+import type { FrameFlattened } from "../types";
 import { FRAMES_META_TAGS_HEADER } from "../core";
-import { Metadata } from "next";
+import type { Metadata } from "next";
 
 /**
  * Fetches meta tags from your Frames app that can be used in Next.js generateMetadata() function.

diff --git a/packages/frames.js/src/next/index.ts b/packages/frames.js/src/next/index.ts
@@ -1,6 +1,6 @@
 import { createFrames as coreCreateFrames, types } from "../core";
 import type { NextRequest, NextResponse } from "next/server";
-import { CoreMiddleware } from "../middleware";
+import type { CoreMiddleware } from "../middleware";
 import { getCurrentUrl } from "./getCurrentUrl";
 export { Button, type types } from "../core";
 

diff --git a/packages/frames.js/src/next/pages-router.tsx b/packages/frames.js/src/next/pages-router.tsx
@@ -1,4 +1,4 @@
-import { Metadata, NextApiRequest, NextApiResponse } from "next";
+import type { Metadata, NextApiRequest, NextApiResponse } from "next";
 import { createFrames as coreCreateFrames } from "../core";
 import {
   createReadableStreamFromReadable,