@wapitee/typhoonx-hydrogen 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Wapitee Interactive
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# @wapitee/typhoonx-hydrogen
+
+Hydrogen `useAnalytics` subscriber that sends TyphoonX storefront events.
+
+This is not a Shopify Web Pixel. Place it in a Hydrogen storefront, inside `Analytics.Provider`.
+
+## Install
+
+```bash
+pnpm add @wapitee/typhoonx-hydrogen
+```
+
+Peer dependencies: `react` ^18.3.1 and `@shopify/hydrogen` >=2025.5.1. Node.js 20 or later.
+
+## Usage
+
+```tsx
+import {Analytics} from '@shopify/hydrogen';
+import TyphoonX from '@wapitee/typhoonx-hydrogen';
+
+export function App() {
+  return (
+    <Analytics.Provider cart={cart} consent={consent} shop={shop}>
+      <TyphoonX merchantId="TPX-XXXXXX" shopId="123456789" />
+      {/* storefront */}
+    </Analytics.Provider>
+  );
+}
+```
+
+The component renders `null`.
+
+### Props
+
+| Prop           | Type     | Required | Description                                                                                                 |
+| -------------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------- |
+| `merchantId`   | `string` | yes      | TyphoonX account key (`TPX-…`)                                                                              |
+| `shopId`       | `string` | yes      | Shopify shop numeric id                                                                                     |
+| `cookieDomain` | `string` | no       | Cookie `Domain` for a first-party client id. Omit for a host-only cookie (recommended on `*.myshopify.com`) |
+
+```ts
+import type {TyphoonXProps} from '@wapitee/typhoonx-hydrogen';
+```
+
+### Events
+
+| Hydrogen                | TyphoonX      |
+| ----------------------- | ------------- |
+| `page_viewed`           | `page_view`   |
+| `product_viewed`        | `view_item`   |
+| `product_added_to_cart` | `add_to_cart` |
+
+Beacons go to `https://spell.typhoonx.io/api/v1/receive`. Checkout and purchase are out of scope.
+
+Sends are gated by Hydrogen `canTrack()` (Customer Privacy). The anonymous visitor id lives in `__typhoon_client_id` (one year, `SameSite=Lax`, `Secure` on HTTPS).
+
+## License
+
+[MIT](./LICENSE) © Wapitee Interactive

package/dist/TyphoonX.d.ts

@@ -0,0 +1,7 @@
+export interface TyphoonXProps {
+    merchantId: string;
+    shopId: string;
+    cookieDomain?: string;
+}
+export default function TyphoonX(props: TyphoonXProps): import("react").JSX.Element | null;
+//# sourceMappingURL=TyphoonX.d.ts.map

package/dist/TyphoonX.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TyphoonX.d.ts","sourceRoot":"","sources":["../src/TyphoonX.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAwBD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,sCAYpD"}

