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

Remove build/three.js and build/three.min.js. #25435

Merged
merged 4 commits into from
Feb 6, 2023
Merged

Conversation

Mugen87
Copy link
Collaborator

@Mugen87 Mugen87 commented Feb 5, 2023

Related issue: #25341 (comment)

Description

This PR removes the builds three.js and three.min.js from the repository. The motivation behind this change is explained here: #25341 (comment).

@Mugen87 Mugen87 added this to the r150 milestone Feb 5, 2023
@epreston
Copy link
Contributor

epreston commented Feb 5, 2023

This PR includes removing the tests/benchmark folder with the 7 year old code and dependencies with security vulnerabilities. Even better.

@Mugen87 Mugen87 changed the title Builds: Remove three.js and three.min.js. Builds: Remove three.js and three.min.js. Feb 5, 2023
@epreston
Copy link
Contributor

epreston commented Feb 6, 2023

Most libraries out there now are shipping 3 types of bundled units:

  • cjs - common js bundles
  • global - named global export (everything under a namespace) like THREE, Vue
  • esm - module bundle

This PR is removing the 'global' bundle. Is there anything we need to update ?

Looked like most of the examples are using ESM and importing everything under a namespace to look like the global bundle.

@donmccurdy
Copy link
Collaborator

donmccurdy commented Feb 6, 2023

My understanding is that the 'global' format is really pretty rare for published libraries, and we're one of few libraries still using it anymore. Would be curious if there are any statistics available from npm on use of these package.json entries, especially the unpkg entry for UMD. But yes, the goal of this PR is to remove that type of usage moving forward. We stopped recommending it, or even mentioning it under installation docs a while ago, and I don't think there should be any references left in the repository. Probably any number of older external resources that might still reference that installation method, or even hotlink the files from the threejs domain, but at some point the change needs to be made.

docs/index.html Show resolved Hide resolved
@epreston
Copy link
Contributor

epreston commented Feb 6, 2023

My understanding is that the 'global' format is really pretty rare for published libraries.

Vue and a few others. Not advocating for keeping it. The use cases are "want to use cjs but don't want libraries populating the global namespace". Ultimately its all legacy. Sounds like the project has been moving in this direction for a while.

@epreston
Copy link
Contributor

epreston commented Feb 6, 2023

Did a quick check: docs/manual/xx/introduction/creating-a-scene.html for different languages needs to be updated too.

arabic, english, italian, japanese, korean, pt-br, russian, chinese

The jsfiddle linked in those pages needs to update.

manual/index.html Fixed Show fixed Hide fixed
manual/resources/lesson.js Fixed Show fixed Hide fixed
manual/index.html Fixed Show fixed Hide fixed
manual/resources/lesson.js Fixed Show fixed Hide fixed
@mrdoob mrdoob merged commit 2d3ac96 into mrdoob:dev Feb 6, 2023
@mrdoob mrdoob changed the title Builds: Remove three.js and three.min.js. Builds: Remove build/three.js and build/three.min.js. Feb 6, 2023
@mrdoob mrdoob changed the title Builds: Remove build/three.js and build/three.min.js. Remove build/three.js and build/three.min.js. Feb 6, 2023
@georgpukk
Copy link
Contributor

What about adding minified version of three.module.js?

three@0.149.0 br gz
three.module.js 187 KB 239 KB
three.module.min.js 125 KB 153 KB
-62 KB -86 KB

@roman01la
Copy link

Does that mean it won't be possible anymore to grab the script from http://unpkg.com/three@0.148.0/build/ and put it in index.html like the kids in 90's did it? It was super simple and quick way when prototyping.

@sxxov
Copy link

sxxov commented Feb 6, 2023

Does that mean it won't be possible anymore to grab the script from http://unpkg.com/three@0.148.0/build/ and put it in index.html like the kids in 90's did it? It was super simple and quick way when prototyping.

An alternative could be https://esm.sh/three@0.148.0

@Mugen87
Copy link
Collaborator Author

Mugen87 commented Feb 6, 2023

Does that mean it won't be possible anymore to grab the script from http://unpkg.com/three@0.148.0/build/ and put it in index.html like the kids in 90's did it? It was super simple and quick way when prototyping.

You can still do this with the ESM version. The import just looks a bit different https://jsfiddle.net/em4j9hvu/

@neilrackett
Copy link

Like others, my only use-case for these files was hacking together quick and dirty prototypes, but (as demonstrated above) most browsers support modules out of the box now, so happy to see those ~2MB removed from the library

@mrdoob
Copy link
Owner

mrdoob commented Feb 7, 2023

@Mugen87 I've asked twitter and I feel like we should keep build/three.js:
https://twitter.com/threejs/status/1622698735427022848

