wrangler 0.0.0-e22f9d7 → 0.0.0-e2a26a0

package/src/config.ts

@@ -1,3 +1,5 @@
+import assert from "node:assert";
+
 /**
  * This is the static type definition for the configuration object.
  * It reflects the configuration that you can write in wrangler.toml,
@@ -79,7 +81,6 @@ export type Config = {
    *
    * @optional
    * @inherited
-   * @todo This could be an enum!
    */
   compatibility_flags?: string[];
 
@@ -268,10 +269,9 @@ export type Config = {
      * The location of your Worker script.
      *
      * @deprecated DO NOT use this (it's a holdover from wrangler 1.x). Either use the top level `entry` field, or pass the path to your entry file as a command line argument.
-     * @todo we should use a top level "entry" property instead
      * @breaking
      */
-    "entry-point": string;
+    "entry-point"?: string;
 
     /**
      * An exclusive list of .gitignore-style patterns that match file
@@ -280,7 +280,6 @@ export type Config = {
      *
      * @optional
      * @default `[]`
-     * @todo this needs to be implemented!
      */
     include?: string[];
 
@@ -291,7 +290,6 @@ export type Config = {
      *
      * @optional
      * @default `[]`
-     * @todo this needs to be implemented!
      */
     exclude?: string[];
   };
@@ -304,7 +302,6 @@ export type Config = {
    * @inherited
    * @default `{ crons: [] }`
    * @optional
-   * @todo can we use typescript for cron patterns?
    */
   triggers?: { crons: string[] };
 
@@ -389,7 +386,7 @@ export type Config = {
            *
            * @deprecated We infer the format automatically now.
            */
-          format: "service-worker";
+          format?: "service-worker";
 
           /**
            * The path to the Worker script. This should be replaced
@@ -412,7 +409,7 @@ export type Config = {
            *
            * @deprecated We infer the format automatically now.
            */
-          format: "modules";
+          format?: "modules";
 
           /**
            * The directory you wish to upload your modules from,
@@ -485,3 +482,160 @@ export async function validateConfig(
 
   return results;
 }
+
+/**
+ * Process the environments (`env`) specified in the `config`.
+ *
+ * The environments configuration is complicated since each environment is a customized version of the main config.
+ * Some of the configuration can be inherited from the main config, while other configuration must replace what is in the main config.
+ *
+ * This function ensures that each environment is set up correctly with inherited configuration, as necessary.
+ * It will log a warning if an environment is missing required configuration.
+ */
+export function normaliseAndValidateEnvironmentsConfig(config: Config) {
+  if (config.env == undefined) {
+    // There are no environments specified so there is nothing to do here.
+    return;
+  }
+
+  const environments = config.env;
+
+  for (const envKey of Object.keys(environments)) {
+    const environment = environments[envKey];
+
+    // Given how TOML works, there should never be an environment containing nothing.
+    // I.e. if there is a section in a TOML file, then the parser will create an object for it.
+    // But it may be possible in the future if we change how the configuration is stored.
+    assert(
+      environment,
+      `Environment ${envKey} is specified in the config but not defined.`
+    );
+
+    // Fall back on "inherited fields" from the config, if not specified in the environment.
+    const inheritedFields = [
+      "name",
+      "account_id",
+      "workers_dev",
+      "compatibility_date",
+      "compatibility_flags",
+      "zone_id",
+      "routes",
+      "route",
+      "jsx_factory",
+      "jsx_fragment",
+      "site",
+      "triggers",
+      "usage_model",
+    ];
+    for (const inheritedField of inheritedFields) {
+      if (config[inheritedField] !== undefined) {
+        if (environment[inheritedField] === undefined) {
+          environment[inheritedField] = config[inheritedField]; // TODO: - shallow or deep copy?
+        }
+      }
+    }
+
+    // Warn if there is a "required" field in the top level config that has not been specified specified in the environment.
+    // These required fields are `vars`, `durable_objects`, `kv_namespaces` and `experimental_services`.
+    // Each of them has different characteristics that need to be checked.
+
+    // `vars` is just an object
+    if (config.vars !== undefined) {
+      if (environment.vars === undefined) {
+        console.warn(
+          `In your configuration, "vars" exists at the top level, but not on "env.${envKey}".\n` +
+            `This is not what you probably want, since "vars" is not inherited by environments.\n` +
+            `Please add "vars" to "env.${envKey}".`
+        );
+      } else {
+        for (const varField of Object.keys(config.vars)) {
+          if (!(varField in environment.vars)) {
+            console.warn(
+              `In your configuration, "vars.${varField}" exists at the top level, but not on "env.${envKey}".\n` +
+                `This is not what you probably want, since "vars" is not inherited by environments.\n` +
+                `Please add "vars.${varField}" to "env.${envKey}".`
+            );
+          }
+        }
+      }
+    }
+
+    // `durable_objects` is an object containing a `bindings` array
+    if (config.durable_objects !== undefined) {
+      if (environment.durable_objects === undefined) {
+        console.warn(
+          `In your configuration, "durable_objects.bindings" exists at the top level, but not on "env.${envKey}".\n` +
+            `This is not what you probably want, since "durable_objects" is not inherited by environments.\n` +
+            `Please add "durable_objects.bindings" to "env.${envKey}".`
+        );
+      } else {
+        const envBindingNames = new Set(
+          environment.durable_objects.bindings.map((b) => b.name)
+        );
+        for (const bindingName of config.durable_objects.bindings.map(
+          (b) => b.name
+        )) {
+          if (!envBindingNames.has(bindingName)) {
+            console.warn(
+              `In your configuration, there is a durable_objects binding with name "${bindingName}" at the top level, but not on "env.${envKey}".\n` +
+                `This is not what you probably want, since "durable_objects" is not inherited by environments.\n` +
+                `Please add a binding for "${bindingName}" to "env.${envKey}.durable_objects.bindings".`
+            );
+          }
+        }
+      }
+    }
+
+    // `kv_namespaces` contains an array of namespace bindings
+    if (config.kv_namespaces !== undefined) {
+      if (environment.kv_namespaces === undefined) {
+        console.warn(
+          `In your configuration, "kv_namespaces" exists at the top level, but not on "env.${envKey}".\n` +
+            `This is not what you probably want, since "kv_namespaces" is not inherited by environments.\n` +
+            `Please add "kv_namespaces" to "env.${envKey}".`
+        );
+      } else {
+        const envBindings = new Set(
+          environment.kv_namespaces.map((kvNamespace) => kvNamespace.binding)
+        );
+        for (const bindingName of config.kv_namespaces.map(
+          (kvNamespace) => kvNamespace.binding
+        )) {
+          if (!envBindings.has(bindingName)) {
+            console.warn(
+              `In your configuration, there is a kv_namespaces with binding "${bindingName}" at the top level, but not on "env.${envKey}".\n` +
+                `This is not what you probably want, since "kv_namespaces" is not inherited by environments.\n` +
+                `Please add a binding for "${bindingName}" to "env.${envKey}.kv_namespaces".`
+            );
+          }
+        }
+      }
+    }
+
+    // `experimental_services` contains an array of namespace bindings
+    if (config.experimental_services !== undefined) {
+      if (environment.experimental_services === undefined) {
+        console.warn(
+          `In your configuration, "experimental_services" exists at the top level, but not on "env.${envKey}".\n` +
+            `This is not what you probably want, since "experimental_services" is not inherited by environments.\n` +
+            `Please add "experimental_services" to "env.${envKey}".`
+        );
+      } else {
+        const envBindingNames = new Set(
+          environment.experimental_services.map((service) => service.name)
+        );
+        for (const bindingName of config.experimental_services.map(
+          (service) => service.name
+        )) {
+          if (!envBindingNames.has(bindingName)) {
+            console.warn(
+              `In your configuration, there is a experimental_services with binding name "${bindingName}" at the top level, but not on "env.${envKey}".\n` +
+                `This is not what you probably want, since "experimental_services" is not inherited by environments.\n` +
+                `Please add a service for "${bindingName}" to "env.${envKey}.experimental_services".`
+            );
+          }
+        }
+      }
+    }
+  }
+}

package/src/dev.tsx

@@ -1,32 +1,32 @@
-import esbuild from "esbuild";
 import assert from "node:assert";
 import { spawn } from "node:child_process";
-import { readFile } from "node:fs/promises";
 import { existsSync } from "node:fs";
+import { readFile } from "node:fs/promises";
 import path from "node:path";
-import { Box, Text, useApp, useInput } from "ink";
 import { watch } from "chokidar";
 import clipboardy from "clipboardy";
 import commandExists from "command-exists";
-import { execa } from "execa";
-import fetch from "node-fetch";
+import * as esbuild from "esbuild";
+import { execaCommand } from "execa";
+import { Box, Text, useApp, useInput } from "ink";
 import open from "open";
 import React, { useState, useEffect, useRef } from "react";
 import { withErrorBoundary, useErrorHandler } from "react-error-boundary";
 import onExit from "signal-exit";
 import tmp from "tmp-promise";
-import type { DirectoryResult } from "tmp-promise";
+import { fetch } from "undici";
 
-import type { CfPreviewToken } from "./api/preview";
-import type { CfModule } from "./api/worker";
 import { createWorker } from "./api/worker";
-import type { CfWorkerInit } from "./api/worker";
 
 import useInspector from "./inspect";
 import makeModuleCollector from "./module-collection";
-import { usePreviewServer } from "./proxy";
+import { usePreviewServer, waitForPortToBeAvailable } from "./proxy";
 import { syncAssets } from "./sites";
 import { getAPIToken } from "./user";
+import type { CfPreviewToken } from "./api/preview";
+import type { CfModule, CfWorkerInit } from "./api/worker";
+import type { AssetPaths } from "./sites";
+import type { DirectoryResult } from "tmp-promise";
 
 type CfScriptFormat = undefined | "modules" | "service-worker";
 
@@ -39,9 +39,10 @@ export type DevProps = {
   initialMode: "local" | "remote";
   jsxFactory: undefined | string;
   jsxFragment: undefined | string;
+  enableLocalPersistence: boolean;
   bindings: CfWorkerInit["bindings"];
   public: undefined | string;
-  site: undefined | string;
+  assetPaths: undefined | AssetPaths;
   compatibilityDate: undefined | string;
   compatibilityFlags: undefined | string[];
   usageModel: undefined | "bundled" | "unbound";
@@ -50,6 +51,7 @@ export type DevProps = {
     cwd?: undefined | string;
     watch_dir?: undefined | string;
   };
+  env: string | undefined;
 };
 
 function Dev(props: DevProps): JSX.Element {
@@ -98,9 +100,10 @@ function Dev(props: DevProps): JSX.Element {
           bundle={bundle}
           format={props.format}
           bindings={props.bindings}
-          site={props.site}
+          assetPaths={props.assetPaths}
           public={props.public}
           port={port}
+          enableLocalPersistence={props.enableLocalPersistence}
         />
       ) : (
         <Remote
@@ -110,12 +113,13 @@ function Dev(props: DevProps): JSX.Element {
           accountId={props.accountId}
           apiToken={apiToken}
           bindings={props.bindings}
-          site={props.site}
+          assetPaths={props.assetPaths}
           public={props.public}
           port={port}
           compatibilityDate={props.compatibilityDate}
           compatibilityFlags={props.compatibilityFlags}
           usageModel={props.usageModel}
+          env={props.env}
         />
       )}
       <Box borderStyle="round" paddingLeft={1} paddingRight={1}>
@@ -136,7 +140,7 @@ function Remote(props: {
   bundle: EsbuildBundle | undefined;
   format: CfScriptFormat;
   public: undefined | string;
-  site: undefined | string;
+  assetPaths: undefined | AssetPaths;
   port: number;
   accountId: undefined | string;
   apiToken: undefined | string;
@@ -144,6 +148,7 @@ function Remote(props: {
   compatibilityDate: string | undefined;
   compatibilityFlags: undefined | string[];
   usageModel: undefined | "bundled" | "unbound";
+  env: string | undefined;
 }) {
   assert(props.accountId, "accountId is required");
   assert(props.apiToken, "apiToken is required");
@@ -155,11 +160,12 @@ function Remote(props: {
     accountId: props.accountId,
     apiToken: props.apiToken,
     bindings: props.bindings,
-    sitesFolder: props.site,
+    assetPaths: props.assetPaths,
     port: props.port,
     compatibilityDate: props.compatibilityDate,
     compatibilityFlags: props.compatibilityFlags,
     usageModel: props.usageModel,
+    env: props.env,
   });
 
   usePreviewServer({
@@ -180,16 +186,20 @@ function Local(props: {
   bundle: EsbuildBundle | undefined;
   format: CfScriptFormat;
   bindings: CfWorkerInit["bindings"];
+  assetPaths: undefined | AssetPaths;
   public: undefined | string;
-  site: undefined | string;
   port: number;
+  enableLocalPersistence: boolean;
 }) {
   const { inspectorUrl } = useLocalWorker({
     name: props.name,
     bundle: props.bundle,
     format: props.format,
     bindings: props.bindings,
+    assetPaths: props.assetPaths,
+    public: props.public,
     port: props.port,
+    enableLocalPersistence: props.enableLocalPersistence,
   });
   useInspector({ inspectorUrl, port: 9229, logToTerminal: false });
   return null;
@@ -200,10 +210,13 @@ function useLocalWorker(props: {
   bundle: EsbuildBundle | undefined;
   format: CfScriptFormat;
   bindings: CfWorkerInit["bindings"];
+  assetPaths: undefined | AssetPaths;
+  public: undefined | string;
   port: number;
+  enableLocalPersistence: boolean;
 }) {
   // TODO: pass vars via command line
-  const { bundle, format, bindings, port } = props;
+  const { bundle, format, bindings, port, assetPaths } = props;
   const local = useRef<ReturnType<typeof spawn>>();
   const removeSignalExitListener = useRef<() => void>();
   const [inspectorUrl, setInspectorUrl] = useState<string | undefined>();
@@ -221,6 +234,13 @@ function useLocalWorker(props: {
         return;
       }
 
+      await waitForPortToBeAvailable(port, { retryPeriod: 200, timeout: 2000 });
+      if (props.public) {
+        throw new Error(
+          '⎔ A "public" folder is not yet supported in local mode.'
+        );
+      }
+
       console.log("⎔ Starting a local server...");
       // TODO: just use execa for this
       local.current = spawn("node", [
@@ -237,9 +257,23 @@ function useLocalWorker(props: {
         path.join(__dirname, "../miniflare-config-stubs/package.empty.json"),
         "--port",
         port.toString(),
-        "--kv-persist",
-        "--cache-persist",
-        "--do-persist",
+        ...(assetPaths
+          ? [
+              "--site",
+              assetPaths.baseDirectory,
+              ...assetPaths.includePatterns.map((pattern) => [
+                "--site-include",
+                pattern,
+              ]),
+              ...assetPaths.excludePatterns.map((pattern) => [
+                "--site-exclude",
+                pattern,
+              ]),
+            ].flatMap((x) => x)
+          : []),
+        ...(props.enableLocalPersistence
+          ? ["--kv-persist", "--cache-persist", "--do-persist"]
+          : []),
         ...Object.entries(bindings.vars || {}).flatMap(([key, value]) => {
           return ["--binding", `${key}=${value}`];
         }),
@@ -318,6 +352,9 @@ function useLocalWorker(props: {
     bindings.durable_objects?.bindings,
     bindings.kv_namespaces,
     bindings.vars,
+    props.enableLocalPersistence,
+    assetPaths,
+    props.public,
   ]);
   return { inspectorUrl };
 }
@@ -345,7 +382,7 @@ function useTmpDir(): string | undefined {
     return () => {
       dir.cleanup().catch(() => {
         // extremely unlikely,
-        // but it's 2021 after all
+        // but it's 2022 after all
         console.error("failed to cleanup tmp dir");
       });
     };
@@ -370,20 +407,21 @@ function useCustomBuild(
     if (!command) return;
     let cmd, interval;
     console.log("running:", command);
-    const commandPieces = command.split(" ");
-    cmd = execa(commandPieces[0], commandPieces.slice(1), {
+    cmd = execaCommand(command, {
       ...(cwd && { cwd }),
+      shell: true,
       stderr: "inherit",
       stdout: "inherit",
     });
     if (watch_dir) {
       watch(watch_dir, { persistent: true, ignoreInitial: true }).on(
         "all",
-        (_event, _path) => {
-          console.log(`The file ${path} changed, restarting build...`);
+        (_event, filePath) => {
+          console.log(`The file ${filePath} changed, restarting build...`);
           cmd.kill();
-          cmd = execa(commandPieces[0], commandPieces.slice(1), {
+          cmd = execaCommand(command, {
             ...(cwd && { cwd }),
+            shell: true,
             stderr: "inherit",
             stdout: "inherit",
           });
@@ -454,6 +492,9 @@ function useEsbuild(props: {
         sourcemap: true,
         loader: {
           ".js": "jsx",
+          ".html": "text",
+          ".pem": "text",
+          ".txt": "text",
         },
         ...(jsxFactory && { jsxFactory }),
         ...(jsxFragment && { jsxFragment }),
@@ -522,11 +563,12 @@ function useWorker(props: {
   accountId: string;
   apiToken: string;
   bindings: CfWorkerInit["bindings"];
-  sitesFolder: undefined | string;
+  assetPaths: undefined | AssetPaths;
   port: number;
   compatibilityDate: string | undefined;
   compatibilityFlags: string[] | undefined;
   usageModel: undefined | "bundled" | "unbound";
+  env: string | undefined;
 }): CfPreviewToken | undefined {
   const {
     name,
@@ -536,7 +578,7 @@ function useWorker(props: {
     accountId,
     apiToken,
     bindings,
-    sitesFolder,
+    assetPaths,
     compatibilityDate,
     compatibilityFlags,
     usageModel,
@@ -568,32 +610,34 @@ function useWorker(props: {
       if (!startedRef.current) {
         startedRef.current = true;
       } else {
-        console.log("⎔ Detected changes, restarting server...");
+        console.log("⎔ Detected changes, restarted server.");
+      }
+
+      const assets = await syncAssets(
+        accountId,
+        name || path.basename(bundle.path),
+        assetPaths,
+        true,
+        props.env
+      ); // TODO: cancellable?
+
+      const workerType = format || bundle.type === "esm" ? "esm" : "commonjs";
+      let content = await readFile(bundle.path, "utf-8");
+      if (workerType !== "esm" && assets.manifest) {
+        content = `const __STATIC_CONTENT_MANIFEST = ${JSON.stringify(
+          assets.manifest
+        )};\n${content}`;
       }
 
-      const assets = sitesFolder
-        ? await syncAssets(
-            accountId,
-            path.basename(bundle.path),
-            sitesFolder,
-            true,
-            undefined // TODO: env
-          )
-        : {
-            manifest: undefined,
-            namespace: undefined,
-          }; // TODO: cancellable?
-
-      const content = await readFile(bundle.path, "utf-8");
       const init: CfWorkerInit = {
         name,
         main: {
           name: path.basename(bundle.path),
-          type: format || bundle.type === "esm" ? "esm" : "commonjs",
+          type: workerType,
           content,
         },
         modules: modules.concat(
-          assets.manifest
+          assets.manifest && workerType === "esm"
             ? {
                 name: "__STATIC_CONTENT_MANIFEST",
                 content: JSON.stringify(assets.manifest),
@@ -633,12 +677,13 @@ function useWorker(props: {
     accountId,
     apiToken,
     port,
-    sitesFolder,
+    assetPaths,
     compatibilityDate,
     compatibilityFlags,
     usageModel,
     bindings,
     modules,
+    props.env,
   ]);
   return token;
 }
@@ -736,29 +781,34 @@ function useHotkeys(initial: useHotkeysInitialState, port: number) {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       key
     ) => {
-      switch (input) {
-        case "b": // open browser
+      switch (input.toLowerCase()) {
+        // open browser
+        case "b":
           await open(`http://localhost:${port}/`);
           break;
-        case "d": // toggle inspector
+        // toggle inspector
+        case "d":
           await open(
             `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:9229/ws`
           );
           break;
-        case "s": // toggle tunnel
+        // toggle tunnel
+        case "s":
           setToggles((previousToggles) => ({
             ...previousToggles,
             tunnel: !previousToggles.tunnel,
           }));
           break;
-        case "l": // toggle local
+        // toggle local
+        case "l":
           setToggles((previousToggles) => ({
             ...previousToggles,
             local: !previousToggles.local,
           }));
           break;
-        case "q": // shut down
-        case "x": // shut down
+        // shut down
+        case "q":
+        case "x":
           process.exit(0);
           break;
         default:

package/src/dialogs.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { useState } from "react";
 import { Box, Text, useInput, render } from "ink";
 import TextInput from "ink-text-input";
+import * as React from "react";
+import { useState } from "react";
 type ConfirmProps = {
   text: string;
   onConfirm: (answer: boolean) => void;