@b9g/crank 0.7.0 → 0.7.2

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

package/_utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"_utils.cjs","sources":["../src/_utils.ts"],"sourcesContent":["export function wrap<T>(value: Array<T> | T | undefined): Array<T> {\n\treturn value === undefined ? [] : Array.isArray(value) ? value : [value];\n}\n\nexport function unwrap<T>(arr: Array<T>): Array<T> | T | undefined {\n\treturn arr.length === 0 ? undefined : arr.length === 1 ? arr[0] : arr;\n}\n\nexport type NonStringIterable<T> = Iterable<T> & object;\n\n/**\n * Ensures a value is an array.\n *\n * This function does the same thing as wrap() above except it handles nulls\n * and iterables, so it is appropriate for wrapping user-provided element\n * children.\n */\nexport function arrayify<T>(\n\tvalue: NonStringIterable<T> | T | null | undefined,\n): Array<T> {\n\treturn value == null\n\t\t? []\n\t\t: Array.isArray(value)\n\t\t\t? value\n\t\t\t: typeof value === \"string\" ||\n\t\t\t\t  typeof (value as any)[Symbol.iterator] !== \"function\"\n\t\t\t\t? [value as T]\n\t\t\t\t: [...(value as NonStringIterable<T>)];\n}\n\nexport function isIteratorLike(\n\tvalue: any,\n): value is Iterator<unknown> | AsyncIterator<unknown> {\n\treturn value != null && typeof value.next === \"function\";\n}\n\nexport function isPromiseLike(value: any): value is PromiseLike<unknown> {\n\treturn value != null && typeof value.then === \"function\";\n}\n\ntype Deferred<T = unknown> = {\n\tresolve: (value: T | PromiseLike<T>) => void;\n\treject: (reason?: unknown) => void;\n};\n\ntype RaceRecord = {\n\tdeferreds: Set<Deferred>;\n\tsettled: boolean;\n};\n\nfunction createRaceRecord(contender: PromiseLike<unknown>): RaceRecord {\n\tconst deferreds = new Set<Deferred>();\n\tconst record = {deferreds, settled: false};\n\n\t// This call to `then` happens once for the lifetime of the value.\n\tPromise.resolve(contender).then(\n\t\t(value) => {\n\t\t\tfor (const {resolve} of deferreds) {\n\t\t\t\tresolve(value);\n\t\t\t}\n\n\t\t\tdeferreds.clear();\n\t\t\trecord.settled = true;\n\t\t},\n\t\t(err) => {\n\t\t\tfor (const {reject} of deferreds) {\n\t\t\t\treject(err);\n\t\t\t}\n\n\t\t\tdeferreds.clear();\n\t\t\trecord.settled = true;\n\t\t},\n\t);\n\treturn record;\n}\n\n// Promise.race is memory unsafe. This is alternative which is. See:\n// https://github.com/nodejs/node/issues/17469#issuecomment-685235106\n// Keys are the values passed to race.\n// Values are a record of data containing a set of deferreds and whether the\n// value has settled.\nconst wm = new WeakMap<object, RaceRecord>();\nexport function safeRace<T>(\n\tcontenders: Iterable<T | PromiseLike<T>>,\n): Promise<Awaited<T>> {\n\tlet deferred: Deferred;\n\tconst result = new Promise((resolve, reject) => {\n\t\tdeferred = {resolve, reject};\n\t\tfor (const contender of contenders) {\n\t\t\tif (!isPromiseLike(contender)) {\n\t\t\t\t// If the contender is a not a then-able, attempting to use it as a key\n\t\t\t\t// in the weakmap would throw an error. Luckily, it is safe to call\n\t\t\t\t// `Promise.resolve(contender).then` on regular values multiple\n\t\t\t\t// times because the promise fulfills immediately.\n\t\t\t\tPromise.resolve(contender).then(resolve, reject);\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tlet record = wm.get(contender);\n\t\t\tif (record === undefined) {\n\t\t\t\trecord = createRaceRecord(contender);\n\t\t\t\trecord.deferreds.add(deferred);\n\t\t\t\twm.set(contender, record);\n\t\t\t} else if (record.settled) {\n\t\t\t\t// If the value has settled, it is safe to call\n\t\t\t\t// `Promise.resolve(contender).then` on it.\n\t\t\t\tPromise.resolve(contender).then(resolve, reject);\n\t\t\t} else {\n\t\t\t\trecord.deferreds.add(deferred);\n\t\t\t}\n\t\t}\n\t});\n\n\t// The finally callback executes when any value settles, preventing any of\n\t// the unresolved values from retaining a reference to the resolved value.\n\treturn result.finally(() => {\n\t\tfor (const contender of contenders) {\n\t\t\tif (isPromiseLike(contender)) {\n\t\t\t\tconst record = wm.get(contender);\n\t\t\t\tif (record) {\n\t\t\t\t\trecord.deferreds.delete(deferred);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}) as Promise<Awaited<T>>;\n}\n"],"names":[],"mappings":"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"}

