@reykjavik/webtools 0.1.36 → 0.1.37

package/CHANGELOG.md

@@ -4,19 +4,20 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.1.36
+## 0.1.37
 
-_2024-10-18_
+_2024-10-23_
 
-- `@reykjavik/webtools/next/vanillaExtract`:
-  - fix: Change `vanillaClass` replacement token to be `&&`
+- `@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/SiteImprove.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
 declare global {
     interface Window {
@@ -85,11 +84,11 @@ 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
@@ -97,5 +96,5 @@ export type SiteImproveProps = EitherObj<{
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/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
 // --------------------------------------------------------------------------
@@ -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
     }
 };
 // ===========================================================================
@@ -137,7 +128,6 @@ const loc = typeof document !== 'undefined' ? document.location : {};
  * @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)(() => {
@@ -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/esm/SiteImprove.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
 declare global {
     interface Window {
@@ -85,11 +84,11 @@ 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
@@ -97,5 +96,5 @@ export type SiteImproveProps = EitherObj<{
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/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
 // --------------------------------------------------------------------------
@@ -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
     }
 };
 // ===========================================================================
@@ -109,7 +123,6 @@ const loc = typeof document !== 'undefined' ? document.location : {};
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/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/next/SiteImprove.d.ts

@@ -1,9 +1,8 @@
-/// <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;
+export declare const SiteImprove: (props: _SiteImproveProps) => 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) */

package/next/SiteImprove.d.ts

@@ -1,9 +1,8 @@
-/// <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;
+export declare const SiteImprove: (props: _SiteImproveProps) => 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) */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/webtools",
-	"version": "0.1.36",
+	"version": "0.1.37",
 	"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",