Rollup: Added bubleCleanup. by mrdoob · Pull Request #19934 · mrdoob/three.js

mrdoob · 2020-07-27T09:05:38Z

Ended up adding another transform function to clean up's buble output.

Before:

var BoxGeometry = /*@__PURE__*/(function (Geometry) {
	function BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments ) {

		Geometry.call(this);

		this.type = 'BoxGeometry';

		this.parameters = {
			width: width,
			height: height,
			depth: depth,
			widthSegments: widthSegments,
			heightSegments: heightSegments,
			depthSegments: depthSegments
		};

		this.fromBufferGeometry( new BoxBufferGeometry( width, height, depth, widthSegments, heightSegments, depthSegments ) );
		this.mergeVertices();

	}

	if ( Geometry ) BoxGeometry.__proto__ = Geometry;
	BoxGeometry.prototype = Object.create( Geometry && Geometry.prototype );
	BoxGeometry.prototype.constructor = BoxGeometry;

	return BoxGeometry;
}(Geometry));

After:

function BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments ) {

	Geometry.call(this);

	this.type = 'BoxGeometry';

	this.parameters = {
		width: width,
		height: height,
		depth: depth,
		widthSegments: widthSegments,
		heightSegments: heightSegments,
		depthSegments: depthSegments
	};

	this.fromBufferGeometry( new BoxBufferGeometry( width, height, depth, widthSegments, heightSegments, depthSegments ) );
	this.mergeVertices();

}

BoxGeometry.prototype = Object.create( Geometry.prototype );
BoxGeometry.prototype.constructor = BoxGeometry;

mrdoob · 2020-07-27T09:17:30Z

@Mugen87 I think we should be able to proceed converting src to ES6 classes?

Mugen87 · 2020-07-27T09:24:57Z

Basically yes. However, the problem is that certain examples in the js directory can't be converted to classes although it would be necessary. E.g. all loaders would have to be classes when THREE.Loader becomes a class (since the jsm modules are build from js). Same for everything that inherits from Object3D, BufferGeometry and so on. Hence, the last time this topic was discussed it was suggested to wait with the class transition until examples/js is gone (end of the year).

mrdoob · 2020-07-27T09:30:16Z

I see. But we should be able to do some folders? src/math, src/geometries, ...?

Mugen87 · 2020-07-27T09:34:13Z

src/math should be safe since nothings inherits from it. src/geometries has some derivatives in examples/js though (e.g. in ParametricGeometries).

Mugen87 · 2020-07-27T09:35:51Z

Wait not true. GLTFLoader creates a custom interpolant from THREE.Interpolant. So even src/math can't be completely done.

mrdoob · 2020-07-27T09:37:48Z

How about converting as many files as we can and add a comment at the top of the ones that we can't with the reason?

Mugen87 · 2020-07-27T09:41:41Z

That's of course an option. I just wonder if we should focus ES6 module migration now if we can't complete it anyway. At the end of the year, it can be done in one go.

May I ask why you want to move forward with it now? 😇

mrdoob · 2020-07-27T09:46:07Z

Tree-shaking.

mrdoob · 2020-07-27T09:48:40Z

I did not want to move forward before because the output of buble was adding an uneeded extra function to every class in three.js and three.min.js. Now that the output it's cleaner I feel better about it.

mrdoob · 2020-07-27T09:51:58Z

Basically yes. However, the problem is that certain examples in the js directory can't be converted to classes although it would be necessary. E.g. all loaders would have to be classes when THREE.Loader becomes a class (since the jsm modules are build from js). Same for everything that inherits from Object3D, BufferGeometry and so on. Hence, the last time this topic was discussed it was suggested to wait with the class transition until examples/js is gone (end of the year).

I think I'll have to give it a go, because I don't understand where the problem is coming from. And if there is a problem that the only solution is to wait until the end of the year.

Mugen87 · 2020-07-27T09:53:52Z

see #17425 (comment)

Mugen87 · 2020-07-27T09:55:41Z

However, if you want to improve Tree-shaking capability now, it's of course okay to migrate what's possible.

DefinitelyMaybe · 2020-07-28T05:23:49Z

@mrdoob previously I parsed through src/ and examples/ and made a list of the different file dependencies (comment)

I did not want to move forward before because the output of buble was adding an uneeded extra function to every class in three.js and three.min.js. Now that the output it's cleaner I feel better about it.

Ah, makes sense, wish I had of asked about the why earlier and then I could've had a look into that myself

mrdoob · 2020-07-28T06:25:38Z

@DefinitelyMaybe Very useful! Although, rather than "used in examples", what we want to know is "extended in examples", no?

DefinitelyMaybe · 2020-07-28T08:53:34Z

ah, true. Though not bad as some cautionary first steps? I can refine it later based on whats been done.

I've also noted this conversation within the #11552 as the folks over there will like the news.

ianpurvis · 2020-07-31T22:27:29Z

@mrdoob @DefinitelyMaybe I think I've found an issue where end1 is not matching and results in breakage like this:

