solved Uglify for ES6

[JCPalmer]

I have begun migration of all my stuff away from Eclipse back to Netbeans.  The support for the Eclipse Typescript add-in has not worked for a while.  I have been using Gulp to actually do any building.

Netbeans editor for Typescript is much better, & importantly being updated / improved.  Cordova projects is also nicer.  I always use Netbeans anyway until I needed to work with Typescript.  Eclipse was very early out of the gate. with Typescript.

While Netbeans does gulp commands from a cascading menu, since the typescript editor relies on a tsconfig.json file, I wanted to move away from gulp.  Netbeans also runs npm scripts (in a scripts collection in a package.json file) from a menu as well.  I only really need one liners like "tsc" & "uglifyjs".

I was intending to transpile to ES6 (do not care about ie11), so I need an uglify which supports it.  By far the most downloaded Uglify is https://www.npmjs.com/package/uglify-js.  It notes that you should use https://github.com/mishoo/UglifyJS2/tree/harmony for ES6.  The first thing I noticed is this repo link is not the master branch, hence the question, is it just a little too early for es6?  Has anyone used this?

[RaananW]

39 minutes ago, JCPalmer said:

is it just a little too early for es6? 

yes...

There are a lot of problems still to be solved with es6 modules (personal opinion, actually). For example - the "traditional" npm-packaging-in-node-modules cannot work as you expect, as you need to link the file directly. No webpack-magic or browserify.

For us as a framework, it is nice to offer an es6 module (which we do). But we still focus on UMD modules.

[JCPalmer]

Fortunately I am not building node modules, webpacks, or browserify.  I guess since I have the fallback of the es5 uglify, & it only takes a couple of keystrokes in the tsconfig.json file to fallback, I'll give es6 a chance.

I also have the benefit of a number of working es3 modules, so I'll know right away to back off if it is not working.  I can also isolate it to es6 or the uglify if the transpiled code works, but not after it run through uglify.

[JCPalmer]

Update:  I have been able to use the ES6 capable uglify, giving very comparable results to the gulp tailored one.  I used it against many of the Tower of Babel source generation files (currently ES3), & things work the same.

The QueuedInterpolation module I have does transpile to ES6, and looks right. When I try use it with one of ToB source files, things go south though.  I have not read anything that mixed between ES "levels".  I am doing it 2 different ways:

1. I am subclassing BABYLON.Mesh, BABYLON.Skeleton,  BABYLON.Bone, BABYLON.ArcRotateCamera, & BABYLON.Action extending the QI versions.
2. ToB is generating subclasses of QI.Mesh.

The error that is tripped is TypeError: class constructors must be invoked with |new|.  I do not know if this is going from BJS to QI, but if it is, then it is game over.  I can always make the minor python changes to use ES6 syntax for ToB.

Action is the smallest subclass.  Here it is out of transpile:

class SeriesAction extends BABYLON.Action {
    constructor(triggerOptions, _target, _eSeries, _clearQueue, _stopCurrentSeries, condition) {
        super(triggerOptions, condition);
        this._target = _target;
        this._eSeries = _eSeries;
        this._clearQueue = _clearQueue;
        this._stopCurrentSeries = _stopCurrentSeries;
    }
    execute(evt) {
        this._target.queueEventSeries(this._eSeries, this._clearQueue, this._stopCurrentSeries);
    }
}

I have a bad feeling that this is not going to work with the tightness of my integration to BJS.  Also moving BJS to ES6 is more than I want to bite off right now.

In conclusion,  ES6 might work for some unless mixing is done.  Overall, the move to Nebeans & dumping Gulp was very successful, but going to make a couple character change to tsconfig.json to not generate ES6.

[JCPalmer]

On 2/19/2018 at 11:37 AM, RaananW said:

yes...

There are a lot of problems still to be solved with es6 modules (personal opinion, actually). For example - the "traditional" npm-packaging-in-node-modules cannot work as you expect, as you need to link the file directly. No webpack-magic or browserify.

For us as a framework, it is nice to offer an es6 module (which we do). But we still focus on UMD modules.

Sorry, I really need to read better.  I found the es6.js file.  Is it really es6 though?  It has that __extends function?  There are comments for the class syntax, so I am not sure you could really subclass anything in an es6 way.  There was no announcement topic for this so I am wondering how this is es6 & what this file is for?

[RaananW]

This is es6, native es6, with export statement at the end of the file for all classes, enums, statics and co' in BABYLON. It was partly announced, and it still being improved  

[brianzinn]

I'm not sure that file is officially supported yet, because otherwise there would be a module or jsnext:main more likely in package.json.

