diff --git a/code/modules/asset_cache/assets/tgui.dm b/code/modules/asset_cache/assets/tgui.dm index 9c79925602..03e2acd449 100644 --- a/code/modules/asset_cache/assets/tgui.dm +++ b/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( diff --git a/code/modules/tgui/tgui.dm b/code/modules/tgui/tgui.dm index 5acbaa887a..ad5675d092 100644 --- a/code/modules/tgui/tgui.dm +++ b/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") diff --git a/tgui/package.json b/tgui/package.json index 332f0ec273..3fc8a0c269 100644 --- a/tgui/package.json +++ b/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 .", diff --git a/tgui/webpack.config.edge.js b/tgui/webpack.config.edge.js new file mode 100644 index 0000000000..a9120a4cc1 --- /dev/null +++ b/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; +};