Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Fix] Migrate to ES6 classes #334

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

paxorus
Copy link

@paxorus paxorus commented Aug 1, 2022

Problem

Issue: #329

Users are hitting the fatal error Uncaught TypeError: class constructors must be invoked with 'new' when trying to create Physijs Scene with recent versions of Three.js. This is due to the outdated inheritance method used by THREE.Scene.call( this, params ).

Solution

Update to ES6 classes, everywhere. Also, convert Eventable to be a mix-in. This should make Physi.js basically compatible with the current version of Three.js (r143). This is a giant diff, converting all classes to ES6 at once, because of compatibility issues between ES6 classes (prototype read-only) and the old inheritance method (modifies prototype).

Please review the file side-by-side with the current physi.js, locally in two editor windows, as the Git diff computed very poorly, despite there being no changes to business logic. The number of lines changed is in the dozens, not 1,000.

Testing

Ran my personal project (https://github.com/paxorus/physi-creator) which uses Scene and several Mesh types with this version of the code. The error was gone.

@@ -5,7 +5,6 @@ window.Physijs = (function() {
_is_simulating = false,
_Physijs = Physijs, // used for noConflict method
Physijs = {}, // object assigned to window.Physijs
Eventable, // class to provide simple event methods
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed this so I could declare it as const below. Happy to undo this.

Eventable.prototype.addEventListener = function( event_name, callback ) {
if ( !this._eventListeners.hasOwnProperty( event_name ) ) {
this._eventListeners[event_name] = [];
const Eventable = (superclass) => class extends superclass {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Following this mix-in style: https://stackoverflow.com/questions/29879267/es6-class-multiple-inheritance

So that we can use this syntax: class Scene extends Eventable(THREE.Scene)

@paxorus paxorus changed the title Migrate to ES6 classes [Bug Fix] Migrate to ES6 classes Aug 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant