Merge pull request #4416 from RaananW/viewer-modules

Initial implementation of the babylonjs-viewer-assets package

Tools/Gulp/config.json

@@ -1835,7 +1835,7 @@
             "dtsBundle": {
                 "name": "babylonjs-viewer",
                 "main": "../../Viewer/dist/build/src/index.d.ts",
-                "out": "../../dist/preview release/viewer/babylon.viewer.module.d.ts",
+                "out": "../../../../dist/preview release/viewer/babylon.viewer.module.d.ts",
                 "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": [

Tools/Gulp/gulpfile.js

@@ -466,12 +466,13 @@ var buildExternalLibrary = function (library, settings, watch) {
                         // create the file
                         dtsBundle.bundle(settings.build.dtsBundle);
                         // prepend the needed reference
-                        fs.readFile(settings.build.dtsBundle.out, function (err, data) {
+                        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();
-                            fs.writeFile(settings.build.dtsBundle.out, data);
+                            fs.writeFile(fileLocation, data);
                             var newData = processViewerDeclaration(data);
-                            fs.writeFile(settings.build.dtsBundle.out.replace('.module', ''), newData);
+                            fs.writeFile(fileLocation.replace('.module', ''), newData);
                         });
                     });
                 }

Viewer/src/assets/font.ts

@@ -0,0 +1 @@
+export const babylonFont = require('../../assets/babylon.woff');

Viewer/src/assets/img.ts

@@ -0,0 +1,5 @@
+export const babylonLogo = require('../../assets/img/BabylonJS_Logo_Small.png');
+export const close = require('../../assets/img/close.png');
+export const fullscreen = require('../../assets/img/fullscreen.png');
+export const helpCircle = require('../../assets/img/help-circle.png');
+export const loading = require('../../assets/img/loading.png');

Viewer/src/assets/index.ts

@@ -0,0 +1,3 @@
+export * from './font';
+export * from './img';
+export * from './templates';

Viewer/src/assets/templates.ts

@@ -0,0 +1,9 @@
+export const defaultTemplate = require('../../assets/templates/default/defaultTemplate.html');
+export const defaultViewer = require('../../assets/templates/default/defaultViewer.html');
+export const error = require('../../assets/templates/default/error.html');
+export const fillContainer = require('../../assets/templates/default/fillContainer.html');
+export const help = require('../../assets/templates/default/help.html');
+export const loadingScreen = require('../../assets/templates/default/loadingScreen.html');
+export const navbar = require('../../assets/templates/default/navbar.html');
+export const overlay = require('../../assets/templates/default/overlay.html');
+export const share = require('../../assets/templates/default/share.html');

Viewer/src/configuration/types/default.ts

