Upgrade to webpack 5 and other build system improvements

Author: coolreader18

.babelrc

@@ -0,0 +1,13 @@
+[garage]
+supports wasm
+
+[worker]
+supports wasm
+
+[site]
+> 0.25%
+not dead
+
+[battle]
+> 0.25%
+not dead

.browserslistrc

@@ -18,51 +18,49 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@babel/polyfill": "^7.2.5",
     "@sentry/browser": "^6.2.5",
     "@sentry/tracing": "^6.2.5",
-    "@wasmer/wasi": "^0.10.2",
-    "@wasmer/wasm-transformer": "^0.10.2",
-    "@wasmer/wasmfs": "^0.10.2",
+    "@wasmer/wasi": "^0.12.0",
+    "@wasmer/wasm-transformer": "^0.12.0",
+    "@wasmer/wasmfs": "^0.12.0",
     "bootstrap": "^4.5.0",
     "codemirror": "^5.46.0",
     "comlink": "^4.3.0",
+    "core-js": "^3.10.1",
     "line-by-line": "^0.1.6",
     "lodash": "^4.17.19",
     "readable-stream": "^3.6.0",
+    "regenerator-runtime": "^0.13.7",
     "split.js": "^1.5.11",
     "wasm-feature-detect": "^1.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.5",
-    "@babel/plugin-proposal-pipeline-operator": "^7.3.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/preset-env": "^7.7.5",
-    "babel-loader": "^8.0.5",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.2.1",
-    "elm": "^0.19.1-3",
+    "@babel/core": "^7.13.15",
+    "@babel/preset-env": "^7.13.15",
+    "babel-loader": "^8.2.2",
+    "copy-webpack-plugin": "^8.1.1",
+    "css-loader": "^5.2.0",
+    "elm": "^0.19.1-5",
     "elm-format": "^0.8.3",
-    "elm-hot-webpack-loader": "^1.1.6",
-    "elm-webpack-loader": "^6.0.1",
+    "elm-hot-webpack-loader": "^1.1.8",
+    "elm-webpack-loader": "^7.0.0",
     "eslint": "^6.7.2",
     "eslint-config-standard": "^14.1.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-lodash": "^6.0.0",
     "eslint-plugin-node": "^10.0.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "file-loader": "^6.0.0",
-    "html-webpack-plugin": "^4.3.0",
-    "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "^4.10.0",
-    "prettier": "^2.0.5",
-    "sass-loader": "^8.0.0",
-    "url-loader": "^4.1.0",
-    "webpack": "4.41.2",
-    "webpack-cli": "^3.3.2",
-    "webpack-dev-server": "^3.4.1",
-    "worker-loader": "^2.0.0"
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "mini-css-extract-plugin": "^1.4.1",
+    "node-sass": "^5.0.0",
+    "prettier": "^2.2.1",
+    "sass-loader": "^11.0.1",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.31.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "version": "0.0.0"
 }

package.json

@@ -9,15 +9,17 @@ import Split from 'split.js'
 import * as Sentry from '@sentry/browser'
 import { Integrations } from '@sentry/tracing'
 
