@jwiedeman/gtm-kit-svelte 1.0.1

package/README.md

@@ -0,0 +1,346 @@
+# @react-gtm-kit/svelte
+
+[![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=svelte)](https://codecov.io/gh/jwiedeman/react-gtm-kit)
+[![npm version](https://img.shields.io/npm/v/@react-gtm-kit/svelte.svg)](https://www.npmjs.com/package/@react-gtm-kit/svelte)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@react-gtm-kit/svelte)](https://bundlephobia.com/package/@react-gtm-kit/svelte)
+[![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)
+[![Svelte](https://img.shields.io/badge/Svelte-4.0+-FF3E00.svg?logo=svelte)](https://svelte.dev/)
+
+**Svelte stores and context for Google Tag Manager. Reactive by design.**
+
+The Svelte adapter for GTM Kit - provides stores and context for idiomatic Svelte integration.
+
+---
+
+## Installation
+
+```bash
+npm install @react-gtm-kit/core @react-gtm-kit/svelte
+```
+
+```bash
+yarn add @react-gtm-kit/core @react-gtm-kit/svelte
+```
+
+```bash
+pnpm add @react-gtm-kit/core @react-gtm-kit/svelte
+```
+
+---
+
+## Quick Start
+
+### Step 1: Create Store in Layout
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script>
+  import { createGtmStore, setGtmContext } from '@react-gtm-kit/svelte';
+
+  const gtm = createGtmStore({ containers: 'GTM-XXXXXX' });
+  setGtmContext(gtm);
+</script>
+
+<slot />
+```
+
+### Step 2: Push Events
+
+```svelte
+<!-- src/routes/+page.svelte -->
+<script>
+  import { getGtmContext } from '@react-gtm-kit/svelte';
+
+  const gtm = getGtmContext();
+
+  function handleClick() {
+    $gtm.push({ event: 'purchase', value: 49.99 });
+  }
+</script>
+
+<button on:click={handleClick}>Buy Now</button>
+```
+
+**That's it!** GTM is now running.
+
+---
+
+## Features
+
+| Feature | Description |
+|---------|-------------|
+| **Svelte Stores** | Native Svelte store integration |
+| **Context API** | Uses Svelte context for DI |
+| **Reactive** | Fully reactive with `$` syntax |
+| **TypeScript** | Full type definitions included |
+| **Consent Mode v2** | Built-in GDPR compliance |
+| **SSR Compatible** | Safe for SvelteKit SSR |
+
+---
+
+## Available Functions
+
+### `createGtmStore(options)`
+
+Creates a new GTM store. Call this once in your root layout.
+
+```svelte
+<script>
+  import { createGtmStore, setGtmContext } from '@react-gtm-kit/svelte';
+
+  const gtm = createGtmStore({
+    containers: 'GTM-XXXXXX',
+    autoInit: true, // default
+    onBeforeInit: (client) => {
+      // Set consent defaults here
+    }
+  });
+
+  setGtmContext(gtm);
+</script>
+```
+
+### `getGtmContext()`
+
+Gets the GTM store from context. Use in child components.
+
+```svelte
+<script>
+  import { getGtmContext } from '@react-gtm-kit/svelte';
+
+  const gtm = getGtmContext();
+
+  // Access store values reactively
+  $: ({ push, client, updateConsent } = $gtm);
+</script>
+```
+
+### `gtmPush()`
+
+Get a derived store for just the push function.
+
+```svelte
+<script>
+  import { gtmPush } from '@react-gtm-kit/svelte';
+
+  const push = gtmPush();
+
+  function track() {
+    $push({ event: 'button_click' });
+  }
+</script>
+```
+
+### `gtmConsent()`
+
+Get a derived store for consent functions.
+
+```svelte
+<script>
+  import { gtmConsent } from '@react-gtm-kit/svelte';
+
+  const consent = gtmConsent();
+
+  function acceptAll() {
+    $consent.updateConsent({
+      ad_storage: 'granted',
+      analytics_storage: 'granted'
+    });
+  }
+</script>
+```
+
+### `gtmClient()`
+
+Get a derived store for the raw GTM client.
+
+```svelte
+<script>
+  import { gtmClient } from '@react-gtm-kit/svelte';
+
+  const client = gtmClient();
+</script>
+```
+
+### `gtmReady()`
+
+Get a derived store for the whenReady function.
+
+```svelte
+<script>
+  import { gtmReady } from '@react-gtm-kit/svelte';
+  import { onMount } from 'svelte';
+
+  const whenReady = gtmReady();
+
+  onMount(async () => {
+    await $whenReady();
+    console.log('GTM is ready!');
+  });
+</script>
+```
+
+---
+
+## SvelteKit Integration
+
+### Basic Setup
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script>
+  import { createGtmStore, setGtmContext } from '@react-gtm-kit/svelte';
+  import { browser } from '$app/environment';
+
+  // Only create store in browser
+  if (browser) {
+    const gtm = createGtmStore({ containers: 'GTM-XXXXXX' });
+    setGtmContext(gtm);
+  }
+</script>
+
+<slot />
+```
+
+### Page Tracking
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script>
+  import { createGtmStore, setGtmContext } from '@react-gtm-kit/svelte';
+  import { page } from '$app/stores';
+  import { browser } from '$app/environment';
+
+  let gtm;
+
+  if (browser) {
+    gtm = createGtmStore({ containers: 'GTM-XXXXXX' });
+    setGtmContext(gtm);
+
+    // Track page views
+    $: if ($gtm && $page) {
+      $gtm.push({
+        event: 'page_view',
+        page_path: $page.url.pathname
+      });
+    }
+  }
+</script>
+
+<slot />
+```
+
+---
+
+## Consent Mode v2 (GDPR)
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script>
+  import { createGtmStore, setGtmContext } from '@react-gtm-kit/svelte';
+  import { consentPresets } from '@react-gtm-kit/core';
+  import { browser } from '$app/environment';
+
+  if (browser) {
+    const gtm = createGtmStore({
+      containers: 'GTM-XXXXXX',
+      onBeforeInit: (client) => {
+        // Deny by default for EU users
+        client.setConsentDefaults(consentPresets.eeaDefault, { region: ['EEA'] });
+      }
+    });
+    setGtmContext(gtm);
+  }
+</script>
+
+<slot />
+```
+
+```svelte
+<!-- src/lib/CookieBanner.svelte -->
+<script>
+  import { gtmConsent } from '@react-gtm-kit/svelte';
+
+  const consent = gtmConsent();
+
+  function acceptAll() {
+    $consent.updateConsent({
+      ad_storage: 'granted',
+      analytics_storage: 'granted',
+      ad_user_data: 'granted',
+      ad_personalization: 'granted'
+    });
+  }
+
+  function rejectAll() {
+    $consent.updateConsent({
+      ad_storage: 'denied',
+      analytics_storage: 'denied',
+      ad_user_data: 'denied',
+      ad_personalization: 'denied'
+    });
+  }
+</script>
+
+<div class="cookie-banner">
+  <p>We use cookies to improve your experience.</p>
+  <button on:click={acceptAll}>Accept All</button>
+  <button on:click={rejectAll}>Reject All</button>
+</div>
+```
+
+---
+
+## Store Options
+
+```typescript
+interface GtmStoreOptions {
+  // Required: GTM container ID(s)
+  containers: string | ContainerConfig | (string | ContainerConfig)[];
+
+  // Whether to auto-initialize GTM (default: true)
+  autoInit?: boolean;
+
+  // Custom dataLayer name (default: 'dataLayer')
+  dataLayerName?: string;
+
+  // Custom GTM host
+  host?: string;
+
+  // Script attributes (e.g., nonce for CSP)
+  scriptAttributes?: Record<string, string>;
+
+  // Called before GTM initializes
+  onBeforeInit?: (client: GtmClient) => void;
+}
+```
+
+---
+
+## TypeScript
+
+Full TypeScript support is included:
+
+```svelte
+<script lang="ts">
+  import { getGtmContext, type GtmStoreValue } from '@react-gtm-kit/svelte';
+  import type { Writable } from 'svelte/store';
+
+  const gtm: Writable<GtmStoreValue> = getGtmContext();
+</script>
+```
+
+---
+
+## Requirements
+
+- Svelte 4.0+ or 5.0+
+- `@react-gtm-kit/core` (peer dependency)
+
+---
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var store = require('svelte/store');
+var svelte = require('svelte');
+var gtmKit = require('@jwiedeman/gtm-kit');
+
+var l=Symbol("gtm-kit");function G(t){let{autoInit:e=!0,onBeforeInit:r,...m}=t,o=gtmKit.createGtmClient(m),p=store.writable({client:o,push:n=>o.push(n),setConsentDefaults:(n,s)=>o.setConsentDefaults(n,s),updateConsent:(n,s)=>o.updateConsent(n,s),whenReady:()=>o.whenReady(),onReady:n=>o.onReady(n),initialized:!1});return r&&r(o),e&&(o.init(),p.update(n=>({...n,initialized:!0}))),p}function a(){let t=svelte.getContext(l);if(!t)throw new Error("[gtm-kit] getGtmContext() was called outside of a component tree with GTM context. Make sure to call setGtmContext() in a parent component.");return t}function S(t){svelte.setContext(l,t);}var f=a;function x(){let t=a();return store.derived(t,e=>e.push)}function g(){let t=a();return store.derived(t,e=>({setConsentDefaults:e.setConsentDefaults,updateConsent:e.updateConsent}))}function y(){let t=a();return store.derived(t,e=>e.client)}function R(){let t=a();return store.derived(t,e=>e.whenReady)}
+
+exports.createGtmStore = G;
+exports.getGtmContext = a;
+exports.gtmClient = y;
+exports.gtmConsent = g;
+exports.gtmContext = f;
+exports.gtmPush = x;
+exports.gtmReady = R;
+exports.setGtmContext = S;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/store.ts"],"names":["writable","derived","getContext","setContext","createGtmClient","GTM_CONTEXT_KEY","createGtmStore","options","autoInit","onBeforeInit","clientOptions","client","store","value","state","regionOptions","callback","s","getGtmContext","context","setGtmContext","gtmContext","gtmPush","$store","gtmConsent","gtmClient","gtmReady"],"mappings":"AAAA,OAAS,YAAAA,EAAU,WAAAC,MAA6C,eAChE,OAAS,cAAAC,EAAY,cAAAC,MAAkB,SACvC,OACE,mBAAAC,MAOK,qBAiDP,IAAMC,EAAkB,OAAO,SAAS,EAgBjC,SAASC,EAAeC,EAAmD,CAChF,GAAM,CAAE,SAAAC,EAAW,GAAM,aAAAC,EAAc,GAAGC,CAAc,EAAIH,EAEtDI,EAASP,EAAgBM,CAAa,EActCE,EAAQZ,EAZsB,CAClC,OAAAW,EACA,KAAOE,GAA0BF,EAAO,KAAKE,CAAK,EAClD,mBAAoB,CAACC,EAAqBC,IACxCJ,EAAO,mBAAmBG,EAAOC,CAAa,EAChD,cAAe,CAACD,EAAqBC,IACnCJ,EAAO,cAAcG,EAAOC,CAAa,EAC3C,UAAW,IAAMJ,EAAO,UAAU,EAClC,QAAUK,GAAiDL,EAAO,QAAQK,CAAQ,EAClF,YAAa,EACf,CAEkD,EAGlD,OAAIP,GACFA,EAAaE,CAAM,EAIjBH,IACFG,EAAO,KAAK,EACZC,EAAM,OAAQK,IAAO,CAAE,GAAGA,EAAG,YAAa,EAAK,EAAE,GAG5CL,CACT,CAgBO,SAASM,GAAyC,CACvD,IAAMC,EAAUjB,EAAoCG,CAAe,EACnE,GAAI,CAACc,EACH,MAAM,IAAI,MACR,6IAEF,EAEF,OAAOA,CACT,CAkBO,SAASC,EAAcR,EAAsC,CAClET,EAAWE,EAAiBO,CAAK,CACnC,CAKO,IAAMS,EAAaH,EAmBnB,SAASI,GAAqD,CACnE,IAAMV,EAAQM,EAAc,EAC5B,OAAOjB,EAAQW,EAAQW,GAAWA,EAAO,IAAI,CAC/C,CAkBO,SAASC,GAAsC,CACpD,IAAMZ,EAAQM,EAAc,EAC5B,OAAOjB,EAAQW,EAAQW,IAAY,CACjC,mBAAoBA,EAAO,mBAC3B,cAAeA,EAAO,aACxB,EAAE,CACJ,CAcO,SAASE,GAAiC,CAC/C,IAAMb,EAAQM,EAAc,EAC5B,OAAOjB,EAAQW,EAAQW,GAAWA,EAAO,MAAM,CACjD,CAoBO,SAASG,GAAuD,CACrE,IAAMd,EAAQM,EAAc,EAC5B,OAAOjB,EAAQW,EAAQW,GAAWA,EAAO,SAAS,CACpD","sourcesContent":["import { writable, derived, type Writable, type Readable } from 'svelte/store';\nimport { getContext, setContext } from 'svelte';\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 * Options for creating a GTM store.\n * Extends CreateGtmClientOptions with Svelte-specific options.\n */\nexport interface GtmStoreOptions extends CreateGtmClientOptions {\n  /**\n   * Whether to automatically initialize GTM when the store is created.\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/**\n * The GTM store value containing all GTM functionality.\n */\nexport interface GtmStoreValue {\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/** Context key for GTM store */\nconst GTM_CONTEXT_KEY = Symbol('gtm-kit');\n\n/**\n * Create a GTM store for Svelte.\n *\n * @example\n * ```svelte\n * <script>\n *   import { createGtmStore, setGtmContext } from '@jwiedeman/gtm-kit-svelte';\n *   import { onMount } from 'svelte';\n *\n *   const gtm = createGtmStore({ containers: 'GTM-XXXXXX' });\n *   setGtmContext(gtm);\n * </script>\n * ```\n */\nexport function createGtmStore(options: GtmStoreOptions): Writable<GtmStoreValue> {\n  const { autoInit = true, onBeforeInit, ...clientOptions } = options;\n\n  const client = createGtmClient(clientOptions);\n\n  const initialValue: GtmStoreValue = {\n    client,\n    push: (value: DataLayerValue) => client.push(value),\n    setConsentDefaults: (state: ConsentState, regionOptions?: ConsentRegionOptions) =>\n      client.setConsentDefaults(state, regionOptions),\n    updateConsent: (state: ConsentState, regionOptions?: ConsentRegionOptions) =>\n      client.updateConsent(state, regionOptions),\n    whenReady: () => client.whenReady(),\n    onReady: (callback: (state: ScriptLoadState[]) => void) => client.onReady(callback),\n    initialized: false\n  };\n\n  const store = writable<GtmStoreValue>(initialValue);\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    store.update((s) => ({ ...s, initialized: true }));\n  }\n\n  return store;\n}\n\n/**\n * Get the GTM context from a parent component.\n * Must be called during component initialization.\n *\n * @example\n * ```svelte\n * <script>\n *   import { getGtmContext } from '@jwiedeman/gtm-kit-svelte';\n *\n *   const gtm = getGtmContext();\n *   $: ({ push } = $gtm);\n * </script>\n * ```\n */\nexport function getGtmContext(): Writable<GtmStoreValue> {\n  const context = getContext<Writable<GtmStoreValue>>(GTM_CONTEXT_KEY);\n  if (!context) {\n    throw new Error(\n      '[gtm-kit] getGtmContext() was called outside of a component tree with GTM context. ' +\n        'Make sure to call setGtmContext() in a parent component.'\n    );\n  }\n  return context;\n}\n\n/**\n * Set the GTM context for child components.\n * Call this in your root layout or App component.\n *\n * @example\n * ```svelte\n * <script>\n *   import { createGtmStore, setGtmContext } from '@jwiedeman/gtm-kit-svelte';\n *\n *   const gtm = createGtmStore({ containers: 'GTM-XXXXXX' });\n *   setGtmContext(gtm);\n * </script>\n *\n * <slot />\n * ```\n */\nexport function setGtmContext(store: Writable<GtmStoreValue>): void {\n  setContext(GTM_CONTEXT_KEY, store);\n}\n\n/**\n * Alias for getGtmContext() - get the full GTM store.\n */\nexport const gtmContext = getGtmContext;\n\n/**\n * Get a derived store that provides just the push function.\n * Use this when you only need to push events.\n *\n * @example\n * ```svelte\n * <script>\n *   import { gtmPush } from '@jwiedeman/gtm-kit-svelte';\n *\n *   const push = gtmPush();\n *\n *   function handleClick() {\n *     $push({ event: 'button_click' });\n *   }\n * </script>\n * ```\n */\nexport function gtmPush(): Readable<(value: DataLayerValue) => void> {\n  const store = getGtmContext();\n  return derived(store, ($store) => $store.push);\n}\n\n/**\n * Get a derived store that provides consent functions.\n *\n * @example\n * ```svelte\n * <script>\n *   import { gtmConsent } from '@jwiedeman/gtm-kit-svelte';\n *\n *   const consent = gtmConsent();\n *\n *   function acceptAll() {\n *     $consent.updateConsent({ analytics_storage: 'granted' });\n *   }\n * </script>\n * ```\n */\nexport function gtmConsent(): Readable<GtmConsentApi> {\n  const store = getGtmContext();\n  return derived(store, ($store) => ({\n    setConsentDefaults: $store.setConsentDefaults,\n    updateConsent: $store.updateConsent\n  }));\n}\n\n/**\n * Get a derived store that provides the raw GTM client.\n *\n * @example\n * ```svelte\n * <script>\n *   import { gtmClient } from '@jwiedeman/gtm-kit-svelte';\n *\n *   const client = gtmClient();\n * </script>\n * ```\n */\nexport function gtmClient(): Readable<GtmClient> {\n  const store = getGtmContext();\n  return derived(store, ($store) => $store.client);\n}\n\n/**\n * Get a derived store that provides the whenReady function.\n *\n * @example\n * ```svelte\n * <script>\n *   import { gtmReady } from '@jwiedeman/gtm-kit-svelte';\n *   import { onMount } from 'svelte';\n *\n *   const whenReady = gtmReady();\n *\n *   onMount(async () => {\n *     const states = await $whenReady();\n *     console.log('GTM loaded:', states);\n *   });\n * </script>\n * ```\n */\nexport function gtmReady(): Readable<() => Promise<ScriptLoadState[]>> {\n  const store = getGtmContext();\n  return derived(store, ($store) => $store.whenReady);\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,165 @@
+import { Writable, Readable } from 'svelte/store';
+import { CreateGtmClientOptions, GtmClient, DataLayerValue, ConsentState, ConsentRegionOptions, ScriptLoadState } from '@jwiedeman/gtm-kit';
+
+/**
+ * Options for creating a GTM store.
+ * Extends CreateGtmClientOptions with Svelte-specific options.
+ */
+interface GtmStoreOptions extends CreateGtmClientOptions {
+    /**
+     * Whether to automatically initialize GTM when the store is created.
+     * @default true
+     */
+    autoInit?: boolean;
+    /**
+     * Callback executed before GTM initialization.
+     * Use this to set consent defaults.
+     */
+    onBeforeInit?: (client: GtmClient) => void;
+}
+/**
+ * The GTM store value containing all GTM functionality.
+ */
+interface GtmStoreValue {
+    /** 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;
+}
+/**
+ * Create a GTM store for Svelte.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGtmStore, setGtmContext } from '@jwiedeman/gtm-kit-svelte';
+ *   import { onMount } from 'svelte';
+ *
+ *   const gtm = createGtmStore({ containers: 'GTM-XXXXXX' });
+ *   setGtmContext(gtm);
+ * </script>
+ * ```
+ */
+declare function createGtmStore(options: GtmStoreOptions): Writable<GtmStoreValue>;
+/**
+ * Get the GTM context from a parent component.
+ * Must be called during component initialization.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { getGtmContext } from '@jwiedeman/gtm-kit-svelte';
+ *
+ *   const gtm = getGtmContext();
+ *   $: ({ push } = $gtm);
+ * </script>
+ * ```
+ */
+declare function getGtmContext(): Writable<GtmStoreValue>;
+/**
+ * Set the GTM context for child components.
+ * Call this in your root layout or App component.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGtmStore, setGtmContext } from '@jwiedeman/gtm-kit-svelte';
+ *
+ *   const gtm = createGtmStore({ containers: 'GTM-XXXXXX' });
+ *   setGtmContext(gtm);
+ * </script>
+ *
+ * <slot />
+ * ```
+ */
+declare function setGtmContext(store: Writable<GtmStoreValue>): void;
+/**
+ * Alias for getGtmContext() - get the full GTM store.
+ */
+declare const gtmContext: typeof getGtmContext;
+/**
+ * Get a derived store that provides just the push function.
+ * Use this when you only need to push events.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { gtmPush } from '@jwiedeman/gtm-kit-svelte';
+ *
+ *   const push = gtmPush();
+ *
+ *   function handleClick() {
+ *     $push({ event: 'button_click' });
+ *   }
+ * </script>
+ * ```
+ */
+declare function gtmPush(): Readable<(value: DataLayerValue) => void>;
+/**
+ * Get a derived store that provides consent functions.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { gtmConsent } from '@jwiedeman/gtm-kit-svelte';
+ *
+ *   const consent = gtmConsent();
+ *
+ *   function acceptAll() {
+ *     $consent.updateConsent({ analytics_storage: 'granted' });
+ *   }
+ * </script>
+ * ```
+ */
+declare function gtmConsent(): Readable<GtmConsentApi>;
+/**
+ * Get a derived store that provides the raw GTM client.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { gtmClient } from '@jwiedeman/gtm-kit-svelte';
+ *
+ *   const client = gtmClient();
+ * </script>
+ * ```
+ */
+declare function gtmClient(): Readable<GtmClient>;
+/**
+ * Get a derived store that provides the whenReady function.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { gtmReady } from '@jwiedeman/gtm-kit-svelte';
+ *   import { onMount } from 'svelte';
+ *
+ *   const whenReady = gtmReady();
+ *
+ *   onMount(async () => {
+ *     const states = await $whenReady();
+ *     console.log('GTM loaded:', states);
+ *   });
+ * </script>
+ * ```
+ */
+declare function gtmReady(): Readable<() => Promise<ScriptLoadState[]>>;
+
+export { GtmConsentApi, GtmStoreOptions, GtmStoreValue, createGtmStore, getGtmContext, gtmClient, gtmConsent, gtmContext, gtmPush, gtmReady, setGtmContext };

package/dist/index.d.ts

@@ -0,0 +1,165 @@
+import { Writable, Readable } from 'svelte/store';
+import { CreateGtmClientOptions, GtmClient, DataLayerValue, ConsentState, ConsentRegionOptions, ScriptLoadState } from '@jwiedeman/gtm-kit';
+
+/**
+ * Options for creating a GTM store.
+ * Extends CreateGtmClientOptions with Svelte-specific options.
+ */
+interface GtmStoreOptions extends CreateGtmClientOptions {
+    /**
+     * Whether to automatically initialize GTM when the store is created.
+     * @default true
+     */
+    autoInit?: boolean;
+    /**
+     * Callback executed before GTM initialization.
+     * Use this to set consent defaults.
+     */
+    onBeforeInit?: (client: GtmClient) => void;
+}
+/**
+ * The GTM store value containing all GTM functionality.
+ */
+interface GtmStoreValue {
+    /** 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;
+}
+/**
+ * Create a GTM store for Svelte.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGtmStore, setGtmContext } from '@jwiedeman/gtm-kit-svelte';
+ *   import { onMount } from 'svelte';
+ *
+ *   const gtm = createGtmStore({ containers: 'GTM-XXXXXX' });
+ *   setGtmContext(gtm);
+ * </script>
+ * ```
+ */
+declare function createGtmStore(options: GtmStoreOptions): Writable<GtmStoreValue>;
+/**
+ * Get the GTM context from a parent component.
+ * Must be called during component initialization.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { getGtmContext } from '@jwiedeman/gtm-kit-svelte';
+ *
+ *   const gtm = getGtmContext();
+ *   $: ({ push } = $gtm);
+ * </script>
+ * ```
+ */
+declare function getGtmContext(): Writable<GtmStoreValue>;
+/**
+ * Set the GTM context for child components.
+ * Call this in your root layout or App component.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGtmStore, setGtmContext } from '@jwiedeman/gtm-kit-svelte';
+ *
+ *   const gtm = createGtmStore({ containers: 'GTM-XXXXXX' });
+ *   setGtmContext(gtm);
+ * </script>
+ *
+ * <slot />
+ * ```
+ */
+declare function setGtmContext(store: Writable<GtmStoreValue>): void;
+/**
+ * Alias for getGtmContext() - get the full GTM store.
+ */
+declare const gtmContext: typeof getGtmContext;
+/**
+ * Get a derived store that provides just the push function.
+ * Use this when you only need to push events.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { gtmPush } from '@jwiedeman/gtm-kit-svelte';
+ *
+ *   const push = gtmPush();
+ *
+ *   function handleClick() {
+ *     $push({ event: 'button_click' });
+ *   }
+ * </script>
+ * ```
+ */
+declare function gtmPush(): Readable<(value: DataLayerValue) => void>;
+/**
+ * Get a derived store that provides consent functions.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { gtmConsent } from '@jwiedeman/gtm-kit-svelte';
+ *
+ *   const consent = gtmConsent();
+ *
+ *   function acceptAll() {
+ *     $consent.updateConsent({ analytics_storage: 'granted' });
+ *   }
+ * </script>
+ * ```
+ */
+declare function gtmConsent(): Readable<GtmConsentApi>;
+/**
+ * Get a derived store that provides the raw GTM client.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { gtmClient } from '@jwiedeman/gtm-kit-svelte';
+ *
+ *   const client = gtmClient();
+ * </script>
+ * ```
+ */
+declare function gtmClient(): Readable<GtmClient>;
+/**
+ * Get a derived store that provides the whenReady function.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { gtmReady } from '@jwiedeman/gtm-kit-svelte';
+ *   import { onMount } from 'svelte';
+ *
+ *   const whenReady = gtmReady();
+ *
+ *   onMount(async () => {
+ *     const states = await $whenReady();
+ *     console.log('GTM loaded:', states);
+ *   });
+ * </script>
+ * ```
+ */
+declare function gtmReady(): Readable<() => Promise<ScriptLoadState[]>>;
+
+export { GtmConsentApi, GtmStoreOptions, GtmStoreValue, createGtmStore, getGtmContext, gtmClient, gtmConsent, gtmContext, gtmPush, gtmReady, setGtmContext };

package/dist/index.js

@@ -0,0 +1,9 @@
+import { writable, derived } from 'svelte/store';
+import { getContext, setContext } from 'svelte';
+import { createGtmClient } from '@jwiedeman/gtm-kit';
+
+var l=Symbol("gtm-kit");function G(t){let{autoInit:e=!0,onBeforeInit:r,...m}=t,o=createGtmClient(m),p=writable({client:o,push:n=>o.push(n),setConsentDefaults:(n,s)=>o.setConsentDefaults(n,s),updateConsent:(n,s)=>o.updateConsent(n,s),whenReady:()=>o.whenReady(),onReady:n=>o.onReady(n),initialized:!1});return r&&r(o),e&&(o.init(),p.update(n=>({...n,initialized:!0}))),p}function a(){let t=getContext(l);if(!t)throw new Error("[gtm-kit] getGtmContext() was called outside of a component tree with GTM context. Make sure to call setGtmContext() in a parent component.");return t}function S(t){setContext(l,t);}var f=a;function x(){let t=a();return derived(t,e=>e.push)}function g(){let t=a();return derived(t,e=>({setConsentDefaults:e.setConsentDefaults,updateConsent:e.updateConsent}))}function y(){let t=a();return derived(t,e=>e.client)}function R(){let t=a();return derived(t,e=>e.whenReady)}
+
+export { G as createGtmStore, a as getGtmContext, y as gtmClient, g as gtmConsent, f as gtmContext, x as gtmPush, R as gtmReady, S as setGtmContext };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/store.ts"],"names":["writable","derived","getContext","setContext","createGtmClient","GTM_CONTEXT_KEY","createGtmStore","options","autoInit","onBeforeInit","clientOptions","client","store","value","state","regionOptions","callback","s","getGtmContext","context","setGtmContext","gtmContext","gtmPush","$store","gtmConsent","gtmClient","gtmReady"],"mappings":"AAAA,OAAS,YAAAA,EAAU,WAAAC,MAA6C,eAChE,OAAS,cAAAC,EAAY,cAAAC,MAAkB,SACvC,OACE,mBAAAC,MAOK,qBAiDP,IAAMC,EAAkB,OAAO,SAAS,EAgBjC,SAASC,EAAeC,EAAmD,CAChF,GAAM,CAAE,SAAAC,EAAW,GAAM,aAAAC,EAAc,GAAGC,CAAc,EAAIH,EAEtDI,EAASP,EAAgBM,CAAa,EActCE,EAAQZ,EAZsB,CAClC,OAAAW,EACA,KAAOE,GAA0BF,EAAO,KAAKE,CAAK,EAClD,mBAAoB,CAACC,EAAqBC,IACxCJ,EAAO,mBAAmBG,EAAOC,CAAa,EAChD,cAAe,CAACD,EAAqBC,IACnCJ,EAAO,cAAcG,EAAOC,CAAa,EAC3C,UAAW,IAAMJ,EAAO,UAAU,EAClC,QAAUK,GAAiDL,EAAO,QAAQK,CAAQ,EAClF,YAAa,EACf,CAEkD,EAGlD,OAAIP,GACFA,EAAaE,CAAM,EAIjBH,IACFG,EAAO,KAAK,EACZC,EAAM,OAAQK,IAAO,CAAE,GAAGA,EAAG,YAAa,EAAK,EAAE,GAG5CL,CACT,CAgBO,SAASM,GAAyC,CACvD,IAAMC,EAAUjB,EAAoCG,CAAe,EACnE,GAAI,CAACc,EACH,MAAM,IAAI,MACR,6IAEF,EAEF,OAAOA,CACT,CAkBO,SAASC,EAAcR,EAAsC,CAClET,EAAWE,EAAiBO,CAAK,CACnC,CAKO,IAAMS,EAAaH,EAmBnB,SAASI,GAAqD,CACnE,IAAMV,EAAQM,EAAc,EAC5B,OAAOjB,EAAQW,EAAQW,GAAWA,EAAO,IAAI,CAC/C,CAkBO,SAASC,GAAsC,CACpD,IAAMZ,EAAQM,EAAc,EAC5B,OAAOjB,EAAQW,EAAQW,IAAY,CACjC,mBAAoBA,EAAO,mBAC3B,cAAeA,EAAO,aACxB,EAAE,CACJ,CAcO,SAASE,GAAiC,CAC/C,IAAMb,EAAQM,EAAc,EAC5B,OAAOjB,EAAQW,EAAQW,GAAWA,EAAO,MAAM,CACjD,CAoBO,SAASG,GAAuD,CACrE,IAAMd,EAAQM,EAAc,EAC5B,OAAOjB,EAAQW,EAAQW,GAAWA,EAAO,SAAS,CACpD","sourcesContent":["import { writable, derived, type Writable, type Readable } from 'svelte/store';\nimport { getContext, setContext } from 'svelte';\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 * Options for creating a GTM store.\n * Extends CreateGtmClientOptions with Svelte-specific options.\n */\nexport interface GtmStoreOptions extends CreateGtmClientOptions {\n  /**\n   * Whether to automatically initialize GTM when the store is created.\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/**\n * The GTM store value containing all GTM functionality.\n */\nexport interface GtmStoreValue {\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/** Context key for GTM store */\nconst GTM_CONTEXT_KEY = Symbol('gtm-kit');\n\n/**\n * Create a GTM store for Svelte.\n *\n * @example\n * ```svelte\n * <script>\n *   import { createGtmStore, setGtmContext } from '@jwiedeman/gtm-kit-svelte';\n *   import { onMount } from 'svelte';\n *\n *   const gtm = createGtmStore({ containers: 'GTM-XXXXXX' });\n *   setGtmContext(gtm);\n * </script>\n * ```\n */\nexport function createGtmStore(options: GtmStoreOptions): Writable<GtmStoreValue> {\n  const { autoInit = true, onBeforeInit, ...clientOptions } = options;\n\n  const client = createGtmClient(clientOptions);\n\n  const initialValue: GtmStoreValue = {\n    client,\n    push: (value: DataLayerValue) => client.push(value),\n    setConsentDefaults: (state: ConsentState, regionOptions?: ConsentRegionOptions) =>\n      client.setConsentDefaults(state, regionOptions),\n    updateConsent: (state: ConsentState, regionOptions?: ConsentRegionOptions) =>\n      client.updateConsent(state, regionOptions),\n    whenReady: () => client.whenReady(),\n    onReady: (callback: (state: ScriptLoadState[]) => void) => client.onReady(callback),\n    initialized: false\n  };\n\n  const store = writable<GtmStoreValue>(initialValue);\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    store.update((s) => ({ ...s, initialized: true }));\n  }\n\n  return store;\n}\n\n/**\n * Get the GTM context from a parent component.\n * Must be called during component initialization.\n *\n * @example\n * ```svelte\n * <script>\n *   import { getGtmContext } from '@jwiedeman/gtm-kit-svelte';\n *\n *   const gtm = getGtmContext();\n *   $: ({ push } = $gtm);\n * </script>\n * ```\n */\nexport function getGtmContext(): Writable<GtmStoreValue> {\n  const context = getContext<Writable<GtmStoreValue>>(GTM_CONTEXT_KEY);\n  if (!context) {\n    throw new Error(\n      '[gtm-kit] getGtmContext() was called outside of a component tree with GTM context. ' +\n        'Make sure to call setGtmContext() in a parent component.'\n    );\n  }\n  return context;\n}\n\n/**\n * Set the GTM context for child components.\n * Call this in your root layout or App component.\n *\n * @example\n * ```svelte\n * <script>\n *   import { createGtmStore, setGtmContext } from '@jwiedeman/gtm-kit-svelte';\n *\n *   const gtm = createGtmStore({ containers: 'GTM-XXXXXX' });\n *   setGtmContext(gtm);\n * </script>\n *\n * <slot />\n * ```\n */\nexport function setGtmContext(store: Writable<GtmStoreValue>): void {\n  setContext(GTM_CONTEXT_KEY, store);\n}\n\n/**\n * Alias for getGtmContext() - get the full GTM store.\n */\nexport const gtmContext = getGtmContext;\n\n/**\n * Get a derived store that provides just the push function.\n * Use this when you only need to push events.\n *\n * @example\n * ```svelte\n * <script>\n *   import { gtmPush } from '@jwiedeman/gtm-kit-svelte';\n *\n *   const push = gtmPush();\n *\n *   function handleClick() {\n *     $push({ event: 'button_click' });\n *   }\n * </script>\n * ```\n */\nexport function gtmPush(): Readable<(value: DataLayerValue) => void> {\n  const store = getGtmContext();\n  return derived(store, ($store) => $store.push);\n}\n\n/**\n * Get a derived store that provides consent functions.\n *\n * @example\n * ```svelte\n * <script>\n *   import { gtmConsent } from '@jwiedeman/gtm-kit-svelte';\n *\n *   const consent = gtmConsent();\n *\n *   function acceptAll() {\n *     $consent.updateConsent({ analytics_storage: 'granted' });\n *   }\n * </script>\n * ```\n */\nexport function gtmConsent(): Readable<GtmConsentApi> {\n  const store = getGtmContext();\n  return derived(store, ($store) => ({\n    setConsentDefaults: $store.setConsentDefaults,\n    updateConsent: $store.updateConsent\n  }));\n}\n\n/**\n * Get a derived store that provides the raw GTM client.\n *\n * @example\n * ```svelte\n * <script>\n *   import { gtmClient } from '@jwiedeman/gtm-kit-svelte';\n *\n *   const client = gtmClient();\n * </script>\n * ```\n */\nexport function gtmClient(): Readable<GtmClient> {\n  const store = getGtmContext();\n  return derived(store, ($store) => $store.client);\n}\n\n/**\n * Get a derived store that provides the whenReady function.\n *\n * @example\n * ```svelte\n * <script>\n *   import { gtmReady } from '@jwiedeman/gtm-kit-svelte';\n *   import { onMount } from 'svelte';\n *\n *   const whenReady = gtmReady();\n *\n *   onMount(async () => {\n *     const states = await $whenReady();\n *     console.log('GTM loaded:', states);\n *   });\n * </script>\n * ```\n */\nexport function gtmReady(): Readable<() => Promise<ScriptLoadState[]>> {\n  const store = getGtmContext();\n  return derived(store, ($store) => $store.whenReady);\n}\n"]}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@jwiedeman/gtm-kit-svelte",
+  "version": "1.0.1",
+  "description": "Svelte stores and actions for GTM Kit - Google Tag Manager integration.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jwiedeman/GTM-Kit.git",
+    "directory": "packages/svelte"
+  },
+  "author": "jwiedeman",
+  "keywords": [
+    "gtm",
+    "google-tag-manager",
+    "svelte",
+    "stores"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./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": {
+    "svelte": "^4.0.0 || ^5.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/svelte": "^5.2.0",
+    "svelte": "^4.2.18",
+    "svelte-jester": "^5.0.0",
+    "tslib": "^2.6.2"
+  }
+}