remove Workbox

package.json

@@ -50,9 +50,6 @@
     "skinview3d": "^2.2.1",
     "spectre.css": "^0.5.8",
     "use-immer": "^0.4.2",
-    "workbox-expiration": "^5.1.3",
-    "workbox-routing": "^5.1.3",
-    "workbox-strategies": "^5.1.3",
     "xterm": "^4.6.0",
     "xterm-addon-fit": "^0.4.0"
   },

resources/assets/src/scripts/sw.ts

@@ -1,123 +0,0 @@
-import { registerRoute } from 'workbox-routing'
-import {
-  CacheFirst,
-  StaleWhileRevalidate,
-  NetworkOnly,
-} from 'workbox-strategies'
-import { ExpirationPlugin } from 'workbox-expiration'
-
-const oneWeek = 7 * 24 * 3600
-
-if (process.env.NODE_ENV === 'development') {
-  registerRoute(/\.js/, new NetworkOnly())
-  registerRoute(/\.css/, new NetworkOnly())
-}
-
-//#region Pictures
-registerRoute(
-  /\/preview\/\d+/,
-  new CacheFirst({
-    cacheName: 'texture-preview-v2',
-    fetchOptions: {
-      credentials: 'omit',
-    },
-    plugins: [
-      new ExpirationPlugin({ maxAgeSeconds: oneWeek, purgeOnQuotaError: true }),
-    ],
-  }),
-)
-
-registerRoute(
-  /\/app\/.*\.webp/,
-  new StaleWhileRevalidate({
-    cacheName: 'webp-resource-v1',
-    fetchOptions: {
-      credentials: 'omit',
-    },
-  }),
-)
-
-registerRoute(
-  /\/avatar\/\d+/,
-  new CacheFirst({
-    cacheName: 'avatar-v2',
-    fetchOptions: {
-      credentials: 'omit',
-    },
-    plugins: [new ExpirationPlugin({ maxAgeSeconds: oneWeek })],
-  }),
-)
-
-//#endregion
-
-//#region JavaScript files
-registerRoute(
-  /.+\/app\/\w{2,3}\.\w{7}\.js$/,
-  new CacheFirst({
-    cacheName: 'javascript-v1',
-    fetchOptions: {
-      credentials: 'omit',
-      mode: 'cors',
-    },
-    plugins: [
-      new ExpirationPlugin({ maxAgeSeconds: oneWeek, purgeOnQuotaError: true }),
-    ],
-  }),
-)
-registerRoute(
-  /.+\/plugins\/.+\.js$/,
-  new StaleWhileRevalidate({
-    cacheName: 'javascript-v1',
-    fetchOptions: {
-      credentials: 'omit',
-      mode: 'cors',
-    },
-    plugins: [
-      new ExpirationPlugin({ maxAgeSeconds: oneWeek, purgeOnQuotaError: true }),
-    ],
-  }),
-)
-//#endregion
-
-//#region CSS files
-registerRoute(
-  /.+\/app\/.*\.css$/,
-  new CacheFirst({
-    cacheName: 'stylesheet-v1',
-    fetchOptions: {
-      credentials: 'omit',
-      mode: 'cors',
-    },
-    plugins: [
-      new ExpirationPlugin({ maxAgeSeconds: oneWeek, purgeOnQuotaError: true }),
-    ],
-  }),
-)
-registerRoute(
-  /.+\/plugins\/.+\.css$/,
-  new StaleWhileRevalidate({
-    cacheName: 'stylesheet-v1',
-    fetchOptions: {
-      credentials: 'omit',
-      mode: 'cors',
-    },
-    plugins: [
-      new ExpirationPlugin({ maxAgeSeconds: oneWeek, purgeOnQuotaError: true }),
-    ],
-  }),
-)
-//#endregion
-
-//#region Fonts
-registerRoute(
-  ({ request }) => request.destination === 'font',
-  new StaleWhileRevalidate({
-    cacheName: 'font-v1',
-    fetchOptions: {
-      credentials: 'omit',
-      mode: 'cors',
-    },
-    plugins: [new ExpirationPlugin({ maxEntries: 12 })],
-  }),
-)
-//#endregion

tools/SyncMetaJsPlugin.ts

