fix: more errors

fix: even more issues

Author: michalkvasnicak

.eslintignore

@@ -5,4 +5,5 @@ module.exports = {
   parserOptions: {
     project: true,
   },
+  ignorePatterns: ["**/farcaster/generated/*.ts"],
 };

.eslintrc.js

@@ -33,9 +33,11 @@ module.exports = {
     "@typescript-eslint/require-await": "warn",
     "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/no-unnecessary-condition": "warn",
+    "@typescript-eslint/consistent-type-imports": "error",
     "jest/expect-expect": "warn",
     "react/jsx-sort-props": "off",
     "unicorn/filename-case": "off",
     eqeqeq: "off",
+    "no-await-in-loop": "off",
   },
 };

packages/eslint-config/library.js

@@ -7,7 +7,7 @@ describe("cloudflare workers adapter", () => {
 
   it("correctly integrates with Cloudflare Workers", async () => {
     const frames = lib.createFrames();
-    const handler = frames(async (ctx) => {
+    const handler = frames((ctx) => {
       expect(ctx.request.url).toBe("http://localhost:3000/");
 
       return {
@@ -35,7 +35,7 @@ describe("cloudflare workers adapter", () => {
       },
     });
 
-    const handler = frames(async (ctx) => {
+    const handler = frames((ctx) => {
       expect(ctx.state).toEqual({ test: false });
 
       return {

packages/frames.js/src/cloudflare-workers/index.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/require-await -- we want to test that handler supports async*/
 import type { ExecutionContext, Request as CfRequest, ExportedHandlerFetchHandler } from '@cloudflare/workers-types';
 import type { types } from '.';
 import { createFrames } from '.';
@@ -41,6 +42,17 @@ framesWithExplicitStateAndEnv(async (ctx) => {
   ctx satisfies { initialState?: { test: boolean }; message?: unknown, pressedButton?: unknown; request: Request; };
   ctx satisfies { cf: { env: { secret: string }; ctx: ExecutionContext; req: CfRequest }}
 
+  return {
+    image: 'http://test.png',
+  };
+}) satisfies ExportedHandlerFetchHandler<{ secret: string }>;
+
+const framesWithExplicitStateAndEnvNoPromiseHandler = createFrames<{ test: boolean }, { secret: string }>({});
+framesWithExplicitStateAndEnvNoPromiseHandler((ctx) => {
+  ctx.state satisfies { test: boolean };
+  ctx satisfies { initialState?: { test: boolean }; message?: unknown, pressedButton?: unknown; request: Request; };
+  ctx satisfies { cf: { env: { secret: string }; ctx: ExecutionContext; req: CfRequest }}
+
   return {
     image: 'http://test.png',
   };

packages/frames.js/src/cloudflare-workers/test.types.tsx

@@ -63,6 +63,6 @@ export type ButtonProps =
   | LinkButtonProps
   | TxButtonProps;
 
-export const Button: React.FunctionComponent<ButtonProps> = () => {
+export function Button(_: ButtonProps): null {
   return null;
-};
+}

packages/frames.js/src/core/components.ts

@@ -10,8 +10,8 @@ describe("composeMiddleware", () => {
   it("properly works with just one middleware", async () => {
     const context = { a: 1 };
 
-    const composedMiddleware = composeMiddleware<typeof context, any>([
-      async (ctx, next) => {
+    const composedMiddleware = composeMiddleware<typeof context, unknown>([
+      (ctx, next) => {
         ctx.a = 2;
         return next();
       },
@@ -31,7 +31,10 @@ describe("composeMiddleware", () => {
       order: [],
     };
 
-    const composedMiddleware = composeMiddleware<typeof context, Promise<any>>([
+    const composedMiddleware = composeMiddleware<
+      typeof context,
+      Promise<string> | string
+    >([
       async (ctx: typeof context, next) => {
         ctx.order.push(1);
         const result = await next({
@@ -54,7 +57,7 @@ describe("composeMiddleware", () => {
 
         return result;
       },
-      async (ctx: typeof context) => {
+      (ctx: typeof context) => {
         ctx.order.push(3);
 
         expect(ctx).toMatchObject({ 1: true, 2: "test" });

packages/frames.js/src/core/composeMiddleware.test.ts

@@ -25,6 +25,8 @@ export function composeMiddleware<TContext, TReturnType>(
   );
 
   return (ctx) => {
-    return composedMiddleware(ctx, (() => {}) as any);
+    return composedMiddleware(ctx, (() => {
+      return undefined;
+    }) as () => TReturnType);
   };
 }

packages/frames.js/src/core/composeMiddleware.ts

@@ -13,7 +13,7 @@ describe("createFrames", () => {
   it("provides default properties on context based on default middleware and internal logic", async () => {
     const handler = createFrames();
 
-    const routeHandler = handler(async (ctx) => {
+    const routeHandler = handler((ctx) => {
       expect(ctx.url).toBeInstanceOf(URL);
       expect(ctx.url.href).toBe("http://test.com/");
 
@@ -32,7 +32,7 @@ describe("createFrames", () => {
   it("passes initialState to context", async () => {
     const handler = createFrames({ initialState: { test: true } });
 
-    const routeHandler = handler(async (ctx) => {
+    const routeHandler = handler((ctx) => {
       expect(ctx.initialState).toEqual({ test: true });
       return redirect("http://test.com");
     });
@@ -54,7 +54,7 @@ describe("createFrames", () => {
       middleware: [customMiddleware],
     });
 
-    const routeHandler = handler(async (ctx) => {
+    const routeHandler = handler((ctx) => {
       return redirect(ctx.custom);
     });
 
@@ -75,7 +75,7 @@ describe("createFrames", () => {
     const handler = createFrames();
 
     const routeHandler = handler(
-      async (ctx) => {
+      (ctx) => {
         return redirect(ctx.custom);
       },
       {
@@ -90,16 +90,28 @@ describe("createFrames", () => {
   });
 
   it("works with parallel middleware", async () => {
-    const middleware0 = async (context: any, next: any) => {
+    const middleware0: FramesMiddleware<any, { test0: boolean }> = async (
+      context,
+      next
+    ) => {
       return next({ test0: true });
     };
-    const middleware1 = async (context: any, next: any) => {
+    const middleware1: FramesMiddleware<any, { test1: boolean }> = async (
+      context,
+      next
+    ) => {
       return next({ test1: true });
     };
-    const middleware2 = async (context: any, next: any) => {
+    const middleware2: FramesMiddleware<any, { test2: boolean }> = async (
+      context,
+      next
+    ) => {
       return next({ test2: true });
     };
-    const middleware3 = async (context: any, next: any) => {
+    const middleware3: FramesMiddleware<any, { test3: boolean }> = async (
+      context,
+      next
+    ) => {
       return next({ test3: true });
     };
 
@@ -111,7 +123,7 @@ describe("createFrames", () => {
       ],
     });
 
-    const routeHandler = handler(async (ctx) => {
+    const routeHandler = handler((ctx) => {
       expect(ctx).toMatchObject({
         test0: true,
         test1: true,

packages/frames.js/src/core/createFrames.test.ts

@@ -1,4 +1,4 @@
-import { coreMiddleware } from "../middleware";
+import { coreMiddleware } from "../middleware/default";
 import { stateMiddleware } from "../middleware/stateMiddleware";
 import { composeMiddleware } from "./composeMiddleware";
 import type {
@@ -21,7 +21,7 @@ export function createFrames<
   TState,
   typeof coreMiddleware,
   TMiddlewares,
-  (req: Request) => Promise<Response>
+  (req: Request) => Promise<Response> | Response
 > {
   const globalMiddleware: FramesMiddleware<TState, FramesContext<TState>>[] =
     middleware || [];
@@ -30,8 +30,10 @@ export function createFrames<
    * This function takes handler function that does the logic with the help of context and returns one of possible results
    */
   return function createFramesRequestHandler(handler, options = {}) {
-    const perRouteMiddleware: FramesMiddleware<any, FramesContext<TState>>[] =
-      options && Array.isArray(options.middleware) ? options.middleware : [];
+    const perRouteMiddleware: FramesMiddleware<
+      JsonValue | undefined,
+      FramesContext<TState>
+    >[] = Array.isArray(options.middleware) ? options.middleware : [];
 
     const composedMiddleware = composeMiddleware<
       FramesContext<TState>,

packages/frames.js/src/core/createFrames.ts

@@ -20,8 +20,8 @@
 // OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
 // USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import type { UrlObject } from "url";
-import type { ParsedUrlQuery } from "querystring";
+import type { UrlObject } from "node:url";
+import type { ParsedUrlQuery } from "node:querystring";
 
 // function searchParamsToUrlQuery(searchParams: URLSearchParams): ParsedUrlQuery {
 //   const query: ParsedUrlQuery = {};
@@ -44,16 +44,18 @@ function stringifyUrlQueryParam(param: unknown): string {
     typeof param === "boolean"
   ) {
     return String(param);
-  } else {
-    return "";
   }
+
+  return "";
 }
 
 function urlQueryToSearchParams(urlQuery: ParsedUrlQuery): URLSearchParams {
   const result = new URLSearchParams();
   Object.entries(urlQuery).forEach(([key, value]) => {
     if (Array.isArray(value)) {
-      value.forEach((item) => result.append(key, stringifyUrlQueryParam(item)));
+      value.forEach((item) => {
+        result.append(key, stringifyUrlQueryParam(item));
+      });
     } else {
       result.set(key, stringifyUrlQueryParam(value));
     }
@@ -74,22 +76,23 @@ function urlQueryToSearchParams(urlQuery: ParsedUrlQuery): URLSearchParams {
 
 const slashedProtocols = /https?|ftp|gopher|file/;
 
-export function formatUrl(urlObj: UrlObject) {
-  let { auth, hostname } = urlObj;
+export function formatUrl(urlObj: UrlObject): string {
+  let { auth } = urlObj;
+  const { hostname } = urlObj;
   let protocol = urlObj.protocol || "";
   let pathname = urlObj.pathname || "";
   let hash = urlObj.hash || "";
   let query = urlObj.query || "";
   let host: string | false = false;
 
-  auth = auth ? encodeURIComponent(auth).replace(/%3A/i, ":") + "@" : "";
+  auth = auth ? `${encodeURIComponent(auth).replace(/%3A/i, ":")}@` : "";
 
   if (urlObj.host) {
     host = auth + urlObj.host;
   } else if (hostname) {
-    host = auth + (~hostname.indexOf(":") ? `[${hostname}]` : hostname);
+    host = auth + (hostname.includes(":") ? `[${hostname}]` : hostname);
     if (urlObj.port) {
-      host += ":" + urlObj.port;
+      host += `:${urlObj.port}`;
     }
   }
 
@@ -105,14 +108,16 @@ export function formatUrl(urlObj: UrlObject) {
     urlObj.slashes ||
     ((!protocol || slashedProtocols.test(protocol)) && host !== false)
   ) {
-    host = "//" + (host || "");
-    if (pathname && pathname[0] !== "/") pathname = "/" + pathname;
+    host = `//${host || ""}`;
+    if (pathname && !pathname.startsWith("/")) {
+      pathname = `/${pathname}`;
+    }
   } else if (!host) {
     host = "";
   }
 
-  if (hash && hash[0] !== "#") hash = "#" + hash;
-  if (search && search[0] !== "?") search = "?" + search;
+  if (hash && !hash.startsWith("#")) hash = `#${hash}`;
+  if (search && !search.startsWith("?")) search = `?${search}`;
 
   pathname = pathname.replace(/[?#]/g, encodeURIComponent);
   search = search.replace("#", "%23");

packages/frames.js/src/core/formatUrl.ts

@@ -1,4 +1,4 @@
-import { FrameRedirect } from "./types";
+import type { FrameRedirect } from "./types";
 
 /**
  * Creates a redirect with 302 as default status

packages/frames.js/src/core/redirect.ts

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/require-await  -- we are checking compatibility with promises */
 import type { types } from '.';
 import { createFrames } from '.';
 
-type Handler = (req: Request) => Promise<Response>;
+type Handler = (req: Request) => Promise<Response> | Response;
 
 const framesWithoutState = createFrames();
 framesWithoutState(async (ctx) => {
@@ -41,6 +42,17 @@ framesWithExplicitStateAndEnv(async (ctx) => {
   ctx satisfies { initialState?: { test: boolean }; message?: unknown, pressedButton?: unknown; request: Request; };
 
 
+  return {
+    image: 'http://test.png',
+  };
+}) satisfies Handler;
+
+const framesWithExplicitStateAndEnvNoPromise = createFrames<{ test: boolean }>({});
+framesWithExplicitStateAndEnvNoPromise((ctx) => {
+  ctx.state satisfies { test: boolean };
+  ctx satisfies { initialState?: { test: boolean }; message?: unknown, pressedButton?: unknown; request: Request; };
+
+
   return {
     image: 'http://test.png',
   };

packages/frames.js/src/core/test.types.tsx

@@ -134,7 +134,9 @@ export type FrameHandlerFunction<
 > = (
   // we pass ctx.state here since it is made available internally by stateMiddleware but the inference would not work
   ctx: FramesContext<TState> & TFramesContext & { state: TState }
-) => Promise<FramesHandlerFunctionReturnType<TState>>;
+) =>
+  | Promise<FramesHandlerFunctionReturnType<TState>>
+  | FramesHandlerFunctionReturnType<TState>;
 
 export type FramesContextFromMiddlewares<
   TMiddlewares extends
@@ -164,7 +166,7 @@ export type FramesRequestHandlerFunction<
     | FramesMiddleware<any, any>[]
     | undefined,
   TFrameMiddleware extends FramesMiddleware<any, any>[] | undefined,
-  TRequestHandlerFunction extends Function,
+  TRequestHandlerFunction extends (...args: any[]) => any,
 > = <
   TPerRouteMiddleware extends
     | FramesMiddleware<any, any>[]
@@ -173,13 +175,13 @@ export type FramesRequestHandlerFunction<
   handler: FrameHandlerFunction<
     TState,
     (TDefaultMiddleware extends undefined
-      ? {}
+      ? Record<string, any>
       : FramesContextFromMiddlewares<NonNullable<TDefaultMiddleware>>) &
       (TFrameMiddleware extends undefined
-        ? {}
+        ? Record<string, any>
         : FramesContextFromMiddlewares<NonNullable<TFrameMiddleware>>) &
       (TPerRouteMiddleware extends undefined
-        ? {}
+        ? Record<string, any>
         : FramesContextFromMiddlewares<NonNullable<TPerRouteMiddleware>>)
   >,
   options?: FramesRequestHandlerFunctionOptions<TPerRouteMiddleware>
@@ -210,7 +212,7 @@ export type CreateFramesFunctionDefinition<
     | readonly FramesMiddleware<any, any>[]
     | FramesMiddleware<any, any>[]
     | undefined,
-  TRequestHandlerFunction extends Function,
+  TRequestHandlerFunction extends (...args: any[]) => any,
 > = <
   TState extends JsonValue | undefined = JsonValue | undefined,
   TFrameMiddleware extends FramesMiddleware<any, any>[] | undefined = undefined,