Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-three-renderer

Package Overview
Dependencies
Maintainers
1
Versions
46
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-three-renderer - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

lib/utils/isWebglSupported.js

14

CHANGELOG.md
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 @@

2

CONTRIBUTORS.md

@@ -5,1 +5,3 @@ * [@kgsherman](https://github.com/kgsherman)

* [@robertlong](https://github.com/robertlong)
* [@MoOx](https://github.com/MoOx)
* [@rana3012](https://github.com/rana3012)

32

lib/InternalComponent.js

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc