From 27327ccedf5646a7dbca4b56114f1cea2ddbdffe Mon Sep 17 00:00:00 2001 From: Greg Brimble Date: Fri, 7 Jan 2022 13:30:36 +0000 Subject: [PATCH 1/3] Add command --- .changeset/purple-planets-join.md | 5 + packages/wrangler/src/pages.tsx | 439 ++++++++++++++++-------------- 2 files changed, 244 insertions(+), 200 deletions(-) create mode 100644 .changeset/purple-planets-join.md diff --git a/.changeset/purple-planets-join.md b/.changeset/purple-planets-join.md new file mode 100644 index 000000000000..a44cf2db9a92 --- /dev/null +++ b/.changeset/purple-planets-join.md @@ -0,0 +1,5 @@ +--- +"wrangler": patch +--- + +Adds a new `wrangler pages functions build` command which takes the `functions` folder and compiles it into a single Worker. This was already done in `wrangler pages dev`, so this PR just exposes this build command for use in our build image, or for people who want to do it themselves. diff --git a/packages/wrangler/src/pages.tsx b/packages/wrangler/src/pages.tsx index 63b713d0a214..5055149062ea 100644 --- a/packages/wrangler/src/pages.tsx +++ b/packages/wrangler/src/pages.tsx @@ -643,10 +643,16 @@ const RUNNING_BUILDERS: BuildResult[] = []; async function buildFunctions({ scriptPath, functionsDirectory, + minify = false, + sourcemap = false, + watch = false, onEnd, }: { scriptPath: string; functionsDirectory: string; + minify?: boolean; + sourcemap?: boolean; + watch?: boolean; onEnd?: () => void; }) { RUNNING_BUILDERS.forEach( @@ -670,252 +676,285 @@ async function buildFunctions({ await buildWorker({ routesModule, outfile: scriptPath, - minify: false, // TODO: Expose option to enable - sourcemap: true, - watch: true, + minify, + sourcemap, + watch, onEnd, }) ); } export const pages: BuilderCallback = (yargs) => { - return yargs.command( - "dev [directory] [-- command]", - "🧑‍💻 Develop your full-stack Pages application locally", - (yargs) => { - return yargs - .positional("directory", { - type: "string", - demandOption: undefined, - description: "The directory of static assets to serve", - }) - .positional("command", { - type: "string", - demandOption: undefined, - description: "The proxy command to run", - }) - .options({ - local: { - type: "boolean", - default: true, - description: "Run on my machine", - }, - port: { - type: "number", - default: 8788, - description: "The port to listen on (serve from)", - }, - proxy: { - type: "number", - description: - "The port to proxy (where the static assets are served)", - }, - "script-path": { + return yargs + .command( + "dev [directory] [-- command]", + "🧑‍💻 Develop your full-stack Pages application locally", + (yargs) => { + return yargs + .positional("directory", { type: "string", - default: "_worker.js", - description: - "The location of the single Worker script if not using functions", - }, - binding: { - type: "array", - description: "Bind variable/secret (KEY=VALUE)", - alias: "b", - }, - kv: { - type: "array", - description: "KV namespace to bind", - alias: "k", - }, - do: { - type: "array", - description: "Durable Object to bind (NAME=CLASS)", - alias: "o", - }, - // TODO: Miniflare user options - }); - }, - async ({ - local, - directory, - port, - proxy: requestedProxyPort, - "script-path": singleWorkerScriptPath, - binding: bindings = [], - kv: kvs = [], - do: durableObjects = [], - "--": remaining = [], - }) => { - if (!local) { - console.error("Only local mode is supported at the moment."); - return; - } - - const functionsDirectory = "./functions"; - const usingFunctions = existsSync(functionsDirectory); + demandOption: undefined, + description: "The directory of static assets to serve", + }) + .positional("command", { + type: "string", + demandOption: undefined, + description: "The proxy command to run", + }) + .options({ + local: { + type: "boolean", + default: true, + description: "Run on my machine", + }, + port: { + type: "number", + default: 8788, + description: "The port to listen on (serve from)", + }, + proxy: { + type: "number", + description: + "The port to proxy (where the static assets are served)", + }, + "script-path": { + type: "string", + default: "_worker.js", + description: + "The location of the single Worker script if not using functions", + }, + binding: { + type: "array", + description: "Bind variable/secret (KEY=VALUE)", + alias: "b", + }, + kv: { + type: "array", + description: "KV namespace to bind", + alias: "k", + }, + do: { + type: "array", + description: "Durable Object to bind (NAME=CLASS)", + alias: "o", + }, + // TODO: Miniflare user options + }); + }, + async ({ + local, + directory, + port, + proxy: requestedProxyPort, + "script-path": singleWorkerScriptPath, + binding: bindings = [], + kv: kvs = [], + do: durableObjects = [], + "--": remaining = [], + }) => { + if (!local) { + console.error("Only local mode is supported at the moment."); + return; + } - const command = remaining as (string | number)[]; + const functionsDirectory = "./functions"; + const usingFunctions = existsSync(functionsDirectory); - let proxyPort: number | void; + const command = remaining as (string | number)[]; - if (directory === undefined) { - proxyPort = await spawnProxyProcess({ - port: requestedProxyPort, - command, - }); - if (proxyPort === undefined) return undefined; - } + let proxyPort: number | void; - let miniflareArgs: MiniflareOptions = {}; + if (directory === undefined) { + proxyPort = await spawnProxyProcess({ + port: requestedProxyPort, + command, + }); + if (proxyPort === undefined) return undefined; + } - let scriptReady = true; + let miniflareArgs: MiniflareOptions = {}; - if (usingFunctions) { - const scriptPath = join(tmpdir(), "./functionsWorker.js"); + let scriptReady = true; - console.log(`Compiling worker to "${scriptPath}"...`); + if (usingFunctions) { + const scriptPath = join(tmpdir(), "./functionsWorker.js"); - await buildFunctions({ - scriptPath, - functionsDirectory, - onEnd: () => { - scriptReady = true; - }, - }); + console.log(`Compiling worker to "${scriptPath}"...`); - watch([functionsDirectory], { - persistent: true, - }).on("all", async () => { await buildFunctions({ scriptPath, functionsDirectory, + sourcemap: true, + watch: true, onEnd: () => { scriptReady = true; }, }); - }); - miniflareArgs = { - scriptPath, - }; - } else { - const scriptPath = - directory !== undefined - ? join(directory, singleWorkerScriptPath) - : singleWorkerScriptPath; + watch([functionsDirectory], { + persistent: true, + }).on("all", async () => { + await buildFunctions({ + scriptPath, + functionsDirectory, + sourcemap: true, + watch: true, + onEnd: () => { + scriptReady = true; + }, + }); + }); - if (existsSync(scriptPath)) { miniflareArgs = { scriptPath, }; } else { - console.log("No functions. Shimming..."); - miniflareArgs = { - // TODO: The fact that these request/response hacks are necessary is ridiculous. - // We need to eliminate them from env.ASSETS.fetch (not sure if just local or prod as well) - script: ` + const scriptPath = + directory !== undefined + ? join(directory, singleWorkerScriptPath) + : singleWorkerScriptPath; + + if (existsSync(scriptPath)) { + miniflareArgs = { + scriptPath, + }; + } else { + console.log("No functions. Shimming..."); + miniflareArgs = { + // TODO: The fact that these request/response hacks are necessary is ridiculous. + // We need to eliminate them from env.ASSETS.fetch (not sure if just local or prod as well) + script: ` export default { async fetch(request, env, context) { const response = await env.ASSETS.fetch(request.url, request) return new Response(response.body, response) } }`, - }; + }; + } } - } - - // Defer importing miniflare until we really need it - const { Miniflare, Log, LogLevel } = await import("miniflare"); - const { Response, fetch } = await import("@miniflare/core"); - - // Should only be called if no proxyPort, using `assert.fail()` here - // means the type of `assetsFetch` is still `typeof fetch` - const assetsFetch = proxyPort - ? () => assert.fail() - : await generateAssetsFetch(directory); - const miniflare = new Miniflare({ - port, - watch: true, - modules: true, - - log: new Log(LogLevel.ERROR, { prefix: "pages" }), - logUnhandledRejections: true, - sourceMap: true, - kvNamespaces: kvs.map((kv) => kv.toString()), + // Defer importing miniflare until we really need it + const { Miniflare, Log, LogLevel } = await import("miniflare"); + const { Response, fetch } = await import("@miniflare/core"); + + // Should only be called if no proxyPort, using `assert.fail()` here + // means the type of `assetsFetch` is still `typeof fetch` + const assetsFetch = proxyPort + ? () => assert.fail() + : await generateAssetsFetch(directory); + const miniflare = new Miniflare({ + port, + watch: true, + modules: true, + + log: new Log(LogLevel.ERROR, { prefix: "pages" }), + logUnhandledRejections: true, + sourceMap: true, + + kvNamespaces: kvs.map((kv) => kv.toString()), + + durableObjects: Object.fromEntries( + durableObjects.map((durableObject) => + durableObject.toString().split("=") + ) + ), - durableObjects: Object.fromEntries( - durableObjects.map((durableObject) => - durableObject.toString().split("=") - ) - ), + // User bindings + bindings: { + ...Object.fromEntries( + bindings.map((binding) => binding.toString().split("=")) + ), + }, - // User bindings - bindings: { - ...Object.fromEntries( - bindings.map((binding) => binding.toString().split("=")) - ), - }, - - // env.ASSETS.fetch - serviceBindings: { - async ASSETS(request) { - if (proxyPort) { - try { - const url = new URL(request.url); - url.host = `127.0.0.1:${proxyPort}`; - return await fetch(url, request); - } catch (thrown) { - console.error(`Could not proxy request: ${thrown}`); - - // TODO: Pretty error page - return new Response( - `[wrangler] Could not proxy request: ${thrown}`, - { status: 502 } - ); - } - } else { - try { - return await assetsFetch(request); - } catch (thrown) { - console.error(`Could not serve static asset: ${thrown}`); - - // TODO: Pretty error page - return new Response( - `[wrangler] Could not serve static asset: ${thrown}`, - { status: 502 } - ); + // env.ASSETS.fetch + serviceBindings: { + async ASSETS(request) { + if (proxyPort) { + try { + const url = new URL(request.url); + url.host = `127.0.0.1:${proxyPort}`; + return await fetch(url, request); + } catch (thrown) { + console.error(`Could not proxy request: ${thrown}`); + + // TODO: Pretty error page + return new Response( + `[wrangler] Could not proxy request: ${thrown}`, + { status: 502 } + ); + } + } else { + try { + return await assetsFetch(request); + } catch (thrown) { + console.error(`Could not serve static asset: ${thrown}`); + + // TODO: Pretty error page + return new Response( + `[wrangler] Could not serve static asset: ${thrown}`, + { status: 502 } + ); + } } - } + }, }, - }, - kvPersist: true, - durableObjectsPersist: true, - cachePersist: true, + kvPersist: true, + durableObjectsPersist: true, + cachePersist: true, - ...miniflareArgs, - }); + ...miniflareArgs, + }); - // Wait for esbuild to finish building the script - while (!scriptReady) {} + // Wait for esbuild to finish building the script + while (!scriptReady) {} - try { - // `startServer` might throw if user code contains errors - const server = await miniflare.startServer(); - console.log(`Serving at http://127.0.0.1:${port}/`); + try { + // `startServer` might throw if user code contains errors + const server = await miniflare.startServer(); + console.log(`Serving at http://127.0.0.1:${port}/`); - if (process.env.BROWSER !== "none") { - await open(`http://127.0.0.1:${port}/`); - } + if (process.env.BROWSER !== "none") { + await open(`http://127.0.0.1:${port}/`); + } - EXIT_CALLBACKS.push(() => { - server.close(); - miniflare.dispose().catch((err) => miniflare.log.error(err)); - }); - } catch (e) { - miniflare.log.error(e); - EXIT("Could not start Miniflare.", 1); + EXIT_CALLBACKS.push(() => { + server.close(); + miniflare.dispose().catch((err) => miniflare.log.error(err)); + }); + } catch (e) { + miniflare.log.error(e); + EXIT("Could not start Miniflare.", 1); + } } - } - ); + ) + .command("functions", "Cloudflare Pages Functions", (yargs) => + yargs.command( + "build", + "Compile a folder of Cloudflare Pages Functions into a single Worker", + (yargs) => + yargs.options({ + "script-path": { + type: "string", + default: "_worker.js", + description: "The location of the output Worker script", + }, + minify: { + type: "boolean", + default: false, + description: "Minify the output Worker script", + }, + }), + async ({ "script-path": scriptPath, minify }) => { + const functionsDirectory = "./functions"; + + await buildFunctions({ + scriptPath, + functionsDirectory, + minify, + }); + } + ) + ); }; From 6d7a31d7105f7401020404a6cf04fef7cd03c0f8 Mon Sep 17 00:00:00 2001 From: Greg Brimble Date: Fri, 7 Jan 2022 13:55:47 +0000 Subject: [PATCH 2/3] Update .changeset/purple-planets-join.md Co-authored-by: Pete Bacon Darwin --- .changeset/purple-planets-join.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.changeset/purple-planets-join.md b/.changeset/purple-planets-join.md index a44cf2db9a92..b80c58fda45e 100644 --- a/.changeset/purple-planets-join.md +++ b/.changeset/purple-planets-join.md @@ -2,4 +2,6 @@ "wrangler": patch --- -Adds a new `wrangler pages functions build` command which takes the `functions` folder and compiles it into a single Worker. This was already done in `wrangler pages dev`, so this PR just exposes this build command for use in our build image, or for people who want to do it themselves. +Expose `wrangler pages functions build` command, which takes the `functions` folder and compiles it into a single Worker. + +This was already done in `wrangler pages dev`, so this change just exposes this build command for use in our build image, or for people who want to do it themselves. From 8cdefc3666c229a185d0924ee7cf7c8aa6edba55 Mon Sep 17 00:00:00 2001 From: Greg Brimble Date: Fri, 7 Jan 2022 14:30:27 +0000 Subject: [PATCH 3/3] Add sourcemap option --- packages/wrangler/src/pages.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/wrangler/src/pages.tsx b/packages/wrangler/src/pages.tsx index 5055149062ea..1c4fa3b8d0ee 100644 --- a/packages/wrangler/src/pages.tsx +++ b/packages/wrangler/src/pages.tsx @@ -945,14 +945,20 @@ export const pages: BuilderCallback = (yargs) => { default: false, description: "Minify the output Worker script", }, + sourcemap: { + type: "boolean", + default: false, + description: "Generate a sourcemap for the output Worker script", + }, }), - async ({ "script-path": scriptPath, minify }) => { + async ({ "script-path": scriptPath, minify, sourcemap }) => { const functionsDirectory = "./functions"; await buildFunctions({ scriptPath, functionsDirectory, minify, + sourcemap, }); } )