wrangler 0.0.0-e3cab74 → 0.0.0-e3e3243

package/src/inspect.ts

@@ -5,6 +5,7 @@ import { URL } from "node:url";
 import { useEffect, useRef, useState } from "react";
 import WebSocket, { WebSocketServer } from "ws";
 import { version } from "../package.json";
+import { waitForPortToBeAvailable } from "./proxy";
 import type Protocol from "devtools-protocol";
 import type { IncomingMessage, Server, ServerResponse } from "node:http";
 import type { MessageEvent } from "ws";
@@ -153,7 +154,14 @@ export default function useInspector(props: InspectorProps) {
    * of the component lifecycle. Convenient.
    */
   useEffect(() => {
-    server.listen(props.port);
+    async function startInspectorProxy() {
+      await waitForPortToBeAvailable(props.port, {
+        retryPeriod: 200,
+        timeout: 2000,
+      });
+      server.listen(props.port);
+    }
+    startInspectorProxy().catch((err) => console.error(err));
     return () => {
       server.close();
       // Also disconnect any open websockets/devtools connections

package/src/intl-polyfill.d.ts

@@ -0,0 +1,139 @@
+/**
+ * TODO Remove once https://github.com/microsoft/TypeScript/pull/47254 lands
+ */
+declare namespace Intl {
+  interface DateTimeFormatOptions {
+    formatMatcher?: "basic" | "best fit" | "best fit" | undefined;
+    dateStyle?: "full" | "long" | "medium" | "short" | undefined;
+    timeStyle?: "full" | "long" | "medium" | "short" | undefined;
+    dayPeriod?: "narrow" | "short" | "long" | undefined;
+    fractionalSecondDigits?: 0 | 1 | 2 | 3 | undefined;
+  }
+
+  interface ResolvedDateTimeFormatOptions {
+    formatMatcher?: "basic" | "best fit" | "best fit";
+    dateStyle?: "full" | "long" | "medium" | "short";
+    timeStyle?: "full" | "long" | "medium" | "short";
+    hourCycle?: "h11" | "h12" | "h23" | "h24";
+    dayPeriod?: "narrow" | "short" | "long";
+    fractionalSecondDigits?: 0 | 1 | 2 | 3;
+  }
+
+  interface NumberFormat {
+    formatRange(startDate: number | bigint, endDate: number | bigint): string;
+    formatRangeToParts(
+      startDate: number | bigint,
+      endDate: number | bigint
+    ): NumberFormatPart[];
+  }
+
+  /**
+   * The locale matching algorithm to use.
+   *
+   * [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation).
+   */
+  type ListFormatLocaleMatcher = "lookup" | "best fit";
+
+  /**
+   * The format of output message.
+   *
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#parameters).
+   */
+  type ListFormatType = "conjunction" | "disjunction" | "unit";
+
+  /**
+   * The length of the formatted message.
+   *
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#parameters).
+   */
+  type ListFormatStyle = "long" | "short" | "narrow";
+
+  /**
+   * An object with some or all properties of the `Intl.ListFormat` constructor `options` parameter.
+   *
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#parameters).
+   */
+  interface ListFormatOptions {
+    /** The locale matching algorithm to use. For information about this option, see [Intl page](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation). */
+    localeMatcher?: ListFormatLocaleMatcher;
+    /** The format of output message. */
+    type?: ListFormatType;
+    /** The length of the internationalized message. */
+    style?: ListFormatStyle;
+  }
+
+  interface ListFormat {
+    /**
+     * Returns a string with a language-specific representation of the list.
+     *
+     * @param list - An iterable object, such as an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array).
+     *
+     * @throws `TypeError` if `list` includes something other than the possible values.
+     *
+     * @returns {string} A language-specific formatted string representing the elements of the list.
+     *
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format).
+     */
+    format(list: Iterable<string>): string;
+
+    /**
+     * Returns an Array of objects representing the different components that can be used to format a list of values in a locale-aware fashion.
+     *
+     * @param list - An iterable object, such as an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), to be formatted according to a locale.
+     *
+     * @throws `TypeError` if `list` includes something other than the possible values.
+     *
+     * @returns {{ type: "element" | "literal", value: string; }[]} An Array of components which contains the formatted parts from the list.
+     *
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/formatToParts).
+     */
+    formatToParts(
+      list: Iterable<string>
+    ): { type: "element" | "literal"; value: string }[];
+  }
+
+  const ListFormat: {
+    prototype: ListFormat;
+
+    /**
+     * Creates [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat) objects that
+     * enable language-sensitive list formatting.
+     *
+     * @param locales - A string with a [BCP 47 language tag](http://tools.ietf.org/html/rfc5646), or an array of such strings.
+     *  For the general form and interpretation of the `locales` argument,
+     *  see the [`Intl` page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
+     *
+     * @param options - An [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#parameters)
+     *  with some or all options of `ListFormatOptions`.
+     *
+     * @returns [Intl.ListFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat) object.
+     *
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat).
+     */
+    new (
+      locales?: BCP47LanguageTag | BCP47LanguageTag[],
+      options?: ListFormatOptions
+    ): ListFormat;
+
+    /**
+     * Returns an array containing those of the provided locales that are
+     * supported in list formatting without having to fall back to the runtime's default locale.
+     *
+     * @param locales - A string with a [BCP 47 language tag](http://tools.ietf.org/html/rfc5646), or an array of such strings.
+     *  For the general form and interpretation of the `locales` argument,
+     *  see the [`Intl` page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
+     *
+     * @param options - An [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supportedLocalesOf#parameters).
+     *  with some or all possible options.
+     *
+     * @returns An array of strings representing a subset of the given locale tags that are supported in list
+     *  formatting without having to fall back to the runtime's default locale.
+     *
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supportedLocalesOf).
+     */
+    supportedLocalesOf(
+      locales: BCP47LanguageTag | BCP47LanguageTag[],
+      options?: Pick<ListFormatOptions, "localeMatcher">
+    ): BCP47LanguageTag[];
+  };
+}

package/src/{kv.tsx → kv.ts}

@@ -1,11 +1,16 @@
 import { URLSearchParams } from "node:url";
 import { fetchListResult, fetchResult, fetchKVGetValue } from "./cfetch";
-import type { Config, Environment } from "./config";
+import type { Config } from "./config";
+
+/** The largest number of kv items we can pass to the API in a single request. */
+const API_MAX = 10000;
+// The const below are halved from the API's true capacity to help avoid
+// hammering it with large requests.
+const BATCH_KEY_MAX = API_MAX / 2;
 
 type KvArgs = {
   binding?: string;
   "namespace-id"?: string;
-  env?: string;
   preview?: boolean;
 };
 
@@ -90,26 +95,64 @@ export async function listNamespaceKeys(
   );
 }
 
+/**
+ * Information about a key-value pair, including its "metadata" fields.
+ */
+export interface KeyValue {
+  key: string;
+  value: string;
+  expiration?: number;
+  expiration_ttl?: number;
+  metadata?: object;
+  base64?: boolean;
+}
+
+const KeyValueKeys = new Set([
+  "key",
+  "value",
+  "expiration",
+  "expiration_ttl",
+  "metadata",
+  "base64",
+]);
+
+/**
+ * Is the given object a valid `KeyValue` type?
+ */
+export function isKeyValue(keyValue: object): keyValue is KeyValue {
+  const props = Object.keys(keyValue);
+  if (!props.includes("key") || !props.includes("value")) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Get all the properties on the `keyValue` that are not expected.
+ */
+export function unexpectedKeyValueProps(keyValue: KeyValue): string[] {
+  const props = Object.keys(keyValue);
+  return props.filter((prop) => !KeyValueKeys.has(prop));
+}
+
 export async function putKeyValue(
   accountId: string,
   namespaceId: string,
-  key: string,
-  value: string,
-  args?: { expiration?: number; expiration_ttl?: number }
+  keyValue: KeyValue
 ) {
   let searchParams: URLSearchParams | undefined;
-  if (args) {
+  if (keyValue.expiration || keyValue.expiration_ttl) {
     searchParams = new URLSearchParams();
-    if (args.expiration) {
-      searchParams.set("expiration", `${args.expiration}`);
+    if (keyValue.expiration) {
+      searchParams.set("expiration", `${keyValue.expiration}`);
     }
-    if (args.expiration_ttl) {
-      searchParams.set("expiration_ttl", `${args.expiration_ttl}`);
+    if (keyValue.expiration_ttl) {
+      searchParams.set("expiration_ttl", `${keyValue.expiration_ttl}`);
     }
   }
   return await fetchResult(
-    `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/values/${key}`,
-    { method: "PUT", body: value },
+    `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/values/${keyValue.key}`,
+    { method: "PUT", body: keyValue.value },
     searchParams
   );
 }
@@ -125,36 +168,56 @@ export async function getKeyValue(
 export async function putBulkKeyValue(
   accountId: string,
   namespaceId: string,
-  keyvalueStr: string
+  keyValues: KeyValue[],
+  progressCallback: (index: number, total: number) => void
 ) {
-  return await fetchResult(
-    `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/bulk`,
-    {
-      method: "PUT",
-      body: keyvalueStr,
-      headers: { "Content-Type": "application/json" },
+  for (let index = 0; index < keyValues.length; index += BATCH_KEY_MAX) {
+    if (progressCallback && keyValues.length > BATCH_KEY_MAX) {
+      progressCallback(index, keyValues.length);
     }
-  );
+
+    await fetchResult(
+      `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/bulk`,
+      {
+        method: "PUT",
+        body: JSON.stringify(keyValues.slice(index, index + BATCH_KEY_MAX)),
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+  if (progressCallback && keyValues.length > BATCH_KEY_MAX) {
+    progressCallback(keyValues.length, keyValues.length);
+  }
 }
 
 export async function deleteBulkKeyValue(
   accountId: string,
   namespaceId: string,
-  keyStr: string
+  keys: string[],
+  progressCallback: (index: number, total: number) => void
 ) {
-  return await fetchResult(
-    `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/bulk`,
-    {
-      method: "DELETE",
-      body: keyStr,
-      headers: { "Content-Type": "application/json" },
+  for (let index = 0; index < keys.length; index += BATCH_KEY_MAX) {
+    if (progressCallback && keys.length > BATCH_KEY_MAX) {
+      progressCallback(index, keys.length);
     }
-  );
+
+    await fetchResult(
+      `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/bulk`,
+      {
+        method: "DELETE",
+        body: JSON.stringify(keys.slice(index, index + BATCH_KEY_MAX)),
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+  if (progressCallback && keys.length > BATCH_KEY_MAX) {
+    progressCallback(keys.length, keys.length);
+  }
 }
 
 export function getNamespaceId(
-  { preview, binding, "namespace-id": namespaceId, env }: KvArgs,
-  configOrEnv: Config | Environment | undefined
+  { preview, binding, "namespace-id": namespaceId }: KvArgs,
+  config: Config
 ): string {
   // nice
   if (namespaceId) {
@@ -164,45 +227,26 @@ export function getNamespaceId(
   // begin pre-flight checks
 
   // `--binding` is only valid if there's a wrangler configuration.
-  if (binding && !configOrEnv) {
+  if (binding && !config) {
     throw new Error("--binding specified, but no config file was found.");
   }
 
   // there's no config. abort here
-  if (!configOrEnv) {
+  if (!config) {
     throw new Error(
       "Failed to find a config file.\n" +
         "Either use --namespace-id to upload directly or create a configuration file with a binding."
     );
   }
 
-  // they want to use an environment, actually
-  if (env) {
-    if (!("env" in configOrEnv) || !configOrEnv.env[env]) {
-      throw new Error(
-        `Failed to find environment "${env}" in configuration file!`
-      );
-    }
-    return getNamespaceId(
-      {
-        binding,
-        "namespace-id": namespaceId,
-        preview,
-      },
-      configOrEnv.env[env]
-    );
-  }
-
   // there's no KV namespaces
-  if (!configOrEnv.kv_namespaces || configOrEnv.kv_namespaces.length === 0) {
+  if (!config.kv_namespaces || config.kv_namespaces.length === 0) {
     throw new Error(
       "No KV Namespaces configured! Either use --namespace-id to upload directly or add a KV namespace to your wrangler config file."
     );
   }
 
-  const namespace = configOrEnv.kv_namespaces.find(
-    (ns) => ns.binding === binding
-  );
+  const namespace = config.kv_namespaces.find((ns) => ns.binding === binding);
 
   // we couldn't find a namespace with that binding
   if (!namespace) {

package/src/miniflare-cli/README.md

@@ -0,0 +1,30 @@
+# Custom Miniflare CLI
+
+This directory contains a simple wrapper around the programmatic Miniflare API,
+which Wrangler spawns when running `wrangler dev` in local mode.
+
+## Building
+
+This CLI is built at the same time as Wrangler by running
+
+```
+npm run -w wrangler build
+```
+
+The output of the build is `miniflare-dist/index.mjs`.
+
+## Running
+
+The CLI expects a single command line argument which is the Miniflare options formatted as a string of JSON.
+
+```bash
+node --no-warnings ./packages/wrangler/miniflare-dist/index.mjs '{"watch": true, "script": ""}' --log VERBOSE
+```
+
+The `--log` argument is optional and takes one of Miniflare's LogLevels: "NONE", "ERROR", "WARN", "INFO", "DEBUG", "VERBOSE".
+It defaults to `INFO`.
+
+## Debugging
+
+Simply place a breakpoint in the code and run the above command in the VS Code "JavaScript Debug Terminal".
+The code will stop at the breakpoint as expected.

package/src/miniflare-cli/enum-keys.ts

@@ -0,0 +1,17 @@
+export type EnumKeys<Enum> = Exclude<keyof Enum, number>;
+
+export const enumObject = <Enum extends Record<string, number | string>>(
+  e: Enum
+) => {
+  const copy = { ...e } as { [K in EnumKeys<Enum>]: Enum[K] };
+  Object.values(e).forEach(
+    (value) => typeof value === "number" && delete copy[value]
+  );
+  return copy;
+};
+
+export const enumKeys = <Enum extends Record<string, number | string>>(
+  e: Enum
+) => {
+  return Object.keys(enumObject(e)) as EnumKeys<Enum>[];
+};

package/src/miniflare-cli/index.ts

@@ -0,0 +1,37 @@
+import { Log, LogLevel, Miniflare } from "miniflare";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+import { enumKeys } from "./enum-keys";
+
+async function main() {
+  const args = await yargs(hideBin(process.argv))
+    .help(false)
+    .version(false)
+    .option("log", {
+      choices: enumKeys(LogLevel),
+    }).argv;
+
+  const logLevel = LogLevel[args.log ?? "INFO"];
+  const config = {
+    ...JSON.parse((args._[0] as string) ?? "{}"),
+    log: new Log(logLevel),
+  };
+
+  if (logLevel > LogLevel.INFO) {
+    console.log("OPTIONS:\n", JSON.stringify(config, null, 2));
+  }
+
+  const mf = new Miniflare(config);
+
+  try {
+    // Start Miniflare development server
+    await mf.startServer();
+  } catch (e) {
+    mf.log.error(e as Error);
+    process.exitCode = 1;
+    // Unmount any mounted workers
+    await mf.dispose();
+  }
+}
+
+await main();

package/src/module-collection.ts

@@ -2,8 +2,8 @@ import crypto from "node:crypto";
 import { readFile } from "node:fs/promises";
 import path from "node:path";
 import globToRegExp from "glob-to-regexp";
-import type { CfModule, CfModuleType, CfScriptFormat } from "./api/worker";
 import type { Config, ConfigModuleRuleType } from "./config";
+import type { CfModule, CfModuleType, CfScriptFormat } from "./worker";
 import type esbuild from "esbuild";
 
 const RuleTypeToModuleType: Record<ConfigModuleRuleType, CfModuleType> = {
@@ -28,9 +28,15 @@ export const DEFAULT_MODULE_RULES: Config["rules"] = [
   { type: "CompiledWasm", globs: ["**/*.wasm"] },
 ];
 
-export default function makeModuleCollector(props: {
+export default function createModuleCollector(props: {
   format: CfScriptFormat;
   rules?: Config["rules"];
+  // a collection of "legacy" style module references, which are just file names
+  // we will eventually deprecate this functionality, hence the verbose greppable name
+  wrangler1xlegacyModuleReferences: {
+    rootDirectory: string;
+    fileNames: Set<string>;
+  };
 }): {
   modules: CfModule[];
   plugin: esbuild.Plugin;
@@ -41,6 +47,10 @@ export default function makeModuleCollector(props: {
     ...DEFAULT_MODULE_RULES!,
   ];
 
+  // First, we want to add some validations to the module rules
+  // We want to warn if rules are accidentally configured in such a way that
+  // subsequent rules will never match because `fallthrough` hasn't been set
+
   const completedRuleLocations: Record<string, number> = {};
   let index = 0;
   const rulesToRemove: Config["rules"] = [];
@@ -92,6 +102,84 @@ export default function makeModuleCollector(props: {
           modules.splice(0);
         });
 
+        // ~ start  legacy module specifier support ~
+
+        // This section detects usage of "legacy" 1.x style module specifiers
+        // and modifies them so they "work" in wrangler v2, but with a warning
+
+        const rulesMatchers = rules.flatMap((rule) => {
+          return rule.globs.map((glob) => {
+            const regex = globToRegExp(glob);
+            return {
+              regex,
+              rule,
+            };
+          });
+        });
+
+        if (props.wrangler1xlegacyModuleReferences.fileNames.size > 0) {
+          build.onResolve(
+            {
+              filter: new RegExp(
+                "^(" +
+                  [...props.wrangler1xlegacyModuleReferences.fileNames].join(
+                    "|"
+                  ) +
+                  ")$"
+              ),
+            },
+            async (args: esbuild.OnResolveArgs) => {
+              if (
+                args.kind !== "import-statement" &&
+                args.kind !== "require-call"
+              ) {
+                return;
+              }
+              // In the future, this will simply throw an error
+              console.warn(
+                `Deprecation warning: detected a legacy module import in "./${path.relative(
+                  process.cwd(),
+                  args.importer
+                )}". This will stop working in the future. Replace references to "${
+                  args.path
+                }" with "./${args.path}";`
+              );
+
+              // take the file and massage it to a
+              // transportable/manageable format
+              const filePath = path.join(
+                props.wrangler1xlegacyModuleReferences.rootDirectory,
+                args.path
+              );
+              const fileContent = await readFile(filePath);
+              const fileHash = crypto
+                .createHash("sha1")
+                .update(fileContent)
+                .digest("hex");
+              const fileName = `./${fileHash}-${path.basename(args.path)}`;
+
+              const { rule } =
+                rulesMatchers.find(({ regex }) => regex.test(fileName)) || {};
+              if (rule) {
+                // add the module to the array
+                modules.push({
+                  name: fileName,
+                  content: fileContent,
+                  type: RuleTypeToModuleType[rule.type],
+                });
+                return {
+                  path: fileName, // change the reference to the changed module
+                  external: props.format === "modules", // mark it as external in the bundle
+                  namespace: `wrangler-module-${rule.type}`, // just a tag, this isn't strictly necessary
+                  watchFiles: [filePath], // we also add the file to esbuild's watch list
+                };
+              }
+            }
+          );
+        }
+
+        // ~ end legacy module specifier support ~
+
         rules?.forEach((rule) => {
           if (rule.type === "ESModule" || rule.type === "CommonJS") return; // TODO: we should treat these as js files, and use the jsx loader
 

package/src/open-in-browser.ts

@@ -1,12 +1,24 @@
 import open from "open";
+
 /**
  * An extremely simple wrapper around the open command.
  * Specifically, it adds an 'error' event handler so that when this function
  * is called in environments where we can't open the browser (e.g. github codespaces,
  * stackblitz, remote servers), it doesn't just crash the process.
+ *
+ * @param url the URL to point the browser at
+ * @param options open a chromium-based browser instead of the default
  */
-export default async function openInBrowser(url: string): Promise<void> {
-  const childProcess = await open(url);
+export default async function openInBrowser(
+  url: string,
+  { forceChromium }: { forceChromium: boolean } = { forceChromium: false }
+): Promise<void> {
+  const options: open.Options | undefined = forceChromium
+    ? {
+        app: [{ name: open.apps.chrome }, { name: open.apps.edge }],
+      }
+    : undefined;
+  const childProcess = await open(url, options);
   childProcess.on("error", () => {
     console.warn(`Failed to open ${url} in a browser`);
   });