@mcp-fe/react-event-tracker 0.0.2

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/README.md

@@ -0,0 +1,7 @@
+# react-event-tracker
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test react-event-tracker` to execute the unit tests via [Vitest](https://vitest.dev/).

package/eslint.config.mjs

@@ -0,0 +1,12 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@mcp-fe/react-event-tracker",
+  "version": "0.0.2",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "react-event-tracker",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/react-event-tracker/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project react-event-tracker --web",
+  "targets": {}
+}

package/src/hooks/useReactRouterEventTracker.ts

@@ -0,0 +1,97 @@
+import { useEffect, useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import {
+  initEventTracker,
+  trackNavigation,
+  trackClick,
+  trackInput,
+} from '@mcp-fe/event-tracker';
+
+export function useReactRouterEventTracker(): void {
+  const location = useLocation();
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  const currentPathRef = useRef(location.pathname);
+  const prevPathRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    prevPathRef.current = currentPathRef.current;
+    currentPathRef.current = location.pathname;
+  }, [location.pathname]);
+
+  useEffect(() => {
+    initEventTracker()
+      .then(() => {
+        setIsInitialized(true);
+      })
+      .catch((error) => {
+        console.error('Worker initialization failed:', error);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!isInitialized) return;
+
+    const prevPath = prevPathRef.current;
+    const currentPath = currentPathRef.current;
+
+    if (prevPath && prevPath !== currentPath) {
+      trackNavigation(prevPath, currentPath, currentPath).catch((error) => {
+        console.error('Failed to track navigation:', error);
+      });
+    }
+  }, [location.pathname, isInitialized]);
+
+  useEffect(() => {
+    if (!isInitialized) return;
+
+    const handleClick = (event: MouseEvent): void => {
+      const target = event.target as HTMLElement;
+      if (!target) return;
+
+      const isInteractive =
+        target.tagName === 'BUTTON' ||
+        target.tagName === 'A' ||
+        target.closest('button') ||
+        target.closest('a');
+
+      if (!isInteractive) {
+        trackClick(target, currentPathRef.current).catch((error) => {
+          console.error('Failed to track click:', error);
+        });
+      }
+    };
+
+    document.addEventListener('click', handleClick, true);
+    return () => document.removeEventListener('click', handleClick, true);
+  }, [isInitialized]);
+
+  useEffect(() => {
+    if (!isInitialized) return;
+
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    const handleInput = (event: Event): void => {
+      const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+      if (
+        target &&
+        (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')
+      ) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+          trackInput(target, target.value, currentPathRef.current).catch(
+            (error) => {
+              console.error('Failed to track input:', error);
+            },
+          );
+        }, 1000); // Debounce by 1 second
+      }
+    };
+
+    document.addEventListener('input', handleInput, true);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener('input', handleInput, true);
+    };
+  }, [isInitialized]);
+}

package/src/hooks/useTanstackRouterEventTracker.ts

@@ -0,0 +1,97 @@
+import { useEffect, useRef, useState } from 'react';
+import { useLocation } from '@tanstack/react-router';
+import {
+  initEventTracker,
+  trackNavigation,
+  trackClick,
+  trackInput,
+} from '@mcp-fe/event-tracker';
+
+export function useTanstackRouterEventTracker(): void {
+  const location = useLocation();
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  const currentPathRef = useRef(location.pathname);
+  const prevPathRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (currentPathRef.current !== location.pathname) {
+      prevPathRef.current = currentPathRef.current;
+      currentPathRef.current = location.pathname;
+    }
+  }, [location.pathname]);
+
+  useEffect(() => {
+    initEventTracker()
+      .then(() => setIsInitialized(true))
+      .catch((error) => {
+        console.error('Worker initialization failed:', error);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!isInitialized) return;
+
+    const prevPath = prevPathRef.current;
+    const currentPath = currentPathRef.current;
+
+    if (prevPath && prevPath !== currentPath) {
+      trackNavigation(prevPath, currentPath, currentPath).catch((error) => {
+        console.error('Failed to track navigation:', error);
+      });
+    }
+  }, [location.pathname, isInitialized]);
+
+  useEffect(() => {
+    if (!isInitialized) return;
+
+    const handleClick = (event: MouseEvent): void => {
+      const target = event.target as HTMLElement;
+      if (!target) return;
+
+      const isInteractive =
+        target.tagName === 'BUTTON' ||
+        target.tagName === 'A' ||
+        target.closest('button') ||
+        target.closest('a');
+
+      if (!isInteractive) {
+        trackClick(target, currentPathRef.current).catch((error) => {
+          console.error('Failed to track click:', error);
+        });
+      }
+    };
+
+    document.addEventListener('click', handleClick, true);
+    return () => document.removeEventListener('click', handleClick, true);
+  }, [isInitialized]);
+
+  useEffect(() => {
+    if (!isInitialized) return;
+
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    const handleInput = (event: Event): void => {
+      const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+      if (
+        target &&
+        (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')
+      ) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+          trackInput(target, target.value, currentPathRef.current).catch(
+            (error) => {
+              console.error('Failed to track input:', error);
+            },
+          );
+        }, 1000);
+      }
+    };
+
+    document.addEventListener('input', handleInput, true);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener('input', handleInput, true);
+    };
+  }, [isInitialized]);
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './hooks/useTanstackRouterEventTracker';
+export * from './hooks/useReactRouterEventTracker';

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client", "vitest"],
+    "lib": ["dom", "esnext"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,36 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
+  "references": []
+}

package/tsconfig.spec.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/vite.config.mts

@@ -0,0 +1,61 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig(() => ({
+  root: import.meta.dirname,
+  cacheDir: '../../node_modules/.vite/libs/react-event-tracker',
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(import.meta.dirname, 'tsconfig.lib.json'),
+      pathsToAliases: false,
+    }),
+  ],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //   plugins: () => [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vite.dev/guide/build.html#library-mode
+  build: {
+    outDir: '../../dist/libs/react-event-tracker',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'react-event-tracker',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+  test: {
+    name: 'react-event-tracker',
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/libs/react-event-tracker',
+      provider: 'v8' as const,
+    },
+  },
+}));