@reykjavik/webtools 0.1.36 → 0.2.0

package/CHANGELOG.md

@@ -4,19 +4,32 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.1.36
+## 0.2.0
 
-_2024-10-18_
+_2024-12-12_
 
-- `@reykjavik/webtools/next/vanillaExtract`:
-  - fix: Change `vanillaClass` replacement token to be `&&`
+- feat: Add `@reykjavik/webtools/react-router/*` (previously `/remix/*`)
+- **BREAKING** feat: Remove all `@reykjavik/webtools/react-router/*` modules
+- **BREAKING** feat: Bump `pkg.engines.node` version to >=20
+- **BREAKING** feat: Remove `@reykjavik/webtools/next/SiteImprove` (deprecated
+  module)
+- **BREAKING** feat: Remove deprecated exports `vanillaNest` and
+  `vanillaClassNested` from `@reykjavik/webtools/vanillaExtract`
+
+## 0.1.37
+
+_2024-10-23_
+
+- `@reykjavik/webtools/SiteImprove`:
+  - fix: `onLoad` and `onError` callback arguments are now typed as `Event`
+  - fix: Script wasn't actually loading. Now it does.
 
-## 0.1.35
+## 0.1.35 – 0.1.36
 
 _2024-10-18_
 
 - `@reykjavik/webtools/next/vanillaExtract`:
-  - feat: `vanillaClass` auto-replaces `.&` tokens in a plain-string input
+  - feat: `vanillaClass` auto-replaces `&&` tokens in a plain-string input
   - docs: Minor improvements to README and JSDoc comments
 
 ## 0.1.34

package/CookieHubConsent.d.ts

