@reykjavik/webtools 0.1.35 → 0.1.37

package/CHANGELOG.md

@@ -4,12 +4,20 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.1.35
+## 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.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/README.md

@@ -774,11 +774,11 @@ CSS.
 Returns a scoped cssClassName styled with free-form CSS. This function is a
 thin wrapper around vanilla-extract's `style` function.
 
-When you pass it a string, all `.&` tokens are automatically replaced with the
+When you pass it a string, all `&&` tokens are automatically replaced with the
 selector for the auto-generated class-name. Note that in such cases EVERY
 style property must be wrapped in a selector block.
 
-To opt out of the `.&` replacement, use the callback function signature.
+To opt out of the `&&` replacement, use the callback function signature.
 
 ```ts
 // someFile.css.ts
@@ -790,13 +790,13 @@ export const myClass = vanillaClass(`
   padding: .5em 1em;
 `);
 
-// With .& tokens that get replaced with the generated class-name
+// With && tokens that get replaced with the generated class-name
 export const myClasWithAmp = vanillaClass(`
-  .& {
+  && {
     background-color: #ccc;
     padding: .5em 1em;
   }
-  .& > strong {
+  && > strong {
     color: #c00;
   }
 `);
@@ -817,8 +817,8 @@ export const myOtherClass = vanillaClass(
         background-color: #eee;
       }
     }
-    /* ".&" tokens in CSS returned from a callback are not replaced */
-    .& { will-not-be: interpolated; }
+    /* NOTE: '&&' tokens returned from a callback function are NOT replaced */
+    && { will-not-be: interpolated; }
   `
 );
 
@@ -832,7 +832,7 @@ export const humanReadableClass = vanillaClass(
 );
 ```
 
-(NOTE: The dot-prefixed `.&` pattern is chosen to not conflict with the bare
+(NOTE: The dot-prefixed `&&` pattern is chosen to not conflict with the bare
 `&` token in modern nested CSS.)
 
 ### `vanillaGlobal`

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/esm/vanillaExtract.d.ts

@@ -21,11 +21,11 @@ classNameSelector: string) => string;
  * Returns a scoped cssClassName styled with free-form CSS. This function is a
  * thin wrapper around vanilla-extract's `style` function.
  *
- * When you pass it a string, all `.&` tokens are automatically replaced with the
+ * When you pass it a string, all `&&` tokens are automatically replaced with the
  * selector for the auto-generated class-name. Note that in such cases EVERY
  * style property must be wrapped in a selector block.
  *
- * To opt out of the `.&` replacement, use the callback function signature.
+ * To opt out of the `&&` replacement, use the callback function signature.
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaclass
  */

package/esm/vanillaExtract.js

@@ -16,13 +16,13 @@ export const vanillaProps = (css) => ({ x: `; ${css}` });
 export function vanillaClass(cssOrDebugId, css) {
     const debugId = css != null ? cssOrDebugId : undefined;
     css = css != null ? css : cssOrDebugId;
-    if (typeof css === 'string' && !/.&/.test(css)) {
+    if (typeof css === 'string' && !/&&/.test(css)) {
         return style(vanillaProps(css), debugId);
     }
     const className = style({}, debugId);
     vanillaGlobal(typeof css === 'function'
         ? css('className', `.${className}`)
-        : css.replace(/.&/g, `.${className}`));
+        : css.replace(/&&/g, `.${className}`));
     return className;
 }
 // ---------------------------------------------------------------------------

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.35",
+	"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",

package/vanillaExtract.d.ts

@@ -21,11 +21,11 @@ classNameSelector: string) => string;
  * Returns a scoped cssClassName styled with free-form CSS. This function is a
  * thin wrapper around vanilla-extract's `style` function.
  *
- * When you pass it a string, all `.&` tokens are automatically replaced with the
+ * When you pass it a string, all `&&` tokens are automatically replaced with the
  * selector for the auto-generated class-name. Note that in such cases EVERY
  * style property must be wrapped in a selector block.
  *
- * To opt out of the `.&` replacement, use the callback function signature.
+ * To opt out of the `&&` replacement, use the callback function signature.
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaclass
  */

package/vanillaExtract.js

@@ -21,13 +21,13 @@ exports.vanillaProps = vanillaProps;
 function vanillaClass(cssOrDebugId, css) {
     const debugId = css != null ? cssOrDebugId : undefined;
     css = css != null ? css : cssOrDebugId;
-    if (typeof css === 'string' && !/.&/.test(css)) {
+    if (typeof css === 'string' && !/&&/.test(css)) {
         return (0, css_1.style)((0, exports.vanillaProps)(css), debugId);
     }
     const className = (0, css_1.style)({}, debugId);
     (0, exports.vanillaGlobal)(typeof css === 'function'
         ? css('className', `.${className}`)
-        : css.replace(/.&/g, `.${className}`));
+        : css.replace(/&&/g, `.${className}`));
     return className;
 }
 exports.vanillaClass = vanillaClass;