Skip to content

Commit abe9870

Browse files
edwmurphedwmurph
committed
update lint
1 parent 332d5a8 commit abe9870

File tree

8 files changed

+171
-139
lines changed

8 files changed

+171
-139
lines changed

‎.eslintrc

-11
This file was deleted.

‎.eslintrc.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const { peerDependencies } = require('./package.json');
2+
3+
module.exports = {
4+
root: true,
5+
parser: 'babel-eslint',
6+
7+
parserOptions: {
8+
ecmaVersion: 2019,
9+
ecmaFeatures: {
10+
impliedStrict: true
11+
},
12+
},
13+
14+
plugins: [
15+
'prefer-arrow',
16+
],
17+
18+
env: {
19+
node: true,
20+
es6: true,
21+
browser: true,
22+
},
23+
24+
settings: {
25+
react: {
26+
version: 'detect',
27+
},
28+
},
29+
30+
extends: [
31+
'eslint:recommended',
32+
'plugin:react/recommended',
33+
'airbnb-base',
34+
],
35+
36+
rules: {
37+
'import/no-unresolved': ["error", { ignore: Object.keys(peerDependencies) }],
38+
'react/prop-types': [0],
39+
'no-console': [0],
40+
'class-methods-use-this': [0],
41+
'object-curly-spacing': ['error', 'always'],
42+
'no-trailing-spaces': ['error'],
43+
'no-irregular-whitespace': ['error'],
44+
'no-await-in-loop': ['off'],
45+
'object-curly-newline': [0],
46+
semi: [ 'error', 'always' ],
47+
indent: ['error', 2],
48+
'prefer-arrow/prefer-arrow-functions': [
49+
'error',
50+
{
51+
disallowPrototype: true,
52+
singleReturnOnly: false,
53+
classPropertiesAllowed: false,
54+
}
55+
]
56+
},
57+
};

