@reykjavik/webtools 0.1.19 → 0.1.21

package/CHANGELOG.md

@@ -4,22 +4,26 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.1.19
+## 0.1.21
 
-_2024-03-11_
+_2024-03-14_
 
-- fix: Incorrect alphabetization of accented characters as part of a word …
-  (not just a single character) This fix corrects the sorting of initial
-  letters, but characters inside the string stay mixed in with their
-  unaccented base character.
-- fix: Incorrect `Intl.ListFormat` format in narrow+unit mode
+- feat: Add `@reykjavik/webtools/remix/Wait` component
+- feat: Add `@reykjavik/webtools/remix/http` module — with `isClientFetch`
+  helper
+- feat: Add `@reykjavik/webtools/remix/async` module with promise helpers
 
-## 0.1.18
+## 0.1.18 – 0.1.20
 
 _2024-03-11_
 
 - `@reykjavik/webtools/fixIcelandicLocale`:
   - feat: Patch `Intl.PluralRules` and `Intl.ListFormat`
+  - fix: Incorrect alphabetization of accented characters as part of a word …
+    (not just a single character) This fix corrects the sorting of initial
+    letters, but characters inside the string stay mixed in with their
+    unaccented base character.
+  - fix: Make all pached `Intl.*` methods bound to their instances
 
 ## 0.1.16 – 0.1.17
 
@@ -49,8 +53,8 @@ _2024-03-06_
 
 _2024-02-29_
 
-- feat: Add `@reykjavik/webtools/next/vanillaExtract` component — with
-  plain-CSS injection helpers
+- feat: Add `@reykjavik/webtools/next/vanillaExtract` module — with plain-CSS
+  injection helpers
 - fix: Mark `peerDependencies` as optional
 
 ## 0.1.11

package/README.md

