From e017466382f4286e1e0904a4f473e249e1d41517 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michal=20Kvasnic=CC=8Ca=CC=81k?= Date: Wed, 27 Mar 2024 12:40:29 +0100 Subject: [PATCH 1/2] fix: correctly tree shake bundle --- packages/frames.js/package.json | 4 +- packages/frames.js/src/core/types.ts | 2 +- packages/frames.js/src/getAddressForFid.ts | 4 +- packages/frames.js/src/getAddressesForFid.ts | 4 +- packages/frames.js/src/getFrameMessage.ts | 16 +-- packages/frames.js/src/hono/index.ts | 2 +- .../renderResponse.test.tsx.snap | 112 ++++++++++-------- .../frames.js/src/middleware/farcaster.ts | 9 +- .../src/middleware/farcasterHubContext.ts | 10 +- .../src/middleware/framesjsMiddleware.ts | 2 +- .../frames.js/src/middleware/openframes.ts | 7 +- .../{renderResponse.tsx => renderResponse.ts} | 58 +++++---- .../src/middleware/stateMiddleware.ts | 2 +- packages/frames.js/src/next/fetchMetadata.ts | 4 +- packages/frames.js/src/next/index.ts | 2 +- packages/frames.js/src/next/pages-router.tsx | 2 +- packages/frames.js/src/next/server.tsx | 14 +-- packages/frames.js/src/next/types.ts | 2 +- packages/frames.js/src/remix/fetchMetadata.ts | 2 +- packages/frames.js/src/remix/index.ts | 2 +- packages/frames.js/src/types.ts | 2 +- packages/frames.js/src/utils.ts | 2 +- .../frames.js/src/validateFrameMessage.ts | 9 +- packages/frames.js/tsup.config.ts | 15 +++ packages/render/package.json | 4 +- packages/render/tsup.config.ts | 15 +++ 26 files changed, 177 insertions(+), 130 deletions(-) rename packages/frames.js/src/middleware/{renderResponse.tsx => renderResponse.ts} (90%) create mode 100644 packages/frames.js/tsup.config.ts create mode 100644 packages/render/tsup.config.ts diff --git a/packages/frames.js/package.json b/packages/frames.js/package.json index d1e16aca6..36864a2c6 100644 --- 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" } -} \ No newline at end of file +} diff --git a/packages/frames.js/src/core/types.ts b/packages/frames.js/src/core/types.ts index 2d031ab4e..07f819469 100644 --- a/packages/frames.js/src/core/types.ts +++ b/packages/frames.js/src/core/types.ts @@ -1,5 +1,5 @@ import { ImageResponse } from "@vercel/og"; -import { ClientProtocolId } from ".."; +import type { ClientProtocolId } from "../types"; import { Button } from "./components"; export type JsonObject = { [Key in string]: JsonValue } & { diff --git a/packages/frames.js/src/getAddressForFid.ts b/packages/frames.js/src/getAddressForFid.ts index 9ef467662..ef0b2005d 100644 --- 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 index 1852113fd..a6f5369e1 100644 --- 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 { const publicClient = createPublicClient({ diff --git a/packages/frames.js/src/getFrameMessage.ts b/packages/frames.js/src/getFrameMessage.ts index 4708fc5a9..f0a4bf1d6 100644 --- 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 index 8ec53110d..f580d6f4c 100644 --- 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 index 24f21f3d7..1338b4373 100644 --- 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`] = `""`; exports[`renderResponse middleware correctly renders image wich conditional content 1`] = ` -
+ Something is not there + , + "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%", - } - } -> -
- - Something is not there - -
-
+ }, + }, + "type": "div", +} `; exports[`renderResponse middleware correctly renders image wich conditional content 2`] = ` -
+ Something is there + , + "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%", - } - } -> -
- - Something is there - -
-
+ }, + }, + "type": "div", +} `; exports[`renderResponse middleware properly resolves against basePath 1`] = `""`; diff --git a/packages/frames.js/src/middleware/farcaster.ts b/packages/frames.js/src/middleware/farcaster.ts index 3bf6acae5..37e6a8ec1 100644 --- 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 index 8ab40feb5..fbbd7c9b3 100644 --- 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 index be60a8afc..d635a9bd6 100644 --- 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 index 986fc9d3a..7805ae7ee 100644 --- 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/packages/frames.js/src/middleware/renderResponse.tsx b/packages/frames.js/src/middleware/renderResponse.ts similarity index 90% rename from packages/frames.js/src/middleware/renderResponse.tsx rename to packages/frames.js/src/middleware/renderResponse.ts index 0daccccfc..9372c5e20 100644 --- a/packages/frames.js/src/middleware/renderResponse.tsx +++ b/packages/frames.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["imageOptions"] ): Promise { const response = new ImageResponse( - ( -
-
- {element} -
-
- ), + }, + 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 index 99ba78f8c..1da2dc5dd 100644 --- 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 = { /** diff --git a/packages/frames.js/src/next/fetchMetadata.ts b/packages/frames.js/src/next/fetchMetadata.ts index 2a7b9b6f5..8be82c3f8 100644 --- 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 index 51dd555be..8d79ebc79 100644 --- 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 index b522bc6b8..bf229f862 100644 --- 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, diff --git a/packages/frames.js/src/next/server.tsx b/packages/frames.js/src/next/server.tsx index 20ffd0dfd..2b4f945ac 100644 --- a/packages/frames.js/src/next/server.tsx +++ b/packages/frames.js/src/next/server.tsx @@ -6,20 +6,20 @@ import { } from "next/server"; import React from "react"; import { - FrameMessageReturnType, - GetFrameMessageOptions, - getByteLength, - validateFrameMessage, + type FrameMessageReturnType, + type GetFrameMessageOptions, getFrameMessage as _getFrameMessage, -} from ".."; -import { +} from "../getFrameMessage"; +import { getByteLength } from '../utils' +import { validateFrameMessage } from '../validateFrameMessage'; +import type { ActionIndex, ClientProtocolId, FrameActionPayload, HubHttpUrlOptions, ImageAspectRatio, } from "../types"; -import { +import type { Dispatch, FrameButtonAutomatedProps, FrameButtonProvidedProps, diff --git a/packages/frames.js/src/next/types.ts b/packages/frames.js/src/next/types.ts index 5fd79492d..d397e5b91 100644 --- a/packages/frames.js/src/next/types.ts +++ b/packages/frames.js/src/next/types.ts @@ -1,4 +1,4 @@ -import { ActionIndex, FrameActionPayload } from "../types"; +import type { ActionIndex, FrameActionPayload } from "../types"; /** * A subset of HTTP request headers provided to the server request diff --git a/packages/frames.js/src/remix/fetchMetadata.ts b/packages/frames.js/src/remix/fetchMetadata.ts index 65605d3be..08d5d1935 100644 --- a/packages/frames.js/src/remix/fetchMetadata.ts +++ b/packages/frames.js/src/remix/fetchMetadata.ts @@ -1,4 +1,4 @@ -import type { FrameFlattened } from ".."; +import type { FrameFlattened } from "../types"; import { FRAMES_META_TAGS_HEADER } from "../core"; import type { MetaFunction } from "@remix-run/node"; diff --git a/packages/frames.js/src/remix/index.ts b/packages/frames.js/src/remix/index.ts index 9888e030d..7a17f14a3 100644 --- a/packages/frames.js/src/remix/index.ts +++ b/packages/frames.js/src/remix/index.ts @@ -1,6 +1,6 @@ import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node"; import { createFrames as coreCreateFrames, types } from "../core"; -import { CoreMiddleware } from "../middleware"; +import type { CoreMiddleware } from "../middleware"; export { Button, type types } from "../core"; export { fetchMetadata } from "./fetchMetadata"; diff --git a/packages/frames.js/src/types.ts b/packages/frames.js/src/types.ts index 0ce5720fa..de4c10566 100644 --- a/packages/frames.js/src/types.ts +++ b/packages/frames.js/src/types.ts @@ -1,4 +1,4 @@ -import { Abi } from "viem"; +import type { Abi } from "viem"; export type FrameVersion = "vNext" | `${number}-${number}-${number}`; diff --git a/packages/frames.js/src/utils.ts b/packages/frames.js/src/utils.ts index 35138dd9b..74664a627 100644 --- a/packages/frames.js/src/utils.ts +++ b/packages/frames.js/src/utils.ts @@ -1,5 +1,5 @@ import { CastId, Message, MessageType, Protocol } from "./farcaster"; -import { +import type { FrameActionPayload, FrameButton, FrameButtonLink, diff --git a/packages/frames.js/src/validateFrameMessage.ts b/packages/frames.js/src/validateFrameMessage.ts index ab526bfe0..ec073595b 100644 --- a/packages/frames.js/src/validateFrameMessage.ts +++ b/packages/frames.js/src/validateFrameMessage.ts @@ -1,10 +1,7 @@ -import { - FrameActionPayload, - HubHttpUrlOptions, - hexStringToUint8Array, -} from "."; +import type { FrameActionPayload, HubHttpUrlOptions } from "./types"; +import { hexStringToUint8Array } from "./utils"; import { DEFAULT_HUB_API_KEY, DEFAULT_HUB_API_URL } from "./default"; -import { FrameActionMessage, Message } from "./farcaster"; +import { type FrameActionMessage, Message } from "./farcaster"; /** * @returns a Promise that resolves with whether the message signature is valid, by querying a Farcaster hub, as well as the message itself diff --git a/packages/frames.js/tsup.config.ts b/packages/frames.js/tsup.config.ts new file mode 100644 index 000000000..d8aaecbc1 --- /dev/null +++ b/packages/frames.js/tsup.config.ts @@ -0,0 +1,15 @@ +import { dirname } from "node:path"; +import { fileURLToPath } from "node:url"; +import { defineConfig } from "tsup"; +import glob from "fast-glob"; + +export default defineConfig({ + dts: true, + format: ["cjs", "esm"], + clean: true, + entry: glob.sync("src/**/*.{ts,tsx}", { + ignore: ["**/*.test.{ts,tsx}", "**/*.snap"], + onlyFiles: true, + cwd: dirname(fileURLToPath(import.meta.url)), + }), +}); diff --git a/packages/render/package.json b/packages/render/package.json index 613645fb3..923d90bd3 100644 --- a/packages/render/package.json +++ b/packages/render/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" }, @@ -83,4 +83,4 @@ "@farcaster/core": "^0.14.7", "frames.js": "^0.10.0" } -} \ No newline at end of file +} diff --git a/packages/render/tsup.config.ts b/packages/render/tsup.config.ts new file mode 100644 index 000000000..d8aaecbc1 --- /dev/null +++ b/packages/render/tsup.config.ts @@ -0,0 +1,15 @@ +import { dirname } from "node:path"; +import { fileURLToPath } from "node:url"; +import { defineConfig } from "tsup"; +import glob from "fast-glob"; + +export default defineConfig({ + dts: true, + format: ["cjs", "esm"], + clean: true, + entry: glob.sync("src/**/*.{ts,tsx}", { + ignore: ["**/*.test.{ts,tsx}", "**/*.snap"], + onlyFiles: true, + cwd: dirname(fileURLToPath(import.meta.url)), + }), +}); From 65c7f6c9741308e19d22e5aff57a9201b9754e56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michal=20Kvasnic=CC=8Ca=CC=81k?= Date: Wed, 27 Mar 2024 12:43:50 +0100 Subject: [PATCH 2/2] chore: changeset --- .changeset/warm-pandas-laugh.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/warm-pandas-laugh.md diff --git a/.changeset/warm-pandas-laugh.md b/.changeset/warm-pandas-laugh.md new file mode 100644 index 000000000..6a5f16ce2 --- /dev/null +++ b/.changeset/warm-pandas-laugh.md @@ -0,0 +1,5 @@ +--- +"frames.js": patch +--- + +fix: correctly tree shake the bundle