Merge pull request #4426 from RaananW/viewer-modules

assets npm package, repacking viewer

Tools/Gulp/config.json

@@ -1263,7 +1263,8 @@
         "serializers",
         "inspector",
         "gui",
-        "viewer"
+        "viewer",
+        "viewer-assets"
     ],
     "materialsLibrary": {
         "libraries": [
@@ -1853,6 +1854,7 @@
                 "name": "babylonjs-viewer",
                 "main": "../../Viewer/dist/build/src/index.d.ts",
                 "out": "../../../../dist/preview release/viewer/babylon.viewer.module.d.ts",
+                "legacyDeclaration": true,
                 "prependText": "/// <reference path=\"./babylon.d.ts\"/>\n/// <reference path=\"./babylon.glTF2Interface.d.ts\"/>\n/// <reference path=\"./babylonjs.loaders.d.ts\"/>\ndeclare module \"babylonjs-loaders\"{ export=BABYLON;}\n"
             },
             "outputs": [
@@ -1888,5 +1890,41 @@
                 }
             ]
         }
+    },
+    "viewer-assets": {
+        "libraries": [
+            {
+                "files": [],
+                "noBundleInName": true,
+                "output": "babylon.viewer.assets.js",
+                "webpack": "../../Viewer/webpack.assets.config.js",
+                "bundle": "true",
+                "moduleDeclaration": {
+                    "name": "BabylonViewerAssets",
+                    "module": "babylonjs-viewer-assets"
+                },
+                "babylonIncluded": true
+            }
+        ],
+        "build": {
+            "srcOutputDirectory": "../../Viewer/",
+            "dtsBundle": {
+                "name": "babylonjs-viewer-assets",
+                "baseDir": "../../Viewer/dist/build/src/assets/",
+                "main": "../../Viewer/dist/build/src/assets/index.d.ts",
+                "out": "../../../build/assets/babylon.viewer.assets.module.d.ts"
+            },
+            "outputs": [
+                {
+                    "destination": [
+                        {
+                            "filename": "babylon.viewer.assets.js",
+                            "outputDirectory": "/../../Viewer/dist/build/assets/"
+                        }
+                    ],
+                    "minified": true
+                }
+            ]
+        }
     }
 }

Tools/Gulp/gulpfile.js

@@ -469,10 +469,12 @@ var buildExternalLibrary = function (library, settings, watch) {
                         let fileLocation = path.join(path.dirname(settings.build.dtsBundle.main), settings.build.dtsBundle.out);
                         fs.readFile(fileLocation, function (err, data) {
                             if (err) throw err;
-                            data = settings.build.dtsBundle.prependText + '\n' + data.toString();
+                            data = (settings.build.dtsBundle.prependText || "") + '\n' + data.toString();
                             fs.writeFile(fileLocation, data);
-                            var newData = processViewerDeclaration(data);
-                            fs.writeFile(fileLocation.replace('.module', ''), newData);
+                            if (settings.build.dtsBundle.legacyDeclaration) {
+                                var newData = processViewerDeclaration(data);
+                                fs.writeFile(fileLocation.replace('.module', ''), newData);
+                            }
                         });
                     });
                 }

Tools/Publisher/index.js

@@ -1,6 +1,7 @@
 let prompt = require('prompt');
 let shelljs = require('shelljs');
 let fs = require('fs-extra');
+let path = require('path');
 
 let basePath = '../../dist/preview release';
 
@@ -46,7 +47,20 @@ let packages = [
     },
     {
         name: 'viewer',
-        path: basePath + '/viewer/'
+        path: basePath + '/../../Viewer/',
+        required: [
+            basePath + '/viewer/readme.md',
+            basePath + '/viewer/package.json',
+            basePath + '/viewer/babylon.viewer.js'
+        ]
+    },
+    {
+        name: 'viewer-assets',
+        path: basePath + '/../../Viewer/dist/build/assets/',
+        required: [
+            basePath + '/../../Viewer/assets/readme.md',
+            basePath + '/../../Viewer/assets/package.json',
+        ]
     }
 ];
 