@@ -1,24 +0,0 @@
-import { promises as fs } from 'fs'
-import * as path from 'path'
-import type { Compiler } from 'webpack'
-
-class SyncMetaJsPlugin {
-  apply(compiler: Compiler) {
-    compiler.hooks.assetEmitted.tapPromise(
-      'HtmlWebpackEnhancementPlugin',
-      async (name, { source }) => {
-        if (compiler.options.mode !== 'development') {
-          return
-        }
-
-        if (name === 'meta.js' || name === 'sw.js') {
-          const filePath = path.resolve(process.cwd(), 'public', name)
-
-          await fs.writeFile(filePath, source.source())
-        }
-      },
-    )
-  }
-}
-
-export default SyncMetaJsPlugin

webpack.config.ts

@@ -5,13 +5,12 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import HtmlWebpackEnhancementPlugin from './tools/HtmlWebpackEnhancementPlugin'
-import SyncMetaJsPlugin from './tools/SyncMetaJsPlugin'
 
 interface Env {
   production?: boolean
 }
 
-export default function (env?: Env): webpack.Configuration[] {
+export default function (env?: Env): webpack.Configuration {
   const isDev = !env?.production
   const isGitpod = 'GITPOD_REPO_ROOT' in process.env
   const htmlPublicPath = isDev
@@ -20,174 +19,143 @@ export default function (env?: Env): webpack.Configuration[] {
       : '//localhost:8080/app/'
     : '{{ cdn_base }}/app/'
 
-  return [
+  return {
-    {
+    name: 'app',
-      name: 'app',
+    mode: isDev ? 'development' : 'production',
-      mode: isDev ? 'development' : 'production',
+    entry: {
-      entry: {
+      app: ['react-hot-loader/patch', '@/index.tsx'],
-        app: ['react-hot-loader/patch', '@/index.tsx'],
+      style: [
-        style: [
+        '@/styles/common.css',
-          '@/styles/common.css',
+        'admin-lte/dist/css/alt/adminlte.components.min.css',
-          'admin-lte/dist/css/alt/adminlte.components.min.css',
+        'admin-lte/dist/css/alt/adminlte.core.min.css',
-          'admin-lte/dist/css/alt/adminlte.core.min.css',
+        'admin-lte/dist/css/alt/adminlte.pages.min.css',
-          'admin-lte/dist/css/alt/adminlte.pages.min.css',
+        'admin-lte/dist/css/alt/adminlte.light.min.css',
-          'admin-lte/dist/css/alt/adminlte.light.min.css',
+        '@fortawesome/fontawesome-free/css/all.min.css',
-          '@fortawesome/fontawesome-free/css/all.min.css',
+      ],
-        ],
+      home: '@/scripts/homePage.ts',
-        home: '@/scripts/homePage.ts',
+      'home-css': '@/styles/home.css',
-        'home-css': '@/styles/home.css',
+      spectre: [
-        spectre: [
+        'spectre.css/dist/spectre.min.css',
-          'spectre.css/dist/spectre.min.css',
+        '@/fonts/minecraft.css',
-          '@/fonts/minecraft.css',
+        '@/styles/spectre.css',
-          '@/styles/spectre.css',
+      ],
-        ],
+    },
-      },
+    output: {
-      output: {
+      path: `${__dirname}/public/app`,
-        path: `${__dirname}/public/app`,
+      publicPath: '/app/',
-        publicPath: '/app/',
+      filename: isDev ? '[name].js' : '[name].[contenthash:7].js',
-        filename: isDev ? '[name].js' : '[name].[contenthash:7].js',
+      chunkFilename: isDev ? '[id].js' : '[id].[contenthash:7].js',
-        chunkFilename: isDev ? '[id].js' : '[id].[contenthash:7].js',
+      crossOriginLoading: 'anonymous',
-        crossOriginLoading: 'anonymous',
+    },
-      },
+    module: {
-      module: {
+      rules: [
-        rules: [
+        {
-          {
+          test: /\.tsx?$/,
-            test: /\.tsx?$/,
+          loader: 'ts-loader',
-            loader: 'ts-loader',
+          options: {
-            options: {
+            configFile: isDev ? 'tsconfig.dev.json' : 'tsconfig.build.json',
-              configFile: isDev ? 'tsconfig.dev.json' : 'tsconfig.build.json',
+            transpileOnly: true,
-              transpileOnly: true,
-            },
           },
-          {
+        },
-            test: /\.css$/,
+        {
-            use: [
+          test: /\.css$/,
-              isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
+          use: [
-              {
+            isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
-                loader: 'css-loader',
+            {
-                options: {
+              loader: 'css-loader',
-                  importLoaders: 1,
+              options: {
-                },
+                importLoaders: 1,
               },
-              'postcss-loader',
-            ],
-          },
-          {
-            test: /\.(png|webp|svg|woff2?|eot|ttf)$/,
-            type: 'asset',
-          },
-        ],
-      },
-      plugins: [
-        new MiniCssExtractPlugin({
-          filename: isDev ? '[name].css' : '[name].[contenthash:7].css',
-          chunkFilename: isDev ? '[id].css' : '[id].[contenthash:7].css',
-        }),
-        new HtmlWebpackPlugin({
-          templateContent: '',
-          chunks: ['app'],
-          scriptLoading: 'blocking',
-          filename: 'app.twig',
-          publicPath: htmlPublicPath,
-        }),
-        new HtmlWebpackPlugin({
-          templateContent: '',
-          chunks: ['style'],
-          filename: 'style.twig',
-          publicPath: htmlPublicPath,
-        }),
-        new HtmlWebpackPlugin({
-          templateContent: '',
-          chunks: ['home'],
-          scriptLoading: 'blocking',
-          filename: 'home.twig',
-          publicPath: htmlPublicPath,
-        }),
-        new HtmlWebpackPlugin({
-          templateContent: '',
-          chunks: ['home-css'],
-          filename: 'home-css.twig',
-          publicPath: htmlPublicPath,
-        }),
-        new HtmlWebpackPlugin({
-          templateContent: '',
-          chunks: ['spectre'],
-          filename: 'spectre.twig',
-          publicPath: htmlPublicPath,
-        }),
-        new HtmlWebpackEnhancementPlugin(),
-        new webpack.DefinePlugin({
-          'window.Deno': 'true',
-          Deno: {
-            args: [],
-            build: {},
-            version: {},
-          },
-          'process.platform': '"browser"',
-          __blessing_public_path__: JSON.stringify(htmlPublicPath),
-        }),
-      ].concat(isDev ? [new webpack.HotModuleReplacementPlugin()] : []),
-      resolve: {
-        extensions: ['.js', '.ts', '.tsx'],
-        alias: {
-          'react-dom': '@hot-loader/react-dom',
-          '@': path.resolve(__dirname, 'resources/assets/src'),
-          readline: '@/scripts/cli/readline.ts',
-          prompts: 'prompts/lib/index.js',
-          assert: false,
-        },
-      },
-      optimization: {
-        // @ts-ignore
-        minimizer: [new CssMinimizerPlugin({}), '...'],
-      },
-      experiments: {
-        syncWebAssembly: true,
-      },
-      devtool: isDev ? 'eval-source-map' : false,
-      devServer: {
-        headers: {
-          'Access-Control-Allow-Origin': '*',
-        },
-        host: '0.0.0.0',
-        hot: true,
-        hotOnly: true,
-        stats: 'errors-warnings',
-        allowedHosts: ['localhost'].concat(
-          isDev && isGitpod ? ['.gitpod.io'] : [],
-        ),
-      },
-      stats: 'errors-warnings',
-      ignoreWarnings: [/size limit/i],
-    },
-    {
-      name: 'meta',
-      mode: isDev ? 'development' : 'production',
-      entry: {
-        meta: './resources/assets/src/scripts/meta.ts',
-        sw: './resources/assets/src/scripts/sw.ts',
-      },
-      output: {
-        path: `${__dirname}/public`,
-        filename: '[name].js',
-      },
-      module: {
-        rules: [
-          {
-            test: /\.ts$/,
-            loader: 'ts-loader',
-            options: {
-              configFile: 'tsconfig.build.json',
-              transpileOnly: true,
             },
-          },
+            'postcss-loader',
-        ],
+          ],
-      },
+        },
-      plugins: [new SyncMetaJsPlugin()],
+        {
-      resolve: {
+          test: /\.(png|webp|svg|woff2?|eot|ttf)$/,
-        extensions: ['.js', '.ts'],
+          type: 'asset',
-      },
+        },
-      stats: 'errors-warnings',
+      ],
     },
-  ]
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: isDev ? '[name].css' : '[name].[contenthash:7].css',
+        chunkFilename: isDev ? '[id].css' : '[id].[contenthash:7].css',
+      }),
+      new HtmlWebpackPlugin({
+        templateContent: '',
+        chunks: ['app'],
+        scriptLoading: 'blocking',
+        filename: 'app.twig',
+        publicPath: htmlPublicPath,
+      }),
+      new HtmlWebpackPlugin({
+        templateContent: '',
+        chunks: ['style'],
+        filename: 'style.twig',
+        publicPath: htmlPublicPath,
+      }),
+      new HtmlWebpackPlugin({
+        templateContent: '',
+        chunks: ['home'],
+        scriptLoading: 'blocking',
+        filename: 'home.twig',
+        publicPath: htmlPublicPath,
+      }),
+      new HtmlWebpackPlugin({
+        templateContent: '',
+        chunks: ['home-css'],
+        filename: 'home-css.twig',
+        publicPath: htmlPublicPath,
+      }),
+      new HtmlWebpackPlugin({
+        templateContent: '',
+        chunks: ['spectre'],
+        filename: 'spectre.twig',
+        publicPath: htmlPublicPath,
+      }),
+      new HtmlWebpackEnhancementPlugin(),
+      new webpack.DefinePlugin({
+        'window.Deno': 'true',
+        Deno: {
+          args: [],
+          build: {},
+          version: {},
+        },
+        'process.platform': '"browser"',
+        __blessing_public_path__: JSON.stringify(htmlPublicPath),
+      }),
+    ].concat(isDev ? [new webpack.HotModuleReplacementPlugin()] : []),
+    resolve: {
+      extensions: ['.js', '.ts', '.tsx'],
+      alias: {
+        'react-dom': '@hot-loader/react-dom',
+        '@': path.resolve(__dirname, 'resources/assets/src'),
+        readline: '@/scripts/cli/readline.ts',
+        prompts: 'prompts/lib/index.js',
+        assert: false,
+      },
+    },
+    optimization: {
+      // @ts-ignore
+      minimizer: [new CssMinimizerPlugin({}), '...'],
+    },
+    experiments: {
+      syncWebAssembly: true,
+    },
+    devtool: isDev ? 'eval-source-map' : false,
+    devServer: {
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+      host: '0.0.0.0',
+      hot: true,
+      hotOnly: true,
+      stats: 'errors-warnings',
+      allowedHosts: ['localhost'].concat(
+        isDev && isGitpod ? ['.gitpod.io'] : [],
+      ),
+    },
+    stats: 'errors-warnings',
+    ignoreWarnings: [/size limit/i],
+  }
 }

yarn.lock

@@ -10069,33 +10069,6 @@ wordwrap@~1.0.0:
   resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
 
-workbox-core@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-5.1.3.tgz#0607acd0018c149162777fe4aae08553bd1559f5"
-  integrity sha512-TFSIPxxciX9sFaj0FDiohBeIKpwMcCyNduydi9i3LChItcndDS6TJpErxybv8aBWeCMraXt33TWtF6kKuIObNw==
-
-workbox-expiration@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-5.1.3.tgz#c793eef17513de86c9c1b8254eb2c9ba3ed17568"
-  integrity sha512-8YhpmIHqIx+xmtxONADc+di4a3zzCsvVHLiKq6T3vJZUPnqV2jzx+51+UHMUh3T5w5Z5SFC14l0V/jesRbuMKg==
-  dependencies:
-    workbox-core "^5.1.3"
-
-workbox-routing@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-5.1.3.tgz#9946da0e9ace45af3db09cc0b4bdc4696723e1f7"
-  integrity sha512-F+sAp9Iy3lVl3BEG+pzXWVq4AftzjiFpHDaZ4Kf4vLoBoKQE0hIHet4zE5DpHqYdyw+Udhp4wrfHamX6PN6z1Q==
-  dependencies:
-    workbox-core "^5.1.3"
-
-workbox-strategies@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-5.1.3.tgz#220cc9f5519ed76f2452ccb9407a5fd967c37110"
-  integrity sha512-wiXHfmOKnWABeIVW+/ye0e00+2CcS5y7SIj2f9zcdy2ZLEbcOf7B+yOl5OrWpBGlTUwRjIYhV++ZqiKm3Dc+8w==
-  dependencies:
-    workbox-core "^5.1.3"
-    workbox-routing "^5.1.3"
-
 wrap-ansi@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"