JSM to JS

[gigablox]

Related issues:

#20455

Description:
This is a poc custom build script that converts all JSM modules into JS global namespaced modules in about 30 seconds.

Compiled JS examples in:

/examples/js2

Script Path:

/utils/build/jsmToJs.js

To run locally:

npm install
npm run jsmToJs

Had pretty good success with this method. Needs more testing but tried a few of the more complex modules like the GLTFLoader in a hello world and it was fine.

SUCCESS TOTAL: 357
FAILURE TOTAL: 15

A success here just means there were no transpilation errors and the output file has good integrity. Some of these failures seem to do with shader code and file minification affecting RegExp parsing used in file transformation during the conversion process.

ERROR: C:/dev/three.js/examples/jsm/libs/chevrotain.module.min.js
ERROR: C:/dev/three.js/examples/jsm/libs/dat.gui.module.js
ERROR: C:/dev/three.js/examples/jsm/libs/rhino3dm/rhino3dm.js
ERROR: C:/dev/three.js/examples/jsm/libs/zstddec.module.js
ERROR: C:/dev/three.js/examples/jsm/loaders/GLTFLoader.js
ERROR: C:/dev/three.js/examples/jsm/loaders/VTKLoader.js
ERROR: C:/dev/three.js/examples/jsm/loaders/XLoader.js
ERROR: C:/dev/three.js/examples/jsm/objects/Sky.js
ERROR: C:/dev/three.js/examples/jsm/postprocessing/GlitchPass.js
ERROR: C:/dev/three.js/examples/jsm/postprocessing/SMAAPass.js
ERROR: C:/dev/three.js/examples/jsm/shaders/BokehShader2.js
ERROR: C:/dev/three.js/examples/jsm/shaders/FXAAShader.js
ERROR: C:/dev/three.js/examples/jsm/shaders/SAOShader.js
ERROR: C:/dev/three.js/examples/jsm/shaders/SSAOShader.js
ERROR: C:/dev/three.js/examples/jsm/shaders/VolumeShader.js

I'm sure there's a few more edge cases but think this is a method worth investigating more. Could use some help getting the files erroring out stable or improvements to any of the RegExp.

[donmccurdy]

Thanks for the PR! Note that there is some parallel discussion going on in #20527, I would be curious about pros/cons of using @babel/core here as opposed to Rollup.

[gigablox]

@donmccurdy Hey happy to help.

So the script does the following things:

1. Look for imports declared.
2. Add a THREE global namespace to any of those imports used in the file.
3. Remove imports declared.
4. Transform ES6 into ES5 with babel.
5. Replace top level export. definitions made by babel with a THREE global namespace.

If we are going to compare the two methods I'd start by saying both will probably do the job - but for something like this I would choose the solution that offers the most amount of flexibility and long term support.

I say flexibility is important because as I've discovered through this poc we will probably need to make some one offs to the build for certain types of files containing shader code, libs and other little got-yas. Dealing with one offs in custom build tools is usually cleaner then riding the fringe of a vendors config block that almost always leads to really ugly middleware.

For long term support it depends. Whether its custom or vendor, the needs of the solution will continue to evolve with time. With custom build tools that evolution will have a higher maintenance tax than a vendor for the "day to day" or short to medium term. But for long term support custom build tools will always have less overall maintenance tax then that of a vendor.

This is because vendor build tools like Rollup go through major API updates that sometimes completely break your implementation or drop support for features your implementation relies on. I've also seen vendor build tools no longer able to support the needs of a project because the evolution of codebase and adoption of a popular coding style outgrew them.

[DefinitelyMaybe]

Hey @gigablox,

Could you remove the changes your script makes to the examples folder from the PR.

I would like to have a look over just your script doing the conversion as oppose to scrolling through the 350 odd output files.

[gigablox]

@DefinitelyMaybe No problem done.

[DefinitelyMaybe]

many thanks 👍

[gonnavis]

Hello @gigablox, thanks for your pr!
I want to use your solution to auto convert my pr #20798 from jsm/ to js/, but there are some conflicts at present. Could you please update it?

[Mugen87]

Closing in favor of #21584.