react-event-tracking 1.0.0 → 1.0.2

package/README.md

@@ -19,32 +19,32 @@ yarn add react-event-tracking
 
 1. Define the root handler (e.g., send to GTM or API)
 ```tsx
-import { AnalyticsRoot } from 'react-event-tracking';
+import { TrackRoot } from 'react-event-tracking';
 
 const Main = () => (
-  <AnalyticsRoot onEvent={(name, params) => gtag('event', name, params)}>
+  <TrackRoot onEvent={(name, params) => gtag('event', name, params)}>
     <App/>
-  </AnalyticsRoot>
+  </TrackRoot>
 );
 ``` 
 2. Wrap any component with shared parameters
 ```tsx
-import { AnalyticsProvider } from 'react-event-tracking';
+import { TrackProvider } from 'react-event-tracking';
 
 const Dashboard = () => (
-  <AnalyticsProvider params={{ screen: 'dashboard' }}>
+  <TrackProvider params={{ screen: 'dashboard' }}>
     <DashboardView/>
-  </AnalyticsProvider>
+  </TrackProvider>
 );
 ```
 
 3. Send events conveniently. On button click, parameters will be merged.
 
 ```tsx
-import { useAnalytics } from 'react-event-tracking';
+import { useTracker } from 'react-event-tracking';
 
 const MyButton = () => {
-  const { sendEvent } = useAnalytics();
+  const { sendEvent } = useTracker();
 
   return (
     // event sent with parameters: { screen: 'dashboard', button_id: '123' }
@@ -61,7 +61,7 @@ const MyButton = () => {
 
 ```tsx
 export function PageView(props) {
-    const { sendEvent } = useAnalytics();
+    const { sendEvent } = useTracker();
 
     useEffect(() => {
         sendEvent('page_view');

package/dist/index.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+const React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const TrackContext = React__default.createContext(null);
+const useTracker = () => {
+  const ctx = React.useContext(TrackContext);
+  if (!ctx) {
+    throw new Error("useTracker must be used within TrackRoot");
+  }
+  return ctx;
+};
+const TrackRoot = ({
+  onEvent,
+  children
+}) => {
+  const onEventRef = React.useRef(onEvent);
+  onEventRef.current = onEvent;
+  const sendEvent = React.useCallback((eventName, params) => {
+    onEventRef.current(eventName, params);
+  }, []);
+  const value = React.useMemo(() => ({ sendEvent }), [sendEvent]);
+  return /* @__PURE__ */ React__default.createElement(TrackContext.Provider, { value }, children);
+};
+const TrackProvider = ({
+  params,
+  children
+}) => {
+  const ctx = useTracker();
+  const paramsRef = React.useRef(params);
+  paramsRef.current = params;
+  const sendEvent = React.useCallback(
+    (eventName, eventParams) => {
+      const currentParams = paramsRef.current;
+      ctx.sendEvent(eventName, {
+        ...currentParams,
+        ...eventParams
+      });
+    },
+    [ctx]
+  );
+  const value = React.useMemo(() => ({ sendEvent }), [sendEvent]);
+  return /* @__PURE__ */ React__default.createElement(TrackContext.Provider, { value }, children);
+};
+
+exports.TrackProvider = TrackProvider;
+exports.TrackRoot = TrackRoot;
+exports.useTracker = useTracker;

package/dist/index.d.cts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+type EventParams = Record<string, any>;
+interface TrackContextValue {
+    sendEvent: (eventName: string, params?: EventParams) => void;
+}
+declare const useTracker: () => TrackContextValue;
+declare const TrackRoot: ({ onEvent, children }: PropsWithChildren<{
+    onEvent: (eventName: string, params?: EventParams) => void;
+}>) => react_jsx_runtime.JSX.Element;
+declare const TrackProvider: ({ params, children }: PropsWithChildren<{
+    params: EventParams;
+}>) => react_jsx_runtime.JSX.Element;
+
+export { TrackProvider, TrackRoot, useTracker };

package/dist/index.d.mts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+type EventParams = Record<string, any>;
+interface TrackContextValue {
+    sendEvent: (eventName: string, params?: EventParams) => void;
+}
+declare const useTracker: () => TrackContextValue;
+declare const TrackRoot: ({ onEvent, children }: PropsWithChildren<{
+    onEvent: (eventName: string, params?: EventParams) => void;
+}>) => react_jsx_runtime.JSX.Element;
+declare const TrackProvider: ({ params, children }: PropsWithChildren<{
+    params: EventParams;
+}>) => react_jsx_runtime.JSX.Element;
+
+export { TrackProvider, TrackRoot, useTracker };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+type EventParams = Record<string, any>;
+interface TrackContextValue {
+    sendEvent: (eventName: string, params?: EventParams) => void;
+}
+declare const useTracker: () => TrackContextValue;
+declare const TrackRoot: ({ onEvent, children }: PropsWithChildren<{
+    onEvent: (eventName: string, params?: EventParams) => void;
+}>) => react_jsx_runtime.JSX.Element;
+declare const TrackProvider: ({ params, children }: PropsWithChildren<{
+    params: EventParams;
+}>) => react_jsx_runtime.JSX.Element;
+
+export { TrackProvider, TrackRoot, useTracker };

package/dist/index.mjs

@@ -0,0 +1,44 @@
+import React, { useContext, useRef, useCallback, useMemo } from 'react';
+
+const TrackContext = React.createContext(null);
+const useTracker = () => {
+  const ctx = useContext(TrackContext);
+  if (!ctx) {
+    throw new Error("useTracker must be used within TrackRoot");
+  }
+  return ctx;
+};
+const TrackRoot = ({
+  onEvent,
+  children
+}) => {
+  const onEventRef = useRef(onEvent);
+  onEventRef.current = onEvent;
+  const sendEvent = useCallback((eventName, params) => {
+    onEventRef.current(eventName, params);
+  }, []);
+  const value = useMemo(() => ({ sendEvent }), [sendEvent]);
+  return /* @__PURE__ */ React.createElement(TrackContext.Provider, { value }, children);
+};
+const TrackProvider = ({
+  params,
+  children
+}) => {
+  const ctx = useTracker();
+  const paramsRef = useRef(params);
+  paramsRef.current = params;
+  const sendEvent = useCallback(
+    (eventName, eventParams) => {
+      const currentParams = paramsRef.current;
+      ctx.sendEvent(eventName, {
+        ...currentParams,
+        ...eventParams
+      });
+    },
+    [ctx]
+  );
+  const value = useMemo(() => ({ sendEvent }), [sendEvent]);
+  return /* @__PURE__ */ React.createElement(TrackContext.Provider, { value }, children);
+};
+
+export { TrackProvider, TrackRoot, useTracker };

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "react-event-tracking",
-  "version": "1.0.0",
+  "version": "1.0.2",
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -32,4 +35,4 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   }
-}
+}

