@jwiedeman/gtm-kit-solid 1.0.1

package/README.md

@@ -0,0 +1,344 @@
+# @react-gtm-kit/solid
+
+[![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=solid)](https://codecov.io/gh/jwiedeman/react-gtm-kit)
+[![npm version](https://img.shields.io/npm/v/@react-gtm-kit/solid.svg)](https://www.npmjs.com/package/@react-gtm-kit/solid)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@react-gtm-kit/solid)](https://bundlephobia.com/package/@react-gtm-kit/solid)
+[![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)
+[![SolidJS](https://img.shields.io/badge/SolidJS-1.0+-2C4F7C.svg?logo=solid)](https://www.solidjs.com/)
+
+**SolidJS primitives and context for Google Tag Manager. Fine-grained reactivity.**
+
+The SolidJS adapter for GTM Kit - provides context and hooks for idiomatic Solid integration.
+
+---
+
+## Installation
+
+```bash
+npm install @react-gtm-kit/core @react-gtm-kit/solid
+```
+
+```bash
+yarn add @react-gtm-kit/core @react-gtm-kit/solid
+```
+
+```bash
+pnpm add @react-gtm-kit/core @react-gtm-kit/solid
+```
+
+---
+
+## Quick Start
+
+### Step 1: Wrap Your App
+
+```tsx
+// App.tsx
+import { GtmProvider } from '@react-gtm-kit/solid';
+
+function App() {
+  return (
+    <GtmProvider containers="GTM-XXXXXX">
+      <MyApp />
+    </GtmProvider>
+  );
+}
+```
+
+### Step 2: Push Events
+
+```tsx
+import { useGtmPush } from '@react-gtm-kit/solid';
+
+function BuyButton() {
+  const push = useGtmPush();
+
+  return (
+    <button onClick={() => push({ event: 'purchase', value: 49.99 })}>
+      Buy Now
+    </button>
+  );
+}
+```
+
+**That's it!** GTM is now running.
+
+---
+
+## Features
+
+| Feature | Description |
+|---------|-------------|
+| **SolidJS Native** | Built for Solid's reactivity system |
+| **Fine-Grained** | Only updates what needs to update |
+| **Context-Based** | Uses Solid's context API |
+| **TypeScript** | Full type definitions included |
+| **Consent Mode v2** | Built-in GDPR compliance |
+| **SSR Compatible** | Safe for SolidStart SSR |
+
+---
+
+## Available Hooks
+
+### `useGtm()`
+
+Get the full GTM context.
+
+```tsx
+import { useGtm } from '@react-gtm-kit/solid';
+
+function MyComponent() {
+  const { push, client, updateConsent, initialized } = useGtm();
+
+  return (
+    <div>
+      <p>GTM Initialized: {initialized ? 'Yes' : 'No'}</p>
+      <button onClick={() => push({ event: 'click' })}>Track</button>
+    </div>
+  );
+}
+```
+
+### `useGtmPush()`
+
+Get just the push function.
+
+```tsx
+import { useGtmPush } from '@react-gtm-kit/solid';
+
+function MyComponent() {
+  const push = useGtmPush();
+
+  return (
+    <button onClick={() => push({ event: 'purchase', value: 99 })}>
+      Buy
+    </button>
+  );
+}
+```
+
+### `useGtmConsent()`
+
+Access consent management functions.
+
+```tsx
+import { useGtmConsent } from '@react-gtm-kit/solid';
+
+function CookieBanner() {
+  const { updateConsent } = useGtmConsent();
+
+  const acceptAll = () => {
+    updateConsent({
+      ad_storage: 'granted',
+      analytics_storage: 'granted',
+      ad_user_data: 'granted',
+      ad_personalization: 'granted'
+    });
+  };
+
+  return <button onClick={acceptAll}>Accept All</button>;
+}
+```
+
+### `useGtmClient()`
+
+Get the raw GTM client instance.
+
+```tsx
+import { useGtmClient } from '@react-gtm-kit/solid';
+
+function MyComponent() {
+  const client = useGtmClient();
+
+  return <div>Initialized: {client.isInitialized() ? 'Yes' : 'No'}</div>;
+}
+```
+
+### `useGtmReady()`
+
+Get a function that resolves when GTM is loaded.
+
+```tsx
+import { useGtmReady } from '@react-gtm-kit/solid';
+import { onMount } from 'solid-js';
+
+function MyComponent() {
+  const whenReady = useGtmReady();
+
+  onMount(async () => {
+    const states = await whenReady();
+    console.log('GTM loaded:', states);
+  });
+
+  return <div>Loading...</div>;
+}
+```
+
+---
+
+## Provider Options
+
+```tsx
+<GtmProvider
+  containers="GTM-XXXXXX"
+  autoInit={true}
+  dataLayerName="dataLayer"
+  host="https://www.googletagmanager.com"
+  scriptAttributes={{ nonce: '...' }}
+  onBeforeInit={(client) => {
+    // Set consent defaults here
+  }}
+  onAfterInit={(client) => {
+    // Called after GTM initializes
+  }}
+>
+  {children}
+</GtmProvider>
+```
+
+---
+
+## SolidStart Integration
+
+### Basic Setup
+
+```tsx
+// src/root.tsx
+import { GtmProvider } from '@react-gtm-kit/solid';
+
+export default function Root() {
+  return (
+    <Html>
+      <Head />
+      <Body>
+        <GtmProvider containers="GTM-XXXXXX">
+          <Routes />
+        </GtmProvider>
+      </Body>
+    </Html>
+  );
+}
+```
+
+### Page Tracking with Router
+
+```tsx
+import { useGtmPush } from '@react-gtm-kit/solid';
+import { useLocation } from '@solidjs/router';
+import { createEffect } from 'solid-js';
+
+function PageTracker() {
+  const push = useGtmPush();
+  const location = useLocation();
+
+  createEffect(() => {
+    push({
+      event: 'page_view',
+      page_path: location.pathname
+    });
+  });
+
+  return null;
+}
+```
+
+---
+
+## Consent Mode v2 (GDPR)
+
+```tsx
+import { GtmProvider, useGtmConsent } from '@react-gtm-kit/solid';
+import { consentPresets } from '@react-gtm-kit/core';
+
+// In your root component
+function App() {
+  return (
+    <GtmProvider
+      containers="GTM-XXXXXX"
+      onBeforeInit={(client) => {
+        // Deny by default for EU users
+        client.setConsentDefaults(consentPresets.eeaDefault, { region: ['EEA'] });
+      }}
+    >
+      <MyApp />
+      <CookieBanner />
+    </GtmProvider>
+  );
+}
+
+// Cookie banner component
+function CookieBanner() {
+  const { updateConsent } = useGtmConsent();
+
+  return (
+    <div class="cookie-banner">
+      <p>We use cookies to improve your experience.</p>
+      <button onClick={() => updateConsent({
+        ad_storage: 'granted',
+        analytics_storage: 'granted',
+        ad_user_data: 'granted',
+        ad_personalization: 'granted'
+      })}>
+        Accept All
+      </button>
+      <button onClick={() => updateConsent({
+        ad_storage: 'denied',
+        analytics_storage: 'denied',
+        ad_user_data: 'denied',
+        ad_personalization: 'denied'
+      })}>
+        Reject All
+      </button>
+    </div>
+  );
+}
+```
+
+---
+
+## Multiple Containers
+
+```tsx
+<GtmProvider
+  containers={[
+    { id: 'GTM-MAIN' },
+    { id: 'GTM-ADS', queryParams: { gtm_auth: 'abc', gtm_preview: 'env-1' } }
+  ]}
+>
+  {children}
+</GtmProvider>
+```
+
+---
+
+## TypeScript
+
+Full TypeScript support is included:
+
+```tsx
+import type { GtmContextValue, GtmConsentApi } from '@react-gtm-kit/solid';
+import { useGtm, useGtmConsent } from '@react-gtm-kit/solid';
+
+function MyComponent() {
+  const gtm: GtmContextValue = useGtm();
+  const consent: GtmConsentApi = useGtmConsent();
+
+  // Fully typed!
+  gtm.push({ event: 'my_event', custom_param: 'value' });
+}
+```
+
+---
+
+## Requirements
+
+- SolidJS 1.0+
+- `@react-gtm-kit/core` (peer dependency)
+
+---
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var solidJs = require('solid-js');
+var store = require('solid-js/store');
+var gtmKit = require('@jwiedeman/gtm-kit');
+
+var s=solidJs.createContext();function v(t){var l;let i=(l=t.autoInit)!=null?l:!0,r=t.onBeforeInit,u=t.onAfterInit,m={containers:t.containers,...t.dataLayerName&&{dataLayerName:t.dataLayerName},...t.host&&{host:t.host},...t.scriptAttributes&&{scriptAttributes:t.scriptAttributes}},e=gtmKit.createGtmClient(m),[C,d]=store.createStore({initialized:!1}),c={client:e,push:n=>e.push(n),setConsentDefaults:(n,a)=>e.setConsentDefaults(n,a),updateConsent:(n,a)=>e.updateConsent(n,a),whenReady:()=>e.whenReady(),onReady:n=>e.onReady(n),get initialized(){return C.initialized}};return r&&r(e),i&&(e.init(),d("initialized",!0),u&&u(e)),solidJs.onCleanup(()=>{e.teardown();}),React.createElement(s.Provider,{value:c},t.children)}var o=()=>{let t=solidJs.useContext(s);if(!t)throw new Error('[gtm-kit] useGtm() was called outside of a GtmProvider. Make sure to wrap your app with <GtmProvider containers="GTM-XXXXXX">.');return t},S=()=>o(),h=()=>o().push,P=()=>{let{setConsentDefaults:t,updateConsent:i}=o();return {setConsentDefaults:t,updateConsent:i}},R=()=>o().client,L=()=>o().whenReady;
+
+exports.GtmContext = s;
+exports.GtmProvider = v;
+exports.useGtm = S;
+exports.useGtmClient = R;
+exports.useGtmConsent = P;
+exports.useGtmPush = h;
+exports.useGtmReady = L;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.tsx"],"names":["createContext","useContext","onCleanup","createStore","createGtmClient","GtmContext","GtmProvider","props","_a","autoInit","onBeforeInit","onAfterInit","clientOptions","client","state","setState","contextValue","value","consentState","regionOptions","callback","useGtmContext","context","useGtm","useGtmPush","useGtmConsent","setConsentDefaults","updateConsent","useGtmClient","useGtmReady"],"mappings":"AAAA,OAAS,iBAAAA,EAAe,cAAAC,EAAY,aAAAC,MAA2B,WAC/D,OAAS,eAAAC,MAAmB,iBAC5B,OACE,mBAAAC,MAOK,qBA0DA,IAAMC,EAAaL,EAA+B,EAkBlD,SAASM,EAAYC,EAAsC,CAtFlE,IAAAC,EAyFE,IAAMC,GAAWD,EAAAD,EAAM,WAAN,KAAAC,EAAkB,GAC7BE,EAAeH,EAAM,aACrBI,EAAcJ,EAAM,YAGpBK,EAAwC,CAC5C,WAAYL,EAAM,WAClB,GAAIA,EAAM,eAAiB,CAAE,cAAeA,EAAM,aAAc,EAChE,GAAIA,EAAM,MAAQ,CAAE,KAAMA,EAAM,IAAK,EACrC,GAAIA,EAAM,kBAAoB,CAAE,iBAAkBA,EAAM,gBAAiB,CAC3E,EAEMM,EAAST,EAAgBQ,CAAa,EAEtC,CAACE,EAAOC,CAAQ,EAAIZ,EAAsC,CAC9D,YAAa,EACf,CAAC,EAEKa,EAAgC,CACpC,OAAAH,EACA,KAAOI,GAA0BJ,EAAO,KAAKI,CAAK,EAClD,mBAAoB,CAACC,EAA4BC,IAC/CN,EAAO,mBAAmBK,EAAcC,CAAa,EACvD,cAAe,CAACD,EAA4BC,IAC1CN,EAAO,cAAcK,EAAcC,CAAa,EAClD,UAAW,IAAMN,EAAO,UAAU,EAClC,QAAUO,GAAqDP,EAAO,QAAQO,CAAQ,EACtF,IAAI,aAAc,CAChB,OAAON,EAAM,WACf,CACF,EAGA,OAAIJ,GACFA,EAAaG,CAAM,EAIjBJ,IACFI,EAAO,KAAK,EACZE,EAAS,cAAe,EAAI,EAGxBJ,GACFA,EAAYE,CAAM,GAKtBX,EAAU,IAAM,CACdW,EAAO,SAAS,CAClB,CAAC,EAEM,oBAACR,EAAW,SAAX,CAAoB,MAAOW,GAAeT,EAAM,QAAS,CACnE,CAKA,IAAMc,EAAgB,IAAuB,CAC3C,IAAMC,EAAUrB,EAAWI,CAAU,EACrC,GAAI,CAACiB,EACH,MAAM,IAAI,MACR,gIAEF,EAEF,OAAOA,CACT,EAoBaC,EAAS,IACbF,EAAc,EAsBVG,EAAa,IACjBH,EAAc,EAAE,KAwBZI,EAAgB,IAAqB,CAChD,GAAM,CAAE,mBAAAC,EAAoB,cAAAC,CAAc,EAAIN,EAAc,EAC5D,MAAO,CAAE,mBAAAK,EAAoB,cAAAC,CAAc,CAC7C,EAgBaC,EAAe,IACnBP,EAAc,EAAE,OAwBZQ,EAAc,IAClBR,EAAc,EAAE","sourcesContent":["import { createContext, useContext, onCleanup, type JSX } from 'solid-js';\nimport { createStore } from 'solid-js/store';\nimport {\n  createGtmClient,\n  type ConsentRegionOptions,\n  type ConsentState,\n  type CreateGtmClientOptions,\n  type DataLayerValue,\n  type GtmClient,\n  type ScriptLoadState\n} from '@jwiedeman/gtm-kit';\n\n/**\n * Props for the GTM Provider component.\n */\nexport interface GtmProviderProps extends CreateGtmClientOptions {\n  /** Child components */\n  children: JSX.Element;\n\n  /**\n   * Whether to automatically initialize GTM when the provider mounts.\n   * @default true\n   */\n  autoInit?: boolean;\n\n  /**\n   * Callback executed before GTM initialization.\n   * Use this to set consent defaults.\n   */\n  onBeforeInit?: (client: GtmClient) => void;\n\n  /**\n   * Callback executed after GTM initialization.\n   */\n  onAfterInit?: (client: GtmClient) => void;\n}\n\n/**\n * The GTM context value containing all GTM functionality.\n */\nexport interface GtmContextValue {\n  /** The underlying GTM client instance */\n  client: GtmClient;\n  /** Push a value to the data layer */\n  push: (value: DataLayerValue) => void;\n  /** Set consent defaults (must be called before init) */\n  setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  /** Update consent state */\n  updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  /** Returns a promise that resolves when all GTM scripts are loaded */\n  whenReady: () => Promise<ScriptLoadState[]>;\n  /** Register a callback for when GTM scripts are ready */\n  onReady: (callback: (state: ScriptLoadState[]) => void) => () => void;\n  /** Whether GTM has been initialized */\n  initialized: boolean;\n}\n\n/**\n * Consent-specific API subset.\n */\nexport interface GtmConsentApi {\n  setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n}\n\n/**\n * The GTM context for SolidJS.\n */\nexport const GtmContext = createContext<GtmContextValue>();\n\n/**\n * GTM Provider component for SolidJS.\n *\n * @example\n * ```tsx\n * import { GtmProvider } from '@jwiedeman/gtm-kit-solid';\n *\n * function App() {\n *   return (\n *     <GtmProvider containers=\"GTM-XXXXXX\">\n *       <MyApp />\n *     </GtmProvider>\n *   );\n * }\n * ```\n */\nexport function GtmProvider(props: GtmProviderProps): JSX.Element {\n  // Note: Don't destructure children - in Solid.js, children is a getter that\n  // should only be accessed inside the returned JSX to maintain proper reactivity\n  const autoInit = props.autoInit ?? true;\n  const onBeforeInit = props.onBeforeInit;\n  const onAfterInit = props.onAfterInit;\n\n  // Extract client options (everything except children and lifecycle hooks)\n  const clientOptions: CreateGtmClientOptions = {\n    containers: props.containers,\n    ...(props.dataLayerName && { dataLayerName: props.dataLayerName }),\n    ...(props.host && { host: props.host }),\n    ...(props.scriptAttributes && { scriptAttributes: props.scriptAttributes })\n  };\n\n  const client = createGtmClient(clientOptions);\n\n  const [state, setState] = createStore<{ initialized: boolean }>({\n    initialized: false\n  });\n\n  const contextValue: GtmContextValue = {\n    client,\n    push: (value: DataLayerValue) => client.push(value),\n    setConsentDefaults: (consentState: ConsentState, regionOptions?: ConsentRegionOptions) =>\n      client.setConsentDefaults(consentState, regionOptions),\n    updateConsent: (consentState: ConsentState, regionOptions?: ConsentRegionOptions) =>\n      client.updateConsent(consentState, regionOptions),\n    whenReady: () => client.whenReady(),\n    onReady: (callback: (loadState: ScriptLoadState[]) => void) => client.onReady(callback),\n    get initialized() {\n      return state.initialized;\n    }\n  };\n\n  // Call onBeforeInit hook if provided (for consent defaults)\n  if (onBeforeInit) {\n    onBeforeInit(client);\n  }\n\n  // Auto-initialize if enabled\n  if (autoInit) {\n    client.init();\n    setState('initialized', true);\n\n    // Call onAfterInit hook if provided\n    if (onAfterInit) {\n      onAfterInit(client);\n    }\n  }\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    client.teardown();\n  });\n\n  return <GtmContext.Provider value={contextValue}>{props.children}</GtmContext.Provider>;\n}\n\n/**\n * Internal helper to get the GTM context with proper error handling.\n */\nconst useGtmContext = (): GtmContextValue => {\n  const context = useContext(GtmContext);\n  if (!context) {\n    throw new Error(\n      '[gtm-kit] useGtm() was called outside of a GtmProvider. ' +\n        'Make sure to wrap your app with <GtmProvider containers=\"GTM-XXXXXX\">.'\n    );\n  }\n  return context;\n};\n\n/**\n * Hook to access the full GTM context.\n *\n * @example\n * ```tsx\n * import { useGtm } from '@jwiedeman/gtm-kit-solid';\n *\n * function MyComponent() {\n *   const { push, client } = useGtm();\n *\n *   return (\n *     <button onClick={() => push({ event: 'click' })}>\n *       Click me\n *     </button>\n *   );\n * }\n * ```\n */\nexport const useGtm = (): GtmContextValue => {\n  return useGtmContext();\n};\n\n/**\n * Hook to get just the push function.\n * Use this when you only need to push events.\n *\n * @example\n * ```tsx\n * import { useGtmPush } from '@jwiedeman/gtm-kit-solid';\n *\n * function MyComponent() {\n *   const push = useGtmPush();\n *\n *   return (\n *     <button onClick={() => push({ event: 'purchase', value: 99 })}>\n *       Buy\n *     </button>\n *   );\n * }\n * ```\n */\nexport const useGtmPush = (): ((value: DataLayerValue) => void) => {\n  return useGtmContext().push;\n};\n\n/**\n * Hook to access consent management functions.\n *\n * @example\n * ```tsx\n * import { useGtmConsent } from '@jwiedeman/gtm-kit-solid';\n *\n * function CookieBanner() {\n *   const { updateConsent } = useGtmConsent();\n *\n *   const acceptAll = () => {\n *     updateConsent({\n *       ad_storage: 'granted',\n *       analytics_storage: 'granted'\n *     });\n *   };\n *\n *   return <button onClick={acceptAll}>Accept All</button>;\n * }\n * ```\n */\nexport const useGtmConsent = (): GtmConsentApi => {\n  const { setConsentDefaults, updateConsent } = useGtmContext();\n  return { setConsentDefaults, updateConsent };\n};\n\n/**\n * Hook to get the raw GTM client instance.\n *\n * @example\n * ```tsx\n * import { useGtmClient } from '@jwiedeman/gtm-kit-solid';\n *\n * function MyComponent() {\n *   const client = useGtmClient();\n *\n *   return <div>Initialized: {client.isInitialized() ? 'Yes' : 'No'}</div>;\n * }\n * ```\n */\nexport const useGtmClient = (): GtmClient => {\n  return useGtmContext().client;\n};\n\n/**\n * Hook to get the whenReady function.\n * Use this to wait for GTM scripts to load.\n *\n * @example\n * ```tsx\n * import { useGtmReady } from '@jwiedeman/gtm-kit-solid';\n * import { onMount } from 'solid-js';\n *\n * function MyComponent() {\n *   const whenReady = useGtmReady();\n *\n *   onMount(async () => {\n *     const states = await whenReady();\n *     console.log('GTM loaded:', states);\n *   });\n *\n *   return <div>Loading...</div>;\n * }\n * ```\n */\nexport const useGtmReady = (): (() => Promise<ScriptLoadState[]>) => {\n  return useGtmContext().whenReady;\n};\n"]}

package/dist/index.d.cts

@@ -0,0 +1,172 @@
+import * as solid_js from 'solid-js';
+import { JSX } from 'solid-js';
+import { CreateGtmClientOptions, GtmClient, DataLayerValue, ConsentState, ConsentRegionOptions, ScriptLoadState } from '@jwiedeman/gtm-kit';
+
+/**
+ * Props for the GTM Provider component.
+ */
+interface GtmProviderProps extends CreateGtmClientOptions {
+    /** Child components */
+    children: JSX.Element;
+    /**
+     * Whether to automatically initialize GTM when the provider mounts.
+     * @default true
+     */
+    autoInit?: boolean;
+    /**
+     * Callback executed before GTM initialization.
+     * Use this to set consent defaults.
+     */
+    onBeforeInit?: (client: GtmClient) => void;
+    /**
+     * Callback executed after GTM initialization.
+     */
+    onAfterInit?: (client: GtmClient) => void;
+}
+/**
+ * The GTM context value containing all GTM functionality.
+ */
+interface GtmContextValue {
+    /** The underlying GTM client instance */
+    client: GtmClient;
+    /** Push a value to the data layer */
+    push: (value: DataLayerValue) => void;
+    /** Set consent defaults (must be called before init) */
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    /** Update consent state */
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    /** Returns a promise that resolves when all GTM scripts are loaded */
+    whenReady: () => Promise<ScriptLoadState[]>;
+    /** Register a callback for when GTM scripts are ready */
+    onReady: (callback: (state: ScriptLoadState[]) => void) => () => void;
+    /** Whether GTM has been initialized */
+    initialized: boolean;
+}
+/**
+ * Consent-specific API subset.
+ */
+interface GtmConsentApi {
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+}
+/**
+ * The GTM context for SolidJS.
+ */
+declare const GtmContext: solid_js.Context<GtmContextValue | undefined>;
+/**
+ * GTM Provider component for SolidJS.
+ *
+ * @example
+ * ```tsx
+ * import { GtmProvider } from '@jwiedeman/gtm-kit-solid';
+ *
+ * function App() {
+ *   return (
+ *     <GtmProvider containers="GTM-XXXXXX">
+ *       <MyApp />
+ *     </GtmProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function GtmProvider(props: GtmProviderProps): JSX.Element;
+/**
+ * Hook to access the full GTM context.
+ *
+ * @example
+ * ```tsx
+ * import { useGtm } from '@jwiedeman/gtm-kit-solid';
+ *
+ * function MyComponent() {
+ *   const { push, client } = useGtm();
+ *
+ *   return (
+ *     <button onClick={() => push({ event: 'click' })}>
+ *       Click me
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare const useGtm: () => GtmContextValue;
+/**
+ * Hook to get just the push function.
+ * Use this when you only need to push events.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmPush } from '@jwiedeman/gtm-kit-solid';
+ *
+ * function MyComponent() {
+ *   const push = useGtmPush();
+ *
+ *   return (
+ *     <button onClick={() => push({ event: 'purchase', value: 99 })}>
+ *       Buy
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare const useGtmPush: () => ((value: DataLayerValue) => void);
+/**
+ * Hook to access consent management functions.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmConsent } from '@jwiedeman/gtm-kit-solid';
+ *
+ * function CookieBanner() {
+ *   const { updateConsent } = useGtmConsent();
+ *
+ *   const acceptAll = () => {
+ *     updateConsent({
+ *       ad_storage: 'granted',
+ *       analytics_storage: 'granted'
+ *     });
+ *   };
+ *
+ *   return <button onClick={acceptAll}>Accept All</button>;
+ * }
+ * ```
+ */
+declare const useGtmConsent: () => GtmConsentApi;
+/**
+ * Hook to get the raw GTM client instance.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmClient } from '@jwiedeman/gtm-kit-solid';
+ *
+ * function MyComponent() {
+ *   const client = useGtmClient();
+ *
+ *   return <div>Initialized: {client.isInitialized() ? 'Yes' : 'No'}</div>;
+ * }
+ * ```
+ */
+declare const useGtmClient: () => GtmClient;
+/**
+ * Hook to get the whenReady function.
+ * Use this to wait for GTM scripts to load.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmReady } from '@jwiedeman/gtm-kit-solid';
+ * import { onMount } from 'solid-js';
+ *
+ * function MyComponent() {
+ *   const whenReady = useGtmReady();
+ *
+ *   onMount(async () => {
+ *     const states = await whenReady();
+ *     console.log('GTM loaded:', states);
+ *   });
+ *
+ *   return <div>Loading...</div>;
+ * }
+ * ```
+ */
+declare const useGtmReady: () => (() => Promise<ScriptLoadState[]>);
+
+export { GtmConsentApi, GtmContext, GtmContextValue, GtmProvider, GtmProviderProps, useGtm, useGtmClient, useGtmConsent, useGtmPush, useGtmReady };

package/dist/index.d.ts

@@ -0,0 +1,172 @@
+import * as solid_js from 'solid-js';
+import { JSX } from 'solid-js';
+import { CreateGtmClientOptions, GtmClient, DataLayerValue, ConsentState, ConsentRegionOptions, ScriptLoadState } from '@jwiedeman/gtm-kit';
+
+/**
+ * Props for the GTM Provider component.
+ */
+interface GtmProviderProps extends CreateGtmClientOptions {
+    /** Child components */
+    children: JSX.Element;
+    /**
+     * Whether to automatically initialize GTM when the provider mounts.
+     * @default true
+     */
+    autoInit?: boolean;
+    /**
+     * Callback executed before GTM initialization.
+     * Use this to set consent defaults.
+     */
+    onBeforeInit?: (client: GtmClient) => void;
+    /**
+     * Callback executed after GTM initialization.
+     */
+    onAfterInit?: (client: GtmClient) => void;
+}
+/**
+ * The GTM context value containing all GTM functionality.
+ */
+interface GtmContextValue {
+    /** The underlying GTM client instance */
+    client: GtmClient;
+    /** Push a value to the data layer */
+    push: (value: DataLayerValue) => void;
+    /** Set consent defaults (must be called before init) */
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    /** Update consent state */
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    /** Returns a promise that resolves when all GTM scripts are loaded */
+    whenReady: () => Promise<ScriptLoadState[]>;
+    /** Register a callback for when GTM scripts are ready */
+    onReady: (callback: (state: ScriptLoadState[]) => void) => () => void;
+    /** Whether GTM has been initialized */
+    initialized: boolean;
+}
+/**
+ * Consent-specific API subset.
+ */
+interface GtmConsentApi {
+    setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;
+    updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;
+}
+/**
+ * The GTM context for SolidJS.
+ */
+declare const GtmContext: solid_js.Context<GtmContextValue | undefined>;
+/**
+ * GTM Provider component for SolidJS.
+ *
+ * @example
+ * ```tsx
+ * import { GtmProvider } from '@jwiedeman/gtm-kit-solid';
+ *
+ * function App() {
+ *   return (
+ *     <GtmProvider containers="GTM-XXXXXX">
+ *       <MyApp />
+ *     </GtmProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function GtmProvider(props: GtmProviderProps): JSX.Element;
+/**
+ * Hook to access the full GTM context.
+ *
+ * @example
+ * ```tsx
+ * import { useGtm } from '@jwiedeman/gtm-kit-solid';
+ *
+ * function MyComponent() {
+ *   const { push, client } = useGtm();
+ *
+ *   return (
+ *     <button onClick={() => push({ event: 'click' })}>
+ *       Click me
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare const useGtm: () => GtmContextValue;
+/**
+ * Hook to get just the push function.
+ * Use this when you only need to push events.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmPush } from '@jwiedeman/gtm-kit-solid';
+ *
+ * function MyComponent() {
+ *   const push = useGtmPush();
+ *
+ *   return (
+ *     <button onClick={() => push({ event: 'purchase', value: 99 })}>
+ *       Buy
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare const useGtmPush: () => ((value: DataLayerValue) => void);
+/**
+ * Hook to access consent management functions.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmConsent } from '@jwiedeman/gtm-kit-solid';
+ *
+ * function CookieBanner() {
+ *   const { updateConsent } = useGtmConsent();
+ *
+ *   const acceptAll = () => {
+ *     updateConsent({
+ *       ad_storage: 'granted',
+ *       analytics_storage: 'granted'
+ *     });
+ *   };
+ *
+ *   return <button onClick={acceptAll}>Accept All</button>;
+ * }
+ * ```
+ */
+declare const useGtmConsent: () => GtmConsentApi;
+/**
+ * Hook to get the raw GTM client instance.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmClient } from '@jwiedeman/gtm-kit-solid';
+ *
+ * function MyComponent() {
+ *   const client = useGtmClient();
+ *
+ *   return <div>Initialized: {client.isInitialized() ? 'Yes' : 'No'}</div>;
+ * }
+ * ```
+ */
+declare const useGtmClient: () => GtmClient;
+/**
+ * Hook to get the whenReady function.
+ * Use this to wait for GTM scripts to load.
+ *
+ * @example
+ * ```tsx
+ * import { useGtmReady } from '@jwiedeman/gtm-kit-solid';
+ * import { onMount } from 'solid-js';
+ *
+ * function MyComponent() {
+ *   const whenReady = useGtmReady();
+ *
+ *   onMount(async () => {
+ *     const states = await whenReady();
+ *     console.log('GTM loaded:', states);
+ *   });
+ *
+ *   return <div>Loading...</div>;
+ * }
+ * ```
+ */
+declare const useGtmReady: () => (() => Promise<ScriptLoadState[]>);
+
+export { GtmConsentApi, GtmContext, GtmContextValue, GtmProvider, GtmProviderProps, useGtm, useGtmClient, useGtmConsent, useGtmPush, useGtmReady };

package/dist/index.js

@@ -0,0 +1,9 @@
+import { createContext, onCleanup, useContext } from 'solid-js';
+import { createStore } from 'solid-js/store';
+import { createGtmClient } from '@jwiedeman/gtm-kit';
+
+var s=createContext();function v(t){var l;let i=(l=t.autoInit)!=null?l:!0,r=t.onBeforeInit,u=t.onAfterInit,m={containers:t.containers,...t.dataLayerName&&{dataLayerName:t.dataLayerName},...t.host&&{host:t.host},...t.scriptAttributes&&{scriptAttributes:t.scriptAttributes}},e=createGtmClient(m),[C,d]=createStore({initialized:!1}),c={client:e,push:n=>e.push(n),setConsentDefaults:(n,a)=>e.setConsentDefaults(n,a),updateConsent:(n,a)=>e.updateConsent(n,a),whenReady:()=>e.whenReady(),onReady:n=>e.onReady(n),get initialized(){return C.initialized}};return r&&r(e),i&&(e.init(),d("initialized",!0),u&&u(e)),onCleanup(()=>{e.teardown();}),React.createElement(s.Provider,{value:c},t.children)}var o=()=>{let t=useContext(s);if(!t)throw new Error('[gtm-kit] useGtm() was called outside of a GtmProvider. Make sure to wrap your app with <GtmProvider containers="GTM-XXXXXX">.');return t},S=()=>o(),h=()=>o().push,P=()=>{let{setConsentDefaults:t,updateConsent:i}=o();return {setConsentDefaults:t,updateConsent:i}},R=()=>o().client,L=()=>o().whenReady;
+
+export { s as GtmContext, v as GtmProvider, S as useGtm, R as useGtmClient, P as useGtmConsent, h as useGtmPush, L as useGtmReady };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.tsx"],"names":["createContext","useContext","onCleanup","createStore","createGtmClient","GtmContext","GtmProvider","props","_a","autoInit","onBeforeInit","onAfterInit","clientOptions","client","state","setState","contextValue","value","consentState","regionOptions","callback","useGtmContext","context","useGtm","useGtmPush","useGtmConsent","setConsentDefaults","updateConsent","useGtmClient","useGtmReady"],"mappings":"AAAA,OAAS,iBAAAA,EAAe,cAAAC,EAAY,aAAAC,MAA2B,WAC/D,OAAS,eAAAC,MAAmB,iBAC5B,OACE,mBAAAC,MAOK,qBA0DA,IAAMC,EAAaL,EAA+B,EAkBlD,SAASM,EAAYC,EAAsC,CAtFlE,IAAAC,EAyFE,IAAMC,GAAWD,EAAAD,EAAM,WAAN,KAAAC,EAAkB,GAC7BE,EAAeH,EAAM,aACrBI,EAAcJ,EAAM,YAGpBK,EAAwC,CAC5C,WAAYL,EAAM,WAClB,GAAIA,EAAM,eAAiB,CAAE,cAAeA,EAAM,aAAc,EAChE,GAAIA,EAAM,MAAQ,CAAE,KAAMA,EAAM,IAAK,EACrC,GAAIA,EAAM,kBAAoB,CAAE,iBAAkBA,EAAM,gBAAiB,CAC3E,EAEMM,EAAST,EAAgBQ,CAAa,EAEtC,CAACE,EAAOC,CAAQ,EAAIZ,EAAsC,CAC9D,YAAa,EACf,CAAC,EAEKa,EAAgC,CACpC,OAAAH,EACA,KAAOI,GAA0BJ,EAAO,KAAKI,CAAK,EAClD,mBAAoB,CAACC,EAA4BC,IAC/CN,EAAO,mBAAmBK,EAAcC,CAAa,EACvD,cAAe,CAACD,EAA4BC,IAC1CN,EAAO,cAAcK,EAAcC,CAAa,EAClD,UAAW,IAAMN,EAAO,UAAU,EAClC,QAAUO,GAAqDP,EAAO,QAAQO,CAAQ,EACtF,IAAI,aAAc,CAChB,OAAON,EAAM,WACf,CACF,EAGA,OAAIJ,GACFA,EAAaG,CAAM,EAIjBJ,IACFI,EAAO,KAAK,EACZE,EAAS,cAAe,EAAI,EAGxBJ,GACFA,EAAYE,CAAM,GAKtBX,EAAU,IAAM,CACdW,EAAO,SAAS,CAClB,CAAC,EAEM,oBAACR,EAAW,SAAX,CAAoB,MAAOW,GAAeT,EAAM,QAAS,CACnE,CAKA,IAAMc,EAAgB,IAAuB,CAC3C,IAAMC,EAAUrB,EAAWI,CAAU,EACrC,GAAI,CAACiB,EACH,MAAM,IAAI,MACR,gIAEF,EAEF,OAAOA,CACT,EAoBaC,EAAS,IACbF,EAAc,EAsBVG,EAAa,IACjBH,EAAc,EAAE,KAwBZI,EAAgB,IAAqB,CAChD,GAAM,CAAE,mBAAAC,EAAoB,cAAAC,CAAc,EAAIN,EAAc,EAC5D,MAAO,CAAE,mBAAAK,EAAoB,cAAAC,CAAc,CAC7C,EAgBaC,EAAe,IACnBP,EAAc,EAAE,OAwBZQ,EAAc,IAClBR,EAAc,EAAE","sourcesContent":["import { createContext, useContext, onCleanup, type JSX } from 'solid-js';\nimport { createStore } from 'solid-js/store';\nimport {\n  createGtmClient,\n  type ConsentRegionOptions,\n  type ConsentState,\n  type CreateGtmClientOptions,\n  type DataLayerValue,\n  type GtmClient,\n  type ScriptLoadState\n} from '@jwiedeman/gtm-kit';\n\n/**\n * Props for the GTM Provider component.\n */\nexport interface GtmProviderProps extends CreateGtmClientOptions {\n  /** Child components */\n  children: JSX.Element;\n\n  /**\n   * Whether to automatically initialize GTM when the provider mounts.\n   * @default true\n   */\n  autoInit?: boolean;\n\n  /**\n   * Callback executed before GTM initialization.\n   * Use this to set consent defaults.\n   */\n  onBeforeInit?: (client: GtmClient) => void;\n\n  /**\n   * Callback executed after GTM initialization.\n   */\n  onAfterInit?: (client: GtmClient) => void;\n}\n\n/**\n * The GTM context value containing all GTM functionality.\n */\nexport interface GtmContextValue {\n  /** The underlying GTM client instance */\n  client: GtmClient;\n  /** Push a value to the data layer */\n  push: (value: DataLayerValue) => void;\n  /** Set consent defaults (must be called before init) */\n  setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  /** Update consent state */\n  updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  /** Returns a promise that resolves when all GTM scripts are loaded */\n  whenReady: () => Promise<ScriptLoadState[]>;\n  /** Register a callback for when GTM scripts are ready */\n  onReady: (callback: (state: ScriptLoadState[]) => void) => () => void;\n  /** Whether GTM has been initialized */\n  initialized: boolean;\n}\n\n/**\n * Consent-specific API subset.\n */\nexport interface GtmConsentApi {\n  setConsentDefaults: (state: ConsentState, options?: ConsentRegionOptions) => void;\n  updateConsent: (state: ConsentState, options?: ConsentRegionOptions) => void;\n}\n\n/**\n * The GTM context for SolidJS.\n */\nexport const GtmContext = createContext<GtmContextValue>();\n\n/**\n * GTM Provider component for SolidJS.\n *\n * @example\n * ```tsx\n * import { GtmProvider } from '@jwiedeman/gtm-kit-solid';\n *\n * function App() {\n *   return (\n *     <GtmProvider containers=\"GTM-XXXXXX\">\n *       <MyApp />\n *     </GtmProvider>\n *   );\n * }\n * ```\n */\nexport function GtmProvider(props: GtmProviderProps): JSX.Element {\n  // Note: Don't destructure children - in Solid.js, children is a getter that\n  // should only be accessed inside the returned JSX to maintain proper reactivity\n  const autoInit = props.autoInit ?? true;\n  const onBeforeInit = props.onBeforeInit;\n  const onAfterInit = props.onAfterInit;\n\n  // Extract client options (everything except children and lifecycle hooks)\n  const clientOptions: CreateGtmClientOptions = {\n    containers: props.containers,\n    ...(props.dataLayerName && { dataLayerName: props.dataLayerName }),\n    ...(props.host && { host: props.host }),\n    ...(props.scriptAttributes && { scriptAttributes: props.scriptAttributes })\n  };\n\n  const client = createGtmClient(clientOptions);\n\n  const [state, setState] = createStore<{ initialized: boolean }>({\n    initialized: false\n  });\n\n  const contextValue: GtmContextValue = {\n    client,\n    push: (value: DataLayerValue) => client.push(value),\n    setConsentDefaults: (consentState: ConsentState, regionOptions?: ConsentRegionOptions) =>\n      client.setConsentDefaults(consentState, regionOptions),\n    updateConsent: (consentState: ConsentState, regionOptions?: ConsentRegionOptions) =>\n      client.updateConsent(consentState, regionOptions),\n    whenReady: () => client.whenReady(),\n    onReady: (callback: (loadState: ScriptLoadState[]) => void) => client.onReady(callback),\n    get initialized() {\n      return state.initialized;\n    }\n  };\n\n  // Call onBeforeInit hook if provided (for consent defaults)\n  if (onBeforeInit) {\n    onBeforeInit(client);\n  }\n\n  // Auto-initialize if enabled\n  if (autoInit) {\n    client.init();\n    setState('initialized', true);\n\n    // Call onAfterInit hook if provided\n    if (onAfterInit) {\n      onAfterInit(client);\n    }\n  }\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    client.teardown();\n  });\n\n  return <GtmContext.Provider value={contextValue}>{props.children}</GtmContext.Provider>;\n}\n\n/**\n * Internal helper to get the GTM context with proper error handling.\n */\nconst useGtmContext = (): GtmContextValue => {\n  const context = useContext(GtmContext);\n  if (!context) {\n    throw new Error(\n      '[gtm-kit] useGtm() was called outside of a GtmProvider. ' +\n        'Make sure to wrap your app with <GtmProvider containers=\"GTM-XXXXXX\">.'\n    );\n  }\n  return context;\n};\n\n/**\n * Hook to access the full GTM context.\n *\n * @example\n * ```tsx\n * import { useGtm } from '@jwiedeman/gtm-kit-solid';\n *\n * function MyComponent() {\n *   const { push, client } = useGtm();\n *\n *   return (\n *     <button onClick={() => push({ event: 'click' })}>\n *       Click me\n *     </button>\n *   );\n * }\n * ```\n */\nexport const useGtm = (): GtmContextValue => {\n  return useGtmContext();\n};\n\n/**\n * Hook to get just the push function.\n * Use this when you only need to push events.\n *\n * @example\n * ```tsx\n * import { useGtmPush } from '@jwiedeman/gtm-kit-solid';\n *\n * function MyComponent() {\n *   const push = useGtmPush();\n *\n *   return (\n *     <button onClick={() => push({ event: 'purchase', value: 99 })}>\n *       Buy\n *     </button>\n *   );\n * }\n * ```\n */\nexport const useGtmPush = (): ((value: DataLayerValue) => void) => {\n  return useGtmContext().push;\n};\n\n/**\n * Hook to access consent management functions.\n *\n * @example\n * ```tsx\n * import { useGtmConsent } from '@jwiedeman/gtm-kit-solid';\n *\n * function CookieBanner() {\n *   const { updateConsent } = useGtmConsent();\n *\n *   const acceptAll = () => {\n *     updateConsent({\n *       ad_storage: 'granted',\n *       analytics_storage: 'granted'\n *     });\n *   };\n *\n *   return <button onClick={acceptAll}>Accept All</button>;\n * }\n * ```\n */\nexport const useGtmConsent = (): GtmConsentApi => {\n  const { setConsentDefaults, updateConsent } = useGtmContext();\n  return { setConsentDefaults, updateConsent };\n};\n\n/**\n * Hook to get the raw GTM client instance.\n *\n * @example\n * ```tsx\n * import { useGtmClient } from '@jwiedeman/gtm-kit-solid';\n *\n * function MyComponent() {\n *   const client = useGtmClient();\n *\n *   return <div>Initialized: {client.isInitialized() ? 'Yes' : 'No'}</div>;\n * }\n * ```\n */\nexport const useGtmClient = (): GtmClient => {\n  return useGtmContext().client;\n};\n\n/**\n * Hook to get the whenReady function.\n * Use this to wait for GTM scripts to load.\n *\n * @example\n * ```tsx\n * import { useGtmReady } from '@jwiedeman/gtm-kit-solid';\n * import { onMount } from 'solid-js';\n *\n * function MyComponent() {\n *   const whenReady = useGtmReady();\n *\n *   onMount(async () => {\n *     const states = await whenReady();\n *     console.log('GTM loaded:', states);\n *   });\n *\n *   return <div>Loading...</div>;\n * }\n * ```\n */\nexport const useGtmReady = (): (() => Promise<ScriptLoadState[]>) => {\n  return useGtmContext().whenReady;\n};\n"]}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@jwiedeman/gtm-kit-solid",
+  "version": "1.0.1",
+  "description": "SolidJS primitives and context for GTM Kit - Google Tag Manager integration.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jwiedeman/GTM-Kit.git",
+    "directory": "packages/solid"
+  },
+  "author": "jwiedeman",
+  "keywords": [
+    "gtm",
+    "google-tag-manager",
+    "solidjs",
+    "solid",
+    "primitives"
+  ],
+  "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",
+      "solid": "./dist/index.js",
+      "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 --passWithNoTests",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@jwiedeman/gtm-kit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.0.0"
+  },
+  "devDependencies": {
+    "@solidjs/testing-library": "^0.8.7",
+    "solid-js": "^1.8.17",
+    "solid-testing-library": "^0.5.1",
+    "tslib": "^2.6.2"
+  }
+}