No javascript hinting

Three.js hinting works as shown bellow, but not Javascript hinting.
And I have installed JSHint… so much for the name.
Instead, I get “any” which I find ridiculous in our era and on this century.
That should have been provided by default, without any effort from the user at all.
I’m using VS-Code. Any …hints?

any

Um, I actually does only work partially. For example it does not recognize Texture.dispose() or the respective .wrapS and .wrapT properties.

No need to be aggressive - VSCode (and type analysis / hints system) came out around ~2016, so lack of types was quite common in both this era and this century :’) And they are still broken sometimes because of project / module structure.

Back on the topic - can you show a bit more code (incl. declaration of o and o.tex) :thinking: ? It may have something to do with that, if THREE.Texture shows correct hints (note that ctx.putImageData also does not show in your gif as void as it is supposed to.)

2 Likes

What is o in your example
I can’t find any object in Threejs that has a property .tex or .img
Is this an object that you created?

1 Like

Hmm… you’re right. It works partially even with three.js.

I’m always aggressive against destructive sloppiness and/or irresponsibility that makes the lives of millions, miserable.
Javascript is 25 years old and the most widespread language on the planet, so there is no excuse whatsoever for a development environment that you build your code on, to not cover the basics for that language. JS BTW, has a sinful history, along with HTML, as tools of torture for the developers, especially in the era of browser wars, of which the echo from the cries and hair-pulling (lol) can still be heard… Both JS and HTML have improved, but are still a mess… All this, is a failure of the software industry for a number of reasons, completely off-topic here of course.

o = this;
o.tex = new THREE.Texture(o.img);

‘this’ is an object referred inside a function, inside a prototype. where the previous code (anim) resides.

The code works BTW.

You are welcome to contribute and improve three.js right here :point_right:t2: https://github.com/mrdoob/three.js (you can also contribute to other parts of JS ecosystem, it’s 99% open-source and community foundations.)

Yes, assigning this to a constant breaks type-checking (overall, not only when using three. this is a general context scope.) Either use this.tex = ... or create o as a separate object that is returned:

1 Like

Awesome! I replaced them with const o = {}; and hinting works 100% now! (I had 22 of them).
Thanks!

Just not yet…
The hinting worked 100%, but the code stopped working! Oh, the irony! LOL
Then I tried to change all ‘o.xx’ by ‘this.xx’ (about 750) and guess what: the hinting stopped working!
I’m currently trying to figure out what’s going on…

I just recalled I have left this unanswered, so here it is, a quick update:

flawed

  1. This is an example case where ‘o = this’ is needed (aside the typing economy and cleanness):
    (I’ve replaced ‘o.A’ to ‘this.A’ and the second line from ‘o.B’ to ‘o.A’ for this demonstration)

  2. In this case JS hinting doesn’t “break”, it works, but it doesn’t work in most other cases, so for all other cases I have returned to using ‘this’ normally.

  3. As you can see, JS hinting ignores ‘addColorStop’ and all other canvas functions.

  4. I was using the combination of constructor + prototype, and by switching to JS classes (ES6) I see more consistent behavior and more user-friendly functionality.

Three.js itself is using ES6 and even later standards, so there is no such a thing as supporting older devices/browsers by avoiding ES6 unless you make tiny code (eg banners) - I don’t.

this in your line 3
let o = this
is not the same this as the this in line 7
grd.addColorStop(0, this.A)

Does converting the function to an arrow function work better for the this reference?

...
o.gradstop[0] = [
  (grd) => {
     grd.addColorStop(0, this.A)
     ...
  }
]
2 Likes

Interesting behavior + code economy with ES6, so I can either use ‘this’ everywhere, or use ‘o’ for maximum code economy in these cases, along with arrow functions, even written without the parentheses: grd => {
thanks!