@b9g/crank 0.7.0 → 0.7.1

package/README.md

@@ -1,7 +1,62 @@
+<div align="center">
+
+<img src="logo.svg" alt="Crank.js Logo" width="200" height="200" />
+
+# Crank.js
+
+The Just JavaScript Framework
+
+</div>
+
 ## Try Crank
 
 The fastest way to try Crank is via the [online playground](https://crank.js.org/playground). In addition, many of the code examples in these guides feature live previews.
 
+## Why Crank?
+**Finally, a framework that feels like JavaScript.**
+
+While other frameworks invent new paradigms and force you to learn
+framework-specific APIs, Crank embraces the language features you already know.
+No hooks to memorize, no dependency arrays to debug, no cache invalidation to
+manage.
+
+## Pure JavaScript, No Compromises
+
+```javascript
+// Async components just work
+async function UserProfile({userId}) {
+  const user = await fetchUser(userId);
+  return <div>Hello, {user.name}!</div>;
+}
+
+// Lifecycle logic with generators feels natural
+function* Timer() {
+  let seconds = 0;
+  const interval = setInterval(() => this.refresh(() => seconds++), 1000);
+  for ({} of this) {
+    yield <div>Seconds: {seconds}</div>;
+  }
+  clearInterval(interval); // Cleanup just works
+}
+```
+
+## Why Developers Choose Crank
+
+- **🎯 Intuitive**: Use `async`/`await` for loading states and `function*` for lifecycle—no new APIs to learn
+- **⚡ Fast**: Outperforms React in benchmarks while weighing just 5KB with zero dependencies
+- **🔧 Flexible**: Write components in vanilla JavaScript with template literals, or use JSX
+- **🧹 Clean**: State lives in function scope, lifecycle code goes where it belongs, no mysterious re-render bugs
+- **🌊 Future-proof**: Built on stable JavaScript features, not evolving framework abstractions
+
+## The "Just JavaScript" Promise, Delivered
+
+Other frameworks claim to be "just JavaScript" but ask you to think in terms of
+effects, dependencies, and framework-specific patterns. Crank actually delivers
+on that promise—your components are literally just functions that use standard
+JavaScript control flow.
+
+Ready to write components that feel like the JavaScript you know and love?
+
 ## Installation
 
 The Crank package is available on [NPM](https://npmjs.org/@b9g/crank) through
@@ -12,37 +67,42 @@ b*ikeshavin*g).
 npm i @b9g/crank
 ```
 
-### Importing Crank with the **classic** JSX transform.
+### Importing Crank with the **automatic** JSX transform.
 
 ```jsx live
-/** @jsx createElement */
-/** @jsxFrag Fragment */
-import {createElement, Fragment} from "@b9g/crank";
+/** @jsxImportSource @b9g/crank */
 import {renderer} from "@b9g/crank/dom";
 
 renderer.render(
-  <p>This paragraph element is transpiled with the classic transform.</p>,
+  <p>This paragraph element is transpiled with the automatic transform.</p>,
   document.body,
 );
 ```
 
-### Importing Crank with the **automatic** JSX transform.
+### Importing Crank with the **classic** JSX transform.
 
 ```jsx live
-/** @jsxImportSource @b9g/crank */
+/** @jsx createElement */
+/** @jsxFrag Fragment */
+import {createElement, Fragment} from "@b9g/crank";
 import {renderer} from "@b9g/crank/dom";
 
 renderer.render(
-  <p>This paragraph element is transpiled with the automatic transform.</p>,
+  <p>This paragraph element is transpiled with the classic transform.</p>,
   document.body,
 );
 ```
 
-You will likely have to configure your tools to support JSX, especially if you do not want to use `@jsx` comment pragmas. See below for common tools and configurations.
+You will likely have to configure your tools to support JSX, especially if you
+do not want to use `@jsx` comment pragmas. See below for common tools and
+configurations.
 
 ### Importing the JSX template tag.
 
-Starting in version `0.5`, the Crank package ships a [tagged template function](/guides/jsx-template-tag) which provides similar syntax and semantics as the JSX transform. This allows you to write Crank components in vanilla JavaScript.
+Starting in version `0.5`, the Crank package ships a [tagged template
+function](/guides/jsx-template-tag) which provides similar syntax and semantics
+as the JSX transform. This allows you to write Crank components in vanilla
+JavaScript.
 
 ```js live
 import {jsx} from "@b9g/crank/standalone";
@@ -60,10 +120,6 @@ Crank is also available on CDNs like [unpkg](https://unpkg.com)
 
 ```jsx live
 /** @jsx createElement */
-
-// This is an ESM-ready environment!
-// If code previews work, your browser is an ESM-ready environment!
-
 import {createElement} from "https://unpkg.com/@b9g/crank/crank?module";
 import {renderer} from "https://unpkg.com/@b9g/crank/dom?module";
 
@@ -75,6 +131,135 @@ renderer.render(
 );
 ```
 
+## Key Examples
+
+### A Simple Component
+
+```jsx live
+import {renderer} from "@b9g/crank/dom";
+
+function Greeting({name = "World"}) {
+  return (
+    <div>Hello {name}</div>
+  );
+}
+
+renderer.render(<Greeting />, document.body);
+```
+
+### A Stateful Component
+
+```jsx live
+function *Timer(this: Context) {
+  let seconds = 0;
+  const interval = setInterval(() => this.refresh(() => seconds++), 1000);
+  for ({} of this) {
+    yield <div>Seconds: {seconds}</div>;
+  }
+
+  clearInterval(interval);
+}
+```
+
+### An Async Component
+
+```jsx live
+import {renderer} from "@b9g/crank/dom";
+async function Definition({word}) {
+  // API courtesy https://dictionaryapi.dev
+  const res = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
+  const data = await res.json();
+  if (!Array.isArray(data)) {
+    return <p>No definition found for {word}</p>;
+  }
+
+  const {phonetic, meanings} = data[0];
+  const {partOfSpeech, definitions} = meanings[0];
+  const {definition} = definitions[0];
+  return <>
+    <p>{word} <code>{phonetic}</code></p>
+    <p><b>{partOfSpeech}.</b> {definition}</p>
+  </>;
+}
+
+await renderer.render(<Definition word="framework" />, document.body);
+```
+
+### A Loading Component
+
+```jsx live
+import {Fragment} from "@b9g/crank";
+import {renderer} from "@b9g/crank/dom";
+
+async function LoadingIndicator() {
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  return (
+    <div style="padding: 20px; text-align: center; background: #f8f9fa; border: 2px dashed #6c757d; border-radius: 8px; color: #6c757d;">
+      🐕 Fetching a good boy...
+    </div>
+  );
+}
+
+async function RandomDog({throttle = false}) {
+  const res = await fetch("https://dog.ceo/api/breeds/image/random");
+  const data = await res.json();
+  if (throttle) {
+    await new Promise(resolve => setTimeout(resolve, 2000));
+  }
+
+  return (
+    <div style="text-align: center; padding: 10px; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+      <a href={data.message} target="_blank" style="text-decoration: none; color: inherit;">
+        <img
+          src={data.message}
+          alt="A Random Dog"
+          width="300"
+          style="border-radius: 8px; display: block; margin: 0 auto;"
+        />
+        <div style="margin-top: 8px; color: #6c757d; font-size: 14px;">
+          Click to view full size
+        </div>
+      </a>
+    </div>
+  );
+}
+
+async function *RandomDogLoader({throttle}) {
+  // for await can be used to race component trees
+  for await ({throttle} of this) {
+    yield <LoadingIndicator />;
+    yield <RandomDog throttle={throttle} />;
+  }
+}
+
+function *RandomDogApp() {
+  let throttle = false;
+  this.addEventListener("click", (ev) => {
+    if (ev.target.tagName === "BUTTON") {
+      this.refresh(() => throttle = !throttle);
+    }
+  });
+
+  for ({} of this) {
+    yield (
+      <div style="max-width: 400px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+        <RandomDogLoader throttle={throttle} />
+        <div style="text-align: center; margin-top: 20px;">
+          <button style="padding: 12px 24px; font-size: 16px; background: #007bff; color: white; border: none; border-radius: 6px; cursor: pointer;">
+            Show me another dog!
+          </button>
+          <div style="margin-top: 10px; font-size: 14px; color: #6c757d;">
+            {throttle ? "🐌 Slow mode enabled" : "⚡ Fast mode"}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+renderer.render(<RandomDogApp />, document.body);
+```
+
 ## Common tool configurations
 The following is an incomplete list of configurations to get started with Crank.
 
@@ -105,16 +290,15 @@ The classic transform is supported as well.
 }
 ```
 
-Crank is written in TypeScript. Refer to [the guide on TypeScript](/guides/working-with-typescript) for more information about Crank types.
+Crank is written in TypeScript. Refer to [the guide on
+TypeScript](https://crank.js.org/guides/working-with-typescript) for more
+information about Crank types.
 
 ```tsx
 import type {Context} from "@b9g/crank";
 function *Timer(this: Context) {
   let seconds = 0;
-  const interval = setInterval(() => {
-    seconds++;
-    this.refresh();
-  }, 1000);
+  const interval = setInterval(() => this.refresh(() => seconds++), 1000);
   for ({} of this) {
     yield <div>Seconds: {seconds}</div>;
   }
@@ -207,122 +391,3 @@ export default defineConfig({
   integrations: [crank()],
 });
 ```
-
-## Key Examples
-
-### A Simple Component
-
-```jsx live
-import {renderer} from "@b9g/crank/dom";
-
-function Greeting({name = "World"}) {
-  return (
-    <div>Hello {name}</div>
-  );
-}
-
-renderer.render(<Greeting />, document.body);
-```
-
-### A Stateful Component
-
-```jsx live
-import {renderer} from "@b9g/crank/dom";
-
-function *Timer() {
-  let seconds = 0;
-  const interval = setInterval(() => {
-    seconds++;
-    this.refresh();
-  }, 1000);
-  try {
-    while (true) {
-      yield <div>Seconds: {seconds}</div>;
-    }
-  } finally {
-    clearInterval(interval);
-  }
-}
-
-renderer.render(<Timer />, document.body);
-```
-
-### An Async Component
-
-```jsx live
-import {renderer} from "@b9g/crank/dom";
-async function Definition({word}) {
-  // API courtesy https://dictionaryapi.dev
-  const res = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
-  const data = await res.json();
-  if (!Array.isArray(data)) {
-    return <p>No definition found for {word}</p>;
-  }
-
-  const {phonetic, meanings} = data[0];
-  const {partOfSpeech, definitions} = meanings[0];
-  const {definition} = definitions[0];
-  return <>
-    <p>{word} <code>{phonetic}</code></p>
-    <p><b>{partOfSpeech}.</b> {definition}</p>
-  </>;
-}
-
-await renderer.render(<Definition word="framework" />, document.body);
-```
-
-### A Loading Component
-
-```jsx live
-import {Fragment} from "@b9g/crank";
-import {renderer} from "@b9g/crank/dom";
-
-async function LoadingIndicator() {
-  await new Promise(resolve => setTimeout(resolve, 1000));
-  return <div>Fetching a good boy...</div>;
-}
-
-async function RandomDog({throttle = false}) {
-  const res = await fetch("https://dog.ceo/api/breeds/image/random");
-  const data = await res.json();
-  if (throttle) {
-    await new Promise(resolve => setTimeout(resolve, 2000));
-  }
-
-  return (
-    <a href={data.message}>
-      <img src={data.message} alt="A Random Dog" width="300" />
-    </a>
-  );
-}
-
-async function *RandomDogLoader({throttle}) {
-  for await ({throttle} of this) {
-    yield <LoadingIndicator />;
-    yield <RandomDog throttle={throttle} />;
-  }
-}
-
-function *RandomDogApp() {
-  let throttle = false;
-  this.addEventListener("click", (ev) => {
-    if (ev.target.tagName === "BUTTON") {
-      throttle = !throttle;
-      this.refresh();
-    }
-  });
-
-  for ({} of this) {
-    yield (
-      <Fragment>
-        <RandomDogLoader throttle={throttle} />
-        <p>
-          <button>Show me another dog.</button>
-        </p>
-      </Fragment>
-    );
-  }
-}
-
-renderer.render(<RandomDogApp />, document.body);
-```

package/_css.cjs

@@ -0,0 +1,80 @@
+'use strict';
+
+/**
+ * CSS utility functions for style property transformation.
+ *
+ * This module handles camelCase to kebab-case conversion and automatic
+ * px unit conversion for numeric CSS values, making Crank more React-compatible.
+ */
+/**
+ * Converts camelCase CSS property names to kebab-case.
+ * Handles vendor prefixes correctly (WebkitTransform -> -webkit-transform).
+ */
+function camelToKebabCase(str) {
+    // Handle vendor prefixes that start with capital letters (WebkitTransform -> -webkit-transform)
+    if (/^[A-Z]/.test(str)) {
+        return `-${str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`).slice(1)}`;
+    }
+    // Handle normal camelCase (fontSize -> font-size)
+    return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+/**
+ * CSS properties that should remain unitless when given numeric values.
+ * Based on React's list of unitless properties.
+ */
+const UNITLESS_PROPERTIES = new Set([
+    "animation-iteration-count",
+    "aspect-ratio",
+    "border-image-outset",
+    "border-image-slice",
+    "border-image-width",
+    "box-flex",
+    "box-flex-group",
+    "box-ordinal-group",
+    "column-count",
+    "columns",
+    "flex",
+    "flex-grow",
+    "flex-positive",
+    "flex-shrink",
+    "flex-negative",
+    "flex-order",
+    "font-weight",
+    "grid-area",
+    "grid-column",
+    "grid-column-end",
+    "grid-column-span",
+    "grid-column-start",
+    "grid-row",
+    "grid-row-end",
+    "grid-row-span",
+    "grid-row-start",
+    "line-height",
+    "opacity",
+    "order",
+    "orphans",
+    "tab-size",
+    "widows",
+    "z-index",
+    "zoom",
+]);
+/**
+ * Formats CSS property values, automatically adding "px" to numeric values
+ * for properties that are not unitless.
+ */
+function formatStyleValue(name, value) {
+    if (typeof value === "number") {
+        // If the property should remain unitless, keep the number as-is
+        if (UNITLESS_PROPERTIES.has(name)) {
+            return String(value);
+        }
+        // Otherwise, append "px" for numeric values
+        return `${value}px`;
+    }
+    return String(value);
+}
+
+exports.UNITLESS_PROPERTIES = UNITLESS_PROPERTIES;
+exports.camelToKebabCase = camelToKebabCase;
+exports.formatStyleValue = formatStyleValue;
+//# sourceMappingURL=_css.cjs.map

package/_css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"_css.cjs","sources":["../src/_css.ts"],"sourcesContent":["/**\n * CSS utility functions for style property transformation.\n *\n * This module handles camelCase to kebab-case conversion and automatic\n * px unit conversion for numeric CSS values, making Crank more React-compatible.\n */\n\n/**\n * Converts camelCase CSS property names to kebab-case.\n * Handles vendor prefixes correctly (WebkitTransform -> -webkit-transform).\n */\nexport function camelToKebabCase(str: string): string {\n\t// Handle vendor prefixes that start with capital letters (WebkitTransform -> -webkit-transform)\n\tif (/^[A-Z]/.test(str)) {\n\t\treturn `-${str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`).slice(1)}`;\n\t}\n\t// Handle normal camelCase (fontSize -> font-size)\n\treturn str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);\n}\n\n/**\n * CSS properties that should remain unitless when given numeric values.\n * Based on React's list of unitless properties.\n */\nexport const UNITLESS_PROPERTIES = new Set([\n\t\"animation-iteration-count\",\n\t\"aspect-ratio\",\n\t\"border-image-outset\",\n\t\"border-image-slice\",\n\t\"border-image-width\",\n\t\"box-flex\",\n\t\"box-flex-group\",\n\t\"box-ordinal-group\",\n\t\"column-count\",\n\t\"columns\",\n\t\"flex\",\n\t\"flex-grow\",\n\t\"flex-positive\",\n\t\"flex-shrink\",\n\t\"flex-negative\",\n\t\"flex-order\",\n\t\"font-weight\",\n\t\"grid-area\",\n\t\"grid-column\",\n\t\"grid-column-end\",\n\t\"grid-column-span\",\n\t\"grid-column-start\",\n\t\"grid-row\",\n\t\"grid-row-end\",\n\t\"grid-row-span\",\n\t\"grid-row-start\",\n\t\"line-height\",\n\t\"opacity\",\n\t\"order\",\n\t\"orphans\",\n\t\"tab-size\",\n\t\"widows\",\n\t\"z-index\",\n\t\"zoom\",\n]);\n\n/**\n * Formats CSS property values, automatically adding \"px\" to numeric values\n * for properties that are not unitless.\n */\nexport function formatStyleValue(name: string, value: unknown): string {\n\tif (typeof value === \"number\") {\n\t\t// If the property should remain unitless, keep the number as-is\n\t\tif (UNITLESS_PROPERTIES.has(name)) {\n\t\t\treturn String(value);\n\t\t}\n\t\t// Otherwise, append \"px\" for numeric values\n\t\treturn `${value}px`;\n\t}\n\treturn String(value);\n}\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAEH;;;AAGG;AACG,SAAU,gBAAgB,CAAC,GAAW,EAAA;;AAE3C,IAAA,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;QACvB,OAAO,CAAA,CAAA,EAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,KAAK,CAAC,WAAW,EAAE,CAAE,CAAA,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,CAAE;;;AAGlF,IAAA,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,KAAK,CAAC,WAAW,EAAE,CAAA,CAAE,CAAC;AACnE;AAEA;;;AAGG;AACU,MAAA,mBAAmB,GAAG,IAAI,GAAG,CAAC;IAC1C,2BAA2B;IAC3B,cAAc;IACd,qBAAqB;IACrB,oBAAoB;IACpB,oBAAoB;IACpB,UAAU;IACV,gBAAgB;IAChB,mBAAmB;IACnB,cAAc;IACd,SAAS;IACT,MAAM;IACN,WAAW;IACX,eAAe;IACf,aAAa;IACb,eAAe;IACf,YAAY;IACZ,aAAa;IACb,WAAW;IACX,aAAa;IACb,iBAAiB;IACjB,kBAAkB;IAClB,mBAAmB;IACnB,UAAU;IACV,cAAc;IACd,eAAe;IACf,gBAAgB;IAChB,aAAa;IACb,SAAS;IACT,OAAO;IACP,SAAS;IACT,UAAU;IACV,QAAQ;IACR,SAAS;IACT,MAAM;AACN,CAAA;AAED;;;AAGG;AACa,SAAA,gBAAgB,CAAC,IAAY,EAAE,KAAc,EAAA;AAC5D,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;;AAE9B,QAAA,IAAI,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AAClC,YAAA,OAAO,MAAM,CAAC,KAAK,CAAC;;;QAGrB,OAAO,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI;;AAEpB,IAAA,OAAO,MAAM,CAAC,KAAK,CAAC;AACrB;;;;;;"}

package/_css.d.ts

@@ -0,0 +1,21 @@
+/**
+ * CSS utility functions for style property transformation.
+ *
+ * This module handles camelCase to kebab-case conversion and automatic
+ * px unit conversion for numeric CSS values, making Crank more React-compatible.
+ */
+/**
+ * Converts camelCase CSS property names to kebab-case.
+ * Handles vendor prefixes correctly (WebkitTransform -> -webkit-transform).
+ */
+export declare function camelToKebabCase(str: string): string;
+/**
+ * CSS properties that should remain unitless when given numeric values.
+ * Based on React's list of unitless properties.
+ */
+export declare const UNITLESS_PROPERTIES: Set<string>;
+/**
+ * Formats CSS property values, automatically adding "px" to numeric values
+ * for properties that are not unitless.
+ */
+export declare function formatStyleValue(name: string, value: unknown): string;

package/_css.js

@@ -0,0 +1,76 @@
+/**
+ * CSS utility functions for style property transformation.
+ *
+ * This module handles camelCase to kebab-case conversion and automatic
+ * px unit conversion for numeric CSS values, making Crank more React-compatible.
+ */
+/**
+ * Converts camelCase CSS property names to kebab-case.
+ * Handles vendor prefixes correctly (WebkitTransform -> -webkit-transform).
+ */
+function camelToKebabCase(str) {
+    // Handle vendor prefixes that start with capital letters (WebkitTransform -> -webkit-transform)
+    if (/^[A-Z]/.test(str)) {
+        return `-${str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`).slice(1)}`;
+    }
+    // Handle normal camelCase (fontSize -> font-size)
+    return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+/**
+ * CSS properties that should remain unitless when given numeric values.
+ * Based on React's list of unitless properties.
+ */
+const UNITLESS_PROPERTIES = new Set([
+    "animation-iteration-count",
+    "aspect-ratio",
+    "border-image-outset",
+    "border-image-slice",
+    "border-image-width",
+    "box-flex",
+    "box-flex-group",
+    "box-ordinal-group",
+    "column-count",
+    "columns",
+    "flex",
+    "flex-grow",
+    "flex-positive",
+    "flex-shrink",
+    "flex-negative",
+    "flex-order",
+    "font-weight",
+    "grid-area",
+    "grid-column",
+    "grid-column-end",
+    "grid-column-span",
+    "grid-column-start",
+    "grid-row",
+    "grid-row-end",
+    "grid-row-span",
+    "grid-row-start",
+    "line-height",
+    "opacity",
+    "order",
+    "orphans",
+    "tab-size",
+    "widows",
+    "z-index",
+    "zoom",
+]);
+/**
+ * Formats CSS property values, automatically adding "px" to numeric values
+ * for properties that are not unitless.
+ */
+function formatStyleValue(name, value) {
+    if (typeof value === "number") {
+        // If the property should remain unitless, keep the number as-is
+        if (UNITLESS_PROPERTIES.has(name)) {
+            return String(value);
+        }
+        // Otherwise, append "px" for numeric values
+        return `${value}px`;
+    }
+    return String(value);
+}
+
+export { UNITLESS_PROPERTIES, camelToKebabCase, formatStyleValue };
+//# sourceMappingURL=_css.js.map

package/_css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/_utils.cjs

@@ -0,0 +1,106 @@
+'use strict';
+
+function wrap(value) {
+    return value === undefined ? [] : Array.isArray(value) ? value : [value];
+}
+function unwrap(arr) {
+    return arr.length === 0 ? undefined : arr.length === 1 ? arr[0] : arr;
+}
+/**
+ * Ensures a value is an array.
+ *
+ * This function does the same thing as wrap() above except it handles nulls
+ * and iterables, so it is appropriate for wrapping user-provided element
+ * children.
+ */
+function arrayify(value) {
+    return value == null
+        ? []
+        : Array.isArray(value)
+            ? value
+            : typeof value === "string" ||
+                typeof value[Symbol.iterator] !== "function"
+                ? [value]
+                : [...value];
+}
+function isIteratorLike(value) {
+    return value != null && typeof value.next === "function";
+}
+function isPromiseLike(value) {
+    return value != null && typeof value.then === "function";
+}
+function createRaceRecord(contender) {
+    const deferreds = new Set();
+    const record = { deferreds, settled: false };
+    // This call to `then` happens once for the lifetime of the value.
+    Promise.resolve(contender).then((value) => {
+        for (const { resolve } of deferreds) {
+            resolve(value);
+        }
+        deferreds.clear();
+        record.settled = true;
+    }, (err) => {
+        for (const { reject } of deferreds) {
+            reject(err);
+        }
+        deferreds.clear();
+        record.settled = true;
+    });
+    return record;
+}
+// Promise.race is memory unsafe. This is alternative which is. See:
+// https://github.com/nodejs/node/issues/17469#issuecomment-685235106
+// Keys are the values passed to race.
+// Values are a record of data containing a set of deferreds and whether the
+// value has settled.
+const wm = new WeakMap();
+function safeRace(contenders) {
+    let deferred;
+    const result = new Promise((resolve, reject) => {
+        deferred = { resolve, reject };
+        for (const contender of contenders) {
+            if (!isPromiseLike(contender)) {
+                // If the contender is a not a then-able, attempting to use it as a key
+                // in the weakmap would throw an error. Luckily, it is safe to call
+                // `Promise.resolve(contender).then` on regular values multiple
+                // times because the promise fulfills immediately.
+                Promise.resolve(contender).then(resolve, reject);
+                continue;
+            }
+            let record = wm.get(contender);
+            if (record === undefined) {
+                record = createRaceRecord(contender);
+                record.deferreds.add(deferred);
+                wm.set(contender, record);
+            }
+            else if (record.settled) {
+                // If the value has settled, it is safe to call
+                // `Promise.resolve(contender).then` on it.
+                Promise.resolve(contender).then(resolve, reject);
+            }
+            else {
+                record.deferreds.add(deferred);
+            }
+        }
+    });
+    // The finally callback executes when any value settles, preventing any of
+    // the unresolved values from retaining a reference to the resolved value.
+    return result.finally(() => {
+        for (const contender of contenders) {
+            if (isPromiseLike(contender)) {
+                const record = wm.get(contender);
+                if (record) {
+                    record.deferreds.delete(deferred);
+                }
+            }
+        }
+    });
+}
+
+exports.arrayify = arrayify;
+exports.isIteratorLike = isIteratorLike;
+exports.isPromiseLike = isPromiseLike;
+exports.safeRace = safeRace;
+exports.unwrap = unwrap;
+exports.wrap = wrap;
+//# sourceMappingURL=_utils.cjs.map