@@ -71,7 +85,16 @@ function processPackages(version) {
     packages.forEach((package) => {
         if (package.name === "core") {
             processCore(package, version);
+        } else if (package.name === "viewer") {
+            processViewer(package, version);
         } else {
+
+            if (package.required) {
+                package.required.forEach(file => {
+                    fs.copySync(file, package.path + '/' + path.basename(file));
+                });
+            }
+
             let packageJson = require(package.path + 'package.json');
             packageJson.version = version;
             if (packageJson.dependencies) {
@@ -83,14 +106,8 @@ function processPackages(version) {
             }
             if (packageJson.peerDependencies) packageJson.peerDependencies.babylonjs = minimumDependency;
             fs.writeFileSync(package.path + 'package.json', JSON.stringify(packageJson, null, 4));
-            console.log('Publishing ' + package.name + " from " + package.path);
-            let tagDef = "";
-            // check for alpha or beta
-            if (version.indexOf('alpha') !== -1 || version.indexOf('beta') !== -1) {
-                tagDef = '--tag preview';
-            }
-            //publish the respected package
-            shelljs.exec('npm publish \"' + package.path + "\"" + ' ' + tagDef);
+
+            publish(version, package.name, package.path);
         }
 
     });
@@ -153,18 +170,6 @@ function processCore(package, version) {
         }
     ];
 
-    // remove the modules for now
-    /*fs.readdirSync(basePath + '/modules/').forEach(object => {
-        console.log(object);
-        if (fs.statSync(basePath + '/modules/' + object).isDirectory) {
-            files.push({
-                path: basePath + '/modules/' + object,
-                objectName: object,
-                isDir: true
-            });
-        }
-    })*/
-
     //copy them to the package path
     files.forEach(file => {
         fs.copySync(file.path, basePath + '/package/' + file.objectName);
@@ -189,16 +194,7 @@ function processCore(package, version) {
 
     fs.writeFileSync(basePath + '/package/' + 'package.json', JSON.stringify(packageJson, null, 4));
 
-    console.log('Publishing ' + package.name + " from " + basePath + '/package/');
-
-    let tagDef = "";
-    // check for alpha or beta
-    if (version.indexOf('alpha') !== -1 || version.indexOf('beta') !== -1) {
-        tagDef = '--tag preview';
-    }
-
-    //publish the respected package
-    shelljs.exec('npm publish \"' + basePath + '/package/' + "\"" + ' ' + tagDef);
+    publish(version, package.name, basePath + '/package/');
 
     // remove package directory
     fs.removeSync(basePath + '/package/');
@@ -217,3 +213,63 @@ function processCore(package, version) {
     fs.writeFileSync(package.path + 'package.json', JSON.stringify(packageJson, null, 4));
 }
 
+function processViewer(package, version) {
+
+    let buildPath = package.path + "dist/build/src/";
+    let projectPath = '../../Viewer';
+
+    if (package.required) {
+        package.required.forEach(file => {
+
+            fs.copySync(file, buildPath + '/' + path.basename(file));
+        });
+    }
+    // the viewer needs to be built using tsc on the viewer's main repository
+
+    // build the viewer
+    console.log("executing " + 'tsc -p ' + projectPath);
+    shelljs.exec('tsc -p ' + projectPath);
+
+    let packageJson = require(buildPath + '/package.json');
+
+    let files = getFiles(buildPath).map(f => f.replace(buildPath + "/", "")).filter(f => f.indexOf("assets/") === -1);
+
+    packageJson.files = files;
+    packageJson.version = version;
+    packageJson.module = "index.js";
+    packageJson.main = "babylon.viewer.js";
+    packageJson.typings = "index.d.ts";
+
+    fs.writeFileSync(buildPath + '/package.json', JSON.stringify(packageJson, null, 4));
+
+    publish(version, package.name, buildPath);
+
+}
+
+function publish(version, packageName, basePath) {
+    console.log('Publishing ' + packageName + " from " + basePath);
+
+    let tagDef = "";
+    // check for alpha or beta
+    if (version.indexOf('alpha') !== -1 || version.indexOf('beta') !== -1) {
+        tagDef = '--tag preview';
+    }
+
+    //publish the respected package
+    console.log("executing " + 'npm publish \"' + basePath + "\"" + ' ' + tagDef);
+    shelljs.exec('npm publish \"' + basePath + "\"" + ' ' + tagDef);
+}
+
+function getFiles(dir, files_) {
+    files_ = files_ || [];
+    var files = fs.readdirSync(dir);
+    for (var i in files) {
+        var name = dir + '/' + files[i];
+        if (fs.statSync(name).isDirectory()) {
+            getFiles(name, files_);
+        } else {
+            files_.push(name);
+        }
+    }
+    return files_;
+}

Viewer/assets/package.json

@@ -0,0 +1,31 @@
+{
+    "author": {
+        "name": "Raanan Weber"
+    },
+    "name": "babylonjs-viewer-assets",
+    "description": "Compiled resources for the Babylon viewer.",
+    "version": "3.3.0-alpha.3",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/BabylonJS/Babylon.js.git"
+    },
+    "main": "bbabylon.viewer.assets.js",
+    "files": [
+        "babylon.viewer.assets.js",
+        "babylon.viewer.assets.module.d.ts",
+        "readme.md",
+        "package.json"
+    ],
+    "typings": "babylon.viewer.assets.module.d.ts",
+    "keywords": [
+        "3D",
+        "javascript",
+        "html5",
+        "webgl",
+        "viewer"
+    ],
+    "license": "Apache-2.0",
+    "engines": {
+        "node": "*"
+    }
+}

Viewer/assets/readme.md

@@ -0,0 +1,19 @@
+# Babylon.js Viewer Assets
+
+Babylon's viewer assets package contains all needed binsry assets neeed for the proper operation of the viewer's templating system.
+
+This packes is only needed when intalling the viewer's npm package and is installed  and used automatically.
+
+For basic and advanced viewer usage instructions please read the doc at https://doc.babylonjs.com/extensions/the_babylon_viewer
+
+The source code can be found at https://github.com/BabylonJS/Babylon.js/tree/master/Viewer
+
+## Overriding the package
+
+To override the package when (for example) using webpack, define the package `babylonjs-viewer-assets` in "externals":
+
+```javascript
+externals: {
+    "babylonjs-viewer-assets": true
+}
+```

Viewer/src/index.ts

@@ -3,7 +3,7 @@ import { viewerGlobals } from './configuration/globals';
 import { viewerManager } from './viewer/viewerManager';
 import { DefaultViewer } from './viewer/defaultViewer';
 import { AbstractViewer } from './viewer/viewer';
-import { telemetryManager } from './telemetryManager';
+import { telemetryManager } from './managers/telemetryManager';
 import { ModelLoader } from './loader/modelLoader';
 import { ViewerModel, ModelState } from './model/viewerModel';
 import { AnimationPlayMode, AnimationState } from './model/modelAnimation';

Viewer/src/initializer.ts

@@ -1,6 +1,6 @@
 import { DefaultViewer } from './viewer/defaultViewer';
 import { mapperManager } from './configuration/mappers';
-import { viewerGlobals, disableInit } from './';
+import { viewerGlobals } from './configuration/globals';
 
 
 /**
@@ -11,7 +11,7 @@ export function initListeners() {
     document.addEventListener("DOMContentLoaded", init);
     function init(event) {
         document.removeEventListener("DOMContentLoaded", init);
-        if (viewerGlobals.disableInit || disableInit) return;
+        if (viewerGlobals.disableInit) return;
         InitTags();
     }
 }

Viewer/src/loader/plugins/applyMaterialConfig.ts

@@ -1,5 +1,4 @@
 import { ILoaderPlugin } from "./loaderPlugin";
-import { telemetryManager } from "../../telemetryManager";
 import { ViewerModel } from "../../model/viewerModel";
 import { Tools, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Material } from "babylonjs";
 import { IGLTFLoaderData, GLTF2 } from "babylonjs-loaders";

Viewer/src/loader/plugins/extendedMaterialLoaderPlugin.ts

@@ -1,5 +1,4 @@
 import { ILoaderPlugin } from "./loaderPlugin";
-import { telemetryManager } from "../../telemetryManager";
 import { ViewerModel } from "../../model/viewerModel";
 import { Color3, Texture, BaseTexture, Tools, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Material, PBRMaterial, Engine } from "babylonjs";
 

Viewer/src/loader/plugins/msftLodLoaderPlugin.ts

@@ -1,5 +1,4 @@
 import { ILoaderPlugin } from "./loaderPlugin";
-import { telemetryManager } from "../../telemetryManager";
 import { ViewerModel } from "../../model/viewerModel";
 import { Tools, ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs";
 import { IGLTFLoaderExtension, GLTF2 } from "babylonjs-loaders";

Viewer/src/loader/plugins/telemetryLoaderPlugin.ts

@@ -1,5 +1,5 @@
 import { ILoaderPlugin } from "./loaderPlugin";
-import { telemetryManager } from "../../telemetryManager";
+import { telemetryManager } from "../../managers/telemetryManager";
 import { ViewerModel } from "../../model/viewerModel";
 import { Tools, ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs";
 

Viewer/src/viewer/viewer.ts

@@ -10,7 +10,7 @@ import { ModelLoader } from '../loader/modelLoader';
 import { CameraBehavior } from '../interfaces';
 import { viewerGlobals } from '../configuration/globals';
 import { extendClassWithConfig } from '../helper';
-import { telemetryManager } from '../telemetryManager';
+import { telemetryManager } from '../managers/telemetryManager';
 import { deepmerge } from '../helper/';
 import { ObservablesManager } from '../managers/observablesManager';
 import { ConfigurationContainer } from '../configuration/configurationContainer';

Viewer/tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
         "target": "es2015",
-        "module": "es2015",
+        "module": "commonjs",
         "declaration": true,
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true,

Viewer/webpack.assets.config.js

@@ -0,0 +1,42 @@
+module.exports = {
+    entry: [
+        __dirname + '/src/assets/index.ts'
+    ],
+    output: {
+        libraryTarget: 'var',
+        library: 'BabylonViewerAssets',
+        umdNamedDefine: true
+    },
+    resolve: {
+        extensions: ['.ts']
+    },
+    module: {
+        loaders: [{
+            test: /\.tsx?$/,
+            use: {
+                loader: 'ts-loader',
+                options: {
+                    configFile: 'tsconfig-gulp.json'
+                }
+            },
+            exclude: /node_modules/
+        },
+        {
+            test: /\.(html)$/,
+            use: {
+                loader: 'html-loader',
+                options: {
+                    minimize: true
+                }
+            }
+        },
+        {
+            test: /\.(jpe?g|png|ttf|eot|svg?)(\?[a-z0-9=&.]+)?$/,
+            use: 'base64-image-loader?limit=1000&name=[name].[ext]'
+        },
+        {
+            test: /\.(woff|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+            loader: 'base64-font-loader'
+        }]
+    }
+}

Viewer/webpack.gulp.config.js

@@ -2,8 +2,7 @@ module.exports = {
     //context: __dirname,
     entry: [
         __dirname + '/src/index.ts'
-    ]
-    ,
+    ],
     output: {
         libraryTarget: 'var',
         library: 'BabylonViewer',

dist/preview release/viewer/package.json

@@ -31,5 +31,16 @@
     "license": "Apache-2.0",
     "engines": {
         "node": "*"
+    },
+    "dependencies": {
+        "deepmerge": "~2.1.1",
+        "handlebars": "~4.0.11",
+        "pepjs": "~0.4.3"
+    },
+    "peerDependencies": {
+        "babylonjs": ">3.3.0-alpha",
+        "babylonjs-loaders": ">3.3.0-alpha",
+        "babylonjs-gltf2interface": ">3.3.0-alpha",
+        "babylonjs-viewer-assets": ">3.3.0-alpha"
     }
 }

dist/preview release/what's new.md

@@ -44,7 +44,7 @@
 - Shadows will only render while models are entering the scene or animating ([RaananW](https://github.com/RaananW))
 - Support for model drag and drop onto the canvas ([RaananW](https://github.com/RaananW))
 - New lab feature - global light rotation [#4347](https://github.com/BabylonJS/Babylon.js/issues/4347) ([RaananW](https://github.com/RaananW))
-- New package - babylonjs-viewer-assets, to separate the binary assets and the code of the viewer ([RaananW](https://github.com/RaananW))
+- New NPM package - babylonjs-viewer-assets, to separate the binary assets and the code of the viewer ([RaananW](https://github.com/RaananW))
 
 ### Documentation