[ROLLUP] bundles src/Three.js → build/three.js...
[ROLLUP] (!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
[ROLLUP] src/audio/AudioListener.js: (137:1)
[ROLLUP] [!] Error: 'return' outside of function
[ROLLUP] src/audio/AudioListener.js (137:1)
[ROLLUP] 135:   };
[ROLLUP] 136: 
[ROLLUP] 137:   return AudioListener;
[ROLLUP]        ^
[ROLLUP] 138: }(Object3D));
[ROLLUP] Error: 'return' outside of function

This was while converting src/audio/AudioListener.js to an ES6 class for #11552. I dumped the transform before/after.

Before:

import { Vector3 } from '../math/Vector3.js';
import { Quaternion } from '../math/Quaternion.js';
import { Clock } from '../core/Clock.js';
import { Object3D } from '../core/Object3D.js';
import { AudioContext } from './AudioContext.js';

var _position = new Vector3();
var _quaternion = new Quaternion();
var _scale = new Vector3();
var _orientation = new Vector3();

var AudioListener = /*@__PURE__*/(function (Object3D) {
	function AudioListener() {

		Object3D.call(this);

		this.type = 'AudioListener';

		this.context = AudioContext.getContext();

		this.gain = this.context.createGain();
		this.gain.connect( this.context.destination );

		this.filter = null;

		this.timeDelta = 0;

		// private

		this._clock = new Clock();

	}

	if ( Object3D ) AudioListener.__proto__ = Object3D;
	AudioListener.prototype = Object.create( Object3D && Object3D.prototype );
	AudioListener.prototype.constructor = AudioListener;

	AudioListener.prototype.getInput = function getInput () {

		return this.gain;

	};

	AudioListener.prototype.removeFilter = function removeFilter () {

		if ( this.filter !== null ) {

			this.gain.disconnect( this.filter );
			this.filter.disconnect( this.context.destination );
			this.gain.connect( this.context.destination );
			this.filter = null;

		}

		return this;

	};

	AudioListener.prototype.getFilter = function getFilter () {

		return this.filter;

	};

	AudioListener.prototype.setFilter = function setFilter ( value ) {

		if ( this.filter !== null ) {

			this.gain.disconnect( this.filter );
			this.filter.disconnect( this.context.destination );

		} else {

			this.gain.disconnect( this.context.destination );

		}

		this.filter = value;
		this.gain.connect( this.filter );
		this.filter.connect( this.context.destination );

		return this;

	};

	AudioListener.prototype.getMasterVolume = function getMasterVolume () {

		return this.gain.gain.value;

	};

	AudioListener.prototype.setMasterVolume = function setMasterVolume ( value ) {

		this.gain.gain.setTargetAtTime( value, this.context.currentTime, 0.01 );

		return this;

	};

	AudioListener.prototype.updateMatrixWorld = function updateMatrixWorld ( force ) {

		Object3D.prototype.updateMatrixWorld.call( this, force );

		var listener = this.context.listener;
		var up = this.up;

		this.timeDelta = this._clock.getDelta();

		this.matrixWorld.decompose( _position, _quaternion, _scale );

		_orientation.set( 0, 0, - 1 ).applyQuaternion( _quaternion );

		if ( listener.positionX ) {

			// code path for Chrome (see #14393)

			var endTi�e = this.context.currentTime + this.timeDelta;

			listener.positionX.linearRampToValueAtTime( _position.x, endTime );
			listener.positionY.linearRampToValueAtTime( _position.y, endTime );
			listener.positionZ.linearRampToValueAtTime( _position.z, endTime );
			listener.forwardX.linearRampToValueAtTime( _orientation.x, endTime );
			listener.forwardY.linearRampToValueAtTime( _orientation.y, endTime );
			listener.forwardZ.linearRampToValueAtTime( _orientation.z, endTime );
			listener.upX.linearRampToValueAtTime( up.x, endTime );
			listener.upY.linearRampToValueAtTime( up.y, endTime );
			listener.upZ.linearRampToValueAtTime( up.z, endTime );

		} else {

			listener.setPosition( _position.x, _position.y, _position.z );
			listener.setOrientation( _orientation.x, _orientation.y, _orientation.z, up.x, up.y, up.z );

		}

	};

	return AudioListener;
}(Object3D));

export { AudioListener };

After:

import { Vector3 } from '../math/Vector3.js';
import { Quaternion } from '../math/Quaternion.js';
import { Clock } from '../core/Clock.js';
import { Object3D } from '../core/Object3D.js';
import { AudioContext } from './AudioContext.js';