@epreston
Copy link
Contributor

epreston commented Feb 7, 2023

I read the tweet. I'm confused. So the person who cant upgrade to a recent version for many reasons, needs 150 to keep a specific structure ?

I'm also confused because they can get the same presentation for their code by changing a single line import to ' ... as 'THREE' ' and don't need to convert their client code to modules.

Am I missing something ?

@mrdoob
Copy link
Owner

mrdoob commented Feb 7, 2023

I'm not sure...

As far as I know, the only thing they would have to do is changing this:

<script src="builds/three.js"></script>
<script>
    // their code
</script>

To this:

<script type="module">
    import * as THREE from 'build/three.module.js';
    window.THREE = THREE; // make it global
    // their code
</script>

@mrdoob
Copy link
Owner

mrdoob commented Feb 7, 2023

@jbaicoianu That doesn't work for you?

@LeviPesin
Copy link
Contributor

Maybe we should add this example to the migration guide?

@Mugen87
Copy link
Collaborator Author

Mugen87 commented Feb 7, 2023

I see. Well, I'm okay if we add a deprecation warning to the files. Can we define at least a concrete release number in the warning where the builds are going to be removed?

@mrdoob
Copy link
Owner

mrdoob commented Feb 7, 2023

Lets go with r160 (December 2023).

@Mugen87
Copy link
Collaborator Author

Mugen87 commented Feb 7, 2023

Should I revert the remaining changes to package.json and rollup.config.jsor are you finish it after 346a280?

@mrdoob
Copy link
Owner

mrdoob commented Feb 7, 2023

Go ahead, go ahead. I'm done for today.

@paulmasson
Copy link
Contributor

@mrdoob when you remove build/three.js and build/three.min.js will you also remove all of the functionality to produce these files? I've been using it to produce a custom minified file that just adds OrbitControls to the base library. If all of the system is going away then I'd like to know. Thanks.

@epreston
Copy link
Contributor

epreston commented Feb 10, 2023

Wait till you hear it from the source but, to put your mind at ease: The build system is the same for all file formats, removing one entry in the list of configuration does not remove the build system.

You can add a few lines to build any format or custom ones at any time. Take a look at the changes in 25464 just above to see how easy this is.

	{
		input: 'src/Three.js',
		plugins: [
			addons(),
			glconstants(),
			glsl(),
			terser(),
			header()
		],
		output: [
			{
				format: 'umd',
				name: 'THREE',
				file: 'build/three.min.js'
			}
		]
	}

Add or subtract the terser(), line, you make a minified version.

@mrdoob
Copy link
Owner

mrdoob commented Feb 10, 2023

@mrdoob when you remove build/three.js and build/three.min.js will you also remove all of the functionality to produce these files?

Can you specify what you mean with "all of the functionality to produce these files"?

@Mugen87
Copy link
Collaborator Author

Mugen87 commented Feb 10, 2023

I guess he is referring to #20389.

@epreston
Copy link
Contributor

That makes sense but that won't break or change by removing a build format.

@Mugen87
Copy link
Collaborator Author

Mugen87 commented Feb 10, 2023

When removing build/three.js and build/three.min.js in r160, we should still consider a removal of the addons() function like explained in: #20389 (comment)

@paulmasson
Copy link
Contributor

@mrdoob when you remove build/three.js and build/three.min.js will you also remove all of the functionality to produce these files?

Can you specify what you mean with "all of the functionality to produce these files"?

I think @epreston answered most of my question. When you remove the files themselves, will you also modify rollup.config.js to remove those two builds? What other files might be altered at the same time?

@epreston
Copy link
Contributor

epreston commented Feb 11, 2023

Nobody can give guarantees but its likely to go down the same way; Removing the two files that are generated and the 10 lines above that tell the build system to make them.

If you want to be in the safest position, realise that making a build from a build is not the cleanest. If you are creating custom build formats from source, you would not be concerned about this. Transition to something where you are making exactly what you want. Hot tip: In that configuration, avoid Three.legacy.js.

If you link a github repo, happy to make a PR for that repo with the changes.

@erichlof
Copy link
Contributor

erichlof commented Feb 24, 2023

@Mugen87 @donmccurdy @mrdoob
Looks like I'm late to the party, but as a user of three.js for over a decade my ongoing three.js path tracing project , I feel like I have to voice my opinion.

I'm sorry to say it but I am feeling frustrated with the direction this is going (removal of all js build files). Like @jbaicoianu , it's not as simple as using @mrdoob 's pattern of making THREE a global on the window object after importing from a module. And unlike him, yes I AM that old-school: I have all my static js files lined up one after the other in the body of the HTML document (the way I've always done it for decades). The 1st one is three.min.js. So I tried @mrdoob 's code pattern and.. the problem just got shifted down to the next js file in the long list of my required js files, lol. I then tried making each of those into modules, having to manually add 'import' this and 'export' that everywhere. And after 2 hours spent (read wasted), I have nothing to show for it - my whole project won't even start.