@@ -1,4 +1,7 @@
-import { ViewerConfiguration } from './../configuration';
+import { ViewerConfiguration } from '../configuration';
+import { defaultTemplate, fillContainer, loadingScreen, defaultViewer, navbar, overlay, help, share, error } from 'babylonjs-viewer-assets';
+import { babylonFont } from 'babylonjs-viewer-assets';
+import * as images from 'babylonjs-viewer-assets';
 
 /**
  * The default configuration of the viewer, including templates (canvas, overly, loading screen)
@@ -8,33 +11,33 @@ export let defaultConfiguration: ViewerConfiguration = {
     version: "3.2.0-alpha4",
     templates: {
         main: {
-            html: require("../../../assets/templates/default/defaultTemplate.html"),
+            html: defaultTemplate,
             params: {
-                babylonFont: require('../../../assets/babylon.woff'),
+                babylonFont: babylonFont,
                 noEscape: true
             }
         },
         fillContainer: {
-            html: require("../../../assets/templates/default/fillContainer.html"),
+            html: fillContainer,
             params: {
                 disable: false
             }
         },
         loadingScreen: {
-            html: require("../../../assets/templates/default/loadingScreen.html"),
+            html: loadingScreen,
             params: {
                 backgroundColor: "#000000",
-                loadingImage: require('../../../assets/img/loading.png')
+                loadingImage: images.loading
             }
         },
         viewer: {
-            html: require("../../../assets/templates/default/defaultViewer.html"),
+            html: defaultViewer,
             params: {
                 enableDragAndDrop: false
             }
         },
         navBar: {
-            html: require("../../../assets/templates/default/navbar.html"),
+            html: navbar,
             params: {
                 speedList: {
                     "0.5x": "0.5",
@@ -42,7 +45,7 @@ export let defaultConfiguration: ViewerConfiguration = {
                     "1.5x": "1.5",
                     "2.0x": "2.0",
                 },
-                logoImage: require('../../../assets/img/BabylonJS_Logo_Small.png'),
+                logoImage: images.babylonLogo,
                 logoText: 'BabylonJS',
                 logoLink: 'https://babylonjs.com',
                 hideHelp: true,
@@ -62,20 +65,20 @@ export let defaultConfiguration: ViewerConfiguration = {
             }
         },
         overlay: {
-            html: require("../../../assets/templates/default/overlay.html"),
+            html: overlay,
             params: {
-                closeImage: require('../../../assets/img/close.png'),
+                closeImage: images.close,
                 closeText: 'Close'
             }
         },
         help: {
-            html: require("../../../assets/templates/default/help.html")
+            html: help
         },
         share: {
-            html: require("../../../assets/templates/default/share.html")
+            html: share
         },
         error: {
-            html: require("../../../assets/templates/default/error.html")
+            html: error
         }
 
     },

Viewer/src/configuration/types/minimal.ts

@@ -1,4 +1,6 @@
 import { ViewerConfiguration } from './../configuration';
+import { defaultTemplate, fillContainer, loadingScreen, defaultViewer, overlay, error } from 'babylonjs-viewer-assets';
+import { loading, close } from 'babylonjs-viewer-assets';
 
 /**
  * The minimal configuration needed to make the viewer work.
@@ -8,33 +10,33 @@ export let minimalConfiguration: ViewerConfiguration = {
     version: "0.1",
     templates: {
         main: {
-            html: require("../../../assets/templates/default/defaultTemplate.html")
+            html: defaultTemplate
         },
         fillContainer: {
-            html: require("../../../assets/templates/default/fillContainer.html"),
+            html: fillContainer,
             params: {
                 disable: false
             }
         },
         loadingScreen: {
-            html: require("../../../assets/templates/default/loadingScreen.html"),
+            html: loadingScreen,
             params: {
                 backgroundColor: "#000000",
-                loadingImage: require('../../../assets/img/loading.png')
+                loadingImage: loading
             }
         },
         viewer: {
-            html: require("../../../assets/templates/default/defaultViewer.html"),
+            html: defaultViewer,
         },
         overlay: {
-            html: require("../../../assets/templates/default/overlay.html"),
+            html: overlay,
             params: {
-                closeImage: require('../../../assets/img/close.png'),
+                closeImage: close,
                 closeText: 'Close'
             }
         },
         error: {
-            html: require("../../../assets/templates/default/error.html")
+            html: error
         }
 
     },

Viewer/tests/unit/tsconfig.json

@@ -2,24 +2,25 @@
     "compilerOptions": {
         "target": "es5",
         "module": "commonjs",
-        "noResolve": false,
-        "noImplicitAny": false,
-        "strictNullChecks": true,
-        "removeComments": true,
-        "preserveConstEnums": true,
-        "sourceMap": true,
+        "declaration": true,
         "experimentalDecorators": true,
-        "isolatedModules": false,
-        "declaration": false,
+        "emitDecoratorMetadata": true,
+        "moduleResolution": "node",
+        "strictNullChecks": true,
+        "noImplicitAny": false,
+        "noFallthroughCasesInSwitch": true,
+        "inlineSourceMap": true,
         "lib": [
+            "es5",
             "dom",
             "es2015.promise",
-            "es5"
-        ],
-        "types": [
-            "node"
+            "es2015.collection",
+            "es2015.iterable"
         ],
+        "skipDefaultLibCheck": true,
+        "skipLibCheck": true,
         "baseUrl": "./src/",
+        "rootDir": "./",
         "paths": {
             "babylonjs": [
                 "../../../../dist/preview release/babylon.d.ts"
@@ -29,6 +30,9 @@
             ],
             "babylonjs-gltf2interface": [
                 "../../../../dist/babylon.glTF2Interface.d.ts"
+            ],
+            "babylonjs-viewer-assets": [
+                "../../src/assets/"
             ]
         },
     },

Viewer/tests/unit/webpack.config.js

@@ -15,14 +15,13 @@ 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',
-            "pep": __dirname + '/../../assets/pep.min.js'
+            "babylonjs-viewer-assets": __dirname + '/../../src/assets/index.ts'
         }
     },
     externals: {
         // until physics will be integrated in the viewer, ignore cannon
         cannon: 'CANNON',
         oimo: 'OIMO',
-        './Oimo': 'OIMO',
         "earcut": true
     },
     devtool: 'source-map',

Viewer/tsconfig-gulp.json

@@ -36,6 +36,9 @@
             ],
             "handlebars": [
                 "./templates/handlebars.d.ts"
+            ],
+            "babylonjs-viewer-assets": [
+                "./assets/"
             ]
         },
         "outDir": "./dist/build"

Viewer/tsconfig.json

@@ -36,6 +36,12 @@
             ],
             "handlebars": [
                 "./templates/handlebars.d.ts"
+            ],
+            "babylonjs-viewer-assets": [
+                "./assets/"
+            ],
+            "babylonjs-viewer-assets/*": [
+                "./assets/*"
             ]
         },
         "outDir": "./dist/build"

Viewer/webpack.config.js

@@ -1,9 +1,51 @@
 const path = require('path');
 const webpack = require('webpack');
 
-module.exports = {
+module.exports = [{
     entry: {
-        'viewer': './src/index.ts'
+        'assets': './src/assets/index.ts'
+    },
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: '[name].js',
+        devtoolModuleFilenameTemplate: '[relative-resource-path]'
+    },
+    plugins: [
+        new webpack.WatchIgnorePlugin([
+            /\.d\.ts$/
+        ])
+    ],
+    resolve: {
+        extensions: ['.ts', '.js']
+    },
+    module: {
+        loaders: [{
+            test: /\.tsx?$/,
+            loader: 'ts-loader',
+            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'
+        }]
+    }
+},
+{
+    entry: {
+        'viewer': './src/index.ts',
     },
     output: {
         path: path.resolve(__dirname, 'dist'),
@@ -18,7 +60,8 @@ module.exports = {
         alias: {
             "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'
+            "babylonjs-loaders": __dirname + '/../dist/preview release/loaders/babylonjs.loaders.js',
+            "babylonjs-viewer-assets": __dirname + '/dist/assets.js'
         }
     },
     externals: {
@@ -63,4 +106,5 @@ module.exports = {
         //open: true,
         port: 9000
     }
-}
+}
+]

Viewer/webpack.gulp.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-    // context: __dirname,
+    //context: __dirname,
     entry: [
         __dirname + '/src/index.ts'
     ]
@@ -19,7 +19,8 @@ module.exports = {
         alias: {
             "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'
+            "babylonjs-loaders": __dirname + '/../dist/preview release/loaders/babylonjs.loaders.js',
+            "babylonjs-viewer-assets": __dirname + '/src/assets/index.ts'
         }
     },
     module: {

dist/preview release/what's new.md

@@ -40,6 +40,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))
 
 ### Documentation