Skip to content

Commit ab914cd

Browse files
cdoublevcdoublev
committed
fix(*) Use automatic JSX runtime
1 parent 7e20914 commit ab914cd

18 files changed

Lines changed: 95 additions & 93 deletions

‎.eslintrc.cjs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,7 @@ module.exports = {
3030
},
3131
],
3232
parser: '@babel/eslint-parser',
33+
rules: {
34+
"react/react-in-jsx-scope": "off",
35+
},
3336
}

‎__tests__/hooks/useIntersectionObserver.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
import { render, unmountComponentAtNode } from 'react-dom'
3+
import { useEffect, useRef } from 'react'
34
import useIntersectionObserver, { ExtendedIntersectionObserver, observers } from '../../src/hooks/useIntersectionObserver'
4-
import React from 'react'
55
import { act } from 'react-dom/test-utils'
66

77
let container
@@ -44,7 +44,7 @@ const cases = [
4444

4545
const [setRoot, setTarget] = useIntersectionObserver(config)
4646

47-
React.useEffect(
47+
useEffect(
4848
() => {
4949
setRoot(document.getElementById('root'))
5050
return () => setRoot(null)
@@ -59,9 +59,9 @@ const cases = [
5959
['set targets in useEffect()', ({ config, targets }) => {
6060

6161
const [root, setTarget] = useIntersectionObserver(config)
62-
const prevTargets = React.useRef([])
62+
const prevTargets = useRef([])
6363

64-
React.useEffect(
64+
useEffect(
6565
() => {
6666
targets.forEach(id => {
6767
if (!prevTargets.current.includes(id)) {
@@ -82,9 +82,9 @@ const cases = [
8282
['set root and targets in useEffect()', ({ config, targets }) => {
8383

8484
const [setRoot, setTarget] = useIntersectionObserver(config)
85-
const prevTargets = React.useRef([])
85+
const prevTargets = useRef([])
8686

87-
React.useEffect(
87+
useEffect(
8888
() => {
8989
prevTargets.current = prevTargets.current.filter(id =>
9090
targets.includes(id) || setTarget(id)(null))
@@ -97,7 +97,7 @@ const cases = [
9797
},
9898
[prevTargets, setTarget, targets])
9999

100-
React.useEffect(
100+
useEffect(
101101
() => {
102102
setRoot(document.getElementById('root'))
103103
return () => {
@@ -115,7 +115,7 @@ const cases = [
115115

116116
const [setRoot, setTarget] = useIntersectionObserver(config)
117117

118-
React.useEffect(() => {
118+
useEffect(() => {
119119
setRoot()
120120
return () => setRoot(null)
121121
}, [setRoot])
@@ -126,7 +126,7 @@ const cases = [
126126

127127
const [setRoot, setTarget] = useIntersectionObserver(config)
128128

129-
React.useEffect(() => {
129+
useEffect(() => {
130130
setRoot(document)
131131
return () => setRoot(null)
132132
}, [setRoot])

‎__tests__/hooks/useSVGMousePosition.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
import { render, unmountComponentAtNode } from 'react-dom'
3-
import React from 'react'
3+
import { useEffect, useState } from 'react'
44
import { act } from 'react-dom/test-utils'
55
import useSVGMousePosition from '../../src/hooks/useSVGMousePosition'
66

@@ -64,7 +64,7 @@ const cases = [
6464

6565
const [position, setTarget] = useSVGMousePosition({ precision })
6666

67-
React.useEffect(() => {
67+
useEffect(() => {
6868
setTarget(document.getElementById('root'))
6969
// Reproduce the behavior of an updated callback ref (see memo above)
7070
return () => setTarget(null)
@@ -80,7 +80,7 @@ const cases = [
8080
const [position, setTarget, root] = useSVGMousePosition({ hasRoot: true, precision })
8181

8282
// `setTarget` doesn't have to be re-initialized (see memo avove: `root` already handles it)
83-
React.useEffect(() => setTarget(document.getElementById('target')), [setTarget])
83+
useEffect(() => setTarget(document.getElementById('target')), [setTarget])
8484

8585
return (
8686
<div id='root' ref={root}>
@@ -94,7 +94,7 @@ const cases = [
9494
const [position, target, setRoot] = useSVGMousePosition({ hasRoot: true, precision })
9595

9696
// `setRoot` doesn't have to be re-initialized (see memo avove: `target` already handles it)
97-
React.useEffect(() => setRoot(document.getElementById('root')), [setRoot])
97+
useEffect(() => setRoot(document.getElementById('root')), [setRoot])
9898

9999
return (
100100
<div id='root'>
@@ -119,7 +119,7 @@ const cases = [
119119

120120
const [position, setTarget, setRoot] = useSVGMousePosition({ precision })
121121

122-
React.useEffect(
122+
useEffect(
123123
() => {
124124
setRoot(document.getElementById('root'))
125125
setTarget(document.getElementById('target'))
@@ -141,7 +141,7 @@ const cases = [
141141

142142
const [position, setTarget, setRoot] = useSVGMousePosition({ hasRoot: true, precision })
143143

144-
React.useEffect(
144+
useEffect(
145145
() => {
146146
setTarget(document.getElementById('target'))
147147
setRoot(document.getElementById('root'))
@@ -162,15 +162,15 @@ const cases = [
162162
['set target on consecutive updates in useEffect()', ({ precision }) => {
163163

164164
const [position, setTarget, root] = useSVGMousePosition({ hasRoot: true, precision })
165-
const [forcedUpdate, forceUpdate] = React.useState(true)
165+
const [forcedUpdate, forceUpdate] = useState(true)
166166

167-
React.useEffect(
167+
useEffect(
168168
() => {
169169
setTarget(document.getElementById('target'))
170170
// `setTarget` doesn't have to be re-initialized (see memo avove: `root` already handles it)
171171
},
172172
[forcedUpdate, setTarget])
173-
React.useEffect(forceUpdate, [forceUpdate])
173+
useEffect(forceUpdate, [forceUpdate])
174174

175175
return (
176176
<div id='root' ref={root}>

‎__tests__/hooks/useScrollIntoView.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
import { render, unmountComponentAtNode } from 'react-dom'
3+
import { useEffect, useRef } from 'react'
34
import useScrollIntoView, { TOUCH_BUTTON_ID, TOUCH_SENSITIVITY, WHEEL_BUTTON_ID } from '../../src/hooks/useScrollIntoView'
4-
import React from 'react'
55
import { act } from 'react-dom/test-utils'
66
import { observers } from '../../src/hooks/useIntersectionObserver'
77

@@ -100,7 +100,7 @@ const cases = [
100100

101101
const [setRoot, setTarget] = useScrollIntoView(config)
102102

103-
React.useEffect(
103+
useEffect(
104104
() => {
105105
setRoot(document.getElementById('root'))
106106
return () => setRoot(null)
@@ -115,9 +115,9 @@ const cases = [
115115
['set targets in useEffect()', ({ config, targets }) => {
116116

117117
const [root, setTarget] = useScrollIntoView(config)
118-
const prevTargets = React.useRef([])
118+
const prevTargets = useRef([])
119119

120-
React.useEffect(
120+
useEffect(
121121
() => {
122122
targets.forEach(id => {
123123
if (!prevTargets.current.includes(id)) {
@@ -138,9 +138,9 @@ const cases = [
138138
['set root and targets in useEffect()', ({ config, targets }) => {
139139

140140
const [setRoot, setTarget] = useScrollIntoView(config)
141-
const prevTargets = React.useRef([])
141+
const prevTargets = useRef([])
142142

143-
React.useEffect(
143+
useEffect(
144144
() => {
145145
targets.forEach(id => {
146146
if (!prevTargets.current.includes(id)) {
@@ -153,7 +153,7 @@ const cases = [
153153
},
154154
[prevTargets, setTarget, targets])
155155

156-
React.useEffect(
156+
useEffect(
157157
() => {
158158

159159
setRoot(document.getElementById('root'))
@@ -173,7 +173,7 @@ const cases = [
173173

174174
const [setRoot, setTarget] = useScrollIntoView(config)
175175

176-
React.useEffect(() => {
176+
useEffect(() => {
177177
setRoot()
178178
return () => setRoot(null)
179179
}, [setRoot])
@@ -184,7 +184,7 @@ const cases = [
184184

185185
const [setRoot, setTarget] = useScrollIntoView(config)
186186

187-
React.useEffect(() => {
187+
useEffect(() => {
188188
setRoot(document)
189189
return () => setRoot(null)
190190
}, [setRoot])

‎babel.config.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ module.exports = {
33
exclude: /node_modules/,
44
presets: [
55
['@babel/preset-env', { targets: { node: 'current' } }],
6-
['@babel/preset-react'],
6+
['@babel/preset-react', { runtime: 'automatic' }],
77
],
88
}

‎src/components/svg-filters.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11

22
import PropTypes from 'prop-types'
3-
import React from 'react'
43

54
const NumberOrString = PropTypes.oneOfType([PropTypes.string, PropTypes.number])
65

‎src/hooks/useAnimate.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import React from 'react'
2+
import { useCallback, useEffect, useRef } from 'react'
33

44
/**
55
* useAnimate :: Ref -> (Keyframes -> Options) -> Animate
@@ -9,16 +9,16 @@ import React from 'react'
99
*/
1010
const useAnimate = ref => {
1111

12-
const animation = React.useRef()
13-
const animate = React.useCallback(
12+
const animation = useRef()
13+
const animate = useCallback(
1414
(keyframes, options) => {
1515
if (ref.current) {
1616
return animation.current = ref.current.animate(keyframes, options)
1717
}
1818
},
1919
[ref])
2020

21-
React.useEffect(() => () => {
21+
useEffect(() => () => {
2222
if (animation.current?.playState === 'running') {
2323
animation.current.cancel()
2424
}

‎src/hooks/useAnimateCustom.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import React from 'react'
2+
import { useCallback, useEffect, useRef } from 'react'
33
import animate from '@cdoublev/animate'
44

55
/**
@@ -10,16 +10,16 @@ import animate from '@cdoublev/animate'
1010
*/
1111
const useAnimateCustom = ref => {
1212

13-
const animation = React.useRef()
14-
const customAnimate = React.useCallback(
13+
const animation = useRef()
14+
const customAnimate = useCallback(
1515
(keyframes, options) => {
1616
if (ref.current) {
1717
return animation.current = animate(ref.current, keyframes, options)
1818
}
1919
},
2020
[ref])
2121

22-
React.useEffect(() => () => {
22+
useEffect(() => () => {
2323
if (animation.current?.playState === 'running') {
2424
animation.current.cancel()
2525
}

‎src/hooks/useGatherMemo.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11

2-
import React from 'react'
2+
import { useMemo, useRef } from 'react'
33
import shallowEqual from '../lib/shallowEqual'
44

55
/**
66
* useGatherMemo :: (Object -> ...String|Symbol) -> [a, Object]
77
*/
88
const useGatherMemo = (object, ...props) => {
99

10-
const ref = React.useRef(object)
11-
const rest = React.useRef({})
10+
const ref = useRef(object)
11+
const rest = useRef({})
1212

1313
if (!shallowEqual(ref.current, object)) {
1414
ref.current = object
1515
rest.current = {}
1616
}
1717

18-
return React.useMemo(
18+
return useMemo(
1919
() => Object.keys(ref.current).reduce(
2020
(gather, key) => {
2121
if (props.includes(key)) return gather

‎src/hooks/useIntersectionObserver.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

2+
import { useCallback, useRef } from 'react'
23
import IntersectionObserver from '../lib/intersectionObserver'
3-
import React from 'react'
44
import log from '../lib/log'
55
import memoize from '../lib/memoize'
66
import noop from '../lib/noop'
@@ -161,10 +161,10 @@ const useIntersectionObserver = ({
161161

162162
DEBUG = debug
163163

164-
const observer = React.useRef()
165-
const root = React.useRef()
166-
const targets = React.useRef([])
167-
const setRoot = React.useCallback(
164+
const observer = useRef()
165+
const root = useRef()
166+
const targets = useRef([])
167+
const setRoot = useCallback(
168168
node => {
169169

170170
const options = { root: root.current, rootMargin, threshold }
@@ -195,7 +195,7 @@ const useIntersectionObserver = ({
195195
},
196196
[observer, onEnter, onExit, root, rootMargin, targets, threshold])
197197
/* eslint-disable react-hooks/exhaustive-deps */
198-
const setTarget = React.useCallback(
198+
const setTarget = useCallback(
199199
memoize(id => node => {
200200
if (node === null) {
201201
targets.current = targets.current.filter(([node, nodeId]) => {

0 commit comments

Comments
 (0)