Skip to content

Commit 91bbeb6

Browse files
stephancillstephancill
authored
Merge pull request #265 from framesjs/dev
Dev
2 parents 520125a + 12bc554 commit 91bbeb6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+2027
-303
lines changed

‎.changeset/eight-hounds-remember.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"frames.js": patch
3+
---
4+
5+
fix: allow to explicitly set state using generics

‎.changeset/gorgeous-crabs-tie.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@frames.js/debugger": patch
3+
---
4+
5+
feat: mint tx via reservoir api

‎.changeset/small-islands-fold.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"create-frames": minor
3+
---
4+
5+
feat: add cloudflare worker template

‎.changeset/tidy-cheetahs-cover.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"framesjs-starter": patch
3+
---
4+
5+
feat: update starter frame to use the new api

‎.changeset/tiny-papayas-guess.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"frames.js": patch
3+
"docs": patch
4+
---
5+
6+
fix: add missing ctx, env, and req access to cloudflare workers handlers

‎.github/workflows/github-actions.yml

+16-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@ on:
55
branches:
66
- main
77
- dev
8+
paths-ignore:
9+
- "docs/**"
10+
- "changesets/**"
811
pull_request:
12+
paths-ignore:
13+
- "docs/**"
14+
- "changesets/**"
915

1016
concurrency:
1117
group: ${{ github.workflow }}-${{ github.ref }}
@@ -63,9 +69,18 @@ jobs:
6369
- name: Install dependencies
6470
run: yarn --frozen-lockfile
6571

66-
- name: Typecheck
72+
- name: Build
6773
run: yarn build:ci
6874

75+
- name: Typecheck
76+
run: yarn check:types
77+
78+
- name: Check package types
79+
run: yarn check:package-types
80+
81+
- name: Lint packages
82+
run: yarn check:package-lint
83+
6984
test:
7085
needs: [lint, typecheck]
7186
runs-on: ubuntu-latest

‎docs/pages/reference/core/cloudflare-workers/index.mdx

+10-158
Original file line numberDiff line numberDiff line change
@@ -2,157 +2,33 @@
22

