react-three-renderer
Advanced tools
Comparing version 2.0.0 to 2.0.1
CHANGELOG | ||
=========== | ||
## 2.0.1 ( [see diff](https://github.com/toxicFork/react-three-renderer/compare/v2.0.0...v2.0.1) ) | ||
### Core | ||
- Adds CanvasRenderer fallback when WebGl support is not available #53 | ||
- Fixed crashes that happen when returning null from composite components | ||
- Fixed crashes that happen when replacing composite components | ||
### Testing | ||
- Improved testing: | ||
- made faster and easier to debug | ||
### Documentation | ||
- Moved wiki files into repository to get rid of submodule | ||
## 2.0.0 ( [see diff](https://github.com/toxicFork/react-three-renderer/compare/v0.1.2...v2.0.0) ) | ||
@@ -5,0 +19,0 @@ |
@@ -5,1 +5,3 @@ * [@kgsherman](https://github.com/kgsherman) | ||
* [@robertlong](https://github.com/robertlong) | ||
* [@MoOx](https://github.com/MoOx) | ||
* [@rana3012](https://github.com/rana3012) |
@@ -538,9 +538,11 @@ 'use strict'; | ||
var removedChildMarkup = removedMarkups[childName]; | ||
// handle removal here to allow replacing of components that are expected to be present | ||
// only once in the parent | ||
(0, _invariant2.default)(!!removedMarkups[childName], 'Removed markup map should contain this child'); | ||
(0, _invariant2.default)(!!removedChildMarkup, 'Removed markup map should contain this child'); | ||
delete removedMarkups[childName]; | ||
this._unmountChild(prevChildren[childName], removedMarkups[childName]); | ||
this._unmountChild(prevChild, removedChildMarkup); | ||
} | ||
@@ -559,14 +561,14 @@ | ||
} | ||
} | ||
var removedMarkupNames = Object.keys(removedMarkups); | ||
var removedMarkupNames = Object.keys(removedMarkups); | ||
for (var _i2 = 0; _i2 < removedMarkupNames.length; ++_i2) { | ||
var removedMarkupName = removedMarkupNames[_i2]; | ||
for (var _i2 = 0; _i2 < removedMarkupNames.length; ++_i2) { | ||
var removedMarkupName = removedMarkupNames[_i2]; | ||
this._unmountChild(prevChildren[removedMarkupName], removedMarkups[removedMarkupName]); | ||
} | ||
this._renderedChildren = nextChildren; | ||
this._unmountChild(prevChildren[removedMarkupName], removedMarkups[removedMarkupName]); | ||
} | ||
this._renderedChildren = nextChildren; | ||
this.threeElementDescriptor.completeChildUpdates(this._threeObject); | ||
@@ -604,8 +606,12 @@ } | ||
// eslint-disable-line no-unused-vars | ||
this.threeElementDescriptor.removeChild(this._threeObject, child._threeObject); | ||
if (process.env.NODE_ENV !== 'production') { | ||
(0, _invariant2.default)(!!markup && !!markup.threeObject, 'The child markup to replace has no threeObject'); | ||
} | ||
this.threeElementDescriptor.removeChild(this._threeObject, markup.threeObject); | ||
if (child instanceof InternalComponent) { | ||
child.threeElementDescriptor.removedFromParent(child._threeObject); | ||
child.threeElementDescriptor.removedFromParent(markup.threeObject); | ||
} else if (child instanceof _React3CompositeComponentWrapper2.default) { | ||
child._threeObject.userData.react3internalComponent.threeElementDescriptor.removedFromParent(child._threeObject); | ||
markup.threeObject.userData.react3internalComponent.threeElementDescriptor.removedFromParent(markup.threeObject); | ||
} else { | ||
@@ -624,3 +630,3 @@ if (process.env.NODE_ENV !== 'production') { | ||
if (childMarkup.threeObject === child._threeObject) { | ||
if (childMarkup.threeObject === markup.threeObject) { | ||
childrenMarkup.splice(i, 1); | ||
@@ -627,0 +633,0 @@ |
@@ -152,3 +152,3 @@ 'use strict'; | ||
parentInternalComponent.removeChild(originalInternalComponent, null); | ||
parentInternalComponent.removeChild(originalInternalComponent, oldMarkup); | ||
var nextChild = nextMarkup.threeObject.userData.react3internalComponent; | ||
@@ -155,0 +155,0 @@ nextChild._mountIndex = indexInParent; |
@@ -45,2 +45,6 @@ 'use strict'; | ||
var _isWebglSupported = require('./utils/isWebglSupported'); | ||
var _isWebglSupported2 = _interopRequireDefault(_isWebglSupported); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -164,4 +168,3 @@ | ||
var parameters = this._parameters; | ||
this._renderer = new _three2.default.WebGLRenderer({ | ||
var rendererArgs = { | ||
canvas: this._canvas, | ||
@@ -176,4 +179,6 @@ precision: parameters.precision, | ||
logarithmicDepthBuffer: parameters.logarithmicDepthBuffer | ||
}); | ||
}; | ||
this._renderer = (0, _isWebglSupported2.default)() ? new _three2.default.WebGLRenderer(rendererArgs) : new _three2.default.CanvasRenderer(rendererArgs); | ||
if (this._rendererUpdatedCallback) { | ||
@@ -180,0 +185,0 @@ this._rendererUpdatedCallback(this._renderer); |
@@ -13,6 +13,2 @@ 'use strict'; | ||
var _ReactEmptyComponent = require('react/lib/ReactEmptyComponent'); | ||
var _ReactEmptyComponent2 = _interopRequireDefault(_ReactEmptyComponent); | ||
var _ReactElement = require('react/lib/ReactElement'); | ||
@@ -821,3 +817,3 @@ | ||
* | ||
* @param elementToInstantiate ( aka node ) | ||
* @param element ( from createElement ) | ||
* @returns {*} | ||
@@ -828,12 +824,15 @@ */ | ||
key: 'instantiateReactComponent', | ||
value: function instantiateReactComponent(elementToInstantiate) { | ||
value: function instantiateReactComponent(element) { | ||
var instance = void 0; | ||
var elementToInstantiate = element; | ||
if (elementToInstantiate === null || elementToInstantiate === false) { | ||
instance = _ReactEmptyComponent2.default.create(this.instantiateReactComponent); | ||
} else if ((typeof elementToInstantiate === 'undefined' ? 'undefined' : _typeof(elementToInstantiate)) === 'object') { | ||
var element = elementToInstantiate; | ||
if (!(element && (typeof element.type === 'function' || typeof element.type === 'string'))) { | ||
elementToInstantiate = _ReactElement2.default.createElement('object3D'); | ||
// instance = new ReactDOMEmptyComponent(this.instantiateReactComponent); | ||
} | ||
if ((typeof elementToInstantiate === 'undefined' ? 'undefined' : _typeof(elementToInstantiate)) === 'object') { | ||
if (!(elementToInstantiate && (typeof elementToInstantiate.type === 'function' || typeof elementToInstantiate.type === 'string'))) { | ||
if (process.env.NODE_ENV !== 'production') { | ||
(0, _invariant2.default)(false, 'Element type is invalid: expected a string (for built-in components) ' + 'or a class/function (for composite components) but got: %s.%s', !element.type ? element.type : _typeof(element.type), getDeclarationErrorAddendum(element._owner)); | ||
(0, _invariant2.default)(false, 'Element type is invalid: expected a string (for built-in components) ' + 'or a class/function (for composite components) but got: %s.%s', !elementToInstantiate.type ? elementToInstantiate.type : _typeof(elementToInstantiate.type), getDeclarationErrorAddendum(elementToInstantiate._owner)); | ||
} else { | ||
@@ -845,14 +844,14 @@ (0, _invariant2.default)(false); | ||
// Special case string values | ||
if (typeof element.type === 'string') { | ||
// original: instance = ReactNativeComponent.createInternalComponent(element); | ||
instance = new _InternalComponent2.default(element, this); | ||
} else if (isInternalComponentType(element.type)) { | ||
if (typeof elementToInstantiate.type === 'string') { | ||
// original: instance = ReactNativeComponent.createInternalComponent(elementToInstantiate); | ||
instance = new _InternalComponent2.default(elementToInstantiate, this); | ||
} else if (isInternalComponentType(elementToInstantiate.type)) { | ||
// This is temporarily available for custom components that are not string | ||
// representations. I.e. ART. Once those are updated to use the string | ||
// representation, we can drop this code path. | ||
var Constructor = element.type; | ||
var Constructor = elementToInstantiate.type; | ||
instance = new Constructor(element); | ||
instance = new Constructor(elementToInstantiate); | ||
} else { | ||
instance = new _React3CompositeComponentWrapper2.default(element, this); | ||
instance = new _React3CompositeComponentWrapper2.default(elementToInstantiate, this); | ||
} | ||
@@ -859,0 +858,0 @@ } else if (typeof elementToInstantiate === 'string' || typeof elementToInstantiate === 'number') { |
{ | ||
"name": "react-three-renderer", | ||
"version": "2.0.0", | ||
"version": "2.0.1", | ||
"description": "Render into a three.js canvas using React.", | ||
@@ -5,0 +5,0 @@ "main": "./lib/React3.js", |
@@ -503,9 +503,11 @@ import ReactReconciler from 'react/lib/ReactReconciler'; | ||
const removedChildMarkup = removedMarkups[childName]; | ||
// handle removal here to allow replacing of components that are expected to be present | ||
// only once in the parent | ||
invariant(!!removedMarkups[childName], 'Removed markup map should contain this child'); | ||
invariant(!!removedChildMarkup, 'Removed markup map should contain this child'); | ||
delete removedMarkups[childName]; | ||
this._unmountChild(prevChildren[childName], removedMarkups[childName]); | ||
this._unmountChild(prevChild, removedChildMarkup); | ||
} | ||
@@ -524,14 +526,14 @@ | ||
} | ||
} | ||
const removedMarkupNames = Object.keys(removedMarkups); | ||
const removedMarkupNames = Object.keys(removedMarkups); | ||
for (let i = 0; i < removedMarkupNames.length; ++i) { | ||
const removedMarkupName = removedMarkupNames[i]; | ||
for (let i = 0; i < removedMarkupNames.length; ++i) { | ||
const removedMarkupName = removedMarkupNames[i]; | ||
this._unmountChild(prevChildren[removedMarkupName], removedMarkups[removedMarkupName]); | ||
} | ||
this._renderedChildren = nextChildren; | ||
this._unmountChild(prevChildren[removedMarkupName], removedMarkups[removedMarkupName]); | ||
} | ||
this._renderedChildren = nextChildren; | ||
this.threeElementDescriptor.completeChildUpdates(this._threeObject); | ||
@@ -563,10 +565,14 @@ } | ||
removeChild(child, markup) { // eslint-disable-line no-unused-vars | ||
this.threeElementDescriptor.removeChild(this._threeObject, child._threeObject); | ||
if (process.env.NODE_ENV !== 'production') { | ||
invariant(!!markup && !!markup.threeObject, 'The child markup to replace has no threeObject'); | ||
} | ||
this.threeElementDescriptor.removeChild(this._threeObject, markup.threeObject); | ||
if (child instanceof InternalComponent) { | ||
child.threeElementDescriptor.removedFromParent(child._threeObject); | ||
child.threeElementDescriptor.removedFromParent(markup.threeObject); | ||
} else if (child instanceof React3CompositeComponentWrapper) { | ||
child._threeObject.userData | ||
markup.threeObject.userData | ||
.react3internalComponent | ||
.threeElementDescriptor.removedFromParent(child._threeObject); | ||
.threeElementDescriptor.removedFromParent(markup.threeObject); | ||
} else { | ||
@@ -585,3 +591,3 @@ if (process.env.NODE_ENV !== 'production') { | ||
if (childMarkup.threeObject === child._threeObject) { | ||
if (childMarkup.threeObject === markup.threeObject) { | ||
childrenMarkup.splice(i, 1); | ||
@@ -588,0 +594,0 @@ |
@@ -91,3 +91,3 @@ import ReactCompositeComponent from 'react/lib/ReactCompositeComponent'; | ||
parentInternalComponent.removeChild(originalInternalComponent, null); | ||
parentInternalComponent.removeChild(originalInternalComponent, oldMarkup); | ||
const nextChild = nextMarkup.threeObject.userData.react3internalComponent; | ||
@@ -94,0 +94,0 @@ nextChild._mountIndex = indexInParent; |
@@ -12,2 +12,3 @@ import THREE from 'three'; | ||
import React3Renderer from './React3Renderer'; | ||
import isWebglSupported from './utils/isWebglSupported'; | ||
@@ -122,4 +123,3 @@ const rendererProperties = [ | ||
const parameters = this._parameters; | ||
this._renderer = new THREE.WebGLRenderer({ | ||
const rendererArgs = { | ||
canvas: this._canvas, | ||
@@ -134,4 +134,7 @@ precision: parameters.precision, | ||
logarithmicDepthBuffer: parameters.logarithmicDepthBuffer, | ||
}); | ||
}; | ||
this._renderer = isWebglSupported() ? new THREE.WebGLRenderer(rendererArgs) | ||
: new THREE.CanvasRenderer(rendererArgs); | ||
if (this._rendererUpdatedCallback) { | ||
@@ -138,0 +141,0 @@ this._rendererUpdatedCallback(this._renderer); |
import THREE from 'three'; | ||
import ReactEmptyComponent from 'react/lib/ReactEmptyComponent'; | ||
import reactElementWrapper from 'react/lib/ReactElement'; | ||
@@ -740,13 +739,17 @@ import ReactInstanceMap from 'react/lib/ReactInstanceMap'; | ||
* | ||
* @param elementToInstantiate ( aka node ) | ||
* @param element ( from createElement ) | ||
* @returns {*} | ||
*/ | ||
instantiateReactComponent(elementToInstantiate) { | ||
instantiateReactComponent(element) { | ||
let instance; | ||
let elementToInstantiate = element; | ||
if (elementToInstantiate === null || elementToInstantiate === false) { | ||
instance = ReactEmptyComponent.create(this.instantiateReactComponent); | ||
} else if (typeof elementToInstantiate === 'object') { | ||
const element = elementToInstantiate; | ||
if (!(element && (typeof element.type === 'function' || typeof element.type === 'string'))) { | ||
elementToInstantiate = reactElementWrapper.createElement('object3D'); | ||
// instance = new ReactDOMEmptyComponent(this.instantiateReactComponent); | ||
} | ||
if (typeof elementToInstantiate === 'object') { | ||
if (!(elementToInstantiate && (typeof elementToInstantiate.type === 'function' | ||
|| typeof elementToInstantiate.type === 'string'))) { | ||
if (process.env.NODE_ENV !== 'production') { | ||
@@ -756,4 +759,6 @@ invariant(false, | ||
'or a class/function (for composite components) but got: %s.%s', | ||
(!element.type) ? element.type : typeof element.type, | ||
getDeclarationErrorAddendum(element._owner)); | ||
(!elementToInstantiate.type) ? | ||
elementToInstantiate.type | ||
: typeof elementToInstantiate.type, | ||
getDeclarationErrorAddendum(elementToInstantiate._owner)); | ||
} else { | ||
@@ -765,14 +770,14 @@ invariant(false); | ||
// Special case string values | ||
if (typeof element.type === 'string') { | ||
// original: instance = ReactNativeComponent.createInternalComponent(element); | ||
instance = new InternalComponent(element, this); | ||
} else if (isInternalComponentType(element.type)) { | ||
if (typeof elementToInstantiate.type === 'string') { | ||
// original: instance = ReactNativeComponent.createInternalComponent(elementToInstantiate); | ||
instance = new InternalComponent(elementToInstantiate, this); | ||
} else if (isInternalComponentType(elementToInstantiate.type)) { | ||
// This is temporarily available for custom components that are not string | ||
// representations. I.e. ART. Once those are updated to use the string | ||
// representation, we can drop this code path. | ||
const Constructor = element.type; | ||
const Constructor = elementToInstantiate.type; | ||
instance = new Constructor(element); | ||
instance = new Constructor(elementToInstantiate); | ||
} else { | ||
instance = new React3CompositeComponentWrapper(element, this); | ||
instance = new React3CompositeComponentWrapper(elementToInstantiate, this); | ||
} | ||
@@ -779,0 +784,0 @@ } else if (typeof elementToInstantiate === 'string' |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
823839
232
16748
164