package/src/index.tsx

@@ -1,70 +0,0 @@
-import React, {
-	useCallback,
-	useContext,
-	useMemo,
-	useRef,
-	type PropsWithChildren
-} from "react"
-
-export type AnalyticsParams = Record<string, any>
-
-interface AnalyticsContextValue {
-	sendEvent: (eventName: string, params?: AnalyticsParams) => void
-}
-
-export const AnalyticsContext = React.createContext<AnalyticsContextValue | null>(null)
-
-export const useAnalytics = () => {
-	const ctx = useContext(AnalyticsContext)
-	if (!ctx) {
-		throw new Error("useAnalytics must be used within AnalyticsRoot")
-	}
-
-	return ctx
-}
-
-export const AnalyticsRoot = ({
-	onEvent,
-	children
-}: PropsWithChildren<{
-	onEvent: (eventName: string, params?: AnalyticsParams) => void
-}>) => {
-	const onEventRef = useRef(onEvent)
-	onEventRef.current = onEvent
-
-	const sendEvent = useCallback((eventName: string, params?: AnalyticsParams) => {
-		onEventRef.current(eventName, params)
-	}, [])
-
-	const value = useMemo(() => ({ sendEvent }), [sendEvent])
-
-	return <AnalyticsContext.Provider value={value}>{children}</AnalyticsContext.Provider>
-}
-
-export const AnalyticsProvider = ({
-	params,
-	children
-}: PropsWithChildren<{
-	params: AnalyticsParams
-}>) => {
-	const ctx = useAnalytics()
-
-	const paramsRef = useRef(params)
-	paramsRef.current = params
-
-	const sendEvent = useCallback(
-		(eventName: string, eventParams?: AnalyticsParams) => {
-			const currentParams = paramsRef.current
-
-			ctx.sendEvent(eventName, {
-				...currentParams,
-				...eventParams
-			})
-		},
-		[ctx]
-	)
-
-	const value = useMemo(() => ({ sendEvent }), [sendEvent])
-
-	return <AnalyticsContext.Provider value={value}>{children}</AnalyticsContext.Provider>
-}

package/tests/context.test.tsx

