diff --git a/package.json b/package.json index 49c01ab5..b30e0310 100644 --- a/package.json +++ b/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" }, diff --git a/resources/assets/src/scripts/sw.ts b/resources/assets/src/scripts/sw.ts deleted file mode 100644 index fc402f4b..00000000 --- a/resources/assets/src/scripts/sw.ts +++ /dev/null @@ -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 diff --git a/tools/SyncMetaJsPlugin.ts b/tools/SyncMetaJsPlugin.ts deleted file mode 100644 index 6293f478..00000000 --- a/tools/SyncMetaJsPlugin.ts +++ /dev/null @@ -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 diff --git a/webpack.config.ts b/webpack.config.ts index 2f4b3361..cd323ddd 100644 --- a/webpack.config.ts +++ b/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 [ - { - name: 'app', - mode: isDev ? 'development' : 'production', - entry: { - app: ['react-hot-loader/patch', '@/index.tsx'], - style: [ - '@/styles/common.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.pages.min.css', - 'admin-lte/dist/css/alt/adminlte.light.min.css', - '@fortawesome/fontawesome-free/css/all.min.css', - ], - home: '@/scripts/homePage.ts', - 'home-css': '@/styles/home.css', - spectre: [ - 'spectre.css/dist/spectre.min.css', - '@/fonts/minecraft.css', - '@/styles/spectre.css', - ], - }, - output: { - path: `${__dirname}/public/app`, - publicPath: '/app/', - filename: isDev ? '[name].js' : '[name].[contenthash:7].js', - chunkFilename: isDev ? '[id].js' : '[id].[contenthash:7].js', - crossOriginLoading: 'anonymous', - }, - module: { - rules: [ - { - test: /\.tsx?$/, - loader: 'ts-loader', - options: { - configFile: isDev ? 'tsconfig.dev.json' : 'tsconfig.build.json', - transpileOnly: true, - }, + return { + name: 'app', + mode: isDev ? 'development' : 'production', + entry: { + app: ['react-hot-loader/patch', '@/index.tsx'], + style: [ + '@/styles/common.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.pages.min.css', + 'admin-lte/dist/css/alt/adminlte.light.min.css', + '@fortawesome/fontawesome-free/css/all.min.css', + ], + home: '@/scripts/homePage.ts', + 'home-css': '@/styles/home.css', + spectre: [ + 'spectre.css/dist/spectre.min.css', + '@/fonts/minecraft.css', + '@/styles/spectre.css', + ], + }, + output: { + path: `${__dirname}/public/app`, + publicPath: '/app/', + filename: isDev ? '[name].js' : '[name].[contenthash:7].js', + chunkFilename: isDev ? '[id].js' : '[id].[contenthash:7].js', + crossOriginLoading: 'anonymous', + }, + module: { + rules: [ + { + test: /\.tsx?$/, + loader: 'ts-loader', + options: { + configFile: isDev ? 'tsconfig.dev.json' : 'tsconfig.build.json', + transpileOnly: true, }, - { - test: /\.css$/, - use: [ - isDev ? 'style-loader' : MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - importLoaders: 1, - }, + }, + { + test: /\.css$/, + use: [ + isDev ? 'style-loader' : MiniCssExtractPlugin.loader, + { + loader: 'css-loader', + 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, }, - }, - ], - }, - plugins: [new SyncMetaJsPlugin()], - resolve: { - extensions: ['.js', '.ts'], - }, - stats: 'errors-warnings', + '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], + } } diff --git a/yarn.lock b/yarn.lock index 35bee011..ccb2b2e4 100644 --- a/yarn.lock +++ b/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"