Merge pull request #3100 from RaananW/npm-gulp-inspector-preps

Preparing for including the inspector in npm

Tools/Gulp/config.json

@@ -242,7 +242,7 @@
             "dependUpon": [
                 "core"
             ]
-        },    
+        },
         "instrumentation": {
             "files": [
                 "../../src/Instrumentation/babylon.engineInstrumentation.js",
@@ -252,7 +252,7 @@
             "dependUpon": [
                 "core"
             ]
-        },      
+        },
         "cameraBehaviors": {
             "files": [
                 "../../src/Behaviors/Cameras/babylon.framingBehavior.js",
@@ -405,7 +405,7 @@
                 "defaultUboDeclaration",
                 "shadowsFragmentFunctions",
                 "fresnelFunction",
-                "reflectionFunction",                
+                "reflectionFunction",
                 "imageProcessingDeclaration",
                 "imageProcessingFunctions",
                 "bumpFragmentFunctions",
@@ -461,7 +461,7 @@
                 "shadowsFragmentFunctions",
                 "pbrFunctions",
                 "imageProcessingDeclaration",
-                "imageProcessingFunctions",                
+                "imageProcessingFunctions",
                 "harmonicsFunctions",
                 "pbrLightFunctions",
                 "helperFunctions",
@@ -1594,7 +1594,8 @@
                 ],
                 "output": "babylon.inspector.js",
                 "webpack": "../../inspector/webpack.config.js",
-                "bundle": "true"
+                "bundle": "true",
+                "moduleDeclaration": "GUI"
             }
         ],
         "build": {

Tools/Gulp/gulp-addModuleExports.js

@@ -1,34 +1,45 @@
 var gutil = require('gulp-util');
 var through = require('through2');
 
-module.exports = function (varName, subModule, extendsRoot) {
+/**
+ * The parameters for this function has grown during development.
+ * Eventually, this function will need to be reorganized. 
+ */
+module.exports = function (varName, subModule, extendsRoot, requireOnly) {
     return through.obj(function (file, enc, cb) {
 
-        var optionalRequire = `var babylonDependency; try { babylonDependency = BABYLON || (typeof require !== 'undefined' && require("../babylon.max")); } catch (e) { babylonDependency = BABYLON || (typeof require !== 'undefined' && require("babylonjs")); } 
+        var optionalRequire = `var globalObject = (typeof global !== 'undefined') ? global : ((typeof window !== 'undefined') ? window : this);
+var babylonDependency = (globalObject && globalObject.BABYLON) || BABYLON || (typeof require !== 'undefined' && require("babylonjs"));
 var BABYLON = babylonDependency;
 `;
         function moduleExportAddition(varName) {
 
-            let basicInit = `root["BABYLON"]${(subModule && !extendsRoot) ? '["' + varName + '"]' : ''} = factory();`;
+            let base = subModule ? 'BABYLON' : varName;
+
+            let basicInit = `root["${base}"]${(subModule && !extendsRoot) ? '["' + varName + '"]' : ''} = f;`;
+            let sadGlobalPolution = (!subModule) ? `var globalObject = (typeof global !== 'undefined') ? global : ((typeof window !== 'undefined') ? window : this);
+globalObject["${base}"] = f;` : '';
             /*if (extendsRoot) {
                 basicInit = `__extends(root["BABYLON"], factory()); `
             }*/
 
             return `\n\n(function universalModuleDefinition(root, factory) {
-                if (root && root["BABYLON"]) {
+                if (root && root["${base}"]) {
                     return;
                 }
+                var f = factory();
+                ${sadGlobalPolution}
     if(typeof exports === 'object' && typeof module === 'object')
-        module.exports = factory();
+        module.exports = f;
     else if(typeof define === 'function' && define.amd)
         define([], factory);
     else if(typeof exports === 'object')
-        exports["${varName}"] = factory();
+        exports["${varName}"] = f;
     else {
         ${basicInit}
     }
 })(this, function() {
-    return BABYLON${(subModule && !extendsRoot) ? '.' + varName : ''};
+    return ${base}${(subModule && !extendsRoot) ? '.' + varName : ''};
 });
 `;
         }
@@ -65,10 +76,13 @@ var BABYLON = babylonDependency;
         }
 
         try {
-            let pretext = subModule ? optionalRequire : '';
-            file.contents = new Buffer(pretext.concat(decorateAddition).concat(new Buffer(extendsAddition.concat(String(file.contents)).concat(moduleExportAddition(varName)))));
+            if (requireOnly) {
+                file.contents = new Buffer(optionalRequire.concat(String(file.contents)));
+            } else {
+                let pretext = subModule ? optionalRequire : '';
+                file.contents = new Buffer(pretext.concat(decorateAddition).concat(new Buffer(extendsAddition.concat(String(file.contents)).concat(moduleExportAddition(varName)))));
+            }
             this.push(file);
-
         } catch (err) {
             this.emit('error', new gutil.PluginError('gulp-add-module-exports', err, { fileName: file.path }));
         }

Tools/Gulp/gulpfile.js

@@ -402,6 +402,7 @@ var buildExternalLibrary = function (library, settings, watch) {
             return waitAll.on("end", function () {
                 webpack(require(library.webpack))
                     .pipe(rename(library.output.replace(".js", ".bundle.js")))
+                    .pipe(addModuleExports(library.moduleDeclaration, false, false, true))
                     .pipe(gulp.dest(outputDirectory))
             });
         }
@@ -474,21 +475,21 @@ gulp.task("typescript-all", function (cb) {
  */
 gulp.task("watch", [], function () {
     var interval = 1000;
-    var tasks = [gulp.watch(config.typescript, { interval: interval}, ["typescript-compile"])];
+    var tasks = [gulp.watch(config.typescript, { interval: interval }, ["typescript-compile"])];
 
     config.modules.map(function (module) {
         config[module].libraries.map(function (library) {
-            tasks.push(gulp.watch(library.files, { interval: interval}, function () {
+            tasks.push(gulp.watch(library.files, { interval: interval }, function () {
                 console.log(library.output);
                 return buildExternalLibrary(library, config[module], true)
                     .pipe(debug());
             }));
-            tasks.push(gulp.watch(library.shaderFiles, { interval: interval}, function () {
+            tasks.push(gulp.watch(library.shaderFiles, { interval: interval }, function () {
                 console.log(library.output);
                 return buildExternalLibrary(library, config[module], true)
                     .pipe(debug())
             }));
-            tasks.push(gulp.watch(library.sassFiles, { interval: interval}, function () {
+            tasks.push(gulp.watch(library.sassFiles, { interval: interval }, function () {
                 console.log(library.output);
                 return buildExternalLibrary(library, config[module], true)
                     .pipe(debug())

Tools/Publisher/index.js

@@ -35,6 +35,10 @@ let packages = [
     {
         name: 'proceduralTextures',
         path: basePath + '/proceduralTexturesLibrary/'
+    },
+    {
+        name: 'inspector',
+        path: basePath + '/inspector/'
     }
 ];
 

dist/preview release/inspector/package.json

@@ -0,0 +1,33 @@
+{
+    "author": {
+        "name": "David CATUHE"
+    },
+    "name": "babylonjs-inspector",
+    "description": "The Babylon.js inspector.",
+    "version": "3.1.0-beta1.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/BabylonJS/Babylon.js.git"
+    },
+    "main": "babylonjs.inspector.bundle.js",
+    "files": [
+        "babylonjs.inspector.bundle.js",
+        "readme.md",
+        "package.json"
+    ],
+    "keywords": [
+        "3D",
+        "javascript",
+        "html5",
+        "webgl",
+        "babylonjs",
+        "inspector"
+    ],
+    "license": "Apache-2.0",
+    "peerDependencies": {
+        "babylonjs": ">=3.1.0-alpha"
+    },
+    "engines": {
+        "node": "*"
+    }
+}

dist/preview release/inspector/readme.md

@@ -0,0 +1,34 @@
+Babylon.js inspector module
+=====================
+
+For usage documentation please visit http://doc.babylonjs.com/how_to/debug_layer and search "inspector".
+
+# Installation instructions
+
+The inspector will be **automatically** (async) loaded when starting the debug layer, if not already included. So technically, nothing needs to be done!
+
+If you wish however to use a different version of the inspector or host it on your own, follow these instructions:
+
+## CDN
+
+The latest compiled js file is offered on our public CDN here:
+
+* https://preview.babylonjs.com/inspector/babylonjs.inspector.bundle.js
+
+## NPM
+
+To install using npm :
+
+```
+npm install --save babylonjs babylonjs-inspector
+```
+Afterwards it can be imported to the project using:
+
+```
+import * as BABYLON from 'babylonjs';
+import 'babylonjs-inspector';
+```
+
+This will create a global INSPECTOR variable that will be used bay BabylonJS
+
+Webpack is supported.

inspector/webpack.config.js

@@ -4,7 +4,7 @@ module.exports = {
         "../../dist/preview release/inspector/babylon.inspector.min.js"
     ],
     output: {
-        libraryTarget: "var",
+        libraryTarget: "umd",
         library: "INSPECTOR",
         umdNamedDefine: true
     },