@reykjavik/webtools 0.1.20 → 0.1.21

package/CHANGELOG.md

@@ -4,13 +4,16 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.1.20
+## 0.1.21
 
-_2024-03-11_
+_2024-03-14_
 
-- fix: Make all pached `Intl.*` methods bound to their instances
+- 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.19
+## 0.1.18 – 0.1.20
 
 _2024-03-11_
 
@@ -20,6 +23,7 @@ _2024-03-11_
     (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/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/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.20",
+	"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;