@@ -25,6 +25,9 @@ bun add @reykjavik/webtools
 - [`@reykjavik/webtools/CookieHubConsent`](#reykjavikwebtoolscookiehubconsent)
   - [`CookieHubProvider` component](#cookiehubprovider-component)
   - [`useCookieHubConsent`](#usecookiehubconsent)
+- [`@reykjavik/webtools/async`](#reykjavikwebtoolsasync)
+  - [`promiseAllObject`](#promiseallobject)
+  - [`maxWait`](#maxwait)
 - [`@reykjavik/webtools/vanillaExtract`](#reykjavikwebtoolsvanillaextract)
   - [`vanillaGlobal`](#vanillaglobal)
   - [`vanillaProps`](#vanillaprops)
@@ -35,6 +38,7 @@ bun add @reykjavik/webtools
   - [Limitations](#limitations)
 - [Framework Specific Tools](#framework-specific-tools)
   - [Next.js Tools](#nextjs-tools)
+  - [Remix.run Tools](#remixrun-tools)
 - [Contributing](#contributing)
 - [Changelog](#changelog)
 
@@ -165,7 +169,7 @@ behavior.
 ### `toSec` TTL helper
 
 **Syntax:**
-`` toSec; (ttl: number | `${number}${'s'|'m'|'h'|'d'|'w'}`) => number ``
+`` toSec(ttl: number | `${number}${'s'|'m'|'h'|'d'|'w'}`): number ``
 
 Converts a `TTL` (max-age) value into seconds, and returns `0` for bad and/or
 negative input values.
@@ -253,6 +257,62 @@ this hook will return an empty object.
 
 ---
 
+## `@reykjavik/webtools/async`
+
+Contains a few small helpers for working with async functions and promises.
+
+---
+
+### `promiseAllObject`
+
+**Syntax:**
+`promiseAllObject<T extends PlainObj>(promisesMap: T>): Promise<{ [K in keyof T]: Awaited<T[K]>; }>`
+
+A variation of `Promise.all()` that accepts an object with named promises and
+returns a same-shaped object with the resolved values.
+
+```ts
+import { promiseAllObject } from '@reykjavik/webtools/async';
+
+const { user, posts } = await promiseAllObject({
+  user: fetchUser(),
+  posts: fetchPosts(),
+});
+```
+
+---
+
+### `maxWait`
+
+**Syntax:** `maxWait(timeout: number, promises: Array<any>): Promise<void>`  
+**Syntax:**
+`maxWait<T extends PlainObj>(timeout: number, promises: T): Promise<{ [K in keyof T]: { value: Awaited<T[K]> } | undefined }>`
+
+This somewhat esoteric helper resolves soon as all of the passed `promises`
+have resolved, or after `timeout` milliseconds — whichever comes first.
+
+If an object is passed, the resolved value will be an object with the same
+keys, with undefined values for any promises that didn't resolve in time, and
+the resolved values in a `value` container object.
+
+```ts
+import { maxWait } from '@reykjavik/webtools/async';
+
+const user = fetchUser();
+const posts = fetchPosts();
+
+// Array of promises resolves to void
+await maxWait(500, [user, posts]);
+
+// Object of promises resolves to an object with any resolved values at that time
+const { user, posts } = await maxWait(500, { user, posts });
+
+console.log(user?.value); // undefined | User
+console.log(posts?.value); // undefined | Array<Post>
+```
+
+---
+
 ## `@reykjavik/webtools/vanillaExtract`
 
 Contains helpers for writing [vanilla-extract](https://vanilla-extract.style)
@@ -265,7 +325,7 @@ CSS.
 
 ### `vanillaGlobal`
 
-**Syntax:** `vanillaGlobal: (css: string) => void`
+**Syntax:** `vanillaGlobal(css: string): void`
 
 Inserts free-form CSS as a vanilla-extract `globalStyle`.
 
@@ -282,7 +342,7 @@ vanillaGlobal(`
 
 ### `vanillaProps`
 
-**Syntax:** `vanillaProps: (css: string) => GlobalStyleRule`
+**Syntax:** `vanillaProps(css: string): GlobalStyleRule`
 
 Spreads the return value into a style object, to inject free-form CSS
 properties (or nested blocks)
@@ -307,8 +367,8 @@ const myStyle = style({
 
 ### `vanillaClass`
 
-**Syntax:** `vanillaClass: (css: string) => string`  
-**Syntax:** `vanillaClass: (debugId: string, css: string) => string`
+**Syntax:** `vanillaClass(css: string): string`  
+**Syntax:** `vanillaClass(debugId: string, css: string): string`
 
 Returns a scoped cssClassName styled with free-form CSS. This function is a
 thin wrapper around vanilla-extract's `style` function.
@@ -333,8 +393,8 @@ export const humanReadableClass = vanillaClass(
 
 ### `vanillaClassNested`
 
-**Syntax:** `vanillaClassNested: (css: string) => string`  
-**Syntax:** `vanillaClassNested: (debugId: string, css: string) => string`
+**Syntax:** `vanillaClassNested(css: string): string`  
+**Syntax:** `vanillaClassNested(debugId: string, css: string): string`
 
 Returns a scoped cssClassName styled with free-form CSS.
 
@@ -373,7 +433,7 @@ comments, etc. If you need something more sophisticated, use a custom
 
 ### `vanillaNest`
 
-**Syntax:** `vanillaNest: (ampSelector: string, css: string) => string`
+**Syntax:** `vanillaNest(ampSelector: string, css: string): string`
 
 Replaces all `&` tokens with the given selector string, in a direct (read.
 "dumb") way. It's mainly useful when used with style-mixins, etc.
@@ -504,7 +564,16 @@ detection test.)
 This package contains some helpers and components that are specifically
 designed for use in [Next.js](https://nextjs.org/) projects.
 
-See [README-nextjs.md](README-nextjs.md) for more info.
+See [README-nextjs.md](./README-nextjs.md) for more info.
+
+---
+
+### Remix.run Tools
+
+This package contains some helpers and components that are specifically
+designed for use in [Remix.run](https://remix.run) projects.
+
+See [README-remix.md](./README-remix.md) for more info.
 
 ---
 

package/async.d.ts

@@ -0,0 +1,26 @@
+type PlainObj = Record<string, unknown>;
+/**
+ * Simple sleep function. Returns a promise that resolves after `length`
+ * milliseconds.
+ */
+export declare const sleep: (length: number) => Promise<void>;
+/**
+ * Resolves soon as all of the passed `promises` have resolved, or after
+ * `timeout` milliseconds — whichever comes first.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#maxwait
+ */
+export declare function maxWait(timeout: number, promises: Array<unknown>): Promise<void>;
+export declare function maxWait<PromiseMap extends PlainObj>(timeout: number, promises: PromiseMap): Promise<{
+    -readonly [K in keyof PromiseMap]: {
+        value: Awaited<PromiseMap[K]>;
+    } | undefined;
+}>;
+/**
+ * A variation of `Promise.all()` that accepts an object with named promises
+ * and returns a same-shaped object with the resolved values.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#promiseallobject
+ */
+export declare const promiseAllObject: <T extends PlainObj>(promisesMap: T) => Promise<{ -readonly [K in keyof T]: Awaited<T[K]>; }>;
+export {};

package/async.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.promiseAllObject = exports.maxWait = exports.sleep = void 0;
+/**
+ * Simple sleep function. Returns a promise that resolves after `length`
+ * milliseconds.
+ */
+const sleep = (length) => new Promise((resolve) => setTimeout(resolve, length));
+exports.sleep = sleep;
+function maxWait(timeout, promises) {
+    if (Array.isArray(promises)) {
+        return Promise.race([(0, exports.sleep)(timeout), Promise.all(promises).then(() => undefined)]);
+    }
+    return Promise.race([(0, exports.sleep)(timeout), Promise.all(Object.values(promises))]).then(() => {
+        Object.entries(promises).forEach(([key, value]) => {
+            if (value instanceof Promise) {
+                promises[key] = undefined;
+                value.then((value) => {
+                    promises[key] = { value };
+                });
+            }
+            else {
+                promises[key] = { value };
+            }
+        });
+        return (0, exports.sleep)(0).then(() => promises);
+    });
+}
+exports.maxWait = maxWait;
+// ---------------------------------------------------------------------------
+// Adapted from https://github.com/marcelowa/promise-all-properties
+/**
+ * A variation of `Promise.all()` that accepts an object with named promises
+ * and returns a same-shaped object with the resolved values.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#promiseallobject
+ */
+const promiseAllObject = (promisesMap) => Promise.all(Object.values(promisesMap)).then((results) => {
+    const keys = Object.keys(promisesMap);
+    const resolvedMap = {};
+    for (let i = 0; i < results.length; i++) {
+        resolvedMap[keys[i]] = results[i];
+    }
+    return resolvedMap;
+});
+exports.promiseAllObject = promiseAllObject;

package/esm/async.d.ts

@@ -0,0 +1,26 @@
+type PlainObj = Record<string, unknown>;
+/**
+ * Simple sleep function. Returns a promise that resolves after `length`
+ * milliseconds.
+ */
+export declare const sleep: (length: number) => Promise<void>;
+/**
+ * Resolves soon as all of the passed `promises` have resolved, or after
+ * `timeout` milliseconds — whichever comes first.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#maxwait
+ */
+export declare function maxWait(timeout: number, promises: Array<unknown>): Promise<void>;
+export declare function maxWait<PromiseMap extends PlainObj>(timeout: number, promises: PromiseMap): Promise<{
+    -readonly [K in keyof PromiseMap]: {
+        value: Awaited<PromiseMap[K]>;
+    } | undefined;
+}>;
+/**
+ * A variation of `Promise.all()` that accepts an object with named promises
+ * and returns a same-shaped object with the resolved values.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#promiseallobject
+ */
+export declare const promiseAllObject: <T extends PlainObj>(promisesMap: T) => Promise<{ -readonly [K in keyof T]: Awaited<T[K]>; }>;
+export {};

package/esm/async.js

@@ -0,0 +1,40 @@
+/**
+ * Simple sleep function. Returns a promise that resolves after `length`
+ * milliseconds.
+ */
+export const sleep = (length) => new Promise((resolve) => setTimeout(resolve, length));
+export function maxWait(timeout, promises) {
+    if (Array.isArray(promises)) {
+        return Promise.race([sleep(timeout), Promise.all(promises).then(() => undefined)]);
+    }
+    return Promise.race([sleep(timeout), Promise.all(Object.values(promises))]).then(() => {
+        Object.entries(promises).forEach(([key, value]) => {
+            if (value instanceof Promise) {
+                promises[key] = undefined;
+                value.then((value) => {
+                    promises[key] = { value };
+                });
+            }
+            else {
+                promises[key] = { value };
+            }
+        });
+        return sleep(0).then(() => promises);
+    });
+}
+// ---------------------------------------------------------------------------
+// Adapted from https://github.com/marcelowa/promise-all-properties
+/**
+ * A variation of `Promise.all()` that accepts an object with named promises
+ * and returns a same-shaped object with the resolved values.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#promiseallobject
+ */
+export const promiseAllObject = (promisesMap) => Promise.all(Object.values(promisesMap)).then((results) => {
+    const keys = Object.keys(promisesMap);
+    const resolvedMap = {};
+    for (let i = 0; i < results.length; i++) {
+        resolvedMap[keys[i]] = results[i];
+    }
+    return resolvedMap;
+});

package/esm/fixIcelandicLocale.privates.js

@@ -27,29 +27,24 @@ const PatchedCollator = function Collator(locales, options) {
         return new PatchedCollator(locales, options);
     }
     const mappedLocales = mapLocales(locales);
-    this.super = _Collator(mappedLocales || locales, options);
-    this.mapped = !!mappedLocales;
-};
-// This is all very hacky, but extending the class *AND* preseving the
-// ability to instantiate without `new` is a bit of a pain.
-// Eagerly interested in finding a better way to do this.
-const CollatorProto = {
-    constructor: PatchedCollator,
-    compare(a, b) {
-        const res1 = this.super.compare(a, b);
+    const parent = _Collator(mappedLocales || locales, options);
+    const mapped = !!mappedLocales;
+    this.compare = (a, b) => {
+        const res1 = parent.compare(a, b);
+        if (!mapped) {
+            return res1;
+        }
         const a0 = a.charAt(0);
         const b0 = b.charAt(0);
         if (/\d/.test(a0 + b0)) {
             return res1;
         }
-        const res2 = this.super.compare(a0, b0);
+        const res2 = parent.compare(a0, b0);
         return res2 !== 0 ? res2 : res1;
-    },
-    resolvedOptions() {
-        return this.super.resolvedOptions();
-    },
+    };
+    this.resolvedOptions = () => parent.resolvedOptions();
 };
-PatchedCollator.prototype = CollatorProto;
+PatchedCollator.prototype = { constructor: PatchedCollator };
 // Static methods (not patched since "is" is not ACTUALLY supported.)
 PatchedCollator.supportedLocalesOf = _Collator.supportedLocalesOf;
 PatchedCollator.$original = _Collator;
@@ -64,11 +59,8 @@ _patchedLocaleCompare.$original = _localeCompare;
 // NumberFormat
 // ===========================================================================
 const _NumberFormat = Intl.NumberFormat;
-const reformatNumberParts = function (parts) {
-    if (!this.mapped) {
-        return parts;
-    }
-    const options = this.super.resolvedOptions();
+const reformatNumberParts = function (parent, parts) {
+    const options = parent.resolvedOptions();
     if (options.style === 'currency' && options.currencyDisplay === 'symbol') {
         const currency = options.currency;
         if (currency === 'DKK' || currency === 'ISK') {
@@ -87,31 +79,21 @@ const PatchedNumberFormat = function NumberFormat(locales, options) {
         return new PatchedNumberFormat(locales, options);
     }
     const mappedLocales = mapLocales(locales);
-    this.super = _NumberFormat(mappedLocales || locales, options);
-    this.mapped = !!mappedLocales;
+    const parent = _NumberFormat(mappedLocales || locales, options);
+    const mapped = !!mappedLocales;
+    this.format = (value) => combineParts(this.formatToParts(value));
+    this.formatRange = (value1, value2) => combineParts(this.formatRangeToParts(value1, value2));
+    this.formatToParts = (value) => {
+        const parts = parent.formatToParts(value);
+        return mapped ? reformatNumberParts(parent, parts) : parts;
+    };
+    this.formatRangeToParts = (value1, value2) => {
+        const parts = parent.formatRangeToParts(value1, value2);
+        return mapped ? reformatNumberParts(parent, parts) : parts;
+    };
+    this.resolvedOptions = () => parent.resolvedOptions();
 };
-// This is all very hacky, but extending the class *AND* preseving the
-// ability to instantiate without `new` is a bit of a pain.
-// Eagerly interested in finding a better way to do this.
-const numberFormatProto = {
-    constructor: PatchedNumberFormat,
-    format(value) {
-        return combineParts(this.formatToParts(value));
-    },
-    formatRange(value1, value2) {
-        return combineParts(this.formatRangeToParts(value1, value2));
-    },
-    formatToParts(value) {
-        return reformatNumberParts.call(this, this.super.formatToParts(value));
-    },
-    formatRangeToParts(value1, value2) {
-        return reformatNumberParts.call(this, this.super.formatRangeToParts(value1, value2));
-    },
-    resolvedOptions() {
-        return this.super.resolvedOptions();
-    },
-};
-PatchedNumberFormat.prototype = numberFormatProto;
+PatchedNumberFormat.prototype = { constructor: PatchedNumberFormat };
 // Static methods (not patched since "is" is not ACTUALLY supported.)
 PatchedNumberFormat.supportedLocalesOf = _NumberFormat.supportedLocalesOf;
 PatchedNumberFormat.$original = _NumberFormat;
@@ -197,11 +179,8 @@ const partMappers = {
         }
     },
 };
-const reformatDateTimeParts = function (parts) {
-    if (!this.mapped) {
-        return parts;
-    }
-    const options = this.super.resolvedOptions();
+const reformatDateTimeParts = function (parent, parts) {
+    const options = parent.resolvedOptions();
     parts.forEach((part, idx) => {
         var _a;
         const mapper = partMappers[part.type];
@@ -226,31 +205,21 @@ const PatchedDateTimeFormat = function DateTimeFormat(locales, options) {
             hourCycle: 'h11',
         };
     }
-    this.super = _DateTimeFormat(mappedLocales || locales, options);
-    this.mapped = !!mappedLocales;
-};
-// This is all very hacky, but extending the class *AND* preseving the
-// ability to instantiate without `new` is a bit of a pain.
-// Eagerly interested in finding a better way to do this.
-const dateTimeFormatProto = {
-    constructor: PatchedDateTimeFormat,
-    format(value) {
-        return combineParts(this.formatToParts(value));
-    },
-    formatRange(value1, value2) {
-        return combineParts(this.formatRangeToParts(value1, value2));
-    },
-    formatToParts(value) {
-        return reformatDateTimeParts.call(this, this.super.formatToParts(value));
-    },
-    formatRangeToParts(value1, value2) {
-        return reformatDateTimeParts.call(this, this.super.formatRangeToParts(value1, value2));
-    },
-    resolvedOptions() {
-        return this.super.resolvedOptions();
-    },
+    const parent = _DateTimeFormat(mappedLocales || locales, options);
+    const mapped = !!mappedLocales;
+    this.format = (value) => combineParts(this.formatToParts(value));
+    this.formatRange = (value1, value2) => combineParts(this.formatRangeToParts(value1, value2));
+    this.formatToParts = (value) => {
+        const parts = parent.formatToParts(value);
+        return mapped ? reformatDateTimeParts(parent, parts) : parts;
+    };
+    this.formatRangeToParts = (value1, value2) => {
+        const parts = parent.formatRangeToParts(value1, value2);
+        return mapped ? reformatDateTimeParts(parent, parts) : parts;
+    };
+    this.resolvedOptions = () => parent.resolvedOptions();
 };
-PatchedDateTimeFormat.prototype = dateTimeFormatProto;
+PatchedDateTimeFormat.prototype = { constructor: PatchedDateTimeFormat };
 // Static methods (not patched since "is" is not ACTUALLY supported.)
 PatchedDateTimeFormat.supportedLocalesOf = _DateTimeFormat.supportedLocalesOf;
 PatchedDateTimeFormat.$original = _DateTimeFormat;
@@ -277,6 +246,8 @@ if (_PluralRules) {
                 super(mappedLocales || locales, options);
                 this.mapped = !!mappedLocales;
                 this.ord = (options === null || options === void 0 ? void 0 : options.type) === 'ordinal';
+                this.select = this.select.bind(this);
+                this.selectRange = this.selectRange.bind(this);
             }
             select(n) {
                 if (this.mapped) {
@@ -310,6 +281,8 @@ if (_ListFormat) {
                 const mappedLocales = mapLocales(locales);
                 super(mappedLocales || locales, options);
                 this.mapped = !!mappedLocales;
+                this.format = this.format.bind(this);
+                this.formatToParts = this.formatToParts.bind(this);
             }
             format(list) {
                 return this.mapped ? combineParts(this.formatToParts(list)) : super.format(list);

package/esm/index.d.ts

@@ -1,7 +1,10 @@
 /// <reference path="./vanillaExtract.d.ts" />
 /// <reference path="./http.d.ts" />
+/// <reference path="./async.d.ts" />
 /// <reference path="./fixIcelandicLocale.d.ts" />
+/// <reference path="./remix/http.d.ts" />
 /// <reference path="./CookieHubConsent.d.tsx" />
+/// <reference path="./remix/Wait.d.tsx" />
 /// <reference path="./next/SiteImprove.d.tsx" />
 /// <reference path="./next/http.d.tsx" />
 

package/esm/remix/Wait.d.ts

@@ -0,0 +1,49 @@
+import { ReactElement, ReactNode } from 'react';
+type WaitPropsBase<T> = {
+    /**
+     * The value you want to wait for before rendering
+     */
+    for: Promise<T> | T;
+    /**
+     * A function to render the children when the value is resolved.
+     *
+     * (If the promise resolved to an object with a truthy `$error` property,
+     * then the `$error` is thrown and this function skipped.)
+     */
+    children: (data: Exclude<T, {
+        $error: string | number | true | object;
+    }>) => ReactNode;
+};
+type WaitFallbacks = {
+    /**
+     * Custom loading/spinner component.
+     */
+    meanwhile?: Exclude<ReactNode, number>;
+    /**
+     * Custom error component if the promise is rejected or if it resolves to an
+     * object with an `error` property.
+     */
+    error?: Exclude<ReactNode, number>;
+};
+export type WaitProps<T> = WaitPropsBase<T> & WaitFallbacks;
+/**
+ * A function component that wraps `@reykjavik/webtools/remix/Wait` to provide
+ * custom properties for `meanwhile` and `error` fallbacks, and/or other
+ * behaviors.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-remix.md#type-waitcomponent
+ */
+export type WaitComponent<CustomProps extends Record<string, unknown> = Record<never, never>> = (<T>(props: WaitPropsBase<T> & CustomProps) => ReactElement) & {
+    displayName?: string;
+};
+/**
+ * Wrapper around [Remix's `Await`](https://remix.run/docs/en/2/components/await)
+ * component, to provide a more ergonomic API.
+ *
+ * If the awaited promise (`props.for`) resolves to an object with a truthy
+ * `$error` property, the `$error` will be thrown.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-remix.md#wait-component
+ */
+export declare const Wait: WaitComponent<WaitFallbacks>;
+export {};

package/esm/remix/Wait.js

@@ -0,0 +1,21 @@
+import React, { Suspense } from 'react';
+import { Await } from '@remix-run/react';
+/**
+ * Wrapper around [Remix's `Await`](https://remix.run/docs/en/2/components/await)
+ * component, to provide a more ergonomic API.
+ *
+ * If the awaited promise (`props.for`) resolves to an object with a truthy
+ * `$error` property, the `$error` will be thrown.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-remix.md#wait-component
+ */
+export const Wait = (props) => (React.createElement(Suspense, { fallback: props.meanwhile || 'Loading...' },
+    React.createElement(Await, { resolve: props.for, errorElement: props.error || 'An error occurred.' }, (value) => {
+        if (value && // eslint-disable-line @typescript-eslint/no-unnecessary-condition
+            typeof value === 'object' &&
+            '$error' in value &&
+            value.$error) {
+            throw value.$error;
+        }
+        return props.children(value);
+    })));

package/esm/remix/http.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Detects if the request is a client fetch, or an initial/full-page load.
+ * Useful for deciding whether to defer data fetching or not.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-remix.md#isclientfetch
+ */
+export declare const isClientFetch: (request: Request) => boolean;

package/esm/remix/http.js

@@ -0,0 +1,11 @@
+/**
+ * Detects if the request is a client fetch, or an initial/full-page load.
+ * Useful for deciding whether to defer data fetching or not.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-remix.md#isclientfetch
+ */
+export const isClientFetch = (request) => 
+// For info about this detection method:
+// - https://github.com/remix-run/remix/discussions/5583
+// - https://github.com/sergiodxa/remix-utils/discussions/311#discussioncomment-8572497
+(request.headers.get('Sec-Fetch-Dest') || '') === 'empty';

package/fixIcelandicLocale.privates.js

@@ -30,29 +30,24 @@ const PatchedCollator = function Collator(locales, options) {
         return new PatchedCollator(locales, options);
     }
     const mappedLocales = mapLocales(locales);
-    this.super = _Collator(mappedLocales || locales, options);
-    this.mapped = !!mappedLocales;
-};
-// This is all very hacky, but extending the class *AND* preseving the
-// ability to instantiate without `new` is a bit of a pain.
-// Eagerly interested in finding a better way to do this.
-const CollatorProto = {
-    constructor: PatchedCollator,
-    compare(a, b) {
-        const res1 = this.super.compare(a, b);
+    const parent = _Collator(mappedLocales || locales, options);
+    const mapped = !!mappedLocales;
+    this.compare = (a, b) => {
+        const res1 = parent.compare(a, b);
+        if (!mapped) {
+            return res1;
+        }
         const a0 = a.charAt(0);
         const b0 = b.charAt(0);
         if (/\d/.test(a0 + b0)) {
             return res1;
         }
-        const res2 = this.super.compare(a0, b0);
+        const res2 = parent.compare(a0, b0);
         return res2 !== 0 ? res2 : res1;
-    },
-    resolvedOptions() {
-        return this.super.resolvedOptions();
-    },
+    };
+    this.resolvedOptions = () => parent.resolvedOptions();
 };
-PatchedCollator.prototype = CollatorProto;
+PatchedCollator.prototype = { constructor: PatchedCollator };
 // Static methods (not patched since "is" is not ACTUALLY supported.)
 PatchedCollator.supportedLocalesOf = _Collator.supportedLocalesOf;
 PatchedCollator.$original = _Collator;
@@ -68,11 +63,8 @@ exports._patchedLocaleCompare.$original = _localeCompare;
 // NumberFormat
 // ===========================================================================
 const _NumberFormat = Intl.NumberFormat;
-const reformatNumberParts = function (parts) {
-    if (!this.mapped) {
-        return parts;
-    }
-    const options = this.super.resolvedOptions();
+const reformatNumberParts = function (parent, parts) {
+    const options = parent.resolvedOptions();
     if (options.style === 'currency' && options.currencyDisplay === 'symbol') {
         const currency = options.currency;
         if (currency === 'DKK' || currency === 'ISK') {
@@ -91,31 +83,21 @@ const PatchedNumberFormat = function NumberFormat(locales, options) {
         return new PatchedNumberFormat(locales, options);
     }
     const mappedLocales = mapLocales(locales);
-    this.super = _NumberFormat(mappedLocales || locales, options);
-    this.mapped = !!mappedLocales;
+    const parent = _NumberFormat(mappedLocales || locales, options);
+    const mapped = !!mappedLocales;
+    this.format = (value) => combineParts(this.formatToParts(value));
+    this.formatRange = (value1, value2) => combineParts(this.formatRangeToParts(value1, value2));
+    this.formatToParts = (value) => {
+        const parts = parent.formatToParts(value);
+        return mapped ? reformatNumberParts(parent, parts) : parts;
+    };
+    this.formatRangeToParts = (value1, value2) => {
+        const parts = parent.formatRangeToParts(value1, value2);
+        return mapped ? reformatNumberParts(parent, parts) : parts;
+    };
+    this.resolvedOptions = () => parent.resolvedOptions();
 };
-// This is all very hacky, but extending the class *AND* preseving the
-// ability to instantiate without `new` is a bit of a pain.
-// Eagerly interested in finding a better way to do this.
-const numberFormatProto = {
-    constructor: PatchedNumberFormat,
-    format(value) {
-        return combineParts(this.formatToParts(value));
-    },
-    formatRange(value1, value2) {
-        return combineParts(this.formatRangeToParts(value1, value2));
-    },
-    formatToParts(value) {
-        return reformatNumberParts.call(this, this.super.formatToParts(value));
-    },
-    formatRangeToParts(value1, value2) {
-        return reformatNumberParts.call(this, this.super.formatRangeToParts(value1, value2));
-    },
-    resolvedOptions() {
-        return this.super.resolvedOptions();
-    },
-};
-PatchedNumberFormat.prototype = numberFormatProto;
+PatchedNumberFormat.prototype = { constructor: PatchedNumberFormat };
 // Static methods (not patched since "is" is not ACTUALLY supported.)
 PatchedNumberFormat.supportedLocalesOf = _NumberFormat.supportedLocalesOf;
 PatchedNumberFormat.$original = _NumberFormat;
@@ -202,11 +184,8 @@ const partMappers = {
         }
     },
 };
-const reformatDateTimeParts = function (parts) {
-    if (!this.mapped) {
-        return parts;
-    }
-    const options = this.super.resolvedOptions();
+const reformatDateTimeParts = function (parent, parts) {
+    const options = parent.resolvedOptions();
     parts.forEach((part, idx) => {
         var _a;
         const mapper = partMappers[part.type];
@@ -231,31 +210,21 @@ const PatchedDateTimeFormat = function DateTimeFormat(locales, options) {
             hourCycle: 'h11',
         };
     }
-    this.super = _DateTimeFormat(mappedLocales || locales, options);
-    this.mapped = !!mappedLocales;
-};
-// This is all very hacky, but extending the class *AND* preseving the
-// ability to instantiate without `new` is a bit of a pain.
-// Eagerly interested in finding a better way to do this.
-const dateTimeFormatProto = {
-    constructor: PatchedDateTimeFormat,
-    format(value) {
-        return combineParts(this.formatToParts(value));
-    },
-    formatRange(value1, value2) {
-        return combineParts(this.formatRangeToParts(value1, value2));
-    },
-    formatToParts(value) {
-        return reformatDateTimeParts.call(this, this.super.formatToParts(value));
-    },
-    formatRangeToParts(value1, value2) {
-        return reformatDateTimeParts.call(this, this.super.formatRangeToParts(value1, value2));
-    },
-    resolvedOptions() {
-        return this.super.resolvedOptions();
-    },
+    const parent = _DateTimeFormat(mappedLocales || locales, options);
+    const mapped = !!mappedLocales;
+    this.format = (value) => combineParts(this.formatToParts(value));
+    this.formatRange = (value1, value2) => combineParts(this.formatRangeToParts(value1, value2));
+    this.formatToParts = (value) => {
+        const parts = parent.formatToParts(value);
+        return mapped ? reformatDateTimeParts(parent, parts) : parts;
+    };
+    this.formatRangeToParts = (value1, value2) => {
+        const parts = parent.formatRangeToParts(value1, value2);
+        return mapped ? reformatDateTimeParts(parent, parts) : parts;
+    };
+    this.resolvedOptions = () => parent.resolvedOptions();
 };
-PatchedDateTimeFormat.prototype = dateTimeFormatProto;
+PatchedDateTimeFormat.prototype = { constructor: PatchedDateTimeFormat };
 // Static methods (not patched since "is" is not ACTUALLY supported.)
 PatchedDateTimeFormat.supportedLocalesOf = _DateTimeFormat.supportedLocalesOf;
 PatchedDateTimeFormat.$original = _DateTimeFormat;
@@ -283,6 +252,8 @@ if (_PluralRules) {
                 super(mappedLocales || locales, options);
                 this.mapped = !!mappedLocales;
                 this.ord = (options === null || options === void 0 ? void 0 : options.type) === 'ordinal';
+                this.select = this.select.bind(this);
+                this.selectRange = this.selectRange.bind(this);
             }
             select(n) {
                 if (this.mapped) {
@@ -316,6 +287,8 @@ if (_ListFormat) {
                 const mappedLocales = mapLocales(locales);
                 super(mappedLocales || locales, options);
                 this.mapped = !!mappedLocales;
+                this.format = this.format.bind(this);
+                this.formatToParts = this.formatToParts.bind(this);
             }
             format(list) {
                 return this.mapped ? combineParts(this.formatToParts(list)) : super.format(list);

package/index.d.ts

@@ -1,7 +1,10 @@
 /// <reference path="./vanillaExtract.d.ts" />
 /// <reference path="./http.d.ts" />
+/// <reference path="./async.d.ts" />
 /// <reference path="./fixIcelandicLocale.d.ts" />
+/// <reference path="./remix/http.d.ts" />
 /// <reference path="./CookieHubConsent.d.tsx" />
+/// <reference path="./remix/Wait.d.tsx" />
 /// <reference path="./next/SiteImprove.d.tsx" />
 /// <reference path="./next/http.d.tsx" />
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/webtools",
-	"version": "0.1.19",
+	"version": "0.1.21",
 	"description": "Misc. JS/TS helpers used by Reykjavík City's web dev teams.",
 	"main": "index.js",
 	"repository": "ssh://git@github.com:reykjavikcity/webtools.git",
@@ -14,12 +14,16 @@
 		"@reykjavik/hanna-utils": "^0.2.3"
 	},
 	"peerDependencies": {
+		"@remix-run/react": "^2.6.0",
 		"@vanilla-extract/css": "^1.14.1",
 		"next": ">=11",
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"peerDependenciesMeta": {
+		"@remix-run/react": {
+			"optional": true
+		},
 		"@vanilla-extract/css": {
 			"optional": true
 		},
@@ -52,14 +56,26 @@
 			"import": "./esm/http.js",
 			"require": "./http.js"
 		},
+		"./async": {
+			"import": "./esm/async.js",
+			"require": "./async.js"
+		},
 		"./fixIcelandicLocale": {
 			"import": "./esm/fixIcelandicLocale.js",
 			"require": "./fixIcelandicLocale.js"
 		},
+		"./remix/http": {
+			"import": "./esm/remix/http.js",
+			"require": "./remix/http.js"
+		},
 		"./CookieHubConsent": {
 			"import": "./esm/CookieHubConsent.js",
 			"require": "./CookieHubConsent.js"
 		},
+		"./remix/Wait": {
+			"import": "./esm/remix/Wait.js",
+			"require": "./remix/Wait.js"
+		},
 		"./next/SiteImprove": {
 			"import": "./esm/next/SiteImprove.js",
 			"require": "./next/SiteImprove.js"

package/remix/Wait.d.ts

@@ -0,0 +1,49 @@
+import { ReactElement, ReactNode } from 'react';
+type WaitPropsBase<T> = {
+    /**
+     * The value you want to wait for before rendering
+     */
+    for: Promise<T> | T;
+    /**
+     * A function to render the children when the value is resolved.
+     *
+     * (If the promise resolved to an object with a truthy `$error` property,
+     * then the `$error` is thrown and this function skipped.)
+     */
+    children: (data: Exclude<T, {
+        $error: string | number | true | object;
+    }>) => ReactNode;
+};
+type WaitFallbacks = {
+    /**
+     * Custom loading/spinner component.
+     */
+    meanwhile?: Exclude<ReactNode, number>;
+    /**
+     * Custom error component if the promise is rejected or if it resolves to an
+     * object with an `error` property.
+     */
+    error?: Exclude<ReactNode, number>;
+};
+export type WaitProps<T> = WaitPropsBase<T> & WaitFallbacks;
+/**
+ * A function component that wraps `@reykjavik/webtools/remix/Wait` to provide
+ * custom properties for `meanwhile` and `error` fallbacks, and/or other
+ * behaviors.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-remix.md#type-waitcomponent
+ */
+export type WaitComponent<CustomProps extends Record<string, unknown> = Record<never, never>> = (<T>(props: WaitPropsBase<T> & CustomProps) => ReactElement) & {
+    displayName?: string;
+};
+/**
+ * Wrapper around [Remix's `Await`](https://remix.run/docs/en/2/components/await)
+ * component, to provide a more ergonomic API.
+ *
+ * If the awaited promise (`props.for`) resolves to an object with a truthy
+ * `$error` property, the `$error` will be thrown.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-remix.md#wait-component
+ */
+export declare const Wait: WaitComponent<WaitFallbacks>;
+export {};

package/remix/Wait.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wait = void 0;
+const react_1 = __importStar(require("react"));
+const react_2 = require("@remix-run/react");
+/**
+ * Wrapper around [Remix's `Await`](https://remix.run/docs/en/2/components/await)
+ * component, to provide a more ergonomic API.
+ *
+ * If the awaited promise (`props.for`) resolves to an object with a truthy
+ * `$error` property, the `$error` will be thrown.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-remix.md#wait-component
+ */
+const Wait = (props) => (react_1.default.createElement(react_1.Suspense, { fallback: props.meanwhile || 'Loading...' },
+    react_1.default.createElement(react_2.Await, { resolve: props.for, errorElement: props.error || 'An error occurred.' }, (value) => {
+        if (value && // eslint-disable-line @typescript-eslint/no-unnecessary-condition
+            typeof value === 'object' &&
+            '$error' in value &&
+            value.$error) {
+            throw value.$error;
+        }
+        return props.children(value);
+    })));
+exports.Wait = Wait;

package/remix/http.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Detects if the request is a client fetch, or an initial/full-page load.
+ * Useful for deciding whether to defer data fetching or not.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-remix.md#isclientfetch
+ */
+export declare const isClientFetch: (request: Request) => boolean;

package/remix/http.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isClientFetch = void 0;
+/**
+ * Detects if the request is a client fetch, or an initial/full-page load.
+ * Useful for deciding whether to defer data fetching or not.
+ *
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-remix.md#isclientfetch
+ */
+const isClientFetch = (request) => 
+// For info about this detection method:
+// - https://github.com/remix-run/remix/discussions/5583
+// - https://github.com/sergiodxa/remix-utils/discussions/311#discussioncomment-8572497
+(request.headers.get('Sec-Fetch-Dest') || '') === 'empty';
+exports.isClientFetch = isClientFetch;