@@ -218,14 +218,14 @@ export type CookieHubProviderProps = EitherObj<{
  * management script and sets up a React state object with the relevant user
  * consent flags.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#cookiehubprovider-component
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#cookiehubprovider-component
  */
 export declare const CookieHubProvider: (props: CookieHubProviderProps) => React.JSX.Element;
 /**
  * Returns up-to-date cookie consent flags. For use in React components or hook
  * functions.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#usecookiehubconsent
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#usecookiehubconsent
  */
 export declare const useCookieHubConsent: () => Partial<CookieHubContextState['consent']>;
 export {};

package/CookieHubConsent.js

@@ -61,7 +61,7 @@ const moveCookiehubScriptInDomTree = () => {
  * management script and sets up a React state object with the relevant user
  * consent flags.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#cookiehubprovider-component
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#cookiehubprovider-component
  */
 const CookieHubProvider = (props) => {
     const [state, setState] = (0, react_1.useState)(initialConsentState);
@@ -134,7 +134,7 @@ exports.CookieHubProvider = CookieHubProvider;
  * Returns up-to-date cookie consent flags. For use in React components or hook
  * functions.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#usecookiehubconsent
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#usecookiehubconsent
  */
 const useCookieHubConsent = () => { var _a; return ((_a = (0, react_1.useContext)(CookieHubContext)) === null || _a === void 0 ? void 0 : _a.consent) || {}; };
 exports.useCookieHubConsent = useCookieHubConsent;

package/README.md

@@ -51,7 +51,7 @@ bun add @reykjavik/webtools
   - [`vanillaGlobal`](#vanillaglobal)
   - [`vanillaProps`](#vanillaprops)
 - [Framework Specific Tools](#framework-specific-tools)
-  - [Remix.run Tools](#remixrun-tools)
+  - [React-Router Tools](#react-router-tools)
   - [Next.js Tools](#nextjs-tools)
 - [Contributing](#contributing)
 - [Changelog](#changelog)
@@ -484,7 +484,8 @@ if (myResult.error) {
 
 ### `Result.catch`
 
-**Syntax:** `Result.catch<T, Err>(callback: () => T): ResultTupleObj<T, Err>`
+**Syntax:**
+`Result.catch<T, Err>(callback: () => T): ResultTupleObj<T, Err>`  
 **Syntax:**
 `Result.catch<T, Err>(promise: Promise<T>): Promise<ResultTupleObj<T, Err>>`
 
@@ -881,10 +882,13 @@ const myStyle = style({
 
 ## Framework Specific Tools
 
-### Remix.run Tools
+### React-Router Tools
+
+See [README-rr.md](./README-rr.md) for helpers and components specifically
+designed for use in Remix.run projects.
 
-See [README-remix.md](./README-remix.md) for helpers and components
-specifically designed for use in Remix.run projects.
+(NOTE: If you're still using [Remix.run](https://remix.run) you can install
+version `"^0.1.22"` of this package.)
 
 <!-- #fragment anchors to not break older v0.1 @see links -->
 

package/SiteImprove.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
 declare global {
     interface Window {
@@ -46,14 +45,14 @@ type SiteImproveCustomEvent = [
 /**
  * A small helper for tracking custom UI events and reporting them to SiteImrove.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#pingsiteimprove-helper
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#pingsiteimprove-helper
  */
 export declare const pingSiteImprove: (category: string, action: string, label?: string) => void;
 /**
  * A small helper for reporting to SiteImrove when the user is programmatically
  * being sent to a different URL/resource.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#pingsiteimproveoutbound-helper
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#pingsiteimproveoutbound-helper
  */
 export declare const pingSiteImproveOutbound: (ourl: string) => void;
 export type SiteImproveProps = EitherObj<{
@@ -85,17 +84,17 @@ export type SiteImproveProps = EitherObj<{
     /**
      * Custom callback for when the SiteImprove script has loaded.
      */
-    onLoad?: (e: unknown) => void;
+    onLoad?: (e: Event) => void;
     /**
      * Error callback for if the SiteImprove script fails to load.
      */
-    onError?: (e: unknown) => void;
+    onError?: (e: Event | string) => void;
 };
 /**
  * A component for loading a SiteImprove analytics script and set up page-view
  * tracking across client-side (pushState, replaceState) routing.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#siteimprove-component
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#siteimprove-component
  */
-export declare const SiteImprove: (props: SiteImproveProps) => React.JSX.Element | null;
+export declare const SiteImprove: (props: SiteImproveProps) => null;
 export {};

package/SiteImprove.js

@@ -1,30 +1,7 @@
 "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.SiteImprove = exports.pingSiteImproveOutbound = exports.pingSiteImprove = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const CookieHubConsent_js_1 = require("./CookieHubConsent.js");
 // END: Mock typing of SiteImprove's event tracking API
 // --------------------------------------------------------------------------
@@ -52,7 +29,7 @@ const trackDynamicPageView = (url, refUrl, title) => _emitEvent(['trackdynamic',
 /**
  * A small helper for tracking custom UI events and reporting them to SiteImrove.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#pingsiteimprove-helper
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#pingsiteimprove-helper
  */
 const pingSiteImprove = (category, action, label) => {
     if (process.env.NODE_ENV === 'development' &&
@@ -67,7 +44,7 @@ exports.pingSiteImprove = pingSiteImprove;
  * A small helper for reporting to SiteImrove when the user is programmatically
  * being sent to a different URL/resource.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#pingsiteimproveoutbound-helper
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#pingsiteimproveoutbound-helper
  */
 const pingSiteImproveOutbound = (ourl) => {
     if (process.env.NODE_ENV === 'development' &&
@@ -117,14 +94,28 @@ const useResolvedAnalyticsConsent = (hasConsented) => {
     return ((analytics && hasConsented !== false) || (analytics === undefined && hasConsented));
 };
 // ---------------------------------------------------------------------------
-const mockSIGlobalIfNeeded = (props) => {
-    if (process.env.NODE_ENV !== 'production') {
+const loadSIScript = (props) => {
+    var _a;
+    if (process.env.NODE_ENV === 'production') {
+        if (window._sz || document.querySelector('script#siteimprove-analytics-script')) {
+            console.warn('SiteImprove script already loaded.');
+            return;
+        }
+        const script = document.createElement('script');
+        script.defer = true;
+        script.id = 'siteimprove-analytics-script';
+        script.src = (_a = props.scriptUrl) !== null && _a !== void 0 ? _a : makeScriptUrl(props.accountId);
+        props.onLoad && (script.onload = props.onLoad);
+        props.onError && (script.onerror = props.onError);
+        document.body.append(script);
+    }
+    else {
         setTimeout(() => {
             if (!window._sz) {
                 console.info('Mock loading SiteImprove in development mode.', props.scriptUrl || props.accountId);
                 window._sz = [];
             }
-        }, 300);
+        }, 300); // Aribtrary delay to simulate script loading
     }
 };
 // ===========================================================================
@@ -134,10 +125,9 @@ const loc = typeof document !== 'undefined' ? document.location : {};
  * A component for loading a SiteImprove analytics script and set up page-view
  * tracking across client-side (pushState, replaceState) routing.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#siteimprove-component
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#siteimprove-component
  */
 const SiteImprove = (props) => {
-    var _a;
     const consented = useResolvedAnalyticsConsent(props.hasConsented);
     const thisUrl = `${loc.pathname}${loc.search}${loc.hash}`;
     (0, react_1.useEffect)(() => {
@@ -162,15 +152,11 @@ const SiteImprove = (props) => {
         if (!consented) {
             return;
         }
-        mockSIGlobalIfNeeded(props);
+        loadSIScript(props);
         return logOutboundLinks();
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [consented]);
-    if (!consented || process.env.NODE_ENV !== 'production') {
-        return null;
-    }
-    const scriptUrl = (_a = props.scriptUrl) !== null && _a !== void 0 ? _a : makeScriptUrl(props.accountId);
-    return react_1.default.createElement("script", { defer: true, src: scriptUrl, onLoad: props.onLoad, onError: props.onError });
+    return null;
 };
 exports.SiteImprove = SiteImprove;

package/async.d.ts

@@ -14,7 +14,7 @@ export declare const addLag: (length: number) => <T>(res: T) => Promise<T>;
  * Resolves as soon as all of the passed `promises` have resolved/settled,
  * or after `timeout` milliseconds — whichever comes first.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#maxwait
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/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<{
@@ -24,7 +24,7 @@ export declare function maxWait<PromiseMap extends PlainObj>(timeout: number, pr
  * 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
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/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

@@ -45,7 +45,7 @@ exports.maxWait = maxWait;
  * 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
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#promiseallobject
  */
 const promiseAllObject = (promisesMap) => Promise.all(Object.values(promisesMap)).then((results) => {
     const keys = Object.keys(promisesMap);

package/errorhandling.d.ts

@@ -2,7 +2,7 @@
  * Error subclass for thrown values that got cought and turned into an actual
  * Error, with the thrown value as the `payload` property.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#aserror
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#aserror
  */
 export declare class ErrorFromPayload extends Error {
     payload?: unknown;
@@ -17,7 +17,7 @@ export declare class ErrorFromPayload extends Error {
  * something else it is wrapped in a new `ErrorFromPayload` instance, and the
  * original value is stored in a `payload`
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#aserror
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#aserror
  */
 export declare const asError: (maybeError: unknown) => ErrorFromPayload;
 type SuccessResult<T> = [error: undefined, result: T] & {
@@ -31,14 +31,14 @@ type FailResult<E extends Error> = [error: E] & {
 /**
  * Simple bare-bones discriminated tuple type for a [error, result] pair.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#type-resulttuple
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#type-resulttuple
  */
 export type ResultTuple<T, E extends Error = Error> = [error: undefined, result: T] | [error: E];
 /**
  * Discriminated tuple type for a `[error, result]` pair (same as `ResultTuple`)
  * but with named properties `error` and `result` attached for dev convenience.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#type-resulttupleobj
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#type-resulttupleobj
  */
 export type ResultTupleObj<T, E extends Error = Error> = SuccessResult<T> | FailResult<E>;
 /**
@@ -50,7 +50,7 @@ export type ResultTupleObj<T, E extends Error = Error> = SuccessResult<T> | Fail
  *
  * Works on both promises and sync callback functions.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#resultcatch
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#resultcatch
  */
 declare function catch_<T, E extends Error = ErrorFromPayload>(promise: Promise<T>): Promise<ResultTupleObj<T, E>>;
 declare function catch_<T, E extends Error = ErrorFromPayload>(callback: () => T): ResultTupleObj<T, E>;
@@ -58,19 +58,19 @@ declare function catch_<T, E extends Error = ErrorFromPayload>(callback: () => T
  * Singleton object with small methods for creating, mapping or handling
  * `ResultTupleObj` instances.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#result-singleton
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#result-singleton
  */
 export declare const Result: {
     /**
      * Factory for creating a successful `Result.TupleObj`.
      *
-     * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#resultsuccess
+     * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#resultsuccess
      */
     Success: <T>(result: T) => SuccessResult<T>;
     /**
      * Factory for creating a failed `Result.TupleObj`.
      *
-     * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#resultsfail
+     * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#resultsfail
      */
     Fail: <E extends Error = Error>(e: unknown) => FailResult<E>;
     catch: typeof catch_;
@@ -79,14 +79,14 @@ export declare const Result: {
      * object, applying a transformation function to the result, but retaining
      * the error as-is.
      *
-     * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#resulmap
+     * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#resulmap
      */
     map: <T_1, T2, E_1 extends Error>(result: ResultTuple<T_1, E_1>, mapFn: (resultValue: T_1) => T2) => ResultTupleObj<T2, E_1>;
     /**
      * Unwraps a discriminated [error, result] `Result.Tuple`-like object
      * and throws if there's an error, but returns the result otherwise.
      *
-     * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#resulthrow
+     * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#resulthrow
      */
     throw: <T_2>(result: ResultTuple<T_2, Error>) => T_2;
 };

package/errorhandling.js

@@ -5,7 +5,7 @@ exports.Result = exports.asError = exports.ErrorFromPayload = void 0;
  * Error subclass for thrown values that got cought and turned into an actual
  * Error, with the thrown value as the `payload` property.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#aserror
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#aserror
  */
 class ErrorFromPayload extends Error {
     constructor(payload) {
@@ -27,7 +27,7 @@ exports.ErrorFromPayload = ErrorFromPayload;
  * something else it is wrapped in a new `ErrorFromPayload` instance, and the
  * original value is stored in a `payload`
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#aserror
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#aserror
  */
 const asError = (maybeError) => {
     if (maybeError instanceof Error) {
@@ -61,19 +61,19 @@ function catch_(something) {
  * Singleton object with small methods for creating, mapping or handling
  * `ResultTupleObj` instances.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#result-singleton
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#result-singleton
  */
 exports.Result = {
     /**
      * Factory for creating a successful `Result.TupleObj`.
      *
-     * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#resultsuccess
+     * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#resultsuccess
      */
     Success,
     /**
      * Factory for creating a failed `Result.TupleObj`.
      *
-     * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#resultsfail
+     * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#resultsfail
      */
     Fail,
     // NOTE: The JSDoc must be placed above the `catch_` function above.
@@ -83,7 +83,7 @@ exports.Result = {
      * object, applying a transformation function to the result, but retaining
      * the error as-is.
      *
-     * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#resulmap
+     * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#resulmap
      */
     map: (result, mapFn) => {
         const [error, resultValue] = result;
@@ -96,7 +96,7 @@ exports.Result = {
      * Unwraps a discriminated [error, result] `Result.Tuple`-like object
      * and throws if there's an error, but returns the result otherwise.
      *
-     * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#resulthrow
+     * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#resulthrow
      */
     throw: (result) => {
         if (result[0]) {

package/esm/CookieHubConsent.d.ts

@@ -218,14 +218,14 @@ export type CookieHubProviderProps = EitherObj<{
  * management script and sets up a React state object with the relevant user
  * consent flags.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#cookiehubprovider-component
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#cookiehubprovider-component
  */
 export declare const CookieHubProvider: (props: CookieHubProviderProps) => React.JSX.Element;
 /**
  * Returns up-to-date cookie consent flags. For use in React components or hook
  * functions.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#usecookiehubconsent
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#usecookiehubconsent
  */
 export declare const useCookieHubConsent: () => Partial<CookieHubContextState['consent']>;
 export {};

package/esm/CookieHubConsent.js

@@ -35,7 +35,7 @@ const moveCookiehubScriptInDomTree = () => {
  * management script and sets up a React state object with the relevant user
  * consent flags.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#cookiehubprovider-component
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#cookiehubprovider-component
  */
 export const CookieHubProvider = (props) => {
     const [state, setState] = useState(initialConsentState);
@@ -107,6 +107,6 @@ export const CookieHubProvider = (props) => {
  * Returns up-to-date cookie consent flags. For use in React components or hook
  * functions.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#usecookiehubconsent
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#usecookiehubconsent
  */
 export const useCookieHubConsent = () => { var _a; return ((_a = useContext(CookieHubContext)) === null || _a === void 0 ? void 0 : _a.consent) || {}; };

package/esm/SiteImprove.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
 declare global {
     interface Window {
@@ -46,14 +45,14 @@ type SiteImproveCustomEvent = [
 /**
  * A small helper for tracking custom UI events and reporting them to SiteImrove.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#pingsiteimprove-helper
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#pingsiteimprove-helper
  */
 export declare const pingSiteImprove: (category: string, action: string, label?: string) => void;
 /**
  * A small helper for reporting to SiteImrove when the user is programmatically
  * being sent to a different URL/resource.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#pingsiteimproveoutbound-helper
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#pingsiteimproveoutbound-helper
  */
 export declare const pingSiteImproveOutbound: (ourl: string) => void;
 export type SiteImproveProps = EitherObj<{
@@ -85,17 +84,17 @@ export type SiteImproveProps = EitherObj<{
     /**
      * Custom callback for when the SiteImprove script has loaded.
      */
-    onLoad?: (e: unknown) => void;
+    onLoad?: (e: Event) => void;
     /**
      * Error callback for if the SiteImprove script fails to load.
      */
-    onError?: (e: unknown) => void;
+    onError?: (e: Event | string) => void;
 };
 /**
  * A component for loading a SiteImprove analytics script and set up page-view
  * tracking across client-side (pushState, replaceState) routing.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#siteimprove-component
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#siteimprove-component
  */
-export declare const SiteImprove: (props: SiteImproveProps) => React.JSX.Element | null;
+export declare const SiteImprove: (props: SiteImproveProps) => null;
 export {};

package/esm/SiteImprove.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useCookieHubConsent } from './CookieHubConsent.js';
 // END: Mock typing of SiteImprove's event tracking API
 // --------------------------------------------------------------------------
@@ -26,7 +26,7 @@ const trackDynamicPageView = (url, refUrl, title) => _emitEvent(['trackdynamic',
 /**
  * A small helper for tracking custom UI events and reporting them to SiteImrove.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#pingsiteimprove-helper
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#pingsiteimprove-helper
  */
 export const pingSiteImprove = (category, action, label) => {
     if (process.env.NODE_ENV === 'development' &&
@@ -40,7 +40,7 @@ export const pingSiteImprove = (category, action, label) => {
  * A small helper for reporting to SiteImrove when the user is programmatically
  * being sent to a different URL/resource.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#pingsiteimproveoutbound-helper
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#pingsiteimproveoutbound-helper
  */
 export const pingSiteImproveOutbound = (ourl) => {
     if (process.env.NODE_ENV === 'development' &&
@@ -89,14 +89,28 @@ const useResolvedAnalyticsConsent = (hasConsented) => {
     return ((analytics && hasConsented !== false) || (analytics === undefined && hasConsented));
 };
 // ---------------------------------------------------------------------------
-const mockSIGlobalIfNeeded = (props) => {
-    if (process.env.NODE_ENV !== 'production') {
+const loadSIScript = (props) => {
+    var _a;
+    if (process.env.NODE_ENV === 'production') {
+        if (window._sz || document.querySelector('script#siteimprove-analytics-script')) {
+            console.warn('SiteImprove script already loaded.');
+            return;
+        }
+        const script = document.createElement('script');
+        script.defer = true;
+        script.id = 'siteimprove-analytics-script';
+        script.src = (_a = props.scriptUrl) !== null && _a !== void 0 ? _a : makeScriptUrl(props.accountId);
+        props.onLoad && (script.onload = props.onLoad);
+        props.onError && (script.onerror = props.onError);
+        document.body.append(script);
+    }
+    else {
         setTimeout(() => {
             if (!window._sz) {
                 console.info('Mock loading SiteImprove in development mode.', props.scriptUrl || props.accountId);
                 window._sz = [];
             }
-        }, 300);
+        }, 300); // Aribtrary delay to simulate script loading
     }
 };
 // ===========================================================================
@@ -106,10 +120,9 @@ const loc = typeof document !== 'undefined' ? document.location : {};
  * A component for loading a SiteImprove analytics script and set up page-view
  * tracking across client-side (pushState, replaceState) routing.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#siteimprove-component
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#siteimprove-component
  */
 export const SiteImprove = (props) => {
-    var _a;
     const consented = useResolvedAnalyticsConsent(props.hasConsented);
     const thisUrl = `${loc.pathname}${loc.search}${loc.hash}`;
     useEffect(() => {
@@ -134,14 +147,10 @@ export const SiteImprove = (props) => {
         if (!consented) {
             return;
         }
-        mockSIGlobalIfNeeded(props);
+        loadSIScript(props);
         return logOutboundLinks();
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [consented]);
-    if (!consented || process.env.NODE_ENV !== 'production') {
-        return null;
-    }
-    const scriptUrl = (_a = props.scriptUrl) !== null && _a !== void 0 ? _a : makeScriptUrl(props.accountId);
-    return React.createElement("script", { defer: true, src: scriptUrl, onLoad: props.onLoad, onError: props.onError });
+    return null;
 };

package/esm/async.d.ts

@@ -14,7 +14,7 @@ export declare const addLag: (length: number) => <T>(res: T) => Promise<T>;
  * Resolves as soon as all of the passed `promises` have resolved/settled,
  * or after `timeout` milliseconds — whichever comes first.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#maxwait
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/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<{
@@ -24,7 +24,7 @@ export declare function maxWait<PromiseMap extends PlainObj>(timeout: number, pr
  * 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
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/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

@@ -39,7 +39,7 @@ export function maxWait(timeout, promises) {
  * 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
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#promiseallobject
  */
 export const promiseAllObject = (promisesMap) => Promise.all(Object.values(promisesMap)).then((results) => {
     const keys = Object.keys(promisesMap);