Upgrade examples to Vite and fix intersection observer mock

trurl-master · trurl-master · commit b4ab9a824f94 · 2025-07-28T19:30:18.000+02:00
diff --git a/examples/global.d.ts b/examples/global.d.ts
@@ -1,11 +1,13 @@
-export {};
+/// <reference types="vite/client" />
 
 declare global {
   var runner: {
     name: 'vi' | 'jest';
     useFakeTimers: () => void;
     useRealTimers: () => void;
     advanceTimersByTime: (time: number) => Promise<void>;
-    fn: () => jest.Mock<any, any>;
+    fn: () => jest.Mock | ReturnType<typeof vi.fn>;
   };
 }
+
+export {};
diff --git a/examples/index.html b/examples/index.html
diff --git a/examples/package-lock.json b/examples/package-lock.json
diff --git a/examples/package.json b/examples/package.json
@@ -6,52 +6,32 @@
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "^30.0.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "motion": "^10.15.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.3.0",
-    "react-scripts": "^5.0.1",
-    "typescript": "^4.7.4"
+    "motion": "^12.23.11",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.7.1",
+    "typescript": "^5.8.3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test:jest": "react-scripts test --watchAll=false",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:jest": "jest --config ./swcjest.config.js",
     "test:swc": "jest --config ./swcjest.config.js",
     "test:vi": "vitest --config ./vitest.config.ts run",
     "test:all": "npm run test:jest && npm run test:vi && npm run test:swc",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "lint": "eslint src --ext .ts,.tsx,.js,.jsx",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@types/node": "^24.1.0",
     "@vitejs/plugin-react": "^4.7.0",
+    "eslint": "^9.0.0",
     "identity-obj-proxy": "^3.0.0",
+    "vite": "^7.0.6",
     "vitest": "^3.2.4"
-  },
-  "jest": {
-    "moduleNameMapper": {
-      "\\.(css|less)$": "identity-obj-proxy"
-    }
   }
 }
diff --git a/examples/src/components/animations/examples/inview/InView.tsx b/examples/src/components/animations/examples/inview/InView.tsx
@@ -10,15 +10,11 @@ const AnimationsInView = () => {
       return;
     }
 
