Merge pull request #278 from framesjs/dev

Dev

Author: stephancill

.changeset/calm-carpets-divide.md

@@ -0,0 +1,5 @@
+---
+"@frames.js/render": minor
+---
+
+feat: rename types

.changeset/chilly-parrots-sneeze.md

@@ -0,0 +1,6 @@
+---
+"frames.js": patch
+"@frames.js/debugger": patch
+---
+
+fix: minor bugs and code cleanup

.changeset/clever-impalas-notice.md

@@ -0,0 +1,5 @@
+---
+"create-frames": patch
+---
+
+fix: missing basePath in next template

.changeset/curly-badgers-drum.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+docs: state management

.changeset/curly-queens-thank.md

@@ -0,0 +1,5 @@
+---
+"@frames.js/debugger": patch
+---
+
+fix: correctly manipulate url on load and also on change

.changeset/early-turkeys-impress.md

@@ -0,0 +1,5 @@
+---
+"@frames.js/render": patch
+---
+
+fix: correctly detect image change in order to properly indicate loading state

.changeset/fast-wasps-yawn.md

@@ -0,0 +1,5 @@
+---
+"framesjs-starter": patch
+---
+
+fix: state management generic type demo

.changeset/orange-owls-agree.md

@@ -0,0 +1,5 @@
+---
+"create-frames": patch
+---
+
+fix: debugger dependency version

.changeset/rotten-taxis-whisper.md

@@ -0,0 +1,5 @@
+---
+"create-frames": patch
+---
+
+fix: bump template versions

.changeset/silver-timers-compare.md

@@ -0,0 +1,5 @@
+---
+"@frames.js/debugger": patch
+---
+
+fix: properly split dev dependencies in debugger

.eslintrc.js

@@ -2,11 +2,8 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   extends: ["@framesjs/eslint-config/library.js"],
-  parser: "@typescript-eslint/parser",
   parserOptions: {
     project: true,
   },
-  env: {
-    jest: true,
-  },
+  ignorePatterns: ["**/farcaster/generated/*.ts"],
 };

.github/workflows/github-actions.yml

@@ -50,6 +50,9 @@ jobs:
       - name: Install dependencies
         run: yarn --frozen-lockfile
 
+      - name: Build
+        run: yarn build:ci
+
       - name: Lint
         run: yarn lint
 

docs/pages/guides/state-management.mdx

