extra-react-hooks 0.5.2 → 0.5.4

package/lib/use-callback-async.js

@@ -4,7 +4,7 @@ import { AbortController } from 'extra-abort';
 const abort = Symbol();
 export function useCallbackAsync(callback, deps) {
     const controller = useMemo(() => new AbortController(), deps);
-    useEffect(() => () => controller.abort(abort), deps);
+    useEffect(() => () => controller.abort(abort), [controller]);
     return useCallback((...args) => {
         go(async () => {
             try {
@@ -15,6 +15,6 @@ export function useCallbackAsync(callback, deps) {
                     throw err;
             }
         });
-    }, deps);
+    }, [callback, controller]);
 }
 //# sourceMappingURL=use-callback-async.js.map

package/lib/use-callback-async.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-callback-async.js","sourceRoot":"","sources":["../src/use-callback-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,KAAK,GAAG,MAAM,EAAE,CAAA;AAEtB,MAAM,UAAU,gBAAgB,CAC9B,QAA0E,EAC1E,IAAoB;IAEpB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAAE,IAAI,CAAC,CAAA;IAC7D,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA;IAEpD,OAAO,WAAW,CAAC,CAAC,GAAG,IAAU,EAAE,EAAE;QACnC,EAAE,CAAC,KAAK,IAAI,EAAE;YACZ,IAAI;gBACF,MAAM,QAAQ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;aAC3C;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,GAAG,KAAK,KAAK;oBAAE,MAAM,GAAG,CAAA;aAC7B;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}
+{"version":3,"file":"use-callback-async.js","sourceRoot":"","sources":["../src/use-callback-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,KAAK,GAAG,MAAM,EAAE,CAAA;AAEtB,MAAM,UAAU,gBAAgB,CAC9B,QAA0E,EAC1E,IAAoB;IAEpB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAAE,IAAI,CAAC,CAAA;IAC7D,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAE5D,OAAO,WAAW,CAAC,CAAC,GAAG,IAAU,EAAE,EAAE;QACnC,EAAE,CAAC,KAAK,IAAI,EAAE;YACZ,IAAI;gBACF,MAAM,QAAQ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;aAC3C;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,GAAG,KAAK,KAAK;oBAAE,MAAM,GAAG,CAAA;aAC7B;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;AAC5B,CAAC"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "extra-react-hooks",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "",
   "keywords": [],
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "type": "module",
   "main": "lib/index.js",
@@ -33,19 +34,19 @@
     }
   },
   "devDependencies": {
-    "@blackglory/wait-for": "^0.7.3",
-    "@commitlint/cli": "^17.6.1",
-    "@commitlint/config-conventional": "^17.6.1",
+    "@blackglory/wait-for": "^0.7.4",
+    "@commitlint/cli": "^17.6.5",
+    "@commitlint/config-conventional": "^17.6.5",
     "@testing-library/react": "^14.0.0",
-    "@types/jasmine": "^4.3.1",
-    "@types/react": "^18.0.35",
-    "@typescript-eslint/eslint-plugin": "^5.58.0",
-    "@typescript-eslint/parser": "^5.58.0",
-    "eslint": "^8.38.0",
+    "@types/jasmine": "^4.3.2",
+    "@types/react": "^18.2.11",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
+    "eslint": "^8.42.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "4",
-    "karma": "^6.4.1",
-    "karma-chrome-launcher": "^3.1.1",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "^3.2.0",
     "karma-jasmine": "^5.1.0",
     "karma-webpack": "^5.0.0",
     "npm-run-all": "^4.1.5",
@@ -54,19 +55,19 @@
     "react-test-renderer": "^18.2.0",
     "rimraf": "^4.3.0",
     "standard-version": "^9.3.2",
-    "ts-loader": "^9.4.2",
+    "ts-loader": "^9.4.3",
     "ts-patch": "^2.1.0",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
-    "tslib": "^2.4.1",
+    "tslib": "^2.5.3",
     "typescript": "4.9.5",
     "typescript-transform-paths": "^3.4.6",
-    "webpack": "^5.79.0"
+    "webpack": "^5.86.0"
   },
   "dependencies": {
-    "@blackglory/prelude": "^0.3.2",
-    "extra-abort": "^0.3.6",
-    "extra-fsm": "^0.2.0",
-    "rxjs": "^7.8.0"
+    "@blackglory/prelude": "^0.3.3",
+    "extra-abort": "^0.3.7",
+    "extra-fsm": "^0.2.1",
+    "rxjs": "^7.8.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17 || ^18"

package/src/index.ts

@@ -0,0 +1,19 @@
+export * from './use-increment.js'
+export * from './use-is-mounted.js'
+export * from './use-is-first-render.js'
+export * from './use-render-counter.js'
+export * from './use-mount.js'
+export * from './use-mount-async.js'
+export * from './use-unmount.js'
+export * from './use-effect-async.js'
+export * from './use-callback-async.js'
+export * from './use-update-effect.js'
+export * from './use-single-selection.js'
+export * from './use-multiple-selection.js'
+export * from './use-state-cycle.js'
+export * from './use-toggle.js'
+export * from './use-resize-observer.js'
+export * from './use-step.js'
+export * from './use-force-update.js'
+export * from './use-finite-state-machine.js'
+export * from './use-iife.js'

package/src/types.ts

@@ -0,0 +1,3 @@
+export interface IOptionState {
+  selected: boolean
+}

package/src/use-callback-async.ts

@@ -0,0 +1,23 @@
+import { useEffect, useCallback, useMemo, DependencyList } from 'react'
+import { go } from '@blackglory/prelude'
+import { AbortController } from 'extra-abort'
+
+const abort = Symbol()
+
+export function useCallbackAsync<Args extends unknown[]>(
+  callback: (...args: [...args: Args, signal: AbortSignal]) => Promise<void>
+, deps: DependencyList
+): (...args: Args) => void {
+  const controller = useMemo(() => new AbortController(), deps)
+  useEffect(() => () => controller.abort(abort), [controller])
+
+  return useCallback((...args: Args) => {
+    go(async () => {
+      try {
+        await callback(...args, controller.signal)
+      } catch (err) {
+        if (err !== abort) throw err
+      }
+    })
+  }, [callback, controller])
+}

package/src/use-effect-async.ts

@@ -0,0 +1,24 @@
+import { useEffect, DependencyList } from 'react'
+import { go } from '@blackglory/prelude'
+import { AbortController } from 'extra-abort'
+
+const abort = Symbol()
+
+export function useEffectAsync(
+  effect: (signal: AbortSignal) => Promise<void>
+, deps?: DependencyList
+): void {
+  useEffect(() => {
+    const controller = new AbortController()
+
+    go(async () => {
+      try {
+        await effect(controller.signal)
+      } catch (err) {
+        if (err !== abort) throw err
+      }
+    })
+
+    return () => controller.abort()
+  }, deps)
+}

package/src/use-finite-state-machine.ts

@@ -0,0 +1,28 @@
+import { useMemo, useEffect } from 'react'
+import { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm'
+import { useForceUpdate } from './use-force-update.js'
+
+export type {
+  ObservableFiniteStateMachine
+, IFiniteStateMachineSchema
+} from 'extra-fsm'
+
+export function useFiniteStateMachine<State extends string, Event extends string>(
+  schema: IFiniteStateMachineSchema<State, Event>
+, initialState: State
+): ObservableFiniteStateMachine<State, Event> {
+  const forceUpdate = useForceUpdate()
+  const fsm = useMemo(
+    () => new ObservableFiniteStateMachine(schema, initialState)
+  , [schema, initialState]
+  )
+
+  useEffect(() => {
+    const observable = fsm.observeStateChanges()
+    const subscription = observable.subscribe(() => forceUpdate())
+
+    return () => subscription.unsubscribe()
+  }, [fsm])
+
+  return fsm
+}

package/src/use-force-update.ts

@@ -0,0 +1,11 @@
+import { useState, useCallback } from 'react'
+
+export function useForceUpdate(): () => void {
+  const [, setState] = useState({})
+
+  return useCallback(forceUpdate, [])
+
+  function forceUpdate(): void {
+    setState({})
+  }
+}

package/src/use-iife.ts

@@ -0,0 +1,21 @@
+import { useRef } from 'react'
+import { useIsFirstRender } from '@src/use-is-first-render.js'
+
+export function useIIFE(iife: () => void, deps: React.DependencyList): void {
+  const oldDeps = useRef<React.DependencyList>([])
+  const isFirstRender = useIsFirstRender()
+
+  if (isFirstRender()) {
+    iife()
+  } else {
+    if (deps.length === oldDeps.current.length) {
+      if (deps.some((x, i) => x !== oldDeps.current[i])) {
+        iife()
+      }
+    } else {
+      iife()
+    }
+  }
+
+  oldDeps.current = Array.from(deps)
+}

package/src/use-increment.ts

@@ -0,0 +1,16 @@
+import { useState, useCallback } from 'react'
+
+export function useIncrement(
+  initialValue: number
+): [value: number, increment: (step?: number) => void, reset: () => void] {
+  const [value, setValue] = useState(initialValue)
+  return [value, useCallback(increment, []), useCallback(reset, [])]
+
+  function increment(step: number = 1): void {
+    setValue(value => value + step)
+  }
+
+  function reset(): void {
+    setValue(initialValue)
+  }
+}

package/src/use-is-first-render.ts

@@ -0,0 +1,27 @@
+import { useRef, useCallback } from 'react'
+
+enum State {
+  InitialValue
+, First
+, NotFirst
+}
+
+export function useIsFirstRender(): () => boolean {
+  const state = useRef(State.InitialValue)
+
+  switch (state.current) {
+    case State.InitialValue:
+      state.current = State.First
+      break
+    case State.First:
+      state.current = State.NotFirst
+      break
+    case State.NotFirst: break
+  }
+
+  return useCallback(isFirstRender, [])
+
+  function isFirstRender(): boolean {
+    return state.current === State.First
+  }
+}

package/src/use-is-mounted.ts

@@ -0,0 +1,19 @@
+import { useRef, useCallback } from 'react'
+import { useMount } from './use-mount.js'
+
+export function useIsMounted(): () => boolean {
+  const mounted = useRef(false)
+
+  useMount(() => {
+    mounted.current = true
+    return () => {
+      mounted.current = false
+    }
+  })
+
+  return useCallback(isMounted, [])
+
+  function isMounted(): boolean {
+    return mounted.current
+  }
+}

package/src/use-mount-async.ts

@@ -0,0 +1,5 @@
+import { useEffectAsync } from './use-effect-async.js'
+
+export function useMountAsync(effect: (signal: AbortSignal) => Promise<void>): void {
+  useEffectAsync(effect, [])
+}

package/src/use-mount.ts

@@ -0,0 +1,5 @@
+import { useEffect, EffectCallback } from 'react'
+
+export function useMount(effect: EffectCallback): void {
+  useEffect(effect, [])
+}

package/src/use-multiple-selection.ts

@@ -0,0 +1,69 @@
+import { useState, useMemo, useCallback } from 'react'
+import { assert, toArray, NonEmptyArray } from '@blackglory/prelude'
+import { IOptionState } from '@src/types.js'
+import { useIIFE } from '@src/use-iife.js'
+
+export function useMultipleSelection<T>(
+  options: NonEmptyArray<T>
+, defaultSelectedIndexes: number[] = []
+): {
+  selectedIndexes: number[]
+  optionStates: IOptionState[]
+  toggle: (index: number) => void
+  select: (index: number) => void
+  unselect: (index: number) => void
+} {
+  useIIFE(() => {
+    for (const index of defaultSelectedIndexes) {
+      assert(
+        index >= 0 && index < options.length
+      , 'The index of parameter defaultSelectedIndexes must be in the range of 0 to values.length'
+      )
+    }
+  }, [defaultSelectedIndexes])
+
+  const [selectedIndexes, setSelectedIndexes] = useState(new Set(defaultSelectedIndexes))
+
+  return {
+    selectedIndexes: useMemo(() => toArray(selectedIndexes), [selectedIndexes])
+  , optionStates: useMemo(createOptionStates, [options, selectedIndexes])
+  , toggle: useCallback(toggle, [selectedIndexes])
+  , select: useCallback(select, [])
+  , unselect: useCallback(unselect, [])
+  }
+
+  function createOptionStates(): IOptionState[] {
+    return options.map((_, index) => {
+      const selected = isSelected(index)
+      return { selected }
+    })
+  }
+
+  function isSelected(index: number): boolean {
+    return selectedIndexes.has(index)
+  }
+
+  function toggle(index: number): void {
+    if (isSelected(index)) {
+      unselect(index)
+    } else {
+      select(index)
+    }
+  }
+
+  function select(index: number): void {
+    setSelectedIndexes(selectedIndexes => {
+      const result = new Set(selectedIndexes)
+      result.add(index)
+      return result
+    })
+  }
+
+  function unselect(index: number): void {
+    setSelectedIndexes(selectedIndexes => {
+      const result = new Set(selectedIndexes)
+      result.delete(index)
+      return result
+    })
+  }
+}

package/src/use-render-counter.ts

@@ -0,0 +1,9 @@
+import { useRef } from 'react'
+
+export function useRenderCounter(): number {
+  const counter = useRef(0)
+
+  counter.current++
+
+  return counter.current
+}

package/src/use-resize-observer.ts

@@ -0,0 +1,20 @@
+import { useEffect, RefObject, MutableRefObject } from 'react'
+import { isntNull } from '@blackglory/prelude'
+
+export function useResizeObserver(
+  callback: ResizeObserverCallback
+, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+): void {
+  const deps = refs.map(x => x.current)
+
+  useEffect(() => {
+    const observer = new ResizeObserver(callback)
+
+    refs
+      .map(x => x.current)
+      .filter(isntNull)
+      .forEach(x => observer.observe(x))
+
+    return () => observer.disconnect()
+  }, deps)
+}

package/src/use-single-selection.ts

@@ -0,0 +1,38 @@
+import { useState, useMemo, useCallback } from 'react'
+import { assert, NonEmptyArray } from '@blackglory/prelude'
+import { IOptionState } from '@src/types.js'
+import { useIIFE } from '@src/use-iife.js'
+
+export function useSingleSelection<T>(
+  options: NonEmptyArray<T>
+, defaultSelectedIndex: number
+): {
+  selectedIndex: number
+  optionStates: IOptionState[]
+  select: (index: number) => void
+} {
+  useIIFE(() => {
+    assert(
+      defaultSelectedIndex >= 0 && defaultSelectedIndex < options.length
+    , 'The parameter defaultSelectedIndex must be in the range of 0 to values.length'
+    )
+  }, [defaultSelectedIndex])
+
+  const [selectedIndex, setSelectedIndex] = useState(defaultSelectedIndex)
+
+  return {
+    selectedIndex
+  , optionStates: useMemo(createOptionStates, [options, selectedIndex])
+  , select: useCallback(select, [])
+  }
+
+  function createOptionStates(): IOptionState[] {
+    return options.map((_, index) => ({
+      selected: index === selectedIndex
+    }))
+  }
+
+  function select(index: number): void {
+    setSelectedIndex(index)
+  }
+}

package/src/use-state-cycle.ts

@@ -0,0 +1,21 @@
+import { useState, useCallback } from 'react'
+import { NonEmptyArray } from '@blackglory/prelude'
+
+export function useStateCycle<T>(
+  orderedStates: NonEmptyArray<T>
+, initialStateIndex: number = 0
+): [state: T, next: () => void] {
+  const [index, setIndex] = useState(initialStateIndex)
+
+  return [orderedStates[index], useCallback(next, [orderedStates])]
+
+  function next(): void {
+    setIndex(index => {
+      if (index + 1 < orderedStates.length) {
+        return index + 1
+      } else {
+        return 0
+      }
+    })
+  }
+}

package/src/use-step.ts

@@ -0,0 +1,31 @@
+import { useState, useCallback } from 'react'
+import { NonEmptyArray } from '@blackglory/prelude'
+
+export function useStep<T>(
+  steps: NonEmptyArray<T>
+, initialStepIndex: number = 0
+): [currentStep: T, next: () => void, previous: () => void] {
+  const [index, setIndex] = useState(initialStepIndex)
+
+  return [steps[index], useCallback(next, [steps]), useCallback(previous, [])]
+
+  function next(): void {
+    setIndex(index => {
+      if (index === steps.length - 1) {
+        return index
+      } else {
+        return index + 1
+      }
+    })
+  }
+
+  function previous(): void {
+    setIndex(index => {
+      if (index === 0) {
+        return index
+      } else {
+        return index - 1
+      }
+    })
+  }
+}

package/src/use-toggle.ts

@@ -0,0 +1,12 @@
+import { useState, useCallback } from 'react'
+
+export function useToggle(
+  initialState: boolean = false
+): [on: boolean, toggle: () => void ] {
+  const [state, setState] = useState(initialState)
+  return [state, useCallback(toggle, [])]
+
+  function toggle(): void {
+    setState(state => !state)
+  }
+}

package/src/use-unmount.ts

@@ -0,0 +1,5 @@
+import { useEffect } from 'react'
+
+export function useUnmount(effect: () => void): void {
+  useEffect(() => effect, [])
+}

package/src/use-update-effect.ts

@@ -0,0 +1,15 @@
+import { useEffect, EffectCallback } from 'react'
+import { useIsFirstRender } from './use-is-first-render.js'
+
+export function useUpdateEffect(
+  effect: EffectCallback
+, deps?: React.DependencyList
+): void {
+  const isFirstRender = useIsFirstRender()
+
+  useEffect(() => {
+    if (!isFirstRender()) {
+      return effect()
+    }
+  }, deps)
+}