‎package.json

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@edwmurph/threejsr",
3-
"version": "0.0.17",
3+
"version": "0.0.18",
44
"description": "A library for creating threejs components with react",
55
"main": "build/index.js",
66
"scripts": {
@@ -13,22 +13,18 @@
1313
"three": "^0"
1414
},
1515
"dependencies": {
16-
"prop-types": "15.7.2"
1716
},
1817
"devDependencies": {
1918
"@babel/cli": "7.10.4",
2019
"@babel/core": "7.10.4",
2120
"@babel/preset-env": "7.10.4",
2221
"@babel/preset-react": "7.10.4",
2322
"babel-eslint": "10.1.0",
24-
"eslint": "7.4.0",
25-
"eslint-config-standard": "14.1.1",
26-
"eslint-config-standard-react": "9.2.0",
27-
"eslint-plugin-import": "2.22.0",
28-
"eslint-plugin-node": "11.1.0",
29-
"eslint-plugin-promise": "4.2.1",
30-
"eslint-plugin-react": "7.20.3",
31-
"eslint-plugin-standard": "4.0.1"
23+
"eslint": "6.8.0",
24+
"eslint-config-airbnb-base": "14.1.0",
25+
"eslint-plugin-import": "2.20.1",
26+
"eslint-plugin-prefer-arrow": "1.1.7",
27+
"eslint-plugin-react": "7.19.0"
3228
},
3329
"repository": {
3430
"type": "git",

‎src/ThreeJSR.js

+61-61
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,107 @@
1-
import * as THREE from 'three'
2-
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
3-
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
1+
import * as THREE from 'three';
2+
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
3+
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
44
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls';
55
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
66

77
export default class ThreeJSR {
8-
constructor (ref, newFrameHook, opts = {}) {
9-
this.ref = ref
10-
this.newFrameHook = newFrameHook
11-
this.camera = {}
12-
this.passes = opts.passes || []
13-
this.updates = []
14-
this.controls = {}
8+
constructor(ref, newFrameHook, opts = {}) {
9+
this.ref = ref;
10+
this.newFrameHook = newFrameHook;
11+
this.camera = {};
12+
this.passes = opts.passes || [];
13+
this.updates = [];
14+
this.controls = {};
1515
}
1616

17-
afterMount (width, height) {
18-
ThreeJSR.verifyEnv()
17+
afterMount(width, height) {
18+
ThreeJSR.verifyEnv();
1919

20-
this.renderer = new THREE.WebGLRenderer({ antialias: true })
20+
this.renderer = new THREE.WebGLRenderer({ antialias: true });
2121

22-
this.createThreeScene()
22+
this.createThreeScene();
2323

24-
this.onResize(width, height)
25-
this.ref.current.appendChild(this.renderer.domElement)
24+
this.onResize(width, height);
25+
this.ref.current.appendChild(this.renderer.domElement);
2626

27-
this.renderer.render(this.scene, this.camera)
28-
this.renderer.setPixelRatio(window.devicePixelRatio * 1.5)
29-
this.frameId = requestAnimationFrame(this.newFrameHook)
27+
this.renderer.render(this.scene, this.camera);
28+
this.renderer.setPixelRatio(window.devicePixelRatio * 1.5);
29+
this.frameId = requestAnimationFrame(this.newFrameHook);
3030

3131
if (this.passes.length) {
32-
this.composer = new EffectComposer(this.renderer)
32+
this.composer = new EffectComposer(this.renderer);
3333

34-
const renderPass = new RenderPass(this.scene, this.camera)
35-
this.composer.addPass(renderPass)
34+
const renderPass = new RenderPass(this.scene, this.camera);
35+
this.composer.addPass(renderPass);
3636

37-
this.passes.forEach(pass => this.composer.addPass(pass))
37+
this.passes.forEach((pass) => this.composer.addPass(pass));
3838
}
3939
}
4040

41-
renderNextFrame (timestamp) {
41+
renderNextFrame(timestamp) {
4242
if (timestamp) {
43-
this.updates.forEach(update => update())
44-
this.renderer.render(this.scene, this.camera)
45-
this.frameId = requestAnimationFrame(this.newFrameHook)
43+
this.updates.forEach((update) => update());
44+
this.renderer.render(this.scene, this.camera);
45+
this.frameId = requestAnimationFrame(this.newFrameHook);
4646
if (this.composer) {
47-
this.composer.render()
47+
this.composer.render();
4848
}
4949
}
5050
}
5151

52-
addControls () {
53-
const trackball = new TrackballControls(this.camera, this.renderer.domElement)
54-
trackball.rotateSpeed = 1.0
55-
trackball.zoomSpeed = 1.2
56-
trackball.panSpeed = 0.8
57-
trackball.keys = [65, 83, 68]
52+
addControls() {
53+
const trackball = new TrackballControls(this.camera, this.renderer.domElement);
54+
trackball.rotateSpeed = 1.0;
55+
trackball.zoomSpeed = 1.2;
56+
trackball.panSpeed = 0.8;
57+
trackball.keys = [65, 83, 68];
5858

59-
const orbit = new OrbitControls(this.camera, this.renderer.domElement)
59+
const orbit = new OrbitControls(this.camera, this.renderer.domElement);
6060

61-
Object.assign(this.controls, { trackball, orbit })
61+
Object.assign(this.controls, { trackball, orbit });
6262

63-
trackball.update()
64-
orbit.update()
63+
trackball.update();
64+
orbit.update();
6565

6666
this.updates.push(
6767
() => trackball.update(),
68-
() => orbit.update()
69-
)
68+
() => orbit.update(),
69+
);
7070
}
7171

72-
cleanup () {
72+
cleanup() {
7373
if (this.frameId) {
74-
cancelAnimationFrame(this.frameId)
74+
cancelAnimationFrame(this.frameId);
7575
}
7676
}
7777

78-
createThreeScene () {
79-
throw new Error('must implement createThreeScene()')
78+
createThreeScene() {
79+
throw new Error('must implement createThreeScene()');
8080
}
8181

82-
onResize (width, height) {
83-
if (!width || !height) return
84-
const heightChanged = Math.abs(this.height - height) > 20
85-
const widthChanged = Math.abs(this.width - width) > 20
86-
if (!heightChanged && !widthChanged && this.width && this.height) return
87-
88-
this.width = width
89-
this.height = Math.max(height, 200)
90-
this.camera.aspect = this.width / this.height
91-
this.camera.updateProjectionMatrix()
92-
this.renderer.setSize(this.width, this.height)
82+
onResize(width, height) {
83+
if (!width || !height) return;
84+
const heightChanged = Math.abs(this.height - height) > 20;
85+
const widthChanged = Math.abs(this.width - width) > 20;
86+
if (!heightChanged && !widthChanged && this.width && this.height) return;
87+
88+
this.width = width;
89+
this.height = Math.max(height, 200);
90+
this.camera.aspect = this.width / this.height;
91+
this.camera.updateProjectionMatrix();
92+
this.renderer.setSize(this.width, this.height);
9393
}
9494

95-
static verifyEnv () {
95+
static verifyEnv() {
9696
try {
97-
const canvas = document.createElement('canvas')
98-
const meetsRequirements = !!(window.WebGLRenderingContext &&
99-
(canvas.getContext('webgl') || canvas.getContext('experimental-webgl')))
97+
const canvas = document.createElement('canvas');
98+
const meetsRequirements = !!(window.WebGLRenderingContext
99+
&& (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
100100
if (!meetsRequirements) {
101-
throw new Error()
101+
throw new Error();
102102
}
103103
} catch (e) {
104-
throw new Error('WebGL is not available')
104+
throw new Error('WebGL is not available');
105105
}
106106
}
107107
}

‎src/components/ErrorBoundary.js

+12-13
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,31 @@
1-
import React from 'react'
1+
import React from 'react';
22

33
class ErrorBoundary extends React.Component {
4-
constructor (props) {
5-
super(props)
6-
this.state = { error: false }
4+
constructor(props) {
5+
super(props);
6+
this.state = { error: false };
77
}
88

9-
static getDerivedStateFromError (error) {
9+
static getDerivedStateFromError(error) {
1010
// Update state so the next render will show the fallback UI.
11-
return { error }
11+
return { error };
1212
}
1313

14-
componentDidCatch (error) {
15-
// You can also log the error to an error reporting service
16-
console.error('ErrorBoundary: ', error)
14+
componentDidCatch(error) {
15+
console.error('ErrorBoundary: ', error);
1716
}
1817

19-
render () {
18+
render() {
2019
if (this.state.error) {
2120
return (
2221
<div className='errorMsg'>
2322
<h2>{this.state.error.message}</h2>
2423
</div>
25-
)
24+
);
2625
}
2726

28-
return this.props.children
27+
return this.props.children;
2928
}
3029
}
3130

32-
export default ErrorBoundary
31+
export default ErrorBoundary;

‎src/components/ThreeJSRComponent.js

+22-33
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,36 @@
1-
import React, { useRef, useLayoutEffect, useState } from 'react'
2-
import PropTypes from 'prop-types'
3-
import ThreeJSR from '../ThreeJSR'
1+
import React, { useRef, useLayoutEffect, useState } from 'react';
42

5-
function ThreeJSRComponent (props) {
6-
const ref = useRef()
3+
const ThreeJSRComponent = (props) => {
4+
const ref = useRef();
75

8-
const [{ width, height }, setDims] = useState({})
9-
const [timestamp, setTimestamp] = useState()
6+
const [{ width, height }, setDims] = useState({});
7+
const [timestamp, setTimestamp] = useState();
108

11-
const [threejs] = useState(() => new props.ThreeJSR(ref, setTimestamp))
9+
const [threejs] = useState(() => new props.ThreeJSR(ref, setTimestamp));
1210

1311
useLayoutEffect(() => {
14-
threejs.afterMount(width, height)
15-
const dims = ref.current.getBoundingClientRect()
16-
setDims({ width: dims.width, height: dims.height })
17-
return () => threejs.cleanup()
18-
}, [])
12+
threejs.afterMount(width, height);
13+
const dims = ref.current.getBoundingClientRect();
14+
setDims({ width: dims.width, height: dims.height });
15+
return () => threejs.cleanup();
16+
}, []);
1917

2018
// sync threejs render to dimensions provided by parent
2119
useLayoutEffect(() => {
22-
threejs.onResize(width, height)
23-
}, [width, height])
20+
threejs.onResize(width, height);
21+
}, [width, height]);
2422

2523
// animation loop
2624
useLayoutEffect(() => {
27-
const renderLoopData = { ...(props.renderLoopData || {}), timestamp }
28-
threejs.renderNextFrame(renderLoopData)
29-
const dims = ref.current.getBoundingClientRect()
30-
setDims({ width: dims.width, height: dims.height })
31-
}, [props.renderLoopData, timestamp])
25+
const renderLoopData = { ...(props.renderLoopData || {}), timestamp };
26+
threejs.renderNextFrame(renderLoopData);
27+
const dims = ref.current.getBoundingClientRect();
28+
setDims({ width: dims.width, height: dims.height });
29+
}, [props.renderLoopData, timestamp]);
3230

3331
return (
3432
<div style={{ width: '100%', height: '100%', ...props.style }} ref={ref} />
35-
)
36-
}
37-
38-
ThreeJSRComponent.propTypes = {
39-
ThreeJSR: (props, propName) => {
40-
if (!(props[propName].prototype instanceof ThreeJSR)) {
41-
return new Error('ThreeJSR prop should be an instance of ThreeJSR')
42-
}
43-
},
44-
style: PropTypes.object
45-
}
46-
47-
export default ThreeJSRComponent
33+
);
34+
};
35+
36+
export default ThreeJSRComponent;

0 commit comments

Comments
 (0)