BabylonJS for ES6

[royibernthal]

I extend Mesh and override the "parent" setter, which is defined in Node. Any calls to super.parent seem to be ignored.

My guess is it has something to do with bjs being exported to es5 (or lower?), while I'm extending the classes using the es6 classes syntax.

es6 classes are just syntactical sugar over prototypes, but it seems to matter here.

Is bjs exported to es6 as well somewhere? Would I have to call Node's prototype manually from within my es6 code?

[Guest]

I don't think you can override properties in es6 (but I may be wrong)

[JCPalmer]

I am computer generating ES6 classes in Blender which sub-class BABYLON.Mesh.  Here is a summary output:

var camera_anim;
(function (camera_anim) {
    class Cylinder_003_4 extends BABYLON.Mesh {
        constructor(name, scene, materialsRootDir, source) {
            super(name, scene, null, source, true);

            if (!materialsRootDir) { materialsRootDir = "./"; }
            . . .
        }

        dispose(doNotRecurse) {
            super.dispose(doNotRecurse);
            if (this.skeleton) this.skeleton.dispose();
        }
    }
    camera_anim.Cylinder_003_4 = Cylinder_003_4;
})(camera_anim || (camera_anim = {}));

The only time I use super is when I override a method.  Everything has worked, but am not .  There is an ES6 output in distribution, but it is not hold generated class.  I cannot remember what it is for.

Probably worth the small amount of time to just make 2 small classes (maybe PG) where you sub-class one that has a setter. Just to make sure your problem is what you think it is, and you can override a setter.

[royibernthal]

23 hours ago, Deltakosh said:

I don't think you can override properties in es6 (but I may be wrong)

Setters are functions, so you can override them the same way you'd override any other function.

23 hours ago, JCPalmer said:

The only time I use super is when I override a method.  Everything has worked, but am not .  There is an ES6 output in distribution, but it is not hold generated class.  I cannot remember what it is for.

Probably worth the small amount of time to just make 2 small classes (maybe PG) where you sub-class one that has a setter. Just to make sure your problem is what you think it is, and you can override a setter.

I'm extending classes using es6 as well, and never had problems with calls to super, the only issue is with super of a setter (and possibly also a getter, not sure I checked).

Can you elaborate on the solution you offered? Do you mean I should create an es6 class wrapper for the bjs class which shares its whole API (and delegates calls to the wrapped class)? If not, what do you mean? A small example / pseudo code would be great.

[Guest]

Quote

Setters are functions, so you can override them the same way you'd override any other function.

I HIGHLY doubt that as for instance TS does not support overloading properties

[royibernthal]

7 hours ago, Deltakosh said:

I HIGHLY doubt that as for instance TS does not support overloading properties

I'm doing it in more than 1 place in my ts project, give it a try. Why overloading properties? How is it connected to overriding a setter function?

[Guest]

I trust you, no problem. overloading a setter is ok in TS but you cannot call super. So that's why I told you that

 

(btw, property = getter + setter functions)

[royibernthal]

class A {
    
    set name(value) {
        console.log(value);
    }
    
}

class B extends A {
    
    set name(value) {
        super.name = value;
        
        console.log(value.toUpperCase());
    }
    
}

var instance = new B();

instance.name = 'Test';



/*

output:

"Test"

"TEST"

*/

 

Just to make sure we're on the same page, this is what I mean 

Not sure I'm familiar with overloading a setter without being able to call super, got a code example?

[JCPalmer]

Not a perfect solution, but in class B you could have a setter for nickName that had 'this.name = value;'. 

[royibernthal]

2 hours ago, JCPalmer said:

Not a perfect solution, but in class B you could have a setter for nickName that had 'this.name = value;'. 

Yeah, that's the workaround I'm currently using. I wonder if there's a more straightforward solution.

[Guest]

We are on the same page  What you mentioned is not support by TS when using ES5 as output but I clearly see it should work in ES6

I don't know why it is not working in your initial case

[royibernthal]

2 hours ago, Deltakosh said:

We are on the same page  What you mentioned is not support by TS when using ES5 as output but I clearly see it should work in ES6

I don't know why it is not working in your initial case

Yup  From what I understood ts didn't really find a good way to emit that into es5, so they gave up on it after deciding it was not worth the trouble.

I think the problem in my initial case is that bjs is exported to es5, while my project is exported to es6. I believe that an es6 export of bjs would solve this.

[dbawel]

We write everything in ES6, and compile to ES5 at runtime. There is no choice at this time, until all browsers are ES6 compatible. I don't know why it's taking so long, but that is the circumstance which we find ourselves. However, I highly recommend to write ES6 compatible code, as it is far more efficient and offers functionality everyone can use - such as far more capabilities manipulating arrays. Just use ESLint to compile to ES5 for compatability. But I hope the browser developers get their butts out of the clouds and bring ES6 to spec in their browsers. This time, they are WAY behind the curve - and  it's going to hurt everyone when half the world is living in ES6, and the other half stuck in the limitations of ES5.

DB

[mattstyles]

1 hour ago, dbawel said:

There is no choice at this time, until all browsers are ES6 compatible.

Modern browsers (and not so modern ones) are almost 100% compliant with the initial es6 specifications, http://kangax.github.io/compat-table/es6/, most are compliant with newer language features as well. Whether they are as performant as the transpiled es5-compliant code is far more shaky ground.

1 hour ago, dbawel said:

Just use ESLint to compile to ES5 for compatability.

Not sure what you mean here, ESLint is for checking certain syntaxes and structures in your source code and informing you of where you contravene a given ruleset. It doesn't do compilation or transpilation. Did you mean another tool?

1 hour ago, dbawel said:

However, I highly recommend to write ES6 compatible code, as it is far more efficient and offers functionality everyone can use - such as far more capabilities manipulating arrays.

By efficient you should probably clarify that you mean it has a number of sugar methods that make code less verbose (not that verbosity is always a bad thing though).

(almost) Everything from ES6 can be transpiled back to es5 so es6 doesn't support anything new, it just has a new syntax making some things a little nicer to write and less error-prone for the developer (the browser doesn't actually care and in many cases the old way is better optimised for the engine, if not for the developer writing it). (I think there are some odd things in the spec like tail call ops which are impossible to shim, but, everything else, including tricky stuff like generators and proxies, _can_ be shimmed, you'd probably never want to write code like that but transpilers can do it just fine).

[dbawel]

@mattstyles

I should have been clear that using ESLint will allow devs to check ES6 compliance, and that it's necessary to set up your runtime environment to compile back to ES5 - which I highly recommend. Compatability is getting better and very close, but there are still disparities which in working for a company that produces consumer products, we still must compile back to ES6.

As for features of ES6, there are many efficiencies, but specifically for arrays, there are many operations which don't exist or are not synonymous with ES5 array operations. I'm certain you can name many which make working with arrays much faster and simpler. Of course, you can do practically everything in ES5 that you can do using ES6, however, there is more code and in my opinion less efficiency of code writing.

Bottom line, it's simply a matter of preference, however I personally wouldn't release a consumer product using ES6 quite yet.

Cheers,

DB