Now there are a lot of things I have yet to learn about programming, but by no means do I consider myself a beginner (coding in C and OpenGL 1.0 since the mid 1990's). I tried reading your landing page called 'installation', but that did not clarify the issue nor help me get started with the 'transition from static js to modules' process. Now if I, with decades of graphics and games programming experience, cannot get my single-page demos up and running, how do we expect a beginner programmer (who may be interested in trying graphics for the first time) to do it?

Part of the magic and usefulness of the three.js library is its ability to remove friction from the graphics setup process. In other words, I can get from a blank screen (and a blank code editor) to 3D graphics on my screen in about 5 minutes (with the old way). That's what 0 (read zero) friction should feel like. And the way things are headed, I'm about to have to add a whole lot of unnecessary friction (possible build system? use and rely on npm?) and extra lines of code ('import' this and 'export' that), all...to do the same exact thing. :(

Dinosaurs like me (who still use static js files all located in the same js folder) may be on the way out, but I'm just thinking that there might be potential beginning users of your library out there who will feel lost, unless they know about build systems and modern ES6 modular patterns. And even if they are more experienced, I'd wager that there are others like me out there who prefer having the library as a neat, static, minified js file that they can just include in their project with 1 line of code. That is truly 0 friction.

*Edit: Isn't there some sort middle-ground we could aim for? Or is it really a mutually exclusive situation, where you either have downloadable builds (and somebody to maintain that process of building each version, I realize) , or pure modules, but not both at the same time?

@epreston
Copy link
Contributor

Are you open to respectful but direct feedback ?

@erichlof
Copy link
Contributor

@epreston
Hello, were you asking me? If so, yes I'm open to feedback/solutions. Thank you :)

@LeviPesin
Copy link
Contributor

Doesn't

<script type="module">
import * as THREE from 'build/three.module.js';
window.THREE = THREE;
</script>
<other script tags>

work for you?

the problem just got shifted down to the next js file in the long list of my required js files, lol

What is the problem?

@epreston
Copy link
Contributor

epreston commented Feb 25, 2023

Context:

I'm conflicted. There's plenty of good reasoning to support what you wrote; equally, the project linked could use 5 minutes of this type of thinking. Straight talk, you are not a dinosaur, you're not doing anything abnormal. You're doing something that is complex but have not applied any effort to ensuring it will deploy or run with any consistency outside of your direct usage. There's no questions about style or experience.

Things that support what you wrote:

  • creating one or twenty distribution formats is the same amount of work for the three.js project
  • the distribution format you are using is handy for examples, avoids some conflicts because it is wrapped in a namespace
  • the tooling to minify and make small adjustments to ensure broad browser compatibility is mature
  • developers can write modern code, tools translate it without performance penalty (as far as the users browser will allow)
  • there's no support effort on the parts of three.js developers, they write modern code and tools do the rest
  • there's no conflicts or performance penalties for packaging a library in multiple formats, only the one that is referenced is used.
  • there can be a performance win for the end user when using a CDN for bundled dependencies like this: even though the minified version is still wasteful for your purposes, it can be downloaded concurrently and found cached on the browser from other websites that use the same dependency for a very long time. This saves people from serving a dependency which could be several times larger than their application.

Here's the issue:

  • you are getting very few of the possible benefits in your setup (I can expand on that if needed)
  • there is no focus on browser support, compatibility, bandwidth, load times, or consistency in your project
  • any marginal step toward addressing conflicts or consistency would remove your desire to use this particular distribution format
  • gone are the days that you need to ask dependent projects to play nicely, you can just enforce it on your end. Regardless which direction this takes, you can get exactly what you want in less than 5 minutes.
  • if your goal is avoid a build process, willing to accept inconsistency to be able to host it directly from github without running a github action, you can add 3 short lines to your code.

So all up:

  • You're right, this distribution format is useful. Keeping it around seems like good idea.
  • You would benefit immediately by not using this format.
  • In good faith, happy to assist with some PR's on your project and guidance.

@erichlof
Copy link
Contributor

@LeviPesin
Hi, thank you for your response. It's best if I link to the HTML itself inside my project so you can directly see the list of scripts that must be loaded in. Here is a typical example Cornell Box demo's HTML shell that loads in the required js files from the js folder: link

I used this bare-bones Cornell Box scene to see if I could get the 'window.THREE = THREE' pattern working. It looks like that initially works, but then PathTracingCommon, InitCommon, and Cornell_Box js files all start complaining in the console. At this point I was confused because putting 'window.THREE = THREE' in the 1st script should globally define THREE, right? Yet PathTracingCommon and InitCommon both said THREE is not defined. I tried making them modules too and importing/exporting, but then there are certain functions that I define inside InitCommon (like init(), ha), that Cornell_Box.js then complains about - 'Init is not defined'. Thus it becomes a game of cat and mouse, trying to chase down every last dependency between several js files.

I realize that the latter part of that problem is probably due to the way I organized the InitCommon.js file vs the demo files (like Cornell_Box.js) that rely on it, and that's on me. Also, although I really appreciate the help, I don't want to derail this thread too much into a help forum-type post where we debug my personal problem. I would be glad to continue something like that on the three.js-preferred Questions discord forum with a tag related to ES6 modules. At any rate, thank you for taking a look. :)

@epreston
Copy link
Contributor

epreston commented Feb 25, 2023

Put the three.js script tag in your header to get it to load before others in the body to resolve this issue.

There's different places you can include the script. There's a few options to explore there.

@erichlof
Copy link
Contributor

@epreston
Thank you Ed for the thoughtful and detailed response. You are absolutely right - I really haven't considered "browser support, compatibility, bandwidth, load times, or consistency" in my project. Again, this is totally on me, as I have been so concerned with the ray tracing and graphics side of things. I guess I never really stopped to think about how people would actually consume the project as a whole over the network. All of those js files would need to be bundled up, and only the parts of three.js that I actually need should be picked out and packaged. Thank you for pointing out these issues. As I mentioned, there's still a lot to learn on my end, especially when it comes to ES6 modules.

@erichlof
Copy link
Contributor

@epreston Re: script tag in header,
Ah hadn't thought of that. Thank you for the suggestion! I will give it a try

@epreston
Copy link
Contributor

Seriously mate, lets get you setup for success. You open to PR's on the project ?

@erichlof
Copy link
Contributor

I appreciate that, but with that big of a shift on how things would work, I feel that I need to come to terms with it and totally understand what any new code is doing and how the system works, on my own first. One of things I've grown comfortable with is that I can randomly pick a line of code from any of the thousands of lines in my project, and I can tell you exactly why it's there and what it's doing, and how it relates to the system as a whole - now of course this excludes files like GLTFLoader.js, which I just merrily use without knowing how it does all of its magic, lol. But for anything that I create, or pull into the project, I need to really understand it first. That was my long way of saying let me see if I can gently introduce some of the more modern techniques, and then once I understand the system more clearly, we can discuss larger changes.

Thank you again for your thoughts and input.

@erichlof
Copy link
Contributor

erichlof commented Feb 25, 2023

Case in point, I just got mrdoob's pattern to work, with the help of your suggestion about putting it in the head! Although when I first tried it just now, it gave me the same errors in the subsequent js files. I had to make a small addition to this quick fix. For some reason, I remembered the keyword 'defer' floating around in my head (maybe from some article I read, or on a forum somewhere). But anyway, when I simply added 'defer' to the subsequent js files script tags:

<script defer src="js/PathTracingCommon.js"> </script>
<script defer src="js/InitCommon.js"> </script>

<script defer src="js/Cornell_Box.js"> </script>

It worked! :)

