cloudflare · GregBrimble · May 5, 2022 · May 5, 2022 · May 5, 2022
diff --git a/.changeset/olive-oranges-bathe.md b/.changeset/olive-oranges-bathe.md
@@ -0,0 +1,13 @@
+---
+"wrangler": patch
+---
+
+feat: Adds 'assets:' loader for Pages Functions.
+
+This lets users and Plugin authors include a folder of static assets in Pages Functions.
+
+```ts
+export { onRequest } from "assets:../folder/of/static/assets";
+```
+
+More information in [our docs](https://developers.cloudflare.com/pages/platform/functions/plugins/).
@@ -0,0 +1 @@
+cdn-cgi/
@@ -0,0 +1 @@
+export { onRequest } from "assets:../../static-assets";
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Static asset</title>
+  </head>
+  <body>
+    <h1>Hello from an imported static asset!</h1>
+  </body>
+</html>
@@ -109,4 +109,19 @@ describe("Pages Functions", () => {
     text = await response.text();
     expect(text).toContain("I'm a fixed response");
   });
+
+  it("can import static assets", async () => {
+    let response = await waitUntilReady("http://localhost:8789/static");
+    let text = await response.text();
+    expect(text).toContain("<h1>Hello from an imported static asset!</h1>");
+
+    // from a Plugin
+    response = await waitUntilReady(
+      "http://localhost:8789/mounted-plugin/static"
+    );
+    text = await response.text();
+    expect(text).toContain(
+      "<h1>Hello from a static asset brought from a Plugin!</h1>"
+    );
+  });
 });
@@ -0,0 +1 @@
+export { onRequest } from "assets:../public";
@@ -7,7 +7,8 @@
   "files": [
     "index.js",
     "index.d.ts",
-    "tsconfig.json"
+    "tsconfig.json",
+    "public/"
   ],
   "scripts": {
     "build": "npx wrangler pages functions build --plugin --outfile=index.js"

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Static asset from a Plugin!</title>
+  </head>
+  <body>
+    <h1>Hello from a static asset brought from a Plugin!</h1>
+  </body>
+</html>
diff --git a/packages/wrangler/package.json b/packages/wrangler/package.json
@@ -41,6 +41,7 @@
     "blake3-wasm": "^2.1.5",
     "esbuild": "0.14.34",
     "miniflare": "2.4.0",
+    "nanoid": "^3.3.3",
     "path-to-regexp": "^6.2.0",
     "selfsigned": "^2.0.1",
     "semiver": "^1.1.0",

@@ -1,4 +1,5 @@
-import { resolve } from "node:path";
+import { access, lstat } from "node:fs/promises";
+import { dirname, relative, resolve } from "node:path";
 import { build } from "esbuild";
 
 type Options = {
@@ -50,6 +51,42 @@ export function buildPlugin({
           });
         },
       },
+      {
+        name: "Assets",
+        setup(pluginBuild) {
+          if (pluginBuild.initialOptions.outfile) {
+            const outdir = dirname(pluginBuild.initialOptions.outfile);
+
+            pluginBuild.onResolve({ filter: /^assets:/ }, async (args) => {
+              const directory = resolve(
+                args.resolveDir,
+                args.path.slice("assets:".length)
+              );
+
+              const exists = await access(directory)
+                .then(() => true)
+                .catch(() => false);
+
+              const isDirectory =
+                exists && (await lstat(directory)).isDirectory();
+
+              if (!isDirectory) {
+                return {
+                  errors: [
+                    {
+                      text: `'${directory}' does not exist or is not a directory.`,
+                    },
+                  ],
+                };
+              }
+
+              const path = `assets:./${relative(outdir, directory)}`;
+
+              return { path, external: true, namespace: "assets" };
+            });
+          }
+        },
+      },
     ],
   });
 }
@@ -1,5 +1,7 @@
-import path from "node:path";
+import { access, cp, lstat, rm } from "node:fs/promises";
+import { join, resolve } from "node:path";
 import { build } from "esbuild";
