From 9fd9d2bbcee48bda566b8881935e0890f51f8392 Mon Sep 17 00:00:00 2001 From: Greg Brimble Date: Thu, 12 May 2022 08:45:19 +0100 Subject: [PATCH] Fix Pages Plugins and static asset routing --- .changeset/honest-pants-move.md | 7 +++++++ examples/pages-functions-app/tests/index.test.ts | 12 ++++++++++++ examples/pages-plugin-example/functions/static.ts | 1 - .../functions/static/_middleware.ts | 1 + examples/pages-plugin-example/public/dir/bar.html | 9 +++++++++ examples/pages-plugin-example/public/foo.html | 9 +++++++++ packages/wrangler/pages/functions/buildWorker.ts | 2 +- packages/wrangler/pages/functions/template-plugin.ts | 5 +++-- packages/wrangler/src/pages.tsx | 9 ++++++++- 9 files changed, 50 insertions(+), 5 deletions(-) create mode 100644 .changeset/honest-pants-move.md delete mode 100644 examples/pages-plugin-example/functions/static.ts create mode 100644 examples/pages-plugin-example/functions/static/_middleware.ts create mode 100644 examples/pages-plugin-example/public/dir/bar.html create mode 100644 examples/pages-plugin-example/public/foo.html diff --git a/.changeset/honest-pants-move.md b/.changeset/honest-pants-move.md new file mode 100644 index 00000000000..73e3ae87555 --- /dev/null +++ b/.changeset/honest-pants-move.md @@ -0,0 +1,7 @@ +--- +"wrangler": patch +--- + +fix: Fixes Pages Plugins and static asset routing. + +There was previously a bug where a relative pathname would be missing the leading slash which would result in routing errors. diff --git a/examples/pages-functions-app/tests/index.test.ts b/examples/pages-functions-app/tests/index.test.ts index 5021a1ae48b..f06e4512127 100644 --- a/examples/pages-functions-app/tests/index.test.ts +++ b/examples/pages-functions-app/tests/index.test.ts @@ -123,5 +123,17 @@ describe("Pages Functions", () => { expect(text).toContain( "

Hello from a static asset brought from a Plugin!

" ); + + response = await waitUntilReady( + "http://localhost:8789/mounted-plugin/static/foo" + ); + text = await response.text(); + expect(text).toContain("

foo

"); + + response = await waitUntilReady( + "http://localhost:8789/mounted-plugin/static/dir/bar" + ); + text = await response.text(); + expect(text).toContain("

bar

"); }); }); diff --git a/examples/pages-plugin-example/functions/static.ts b/examples/pages-plugin-example/functions/static.ts deleted file mode 100644 index 69e60d89528..00000000000 --- a/examples/pages-plugin-example/functions/static.ts +++ /dev/null @@ -1 +0,0 @@ -export { onRequest } from "assets:../public"; diff --git a/examples/pages-plugin-example/functions/static/_middleware.ts b/examples/pages-plugin-example/functions/static/_middleware.ts new file mode 100644 index 00000000000..63d4986ae09 --- /dev/null +++ b/examples/pages-plugin-example/functions/static/_middleware.ts @@ -0,0 +1 @@ +export { onRequest } from "assets:../../public"; diff --git a/examples/pages-plugin-example/public/dir/bar.html b/examples/pages-plugin-example/public/dir/bar.html new file mode 100644 index 00000000000..7c2ea941099 --- /dev/null +++ b/examples/pages-plugin-example/public/dir/bar.html @@ -0,0 +1,9 @@ + + + + Static asset from a Plugin! + + +

bar

+ + diff --git a/examples/pages-plugin-example/public/foo.html b/examples/pages-plugin-example/public/foo.html new file mode 100644 index 00000000000..24de8870bf2 --- /dev/null +++ b/examples/pages-plugin-example/public/foo.html @@ -0,0 +1,9 @@ + + + + Static asset from a Plugin! + + +

foo

+ + diff --git a/packages/wrangler/pages/functions/buildWorker.ts b/packages/wrangler/pages/functions/buildWorker.ts index 2fd63dcc7fa..aecc13539bc 100644 --- a/packages/wrangler/pages/functions/buildWorker.ts +++ b/packages/wrangler/pages/functions/buildWorker.ts @@ -122,7 +122,7 @@ export function buildWorker({ // TODO: Watch args.path for changes and re-copy when updated contents: `export const onRequest = ({ request, env, functionPath }) => { const url = new URL(request.url) - const relativePathname = url.pathname.split(functionPath)[1] || "/"; + const relativePathname = \`/\${url.pathname.split(functionPath)[1] || ''}\`.replace(/^\\/\\//, '/'); url.pathname = '/cdn-cgi/pages-plugins/${identifier}' + relativePathname request = new Request(url.toString(), request) return env.ASSETS.fetch(request) diff --git a/packages/wrangler/pages/functions/template-plugin.ts b/packages/wrangler/pages/functions/template-plugin.ts index 117a8d6405f..89502af7227 100644 --- a/packages/wrangler/pages/functions/template-plugin.ts +++ b/packages/wrangler/pages/functions/template-plugin.ts @@ -103,8 +103,9 @@ export default function (pluginArgs) { const { env, next, data } = workerContext; const url = new URL(request.url); - const relativePathname = - url.pathname.split(workerContext.functionPath)[1] || "/"; + const relativePathname = `/${ + url.pathname.split(workerContext.functionPath)[1] || "" + }`.replace(/^\/\//, "/"); const handlerIterator = executeRequest(request, relativePathname); const pluginNext = async (input?: RequestInfo, init?: RequestInit) => { diff --git a/packages/wrangler/src/pages.tsx b/packages/wrangler/src/pages.tsx index 02dbb65c773..6a6581e3789 100644 --- a/packages/wrangler/src/pages.tsx +++ b/packages/wrangler/src/pages.tsx @@ -1576,6 +1576,10 @@ export const pages: BuilderCallback = (yargs) => { default: false, description: "Build a plugin rather than a Worker script", }, + "build-output-directory": { + type: "string", + description: "The directory to output static assets to", + }, }) .epilogue(pagesBetaWarning), async ({ @@ -1587,12 +1591,15 @@ export const pages: BuilderCallback = (yargs) => { fallbackService, watch, plugin, + "build-output-directory": buildOutputDirectory, }) => { if (!isInPagesCI) { // Beta message for `wrangler pages ` usage logger.log(pagesBetaWarning); } + buildOutputDirectory ??= dirname(outfile); + await buildFunctions({ outfile, outputConfigPath, @@ -1602,7 +1609,7 @@ export const pages: BuilderCallback = (yargs) => { fallbackService, watch, plugin, - buildOutputDirectory: dirname(outfile), + buildOutputDirectory, }); } )