One more step

.gitignore

@@ -196,6 +196,7 @@ gui/dist/
 /Viewer/tests/tsc
 /Viewer/tests/tsc.cmd
 /Viewer/tests/tsserver
-/Viewer/tests/tsserver.cmd
-# Local Netlify folder
-.netlify
+/Viewer/tests/tsserver.cmd
+# Local Netlify folder
+.netlify
+Playground/public/dist/

Playground/public/index.js

@@ -1,3 +1,3 @@
 var hostElement = document.getElementById("host-element");
 
-PLAYGROUND.Playground.Show(hostElement);
+BABYLON.Playground.Show(hostElement);

Playground/src/tools/monacoManager.ts

@@ -1,4 +1,8 @@
 import 'monaco-editor/esm/vs/editor/editor.api';
+
+import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
+
 import { GlobalState } from '../globalState';
 
 declare type IStandaloneCodeEditor = import('monaco-editor/esm/vs/editor/editor.api').editor.IStandaloneCodeEditor;
@@ -29,8 +33,8 @@ var createScene = function() {
             globalState.onRunRequiredObservable.notifyObservers();
         });
     }
-    
-    public async setupMonacoAsync(hostElement: HTMLDivElement) {        
+
+    public async setupMonacoAsync(hostElement: HTMLDivElement) {
         // let response = await fetch("https://preview.babylonjs.com/babylon.d.ts");
         // if (!response.ok) {
         //     return;

Playground/webpack.config.js

@@ -2,20 +2,19 @@ const path = require("path");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const babylonWebpackConfig = require('../Tools/WebpackPlugins/babylonWebpackConfig');
 
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
 var config = babylonWebpackConfig({
     module: "playground",
-    entry: {
-        "babylon.playground": "./index.ts",
-        "editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js",
-        "ts.worker": "monaco-editor/esm/vs/language/typescript/ts.worker"
-    },
+    entry: "./legacy/legacy.ts",
     output: {
         globalObject: '(typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this)',
-        filename: "[name].bundle.js",
+        filename: "babylon.playground.bundle.js",
         path: path.resolve(__dirname, "public/dist"),
+        publicPath: "./dist/",
         libraryTarget: 'umd',
         library: {
-            root: ["PLAYGROUND"],
+           root: ["PLAYGROUND"],
         },
         umdNamedDefine: true
     },
@@ -51,6 +50,13 @@ var config = babylonWebpackConfig({
             // both options are optional
             filename: "[name].css",
             chunkFilename: "[id].css"
+        }),
+        new MonacoWebpackPlugin({
+            publicPath: "dist/",
+            languages: [ 
+                "typescript",
+                "javascript"
+            ]
         })
     ]
 });

Tools/Gulp/tasks/gulpTasks-apps.js

@@ -0,0 +1,71 @@
+// Gulp Tools
+var gulp = require("gulp");
+var webpack = require('webpack');
+var webpackStream = require("webpack-stream");
+var path = require("path");
+
+// Import Build Config
+var config = require("../../Config/config.js");
+
+/**
+ * Build a single app
+ */
+var buildApp = function(libraries, settings, isMin) {
+    // Convert Module to Namespace for globals
+    var outputDirectory = settings.computed.distDirectory;
+
+    // Webpack Config.
+    var wpConfig = require(settings.computed.webpackConfigPath);
+
+    // Create output by type (min vs max).
+    if (isMin) {
+        delete wpConfig.devtool;
+    }
+    else {
+        // Map Output
+        wpConfig.devtool = "source-map";
+        wpConfig.output.devtoolModuleFilenameTemplate = (info) => {
+            info.resourcePath = path.normalize(info.resourcePath);
+
+            if (!path.isAbsolute(info.resourcePath)) {
+                info.resourcePath = path.join(settings.computed.srcDirectory, info.resourcePath);
+            }
+
+            return `webpack://BABYLONJS/${path.relative(config.computed.rootFolder, info.resourcePath).replace(/\\/g, "/")}`;
+        };
+
+        // Generate unminified file.
+        wpConfig.mode = "development";
+    }
+
+    // Generate minified file.
+    let wpBuild = webpackStream({ config: wpConfig }, webpack);
+    return wpBuild.pipe(gulp.dest(outputDirectory));
+}
+
+/**
+ * Dynamic app creation In Serie for WebPack leaks.
+ */
+function buildAppLibraries(settings) {
+    // Creates the required tasks.
+    var tasks = [];
+
+    var buildMin = function() { return buildApp(settings.libraries, settings, true) };
+
+    tasks.push(buildMin);
+
+    return gulp.series.apply(this, tasks);
+}
+
+/**
+ * Dynamic app creation.
+ */
+config.apps.map(function(app) {
+    const settings = config[app];
+    gulp.task(app, buildAppLibraries(settings));
+});
+
+/**
+ * Build all libs.
+ */
+gulp.task("typescript-apps", gulp.series(config.apps));

Tools/Gulp/tasks/gulpTasks-watchApps.js

@@ -0,0 +1,47 @@
+// Import Dependencies.
+var gulp = require("gulp");
+var webpack = require('webpack');
+var webpackStream = require("webpack-stream");
+var path = require("path");
+
+// Read the full config.
+var config = require("../../Config/config.js");
+
+/**
+ * Watch ts files and fire repective tasks.
+ */
+gulp.task("watchApps", function startWatch() {
+    var tasks = [];
+
+    config.apps.map(function(module) {
+        var settings = config[module].computed;
+        if (!config[module].isCore && settings) {
+            var wpConfig = require(settings.webpackConfigPath);
+
+            // watch on.
+            wpConfig.watch = true;
+            // dev mode and absolute path sourcemaps for debugging
+            wpConfig.mode = "development";
+            wpConfig.devtool = "nosources-source-map";
+
+            // Source Map Remapping for dev tools.
+            wpConfig.output.devtoolModuleFilenameTemplate = (info) => {
+                info.resourcePath = path.normalize(info.resourcePath);
+
+                if (!path.isAbsolute(info.resourcePath)) {
+                    info.resourcePath = path.join(settings.srcDirectory, info.resourcePath);
+                }
+
+                return `../../../${path.relative(config.computed.rootFolder, info.resourcePath).replace(/\\/g, "/")}`;
+            };
+
+            var outputDirectory = settings.localDevUMDDirectory;
+            tasks.push(
+                webpackStream(wpConfig, webpack)
+                    .pipe(gulp.dest(outputDirectory))
+            );
+        }
+    });
+
+    return Promise.resolve();
+});