Thank you again for this quick fix. I know it is more of a band aid right now for my larger structural problem of the entire repo, but just getting this to simply work without a lot of fuss and extra code, has inspired me to go further!

Thanks again everyone for listening to my concerns and for your help and patience.

@paulmasson
Copy link
Contributor

@erichlof here's another idea from a mutual dinosaur: I do a custom build of three.min.js including OrbitControls:

https://github.com/paulmasson/threejs-with-controls

If that's sufficient for your needs feel free to use it. You can also add additional components from the examples rather easily by modifying one file. That way you can have whatever you want without friction. Cheers!

@erichlof
Copy link
Contributor

@paulmasson

Thank you Paul! Yes, in the past, I thought of doing my own custom build with just the components I need. But as you know, that takes time and effort that I could be spending elsewhere on the project. I might give your build a try - thank you for letting me know about it! :-)

Also, as mentioned above, I got the modular system working just last night (with the help of the friendly people on this thread), so maybe I can dig deeper into that system and, using the more modern ES6 way, 'import' only the necessary components. I definitely don't need all of three.min.js I realize, but it's just so easy to continue to include it as a static script in my HTML file, that that's what I've defaulted to over the years, I guess. But there's always room for improvement in loading efficiency of my project over the network, so I am open to trying some different solutions to see which one I can get up and running without too many changes to all the files in my codebase.
Thanks again! :-)

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.

None yet