33
Frames.js can be easily deployed to [Cloudflare Workers](https://workers.cloudflare.com).
44

5-
## Create a new project using `wrangler`
6-
7-
:::code-group
8-
9-
```bash [npm]
10-
npm create cloudflare -- my-cf-frames --type hello-world --ts && cd ./my-cf-frames
11-
```
12-
13-
```bash [yarn]
14-
yarn create cloudflare my-cf-frames --type hello-world --ts && cd ./my-cf-frames
15-
```
16-
17-
```bash [pnpm]
18-
pnpm create cloudflare my-cf-frames --type hello-world --ts && cd ./my-cf-frames
19-
```
20-
21-
:::
22-
23-
## Install `frames.js`
24-
25-
In order for `frames.js` to work properly in [Cloudflare Workers](https://workers.cloudflare.com) you must replace the `@vercel/og` dependency with `workers-og`. Follow following steps to override the dependency.
26-
275
::::steps
286

29-
### Override `@vercel/og` package with `workers-og`
30-
31-
Add following to your `package.json`.
32-
33-
:::code-group
34-
35-
```json [npm]
36-
{
37-
"overrides": {
38-
"frames.js": {
39-
"@vercel/og": "npm:workers-og@^0.0.23"
40-
}
41-
}
42-
}
43-
```
44-
45-
```json [yarn]
46-
{
47-
"resolutions": {
48-
"@vercel/og": "npm:workers-og"
49-
}
50-
}
51-
```
52-
53-
```json [pnpm]
54-
{
55-
"pnpm": {
56-
"overrides": {
57-
"@vercel/og": "npm:workers-og@^0.0.23"
58-
}
59-
}
60-
}
61-
```
62-
63-
:::
64-
65-
### Install the dependencies
66-
67-
After you have overridden the `@vercel/og` package with `workers-og`, you can install the dependencies.
7+
## Create a new project from template
688

699
:::code-group
7010

7111
```bash [npm]
72-
npm install frames.js react
12+
npm create frames -- --name my-cf-frames --template cloudflare-worker && cd ./my-cf-frames
7313
```
7414

7515
```bash [yarn]
76-
yarn add frames.js react
16+
yarn create frames --name my-cf-frames --template cloudflare-worker && cd ./my-cf-frames
7717
```
7818

7919
```bash [pnpm]
80-
pnpm add frames.js react
20+
pnpm create frames --name my-cf-frames --template cloudflare-worker && cd ./my-cf-frames
8121
```
8222

8323
:::
84-
::::
85-
86-
## Write your Frames handler
87-
88-
::::steps
89-
90-
### Delete generated file
91-
92-
Delete the `src/index.ts` file that was generated by `wrangler`.
93-
94-
### Create a file with your Frames app handler
95-
96-
Create `src/index.tsx` file and paste the following code inside.
9724

98-
```tsx [src/index.tsx]
99-
import { createFrames, Button } from "frames.js/cloudflare-workers";
25+
## Edit the generated Frame handler
10026

101-
const frames = createFrames();
102-
103-
const fetch = frames(async ({ message, searchParams }) => {
104-
const hasClicked = !!(message && searchParams.clicked);
105-
106-
return {
107-
image: <span>{hasClicked ? `Clicked ✅` : `Clicked ❌`}</span>,a
108-
buttons: !hasClicked
109-
? [
110-
<Button action="post" target={{ query: { clicked: true } }}>
111-
Click Me
112-
</Button>,
113-
]
114-
: [
115-
<Button action="post" target="/">
116-
Reset
117-
</Button>,
118-
],
119-
};
120-
});
121-
122-
export default {
123-
fetch,
124-
} satisfies ExportedHandler;
125-
```
126-
127-
### Configure Typescript to use React jsx runtime
128-
129-
Open `tsconfig.json` and change the value of `compilerOptions.tsx` to `react-jsx`.
130-
131-
```json [tsconfig.json]
132-
{
133-
"compilerOptions": {
134-
"jsx": "react-jsx"
135-
}
136-
}
137-
```
138-
139-
### Change the entrypoint for your Frames handler
140-
141-
Open `wrangler.toml` and change the value of `main` to `src/index.tsx`.
142-
143-
```toml [wrangler.toml]
144-
main = "src/index.tsx"
145-
```
146-
147-
::::
27+
Open `src/index.tsx` and edit the handler to your needs.
14828

14929
## Develop and test locally
15030

151-
You can test your Cloudflare Worker locally using `wrangler dev` and our [debugger](/guides/debugger#local-debugger-cli). Follow these steps to start developing locally:
152-
153-
::::steps
154-
155-
#### Start the local server
31+
Run following command to start the local server and debugger to test your Frames app locally.
15632

15733
:::code-group
15834

@@ -170,35 +46,9 @@ pnpm dev
17046

17147
:::
17248

173-
#### Start the debugger
174-
175-
After you started the local server, you can start the debugger by running the following command where you replace `<local-url>` with a URL on which local server is running (see the output of above command, e.g. `http://localhost:8787`).
176-
177-
:::code-group
178-
179-
```bash [npm]
180-
npx @frames.js/debugger --url <local-url>
181-
```
182-
183-
```bash [yarn]
184-
# yarn v1 doesn't have an alternative to npx, so you have to install the debugger globally (or use npx)
185-
yarn global add @frames.js/debugger && frames --url <local-url>
186-
187-
# yarn v2
188-
yarn dlx @frames.js/debugger --url <local-url>
189-
```
190-
191-
```bash [pnpm]
192-
pnpm dlx @frames.js/debugger --url <local-url>
193-
```
194-
195-
:::
196-
197-
::::
198-
19949
## Deploy to Cloudflare Workers
20050

201-
When you tested your Frames app locally and you are ready to deploy it to Cloudflare Workers, run the following command.
51+
When you are done with development and testing, run the following command to deploy your Frames app to Cloudflare Workers.
20252

20353
:::code-group
20454

@@ -215,3 +65,5 @@ pnpm deploy
21565
```
21666

21767
:::
68+
69+
::::

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createFrames } from "frames.js/next";
2+
3+
export const frames = createFrames({
4+
basePath: "/frames",
5+
initialState: { counter: 0 },
6+
});

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

-1
This file was deleted.

‎examples/framesjs-starter/app/frames/route.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* eslint-disable react/jsx-key */
2+
import { Button } from "frames.js/next";
3+
import { frames } from "./frames";
4+
5+
const frameHandler = frames(async (ctx) => {
6+
const counter = ctx.message ? ctx.searchParams.op === "+" ? ctx.state.counter + 1 : ctx.state.counter - 1 : ctx.state.counter
7+
8+
return {
9+
image: <div tw="flex flex-col">
10+
<div tw="flex">frames.js starter</div>
11+
{ctx.message?.inputText && <div tw="flex">
12+
{`Input: ${ctx.message.inputText}`}
13+
</div>}
14+
<div tw="flex">Counter {counter}</div></div>,
15+
textInput: "Say something",
16+
buttons: [
17+
<Button action="post" target={{pathname: "/", query: {op: "+"}}}>
18+
Increment
19+
</Button>,
20+
<Button action="post" target={{pathname: "/", query: {op: "-"}}}>
21+
Decrement
22+
</Button >,
23+
<Button action="link" target={`https://www.google.com`}>
24+
External
25+
</Button>
26+
],
27+
state: { counter: counter}
28+
}
29+
})
30+
31+
export const GET = frameHandler;
32+
export const POST = frameHandler;

0 commit comments

Comments
 (0)