-Sentry.init({
-  dsn: process.env.SENTRY_DSN,
-  integrations: [new Integrations.BrowserTracing()],
-
-  // Set tracesSampleRate to 1.0 to capture 100%
-  // of transactions for performance monitoring.
-  // We recommend adjusting this value in production
-  tracesSampleRate: 1.0,
-})
+if (process.env.SENTRY_DSN) {
+  Sentry.init({
+    dsn: process.env.SENTRY_DSN,
+    integrations: [new Integrations.BrowserTracing()],
+
+    // Set tracesSampleRate to 1.0 to capture 100%
+    // of transactions for performance monitoring.
+    // We recommend adjusting this value in production
+    tracesSampleRate: 1.0,
+  })
+}
 
 function loadSettings() {
   let settings
@@ -139,7 +141,7 @@ function init(node, flags, workerUrl, lang, assetsPath) {
 
   window.onbeforeunload = () => {
     if (window.code && window.code !== window.savedCode) {
-      return 'You\'ve made unsaved changes.'
+      return "You've made unsaved changes."
     }
   }
 }

src/garage/app.js

@@ -1,4 +1,3 @@
-import RawWasiWorker from './wasi.worker.js'
 import * as Comlink from 'comlink'
 
 import fetchRunner from './fetchRunner'
@@ -17,7 +16,9 @@ class MatchWorker {
 
       const makeRunner = async ({ code, lang }) => {
         const langRunner = await fetchRunner(assetsPath, lang, () => {})
-        const rawWorker = new RawWasiWorker()
+        const rawWorker = new Worker(
+          new URL('./wasi.worker.js', import.meta.url),
+        )
         const WasiWorker = Comlink.wrap(rawWorker)
         const runner = await new WasiWorker(langRunner)
         await runner.setup()
@@ -44,8 +45,6 @@ class MatchWorker {
       worker1.terminate()
       worker2.terminate()
 
-      throw new Error('in worker')
-
       console.log(`Time taken: ${(Date.now() - startTime) / 1000}s`)
       cb({ type: 'getOutput', data: finalState })
     } catch (e) {

src/garage/match.worker.js

@@ -1,6 +1,6 @@
-import { WASI } from '@wasmer/wasi'
+import '../polyfill.js'
+import { WASI } from '@wasmer/wasi/lib/index.esm.js'
 import { WasmFs } from '@wasmer/wasmfs'
-import wasiBindings from '@wasmer/wasi/lib/bindings/browser'
 import * as Comlink from 'comlink'
 
 class WasiRunner {
@@ -16,7 +16,7 @@ class WasiRunner {
     const wasi = (this.wasi = new WASI({
       preopens: { '/': '/' },
       bindings: {
-        ...wasiBindings,
+        ...WASI.defaultBindings,
         fs: wasmFs.fs,
       },
     }))
@@ -49,6 +49,8 @@ class WasiRunner {
   get_output(len) {
     const ptr = this.wasmExports.__rr_io_addr()
     const output = new Uint8Array(this.wasmExports.memory.buffer, ptr, len)
+    // output is a view into the wasm memory buffer, we just want to return a
+    // standalone uint8array buffer, so we copy it with slice()
     return output.slice()
   }
   init(input) {
@@ -59,9 +61,9 @@ class WasiRunner {
     } catch (e) {
       console.error('error while initializing', e, e && e.stack)
       console.error(this.wasmFs.fs.readFileSync('/dev/stderr', 'utf8'))
-      return {
-        output: new TextEncoder().encode('{"Err":{"InternalError":null}}'),
-      }
+      this._initResult = new TextEncoder().encode(
+        '{"Err":{"InternalError":null}}',
+      )
     }
   }
   run_turn(input) {
@@ -77,9 +79,7 @@ class WasiRunner {
       console.error('error while running turn', e, e && e.stack)
       console.error(fs.readFileSync('/dev/stderr', 'utf8'))
       return {
-        output: new TextEncoder().encode(
-          '{"Err":{"InternalError":null}}',
-        ),
+        output: new TextEncoder().encode('{"Err":{"InternalError":null}}'),
         logs,
       }
     }

src/garage/wasi.worker.js

@@ -0,0 +1,2 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'

src/polyfill.js

@@ -1,12 +1,14 @@
 import * as Sentry from '@sentry/browser'
 import { Integrations } from '@sentry/tracing'
 
-Sentry.init({
-  dsn: process.env.SENTRY_DSN,
-  integrations: [new Integrations.BrowserTracing()],
+if (process.env.SENTRY_DSN) {
+  Sentry.init({
+    dsn: process.env.SENTRY_DSN,
+    integrations: [new Integrations.BrowserTracing()],
 
-  // Set tracesSampleRate to 1.0 to capture 100%
-  // of transactions for performance monitoring.
-  // We recommend adjusting this value in production
-  tracesSampleRate: 1.0,
-})
+    // Set tracesSampleRate to 1.0 to capture 100%
+    // of transactions for performance monitoring.
+    // We recommend adjusting this value in production
+    tracesSampleRate: 1.0,
+  })
+}

src/site/app.js

@@ -10,23 +10,24 @@ const dist =
     : path.join(__dirname, '../backend/public/dist')
 
 const loaders = {
-  js: {
+  js: (browserslistEnv) => ({
     test: /\.js$/,
     exclude: /node_modules/,
-    use: 'babel-loader',
-  },
+    use: {
+      loader: 'babel-loader',
+      options: {
+        presets: [
+          [
+            '@babel/preset-env',
+            { useBuiltIns: 'entry', corejs: 3, browserslistEnv },
+          ],
+        ],
+      },
+    },
+  }),
   css: {
     test: /\.(sa|sc|c)ss$/,
-    use: [
-      {
-        loader: MiniCssExtractPlugin.loader,
-        options: {
-          hmr: process.env.HOT === '1',
-        },
-      },
-      'css-loader',
-      'sass-loader',
-    ],
+    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
   },
   elm: (module) => ({
     test: /\.elm$/,
@@ -49,10 +50,6 @@ const loaders = {
     test: /\.svg$/,
     use: 'url-loader',
   },
-  worker: {
-    test: /wasi\.worker\.js$/,
-    use: 'worker-loader',
-  },
 }
 
 function mergeCustomizer(objValue, srcValue) {
@@ -62,10 +59,11 @@ function mergeCustomizer(objValue, srcValue) {
 }
 
 function createConfigBase(dist, additional) {
-  return _.mergeWith({
+  const common = {
     mode: process.env.NODE_ENV || 'development',
     stats: 'minimal',
     output: {
+      publicPath: 'auto',
       path: dist,
     },
     devtool: 'source-map',
@@ -74,10 +72,14 @@ function createConfigBase(dist, additional) {
       new webpack.EnvironmentPlugin({
         NODE_ENV: 'development',
         BOT_LANG: process.env.BOT_LANG || 'Python',
-        SENTRY_DSN: process.env.NODE_ENV,
+        SENTRY_DSN: process.env.SENTRY_DSN || '',
       }),
     ],
-  }, additional, mergeCustomizer)
+    experiments: {
+      asyncWebAssembly: true,
+    },
+  }
+  return _.mergeWith(common, additional, mergeCustomizer)
 }
 
 function createDevServerConfig(base) {

webpack.common.js

@@ -1,6 +1,5 @@
 const path = require('path')
 
-
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 
@@ -15,7 +14,7 @@ module.exports = createConfigBase(dist, {
   entry: './src/cli/app.js',
   module: {
     rules: [
-      loaders.js,
+      loaders.js('cli'),
       loaders.css,
       loaders.elm('cli'),
       loaders.file,
@@ -24,13 +23,16 @@ module.exports = createConfigBase(dist, {
   },
   plugins: [
     new HtmlWebpackPlugin({ template: 'src/cli/index.html' }),
-    new CopyWebpackPlugin([
-      {
-        from: process.env.NODE_ENV === 'production'
-          ? path.join(__dirname, './images')
-          : path.join(__dirname, '../backend/public/images'),
-        to: path.join(dist, 'images'),
-      },
-    ]),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from:
+            process.env.NODE_ENV === 'production'
+              ? path.join(__dirname, './images')
+              : path.join(__dirname, '../backend/public/images'),
+          to: path.join(dist, 'images'),
+        },
+      ],
+    }),
   ],
 })

webpack.config.cli.js

@@ -1,4 +1,6 @@
 const path = require('path')
+const _ = require('lodash')
+const CopyPlugin = require('copy-webpack-plugin')
 
 const {
   createConfigBase,
@@ -11,12 +13,12 @@ function createConfig(module) {
   return createConfigBase(dist, {
     name: module,
     entry: {
-      [`${module}_js`]: ['@babel/polyfill', `./src/${module}/app.js`],
+      [`${module}_js`]: ['./src/polyfill.js', `./src/${module}/app.js`],
       [`${module}_css`]: `./src/${module}/main.scss`,
     },
     module: {
       rules: [
-        loaders.js,
+        loaders.js(module),
         loaders.css,
         loaders.elm(module),
         loaders.file,
@@ -34,7 +36,7 @@ const siteConfig = createConfigBase(dist, {
     site_css: './src/site/main.scss',
   },
   module: {
-    rules: [loaders.js, loaders.css, loaders.file],
+    rules: [loaders.js('site'), loaders.css, loaders.file],
   },
 })