@@ -0,0 +1,72 @@
+---
+title: "Guide: Frames.js State"
+description: "Frames.js is the react based framework for making frames. Debugger included."
+---
+
+# Guide: State Management in Frames.js
+
+State in Frames.js is a way for you to store data that you want to use in between frames requests. The frames spec allows up to 4kb of data to be stored in the state object.
+
+## Setup
+
+To use state in frames.js, you should declare the initial state in your `createFrames` call. If your state type is not declared explicitly it will be derived from the initial state.
+
+```ts [frames.ts]
+import { createFrames } from "@framesjs/next";
+
+export type State = {
+  count: number;
+};
+
+export const frames = createFrames<State>({
+  initialState: {
+    count: 0,
+  },
+});
+```
+
+## Accessing state
+
+You can access the state object in your frame on the `ctx` parameter. The initial frame will have the state object with the initial values.
+
+```ts [route.tsx]
+import { frames } from "./frames";
+
+const handler = frames(async ({ ctx }) => {
+  return {
+    image: <div tw="flex">Count: {ctx.state.count}</div>, // [!code focus]
+  };
+});
+
+export const GET = handler;
+export const POST = handler;
+```
+
+## Updating state
+
+To update the state, you just include the updated state object in your handler's [`FrameDefinition`](/reference/core/createFrames#framedefinition) return value.
+
+```ts [route.tsx]
+import { frames, Button } from "./frames";
+
+const handler = frames(async ({ ctx }) => {
+  const currentState = ctx.state;
+
+  // Update the state // [!code focus]
+  const updatedState = { // [!code focus]
+    ...currentState, // [!code focus]
+    count: currentState.count + 1, // [!code focus]
+  }; // [!code focus]
+
+  return {
+    image: <div tw="flex">Count: {updatedState.count}`</div>, // [!code focus],
+    buttons: [
+      <Button action="post">Increment</Button>
+    ],
+    state: updatedState, // [!code focus]
+  };
+});
+
+export const GET = handler;
+export const POST = handler;
+```

docs/vocs.config.tsx

@@ -22,6 +22,10 @@ const sidebar = [
         text: "Multi-page Frames",
         link: "/guides/multiple-frames",
       },
+      {
+        text: "State Management",
+        link: "/guides/state-management",
+      },
       {
         text: "Deploying your Frame",
         link: "/guides/deployment",
@@ -87,9 +91,9 @@ const sidebar = [
         link: "/reference/core/remix",
       },
       {
-        text: 'Cloudflare Workers',
-        link: '/reference/core/cloudflare-workers'
-      }
+        text: "Cloudflare Workers",
+        link: "/reference/core/cloudflare-workers",
+      },
     ],
   },
   {

examples/framesjs-starter/app/frames/frames.ts

@@ -1,6 +1,10 @@
 import { createFrames } from "frames.js/next";
 
-export const frames = createFrames({
+type State = {
+  counter: number;
+};
+
+export const frames = createFrames<State>({
   basePath: "/frames",
   initialState: { counter: 0 },
 });

packages/debugger/app/components/frame-debugger.tsx

@@ -1,7 +1,7 @@
 import { getFrameHtmlHead, getFrameFlattened } from "frames.js";
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
 import React from "react";
-import { FrameState, FrameRequest, FrameStackSuccess } from "frames.js/render";
+import { FrameState, FrameStackSuccess } from "@frames.js/render";
 import { Table, TableBody, TableCell, TableRow } from "@/components/table";
 import {
   AlertTriangle,
@@ -10,7 +10,6 @@ import {
   HomeIcon,
   ListIcon,
   LoaderIcon,
-  MessageCircle,
   MessageCircleHeart,
   RefreshCwIcon,
   XCircle,
@@ -190,20 +189,22 @@ export function FrameDebugger({
 
   const [openAccordions, setOpenAccordions] = useState<string[]>([]);
 
+  const [latestFrame] = frameState.framesStack;
+
   useEffect(() => {
     if (!frameState.isLoading) {
       // make sure the first frame is open
       if (
         !openAccordions.includes(
-          String(frameState.framesStack[0]?.timestamp.getTime())
+          String(latestFrame?.timestamp.getTime())
         )
       )
         setOpenAccordions((v) => [
           ...v,
-          String(frameState.framesStack[0]?.timestamp.getTime()),
+          String(latestFrame?.timestamp.getTime()),
         ]);
     }
-  }, [frameState.isLoading]);
+  }, [frameState.isLoading, latestFrame?.timestamp, openAccordions]);
 
   return (
     <div className="flex flex-row items-start p-4 gap-4 bg-slate-50 max-w-full w-full h-full">
@@ -219,7 +220,6 @@ export function FrameDebugger({
                 frameState.fetchFrame({
                   url: frameState?.homeframeUrl,
                   method: "GET",
-                  request: {},
                 });
             }}
           >
@@ -235,7 +235,6 @@ export function FrameDebugger({
                 frameState.fetchFrame({
                   url: frameState?.homeframeUrl,
                   method: "GET",
-                  request: {},
                 });
               }
             }}
@@ -246,12 +245,21 @@ export function FrameDebugger({
             className="flex flex-row gap-3 items-center shadow-sm border"
             variant={"outline"}
             onClick={() => {
-              if (frameState?.framesStack[0]?.request) {
-                frameState.fetchFrame({
-                  url: frameState?.framesStack[0].url,
-                  method: frameState?.framesStack[0].method,
-                  request: frameState.framesStack[0].request,
-                } as FrameRequest);
+              const [latestFrame] = frameState.framesStack;
+
+              if (latestFrame) {
+                frameState.fetchFrame(
+                  latestFrame.method === "GET"
+                    ? {
+                        method: "GET",
+                        url: latestFrame.url,
+                      }
+                    : {
+                        method: "POST",
+                        request: latestFrame.request,
+                        url: latestFrame.url,
+                      }
+                );
               }
             }}
           >
@@ -269,11 +277,14 @@ export function FrameDebugger({
                   className={`px-4 py-3 flex flex-col gap-2 ${i !== 0 ? "border-t" : "bg-slate-50"} hover:bg-slate-50 w-full`}
                   key={frameStackItem.timestamp.getTime()}
                   onClick={() => {
-                    frameState.fetchFrame({
+                    frameState.fetchFrame(frameStackItem.method === 'GET' ? {
+                      method: 'GET',
+                      url: frameStackItem.url,
+                    } : {
                       url: frameStackItem.url,
                       method: frameStackItem.method,
                       request: frameStackItem.request,
-                    } as FrameRequest);
+                    });
                   }}
                 >
                   <span className="flex text-left flex-row w-full">