[MIRROR] Experimental: Compile TGUI for Edge and IE separately (#9679)

Co-authored-by: ShadowLarkens <shadowlarkens@gmail.com>

code/modules/asset_cache/assets/tgui.dm

@@ -5,6 +5,13 @@
 		"tgui.bundle.css" = file("tgui/public/tgui.bundle.css"),
 	)
 
+/datum/asset/simple/tgui_edge
+	keep_local_name = TRUE
+	assets = list(
+		"tgui.bundle.edge.js" = file("tgui/public/tgui.bundle.edge.js"),
+		"tgui.bundle.edge.css" = file("tgui/public/tgui.bundle.edge.css"),
+	)
+
 /datum/asset/simple/tgui_panel
 	keep_local_name = TRUE
 	assets = list(

code/modules/tgui/tgui.dm

@@ -106,7 +106,10 @@
 			strict_mode = TRUE,
 			fancy = user.client.prefs.tgui_fancy,
 			assets = list(
-				get_asset_datum(/datum/asset/simple/tgui),
+				// FIXME: Delete this when 516 is required!
+				user.client.byond_version >= 516 \
+					? get_asset_datum(/datum/asset/simple/tgui_edge) \
+					: get_asset_datum(/datum/asset/simple/tgui),
 			))
 	else
 		window.send_message("ping")

tgui/package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "tgui:analyze": "webpack --analyze",
     "tgui:bench": "webpack --env TGUI_BENCH=1 && node packages/tgui-bench/index.js",
-    "tgui:build": "BROWSERSLIST_IGNORE_OLD_DATA=true webpack",
+    "tgui:build": "webpack && webpack --config ./webpack.config.edge.js",
     "tgui:dev": "node --experimental-modules packages/tgui-dev-server/index.js",
     "tgui:lint": "eslint packages --ext .js,.cjs,.ts,.tsx",
     "tgui:prettier": "prettier --check .",

tgui/webpack.config.edge.js

@@ -0,0 +1,147 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+const webpack = require('webpack');
+const path = require('path');
+const ExtractCssPlugin = require('mini-css-extract-plugin');
+
+const createStats = (verbose) => ({
+  assets: verbose,
+  builtAt: verbose,
+  cached: false,
+  children: false,
+  chunks: false,
+  colors: true,
+  entrypoints: true,
+  hash: false,
+  modules: false,
+  performance: false,
+  timings: verbose,
+  version: verbose,
+});
+
+module.exports = (env = {}, argv) => {
+  const mode = argv.mode || 'production';
+  const bench = env.TGUI_BENCH;
+  const config = {
+    mode: mode === 'production' ? 'production' : 'development',
+    context: path.resolve(__dirname),
+    target: ['web', 'browserslist:last 2 Edge versions'],
+    entry: {
+      tgui: ['./packages/tgui-polyfill', './packages/tgui'],
+    },
+    output: {
+      path: argv.useTmpFolder
+        ? path.resolve(__dirname, './public/.tmp')
+        : path.resolve(__dirname, './public'),
+      filename: '[name].bundle.edge.js',
+      chunkFilename: '[name].bundle.edge.js',
+      chunkLoadTimeout: 15000,
+      publicPath: '/',
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js', '.jsx'],
+      alias: {},
+    },
+    module: {
+      rules: [
+        {
+          test: /\.([tj]s(x)?|cjs)$/,
+          exclude: /node_modules[\\/]core-js/,
+          use: [
+            {
+              loader: require.resolve('swc-loader'),
+            },
+          ],
+        },
+        {
+          test: /\.(s)?css$/,
+          use: [
+            {
+              loader: ExtractCssPlugin.loader,
+              options: {
+                esModule: false,
+              },
+            },
+            {
+              loader: require.resolve('css-loader'),
+              options: {
+                esModule: false,
+              },
+            },
+            {
+              loader: require.resolve('sass-loader'),
+            },
+          ],
+        },
+        {
+          test: /\.(png|jpg|svg)$/,
+          use: [
+            {
+              loader: require.resolve('url-loader'),
+              options: {
+                esModule: false,
+              },
+            },
+          ],
+        },
+      ],
+    },
+    optimization: {
+      emitOnErrors: false,
+    },
+    performance: {
+      hints: false,
+    },
+    devtool: false,
+    cache: {
+      type: 'filesystem',
+      cacheLocation: path.resolve(__dirname, `.yarn/webpack/${mode}`),
+      buildDependencies: {
+        config: [__filename],
+      },
+    },
+    stats: createStats(true),
+    plugins: [
+      new webpack.EnvironmentPlugin({
+        NODE_ENV: env.NODE_ENV || mode,
+        WEBPACK_HMR_ENABLED: env.WEBPACK_HMR_ENABLED || argv.hot || false,
+        DEV_SERVER_IP: env.DEV_SERVER_IP || null,
+      }),
+      new ExtractCssPlugin({
+        filename: '[name].bundle.edge.css',
+        chunkFilename: '[name].bundle.edge.css',
+      }),
+    ],
+  };
+
+  if (bench) {
+    config.entry = {
+      'tgui-bench': [
+        './packages/tgui-polyfill',
+        './packages/tgui-bench/entrypoint',
+      ],
+    };
+  }
+
+  // Development build specific options
+  if (mode !== 'production') {
+    config.devtool = 'cheap-module-source-map';
+  }
+
+  // Development server specific options
+  if (argv.devServer) {
+    config.devServer = {
+      progress: false,
+      quiet: false,
+      noInfo: false,
+      clientLogLevel: 'silent',
+      stats: createStats(false),
+    };
+  }
+
+  return config;
+};