build!: Update build, export real ESM (#100)

BREAKING CHANGE: exports native esm modules and removes the index file in favor of sub imports

.gitignore

@@ -1,5 +1,5 @@
 lib/
-esm/
+cjs/
 
 # Logs
 logs

package.json

@@ -1,24 +1,27 @@
 {
   "name": "@restart/hooks",
   "version": "0.5.1",
-  "main": "lib/cjs/index.js",
-  "types": "lib/cjs/index.d.ts",
-  "module": "lib/esm/index.js",
+  "type": "module",
   "exports": {
-    ".": {
-      "types": "./esm/index.d.ts",
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
-    },
     "./*": {
-      "types": "./esm/*.d.ts",
-      "import": "./esm/*.js",
-      "require": "./cjs/*.js"
+      "require": {
+        "types": "./cjs/index.d.ts",
+        "default": "./cjs/index.js"
+      },
+      "import": {
+        "types": "./lib/index.d.ts",
+        "default": "./lib/index.js"
+      }
     }
   },
+  "files": [
+    "cjs",
+    "lib",
+    "CHANGELOG.md"
+  ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jquense/react-common-hooks.git"
+    "url": "git+https://github.com/react-restart/hooks.git"
   },
   "author": {
     "name": "Jason Quense",
@@ -31,12 +34,16 @@
   "homepage": "https://github.com/react-restart/hooks#readme",
   "scripts": {
     "bootstrap": "yarn && yarn --cwd www",
-    "test": "jest --coverage",
-    "tdd": "jest --watch",
-    "build:pick": "cherry-pick --name=@restart/hooks --cwd=lib --input-dir=../src --cjs-dir=cjs --esm-dir=esm",
-    "build": "rimraf lib && 4c build src && yarn build:pick",
+    "test": "vitest run --coverage",
+    "tdd": "vitest",
+    "build": "rimraf lib cjs && concurrently --names 'esm,cjs' 'yarn build:esm' 'yarn build:cjs' && concurrently --names 'esm types,cjs types' 'yarn build:esm:types' 'yarn build:cjs:types'",
+    "build:esm": "babel src --env-name esm --out-dir lib --extensions '.ts' --ignore='**/*.d.ts'",
+    "build:esm:types": "tsc -p . --emitDeclarationOnly --declaration --outDir lib",
+    "build:cjs": "babel src --out-dir cjs --extensions '.ts'  --ignore='**/*.d.ts' && echo '{\"type\": \"commonjs\"}' > cjs/package.json",
+    "build:cjs:types": "tsc -p . --emitDeclarationOnly --declaration --outDir cjs --module commonjs --moduleResolution node",
     "deploy-docs": "yarn --cwd www build --prefix-paths && gh-pages -d www/public",
     "prepublishOnly": "yarn build",
+    "typecheck": "tsc -p . --noEmit",
     "release": "rollout"
   },
   "jest": {
@@ -52,8 +59,7 @@
     "trailingComma": "all"
   },
   "publishConfig": {
-    "access": "public",
-    "directory": "lib"
+    "access": "public"
   },
   "release": {
     "conventionalCommits": true
@@ -64,33 +70,32 @@
   "devDependencies": {
     "@4c/babel-preset": "^10.2.1",
     "@4c/cli": "^4.0.4",
-    "@4c/jest-preset": "^1.8.1",
     "@4c/rollout": "^4.0.2",
     "@4c/tsconfig": "^0.4.1",
-    "@babel/cli": "^7.22.9",
-    "@babel/core": "^7.22.9",
-    "@babel/preset-typescript": "^7.22.5",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^7.0.0",
-    "@types/jest": "^29.5.3",
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
     "@types/lodash": "^4.14.195",
-    "@types/react": "^18.2.15",
-    "babel-jest": "^29.6.1",
+    "@types/react": "^19.0.2",
+    "@vitest/coverage-v8": "2.1.8",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "cherry-pick": "^0.5.0",
     "codecov": "^3.8.3",
+    "concurrently": "^9.1.2",
     "eslint": "^8.44.0",
     "gh-pages": "^3.1.0",
     "husky": "^4.3.6",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
+    "jsdom": "^25.0.1",
     "lint-staged": "^13.2.3",
     "mq-polyfill": "^1.1.8",
     "prettier": "^3.0.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^5.0.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vitest": "^2.1.8"
   },
   "dependencies": {
     "dequal": "^2.0.3"

src/useAnimationFrame.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import useMounted from './useMounted'
+import useMounted from './useMounted.js'
 
 export interface UseAnimationFrameReturn {
   cancel(): void

src/useBreakpoint.ts

@@ -1,4 +1,4 @@
-import useMediaQuery from './useMediaQuery'
+import useMediaQuery from './useMediaQuery.js'
 import { useMemo } from 'react'
 
 export type BreakpointDirection = 'up' | 'down' | true
@@ -124,19 +124,18 @@ export function createBreakpointHook<TKey extends string>(
 
     let query = useMemo(
       () =>
-        Object.entries(breakpointMap).reduce(
-          (query, [key, direction]: [TKey, BreakpointDirection]) => {
-            if (direction === 'up' || direction === true) {
-              query = and(query, getMinQuery(key))
-            }
-            if (direction === 'down' || direction === true) {
-              query = and(query, getMaxQuery(key))
-            }
-
-            return query
-          },
-          '',
-        ),
+        Object.entries(breakpointMap).reduce((query, entry) => {
+          const [key, direction] = entry as [TKey, BreakpointDirection]
+
+          if (direction === 'up' || direction === true) {
+            query = and(query, getMinQuery(key))
+          }
+          if (direction === 'down' || direction === true) {
+            query = and(query, getMaxQuery(key))
+          }
+
+          return query
+        }, ''),
       [JSON.stringify(breakpointMap)],
     )
 

src/useCustomEffect.ts

@@ -5,7 +5,7 @@ import {
   useEffect,
   useDebugValue,
 } from 'react'
-import useMounted from './useMounted'
+import useMounted from './useMounted.js'
 
 export type EffectHook = (effect: EffectCallback, deps?: DependencyList) => void
 
@@ -61,7 +61,7 @@ function useCustomEffect<TDeps extends DependencyList = DependencyList>(
       ? { isEqual: isEqualOrOptions }
       : isEqualOrOptions
 
-  const dependenciesRef = useRef<TDeps>()
+  const dependenciesRef = useRef<TDeps | null>(null)
   dependenciesRef.current = dependencies
 
   const cleanupRef = useRef<CleanUp | null>(null)

src/useDebouncedCallback.ts

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react'
-import useTimeout from './useTimeout'
-import useEventCallback from './useEventCallback'
+import useTimeout from './useTimeout.js'
+import useEventCallback from './useEventCallback.js'
 
 export interface UseDebouncedCallbackOptions {
   wait: number
@@ -14,6 +14,8 @@ export interface UseDebouncedCallbackOptionsLeading
   leading: true
 }
 
+const EMPTY: unique symbol = Symbol('EMPTY')
+
 /**
  * Creates a debounced function that will invoke the input function after the
  * specified wait.
@@ -50,7 +52,7 @@ function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
 ): (...args: Parameters<TCallback>) => ReturnType<TCallback> | undefined {
   const lastCallTimeRef = useRef<number | null>(null)
   const lastInvokeTimeRef = useRef(0)
-  const returnValueRef = useRef<ReturnType<TCallback>>()
+  const returnValueRef = useRef<ReturnType<TCallback> | typeof EMPTY>(EMPTY)
 
   const isTimerSetRef = useRef(false)
   const lastArgsRef = useRef<unknown[] | null>(null)
@@ -80,7 +82,9 @@ function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
       timeout.set(timerExpired, wait)
 
       if (!leading) {
-        return returnValueRef.current
+        return returnValueRef.current === EMPTY
+          ? undefined
+          : returnValueRef.current
       }
 
       return invokeFunc(time)
@@ -96,7 +100,9 @@ function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
       }
 
       lastArgsRef.current = null
-      return returnValueRef.current
+      return returnValueRef.current === EMPTY
+        ? undefined
+        : returnValueRef.current
     }
 
     function timerExpired() {
@@ -110,6 +116,8 @@ function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
       const timeSinceLastInvoke = time - lastInvokeTimeRef.current
       const timeWaiting = wait - timeSinceLastCall
 
+      // console.log('g', Math.min(timeWaiting, maxWait - timeSinceLastInvoke))
+
       // Restart the timer.
       timeout.set(
         timerExpired,
@@ -170,7 +178,9 @@ function useDebouncedCallback<TCallback extends (...args: any[]) => any>(
         timeout.set(timerExpired, wait)
       }
 
-      return returnValueRef.current
+      return returnValueRef.current === EMPTY
+        ? undefined
+        : returnValueRef.current
     }
   }, [handleCallback, wait, maxWait, leading, trailing])
 }

src/useDebouncedState.ts

@@ -1,7 +1,7 @@
 import { useState, Dispatch, SetStateAction } from 'react'
 import useDebouncedCallback, {
   UseDebouncedCallbackOptions,
-} from './useDebouncedCallback'
+} from './useDebouncedCallback.js'
 
 /**
  * Similar to `useState`, except the setter function is debounced by

src/useDebouncedValue.ts

@@ -1,6 +1,6 @@
 import { useEffect, useDebugValue, useRef } from 'react'
-import useDebouncedState from './useDebouncedState'
-import { UseDebouncedCallbackOptions } from './useDebouncedCallback'
+import useDebouncedState from './useDebouncedState.js'
+import { UseDebouncedCallbackOptions } from './useDebouncedCallback.js'
 
 const defaultIsEqual = (a: any, b: any) => a === b
 

src/useEventCallback.ts

@@ -1,12 +1,12 @@
 import { useEffect, useCallback, useRef } from 'react'
-import useCommittedRef from './useCommittedRef'
+import useCommittedRef from './useCommittedRef.js'
 
 export default function useEventCallback<
-  TCallback extends (...args: any[]) => any
+  TCallback extends (...args: any[]) => any,
 >(fn?: TCallback | null): TCallback {
   const ref = useCommittedRef(fn)
   return useCallback(
-    function(...args: any[]) {
+    function (...args: any[]) {
       return ref.current && ref.current(...args)
     },
     [ref],

src/useEventListener.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 
-import useEventCallback from './useEventCallback'
+import useEventCallback from './useEventCallback.js'
 
 type EventHandler<T, K extends keyof DocumentEventMap> = (
   this: T,
@@ -18,14 +18,14 @@ type EventHandler<T, K extends keyof DocumentEventMap> = (
  */
 export default function useEventListener<
   T extends Element | Document | Window,
-  K extends keyof DocumentEventMap
+  K extends keyof DocumentEventMap,
 >(
   eventTarget: T | (() => T),
   event: K,
   listener: EventHandler<T, K>,
   capture: boolean | AddEventListenerOptions = false,
 ) {
-  const handler = useEventCallback(listener)
+  const handler = useEventCallback(listener) as EventListener
 
   useEffect(() => {
     const target =

src/useFocusManager.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef } from 'react'
-import useEventCallback from './useEventCallback'
-import useMounted from './useMounted'
+import useEventCallback from './useEventCallback.js'
+import useMounted from './useMounted.js'
 
 export interface FocusManagerOptions {
   /**
@@ -59,8 +59,8 @@ export default function useFocusManager(
 ): FocusController {
   const isMounted = useMounted()
 
-  const lastFocused = useRef<boolean | undefined>()
-  const handle = useRef<number | undefined>()
+  const lastFocused = useRef<boolean | undefined>(undefined)
+  const handle = useRef<number | undefined>(undefined)
 
   const willHandle = useEventCallback(opts.willHandle)
   const didHandle = useEventCallback(opts.didHandle)

src/useGlobalListener.ts

@@ -1,4 +1,4 @@
-import useEventListener from './useEventListener'
+import useEventListener from './useEventListener.js'
 import { useCallback } from 'react'
 
 type DocumentEventHandler<K extends keyof DocumentEventMap> = (

src/useImmediateUpdateEffect.ts

@@ -1,3 +1,3 @@
-import useUpdateImmediateEffect from './useUpdateImmediateEffect'
+import useUpdateImmediateEffect from './useUpdateImmediateEffect.js'
 
 export default useUpdateImmediateEffect

src/useIntersectionObserver.ts

@@ -1,8 +1,8 @@
 import { useState } from 'react'
 
-import useStableMemo from './useStableMemo'
-import useEffect from './useIsomorphicEffect'
-import useEventCallback from './useEventCallback'
+import useStableMemo from './useStableMemo.js'
+import useEffect from './useIsomorphicEffect.js'
+import useEventCallback from './useEventCallback.js'
 
 /**
  * Setup an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) on

src/useInterval.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import useCommittedRef from './useCommittedRef'
+import useCommittedRef from './useCommittedRef.js'
 
 /**
  * Creates a `setInterval` that is properly cleaned up when a component unmounted