threejsr rename and significant refactor

Author: edwmurph

.babelrc

@@ -1,12 +1,6 @@
 {
-    "presets": [
-      [
-        "env",
-      {
-        "modules": false
-      }
-   ],
-      "react",
-      "stage-0"
-    ]
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
 }

.eslintrc.js

@@ -29,7 +29,6 @@ module.exports = {
     'react/jsx-uses-react': 'error',
     'react/jsx-uses-vars': 'error',
   },
-  parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 8, // optional, recommended 6+
   },

README.md

@@ -1 +1,75 @@
-# threejs-react-redux
+# ThreeJSR
+
+A library for building [Three.js](https://threejs.org/) projects using React and Redux.
+
+See example usage: https://github.com/edwmurph/threejs
+
+# Installation
+
+```
+npm i git+ssh://[email protected]:edwmurph/threeJSR.git
+```
+
+# Usage
+
+1. Add ThreeJSR `timestamp` reducer to your root reducers:
+```
+// src/reducers/index.js
+import { combineReducers } from 'redux'
+import { timestamp } from 'threeJSR'
+
+export default combineReducers({
+  timestamp
+  ...
+})
+```
+
+2. Extend ThreeJSR to build your own threejs scene:
+```
+// src/threejs/sphere.js
+import * as THREE from 'three'
+import { ThreeJSR } from 'threeJSR'
+
+export default class Sphere extends ThreeJSR {
+  renderNextFrame({ timestamp }) {
+    this.mesh.rotation.x += 0.001
+    this.mesh.rotation.y += 0.001
+
+    return super.renderNextFrame(timestamp)
+  }
+
+  createThreeScene() {
+    this.scene = new THREE.Scene()
+
+    this.camera = new THREE.PerspectiveCamera(75, 0, 0.1, 1000)
+    this.camera.position.z = 100
+
+    const geometry = new THREE.SphereGeometry(40, 50, 30)
+    const material = new THREE.MeshLambertMaterial({ color: 0xffffff, wireframe: true })
+
+    this.mesh = new THREE.Mesh(geometry, material)
+    this.scene.add(this.mesh)
+
+    const spotLight = new THREE.SpotLight(0xffffff)
+    spotLight.position.set(100, 10, 100)
+
+    this.scene.add(spotLight)
+  }
+}
+```
+
+3. Add SafeThreeJSRComponent to one of your components:
+```
+// src/components/App.js
+import React from 'react'
+import Sphere from '../threejs/sphere'
+import { SafeThreeJSRComponent } from 'threeJSR'
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <SafeThreeJSRComponent ThreeJSR={Sphere} />
+    )
+  }
+}
+```

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "trr",
+  "name": "threeJSR",
   "version": "1.0.0",
-  "description": "A library for creating safe threejs components",
+  "description": "A library for creating threejs components with react + redux",
   "main": "build/index.js",
   "scripts": {
     "build": "babel src -d build",
@@ -14,25 +14,21 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edwmurph/trr.git"
+    "url": "git+https://github.com/edwmurph/threeJSR.git"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "babel-cli": "6.26.0",
-    "babel-preset-env": "1.7.0",
-    "babel-preset-react": "6.24.1",
-    "babel-preset-stage-0": "6.24.1",
+    "@babel/cli": "7.2.3",
+    "@babel/core": "7.3.4",
+    "@babel/preset-env": "7.3.4",
+    "@babel/preset-react": "7.0.0",
     "eslint": "5.15.2",
     "eslint-config-standard": "12.0.0",
     "eslint-plugin-import": "2.16.0",
     "eslint-plugin-node": "8.0.1",
     "eslint-plugin-promise": "4.0.1",
     "eslint-plugin-react": "7.12.4",
-    "eslint-plugin-standard": "4.0.0",
-    "react": "16.8.4",
-    "react-redux": "6.0.1",
-    "redux": "4.0.1",
-    "three": "0.102.1"
+    "eslint-plugin-standard": "4.0.0"
   }
 }

src/SafeThreeJS.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three'
 
