remove jest and add vite & vitest

packages/react-on/package.json

@@ -8,7 +8,7 @@
     "url": "http://github.com/KurtGokhan/react-on"
   },
   "keywords": ["react", "tracking", "analytics", "instrumentation"],
-  "version": "1.0.1",
+  "version": "0.0.0",
   "license": "MIT",
   "author": {
     "name": "Gokhan Kurt",
@@ -18,38 +18,38 @@
   "files": ["README.md", "dist"],
   "exports": {
     ".": {
+      "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
     "./middlewares": {
+      "require": "./dist/middlewares/index.cjs",
       "default": "./dist/middlewares/index.js"
     }
   },
   "scripts": {
-    "tsc": "tsc -p tsconfig.app.json",
-    "start": "npm run tsc -- --watch --incremental",
-    "build": "npm run clean && npm run tsc",
-    "clean": "rimraf dist && rimraf tsconfig.app.tsbuildinfo",
-    "test": "jest",
-    "test:watch": "jest --watchAll",
+    "vite": "vite",
+    "vitest": "vitest",
+    "start": "vite build --watch",
+    "build": "vite build",
+    "clean": "rimraf dist",
+    "test": "vitest --run",
+    "test:watch": "vitest",
     "prepare": "npm run build"
   },
-  "dependencies": {},
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
     "@types/react": "18.2.69",
     "@types/react-dom": "^18",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^24.0.0",
     "jsx-middlewares": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "ts-jest": "^29.1.2",
-    "typescript": "5.4.3"
+    "typescript": "5.4.3",
+    "vite": "^5.2.4",
+    "vite-plugin-dts": "^3.7.3",
+    "vitest": "^1.4.0"
   },
   "peerDependencies": {
     "jsx-middlewares": ">=1",

packages/react-on/src/lib/handlers.tsx

@@ -9,6 +9,7 @@ import type {
   TrackingContext,
   TrackingHandlerContext,
   TrackingHandlerFn,
+  TrackingHandlerObject,
   TrackingHandlerProps,
   TrackingValues,
 } from '../types';
@@ -22,6 +23,7 @@ export function createTrackingHandlerProvider<TBase extends ReactOnBase = ReactO
   type TProps = TrackingHandlerProps<TBase>;
   type THandlerFn = TrackingHandlerFn<TBase>;
   type TTrackFn = TrackFn<TBase>;
+  type TObject = TrackingHandlerObject<TBase, TrackingValues<TBase>>;
 
   function TrackingHandler({ children, ...props }: PropsWithChildren<TProps>) {
     const propsRef = useStable(props);
@@ -45,10 +47,18 @@ export function createTrackingHandlerProvider<TBase extends ReactOnBase = ReactO
 
   function ConsoleTrackingHandler({
     message,
+    level = 'log',
+    transform,
     ...props
-  }: PropsWithChildren<Omit<TProps, 'onHandle'> & { message?: string }>) {
+  }: PropsWithChildren<
+    Omit<TProps, 'onHandle'> & {
+      message?: string;
+      level?: 'log' | 'info' | 'warn' | 'error' | 'debug' | 'trace';
+      transform?: (values: TObject) => unknown;
+    }
+  >) {
     const onHandle = useStableCallback<THandlerFn>((options) => {
-      console.log(message || 'Tracked', options);
+      console[level](message || 'Tracked', typeof transform === 'function' ? transform(options) : options);
     });
 
     return <TrackingHandler {...props} onHandle={onHandle} />;

packages/react-on/tests/base.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { TrackCallback, TrackEvent } from 'src';
+import { TrackCallback, TrackEvent } from 'react-on';
 import { createTrackingWrapper } from './utils';
 
 describe('react-on', () => {

packages/react-on/tests/utils.tsx

@@ -1,8 +1,8 @@
-import { Tracking, TrackingHandler, type TrackingHandlerFn, type TrackingProps } from 'src';
+import { Tracking, TrackingHandler, type TrackingHandlerFn, type TrackingProps } from 'react-on';
 export * as userEvent from '@testing-library/user-event';
 
 export function createTrackingWrapper(defaultProps: TrackingProps = {}) {
-  const spy = jest.fn<void, Parameters<TrackingHandlerFn>>();
+  const spy = vi.fn<Parameters<TrackingHandlerFn>>();
 
   const wrapper = (baseProps: TrackingProps) => {
     const { children, ...props } = { ...defaultProps, ...baseProps };

packages/react-on/tsconfig.spec.json

@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "noEmit": true
+    "noEmit": true,
+    "types": ["vitest/globals"]
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"],
   "exclude": ["node_modules", "artifacts", "examples", "website", "dist"]

packages/react-on/vite.config.ts

@@ -0,0 +1,38 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig(({ mode }) => {
+  return {
+    appType: 'custom',
+    plugins: [dts({ tsconfigPath: './tsconfig.app.json' })],
+    build: {
+      outDir: 'dist',
+      emptyOutDir: true,
+      rollupOptions: {
+        preserveEntrySignatures: 'exports-only',
+        external: ['react', 'jsx-middlewares'],
+        input: {
+          index: 'src/index.ts',
+          'middlewares/index': 'src/middlewares/index.tsx',
+        },
+        output: [
+          {
+            format: 'esm',
+            entryFileNames: (x) => `${x.name}.js`,
+          },
+          {
+            format: 'cjs',
+            entryFileNames: (x) => `${x.name}.cjs`,
+          },
+        ],
+      },
+    },
+    test: {
+      include: ['tests/**/*.spec.ts[x]'],
+      globals: true,
+      environment: 'jsdom',
+    },
+  };
+});

website/src/components/Console/Console.tsx

@@ -4,15 +4,18 @@ import { useLayoutEffect, useRef, useState } from 'react';
 
 import styles from './Console.module.css';
 
-export function Console() {
+export function Console({ override = 'info' }: { override?: 'trace' | 'debug' | 'info' | 'log' | 'warn' | 'error' }) {
   const [items, setItems] = useState<string[]>([]);
 
   const itemsRef = useRef<HTMLDivElement | null>(null);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Must be a biome issue
   useLayoutEffect(() => {
-    const oldConsole = console.info;
+    if (!override) return;
 
-    console.info = (...args: unknown[]) => {
+    const oldConsole = window.console[override];
+
+    window.console[override] = (...args: unknown[]) => {
       oldConsole(...args);
       setItems((current) => [...current, `${args.join(', ')}`]);
 
@@ -22,9 +25,9 @@ export function Console() {
     };
 
     return () => {
-      console.info = oldConsole;
+      window.console[override] = oldConsole;
     };
-  }, []);
+  }, [override]);
 
   return !items.length ? null : (
     <div className={styles.console}>

website/src/examples/intro.tsx

@@ -4,9 +4,10 @@ import { ConsoleTrackingHandler, TrackEvent, Tracking } from 'react-on';
 export default function Example() {
   return (
     <Tracking values={{ user: { name: 'johndoe', id: '123456' }, company: 'acme' }}>
-      <ConsoleTrackingHandler>
+      <ConsoleTrackingHandler level="info" transform={JSON.stringify}>
         <Tracking values={{ page: 'Home Page' }}>
-          Clicking the button will log a message to the console and send a tracking event.
+          <p>Clicking the button will log a message to the console and send a tracking event.</p>
+
           <TrackEvent event="click">
             <button type="button">Click me</button>
           </TrackEvent>