{
  ...
  "main": "dist/preview release/babylon.js",
  "module": "dist/preview release/es6.js", // BJS doesn't have this
  "jsnext:main": "dist/preview release/es6.js", // BJS doesn't have this
  ..
}
Sounds like you're not using browserify or webpack and "module" and "jsnext" are only a hint for them, so that doesn't affect you, but that's a good way to see if it's official.
In your import you can specify that es6 file as per latest comment on issue:
https://github.com/BabylonJS/Babylon.js/issues/3314
 

import { Scene, Vector3 } from "babylonjs/es6"

I'm using babel with ES7 features to convert to target ES5 and then uglify, but with webpack.

 

[JCPalmer]

Ok, I think you guys are talking about the ES6 module type.  Where as I am talking about the ES6 Target type, where Typescript classes get transpiled into javascript classes, and basically everything in es6 EXCEPT modules.  I actually tried to get Typescript modules to transpile into ES2015 modules, but still get this transpiled:

var NameSpace;
(function (NameSpace) {

    . . . 
}) (NameSpace || (NameSpace = {}));

This is fine for me. I probably do not want to have to do imports anyway.  My target environment is Cordova.  I know Cordova uses Node to do its building, but I do not want to muck with that.  I am making all my hand-built code in a separate area using typescript, then just doing a simple copy to the Cordova project's "www" directory to deploy.  Pretty sure iOS & Android are good for most of ES6, but have not gotten ES6 code all the way through yet.

The good news is, I just did a test against the current CDN (3.1.1) babylon.  There I put a small script tag in the html for simplicity.  This tag has an ES6 subclass of BABYLON.Mesh generated from Tower of Babel Blender exporter.  It works fine! I have a constructor.  It is calling super(), as well as setVerticesData() & setIndices().  The problem a few posts back was, I converted my QI extension to Target ES6, but had not modified the exporter from ES3, so probably an ES3 "faked" class cannot "fake subclass" an ES6 class.

Here is the script tag from the test:

var TEST;
(function (TEST) {
    function CONTIG(array, offset, begin, end) {
        for(var i = 0, len = 1 + end - begin; i < len; i++) {
            array[offset + i] = begin + i;
        }
    }
    class Mesh extends BABYLON.Mesh {
        constructor(name, scene, parent = null, source, doNotCloneChildren) {
            super(name, scene, parent, source, doNotCloneChildren);
            
            this.setVerticesData(BABYLON.VertexBuffer.PositionKind, new Float32Array([
                1,-1,-1,-1,-1,1,1,-1,1,-1,1,1,1,1,-1,1,1,1,1,1,1,1,-1,-1,1,-1,1,1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,-1,1,1,-1,-1,1,1,-1,1,-1,1,1
                ,1,1,1,-1,-1,-1,-1,1,-1,1,1,-1,-1,1,-1,-1,1,-1,-1,-1,1
            ]),
            false);

            let _i = new Uint32Array(36);
            CONTIG(_i, 0, 0, 17);
            _i.set([0,18,1,3,19,4,6,20,7,9,21,10,12,22,13,15,23,16], 18);
            this.setIndices(_i);
        }
    }
    TEST.Mesh = Mesh;
})(TEST || (TEST = {}));  

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true, { stencil: true });
var scene = new BABYLON.Scene(engine);

new BABYLON.PointLight("Lamp", new BABYLON.Vector3(4.08,5.90,-3.98), scene);
var camera = new BABYLON.UniversalCamera("Camera", new BABYLON.Vector3(7.48,5.34,-6.51), scene);
camera.rotation = new BABYLON.Vector3(.46,-.81,0);
scene.setActiveCameraByID("Camera");

new TEST.Mesh('name', scene);

engine.runRenderLoop(function () {
    scene.render();
});

 

[brianzinn]

I kind of meant both, that's why I said that I target ES5 at the end of my comment. Since you're not getting the expected output, what is your tsconfig.json file 'target' set as? ie: ES5.  Cheers.

[JCPalmer]

    "compilerOptions": {
        "module": "esnext",
        "target": "es6",
        "noImplicitAny": true,
        "removeComments": true,
        "declaration": true,
        "outDir": "./out"
    },

I do not show a 'es2018' for a target in my dropdown.  Above is one of the last ones I tried.  I double checked my version of tsc, which is 2.7.2.  Thanks for pointing out that something is not right, even though I get the result I want.

In fact, if I use 'system' as a module, then I can specify outFile & get everything I need already merged to 1 file.  I am still using files to control order, but since I use references in all the .ts files, I am not sure I need to do this.