@@ -1,162 +0,0 @@
-import { describe, it, expect, vi } from "vitest"
-import React from "react"
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { AnalyticsRoot, AnalyticsProvider, useAnalytics } from "../src"
-
-const TestButton = ({
-	eventName,
-	params,
-	label = "Click me"
-}: {
-	eventName: string
-	params?: Record<string, any>
-	label?: string
-}) => {
-	const { sendEvent } = useAnalytics()
-	return <button onClick={() => sendEvent(eventName, params)}>{label}</button>
-}
-
-describe("Analytics Context", () => {
-	it("should send event from root", async () => {
-		const onEvent = vi.fn()
-
-		render(
-			<AnalyticsRoot onEvent={onEvent}>
-				<TestButton
-					eventName="test_click"
-					params={{ foo: "bar" }}
-					label="Root Click"
-				/>
-			</AnalyticsRoot>
-		)
-
-		await userEvent.click(screen.getByText("Root Click"))
-
-		expect(onEvent).toHaveBeenCalledTimes(1)
-		expect(onEvent).toHaveBeenCalledWith("test_click", { foo: "bar" })
-	})
-
-	it("should merge params from nested providers", async () => {
-		const onEvent = vi.fn()
-
-		render(
-			<AnalyticsRoot onEvent={onEvent}>
-				<AnalyticsProvider params={{ section: "header" }}>
-					<AnalyticsProvider params={{ item: "logo" }}>
-						<TestButton
-							eventName="logo_click"
-							params={{ action: "click" }}
-							label="Nested Click"
-						/>
-					</AnalyticsProvider>
-				</AnalyticsProvider>
-			</AnalyticsRoot>
-		)
-
-		await userEvent.click(screen.getByText("Nested Click"))
-
-		expect(onEvent).toHaveBeenCalledWith("logo_click", {
-			section: "header",
-			item: "logo",
-			action: "click"
-		})
-	})
-
-	it("should override params from child to parent", async () => {
-		const onEvent = vi.fn()
-
-		render(
-			<AnalyticsRoot onEvent={onEvent}>
-				<AnalyticsProvider params={{ page: "home", id: 1 }}>
-					{/* Переопределяем id */}
-					<AnalyticsProvider params={{ id: 2 }}>
-						<TestButton
-							eventName="click"
-							params={{ id: 3 }}
-							label="Override Click"
-						/>
-					</AnalyticsProvider>
-				</AnalyticsProvider>
-			</AnalyticsRoot>
-		)
-
-		await userEvent.click(screen.getByText("Override Click"))
-
-		expect(onEvent).toHaveBeenCalledWith("click", {
-			page: "home",
-			id: 3
-		})
-	})
-
-	it("should use latest params without re-rendering children", async () => {
-		const onEvent = vi.fn()
-
-		const Wrapper = ({ count }: { count: number }) => (
-			<AnalyticsProvider params={{ count }}>
-				<TestButton eventName="count_click" label="Rerender Click" />
-			</AnalyticsProvider>
-		)
-
-		const { rerender } = render(
-			<AnalyticsRoot onEvent={onEvent}>
-				<Wrapper count={1} />
-			</AnalyticsRoot>
-		)
-
-		await userEvent.click(screen.getByText("Rerender Click"))
-		expect(onEvent).toHaveBeenLastCalledWith("count_click", { count: 1 })
-
-		rerender(
-			<AnalyticsRoot onEvent={onEvent}>
-				<Wrapper count={2} />
-			</AnalyticsRoot>
-		)
-
-		await userEvent.click(screen.getByText("Rerender Click"))
-		expect(onEvent).toHaveBeenLastCalledWith("count_click", { count: 2 })
-	})
-
-	it("should NOT trigger re-render in consumers when params update (optimization check)", () => {
-		const renderFn = vi.fn()
-
-		const MemoChild = React.memo(() => {
-			useAnalytics()
-			renderFn()
-			return <div>Memo Child</div>
-		})
-
-		// eslint-disable-next-line react/display-name
-		MemoChild.displayName = "MemoChild"
-
-		const { rerender } = render(
-			<AnalyticsRoot onEvent={() => {}}>
-				<AnalyticsProvider params={{ val: 1 }}>
-					<MemoChild />
-				</AnalyticsProvider>
-			</AnalyticsRoot>
-		)
-
-		expect(renderFn).toHaveBeenCalledTimes(1)
-
-		rerender(
-			<AnalyticsRoot onEvent={() => {}}>
-				<AnalyticsProvider params={{ val: 2 }}>
-					<MemoChild />
-				</AnalyticsProvider>
-			</AnalyticsRoot>
-		)
-
-		expect(renderFn).toHaveBeenCalledTimes(1)
-	})
-
-	it("should throw error if used outside of AnalyticsRoot", () => {
-		const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
-
-		expect(() => {
-			render(<TestButton eventName="fail" label="Fail Click" />)
-		}).toThrow("useAnalytics must be used within AnalyticsRoot")
-
-		consoleSpy.mockRestore()
-	})
-})

package/tests/setup.ts

@@ -1,6 +0,0 @@
-import { afterEach } from 'vitest'
-import { cleanup } from '@testing-library/react'
-
-afterEach(() => {
-    cleanup()
-})  

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ES2020",
-		"module": "ESNext",
-		"jsx": "react-jsx",
-		"declaration": true,
-		"declarationMap": true,
-		"outDir": "./dist",
-		"rootDir": "./src",
-		"strict": true,
-		"moduleResolution": "node",
-		"esModuleInterop": true,
-		"skipLibCheck": true
-	},
-	"include": ["src/**/*"],
-	"exclude": ["node_modules", "dist"]
-}

package/vitest.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from 'vitest/config'
-
-
-export default defineConfig({
-    test: {
-        globals: true,
-        environment: 'jsdom',
-        setupFiles: './tests/setup.ts',
-    },
-})