@reykjavik/webtools 0.1.36 → 0.2.0

package/index.d.ts

@@ -3,11 +3,10 @@
 /// <reference path="./async.d.ts" />
 /// <reference path="./fixIcelandicLocale.d.ts" />
 /// <reference path="./errorhandling.d.ts" />
-/// <reference path="./remix/http.d.ts" />
+/// <reference path="./react-router/http.d.ts" />
 /// <reference path="./SiteImprove.d.tsx" />
 /// <reference path="./CookieHubConsent.d.tsx" />
-/// <reference path="./remix/Wait.d.tsx" />
-/// <reference path="./next/SiteImprove.d.tsx" />
+/// <reference path="./react-router/Wait.d.tsx" />
 /// <reference path="./next/http.d.tsx" />
 
 export {};

package/next/http.d.ts

@@ -26,7 +26,7 @@ export type InferErrorPageProps<SEP extends ShowErrorPageFn<any>> = Cleanup<Retu
  * cases when `getServerSideProps` returns an `__error` prop with `statusCode`
  * and optional friendly `message`.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-nextjs.md#makeerrorizeapphoc
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README-nextjs.md#makeerrorizeapphoc
  */
 export declare const makeErrorizeAppHOC: <EP extends Partial<ErrorProps>>(ErrorPage: React.FunctionComponent<EP>) => {
     <P extends {
@@ -48,7 +48,7 @@ export declare const makeErrorizeAppHOC: <EP extends Partial<ErrorProps>>(ErrorP
  * to return an `HTTP_304_NotModified` response with an empty props object,
  * in a way that doesn't make TypeScript shout at you.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-nextjs.md#notmodified304-helper
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README-nextjs.md#notmodified304-helper
  */
 export declare const notModified304: (response: ServerResponse | NextContextLike) => {
     readonly props: any;

package/next/http.js

@@ -29,7 +29,7 @@ __exportStar(require("../http.js"), exports);
  * Use this method inside a `getServerSideProps` method (or API route)
  * to return an error page with proper HTTP status code and all the shit.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-nextjs.md#showerrorpage-helper
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README-nextjs.md#showerrorpage-helper
  */
 const showErrorPage = (response, error, ttl = '2s') => {
     error =
@@ -53,7 +53,7 @@ const showErrorPage = (response, error, ttl = '2s') => {
  * cases when `getServerSideProps` returns an `__error` prop with `statusCode`
  * and optional friendly `message`.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-nextjs.md#makeerrorizeapphoc
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README-nextjs.md#makeerrorizeapphoc
  */
 const makeErrorizeAppHOC = (ErrorPage) => {
     // the HOC
@@ -83,7 +83,7 @@ exports.makeErrorizeAppHOC = makeErrorizeAppHOC;
  * to return an `HTTP_304_NotModified` response with an empty props object,
  * in a way that doesn't make TypeScript shout at you.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-nextjs.md#notmodified304-helper
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README-nextjs.md#notmodified304-helper
  */
 const notModified304 = (response) => {
     response = 'res' in response ? response.res : response;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/webtools",
-	"version": "0.1.36",
+	"version": "0.2.0",
 	"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,16 +14,13 @@
 		"@reykjavik/hanna-utils": "^0.2.16"
 	},
 	"peerDependencies": {
-		"@remix-run/react": "^2.6.0",
 		"@vanilla-extract/css": "^1.14.1",
 		"next": ">=11",
 		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0"
+		"react-dom": ">=16.8.0",
+		"react-router": "^7.0.2"
 	},
 	"peerDependenciesMeta": {
-		"@remix-run/react": {
-			"optional": true
-		},
 		"@vanilla-extract/css": {
 			"optional": true
 		},
@@ -35,10 +32,13 @@
 		},
 		"react-dom": {
 			"optional": true
+		},
+		"react-router": {
+			"optional": true
 		}
 	},
 	"engines": {
-		"node": ">=16"
+		"node": ">=20"
 	},
 	"sideEffects": [
 		"**/fixIcelandicLocale.js"
@@ -68,9 +68,9 @@
 			"import": "./esm/errorhandling.js",
 			"require": "./errorhandling.js"
 		},
-		"./remix/http": {
-			"import": "./esm/remix/http.js",
-			"require": "./remix/http.js"
+		"./react-router/http": {
+			"import": "./esm/react-router/http.js",
+			"require": "./react-router/http.js"
 		},
 		"./SiteImprove": {
 			"import": "./esm/SiteImprove.js",
@@ -80,13 +80,9 @@
 			"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"
+		"./react-router/Wait": {
+			"import": "./esm/react-router/Wait.js",
+			"require": "./react-router/Wait.js"
 		},
 		"./next/http": {
 			"import": "./esm/next/http.js",

package/{esm/remix → react-router}/Wait.d.ts

@@ -31,7 +31,7 @@ export type WaitProps<T> = WaitPropsBase<T> & WaitFallbacks;
  * 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
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README-rr.md#type-waitcomponent
  */
 export type WaitComponent<CustomProps extends Record<string, unknown> = Record<never, never>> = (<T>(props: WaitPropsBase<T> & CustomProps) => ReactElement) & {
     displayName?: string;
@@ -43,7 +43,7 @@ export type WaitComponent<CustomProps extends Record<string, unknown> = Record<n
  * 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
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README-rr.md#wait-component
  */
 export declare const Wait: WaitComponent<WaitFallbacks>;
 export {};

package/{remix → react-router}/Wait.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wait = void 0;
 const react_1 = __importStar(require("react"));
-const react_2 = require("@remix-run/react");
+const react_router_1 = require("react-router");
 /**
  * A thin wrapper around [Remix's `Await`](https://remix.run/docs/en/2/components/await)
  * component, to provide a more ergonomic API.
@@ -33,10 +33,10 @@ const react_2 = require("@remix-run/react");
  * 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
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README-rr.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) => {
+    react_1.default.createElement(react_router_1.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 &&

package/{remix → react-router}/http.d.ts

@@ -2,6 +2,6 @@
  * 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
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README-rr.md#isclientfetch
  */
 export declare const isClientFetch: (request: Request) => boolean;

package/{remix → react-router}/http.js

@@ -5,7 +5,7 @@ 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
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README-rr.md#isclientfetch
  */
 const isClientFetch = (request) => 
 // For info about this detection method:

package/vanillaExtract.d.ts

@@ -2,14 +2,14 @@ import { GlobalStyleRule } from '@vanilla-extract/css';
 /**
  * Adds free-form CSS as a globalStyle
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaglobal
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#vanillaglobal
  */
 export declare const vanillaGlobal: (css: string) => void;
 /**
  * Spreads the return value into a style object, to inject free-form CSS
  * properties (or nested blocks)
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaprops
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#vanillaprops
  */
 export declare const vanillaProps: (css: string) => GlobalStyleRule;
 type ClassNameCallback = (
@@ -27,137 +27,8 @@ classNameSelector: string) => string;
  *
  * To opt out of the `&&` replacement, use the callback function signature.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaclass
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#vanillaclass
  */
 export declare function vanillaClass(css: string | ClassNameCallback): string;
 export declare function vanillaClass(debugId: string, css: string | ClassNameCallback): string;
-/**
- * @deprecated  (Will be removed in v0.2)
- *
- * Replaces all `&` tokens with the given selector string, in a direct
- * (read. "dumb") way. It's mainly useful when used with style-mixins, etc.
- *
- * **NOTE:** `vanillaNest` does NOT support deeply nested blocks, or anything
- * so fancy. It will also replace `&` characters inside values, comments, etc.
- * If you need something more sophisticated, use a custom `postcss` config.
- *
- * ```ts
- * // someCssHelper.ts
- * import { vanillaNest } from '@reykjavik/webtools/vanillaExtract';
- *
- * export const hoverGlow = (
- *   ampSelector: string,
- *   glowiness?: 'normal' | 'insane'
- * ) =>
- *   vanillaNest(
- *     ampSelector,
- *     `
- *     &:hover {
- *       box-shadow: 0 0 20px 5px ${
- *         glowiness === 'insane' ? 'hotpink' : 'salmon'
- *       };
- *     }
- *   `
- *   );
- *
- * // ...then, somewhere else in a *.css.ts file:
- *
- * import { hoverGlow } from '~/someCssHelper.js';
- * import { vanillaGlobal } from '@reykjavik/webtools/vanillaExtract';
- *
- * vanillaGlobal(`
- *   .MyComponent {
- *     border: 1px solid #ccc;
- *     padding: 1em;
- *   }
- *   ${hoverGlow('.MyComponent')}
- *
- *   .MyOtherComponent {
- *     border: 1px solid #ccc;
- *     padding: 1em;
- *   }
- *   ${hoverGlow('.MyOtherComponent', 'insane')}
- * `);
- * ```
- *
- * (This low-level utility function is used internally by `vanillaClassNested`.
- */
-export declare const vanillaNest: (ampSelector: string, css: string) => string;
-/**
- * @deprecated  (Will be removed in v0.2)
- *
- * Returns a scoped cssClassName styled with free-form CSS.
- *
- * It also automatically replaces all `&`-tokens with
- * the selector for the auto-generated class-name.
- *
- * ```ts
- * // someFile.css.ts
- * import { vanillaClassNested } from '@reykjavik/webtools/vanillaExtract';
- *
- * export const myClass = vanillaClassNested(`
- *   background-color: #ccc;
- *   padding: .5em 1em;
- *
- *   /* Nested blocks begin: *​​/
- *   &:hover {
- *     background-color: #666;
- *     color: white;
- *   }
- *   & > strong {
- *     color: maroon;
- *   }
- *   html[data-color-theme="unicorn"] & {
- *     background-color: pink;
- *   }
- * `);
- * ```
- *
- * **NOTE:** All "bare" (un-nested) style properties **must come first**,
- * before any nested blocks.
- *
- * **NOTE 2:** `vanillaClassNested` does NOT support deeply nested blocks, or
- * anything so fancy. It will also replace `&` characters inside values,
- * comments, etc. If you need something more sophisticated, use a custom
- * `postcss` config.
- */
-export declare function vanillaClassNested(css: string): string;
-/** @deprecated  (Will be removed in v0.2) */
-/**
- * Returns a scoped cssClassName styled with free-form CSS.
- *
- * It also automatically replaces all `&`-tokens with
- * the selector for the auto-generated class-name.
- *
- * ```ts
- * // someFile.css.ts
- * import { vanillaClassNested } from '@reykjavik/webtools/vanillaExtract';
- *
- * export const myClass = vanillaClassNested(`
- *   background-color: #ccc;
- *   padding: .5em 1em;
- *
- *   /* Nested blocks begin: *​​/
- *   &:hover {
- *     background-color: #666;
- *     color: white;
- *   }
- *   & > strong {
- *     color: maroon;
- *   }
- *   html[data-color-theme="unicorn"] & {
- *     background-color: pink;
- *   }
- * `);
- * ```
- *
- * **NOTE:** All "bare" (un-nested) style properties **must come first**,
- * before any nested blocks.
- *
- * **NOTE 2:** `vanillaClassNested` does NOT support deeply nested blocks, or
- * anything so fancy. It will also replace `&` characters inside values,
- * comments, etc. If you need something more sophisticated, use a custom
- * `postcss` config.
- */
-export declare function vanillaClassNested(debugId: string, css: string): string;
 export {};

package/vanillaExtract.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.vanillaClassNested = exports.vanillaNest = exports.vanillaClass = exports.vanillaProps = exports.vanillaGlobal = void 0;
+exports.vanillaClass = exports.vanillaProps = exports.vanillaGlobal = void 0;
 const css_1 = require("@vanilla-extract/css");
 /**
  * Adds free-form CSS as a globalStyle
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaglobal
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#vanillaglobal
  */
 const vanillaGlobal = (css) => (0, css_1.globalStyle)('x', { x: `} ${css} x{x:` });
 exports.vanillaGlobal = vanillaGlobal;
@@ -14,7 +14,7 @@ exports.vanillaGlobal = vanillaGlobal;
  * Spreads the return value into a style object, to inject free-form CSS
  * properties (or nested blocks)
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaprops
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#vanillaprops
  */
 const vanillaProps = (css) => ({ x: `; ${css}` });
 exports.vanillaProps = vanillaProps;
@@ -31,70 +31,3 @@ function vanillaClass(cssOrDebugId, css) {
     return className;
 }
 exports.vanillaClass = vanillaClass;
-// ---------------------------------------------------------------------------
-/**
- * @deprecated  (Will be removed in v0.2)
- *
- * Replaces all `&` tokens with the given selector string, in a direct
- * (read. "dumb") way. It's mainly useful when used with style-mixins, etc.
- *
- * **NOTE:** `vanillaNest` does NOT support deeply nested blocks, or anything
- * so fancy. It will also replace `&` characters inside values, comments, etc.
- * If you need something more sophisticated, use a custom `postcss` config.
- *
- * ```ts
- * // someCssHelper.ts
- * import { vanillaNest } from '@reykjavik/webtools/vanillaExtract';
- *
- * export const hoverGlow = (
- *   ampSelector: string,
- *   glowiness?: 'normal' | 'insane'
- * ) =>
- *   vanillaNest(
- *     ampSelector,
- *     `
- *     &:hover {
- *       box-shadow: 0 0 20px 5px ${
- *         glowiness === 'insane' ? 'hotpink' : 'salmon'
- *       };
- *     }
- *   `
- *   );
- *
- * // ...then, somewhere else in a *.css.ts file:
- *
- * import { hoverGlow } from '~/someCssHelper.js';
- * import { vanillaGlobal } from '@reykjavik/webtools/vanillaExtract';
- *
- * vanillaGlobal(`
- *   .MyComponent {
- *     border: 1px solid #ccc;
- *     padding: 1em;
- *   }
- *   ${hoverGlow('.MyComponent')}
- *
- *   .MyOtherComponent {
- *     border: 1px solid #ccc;
- *     padding: 1em;
- *   }
- *   ${hoverGlow('.MyOtherComponent', 'insane')}
- * `);
- * ```
- *
- * (This low-level utility function is used internally by `vanillaClassNested`.
- */
-const vanillaNest = (ampSelector, css) => css.replace(/&/g, ampSelector);
-exports.vanillaNest = vanillaNest;
-function vanillaClassNested(cssOrDebugId, css) {
-    const debugId = css != null ? cssOrDebugId : undefined;
-    css = css != null ? css : cssOrDebugId;
-    const nestPoint = css.indexOf('&');
-    const bareStyles = nestPoint > -1 ? css.slice(0, nestPoint) : css;
-    const nestedStyles = nestPoint > -1 ? css.slice(nestPoint) : undefined;
-    const className = (0, css_1.style)((0, exports.vanillaProps)(bareStyles), debugId);
-    if (nestedStyles) {
-        (0, exports.vanillaGlobal)((0, exports.vanillaNest)(`.${className}`, nestedStyles));
-    }
-    return className;
-}
-exports.vanillaClassNested = vanillaClassNested;

package/esm/next/SiteImprove.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" resolution-mode="require"/>
-import { SiteImproveProps as _SiteImproveProps } from '../SiteImprove.js';
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-export type SiteImproveProps = _SiteImproveProps;
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-export declare const SiteImprove: (props: _SiteImproveProps) => import("react").JSX.Element | null;
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-export declare const pingSiteImprove: (category: string, action: string, label?: string | undefined) => void;
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-export declare const pingSiteImproveOutbound: (ourl: string) => void;

package/esm/next/SiteImprove.js

@@ -1,7 +0,0 @@
-import { pingSiteImprove as _pingSiteImprove, pingSiteImproveOutbound as _pingSiteImproveOutbound, SiteImprove as _SiteImprove, } from '../SiteImprove.js';
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-export const SiteImprove = _SiteImprove;
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-export const pingSiteImprove = _pingSiteImprove;
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-export const pingSiteImproveOutbound = _pingSiteImproveOutbound;

package/next/SiteImprove.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { SiteImproveProps as _SiteImproveProps } from '../SiteImprove.js';
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-export type SiteImproveProps = _SiteImproveProps;
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-export declare const SiteImprove: (props: _SiteImproveProps) => import("react").JSX.Element | null;
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-export declare const pingSiteImprove: (category: string, action: string, label?: string | undefined) => void;
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-export declare const pingSiteImproveOutbound: (ourl: string) => void;

package/next/SiteImprove.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.pingSiteImproveOutbound = exports.pingSiteImprove = exports.SiteImprove = void 0;
-const SiteImprove_js_1 = require("../SiteImprove.js");
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-exports.SiteImprove = SiteImprove_js_1.SiteImprove;
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-exports.pingSiteImprove = SiteImprove_js_1.pingSiteImprove;
-/** @deprecated Instead import from `@reykjavik/webtools/SiteImprove`  (Will be removed in v0.2) */
-exports.pingSiteImproveOutbound = SiteImprove_js_1.pingSiteImproveOutbound;