package/_utils.js

@@ -0,0 +1,99 @@
+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);
+                }
+            }
+        }
+    });
+}
+
+export { arrayify, isIteratorLike, isPromiseLike, safeRace, unwrap, wrap };
+//# sourceMappingURL=_utils.js.map

package/_utils.js.map

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

package/async.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var crank = require('./crank.cjs');
-require('./event-target.cjs');
 
 /**
  * Creates a lazy-loaded component from an initializer function.
@@ -37,16 +36,12 @@ async function SuspenseEmpty() {
     return null;
 }
 async function SuspenseFallback({ children, timeout, schedule, }) {
-    if (schedule) {
-        this.schedule(schedule);
-    }
+    this.schedule(schedule);
     await new Promise((resolve) => setTimeout(resolve, timeout));
     return children;
 }
 function SuspenseChildren({ children, schedule, }) {
-    if (schedule) {
-        this.schedule(schedule);
-    }
+    this.schedule(schedule);
     return children;
 }
 /**
@@ -69,11 +64,7 @@ function SuspenseChildren({ children, schedule, }) {
  */
 async function* Suspense({ children, fallback, timeout, }) {
     const controller = this.consume(SuspenseListController);
-    if (controller) {
-        controller.register(this);
-    }
     this.provide(SuspenseListController, undefined);
-    let initial = true;
     for await ({ children, fallback, timeout } of this) {
         if (timeout == null) {
             if (controller) {
@@ -87,35 +78,32 @@ async function* Suspense({ children, fallback, timeout, }) {
             yield crank.createElement(SuspenseFallback, {
                 timeout: timeout,
                 children: fallback,
+                schedule: () => { },
             });
             yield children;
             continue;
         }
+        const items = await controller.register(this);
         if (controller.revealOrder !== "together") {
-            if (!controller.isHead(this)) {
+            if (!controller.isHead(this, items)) {
                 yield crank.createElement(SuspenseEmpty);
             }
             if (controller.tail !== "hidden") {
                 yield crank.createElement(SuspenseFallback, {
                     timeout: timeout,
-                    schedule: initial
-                        ? () => controller.scheduleFallback(this)
-                        : undefined,
                     children: fallback,
+                    schedule: () => controller.scheduleFallback(this, items),
                 });
             }
         }
         yield crank.createElement(SuspenseChildren, {
-            schedule: initial ? () => controller.scheduleChildren(this) : undefined,
             children,
+            schedule: () => controller.scheduleChildren(this, items),
         });
-        initial = false;
     }
 }
 const SuspenseListController = Symbol.for("SuspenseListController");
 /**
- * Coordinates the reveal order of multiple <Suspense> children.
- *
  * Controls when child <Suspense> components show their content or fallbacks
  * based on the specified reveal order. The <SuspenseList> resolves when
  * coordination effort is complete (not necessarily when all content is
@@ -129,7 +117,7 @@ const SuspenseListController = Symbol.for("SuspenseListController");
  *   In Crank, the default behavior of async components is to render together,
  *   so "together" might not be necessary if you are not using <Suspense>
  *   fallbacks.
- * @param tail - How to handle fallbacks:
+ *e@param tail - How to handle fallbacks:
  *   - "collapsed" (default): Show only the fallback for the next unresolved
  *     Suspense component
  *   - "hidden": Hide all fallbacks
@@ -152,25 +140,30 @@ const SuspenseListController = Symbol.for("SuspenseListController");
  * ```
  */
 function* SuspenseList({ revealOrder = "forwards", tail = "collapsed", timeout, children, }) {
-    let registering = true;
-    const suspenseItems = [];
+    let finishRegistration;
+    let registering = null;
+    let items = [];
     const controller = {
         timeout,
         revealOrder,
         tail,
-        register(ctx) {
+        async register(ctx) {
             if (registering) {
                 let childrenResolver;
                 const childrenPromise = new Promise((r) => (childrenResolver = r));
-                suspenseItems.push({
+                items.push({
                     ctx,
-                    childrenResolver: childrenResolver,
-                    childrenPromise,
+                    resolve: childrenResolver,
+                    promise: childrenPromise,
                 });
-                return;
+                // Wait for registration to complete
+                await registering;
+                return items;
             }
+            console.error("Component registered outside SuspenseList registration window");
+            return [];
         },
-        isHead(ctx) {
+        isHead(ctx, suspenseItems) {
             const index = suspenseItems.findIndex((item) => item.ctx === ctx);
             if (index === -1) {
                 return false;
@@ -183,34 +176,40 @@ function* SuspenseList({ revealOrder = "forwards", tail = "collapsed", timeout,
             }
             return false;
         },
-        async scheduleFallback(ctx) {
+        async scheduleFallback(ctx, suspenseItems) {
             const index = suspenseItems.findIndex((item) => item.ctx === ctx);
             if (index === -1) {
                 return;
             }
             else if (revealOrder === "forwards") {
-                await Promise.all(suspenseItems.slice(0, index).map((item) => item.childrenPromise));
+                await Promise.all(suspenseItems.slice(0, index).map((item) => item.promise));
             }
             else if (revealOrder === "backwards") {
-                await Promise.all(suspenseItems.slice(index + 1).map((item) => item.childrenPromise));
+                await Promise.all(suspenseItems.slice(index + 1).map((item) => item.promise));
             }
         },
-        async scheduleChildren(ctx) {
+        async scheduleChildren(ctx, suspenseItems) {
             const index = suspenseItems.findIndex((item) => item.ctx === ctx);
             if (index === -1) {
                 return;
             }
             // This children content is ready
-            suspenseItems[index].childrenResolver();
+            suspenseItems[index].resolve();
             // Children coordination - determine when this content should show
             if (revealOrder === "together") {
-                await Promise.all(suspenseItems.map((item) => item.childrenPromise));
+                await Promise.all(suspenseItems.map((item) => item.promise));
             }
             else if (revealOrder === "forwards") {
-                await Promise.all(suspenseItems.slice(0, index + 1).map((item) => item.childrenPromise));
+                const waitFor = suspenseItems
+                    .slice(0, index + 1)
+                    .map((item) => item.promise);
+                await Promise.all(waitFor);
             }
             else if (revealOrder === "backwards") {
-                await Promise.all(suspenseItems.slice(index).map((item) => item.childrenPromise));
+                const waitFor = suspenseItems
+                    .slice(index + 1)
+                    .map((item) => item.promise);
+                await Promise.all(waitFor);
             }
         },
     };
@@ -221,12 +220,16 @@ function* SuspenseList({ revealOrder = "forwards", tail = "collapsed", timeout,
         timeout,
         children,
     } of this) {
-        registering = true;
-        // TODO: Is there a fixed amount of microtasks that we can wait for?
-        setTimeout(() => (registering = false));
+        items = [];
         controller.timeout = timeout;
         controller.revealOrder = revealOrder;
         controller.tail = tail;
+        registering = new Promise((r) => (finishRegistration = r));
+        // TODO: Is there a more precise timing for the registration window
+        setTimeout(() => {
+            finishRegistration();
+            registering = null;
+        });
         yield children;
     }
 }