@reykjavik/webtools 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -4,11 +4,20 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.2.2
+
+_2024-12-19_
+
+- `@reykjavik/webtools/CookieHubConsent`:
+  - feat: Allow passing explicit `undefined` as `accountId` to skip loading
+  - fix: Note that `window.cookiehub` is possibly `undefined` (before load)
+
 ## 0.2.1
 
 _2024-12-17_
 
-- fix: Make typing of failed ResultTuple/ResultTupleObj less ambiguous
+- `@reykjavik/webtools/errorhandling`:
+  - fix: Make typing of failed ResultTuple/ResultTupleObj less ambiguous
 
 ## 0.2.0
 

package/CookieHubConsent.d.ts

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
 declare global {
     interface Window {
-        cookiehub: CookieHub;
+        cookiehub?: CookieHub;
     }
 }
 type CookieHub = {
@@ -180,9 +180,11 @@ export type CookieHubProviderProps = EitherObj<{
      * extracted from the script embed URL like this:
      * `"https://cookiehub.net/c2/[ACCOUNT_ID].js"`
      *
+     * Pass `undefined` to disable/skip the script loading
+     *
      * @see https://support.cookiehub.com/article/155-manual-implementation-guide
      */
-    accountId: string;
+    accountId: string | undefined;
 }, {
     /**
      * The full CookieHub embed script URL.

package/CookieHubConsent.js

@@ -65,14 +65,26 @@ const moveCookiehubScriptInDomTree = () => {
  */
 const CookieHubProvider = (props) => {
     const [state, setState] = (0, react_1.useState)(initialConsentState);
+    const scriptUrLOrId = props.scriptUrl
+        ? `@ ${props.scriptUrl}`
+        : props.accountId || undefined;
     (0, react_1.useEffect)(() => {
+        if (!scriptUrLOrId) {
+            return;
+        }
+        const scriptSrc = scriptUrLOrId.startsWith('@ ')
+            ? scriptUrLOrId.slice(2)
+            : scriptUrlTemplate.replace(idToken, scriptUrLOrId);
+        if (window.cookiehub && document.querySelector('script#cookiehub-script')) {
+            // We can't load the script from more than one source at a time
+            console.warn('CookieHub script already loaded.');
+            return;
+        }
+        const opts = props.options || {};
         const script = document.createElement('script');
         script.async = true;
-        const opts = props.options || {};
-        script.src =
-            props.scriptUrl != null
-                ? props.scriptUrl
-                : scriptUrlTemplate.replace(idToken, props.accountId);
+        script.id = 'cookiehub-script';
+        script.src = scriptSrc;
         script.onload = () => {
             window.cookiehub.load({
                 ...opts,
@@ -124,8 +136,11 @@ const CookieHubProvider = (props) => {
         props.onError && (script.onerror = props.onError);
         document.body.append(script);
     }, 
+    // Unless we can find a safe way to tear down the CookieHub script and
+    // clean up after it we can only load it once, so monitoring anything other
+    // than accountId or scriptUrl is pointless.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
+    [scriptUrLOrId]);
     return (react_1.default.createElement(CookieHubContext.Provider, { value: state }, props.children));
 };
 exports.CookieHubProvider = CookieHubProvider;

package/README.md

@@ -723,8 +723,8 @@ export default function App() {
 The Component's props have detailed JSDoc comments (displayed in your code
 editor), but there's a brief summary:
 
-- `accountId?: string` — Your CookieHub account ID. (alternative to
-  `scriptUrl` prop).
+- `accountId?: string | undefined` — Your CookieHub account ID. (alternative
+  to `scriptUrl` prop). Pass `undefined` to skip loading the script.
 - `scriptUrl?: string` — The full CookieHub embed script URL. (alternative to
   `accountId` prop).
 - `options?: CookieHubOptions` — Raw CookieHub options object that gets used

package/esm/CookieHubConsent.d.ts

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
 declare global {
     interface Window {
-        cookiehub: CookieHub;
+        cookiehub?: CookieHub;
     }
 }
 type CookieHub = {
@@ -180,9 +180,11 @@ export type CookieHubProviderProps = EitherObj<{
      * extracted from the script embed URL like this:
      * `"https://cookiehub.net/c2/[ACCOUNT_ID].js"`
      *
+     * Pass `undefined` to disable/skip the script loading
+     *
      * @see https://support.cookiehub.com/article/155-manual-implementation-guide
      */
-    accountId: string;
+    accountId: string | undefined;
 }, {
     /**
      * The full CookieHub embed script URL.

package/esm/CookieHubConsent.js

@@ -39,14 +39,26 @@ const moveCookiehubScriptInDomTree = () => {
  */
 export const CookieHubProvider = (props) => {
     const [state, setState] = useState(initialConsentState);
+    const scriptUrLOrId = props.scriptUrl
+        ? `@ ${props.scriptUrl}`
+        : props.accountId || undefined;
     useEffect(() => {
+        if (!scriptUrLOrId) {
+            return;
+        }
+        const scriptSrc = scriptUrLOrId.startsWith('@ ')
+            ? scriptUrLOrId.slice(2)
+            : scriptUrlTemplate.replace(idToken, scriptUrLOrId);
+        if (window.cookiehub && document.querySelector('script#cookiehub-script')) {
+            // We can't load the script from more than one source at a time
+            console.warn('CookieHub script already loaded.');
+            return;
+        }
+        const opts = props.options || {};
         const script = document.createElement('script');
         script.async = true;
-        const opts = props.options || {};
-        script.src =
-            props.scriptUrl != null
-                ? props.scriptUrl
-                : scriptUrlTemplate.replace(idToken, props.accountId);
+        script.id = 'cookiehub-script';
+        script.src = scriptSrc;
         script.onload = () => {
             window.cookiehub.load({
                 ...opts,
@@ -98,8 +110,11 @@ export const CookieHubProvider = (props) => {
         props.onError && (script.onerror = props.onError);
         document.body.append(script);
     }, 
+    // Unless we can find a safe way to tear down the CookieHub script and
+    // clean up after it we can only load it once, so monitoring anything other
+    // than accountId or scriptUrl is pointless.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
+    [scriptUrLOrId]);
     return (React.createElement(CookieHubContext.Provider, { value: state }, props.children));
 };
 // ---------------------------------------------------------------------------

package/package.json

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