@jwiedeman/gtm-kit-react-legacy 1.0.1

package/README.md

@@ -0,0 +1,256 @@
+# @react-gtm-kit/react-legacy
+
+[![CI](https://github.com/jwiedeman/react-gtm-kit/actions/workflows/ci.yml/badge.svg)](https://github.com/jwiedeman/react-gtm-kit/actions/workflows/ci.yml)
+[![Coverage](https://codecov.io/gh/jwiedeman/react-gtm-kit/graph/badge.svg?flag=react-legacy)](https://codecov.io/gh/jwiedeman/react-gtm-kit)
+[![npm version](https://img.shields.io/npm/v/@react-gtm-kit/react-legacy.svg)](https://www.npmjs.com/package/@react-gtm-kit/react-legacy)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@react-gtm-kit/react-legacy)](https://bundlephobia.com/package/@react-gtm-kit/react-legacy)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![React](https://img.shields.io/badge/React-16.0+-61DAFB.svg?logo=react)](https://reactjs.org/)
+
+**React Higher-Order Component (HOC) for Google Tag Manager. For class components and pre-hooks React.**
+
+The legacy React adapter for GTM Kit - uses HOC pattern for class component compatibility.
+
+---
+
+## Installation
+
+```bash
+npm install @react-gtm-kit/core @react-gtm-kit/react-legacy
+```
+
+```bash
+yarn add @react-gtm-kit/core @react-gtm-kit/react-legacy
+```
+
+```bash
+pnpm add @react-gtm-kit/core @react-gtm-kit/react-legacy
+```
+
+---
+
+## When to Use This Package
+
+Use `@react-gtm-kit/react-legacy` if:
+
+- You're using class components
+- Your project uses React < 16.8 (no hooks)
+- You prefer the HOC pattern
+- You're maintaining a legacy codebase
+
+**For new projects**, we recommend [`@react-gtm-kit/react-modern`](https://www.npmjs.com/package/@react-gtm-kit/react-modern) which uses hooks.
+
+---
+
+## Quick Start
+
+### Step 1: Wrap Your App
+
+```tsx
+import { withGtm } from '@react-gtm-kit/react-legacy';
+
+class App extends React.Component {
+  render() {
+    return <YourApp />;
+  }
+}
+
+export default withGtm(App, { containers: 'GTM-XXXXXX' });
+```
+
+### Step 2: Push Events
+
+```tsx
+import { withGtmPush } from '@react-gtm-kit/react-legacy';
+
+class BuyButton extends React.Component {
+  handleClick = () => {
+    this.props.gtmPush({ event: 'purchase', value: 49.99 });
+  };
+
+  render() {
+    return <button onClick={this.handleClick}>Buy Now</button>;
+  }
+}
+
+export default withGtmPush(BuyButton);
+```
+
+---
+
+## Features
+
+| Feature | Description |
+|---------|-------------|
+| **HOC Pattern** | Works with class components |
+| **React 16.0+** | Compatible with older React versions |
+| **StrictMode-Safe** | No double-fires in development mode |
+| **TypeScript** | Full type definitions included |
+| **Consent Mode v2** | Built-in GDPR compliance support |
+
+---
+
+## Available HOCs
+
+### `withGtm(Component, config)`
+
+Wraps your root component and initializes GTM.
+
+```tsx
+import { withGtm } from '@react-gtm-kit/react-legacy';
+
+class App extends React.Component {
+  render() {
+    return <div>{this.props.children}</div>;
+  }
+}
+
+export default withGtm(App, {
+  containers: 'GTM-XXXXXX',
+  dataLayerName: 'dataLayer', // optional
+  onBeforeInit: (client) => {
+    // Set consent defaults here
+  }
+});
+```
+
+### `withGtmPush(Component)`
+
+Injects a `gtmPush` prop for pushing events.
+
+```tsx
+import { withGtmPush } from '@react-gtm-kit/react-legacy';
+
+class TrackableButton extends React.Component {
+  handleClick = () => {
+    this.props.gtmPush({ event: 'button_click', button_id: 'main-cta' });
+  };
+
+  render() {
+    return <button onClick={this.handleClick}>Click Me</button>;
+  }
+}
+
+export default withGtmPush(TrackableButton);
+```
+
+### `withGtmConsent(Component)`
+
+Injects consent management props.
+
+```tsx
+import { withGtmConsent } from '@react-gtm-kit/react-legacy';
+
+class CookieBanner extends React.Component {
+  acceptAll = () => {
+    this.props.updateConsent({
+      ad_storage: 'granted',
+      analytics_storage: 'granted',
+      ad_user_data: 'granted',
+      ad_personalization: 'granted'
+    });
+  };
+
+  render() {
+    return <button onClick={this.acceptAll}>Accept All</button>;
+  }
+}
+
+export default withGtmConsent(CookieBanner);
+```
+
+### `withGtmClient(Component)`
+
+Injects the raw GTM client instance.
+
+```tsx
+import { withGtmClient } from '@react-gtm-kit/react-legacy';
+
+class AdvancedComponent extends React.Component {
+  componentDidMount() {
+    this.props.gtmClient.whenReady().then(() => {
+      console.log('GTM is ready!');
+    });
+  }
+
+  render() {
+    return <div>Advanced GTM usage</div>;
+  }
+}
+
+export default withGtmClient(AdvancedComponent);
+```
+
+---
+
+## Consent Mode v2 (GDPR)
+
+```tsx
+import { withGtm, withGtmConsent } from '@react-gtm-kit/react-legacy';
+import { consentPresets } from '@react-gtm-kit/core';
+
+// Root component with consent defaults
+class App extends React.Component {
+  render() {
+    return <div>{this.props.children}</div>;
+  }
+}
+
+export default withGtm(App, {
+  containers: 'GTM-XXXXXX',
+  onBeforeInit: (client) => {
+    client.setConsentDefaults(consentPresets.eeaDefault, { region: ['EEA'] });
+  }
+});
+
+// Cookie banner component
+class CookieBanner extends React.Component {
+  render() {
+    return (
+      <div>
+        <button onClick={() => this.props.updateConsent({ analytics_storage: 'granted' })}>
+          Accept Analytics
+        </button>
+      </div>
+    );
+  }
+}
+
+export default withGtmConsent(CookieBanner);
+```
+
+---
+
+## Migrating to react-modern
+
+If you're upgrading your codebase to use hooks, migration is straightforward:
+
+```tsx
+// Before (react-legacy)
+class Button extends React.Component {
+  render() {
+    return <button onClick={() => this.props.gtmPush({ event: 'click' })}>Click</button>;
+  }
+}
+export default withGtmPush(Button);
+
+// After (react-modern)
+function Button() {
+  const push = useGtmPush();
+  return <button onClick={() => push({ event: 'click' })}>Click</button>;
+}
+```
+
+---
+
+## Requirements
+
+- React 16.0+
+- `@react-gtm-kit/core` (peer dependency)
+
+---
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var react = require('react');
+var gtmKit = require('@jwiedeman/gtm-kit');
+var jsxRuntime = require('react/jsx-runtime');
+
+var m=o=>({client:o,push:t=>o.push(t),setConsentDefaults:(t,e)=>o.setConsentDefaults(t,e),updateConsent:(t,e)=>o.updateConsent(t,e)}),c=o=>{let{config:t,propName:e}=o,i=e!=null?e:"gtm";return function(n){class s extends react.Component{constructor(p){super(p);this.client=gtmKit.createGtmClient(t),this.api=m(this.client);}componentDidMount(){this.client.init();}componentWillUnmount(){this.client.teardown();}render(){let p={[i]:this.api};return jsxRuntime.jsx(n,{...this.props,...p})}}return s.displayName=`withGtm(${n.displayName||n.name||"Component"})`,s}};
+
+exports.withGtm = c;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/with-gtm.tsx"],"names":["Component","createGtmClient","jsx","createLegacyApi","client","value","state","options","withGtm","config","propName","resolvedPropName","WrappedComponent","WithGtmComponent","props","injectedProps"],"mappings":"AAAA,OAAS,aAAAA,MAAqD,QAC9D,OACE,mBAAAC,MAMK,qBA6DQ,cAAAC,MAAA,oBA3Cf,IAAMC,EAAmBC,IAAqC,CAC5D,OAAAA,EACA,KAAOC,GAAUD,EAAO,KAAKC,CAAK,EAClC,mBAAoB,CAACC,EAAOC,IAAYH,EAAO,mBAAmBE,EAAOC,CAAO,EAChF,cAAe,CAACD,EAAOC,IAAYH,EAAO,cAAcE,EAAOC,CAAO,CACxE,GAEaC,EAA4CD,GAAsC,CAC7F,GAAM,CAAE,OAAAE,EAAQ,SAAAC,CAAS,EAAIH,EACvBI,EAAoBD,GAAA,KAAAA,EAAY,MAItC,OAAO,SACLE,EAC6C,CAG7C,MAAMC,UAAyBb,CAAsB,CAMnD,YAAYc,EAAmB,CAC7B,MAAMA,CAAK,EACX,KAAK,OAASb,EAAgBQ,CAAM,EACpC,KAAK,IAAMN,EAAgB,KAAK,MAAM,CACxC,CAEA,mBAA0B,CACxB,KAAK,OAAO,KAAK,CACnB,CAEA,sBAA6B,CAC3B,KAAK,OAAO,SAAS,CACvB,CAEA,QAAoB,CAClB,IAAMY,EAAgB,CACpB,CAACJ,CAAgB,EAAG,KAAK,GAC3B,EAEA,OAAOT,EAACU,EAAA,CAAkB,GAAI,KAAK,MAAyB,GAAGG,EAAe,CAChF,CACF,CAEA,OAAAF,EAAiB,YAAc,WAAWD,EAAiB,aAAeA,EAAiB,MAAQ,WAAW,IAEvGC,CACT,CACF","sourcesContent":["import { Component, type ComponentType, type ReactNode } from 'react';\nimport {\n  createGtmClient,\n  type ConsentRegionOptions,\n  type ConsentState,\n  type CreateGtmClientOptions,\n  type DataLayerValue,\n  type GtmClient\n} from '@jwiedeman/gtm-kit';\n\nexport interface LegacyGtmApi {\n  client: GtmClient;\n  push: (value: DataLayerValue) => void;\n  setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n}\n\nexport interface WithGtmOptions<PropName extends string = 'gtm'> {\n  config: CreateGtmClientOptions;\n  propName?: PropName;\n}\n\nexport type LegacyGtmProps<PropName extends string = 'gtm'> = {\n  [Key in PropName]: LegacyGtmApi;\n};\n\nconst createLegacyApi = (client: GtmClient): LegacyGtmApi => ({\n  client,\n  push: (value) => client.push(value),\n  setConsentDefaults: (state, options) => client.setConsentDefaults(state, options),\n  updateConsent: (state, options) => client.updateConsent(state, options)\n});\n\nexport const withGtm = <PropName extends string = 'gtm'>(options: WithGtmOptions<PropName>) => {\n  const { config, propName } = options;\n  const resolvedPropName = (propName ?? 'gtm') as PropName;\n\n  type InjectedProps = LegacyGtmProps<PropName>;\n\n  return function wrapWithGtm<WrappedProps extends InjectedProps>(\n    WrappedComponent: ComponentType<WrappedProps>\n  ): ComponentType<Omit<WrappedProps, PropName>> {\n    type OuterProps = Omit<WrappedProps, PropName>;\n\n    class WithGtmComponent extends Component<OuterProps> {\n      static displayName: string;\n\n      private client: GtmClient;\n      private api: LegacyGtmApi;\n\n      constructor(props: OuterProps) {\n        super(props);\n        this.client = createGtmClient(config);\n        this.api = createLegacyApi(this.client);\n      }\n\n      componentDidMount(): void {\n        this.client.init();\n      }\n\n      componentWillUnmount(): void {\n        this.client.teardown();\n      }\n\n      render(): ReactNode {\n        const injectedProps = {\n          [resolvedPropName]: this.api\n        } as InjectedProps;\n\n        return <WrappedComponent {...(this.props as WrappedProps)} {...injectedProps} />;\n      }\n    }\n\n    WithGtmComponent.displayName = `withGtm(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;\n\n    return WithGtmComponent;\n  };\n};\n"]}

package/dist/index.d.cts

@@ -0,0 +1,19 @@
+import { ComponentType } from 'react';
+import { GtmClient, DataLayerValue, ConsentState, ConsentRegionOptions, CreateGtmClientOptions } from '@jwiedeman/gtm-kit';
+
+interface LegacyGtmApi {
+    client: GtmClient;
+    push: (value: DataLayerValue) => void;
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+}
+interface WithGtmOptions<PropName extends string = 'gtm'> {
+    config: CreateGtmClientOptions;
+    propName?: PropName;
+}
+type LegacyGtmProps<PropName extends string = 'gtm'> = {
+    [Key in PropName]: LegacyGtmApi;
+};
+declare const withGtm: <PropName extends string = "gtm">(options: WithGtmOptions<PropName>) => <WrappedProps extends LegacyGtmProps<PropName>>(WrappedComponent: ComponentType<WrappedProps>) => ComponentType<Omit<WrappedProps, PropName>>;
+
+export { LegacyGtmApi, LegacyGtmProps, WithGtmOptions, withGtm };

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { ComponentType } from 'react';
+import { GtmClient, DataLayerValue, ConsentState, ConsentRegionOptions, CreateGtmClientOptions } from '@jwiedeman/gtm-kit';
+
+interface LegacyGtmApi {
+    client: GtmClient;
+    push: (value: DataLayerValue) => void;
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+}
+interface WithGtmOptions<PropName extends string = 'gtm'> {
+    config: CreateGtmClientOptions;
+    propName?: PropName;
+}
+type LegacyGtmProps<PropName extends string = 'gtm'> = {
+    [Key in PropName]: LegacyGtmApi;
+};
+declare const withGtm: <PropName extends string = "gtm">(options: WithGtmOptions<PropName>) => <WrappedProps extends LegacyGtmProps<PropName>>(WrappedComponent: ComponentType<WrappedProps>) => ComponentType<Omit<WrappedProps, PropName>>;
+
+export { LegacyGtmApi, LegacyGtmProps, WithGtmOptions, withGtm };

package/dist/index.js

@@ -0,0 +1,9 @@
+import { Component } from 'react';
+import { createGtmClient } from '@jwiedeman/gtm-kit';
+import { jsx } from 'react/jsx-runtime';
+
+var m=o=>({client:o,push:t=>o.push(t),setConsentDefaults:(t,e)=>o.setConsentDefaults(t,e),updateConsent:(t,e)=>o.updateConsent(t,e)}),c=o=>{let{config:t,propName:e}=o,i=e!=null?e:"gtm";return function(n){class s extends Component{constructor(p){super(p);this.client=createGtmClient(t),this.api=m(this.client);}componentDidMount(){this.client.init();}componentWillUnmount(){this.client.teardown();}render(){let p={[i]:this.api};return jsx(n,{...this.props,...p})}}return s.displayName=`withGtm(${n.displayName||n.name||"Component"})`,s}};
+
+export { c as withGtm };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/with-gtm.tsx"],"names":["Component","createGtmClient","jsx","createLegacyApi","client","value","state","options","withGtm","config","propName","resolvedPropName","WrappedComponent","WithGtmComponent","props","injectedProps"],"mappings":"AAAA,OAAS,aAAAA,MAAqD,QAC9D,OACE,mBAAAC,MAMK,qBA6DQ,cAAAC,MAAA,oBA3Cf,IAAMC,EAAmBC,IAAqC,CAC5D,OAAAA,EACA,KAAOC,GAAUD,EAAO,KAAKC,CAAK,EAClC,mBAAoB,CAACC,EAAOC,IAAYH,EAAO,mBAAmBE,EAAOC,CAAO,EAChF,cAAe,CAACD,EAAOC,IAAYH,EAAO,cAAcE,EAAOC,CAAO,CACxE,GAEaC,EAA4CD,GAAsC,CAC7F,GAAM,CAAE,OAAAE,EAAQ,SAAAC,CAAS,EAAIH,EACvBI,EAAoBD,GAAA,KAAAA,EAAY,MAItC,OAAO,SACLE,EAC6C,CAG7C,MAAMC,UAAyBb,CAAsB,CAMnD,YAAYc,EAAmB,CAC7B,MAAMA,CAAK,EACX,KAAK,OAASb,EAAgBQ,CAAM,EACpC,KAAK,IAAMN,EAAgB,KAAK,MAAM,CACxC,CAEA,mBAA0B,CACxB,KAAK,OAAO,KAAK,CACnB,CAEA,sBAA6B,CAC3B,KAAK,OAAO,SAAS,CACvB,CAEA,QAAoB,CAClB,IAAMY,EAAgB,CACpB,CAACJ,CAAgB,EAAG,KAAK,GAC3B,EAEA,OAAOT,EAACU,EAAA,CAAkB,GAAI,KAAK,MAAyB,GAAGG,EAAe,CAChF,CACF,CAEA,OAAAF,EAAiB,YAAc,WAAWD,EAAiB,aAAeA,EAAiB,MAAQ,WAAW,IAEvGC,CACT,CACF","sourcesContent":["import { Component, type ComponentType, type ReactNode } from 'react';\nimport {\n  createGtmClient,\n  type ConsentRegionOptions,\n  type ConsentState,\n  type CreateGtmClientOptions,\n  type DataLayerValue,\n  type GtmClient\n} from '@jwiedeman/gtm-kit';\n\nexport interface LegacyGtmApi {\n  client: GtmClient;\n  push: (value: DataLayerValue) => void;\n  setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n}\n\nexport interface WithGtmOptions<PropName extends string = 'gtm'> {\n  config: CreateGtmClientOptions;\n  propName?: PropName;\n}\n\nexport type LegacyGtmProps<PropName extends string = 'gtm'> = {\n  [Key in PropName]: LegacyGtmApi;\n};\n\nconst createLegacyApi = (client: GtmClient): LegacyGtmApi => ({\n  client,\n  push: (value) => client.push(value),\n  setConsentDefaults: (state, options) => client.setConsentDefaults(state, options),\n  updateConsent: (state, options) => client.updateConsent(state, options)\n});\n\nexport const withGtm = <PropName extends string = 'gtm'>(options: WithGtmOptions<PropName>) => {\n  const { config, propName } = options;\n  const resolvedPropName = (propName ?? 'gtm') as PropName;\n\n  type InjectedProps = LegacyGtmProps<PropName>;\n\n  return function wrapWithGtm<WrappedProps extends InjectedProps>(\n    WrappedComponent: ComponentType<WrappedProps>\n  ): ComponentType<Omit<WrappedProps, PropName>> {\n    type OuterProps = Omit<WrappedProps, PropName>;\n\n    class WithGtmComponent extends Component<OuterProps> {\n      static displayName: string;\n\n      private client: GtmClient;\n      private api: LegacyGtmApi;\n\n      constructor(props: OuterProps) {\n        super(props);\n        this.client = createGtmClient(config);\n        this.api = createLegacyApi(this.client);\n      }\n\n      componentDidMount(): void {\n        this.client.init();\n      }\n\n      componentWillUnmount(): void {\n        this.client.teardown();\n      }\n\n      render(): ReactNode {\n        const injectedProps = {\n          [resolvedPropName]: this.api\n        } as InjectedProps;\n\n        return <WrappedComponent {...(this.props as WrappedProps)} {...injectedProps} />;\n      }\n    }\n\n    WithGtmComponent.displayName = `withGtm(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;\n\n    return WithGtmComponent;\n  };\n};\n"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@jwiedeman/gtm-kit-react-legacy",
+  "version": "1.0.1",
+  "description": "Legacy React HOC adapter for GTM Kit - Google Tag Manager integration.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jwiedeman/GTM-Kit.git",
+    "directory": "packages/react-legacy"
+  },
+  "author": "jwiedeman",
+  "keywords": [
+    "gtm",
+    "google-tag-manager",
+    "react",
+    "hoc"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "lint": "eslint --max-warnings=0 \"src/**/*.{ts,tsx}\"",
+    "test": "jest --config ./jest.config.cjs --runInBand",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@jwiedeman/gtm-kit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tslib": "^2.6.2"
+  }
+}