Merge pull request #251 from framesjs/fix/refactor-frames-examples

fix: refactor frames examples

.changeset/thirty-dots-doubt.md

@@ -0,0 +1,5 @@
+---
+"framesjs-starter": patch
+---
+
+fix: refactor frames app into frames.ts in examples

examples/framesjs-starter/app/examples/new-api-cache-control/frames/frames.ts

@@ -0,0 +1,5 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-cache-control",
+});

examples/framesjs-starter/app/examples/new-api-cache-control/frames/route.tsx

@@ -1,10 +1,6 @@
 /* eslint-disable react/jsx-key */
 import { Button } from "frames.js/next";
-import { createFrames } from "frames.js/next";
-
-const frames = createFrames({
-  basePath: "/examples/new-api-cache-control",
-});
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
   return {

examples/framesjs-starter/app/examples/new-api-mint-button/frames/frames.ts

@@ -0,0 +1,5 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-mint-button/frames",
+});

examples/framesjs-starter/app/examples/new-api-mint-button/frames/route.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/jsx-key */
-import { Button, createFrames } from "frames.js/next";
+import { Button } from "frames.js/next";
 import { getTokenUrl } from "frames.js";
 import { zora } from "viem/chains";
+import { frames } from "./frames";
 
 const nfts: {
   src: string;
@@ -33,10 +34,6 @@ const nfts: {
   },
 ];
 
-const frames = createFrames({
-  basePath: "/examples/new-api-mint-button/frames",
-});
-
 const handleRequest = frames(async (ctx) => {
   const page = Number(ctx.searchParams?.pageIndex ?? 0);
   return {

examples/framesjs-starter/app/examples/new-api-multi-protocol/frames.ts → examples/framesjs-starter/app/examples/new-api-multi-protocol/frames/frames.ts

@@ -2,10 +2,10 @@
 import { farcasterHubContext, openframes } from "frames.js/middleware";
 import { createFrames } from "frames.js/next";
 import { getXmtpFrameMessage, isXmtpFrameActionPayload } from "frames.js/xmtp";
-import { DEFAULT_DEBUGGER_HUB_URL } from "../../debug";
+import { DEFAULT_DEBUGGER_HUB_URL } from "../../../debug";
 
 export const frames = createFrames({
-  basePath: "/examples/new-api-multi-protocol",
+  basePath: "/examples/new-api-multi-protocol/frames",
   initialState: {
     pageIndex: 0,
   },

examples/framesjs-starter/app/examples/new-api-multi-protocol/frames/route.tsx

@@ -1,5 +1,5 @@
 import { Button } from "frames.js/next";
-import { frames } from "../frames";
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
   return {

examples/framesjs-starter/app/examples/new-api-only-followers-can-mint/frames/frames.ts

@@ -0,0 +1,12 @@
+import { farcasterHubContext } from "frames.js/middleware";
+import { createFrames } from "frames.js/next";
+import { DEFAULT_DEBUGGER_HUB_URL } from "../../../debug";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-only-followers-can-mint/frames",
+  middleware: [
+    farcasterHubContext({
+      hubHttpUrl: DEFAULT_DEBUGGER_HUB_URL,
+    }),
+  ],
+});

examples/framesjs-starter/app/examples/new-api-only-followers-can-mint/frames/route.tsx

@@ -1,18 +1,8 @@
 /* eslint-disable react/jsx-key */
 import { getTokenUrl } from "frames.js";
-import { farcasterHubContext } from "frames.js/middleware";
-import { Button, createFrames } from "frames.js/next";
+import { Button } from "frames.js/next";
 import { zora } from "viem/chains";
-import { DEFAULT_DEBUGGER_HUB_URL } from "../../../debug";
-
-const frames = createFrames({
-  basePath: "/examples/new-api-only-followers-can-mint/frames",
-  middleware: [
-    farcasterHubContext({
-      hubHttpUrl: DEFAULT_DEBUGGER_HUB_URL,
-    }),
-  ],
-});
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
   const page = ctx.searchParams?.page ?? "initial";

examples/framesjs-starter/app/examples/new-api-post-redirect/frames/frames.ts

@@ -0,0 +1,5 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-post-redirect/frames",
+});

examples/framesjs-starter/app/examples/new-api-post-redirect/frames/route.tsx

@@ -1,10 +1,7 @@
 /* eslint-disable react/jsx-key */
-import { createFrames, Button } from "frames.js/next";
+import { Button } from "frames.js/next";
 import { redirect } from "frames.js/core";
-
-const frames = createFrames({
-  basePath: "/examples/new-api-post-redirect/frames",
-});
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
   if (ctx.pressedButton?.action === "post_redirect") {

examples/framesjs-starter/app/examples/new-api-slow-request/frames/frames.ts

@@ -0,0 +1,5 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-slow-request/frames",
+});

examples/framesjs-starter/app/examples/new-api-slow-request/frames/route.tsx

@@ -1,11 +1,8 @@
 import { kv } from "@vercel/kv";
 import { types } from "frames.js/core";
-import { createFrames, Button } from "frames.js/next";
+import { Button } from "frames.js/next";
 import { RandomNumberRequestStateValue } from "../slow-fetch/types";
-
-const frames = createFrames({
-  basePath: "/examples/new-api-slow-request/frames",
-});
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
   const initialFrame = {

examples/framesjs-starter/app/examples/new-api-transaction/frames/frames.ts

@@ -0,0 +1,5 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-transaction",
+});

examples/framesjs-starter/app/examples/new-api-transaction/frames/route.tsx

@@ -1,10 +1,6 @@
 /* eslint-disable react/jsx-key */
 import { Button } from "frames.js/next";
-import { createFrames } from "frames.js/next";
-
-const frames = createFrames({
-  basePath: "/examples/new-api-transaction",
-});
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
   if (ctx.message?.transactionId) {