diff --git a/.changeset/curly-bulldogs-shake.md b/.changeset/curly-bulldogs-shake.md new file mode 100644 index 000000000000..da7e87cf2d0e --- /dev/null +++ b/.changeset/curly-bulldogs-shake.md @@ -0,0 +1,7 @@ +--- +"wrangler": patch +--- + +fix: pass `routes` to `dev` session + +We can pass routes when creating a `dev` session. The effect of this is when you visit a path that _doesn't_ match the given routes, then it instead does a fetch from the deployed worker on that path (if any). We were previously passing `*/*`, i.e, matching _all_ routes in dev; this fix now passes configured routes instead. diff --git a/packages/wrangler/src/__tests__/dev.test.tsx b/packages/wrangler/src/__tests__/dev.test.tsx index 24e65196462f..63b0f617bf5b 100644 --- a/packages/wrangler/src/__tests__/dev.test.tsx +++ b/packages/wrangler/src/__tests__/dev.test.tsx @@ -141,6 +141,27 @@ describe("wrangler dev", () => { }); }); + describe("routes", () => { + it("should pass routes to ", async () => { + fs.writeFileSync("index.js", `export default {};`); + + // config.routes + mockGetZones("5.some-host.com", [{ id: "some-zone-id-5" }]); + writeWranglerToml({ + main: "index.js", + routes: ["http://5.some-host.com/some/path/*"], + }); + await runWrangler("dev"); + expect((Dev as jest.Mock).mock.calls[0][0]).toEqual( + expect.objectContaining({ + host: "5.some-host.com", + zone: "some-zone-id-5", + routes: ["http://5.some-host.com/some/path/*"], + }) + ); + }); + }); + describe("host", () => { it("should resolve a host to its zone", async () => { writeWranglerToml({ diff --git a/packages/wrangler/src/create-worker-preview.ts b/packages/wrangler/src/create-worker-preview.ts index ff17c2c99e3c..1370da384184 100644 --- a/packages/wrangler/src/create-worker-preview.ts +++ b/packages/wrangler/src/create-worker-preview.ts @@ -118,7 +118,21 @@ async function createPreviewToken( : `/accounts/${accountId}/workers/scripts/${scriptId}/edge-preview`; const mode: CfPreviewMode = ctx.zone - ? { routes: ["*/*"] } // TODO: should we support routes here? how? + ? { + routes: ctx.routes + ? // extract all the route patterns + ctx.routes.map((route) => { + if (typeof route === "string") { + return route; + } + if (route.custom_domain) { + return `${route.pattern}/*`; + } + return route.pattern; + }) + : // if there aren't any patterns, then just match on all routes + ["*/*"], + } : { workers_dev: true }; const formData = createWorkerUploadForm(worker); diff --git a/packages/wrangler/src/dev.tsx b/packages/wrangler/src/dev.tsx index d3109440aff5..81a875079511 100644 --- a/packages/wrangler/src/dev.tsx +++ b/packages/wrangler/src/dev.tsx @@ -22,6 +22,7 @@ import { } from "./index"; import type { Config } from "./config"; +import type { Route } from "./config/environment"; import type { Argv, ArgumentsCamelCase } from "yargs"; interface DevArgs { @@ -296,14 +297,15 @@ export async function devHandler(args: ArgumentsCamelCase) { // Compute zone info from the `host` and `route` args and config; let host = args.host || config.dev.host; let zoneId: string | undefined; + const routes: Route[] | undefined = + args.routes || (config.route && [config.route]) || config.routes; if (!args.local) { if (host) { zoneId = await getZoneIdFromHost(host); } - const routes = args.routes || config.route || config.routes; if (!zoneId && routes) { - const firstRoute = Array.isArray(routes) ? routes[0] : routes; + const firstRoute = routes[0]; const zone = await getZoneForRoute(firstRoute); if (zone) { zoneId = zone.id; @@ -311,9 +313,8 @@ export async function devHandler(args: ArgumentsCamelCase) { } } } else if (!host) { - const routes = args.routes || config.route || config.routes; if (routes) { - const firstRoute = Array.isArray(routes) ? routes[0] : routes; + const firstRoute = routes[0]; host = getHostFromRoute(firstRoute); } } @@ -415,6 +416,7 @@ export async function devHandler(args: ArgumentsCamelCase) { env={args.env} zone={zoneId} host={host} + routes={routes} rules={getRules(config)} legacyEnv={isLegacyEnv(config)} minify={args.minify ?? config.minify} diff --git a/packages/wrangler/src/dev/dev.tsx b/packages/wrangler/src/dev/dev.tsx index 038daa373ed0..5c0fa47aa754 100644 --- a/packages/wrangler/src/dev/dev.tsx +++ b/packages/wrangler/src/dev/dev.tsx @@ -17,6 +17,7 @@ import { Local } from "./local"; import { Remote } from "./remote"; import { useEsbuild } from "./use-esbuild"; import type { Config } from "../config"; +import type { Route } from "../config/environment"; import type { Entry } from "../entry"; import type { AssetPaths } from "../sites"; import type { CfWorkerInit } from "../worker"; @@ -52,6 +53,7 @@ export type DevProps = { legacyEnv: boolean; zone: string | undefined; host: string | undefined; + routes: Route[] | undefined; }; export function DevImplementation(props: DevProps): JSX.Element { @@ -188,6 +190,7 @@ function DevSession(props: DevSessionProps) { legacyEnv={props.legacyEnv} zone={props.zone} host={props.host} + routes={props.routes} /> ); } diff --git a/packages/wrangler/src/dev/remote.tsx b/packages/wrangler/src/dev/remote.tsx index 5c381ea3fee2..314c5476da61 100644 --- a/packages/wrangler/src/dev/remote.tsx +++ b/packages/wrangler/src/dev/remote.tsx @@ -9,6 +9,7 @@ import { logger } from "../logger"; import { usePreviewServer } from "../proxy"; import { syncAssets } from "../sites"; import { ChooseAccount, getAccountChoices, requireApiToken } from "../user"; +import type { Route } from "../config/environment"; import type { CfPreviewToken } from "../create-worker-preview"; import type { AssetPaths } from "../sites"; import type { ChooseAccountItem } from "../user"; @@ -34,6 +35,7 @@ export function Remote(props: { legacyEnv: boolean | undefined; zone: string | undefined; host: string | undefined; + routes: Route[] | undefined; }) { const [accountId, setAccountId] = useState(props.accountId); const accountChoicesRef = useRef>(); @@ -56,6 +58,7 @@ export function Remote(props: { legacyEnv: props.legacyEnv, zone: props.zone, host: props.host, + routes: props.routes, }); usePreviewServer({ @@ -125,6 +128,7 @@ export function useWorker(props: { legacyEnv: boolean | undefined; zone: string | undefined; host: string | undefined; + routes: Route[] | undefined; }): CfPreviewToken | undefined { const { name, @@ -230,6 +234,7 @@ export function useWorker(props: { legacyEnv: props.legacyEnv, zone: props.zone, host: props.host, + routes: props.routes, }, abortController.signal ) @@ -277,6 +282,7 @@ export function useWorker(props: { props.legacyEnv, props.zone, props.host, + props.routes, ]); return token; } diff --git a/packages/wrangler/src/preview.tsx b/packages/wrangler/src/preview.tsx index cffcbc8bd2b9..74aae96798a9 100644 --- a/packages/wrangler/src/preview.tsx +++ b/packages/wrangler/src/preview.tsx @@ -76,6 +76,7 @@ export async function previewHandler(args: ArgumentsCamelCase) { env={args.env} zone={undefined} host={undefined} + routes={undefined} legacyEnv={isLegacyEnv(config)} build={config.build || {}} define={config.define} diff --git a/packages/wrangler/src/worker.ts b/packages/wrangler/src/worker.ts index f48583a79665..1c266a4d2e1c 100644 --- a/packages/wrangler/src/worker.ts +++ b/packages/wrangler/src/worker.ts @@ -1,8 +1,9 @@ +import type { Route } from "./config/environment"; +import type { ApiCredentials } from "./user"; + /** * A Cloudflare account. */ -import type { ApiCredentials } from "./user"; - export interface CfAccount { /** * An API token. @@ -180,4 +181,5 @@ export interface CfWorkerContext { legacyEnv: boolean | undefined; zone: string | undefined; host: string | undefined; + routes: Route[] | undefined; }