@wapitee/typhoonx-hydrogen 0.4.0 → 0.4.1

package/README.md

@@ -42,11 +42,11 @@ const {nonce, header, NonceProvider} = createContentSecurityPolicy({
 
 ### Props
 
-| Prop           | Type     | Required | Description                                                              |
-| -------------- | -------- | -------- | ------------------------------------------------------------------------ |
-| `merchantId`   | `string` | yes      | TyphoonX merchant ID (`TPX-…`)                                           |
-| `shopId`       | `string` | yes      | Shopify store ID                                                         |
-| `cookieDomain` | `string` | no       | Cookie `Domain` for a first-party client id. Omit for a host-only cookie |
+| Prop           | Type     | Required | Description                                                                                                       |
+| -------------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
+| `merchantId`   | `string` | yes      | TyphoonX merchant ID (`TPX-…`)                                                                                    |
+| `shopId`       | `string` | yes      | Shopify store ID                                                                                                  |
+| `cookieDomain` | `string` | no       | Cookie `Domain` for a first-party client id. Defaults to the current hostname's apex domain (e.g. `.example.com`) |
 
 ## License
 

package/dist/client-id.d.ts

@@ -1,17 +1,20 @@
 /**
  * Returns the TyphoonX client id from the `__typhoon_client_id` cookie, or
- * creates a new UUID and writes it when the cookie is missing.
+ * creates a new UUID when the cookie is missing.
  *
  * The cookie is scoped to `Path=/`, uses `SameSite=Lax`, and expires after
  * one year. When `cookieDomain` is set, that value is used as the cookie
- * `Domain` so the id can be shared across subdomains. The `Secure` flag is
- * added automatically on HTTPS pages.
+ * `Domain`. Otherwise the Domain defaults to the highest domain the browser
+ * will accept (e.g. `.example.com` for `www.example.com`) so the id is
+ * shared across subdomains. An existing id is written again with that Domain;
+ * a previous host-only cookie is expired (omit `Domain`) so only the apex
+ * cookie remains. The `Secure` flag is added automatically on HTTPS pages.
  *
  * @remarks
  * This helper must run in the browser. It reads and writes `document.cookie`.
  *
- * @param cookieDomain - Optional cookie `Domain` attribute, typically the
- * storefront apex domain.
+ * @param cookieDomain - Optional cookie `Domain` attribute. Omit to use the
+ * current hostname's apex domain.
  * @returns The existing or newly created client id.
  */
 export declare function getOrCreateClientId(cookieDomain?: string): string;

package/dist/client-id.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client-id.d.ts","sourceRoot":"","sources":["../src/client-id.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,mBAAmB,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CA8BjE"}
+{"version":3,"file":"client-id.d.ts","sourceRoot":"","sources":["../src/client-id.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAqCjE"}

package/dist/client-id.js

@@ -4,18 +4,21 @@ const COOKIE = '__typhoon_client_id';
 const MAX_AGE = 31_536_000;
 /**
  * Returns the TyphoonX client id from the `__typhoon_client_id` cookie, or
- * creates a new UUID and writes it when the cookie is missing.
+ * creates a new UUID when the cookie is missing.
  *
  * The cookie is scoped to `Path=/`, uses `SameSite=Lax`, and expires after
  * one year. When `cookieDomain` is set, that value is used as the cookie
- * `Domain` so the id can be shared across subdomains. The `Secure` flag is
- * added automatically on HTTPS pages.
+ * `Domain`. Otherwise the Domain defaults to the highest domain the browser
+ * will accept (e.g. `.example.com` for `www.example.com`) so the id is
+ * shared across subdomains. An existing id is written again with that Domain;
+ * a previous host-only cookie is expired (omit `Domain`) so only the apex
+ * cookie remains. The `Secure` flag is added automatically on HTTPS pages.
  *
  * @remarks
  * This helper must run in the browser. It reads and writes `document.cookie`.
  *
- * @param cookieDomain - Optional cookie `Domain` attribute, typically the
- * storefront apex domain.
+ * @param cookieDomain - Optional cookie `Domain` attribute. Omit to use the
+ * current hostname's apex domain.
  * @returns The existing or newly created client id.
  */
 export function getOrCreateClientId(cookieDomain) {
@@ -25,22 +28,44 @@ export function getOrCreateClientId(cookieDomain) {
         .map((part) => part.trim())
         .find((part) => part.startsWith(prefix))
         ?.slice(prefix.length);
-    if (existing) {
-        return decodeURIComponent(existing);
+    const id = existing ? decodeURIComponent(existing) : crypto.randomUUID();
+    const domain = cookieDomain ?? apexCookieDomain(window.location.hostname);
+    const https = window.location.protocol === 'https:';
+    if (existing && domain) {
+        const expire = [`${COOKIE}=`, 'Path=/', 'SameSite=Lax', 'Max-Age=0'];
+        if (https) {
+            expire.push('Secure');
+        }
+        document.cookie = expire.join('; ');
     }
-    const id = crypto.randomUUID();
     const segments = [
         `${COOKIE}=${id}`,
         'Path=/',
         'SameSite=Lax',
         `Max-Age=${String(MAX_AGE)}`,
     ];
-    if (cookieDomain) {
-        segments.push(`Domain=${cookieDomain}`);
+    if (domain) {
+        segments.push(`Domain=${domain}`);
     }
-    if (window.location.protocol === 'https:') {
+    if (https) {
         segments.push('Secure');
     }
     document.cookie = segments.join('; ');
     return id;
 }
+function apexCookieDomain(hostname) {
+    const labels = hostname.split('.');
+    const secure = window.location.protocol === 'https:' ? '; Secure' : '';
+    for (let n = 2; n <= labels.length; n += 1) {
+        const domain = `.${labels.slice(-n).join('.')}`;
+        const token = crypto.randomUUID();
+        const suffix = `Path=/; SameSite=Lax; Domain=${domain}${secure}`;
+        document.cookie = `__typhoon_d=${token}; ${suffix}; Max-Age=60`;
+        const accepted = document.cookie.includes(`__typhoon_d=${token}`);
+        document.cookie = `__typhoon_d=; ${suffix}; Max-Age=0`;
+        if (accepted) {
+            return domain;
+        }
+    }
+    return undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wapitee/typhoonx-hydrogen",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "TyphoonX Hydrogen Analytics subscriber",
   "homepage": "https://github.com/Wapitee-Interactive-Marketing-Limited/typhoonx-js/tree/main/packages/typhoonx-hydrogen",
   "bugs": {