From cdc5ec596d216eb63e24b500a1d7a86a0823f214 Mon Sep 17 00:00:00 2001 From: streamich Date: Sun, 16 Dec 2018 11:02:52 +0100 Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20use=20import=20hooks?= =?UTF-8?q?=20from=20React=20proper?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/__stories__/useAdopt.story.tsx | 2 +- src/__stories__/useGetSet.story.tsx | 2 +- src/__stories__/useHoverDirty.story.tsx | 2 +- src/__stories__/useOutsideClick.story.tsx | 2 +- src/createMemo.ts | 2 +- src/react.ts | 17 ----------------- src/useAsync.ts | 2 +- src/useBattery.ts | 2 +- src/useCounter.ts | 2 +- src/useCss.ts | 2 +- src/useFavicon.ts | 2 +- src/useGeolocation.ts | 2 +- src/useGetSet.ts | 2 +- src/useGetSetState.ts | 2 +- src/useHover.ts | 3 ++- src/useHoverDirty.ts | 2 +- src/useIdle.ts | 4 ++-- src/useLifecycles.ts | 2 +- src/useList.ts | 2 +- src/useLocalStorage.ts | 2 +- src/useLocation.ts | 2 +- src/useLogger.ts | 2 +- src/useMap.ts | 2 +- src/useMedia.ts | 2 +- src/useMediaDevices.ts | 2 +- src/useMotion.ts | 4 ++-- src/useMount.ts | 2 +- src/useNetwork.ts | 2 +- src/useObservable.ts | 6 +++--- src/useOrientation.ts | 6 +++--- src/useRaf.ts | 2 +- src/useRenderProp.ts | 3 ++- src/useSessionStorage.ts | 2 +- src/useSetState.ts | 2 +- src/useSize.tsx | 5 +++-- src/useSpeech.ts | 2 +- src/useSpring.ts | 4 ++-- src/useTimeout.ts | 2 +- src/useTitle.ts | 2 +- src/useToggle.ts | 2 +- src/useUnmount.ts | 2 +- src/useUpdate.ts | 2 +- src/useWait.ts | 2 +- src/useWindowSize.ts | 4 ++-- src/util/createHTMLMediaHook.ts | 4 ++-- 45 files changed, 57 insertions(+), 71 deletions(-) delete mode 100644 src/react.ts diff --git a/src/__stories__/useAdopt.story.tsx b/src/__stories__/useAdopt.story.tsx index cc109d3e..874a82e1 100644 --- a/src/__stories__/useAdopt.story.tsx +++ b/src/__stories__/useAdopt.story.tsx @@ -1,7 +1,7 @@ import {storiesOf} from '@storybook/react'; import * as React from 'react'; import {useAdopt} from '..'; -import {useState, useCallback} from '../react'; +import {useState} from 'react'; import ShowDocs from '../util/ShowDocs'; import {Spring} from 'react-spring'; diff --git a/src/__stories__/useGetSet.story.tsx b/src/__stories__/useGetSet.story.tsx index 540a4c9c..3392e9af 100644 --- a/src/__stories__/useGetSet.story.tsx +++ b/src/__stories__/useGetSet.story.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import {storiesOf} from '@storybook/react'; import {useGetSet} from '..'; -import {useState} from '../react'; +import {useState} from 'react'; import ShowDocs from '../util/ShowDocs'; const Demo = () => { diff --git a/src/__stories__/useHoverDirty.story.tsx b/src/__stories__/useHoverDirty.story.tsx index b784e1ee..fc97082e 100644 --- a/src/__stories__/useHoverDirty.story.tsx +++ b/src/__stories__/useHoverDirty.story.tsx @@ -1,6 +1,6 @@ import {storiesOf} from '@storybook/react'; import * as React from 'react'; -import {useRef} from '../react'; +import {useRef} from 'react'; import {useHoverDirty} from '..'; import ShowDocs from '../util/ShowDocs'; diff --git a/src/__stories__/useOutsideClick.story.tsx b/src/__stories__/useOutsideClick.story.tsx index 4422c02b..27af1084 100644 --- a/src/__stories__/useOutsideClick.story.tsx +++ b/src/__stories__/useOutsideClick.story.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import {storiesOf} from '@storybook/react'; import {useOutsideClick} from '..'; -import {useRef} from '../react'; +import {useRef} from 'react'; import ShowDocs from '../util/ShowDocs'; const Demo = () => { diff --git a/src/createMemo.ts b/src/createMemo.ts index 59405a81..fc1c43d2 100644 --- a/src/createMemo.ts +++ b/src/createMemo.ts @@ -1,4 +1,4 @@ -import {useMemo} from './react'; +import {useMemo} from 'react'; const createMemo = fn => (...args) => useMemo(() => fn(...args), args); diff --git a/src/react.ts b/src/react.ts deleted file mode 100644 index c872387a..00000000 --- a/src/react.ts +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; - -export type UseState = (initialState: T | (() => T)) => [T, (newState: T | ((newState) => T)) => void]; -export const useState: UseState = (React as any).useState; - -export type UseEffect = (didUpdate: () => ((() => void) | void), params?: any[]) => void; -export const useEffect: UseEffect = (React as any).useEffect; - -export interface ReactRef {current: T}; -export type UseRef = (initialValue: T) => ReactRef; -export const useRef: UseRef = (React as any).useRef; - -export type UseCallback = any)>(callback: T, args: any[]) => T; -export const useCallback: UseCallback = (React as any).useCallback; - -export type UseMemo = (fn: Function, args: any[]) => T; -export const useMemo: UseMemo = (React as any).useMemo; diff --git a/src/useAsync.ts b/src/useAsync.ts index d35e42d7..c18df273 100644 --- a/src/useAsync.ts +++ b/src/useAsync.ts @@ -1,4 +1,4 @@ -import {useState, useEffect, useCallback} from './react'; +import {useState, useEffect, useCallback} from 'react'; export interface AsyncState { loading: boolean; diff --git a/src/useBattery.ts b/src/useBattery.ts index a03967bc..e699b55f 100644 --- a/src/useBattery.ts +++ b/src/useBattery.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; import {on, off} from './util'; export interface BatterySensorState { diff --git a/src/useCounter.ts b/src/useCounter.ts index 1a8dcf24..44a075bc 100644 --- a/src/useCounter.ts +++ b/src/useCounter.ts @@ -1,5 +1,5 @@ import useGetSet from './useGetSet'; -import {useCallback} from './react'; +import {useCallback} from 'react'; export interface CounterActions { inc: (delta?: number) => void; diff --git a/src/useCss.ts b/src/useCss.ts index 8436def9..39e7d3d3 100644 --- a/src/useCss.ts +++ b/src/useCss.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; const {create} = require('nano-css'); const {addon: addonCssom} = require('nano-css/addon/cssom'); const {addon: addonPipe} = require('nano-css/addon/pipe'); diff --git a/src/useFavicon.ts b/src/useFavicon.ts index 0ae749f4..ee04d653 100644 --- a/src/useFavicon.ts +++ b/src/useFavicon.ts @@ -1,4 +1,4 @@ -import {useEffect} from './react'; +import {useEffect} from 'react'; const useFavicon = (href: string) => { useEffect(() => { diff --git a/src/useGeolocation.ts b/src/useGeolocation.ts index c935dd3f..649cee32 100644 --- a/src/useGeolocation.ts +++ b/src/useGeolocation.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; export interface GeoLocationSensorState { accuracy: number, diff --git a/src/useGetSet.ts b/src/useGetSet.ts index e9191c84..d3c8098f 100644 --- a/src/useGetSet.ts +++ b/src/useGetSet.ts @@ -1,4 +1,4 @@ -import {useRef, useCallback} from './react'; +import {useRef, useCallback} from 'react'; import useUpdate from './useUpdate'; const useGetSet = (initialValue: T): [() => T, (value: T) => void] => { diff --git a/src/useGetSetState.ts b/src/useGetSetState.ts index 453d6cc5..0e0e9962 100644 --- a/src/useGetSetState.ts +++ b/src/useGetSetState.ts @@ -1,4 +1,4 @@ -import {useRef, useCallback} from './react'; +import {useRef, useCallback} from 'react'; import useUpdate from './useUpdate'; const useGetSetState = (initialState: T = {} as T): [() => T, (patch: Partial) => void]=> { diff --git a/src/useHover.ts b/src/useHover.ts index 16e03d5b..06074c01 100644 --- a/src/useHover.ts +++ b/src/useHover.ts @@ -1,5 +1,6 @@ import * as React from 'react'; -import {useState} from './react'; + +const {useState} = React; const noop = () => {}; diff --git a/src/useHoverDirty.ts b/src/useHoverDirty.ts index 367157b6..e5df777d 100644 --- a/src/useHoverDirty.ts +++ b/src/useHoverDirty.ts @@ -1,4 +1,4 @@ -import {useEffect, useState} from './react'; +import {useEffect, useState} from 'react'; // kudos: https://usehooks.com/ const useHoverDirty = (ref) => { diff --git a/src/useIdle.ts b/src/useIdle.ts index 12292275..ac58b10e 100644 --- a/src/useIdle.ts +++ b/src/useIdle.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; import {on, off} from './util'; import {throttle} from 'throttle-debounce'; @@ -23,7 +23,7 @@ const useIdle = (ms: number = oneMinute, initialState: boolean = false, events: if (localState) { set(false); } - + clearTimeout(timeout); timeout = setTimeout(() => set(true), ms); }); diff --git a/src/useLifecycles.ts b/src/useLifecycles.ts index 841ccd47..6db12d73 100644 --- a/src/useLifecycles.ts +++ b/src/useLifecycles.ts @@ -1,4 +1,4 @@ -import {useEffect} from './react'; +import {useEffect} from 'react'; const useLifecycles = (mount, unmount?) => { useEffect(() => { diff --git a/src/useList.ts b/src/useList.ts index f87e54ad..1388338d 100644 --- a/src/useList.ts +++ b/src/useList.ts @@ -1,4 +1,4 @@ -import {useState} from './react'; +import {useState} from 'react'; export interface Actions { set: (list: T[]) => void; diff --git a/src/useLocalStorage.ts b/src/useLocalStorage.ts index 30ef2bd6..7d05e04c 100644 --- a/src/useLocalStorage.ts +++ b/src/useLocalStorage.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; const isClient = typeof window === 'object'; diff --git a/src/useLocation.ts b/src/useLocation.ts index d86481c7..9c2d242f 100644 --- a/src/useLocation.ts +++ b/src/useLocation.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; import {isClient, on, off} from './util'; const patchHistoryMethod = (method) => { diff --git a/src/useLogger.ts b/src/useLogger.ts index 6ce4d201..b23ab724 100644 --- a/src/useLogger.ts +++ b/src/useLogger.ts @@ -1,4 +1,4 @@ -import {useEffect} from './react'; +import {useEffect} from 'react'; import useLifecycles from './useLifecycles'; const useLogger = (name, props) => { diff --git a/src/useMap.ts b/src/useMap.ts index 06f6ade4..01bad6e3 100644 --- a/src/useMap.ts +++ b/src/useMap.ts @@ -1,4 +1,4 @@ -import {useState} from './react'; +import {useState} from 'react'; export interface Actions { get: (key: K) => any; diff --git a/src/useMedia.ts b/src/useMedia.ts index bff87473..12e2331a 100644 --- a/src/useMedia.ts +++ b/src/useMedia.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; const useMedia = (query: string, defaultState: boolean = false) => { const [state, setState] = useState(defaultState); diff --git a/src/useMediaDevices.ts b/src/useMediaDevices.ts index 8df3ed11..c69f14d0 100644 --- a/src/useMediaDevices.ts +++ b/src/useMediaDevices.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; import {on, off} from './util'; const noop = () => {}; diff --git a/src/useMotion.ts b/src/useMotion.ts index 3955b64e..a550261a 100644 --- a/src/useMotion.ts +++ b/src/useMotion.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; import {on, off} from './util'; export interface MotionSensorState { @@ -50,7 +50,7 @@ const useMotion = (initialState: MotionSensorState = defaultState) => { rotationRate, interval } = event; - + setState({ acceleration: { x: acceleration.x, diff --git a/src/useMount.ts b/src/useMount.ts index 7ff2edc4..eb07dcc5 100644 --- a/src/useMount.ts +++ b/src/useMount.ts @@ -1,4 +1,4 @@ -import {useEffect} from './react'; +import {useEffect} from 'react'; const useMount = (mount) => useEffect(mount, []); diff --git a/src/useNetwork.ts b/src/useNetwork.ts index f76850d5..77d81706 100644 --- a/src/useNetwork.ts +++ b/src/useNetwork.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; import {on, off} from './util'; export interface NetworkState { diff --git a/src/useObservable.ts b/src/useObservable.ts index 25c58210..8aed56c2 100644 --- a/src/useObservable.ts +++ b/src/useObservable.ts @@ -1,13 +1,13 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; const useObservable = (observable$, initialValue?: T): T | undefined => { const [value, update] = useState(initialValue); - + useEffect(() => { const s = observable$.subscribe(update) return () => s.unsubscribe(); }, [observable$]); - + return value; } diff --git a/src/useOrientation.ts b/src/useOrientation.ts index 2f430bae..81255c1c 100644 --- a/src/useOrientation.ts +++ b/src/useOrientation.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; import {on, off} from './util'; export interface OrientationState { @@ -20,11 +20,11 @@ const useOrientation = (initialState: OrientationState = defaultState) => { const onChange = () => { if (mounted) { const {orientation} = screen as any; - + if (!orientation) { setState(initialState); } - + const {angle, type} = orientation; setState({angle, type}); } diff --git a/src/useRaf.ts b/src/useRaf.ts index ef64d2ff..1cefacf0 100644 --- a/src/useRaf.ts +++ b/src/useRaf.ts @@ -1,4 +1,4 @@ -import {useState, useLayoutEffect} from './react'; +import {useState, useLayoutEffect} from 'react'; const useRaf = (ms: number = 1e12, delay: number = 0): number => { const [elapsed, set] = useState(0); diff --git a/src/useRenderProp.ts b/src/useRenderProp.ts index 53b34446..e16c1168 100644 --- a/src/useRenderProp.ts +++ b/src/useRenderProp.ts @@ -1,7 +1,8 @@ import * as React from 'react'; -import {useState, useCallback} from './react'; import createMemo from './createMemo'; +const {useState, useCallback} = React; + const useRenderProp = (element: React.ReactElement): [React.ReactElement, any[]] => { if (process.env.NODE_ENV !== 'production') { if (!React.isValidElement(element)) { diff --git a/src/useSessionStorage.ts b/src/useSessionStorage.ts index 615e6146..8621bd99 100644 --- a/src/useSessionStorage.ts +++ b/src/useSessionStorage.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; const isClient = typeof window === 'object'; diff --git a/src/useSetState.ts b/src/useSetState.ts index c5f54ce4..77d7274b 100644 --- a/src/useSetState.ts +++ b/src/useSetState.ts @@ -1,4 +1,4 @@ -import {useState} from './react'; +import {useState} from 'react'; const useSetState = (initialState: T = {} as T): [T, (patch: Partial | Function) => void]=> { const [state, set] = useState(initialState); diff --git a/src/useSize.tsx b/src/useSize.tsx index c1812e06..212083ef 100644 --- a/src/useSize.tsx +++ b/src/useSize.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import {useState, useEffect, useRef} from './react'; + +const {useState, useEffect, useRef} = React; const isClient = typeof window === 'object'; const DRAF = (callback: () => void) => setTimeout(callback, 35); @@ -25,7 +26,7 @@ const useSize = (element: Element, {width = Infinity, height = Infinity}: Partia if (typeof element === 'function') { element = element(state); } - + const style = element.props.style || {}; const ref = useRef(null); let window: Window | null = null; diff --git a/src/useSpeech.ts b/src/useSpeech.ts index a7c8a7c3..c4d83bdf 100644 --- a/src/useSpeech.ts +++ b/src/useSpeech.ts @@ -1,4 +1,4 @@ -import {useRef} from './react'; +import {useRef} from 'react'; import useSetState from './useSetState'; import useMount from './useMount'; diff --git a/src/useSpring.ts b/src/useSpring.ts index 03b983fd..d78b5590 100644 --- a/src/useSpring.ts +++ b/src/useSpring.ts @@ -1,5 +1,5 @@ import {SpringSystem, Spring} from 'rebound'; -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; const useSpring = (targetValue: number = 0, tension: number = 50, friction: number = 3) => { const [spring, setSpring] = useState(null); @@ -32,7 +32,7 @@ const useSpring = (targetValue: number = 0, tension: number = 50, friction: numb spring.setEndValue(targetValue); } }, [targetValue]); - + return value; }; diff --git a/src/useTimeout.ts b/src/useTimeout.ts index 88952771..e753060a 100644 --- a/src/useTimeout.ts +++ b/src/useTimeout.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; const useTimeout = (ms: number = 0) => { const [ready, setReady] = useState(false); diff --git a/src/useTitle.ts b/src/useTitle.ts index 84617805..09a0b8da 100644 --- a/src/useTitle.ts +++ b/src/useTitle.ts @@ -1,4 +1,4 @@ -import {useEffect} from './react'; +import {useEffect} from 'react'; const useTitle = (title: string) => { useEffect(() => { diff --git a/src/useToggle.ts b/src/useToggle.ts index 77f3523e..3e6b1f57 100644 --- a/src/useToggle.ts +++ b/src/useToggle.ts @@ -1,4 +1,4 @@ -import {useState} from './react'; +import {useState} from 'react'; export type UseToggle = (state: boolean) => [ boolean, // state diff --git a/src/useUnmount.ts b/src/useUnmount.ts index 415cef7f..69df3b5f 100644 --- a/src/useUnmount.ts +++ b/src/useUnmount.ts @@ -1,4 +1,4 @@ -import {useEffect} from './react'; +import {useEffect} from 'react'; const useUnmount = (unmount) => { useEffect(() => () => { diff --git a/src/useUpdate.ts b/src/useUpdate.ts index cb1948cb..f6212617 100644 --- a/src/useUpdate.ts +++ b/src/useUpdate.ts @@ -1,4 +1,4 @@ -import {useState} from './react'; +import {useState} from 'react'; const useUpdate = () => useState(0)[1] as (() => void); diff --git a/src/useWait.ts b/src/useWait.ts index ffa4c648..92124d10 100644 --- a/src/useWait.ts +++ b/src/useWait.ts @@ -1,4 +1,4 @@ -import { Waiter, useWait } from 'react-wait' +import {Waiter, useWait} from 'react-wait'; useWait.Waiter = Waiter; diff --git a/src/useWindowSize.ts b/src/useWindowSize.ts index 1f8f4b01..4f955c48 100644 --- a/src/useWindowSize.ts +++ b/src/useWindowSize.ts @@ -1,4 +1,4 @@ -import {useState, useEffect} from './react'; +import {useState, useEffect} from 'react'; const isClient = typeof window === 'object'; @@ -7,7 +7,7 @@ const useWindowSize = (initialWidth = Infinity, initialHeight = Infinity) => { width: isClient ? window.innerWidth : initialWidth, height: isClient ? window.innerHeight : initialHeight, }); - + useEffect(() => { const handler = () => { setState({ diff --git a/src/util/createHTMLMediaHook.ts b/src/util/createHTMLMediaHook.ts index 1fbbf7ea..9d80b9e0 100644 --- a/src/util/createHTMLMediaHook.ts +++ b/src/util/createHTMLMediaHook.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import {useEffect, useRef, ReactRef} from '../react'; +import {useEffect, useRef} from 'react'; import useSetState from '../useSetState'; import parseTimeRanges from './parseTimeRanges'; @@ -26,7 +26,7 @@ export interface HTMLMediaControls { } const createHTMLMediaHook = (tag: 'audio' | 'video') => { - const hook = (elOrProps: HTMLMediaProps | React.ReactElement): [React.ReactElement, HTMLMediaState, HTMLMediaControls, ReactRef] => { + const hook = (elOrProps: HTMLMediaProps | React.ReactElement): [React.ReactElement, HTMLMediaState, HTMLMediaControls, {current: HTMLAudioElement | null}] => { let element: React.ReactElement | undefined; let props: HTMLMediaProps;