var _position = new Vector3();
var _quaternion = new Quaternion();
var _scale = new Vector3();
var _orientation = new Vector3();

	function AudioListener() {

		Object3D.call(this);

		this.type = 'AudioListener';

		this.context = AudioContext.getContext();

		this.gain = this.context.createGain();
		this.gain.connect( this.context.destination );

		this.filter = null;

		this.timeDelta = 0;

		// private

		this._clock = new Clock();

	}

	if ( Object3D ) AudioListener.__proto__ = Object3D;
	AudioListener.prototype = Object.create( Object3D && Object3D.prototype );
	AudioListener.prototype.constructor = AudioListener;

	AudioListener.prototype.getInput = function getInput () {

		return this.gain;

	};

	AudioListener.prototype.removeFilter = function removeFilter () {

		if ( this.filter !== null ) {

			this.gain.disconnect( this.filter );
			this.filter.disconnect( this.context.destination );
			this.gain.connect( this.context.destination );
			this.filter = null;

		}

		return this;

	};

	AudioListener.prototype.getFilter = function getFilter () {

		return this.filter;

	};

	AudioListener.prototype.setFilter = function setFilter ( value ) {

		if ( this.filter !== null ) {

			this.gain.disconnect( this.filter );
			this.filter.disconnect( this.context.destination );

		} else {

			this.gain.disconnect( this.context.destination );

		}

		this.filter = value;
		this.gain.connect( this.filter );
		this.filter.connect( this.context.destination );

		return this;

	};

	AudioListener.prototype.getMasterVolume = function getMasterVolume () {

		return this.gain.gain.value;

	};

	AudioListener.prototype.setMasterVolume = function setMasterVolume ( value ) {

		this.gain.gain.setTargetAtTime( value, this.context.currentTime, 0.01 );

		return this;

	};

	AudioListener.prototype.updateMatrixWorld = function updateMatrixWorld ( force ) {

		Object3D.prototype.updateMatrixWorld.call( this, force );

		var listener = this.context.listener;
		var up = this.up;

		this.timeDelta = this._clock.getDelta();

		this.matrixWorld.decompose( _position, _quaternion, _scale );

		_orientation.set( 0, 0, - 1 ).applyQuaternion( _quaternion );

		if ( listener.positionX ) {

			// code path for Chrome (see #14393)

			var endTime = this.context.currentTime + this.timeDelta;

			listener.positionX.linearRampToValueAtTime( _position.x, endTime );
			listener.positionY.linearRampToValueAtTime( _position.y, endTime );
			listener.positionZ.linearRampToValueAtTime( _position.z, endTime );
			listener.forwardX.linearRampToValueAtTime( _orientation.x, endTime );
			listener.forwardY.linearRampToValueAtTime( _orientation.y, endTime );
			listener.forwardZ.linearRampToValueAtTime( _orientation.z, endTime );
			listener.upX.linearRampToValueAtTime( up.x, endTime );
			listener.upY.linearRampToValueAtTime( up.y, endTime );
			listener.upZ.linearRampToValueAtTime( up.z, endTime );

		} else {

			listener.setPosition( _position.x, _position.y, _position.z );
			listener.setOrientation( _orientation.x, _orientation.y, _orientation.z, up.x, up.y, up.z );

		}

	};

	return AudioListener;
}(Object3D));

export { AudioListener };

mrdoob added 2 commits July 27, 2020 10:55

Rollup: Added bubleCleanup.

de2f763

Rollup: Run bubleCleaup multiple times.

94d473d

mrdoob added this to the r119 milestone Jul 27, 2020

mrdoob merged commit de6fc20 into dev Jul 27, 2020

mrdoob deleted the rollup branch July 27, 2020 09:06

This was referenced Jul 27, 2020

Question about a generated closures. bublejs/buble#219

Closed

BoxGeometry: Introduce ES6 classes and ES6-ES5 conversion for builds. #17276

Merged

DefinitelyMaybe mentioned this pull request Jul 28, 2020

Evaluate ES6 classes #11552

Closed

ianpurvis mentioned this pull request Aug 1, 2020

Fix bubleCleanup es6 class unwrapping #19982

Merged

DefinitelyMaybe mentioned this pull request Aug 2, 2020

Moving to ES6 Classes #19986

Closed

43 tasks

Mugen87 mentioned this pull request Aug 2, 2020

core: Loaders to es6 classes #19985

Merged

Mugen87 mentioned this pull request Aug 16, 2020

Math interpolants and remainings: Move to es6 classes #20086

Closed

5 tasks

Uh oh!

Conversation

mrdoob commented Jul 27, 2020

Uh oh!

mrdoob commented Jul 27, 2020

Uh oh!

Mugen87 commented Jul 27, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mrdoob commented Jul 27, 2020

Uh oh!

Mugen87 commented Jul 27, 2020

Uh oh!

Mugen87 commented Jul 27, 2020

Uh oh!

mrdoob commented Jul 27, 2020

Uh oh!

Mugen87 commented Jul 27, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mrdoob commented Jul 27, 2020

Uh oh!

mrdoob commented Jul 27, 2020

Uh oh!

mrdoob commented Jul 27, 2020

Uh oh!

Mugen87 commented Jul 27, 2020

Uh oh!

Mugen87 commented Jul 27, 2020

Uh oh!

DefinitelyMaybe commented Jul 28, 2020

Uh oh!

mrdoob commented Jul 28, 2020

Uh oh!

DefinitelyMaybe commented Jul 28, 2020

Uh oh!

ianpurvis commented Jul 31, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Mugen87 commented Jul 27, 2020 •

edited

Loading

Mugen87 commented Jul 27, 2020 •

edited

Loading

ianpurvis commented Jul 31, 2020 •

edited

Loading