Merge pull request #4046 from RaananW/viewer-declaration

Viewer declaration

Tools/Gulp/config.json

@@ -1746,6 +1746,12 @@
         ],
         "build": {
             "srcOutputDirectory": "../../Viewer/",
+            "dtsBundle": {
+                "name": "babylonjs-viewer",
+                "main": "../../Viewer/src/index.d.ts",
+                "out": "../../dist/preview release/viewer/babylon.viewer.module.d.ts",
+                "prependText": "/// <reference path=\"./babylon.d.ts\"/>"
+            },
             "outputs": [
                 {
                     "destination": [

Tools/Gulp/gulpfile.js

@@ -29,6 +29,8 @@ var typedoc = require("gulp-typedoc");
 var validateTypedoc = require("./gulp-validateTypedoc");
 var request = require('request');
 var fs = require("fs");
+var dtsBundle = require('dts-bundle');
+const through = require('through2');
 var karmaServer = require('karma').Server;
 
 var config = require("./config.json");
@@ -440,7 +442,37 @@ var buildExternalLibrary = function (library, settings, watch) {
             let sequence = [waitAll];
             let wpBuild = webpack(require(library.webpack));
             if (settings.build.outputs) {
+                //shoud dtsBundle create the declaration?
+                if (settings.build.dtsBundle) {
+                    let event = wpBuild
+                        .pipe(through.obj(function (file, enc, cb) {
+                            // only declaration files
+                            const isdts = /\.d\.ts$/.test(file.path);
+                            if (isdts) this.push(file);
+                            cb();
+                        }))
+                        .pipe(gulp.dest('.'));
+                    // dts-bundle does NOT support (gulp) streams, so files have to be saved and reloaded, 
+                    // until I fix it
+                    event.on("end", function () {
+                        // create the file
+                        dtsBundle.bundle(settings.build.dtsBundle);
+                        // prepend the needed reference
+                        fs.readFile(settings.build.dtsBundle.out, function (err, data) {
+                            if (err) throw err;
+                            data = settings.build.dtsBundle.appendText + data.toString();
+                            fs.writeFile(settings.build.dtsBundle.out, data);
+                        });
+                    });
+                }
+
                 let build = wpBuild
+                    .pipe(through.obj(function (file, enc, cb) {
+                        // only pipe js files
+                        const isJs = /\.js$/.test(file.path);
+                        if (isJs) this.push(file);
+                        cb();
+                    }))
                     .pipe(addModuleExports(library.moduleDeclaration, { subModule: false, extendsRoot: false, externalUsingBabylon: true, noBabylonInit: library.babylonIncluded }));
 
                 let unminifiedOutpus = [];

Tools/Gulp/package.json

@@ -62,5 +62,9 @@
     },
     "scripts": {
         "install": "npm --prefix ../../Playground/ install ../../Playground/ && npm --prefix ../../tests/unit/ install ../../tests/unit/ && gulp deployLocalDev"
+    },
+    "dependencies": {
+        "dts-bundle": "^0.7.3",
+        "gulp-clean": "^0.4.0"
     }
 }

Viewer/src/index.ts

@@ -17,7 +17,7 @@ import { PromisePolyfill } from 'babylonjs';
 
 // load needed modules.
 import 'babylonjs-loaders';
-import '../assets/pep.min';
+import 'pep';
 
 
 import { InitTags } from './initializer';

Viewer/tsconfig-gulp.json

@@ -3,14 +3,14 @@
         "target": "es5",
         "module": "commonjs",
         "noResolve": false,
-        "noImplicitAny": false, //mainly due to usage of external libs without typings.
+        "noImplicitAny": false,
         "strictNullChecks": true,
-        "removeComments": true,
+        "removeComments": false,
         "preserveConstEnums": true,
         "sourceMap": false,
         "experimentalDecorators": true,
         "isolatedModules": false,
-        "declaration": false,
+        "declaration": true,
         "lib": [
             "dom",
             "es2015.promise",
@@ -26,9 +26,6 @@
             ],
             "babylonjs-loaders": [
                 "../dist/preview release/loaders/babylonjs.loaders.d.ts"
-            ],
-            "babylonjs-gltf2interface": [
-                "../dist/babylon.glTF2Interface.d.ts"
             ]
         }
     },

Viewer/webpack.config.js

@@ -19,7 +19,7 @@ module.exports = {
             "babylonjs": __dirname + '/../dist/preview release/babylon.max.js',
             "babylonjs-materials": __dirname + '/../dist/preview release/materialsLibrary/babylonjs.materials.js',
             "babylonjs-loaders": __dirname + '/../dist/preview release/loaders/babylonjs.loaders.js',
-            "deepmerge": __dirname + '/assets/deepmerge.min.js'
+            "pep": __dirname + '/assets/pep.min.js'
         }
     },
     externals: {

Viewer/webpack.gulp.config.js

@@ -23,7 +23,7 @@ module.exports = {
             "babylonjs-materials": __dirname + '/../dist/preview release/materialsLibrary/babylonjs.materials.js',
             "babylonjs-loaders": __dirname + '/../dist/preview release/loaders/babylonjs.loaders.js',
             // "es6-promise": __dirname + '/assets/es6-promise.min.js',
-            "deepmerge": __dirname + '/assets/deepmerge.min.js',
+            "pep": __dirname + '/assets/pep.min.js',
         }
     },
     module: {

dist/preview release/viewer/package.json

@@ -12,7 +12,6 @@
     "main": "babylon.viewer.js",
     "files": [
         "babylon.viewer.js",
-        "babylon.viewer.d.ts",
         "babylon.viewer.module.d.ts",
         "babylon.d.ts",
         "readme.md",

dist/preview release/viewer/readme.md

@@ -48,7 +48,9 @@ npm install --save babylonjs-viewer
 Afterwards it can be imported to the project using:
 
 ```javascript
-import from 'babylonjs-viewer';
+import * as BabylonViewer from 'babylonjs-viewer';
+
+BabylonViewer.InitTags("my-tag");
 ```
 
 This will enable the BabylonViewer namespace.
@@ -57,13 +59,4 @@ Using webpack to package your project will use the minified js file.
 
 ## TypeScript
 
-If you use the npm package, starting 3.2.0-alpha8 the babylon viewer has a module declaration file that also includes the BABYLON namespace.
-
-Using TypeScript and NPM you could do the following:
-
-```javascript
-import from 'babylonjs-viewer';
-
-// both namespaces are now available
-console.log(BabylonViewer, BABYLON)
-```
+If you use the npm package, starting 3.2.0-alpha8 the babylon viewer has a fully documented declaration file.

dist/preview release/what's new.md

@@ -111,6 +111,7 @@
 - Return animation groups when calling `SceneLoader.ImportMesh`. ([bghgary](https://github.com/bghgary)]
 - Add support for normalized and non-float data to `Buffer` and `VertexBuffer`. ([bghgary](https://github.com/bghgary)]
 - Added unlit material extension support to glTF 2.0 loader. ([bghgary](https://github.com/bghgary))
+- (Viewer) Viewer's declaration file automatically generated ([RaananW](https://github.com/RaananW))
 
 ## Bug fixes