+import { nanoid } from "nanoid";
 
 type Options = {
   routesModule: string;
@@ -9,6 +11,7 @@ type Options = {
   fallbackService?: string;
   watch?: boolean;
   onEnd?: () => void;
+  buildOutputDirectory?: string;
 };
 
 export function buildWorker({
@@ -19,11 +22,10 @@ export function buildWorker({
   fallbackService = "ASSETS",
   watch = false,
   onEnd = () => {},
+  buildOutputDirectory,
 }: Options) {
   return build({
-    entryPoints: [
-      path.resolve(__dirname, "../pages/functions/template-worker.ts"),
-    ],
+    entryPoints: [resolve(__dirname, "../pages/functions/template-worker.ts")],
     inject: [routesModule],
     bundle: true,
     format: "esm",
@@ -57,6 +59,80 @@ export function buildWorker({
           });
         },
       },
+      {
+        name: "Assets",
+        setup(pluginBuild) {
+          const identifiers = new Map<string, string>();
+
+          pluginBuild.onResolve({ filter: /^assets:/ }, async (args) => {
+            const directory = resolve(
+              args.resolveDir,
+              args.path.slice("assets:".length)
+            );
+
+            const exists = await access(directory)
+              .then(() => true)
+              .catch(() => false);
+
+            const isDirectory =
+              exists && (await lstat(directory)).isDirectory();
+
+            if (!isDirectory) {
+              return {
+                errors: [
+                  {
+                    text: `'${directory}' does not exist or is not a directory.`,
+                  },
+                ],
+              };
+            }
+
+            // TODO: Consider hashing the contents rather than using a unique identifier every time?
+            identifiers.set(directory, nanoid());
+            if (!buildOutputDirectory) {
+              console.warn(
+                "You're attempting to import static assets as part of your Pages Functions, but have not specified a directory in which to put them. You must use 'wrangler pages dev <directory>' rather than 'wrangler pages dev -- <command>' to import static assets in Functions."
+              );
+            }
+            return { path: directory, namespace: "assets" };
+          });
+
+          pluginBuild.onLoad(
+            { filter: /.*/, namespace: "assets" },
+            async (args) => {
+              const identifier = identifiers.get(args.path);
+
+              if (buildOutputDirectory) {
+                const staticAssetsOutputDirectory = join(
+                  buildOutputDirectory,
+                  "cdn-cgi",
+                  "pages-plugins",
+                  identifier as string
+                );
+                await rm(staticAssetsOutputDirectory, {
+                  force: true,
+                  recursive: true,
+                });
+                await cp(args.path, staticAssetsOutputDirectory, {
+                  force: true,
+                  recursive: true,
+                });
+
+                return {
+                  // 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] || "/";
+                    url.pathname = '/cdn-cgi/pages-plugins/${identifier}' + relativePathname
+                    request = new Request(url.toString(), request)
+                    return env.ASSETS.fetch(request)
+                  }`,
+                };
+              }
+            }
+          );
+        },
+      },
     ],
   });
 }
@@ -4,7 +4,7 @@ import { execSync, spawn } from "node:child_process";
 import { existsSync, lstatSync, readFileSync, writeFileSync } from "node:fs";
 import { readdir, readFile, stat } from "node:fs/promises";
 import { tmpdir } from "node:os";
-import { join, sep } from "node:path";
+import { dirname, join, sep } from "node:path";
 import { cwd } from "node:process";
 import { URL } from "node:url";
 import { hash } from "blake3-wasm";
@@ -719,6 +719,7 @@ async function buildFunctions({
   watch = false,
   onEnd,
   plugin = false,
+  buildOutputDirectory,
 }: {
   outfile: string;
   outputConfigPath?: string;
@@ -729,6 +730,7 @@ async function buildFunctions({
   watch?: boolean;
   onEnd?: () => void;
   plugin?: boolean;
+  buildOutputDirectory?: string;
 }) {
   RUNNING_BUILDERS.forEach(
     (runningBuilder) => runningBuilder.stop && runningBuilder.stop()
@@ -776,6 +778,7 @@ async function buildFunctions({
         fallbackService,
         watch,
         onEnd,
+        buildOutputDirectory,
       })
     );
   }
@@ -1004,6 +1007,23 @@ const createDeployment: CommandModule<
       }
     }
 
+    let builtFunctions: string | undefined = undefined;
+    const functionsDirectory = join(cwd(), "functions");
+    if (existsSync(functionsDirectory)) {
+      const outfile = join(tmpdir(), "./functionsWorker.js");
+
+      await new Promise((resolve) =>
+        buildFunctions({
+          outfile,
+          functionsDirectory,
+          onEnd: () => resolve(null),
+          buildOutputDirectory: dirname(outfile),
+        })
+      );
+
+      builtFunctions = readFileSync(outfile, "utf-8");
+    }
+
     type File = {
       content: Buffer;
       metadata: Metadata;
@@ -1169,22 +1189,6 @@ const createDeployment: CommandModule<
       formData.append("commit_dirty", commitDirty);
     }
 
-    let builtFunctions: string | undefined = undefined;
-    const functionsDirectory = join(cwd(), "functions");
-    if (existsSync(functionsDirectory)) {
-      const outfile = join(tmpdir(), "./functionsWorker.js");
-
-      await new Promise((resolve) =>
-        buildFunctions({
-          outfile,
-          functionsDirectory,
-          onEnd: () => resolve(null),
-        })
-      );
-
-      builtFunctions = readFileSync(outfile, "utf-8");
-    }
-
     let _headers: string | undefined,
       _redirects: string | undefined,
       _workerJS: string | undefined;
@@ -1351,6 +1355,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
               sourcemap: true,
               watch: true,
               onEnd: () => scriptReadyResolve(),
+              buildOutputDirectory: directory,
             });
           } catch {}
 
@@ -1364,6 +1369,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
               sourcemap: true,
               watch: true,
               onEnd: () => scriptReadyResolve(),
+              buildOutputDirectory: directory,
             });
           });
 
@@ -1591,6 +1597,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
             fallbackService,
             watch,
             plugin,
+            buildOutputDirectory: dirname(outfile),
           });
         }
       )
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { onRequest } from "assets:../../static-assets";