@reykjavik/webtools 0.1.22 → 0.1.23-canary.2

package/CHANGELOG.md

@@ -4,13 +4,18 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.1.22
+## 0.1.23-canary.2
 
-_2024-03-14_
+_2024-03-21_
 
-- fix: Relax unnecessary restriction on fallback props
+- feat: Add framework agnostic `@reykjavik/webtools/SiteImprove` module —
+  deprecate `@reykjavik/webtools/next/SiteImprove` instead
+- `@reykjavik/webtools/remix/Wait`:
+  - fix: Properly reject `data.$error`s as to not trigger error boundaries
+- `@reykjavik/webtools/async`:
+  - fix: `maxWait` should gracefully ignore rejecting promises
 
-## 0.1.21
+## 0.1.21 – 0.1.22
 
 _2024-03-14_
 

package/README.md

@@ -22,23 +22,27 @@ bun add @reykjavik/webtools
   - [`cacheControl` helper](#cachecontrol-helper)
     - [Type `TTLConfig`](#type-ttlconfig)
   - [`toSec` TTL helper](#tosec-ttl-helper)
-- [`@reykjavik/webtools/CookieHubConsent`](#reykjavikwebtoolscookiehubconsent)
-  - [`CookieHubProvider` component](#cookiehubprovider-component)
-  - [`useCookieHubConsent`](#usecookiehubconsent)
 - [`@reykjavik/webtools/async`](#reykjavikwebtoolsasync)
   - [`promiseAllObject`](#promiseallobject)
   - [`maxWait`](#maxwait)
+- [`@reykjavik/webtools/fixIcelandicLocale`](#reykjavikwebtoolsfixicelandiclocale)
+  - [Limitations](#limitations)
+- [`@reykjavik/webtools/SiteImprove`](#reykjavikwebtoolssiteimprove)
+  - [`SiteImprove` component](#siteimprove-component)
+  - [`pingSiteImprove` helper](#pingsiteimprove-helper)
+  - [`pingSiteImproveOutbound` helper](#pingsiteimproveoutbound-helper)
+- [`@reykjavik/webtools/CookieHubConsent`](#reykjavikwebtoolscookiehubconsent)
+  - [`CookieHubProvider` component](#cookiehubprovider-component)
+  - [`useCookieHubConsent`](#usecookiehubconsent)
 - [`@reykjavik/webtools/vanillaExtract`](#reykjavikwebtoolsvanillaextract)
   - [`vanillaGlobal`](#vanillaglobal)
   - [`vanillaProps`](#vanillaprops)
   - [`vanillaClass`](#vanillaclass)
   - [`vanillaClassNested`](#vanillaclassnested)
   - [`vanillaNest`](#vanillanest)
-- [`@reykjavik/webtools/fixIcelandicLocale`](#reykjavikwebtoolsfixicelandiclocale)
-  - [Limitations](#limitations)
 - [Framework Specific Tools](#framework-specific-tools)
-  - [Next.js Tools](#nextjs-tools)
   - [Remix.run Tools](#remixrun-tools)
+  - [Next.js Tools](#nextjs-tools)
 - [Contributing](#contributing)
 - [Changelog](#changelog)
 
@@ -184,6 +188,219 @@ const ttlSec = toSec(ttl);
 
 ---
 
+## `@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.
+
+If any of the promises reject, their values become undefined in the returned
+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/fixIcelandicLocale`
+
+As of early 2024, Google Chrome still does not support the Icelandic locale
+`is`/`is-IS` in any way. Meanwhile other browsers have supported it for over a
+decade.
+
+This module does attempts to patches the following methods/classes by
+substituting the `is` locale with `da` (Danish) and apply a few post-hoc fixes
+to their return values.
+
+- `Intl.Collator` and `String.prototype.localeCompare`
+- `Intl.NumberFormat` and `Number.prototype.toLocaleString`
+- `Intl.DateTimeFormat` and `Date.prototype.toLocaleDateString`
+- `Intl.PluralRules`
+- `Intl.ListFormat`
+
+This provides usable (but not perfect) results, with some caveats listed
+below.
+
+To apply these patches, simply "side-effect import" this module at the top of
+your app's entry point:
+
+```ts
+import '@reykjavik/webtools/fixIcelandicLocale';
+
+// Then continue with your day and use `localeCompare` and other Intl.* methods
+// as you normally would. (See "limitations" below.)
+```
+
+(**NOTE** The patch is only applied in engines that fail a simple feature
+detection test.)
+
+### Limitations
+
+**`Intl.Collator` and `localeCompare`:**
+
+- It incorrectly treats `ð` and `d` as the same letter (most of the time), and
+  the acute-accented characters `á`, `é`, `í`, `ó`, `ú` and `ý` get lumped in
+  with their non-accented counterparts (unless the compared).  
+  We fix this only for the first letter in the string, but not for the rest of
+  it.
+
+**`Intl.NumberFormat` and `toLocaleString`:**
+
+- The `style: "unit"` option is not supported and prints units in Danish. (Soo
+  many units and unit-variants…)
+- The `currencyDisplay: "name"` option is not supported and prints the
+  currency's full name in Danish.
+
+**`Intl.DateTimeFormat` and `toLocaleDateString`:**
+
+- The `month: 'narrow'` and `weekday: 'narrow'` options are not supported, and
+  print the corresponding Danish initials.
+- For `timeZoneName` the values `"long"`, `"shortGeneric"` and `"longGeneric"`
+  will appear in Danish.
+- The `timeStyle: 'full'` option prints the timezone names in Danish
+- The `dayPeriod` option has a couple of slight mismatches, at 5 am and 12
+  noon.
+
+---
+
+## `@reykjavik/webtools/SiteImprove`
+
+Contains React helpers for loading SiteImprove's analytics scripts, and
+perform page-view and custom event tracking in applications with client-side
+(`pushState`) routing.
+
+### `SiteImprove` component
+
+A component for loading a SiteImprove analytics script and set up page-view
+tracking across URL routes.
+
+It also automatically logs all out-bound link clicks, to match the behavior of
+the vanilla SiteImprove script.
+
+**Props:**
+
+The Component's props have detailed JSDoc comments (displayed in your code
+editor), but there's a brief summary:
+
+- `accountId?: string` — Your SiteImprove account ID. (alternative to
+  `scriptUrl` prop).
+- `scriptUrl?: string` — The full SiteImprove analytics script URL.
+  (alternative to `accountId` prop).
+- `hasConsented?: boolean` — Manual GDPR 'analytics' consent flag. Allows hard
+  opt-out, but defers to
+  [`CookieHubProvider` values](./README.md#usecookiehubconsent) if they are
+  available.
+- `onLoad?: (e: unknown) => void` — Fires when the script has loaded.
+- `onError?: (e: unknown) => void` — Fires if loading the script failed.
+
+Example usage somewhere in your application:
+
+```js
+import { SiteImprove } from '@reykjavik/webtools/SiteImprove';
+
+// ideally emit this from your loader function
+const siteImproveAccountId = '[ACCOUNT_ID]'; // e.g. "7654321"
+
+   const location = useRouter()
+// ...then Inside root.tsx component:
+  <SiteImprove
+    accountId={siteImproveAccountId}
+    onError={(error) =>
+      Logger('error', 'An error occured initializing siteimprove', error)
+    }
+  />;
+```
+
+In dev mode it does NOT load the SiteImprove script and merely logs page-view
+events to the console.
+
+### `pingSiteImprove` helper
+
+**Syntax:**
+`pingSiteImprove(category: string, action: string, label?: string): void`
+
+A small helper for tracking custom UI events and reporting them to SiteImrove.
+
+It safely manages GDPR consent, so you can use it unconditionally.
+
+```js
+import { pingSiteImprove } from '@reykjavik/webtools/SiteImprove';
+
+const handleSubmit = () => {
+  // perform submit action...
+  if (success) {
+    pingSiteImprove('application', 'add_new');
+  }
+};
+```
+
+### `pingSiteImproveOutbound` helper
+
+**Syntax:** `pingSiteImproveOutbound(ourl: string): void`
+
+A small helper for reporting to SiteImrove when the user is programmatically
+being sent to a different URL/resource.
+
+```js
+import { pingSiteImproveOutbound } from '@reykjavik/webtools/SiteImprove';
+
+const handleSubmit = () => {
+  // perform submit action...
+  if (success) {
+    const fileUrl = '/download/report.pdf';
+    pingSiteImproveOutbound(fileUrl);
+    document.location.href = fileUrl;
+  }
+};
+```
+
+---
+
 ## `@reykjavik/webtools/CookieHubConsent`
 
 Contains React helpers for loading CookieHub's consent manager and reading
@@ -257,62 +474,6 @@ 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)
@@ -486,68 +647,14 @@ vanillaGlobal(`
 
 ---
 
-## `@reykjavik/webtools/fixIcelandicLocale`
-
-As of early 2004, Google Chrome still does not support the Icelandic locale
-`is`/`is-IS` in any way. Meanwhile other browsers have supported it for over a
-decade.
-
-This module does attempts to patches the following methods/classes by
-substituting the `is` locale with `da` (Danish) and apply a few post-hoc fixes
-to their return values.
-
-- `Intl.Collator` and `String.prototype.localeCompare`
-- `Intl.NumberFormat` and `Number.prototype.toLocaleString`
-- `Intl.DateTimeFormat` and `Date.prototype.toLocaleDateString`
-- `Intl.PluralRules`
-- `Intl.ListFormat`
-
-This provides usable (but not perfect) results, with some caveats listed
-below.
-
-To apply these patches, simply "side-effect import" this module at the top of
-your app's entry point:
-
-```ts
-import '@reykjavik/webtools/fixIcelandicLocale';
-
-// Then continue with your day and use `localeCompare` and other Intl.* methods
-// as you normally would. (See "limitations" below.)
-```
-
-(**NOTE** The patch is only applied in engines that fail a simple feature
-detection test.)
-
-### Limitations
-
-**`Intl.Collator` and `localeCompare`:**
-
-- It incorrectly treats `ð` and `d` as the same letter (most of the time), and
-  the acute-accented characters `á`, `é`, `í`, `ó`, `ú` and `ý` get lumped in
-  with their non-accented counterparts (unless the compared).  
-  We fix this only for the first letter in the string, but not for the rest of
-  it.
-
-**`Intl.NumberFormat` and `toLocaleString`:**
-
-- The `style: "unit"` option is not supported and prints units in Danish. (Soo
-  many units and unit-variants…)
-- The `currencyDisplay: "name"` option is not supported and prints the
-  currency's full name in Danish.
-
-**`Intl.DateTimeFormat` and `toLocaleDateString`:**
-
-- The `month: 'narrow'` and `weekday: 'narrow'` options are not supported, and
-  print the corresponding Danish initials.
-- For `timeZoneName` the values `"long"`, `"shortGeneric"` and `"longGeneric"`
-  will appear in Danish.
-- The `timeStyle: 'full'` option prints the timezone names in Danish
-- The `dayPeriod` option has a couple of slight mismatches, at 5 am and 12
-  noon.
+## Framework Specific Tools
 
 ---
 
-## Framework Specific Tools
+### Remix.run Tools
+
+See [README-remix.md](./README-remix.md) for helpers and components
+specifically designed for use in Remix.run projects.
 
 ---
 
@@ -556,24 +663,11 @@ detection test.)
 <a name="reykjavikwebtoolsnexthttp"></a> <a name="makeerrorizeapphoc"></a>
 <a name="showerrorpage-helper"></a> <a name="notmodified304-helper"></a>
 <a name="reykjavikwebtoolsnextsiteimprove"></a>
-<a name="siteimprove-component"></a> <a name="pingsiteimprove-helper"></a>
-<a name="pingsiteimproveoutbound-helper"></a>
 
 ### Next.js Tools
 
-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.
-
----
-
-### 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.
+See [README-nextjs.md](./README-nextjs.md) for helpers and components
+specifically designed for use in Next.js projects.
 
 ---
 

package/{esm/next/SiteImprove.privates.d.ts → SiteImprove.d.ts}

@@ -1,3 +1,4 @@
+import React from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
 declare global {
     interface Window {
@@ -14,8 +15,8 @@ declare global {
         };
     }
 }
-export type SiteImproveEvent = SiteImprovePageView | SiteImproveRequest | SiteImproveCustomEvent;
-export type SiteImprovePageView = [
+type SiteImproveEvent = SiteImprovePageView | SiteImproveRequest | SiteImproveCustomEvent;
+type SiteImprovePageView = [
     type: 'trackdynamic',
     data: {
         /** New page URL */
@@ -26,7 +27,7 @@ export type SiteImprovePageView = [
         title?: string;
     }
 ];
-export type SiteImproveRequest = [
+type SiteImproveRequest = [
     type: 'request',
     data: {
         /** Outbound URL */
@@ -36,33 +37,25 @@ export type SiteImproveRequest = [
         autoonclick?: 1;
     }
 ];
-export type SiteImproveCustomEvent = [
+type SiteImproveCustomEvent = [
     type: 'event',
     category: string,
     action: string,
     label?: string
 ];
-/**
- * A small helper to send "trackdynamic" page view/load events to SiteImrove.
- *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-nextjs.md#pingsiteimprove-helper
- */
-export declare const trackDynamicPageView: (url: string, refUrl?: string, title?: string) => void;
 /**
  * A small helper for tracking custom UI events and reporting them to SiteImrove.
  *
- * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README-nextjs.md#pingsiteimprove-helper
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/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-nextjs.md#pingsiteimproveoutbound-helper
+ * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#pingsiteimproveoutbound-helper
  */
 export declare const pingSiteImproveOutbound: (ourl: string) => void;
-export declare const logOutboundLinks: () => () => void;
-export declare const makeScriptUrl: (accountId: string) => string;
 export type SiteImproveProps = EitherObj<{
     /**
      * Your SiteImprove account ID.
@@ -88,7 +81,7 @@ export type SiteImproveProps = EitherObj<{
      * A value of `true` still defers to the 'analytics' consent state provided
      * by the `CookieHubProvider` component (if present).
      */
-    hasConstented?: boolean;
+    hasConsented?: boolean;
     /**
      * Custom callback for when the SiteImprove script has loaded.
      */
@@ -98,3 +91,11 @@ export type SiteImproveProps = EitherObj<{
      */
     onError?: (e: unknown) => 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
+ */
+export declare const SiteImprove: (props: SiteImproveProps) => React.JSX.Element | null;
+export {};

package/SiteImprove.js

@@ -0,0 +1,176 @@
+"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 CookieHubConsent_js_1 = require("./CookieHubConsent.js");
+// END: Mock typing of SiteImprove's event tracking API
+// --------------------------------------------------------------------------
+//
+// ---------------------------------------------------------------------------
+const _emitEvent = typeof window === 'undefined'
+    ? () => undefined
+    : (event) => {
+        let _sz = window._sz;
+        if (!_sz) {
+            _sz = window._sz = [];
+            _sz._jit_defined_ = true;
+        }
+        _sz.push(event);
+        if (process.env.NODE_ENV === 'development') {
+            console.info('SiteImprove:', event);
+        }
+    };
+// ---------------------------------------------------------------------------
+/**
+ * A small helper to send "trackdynamic" page view/load events to SiteImrove.
+ */
+const trackDynamicPageView = (url, refUrl, title) => _emitEvent(['trackdynamic', { url, ref: refUrl, title }]);
+// ---------------------------------------------------------------------------
+/**
+ * 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
+ */
+const pingSiteImprove = (category, action, label) => {
+    if (process.env.NODE_ENV === 'development' &&
+        (!window._sz || window._sz._jit_defined_)) {
+        console.warn('`pingSiteImprove` was called before SiteImprove script was loaded.');
+    }
+    _emitEvent(['event', category, action, label]);
+};
+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
+ */
+const pingSiteImproveOutbound = (ourl) => {
+    if (process.env.NODE_ENV === 'development' &&
+        (!window._sz || window._sz._jit_defined_)) {
+        console.warn('`pingSiteImproveOutbound` was called before SiteImprove script was loaded.');
+    }
+    _emitEvent(['request', { ourl, ref: document.location.href }]);
+};
+exports.pingSiteImproveOutbound = pingSiteImproveOutbound;
+// ---------------------------------------------------------------------------
+const logOutboundLinks = () => {
+    // NOTE: It's normal for SiteImprove's outbound logging to happen also for internal
+    // links, but it's not a problem since SiteImprove filter the results themselves.
+    const captureLinkClicks = (e) => {
+        const link = e.target.closest('a[href]');
+        if (!link || link.$$bound) {
+            return;
+        }
+        link.$$bound = true;
+        // Waiting for the bubble phase allows other click handlers to preventDefault()
+        link.addEventListener('click', (e) => {
+            var _a, _b;
+            if (e.defaultPrevented) {
+                return;
+            }
+            // Skip logging outbound request if SiteImprove has already done so.
+            // BTW, SiteImprove binds its autoonclick handlers on "mousedown"
+            // so they're guaranteed to have run before our "click" listener.
+            const events = (_b = (_a = window._sz) === null || _a === void 0 ? void 0 : _a.core) === null || _b === void 0 ? void 0 : _b.data;
+            const [type, data] = (events && events[events.length - 1]) || [];
+            if (type === 'request' && data.autoonclick && data.ourl === link.href) {
+                return;
+            }
+            (0, exports.pingSiteImproveOutbound)(link.href);
+        });
+    };
+    const { body } = document;
+    // bind 'click' listener to the capture phase
+    body.addEventListener('click', captureLinkClicks, true);
+    return () => body.removeEventListener('click', captureLinkClicks, true);
+};
+// ---------------------------------------------------------------------------
+const makeScriptUrl = (accountId) => `https://siteimproveanalytics.com/js/siteanalyze_${accountId}.js`;
+// ---------------------------------------------------------------------------
+const useResolvedAnalyticsConsent = (hasConsented) => {
+    const { analytics } = (0, CookieHubConsent_js_1.useCookieHubConsent)();
+    return ((analytics && hasConsented !== false) || (analytics === undefined && hasConsented));
+};
+// ---------------------------------------------------------------------------
+const mockSIGlobalIfNeeded = (props) => {
+    if (process.env.NODE_ENV !== 'production') {
+        setTimeout(() => {
+            if (!window._sz) {
+                console.info('Mock loading SiteImprove in development mode.', props.scriptUrl || props.accountId);
+                window._sz = [];
+            }
+        }, 300);
+    }
+};
+// ===========================================================================
+let lastUrl;
+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
+ */
+const SiteImprove = (props) => {
+    var _a;
+    const consented = useResolvedAnalyticsConsent(props.hasConsented);
+    const thisUrl = `${loc.pathname}${loc.search}${loc.hash}`;
+    (0, react_1.useEffect)(() => {
+        if (!consented) {
+            lastUrl = thisUrl;
+            return;
+        }
+        if (lastUrl === undefined) {
+            lastUrl = thisUrl;
+        }
+        const checkCurrentUrl = () => {
+            if (thisUrl !== lastUrl) {
+                trackDynamicPageView(thisUrl, lastUrl, document.title);
+                lastUrl = thisUrl;
+            }
+        };
+        checkCurrentUrl();
+        window.addEventListener('popstate', checkCurrentUrl);
+        return () => window.removeEventListener('popstate', checkCurrentUrl);
+    }, [consented, thisUrl]);
+    (0, react_1.useEffect)(() => {
+        if (!consented) {
+            return;
+        }
+        mockSIGlobalIfNeeded(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 });
+};
+exports.SiteImprove = SiteImprove;