fix: ensure ESM imports include .js file extension

src/component/UseKey.tsx

@@ -1,5 +1,5 @@
-import useKey from '../useKey';
-import createRenderProp from '../factory/createRenderProp';
+import useKey from '../useKey.js';
+import createRenderProp from '../factory/createRenderProp.js';
 
 const UseKey = createRenderProp(useKey, ({ filter, fn, deps, ...rest }) => [
   filter,

src/factory/createBreakpoint.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { isBrowser, off, on } from '../misc/util';
+import { isBrowser, off, on } from '../misc/util.js';
 
 const createBreakpoint =
   (breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) =>

src/factory/createGlobalState.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from '../misc/hookState';
-import useEffectOnce from '../useEffectOnce';
-import useIsomorphicLayoutEffect from '../useIsomorphicLayoutEffect';
+import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from '../misc/hookState.js';
+import useEffectOnce from '../useEffectOnce.js';
+import useIsomorphicLayoutEffect from '../useIsomorphicLayoutEffect.js';
 
 export function createGlobalState<S = any>(
   initialState: IHookStateInitAction<S>

src/factory/createHTMLMediaHook.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
-import useSetState from '../useSetState';
-import parseTimeRanges from '../misc/parseTimeRanges';
+import useSetState from '../useSetState.js';
+import parseTimeRanges from '../misc/parseTimeRanges.js';
 
 export interface HTMLMediaProps
   extends React.AudioHTMLAttributes<any>,

src/factory/createReducer.ts

@@ -1,5 +1,5 @@
 import { MutableRefObject, useCallback, useRef, useState } from 'react';
-import useUpdateEffect from '../useUpdateEffect';
+import useUpdateEffect from '../useUpdateEffect.js';
 
 type Dispatch<Action> = (action: Action) => void;
 

src/index.ts

@@ -1,117 +1,117 @@
-export { default as createMemo } from './factory/createMemo';
-export { default as createReducerContext } from './factory/createReducerContext';
-export { default as createReducer } from './factory/createReducer';
-export { default as createStateContext } from './factory/createStateContext';
-export { default as useAsync } from './useAsync';
-export { default as useAsyncFn } from './useAsyncFn';
-export { default as useAsyncRetry } from './useAsyncRetry';
-export { default as useAudio } from './useAudio';
-export { default as useBattery } from './useBattery';
-export { default as useBeforeUnload } from './useBeforeUnload';
-export { default as useBoolean } from './useBoolean';
-export { default as useClickAway } from './useClickAway';
-export { default as useCookie } from './useCookie';
-export { default as useCopyToClipboard } from './useCopyToClipboard';
-export { default as useCounter } from './useCounter';
-export { default as useCss } from './useCss';
-export { default as useCustomCompareEffect } from './useCustomCompareEffect';
-export { default as useDebounce } from './useDebounce';
-export { default as useDeepCompareEffect } from './useDeepCompareEffect';
-export { default as useDefault } from './useDefault';
-export { default as useDrop } from './useDrop';
-export { default as useDropArea } from './useDropArea';
-export { default as useEffectOnce } from './useEffectOnce';
-export { default as useEnsuredForwardedRef, ensuredForwardRef } from './useEnsuredForwardedRef';
-export { default as useEvent } from './useEvent';
-export { default as useError } from './useError';
-export { default as useFavicon } from './useFavicon';
-export { default as useFullscreen } from './useFullscreen';
-export { default as useGeolocation } from './useGeolocation';
-export { default as useGetSet } from './useGetSet';
-export { default as useGetSetState } from './useGetSetState';
-export { default as useHarmonicIntervalFn } from './useHarmonicIntervalFn';
-export { default as useHover } from './useHover';
-export { default as useHoverDirty } from './useHoverDirty';
-export { default as useIdle } from './useIdle';
-export { default as useIntersection } from './useIntersection';
-export { default as useInterval } from './useInterval';
-export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
-export { default as useKey } from './useKey';
-export { default as createBreakpoint } from './factory/createBreakpoint';
+export { default as createMemo } from './factory/createMemo.js';
+export { default as createReducerContext } from './factory/createReducerContext.js';
+export { default as createReducer } from './factory/createReducer.js';
+export { default as createStateContext } from './factory/createStateContext.js';
+export { default as useAsync } from './useAsync.js';
+export { default as useAsyncFn } from './useAsyncFn.js';
+export { default as useAsyncRetry } from './useAsyncRetry.js';
+export { default as useAudio } from './useAudio.js';
+export { default as useBattery } from './useBattery.js';
+export { default as useBeforeUnload } from './useBeforeUnload.js';
+export { default as useBoolean } from './useBoolean.js';
+export { default as useClickAway } from './useClickAway.js';
+export { default as useCookie } from './useCookie.js';
+export { default as useCopyToClipboard } from './useCopyToClipboard.js';
+export { default as useCounter } from './useCounter.js';
+export { default as useCss } from './useCss.js';
+export { default as useCustomCompareEffect } from './useCustomCompareEffect.js';
+export { default as useDebounce } from './useDebounce.js';
+export { default as useDeepCompareEffect } from './useDeepCompareEffect.js';
+export { default as useDefault } from './useDefault.js';
+export { default as useDrop } from './useDrop.js';
+export { default as useDropArea } from './useDropArea.js';
+export { default as useEffectOnce } from './useEffectOnce.js';
+export { default as useEnsuredForwardedRef, ensuredForwardRef } from './useEnsuredForwardedRef.js';
+export { default as useEvent } from './useEvent.js';
+export { default as useError } from './useError.js';
+export { default as useFavicon } from './useFavicon.js';
+export { default as useFullscreen } from './useFullscreen.js';
+export { default as useGeolocation } from './useGeolocation.js';
+export { default as useGetSet } from './useGetSet.js';
+export { default as useGetSetState } from './useGetSetState.js';
+export { default as useHarmonicIntervalFn } from './useHarmonicIntervalFn.js';
+export { default as useHover } from './useHover.js';
+export { default as useHoverDirty } from './useHoverDirty.js';
+export { default as useIdle } from './useIdle.js';
+export { default as useIntersection } from './useIntersection.js';
+export { default as useInterval } from './useInterval.js';
+export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+export { default as useKey } from './useKey.js';
+export { default as createBreakpoint } from './factory/createBreakpoint.js';
 // not exported because of peer dependency
-// export { default as useKeyboardJs } from './useKeyboardJs';
-export { default as useKeyPress } from './useKeyPress';
-export { default as useKeyPressEvent } from './useKeyPressEvent';
-export { default as useLatest } from './useLatest';
-export { default as useLifecycles } from './useLifecycles';
-export { default as useList } from './useList';
-export { default as useLocalStorage } from './useLocalStorage';
-export { default as useLocation } from './useLocation';
-export { default as useLockBodyScroll } from './useLockBodyScroll';
-export { default as useLogger } from './useLogger';
-export { default as useLongPress } from './useLongPress';
-export { default as useMap } from './useMap';
-export { default as useMedia } from './useMedia';
-export { default as useMediaDevices } from './useMediaDevices';
-export { useMediatedState } from './useMediatedState';
-export { default as useMethods } from './useMethods';
-export { default as useMotion } from './useMotion';
-export { default as useMount } from './useMount';
-export { default as useMountedState } from './useMountedState';
-export { default as useMouse } from './useMouse';
-export { default as useMouseHovered } from './useMouseHovered';
-export { default as useMouseWheel } from './useMouseWheel';
-export { default as useNetworkState } from './useNetworkState';
-export { default as useNumber } from './useNumber';
-export { default as useObservable } from './useObservable';
-export { default as useOrientation } from './useOrientation';
-export { default as usePageLeave } from './usePageLeave';
-export { default as usePermission } from './usePermission';
-export { default as usePrevious } from './usePrevious';
-export { default as usePreviousDistinct } from './usePreviousDistinct';
-export { default as usePromise } from './usePromise';
-export { default as useQueue } from './useQueue';
-export { default as useRaf } from './useRaf';
-export { default as useRafLoop } from './useRafLoop';
-export { default as useRafState } from './useRafState';
-export { default as useSearchParam } from './useSearchParam';
-export { default as useScratch } from './useScratch';
-export { default as useScroll } from './useScroll';
-export { default as useScrolling } from './useScrolling';
-export { default as useSessionStorage } from './useSessionStorage';
-export { default as useSetState } from './useSetState';
-export { default as useShallowCompareEffect } from './useShallowCompareEffect';
-export { default as useSize } from './useSize';
-export { default as useSlider } from './useSlider';
-export { default as useSpeech } from './useSpeech';
+// export { default as useKeyboardJs } from './useKeyboardJs.js';
+export { default as useKeyPress } from './useKeyPress.js';
+export { default as useKeyPressEvent } from './useKeyPressEvent.js';
+export { default as useLatest } from './useLatest.js';
+export { default as useLifecycles } from './useLifecycles.js';
+export { default as useList } from './useList.js';
+export { default as useLocalStorage } from './useLocalStorage.js';
+export { default as useLocation } from './useLocation.js';
+export { default as useLockBodyScroll } from './useLockBodyScroll.js';
+export { default as useLogger } from './useLogger.js';
+export { default as useLongPress } from './useLongPress.js';
+export { default as useMap } from './useMap.js';
+export { default as useMedia } from './useMedia.js';
+export { default as useMediaDevices } from './useMediaDevices.js';
+export { useMediatedState } from './useMediatedState.js';
+export { default as useMethods } from './useMethods.js';
+export { default as useMotion } from './useMotion.js';
+export { default as useMount } from './useMount.js';
+export { default as useMountedState } from './useMountedState.js';
+export { default as useMouse } from './useMouse.js';
+export { default as useMouseHovered } from './useMouseHovered.js';
+export { default as useMouseWheel } from './useMouseWheel.js';
+export { default as useNetworkState } from './useNetworkState.js';
+export { default as useNumber } from './useNumber.js';
+export { default as useObservable } from './useObservable.js';
+export { default as useOrientation } from './useOrientation.js';
+export { default as usePageLeave } from './usePageLeave.js';
+export { default as usePermission } from './usePermission.js';
+export { default as usePrevious } from './usePrevious.js';
+export { default as usePreviousDistinct } from './usePreviousDistinct.js';
+export { default as usePromise } from './usePromise.js';
+export { default as useQueue } from './useQueue.js';
+export { default as useRaf } from './useRaf.js';
+export { default as useRafLoop } from './useRafLoop.js';
+export { default as useRafState } from './useRafState.js';
+export { default as useSearchParam } from './useSearchParam.js';
+export { default as useScratch } from './useScratch.js';
+export { default as useScroll } from './useScroll.js';
+export { default as useScrolling } from './useScrolling.js';
+export { default as useSessionStorage } from './useSessionStorage.js';
+export { default as useSetState } from './useSetState.js';
+export { default as useShallowCompareEffect } from './useShallowCompareEffect.js';
+export { default as useSize } from './useSize.js';
+export { default as useSlider } from './useSlider.js';
+export { default as useSpeech } from './useSpeech.js';
 // not exported because of peer dependency
-// export { default as useSpring } from './useSpring';
-export { default as useStartTyping } from './useStartTyping';
-export { useStateWithHistory } from './useStateWithHistory';
-export { default as useStateList } from './useStateList';
-export { default as useThrottle } from './useThrottle';
-export { default as useThrottleFn } from './useThrottleFn';
-export { default as useTimeout } from './useTimeout';
-export { default as useTimeoutFn } from './useTimeoutFn';
-export { default as useTitle } from './useTitle';
-export { default as useToggle } from './useToggle';
-export { default as useTween } from './useTween';
-export { default as useUnmount } from './useUnmount';
-export { default as useUnmountPromise } from './useUnmountPromise';
-export { default as useUpdate } from './useUpdate';
-export { default as useUpdateEffect } from './useUpdateEffect';
-export { default as useUpsert } from './useUpsert';
-export { default as useVibrate } from './useVibrate';
-export { default as useVideo } from './useVideo';
-export { default as useStateValidator } from './useStateValidator';
-export { useScrollbarWidth } from './useScrollbarWidth';
-export { useMultiStateValidator } from './useMultiStateValidator';
-export { default as useWindowScroll } from './useWindowScroll';
-export { default as useWindowSize } from './useWindowSize';
-export { default as useMeasure } from './useMeasure';
-export { default as usePinchZoom } from './usePinchZoom';
-export { useRendersCount } from './useRendersCount';
-export { useFirstMountState } from './useFirstMountState';
-export { default as useSet } from './useSet';
-export { createGlobalState } from './factory/createGlobalState';
-export { useHash } from './useHash';
+// export { default as useSpring } from './useSpring.js';
+export { default as useStartTyping } from './useStartTyping.js';
+export { useStateWithHistory } from './useStateWithHistory.js';
+export { default as useStateList } from './useStateList.js';
+export { default as useThrottle } from './useThrottle.js';
+export { default as useThrottleFn } from './useThrottleFn.js';
+export { default as useTimeout } from './useTimeout.js';
+export { default as useTimeoutFn } from './useTimeoutFn.js';
+export { default as useTitle } from './useTitle.js';
+export { default as useToggle } from './useToggle.js';
+export { default as useTween } from './useTween.js';
+export { default as useUnmount } from './useUnmount.js';
+export { default as useUnmountPromise } from './useUnmountPromise.js';
+export { default as useUpdate } from './useUpdate.js';
+export { default as useUpdateEffect } from './useUpdateEffect.js';
+export { default as useUpsert } from './useUpsert.js';
+export { default as useVibrate } from './useVibrate.js';
+export { default as useVideo } from './useVideo.js';
+export { default as useStateValidator } from './useStateValidator.js';
+export { useScrollbarWidth } from './useScrollbarWidth.js';
+export { useMultiStateValidator } from './useMultiStateValidator.js';
+export { default as useWindowScroll } from './useWindowScroll.js';
+export { default as useWindowSize } from './useWindowSize.js';
+export { default as useMeasure } from './useMeasure.js';
+export { default as usePinchZoom } from './usePinchZoom.js';
+export { useRendersCount } from './useRendersCount.js';
+export { useFirstMountState } from './useFirstMountState.js';
+export { default as useSet } from './useSet.js';
+export { createGlobalState } from './factory/createGlobalState.js';
+export { useHash } from './useHash.js';

src/useAsync.ts

@@ -1,8 +1,8 @@
 import { DependencyList, useEffect } from 'react';
-import useAsyncFn from './useAsyncFn';
-import { FunctionReturningPromise } from './misc/types';
+import useAsyncFn from './useAsyncFn.js';
+import { FunctionReturningPromise } from './misc/types.js';
 
-export { AsyncState, AsyncFnReturn } from './useAsyncFn';
+export { AsyncState, AsyncFnReturn } from './useAsyncFn.js';
 
 export default function useAsync<T extends FunctionReturningPromise>(
   fn: T,

src/useAsyncFn.ts

@@ -1,6 +1,6 @@
 import { DependencyList, useCallback, useRef, useState } from 'react';
-import useMountedState from './useMountedState';
-import { FunctionReturningPromise, PromiseType } from './misc/types';
+import useMountedState from './useMountedState.js';
+import { FunctionReturningPromise, PromiseType } from './misc/types.js';
 
 export type AsyncState<T> =
   | {

src/useAsyncRetry.ts

@@ -1,5 +1,5 @@
 import { DependencyList, useCallback, useState } from 'react';
-import useAsync, { AsyncState } from './useAsync';
+import useAsync, { AsyncState } from './useAsync.js';
 
 export type AsyncStateRetry<T> = AsyncState<T> & {
   retry(): void;

src/useAudio.ts

@@ -1,4 +1,4 @@
-import createHTMLMediaHook from './factory/createHTMLMediaHook';
+import createHTMLMediaHook from './factory/createHTMLMediaHook.js';
 
 const useAudio = createHTMLMediaHook<HTMLAudioElement>('audio');
 export default useAudio;

src/useBattery.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { isNavigator, off, on } from './misc/util';
-import isDeepEqual from './misc/isDeepEqual';
+import { isNavigator, off, on } from './misc/util.js';
+import isDeepEqual from './misc/isDeepEqual.js';
 
 export interface BatteryState {
   charging: boolean;

src/useBeforeUnload.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { off, on } from './misc/util';
+import { off, on } from './misc/util.js';
 
 const useBeforeUnload = (enabled: boolean | (() => boolean) = true, message?: string) => {
   const handler = useCallback(

src/useBoolean.ts

@@ -1,3 +1,3 @@
-import useBoolean from './useToggle';
+import useBoolean from './useToggle.js';
 
 export default useBoolean;

src/useClickAway.ts

@@ -1,5 +1,5 @@
 import { RefObject, useEffect, useRef } from 'react';
-import { off, on } from './misc/util';
+import { off, on } from './misc/util.js';
 
 const defaultEvents = ['mousedown', 'touchstart'];
 

src/useCopyToClipboard.ts

@@ -1,7 +1,7 @@
 import writeText from 'copy-to-clipboard';
 import { useCallback } from 'react';
-import useMountedState from './useMountedState';
-import useSetState from './useSetState';
+import useMountedState from './useMountedState.js';
+import useSetState from './useSetState.js';
 
 export interface CopyToClipboardState {
   value?: string;

src/useCounter.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import useGetSet from './useGetSet';
-import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from './misc/hookState';
+import useGetSet from './useGetSet.js';
+import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from './misc/hookState.js';
 
 export interface CounterActions {
   inc: (delta?: number) => void;

src/useCss.ts

@@ -3,7 +3,7 @@ import { addon as addonCSSOM, CSSOMAddon } from 'nano-css/addon/cssom';
 import { addon as addonVCSSOM, VCSSOMAddon } from 'nano-css/addon/vcssom';
 import { cssToTree } from 'nano-css/addon/vcssom/cssToTree';
 import { useMemo } from 'react';
-import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect.js';
 
 type Nano = NanoRenderer & CSSOMAddon & VCSSOMAddon;
 const nano = create() as Nano;

src/useDebounce.ts

@@ -1,5 +1,5 @@
 import { DependencyList, useEffect } from 'react';
-import useTimeoutFn from './useTimeoutFn';
+import useTimeoutFn from './useTimeoutFn.js';
 
 export type UseDebounceReturn = [() => boolean | null, () => void];
 

src/useDeepCompareEffect.ts

@@ -1,6 +1,6 @@
 import { DependencyList, EffectCallback } from 'react';
-import useCustomCompareEffect from './useCustomCompareEffect';
-import isDeepEqual from './misc/isDeepEqual';
+import useCustomCompareEffect from './useCustomCompareEffect.js';
+import isDeepEqual from './misc/isDeepEqual.js';
 
 const isPrimitive = (val: any) => val !== Object(val);
 

src/useDrop.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { noop, off, on } from './misc/util';
+import { noop, off, on } from './misc/util.js';
 
 export interface DropAreaState {
   over: boolean;