-export default class ThreeJS {
+export default class ThreeJSR {
   constructor(ref, newFrameHook) {
     this.ref = ref
     this.newFrameHook = newFrameHook
@@ -9,7 +9,7 @@ export default class ThreeJS {
 
   // USAGE: call inside componentDidMount()
   afterMount() {
-    ThreeJS.verifyEnv()
+    ThreeJSR.verifyEnv()
     window.addEventListener('resize', this.onResize.bind(this))
 
     this.createThreeScene()
@@ -39,7 +39,7 @@ export default class ThreeJS {
   }
 
   createThreeScene() {
-    throw new Error('must implement ThreeJS.createThreeScene()')
+    throw new Error('must implement createThreeScene()')
   }
 
   onResize() {
@@ -59,7 +59,7 @@ export default class ThreeJS {
         throw new Error()
       }
     } catch (e) {
-      throw new Error('WebGL is not available on your system')
+      throw new Error('WebGL is not available on your browser')
     }
   }
 }

src/ThreeJS.js renamed to src/ThreeJSR.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import ThreeJSRComponent from './ThreeJSRComponent'
+import ErrorBoundary from './ErrorBoundary'
+
+export default class SafeThreeJSRComponent extends React.Component {
+  render() {
+    return (
+      <ErrorBoundary>
+        <ThreeJSRComponent
+          ThreeJSR={this.props.ThreeJSR}
+          events={this.props.events}
+        />
+      </ErrorBoundary>
+    )
+  }
+}

src/TodaysDate.js

@@ -1,14 +1,24 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
-class Component extends React.Component {
+class ThreeJSRComponent extends React.Component {
   constructor(props) {
     super(props)
     this.ref = React.createRef()
-    this.threejs = new this.props.ThreeJS(
+    this.threejs = new this.props.ThreeJSR(
       this.ref,
       timestamp => this.props.update({ timestamp }),
     )
+
+    this.events = {}
+    for (let key in this.props.events || {}) {
+      this.events[key] = function(e) {
+        return this.props.threeJSR(
+          this.props.events[key](e)
+        )
+      }
+      this.events[key] = this.events[key].bind(this)
+    }
   }
 
   componentDidMount() {
@@ -25,15 +35,15 @@ class Component extends React.Component {
 
   render() {
     return (
-      <div ref={this.ref} onMouseDown={this.props.mouseDown} />
+      <div ref={this.ref} {...this.events} />
     )
   }
 }
 
 function mapStateToProps(state) {
   return {
     timestamp: state.timestamp,
-    mouse: state.mouse,
+    threejsr: state.threejsr,
   }
 }
 
@@ -43,14 +53,11 @@ function mapDispatchToProps(dispatch) {
       type: 'TIMESTAMP',
       timestamp,
     }),
-    mouseDown: e => dispatch({
-      type: 'MOUSE_DOWN',
-      mouse: {
-        x: e.screenX,
-        y: e.screenY,
-      },
-    }),
+    threeJSR: e => dispatch({
+      type: 'THREEJSR',
+      e
+    })
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Component)
+export default connect(mapStateToProps, mapDispatchToProps)(ThreeJSRComponent)

src/ErrorBoundary.js renamed to src/components/ErrorBoundary.js

@@ -1,7 +1,9 @@
-import SafeThreeJS from './SafeThreeJS'
-import ThreeJS from './ThreeJS'
+import SafeThreeJSRComponent from './components/SafeThreeJSRComponent'
+import ThreeJSR from './ThreeJSR'
+import reducer from './reducers/index'
 
-export default {
-  SafeThreeJS,
-  ThreeJS
+export {
+  SafeThreeJSRComponent,
+  ThreeJSR,
+  reducer
 }

src/components/SafeThreeJSRComponent.js

@@ -0,0 +1,10 @@
+export default function threejsr (previousState, action) {
+  switch (action.type) {
+  case 'TIMESTAMP':
+    return { timestamp: action.timestamp }
+  case 'THREEJSR':
+    return Object.assign({}, action.e)
+  default:
+    return {}
+  }
+}