package/dist/TyphoonX.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { parseGid, useAnalytics } from '@shopify/hydrogen';
+import { useEffect, useRef, useState } from 'react';
+import { getOrCreateClientId } from './client-id.js';
+const COLLECT_ENDPOINT = 'https://spell.typhoonx.io/api/v1/receive';
+export default function TyphoonX(props) {
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    if (!isClient) {
+        return null;
+    }
+    return _jsx(TyphoonXClient, { ...props });
+}
+function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
+    const { canTrack, register, subscribe } = useAnalytics();
+    const { ready } = register('TyphoonX');
+    const currentUrlRef = useRef(null);
+    const previousUrlRef = useRef(null);
+    useEffect(() => {
+        let cancelled = false;
+        const clientId = getOrCreateClientId(cookieDomain);
+        const referrerFor = (url) => {
+            if (currentUrlRef.current !== url) {
+                previousUrlRef.current = currentUrlRef.current;
+                currentUrlRef.current = url;
+            }
+            return previousUrlRef.current ?? document.referrer;
+        };
+        const send = (payload) => {
+            if (cancelled || !canTrack()) {
+                return;
+            }
+            navigator.sendBeacon(COLLECT_ENDPOINT, new Blob([JSON.stringify(payload)], { type: 'application/json' }));
+        };
+        const shared = (url, currency) => ({
+            client_id: clientId,
+            merchant_id: merchantId,
+            referrer: referrerFor(url),
+            request_page_url: url,
+            shop_id: shopId,
+            timestamp: new Date().toISOString(),
+            user_agent: window.navigator.userAgent,
+            ...(currency === undefined ? {} : { currency }),
+        });
+        subscribe('page_viewed', (data) => {
+            send({
+                ...shared(data.url),
+                event: 'page_view',
+            });
+        });
+        subscribe('product_viewed', (data) => {
+            const product = data.products[0];
+            if (product === undefined) {
+                return;
+            }
+            send({
+                ...shared(data.url, data.shop?.currency),
+                event: 'view_item',
+                items: [
+                    {
+                        item_brand: product.vendor,
+                        item_id: parseGid(product.id).id,
+                        item_name: product.title,
+                        price: product.price,
+                        quantity: 1,
+                    },
+                ],
+                value: product.price,
+            });
+        });
+        subscribe('product_added_to_cart', (data) => {
+            const { currentLine } = data;
+            if (currentLine === undefined) {
+                return;
+            }
+            send({
+                ...shared(window.location.href, data.shop?.currency),
+                event: 'add_to_cart',
+                items: [
+                    {
+                        item_brand: currentLine.merchandise.product.vendor,
+                        item_id: parseGid(currentLine.merchandise.product.id).id,
+                        item_name: currentLine.merchandise.product.title,
+                        price: currentLine.merchandise.price.amount,
+                        quantity: currentLine.quantity,
+                    },
+                ],
+                value: currentLine.cost.totalAmount.amount,
+            });
+        });
+        ready();
+        return () => {
+            cancelled = true;
+        };
+    }, [canTrack, cookieDomain, merchantId, ready, shopId, subscribe]);
+    return null;
+}

package/dist/client-id.d.ts

@@ -0,0 +1,2 @@
+export declare function getOrCreateClientId(cookieDomain?: string): string;
+//# sourceMappingURL=client-id.d.ts.map

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

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

package/dist/client-id.js

@@ -0,0 +1,28 @@
+const COOKIE = '__typhoon_client_id';
+const MAX_AGE = 31_536_000;
+export function getOrCreateClientId(cookieDomain) {
+    const prefix = `${COOKIE}=`;
+    const existing = document.cookie
+        .split(';')
+        .map((part) => part.trim())
+        .find((part) => part.startsWith(prefix))
+        ?.slice(prefix.length);
+    if (existing) {
+        return decodeURIComponent(existing);
+    }
+    const id = crypto.randomUUID();
+    const segments = [
+        `${COOKIE}=${id}`,
+        'Path=/',
+        'SameSite=Lax',
+        `Max-Age=${String(MAX_AGE)}`,
+    ];
+    if (cookieDomain) {
+        segments.push(`Domain=${cookieDomain}`);
+    }
+    if (window.location.protocol === 'https:') {
+        segments.push('Secure');
+    }
+    document.cookie = segments.join('; ');
+    return id;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { TyphoonXProps } from './TyphoonX.js';
+export { default } from './TyphoonX.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,aAAa,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { default } from './TyphoonX.js';

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@wapitee/typhoonx-hydrogen",
+  "version": "0.1.0",
+  "description": "TyphoonX Hydrogen Analytics subscriber",
+  "homepage": "https://github.com/Wapitee-Interactive-Marketing-Limited/typhoonx-js/tree/main/packages/typhoonx-hydrogen",
+  "bugs": {
+    "url": "https://github.com/Wapitee-Interactive-Marketing-Limited/typhoonx-js/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Wapitee-Interactive-Marketing-Limited/typhoonx-js.git",
+    "directory": "packages/typhoonx-hydrogen"
+  },
+  "license": "MIT",
+  "author": "jay@wapitee.io",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist"
+  ],
+  "devDependencies": {
+    "@shopify/hydrogen": "^2026.4.5",
+    "@types/react": "^18.3.31",
+    "react": "^18.3.1",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "@shopify/hydrogen": ">=2025.5.1",
+    "react": "^18.3.1"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  }
+}