-    const stop = inView('.inview-section', ({ target }) => {
-      const span = target.querySelector('span');
+    const stop = inView('.inview-section', (element) => {
+      const span = element.querySelector('span');
 
       if (span) {
-        animate(
-          span,
-          { opacity: 1, transform: 'none' },
-          { delay: 0.2, duration: 0.9, easing: [0.17, 0.55, 0.55, 1] }
-        );
+        animate(span, { opacity: 1, transform: 'none' }, { delay: 0.2, duration: 0.9 });
       }
     });
 
diff --git a/examples/src/components/intersection-observer/global-observer/useIntersection.ts b/examples/src/components/intersection-observer/global-observer/useIntersection.ts
@@ -1,8 +1,6 @@
 import { useState, useEffect, MutableRefObject } from 'react';
 
-const entryCallbacks: {
-  [key: string]: (entry: IntersectionObserverEntry) => void;
-} = {};
+const entryCallbacks = new Map<string, (entry: IntersectionObserverEntry) => void>();
 let id = 0;
 let observer: IntersectionObserver;
 
@@ -15,9 +13,8 @@ function createObserver() {
   observer = new IntersectionObserver(
     (entries) =>
       entries.forEach((entry) => {
-        entryCallbacks[(entry.target as HTMLElement).dataset._ioid as string](
-          entry
-        );
+        const callback = entryCallbacks.get((entry.target as HTMLElement).dataset._ioid as string);
+        callback?.(entry);
       }),
     {
       rootMargin: '-30% 0% -30% 0%',
@@ -38,14 +35,14 @@ const useIntersection = (
       return;
     }
 
-    const domId = generateId();
+    const domId = generateId().toString();
 
-    entryCallbacks[domId.toString()] = (entry) => {
+    entryCallbacks.set(domId, (entry) => {
       setIsIntersecting(entry.isIntersecting);
       callback?.([entry], observer);
-    };
+    });
 
-    node.dataset._ioid = domId.toString();
+    node.dataset._ioid = domId;
 
     if (!observer) {
       createObserver();
@@ -54,7 +51,7 @@ const useIntersection = (
     observer.observe(node);
 
     return () => {
-      delete entryCallbacks[domId];
+      entryCallbacks.delete(domId);
       observer.unobserve(node);
     };
   }, [callback, ref]);
diff --git a/examples/src/components/resize-observer/measure-parent/MeasureParent.tsx b/examples/src/components/resize-observer/measure-parent/MeasureParent.tsx
@@ -3,8 +3,8 @@ import { useRef } from 'react';
 import useDoIFit from './useDoIFit';
 
 const MeasureParent = () => {
-  const ref1 = useRef(null);
-  const ref2 = useRef(null);
+  const ref1 = useRef<HTMLDivElement>(null);
+  const ref2 = useRef<HTMLDivElement>(null);
   const iFit1 = useDoIFit(ref1);
   const iFit2 = useDoIFit(ref2);
 
diff --git a/examples/src/components/resize-observer/measure-parent/useDoIFit.ts b/examples/src/components/resize-observer/measure-parent/useDoIFit.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-const useDoIFit = (ref: React.RefObject<HTMLElement>) => {
+const useDoIFit = (ref: React.RefObject<HTMLElement | null>) => {
   const [iFit, setIFit] = useState(false);
 
   useEffect(() => {
diff --git a/examples/src/components/viewport/custom-use-media/useMedia.ts b/examples/src/components/viewport/custom-use-media/useMedia.ts
@@ -2,14 +2,14 @@ import { useState, useEffect, useCallback } from 'react';
 
 function useMedia(
   query: string,
-  defaultValue: any | null = null,
+  defaultValue: boolean | null = null,
   options?:
     | {
-        callback?: (this: MediaQueryList, ev: MediaQueryListEvent) => any;
+        callback?: (this: MediaQueryList, ev: MediaQueryListEvent) => void;
         asObject: false;
       }
     | {
-        callback?: (ev: MediaQueryListEvent) => any;
+        callback?: (ev: MediaQueryListEvent) => void;
         asObject: true;
       }
 ) {
diff --git a/examples/src/components/viewport/deprecated-use-media/DeprecatedUseMedia.tsx b/examples/src/components/viewport/deprecated-use-media/DeprecatedUseMedia.tsx
@@ -2,8 +2,8 @@ import { useState, useEffect, useCallback } from 'react';
 
 function useMedia(
   query: string,
-  defaultValue: any | null = null,
-  callback?: (this: MediaQueryList, ev: MediaQueryListEvent) => any
+  defaultValue: boolean | null = null,
+  callback?: (this: MediaQueryList, ev: MediaQueryListEvent) => void
 ) {
   const isInBrowser = typeof window !== 'undefined' && window.matchMedia;
 
diff --git a/examples/src/react-app-env.d.ts b/examples/src/react-app-env.d.ts
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
@@ -1,20 +1,26 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src", "global.d.ts"]
+  "include": ["src", "global.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/examples/tsconfig.node.json b/examples/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts", "vitest.config.ts"]
+} 
diff --git a/examples/vite.config.ts b/examples/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true,
+  },
+  build: {
+    outDir: 'build',
+    sourcemap: true,
+  },
+}); 
diff --git a/src/mocks/intersection-observer.ts b/src/mocks/intersection-observer.ts
@@ -161,6 +161,7 @@ export class MockedIntersectionObserver implements IntersectionObserver {
     this.nodeStates[index] = {
       ...nodeState,
       time: performance.now() - this.timeOrigin,
+      target: node,
       ...desc,
     } as IntersectionObserverEntry;
 
@@ -174,10 +175,11 @@ export class MockedIntersectionObserver implements IntersectionObserver {
       findNodeIndex(this.nodes, node)
     );
 
-    const nodeStates = nodeDescriptions.map(({ desc }, index) => {
+    const nodeStates = nodeDescriptions.map(({ node, desc }, index) => {
       const newState = {
         ...this.nodeStates[nodeIndexes[index]],
         time: performance.now() - this.timeOrigin,
+        target: node,
         ...desc,
       } as IntersectionObserverEntry;
 
