fix: broken devtools with dynamic path

[ggomaeng]

Added new catch all route in frog-base.tsx so it's the first route prioritized to be used for devtools when this_dev is set. If this_dev is not set, it just relays the request.

Since devtools is registered at the end of all the route definition to have information about existing roots, having any dynamic path before devtools will have higher priority over the devtools path & devtools will become obsolete.

This fixes #176 - this problem exists not only in Next.js, but also in other environments as well.

Tested on my end and everything seems to work! including transactions 👍

Minimal reproduction repo

https://github.com/ggomaeng/frog-dynamic-route-minimal-reproduction

1. clone the repo & install dependencies
2. npm run dev
3. go to http://localhost:3000/api/dev
4. devtools doesn't show. just white blank screen

To test this PR

1. clone the above repo
2. build this PR and link frog in the repo
3. go to http://localhost:3000/api/dev
4. devtools work as expected

---

Steps To Reproduce

1. Create a Next.js frog application that has a dynamic url in the root frame e.g.

// app/api/[[..routes]]/route.tsx
/** @jsxImportSource frog/jsx */

import { Button, Frog, TextInput } from "frog";
import { devtools } from "frog/dev";
import { handle } from "frog/next";
import { serveStatic } from "frog/serve-static";

const app = new Frog({
  basePath: "/api",
});

app.frame("/", (c) => {
  const { buttonValue, inputText, status } = c;
  const fruit = inputText || buttonValue;
  return c.res({
    image: (
      <div
        style={{
          alignItems: "center",
          background:
            status === "response"
              ? "linear-gradient(to right, #432889, #17101F)"
              : "black",
          backgroundSize: "100% 100%",
          display: "flex",
          flexDirection: "column",
          flexWrap: "nowrap",
          height: "100%",
          justifyContent: "center",
          textAlign: "center",
          width: "100%",
        }}
      >
        <div
          style={{
            color: "white",
            fontSize: 60,
            fontStyle: "normal",
            letterSpacing: "-0.025em",
            lineHeight: 1.4,
            marginTop: 30,
            padding: "0 120px",
            whiteSpace: "pre-wrap",
          }}
        >
          {status === "response"
            ? `Nice choice.${fruit ? ` ${fruit.toUpperCase()}!!` : ""}`
            : "Welcome!"}
        </div>
      </div>
    ),
    intents: [
      <TextInput placeholder="Enter custom fruit..." />,
      <Button value="apples">Apples</Button>,
      <Button value="oranges">Oranges</Button>,
      <Button value="bananas">Bananas</Button>,
      <Button.Transaction target="/transaction">hello</Button.Transaction>,
      status === "response" && <Button.Reset>Reset</Button.Reset>,
    ],
  });
});

app.frame("/:dynamicUrl", (c) => {
  const dynamicUrl = c.req.param("dynamicUrl");
  return c.res({
    image: (
      <div
        style={{
          height: "100vh",
          width: "100vw",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: "#000000",
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            color: "white",
            fontSize: 60,
          }}
        >
          Test Minimal Dynamic Url ID: {dynamicUrl}
        </div>
      </div>
    ),
    intents: [
      <Button>Hello World!</Button>,
    ],
  });
});

devtools(app, { serveStatic });
export const GET = handle(app);
export const POST = handle(app);

Frog Version

0.7.13

---

cc @Seranged, @christopherwxyz, @chuckstock.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
frog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 27, 2024 9:08pm
frog-frame	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 27, 2024 9:08pm

[vercel]

@ggomaeng is attempting to deploy a commit to the wevm Team on Vercel.

A member of the Team first needs to authorize it.

[ggomaeng]

I am building frog locally to test using pnpm build & link, but transaction seems to not work with this PR. I forked the main branch. Is my code breaking the transaction functionality, or did I set up local dev environment wrong? Any pointers would be appreciated if something looks wrong!

Update: Transaction seems to work after clean fork of the frog repo and building on top of it.

[ggomaeng]

Edit: resolved wrong route priority in my minimal reproduction code :')

Seems like inputText & buttonValues are working but GET /image paths are not loading too. I swear the images were working before this PR 🤔

Seems like the content type returns text/html; charset=UTF-8

[ggomaeng]

@tmm do you think I am on the right track with this solution?

[ggomaeng]

Realized my example demo had wrong route priority so the images weren't rendering 😅

[dalechyn]

tested it and confirm that the patch solves the issue.