misc frontend build fixes: playwright version + chunking (#740)

* misc frontend build fixes:
- fix playwright version to be consistent to fix playwright test
- chunking: set max number of chunks generated

* lock playwright version

* remove intl polyfill

---------

Co-authored-by: sua yoo <sua@suayoo.com>

.github/workflows/ui-tests-playwright.yml

@@ -27,7 +27,7 @@ jobs:
         working-directory: frontend
         run: yarn install --frozen-lockfile
       - name: Install Playwright Browsers
-      run: yarn add playwright && yarn playwright install --with-deps
+        run: yarn add playwright@1.32.1 && yarn playwright install --with-deps
         working-directory: ./frontend
       - name: Create env file
         run: |

frontend/package.json

@@ -5,8 +5,6 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@cheap-glitch/mi-cron": "^1.0.1",
-    "@formatjs/intl-displaynames": "^5.2.5",
-    "@formatjs/intl-getcanonicallocales": "^1.8.0",
     "@lit/localize": "^0.11.4",
     "@novnc/novnc": "^1.4.0-beta",
     "@shoelace-style/shoelace": "2.0.0-beta.85",
@@ -129,6 +127,6 @@
     "node": ">=16 <20"
   },
   "resolutions": {
-    "**/playwright": "1.31.1"
+    "**/playwright": "1.32.1"
   }
 }

frontend/src/components/locale-picker.ts

@@ -1,6 +1,5 @@
 import { LitElement, html } from "lit";
 import { state } from "lit/decorators.js";
-import { shouldPolyfill } from "@formatjs/intl-displaynames/should-polyfill";
 
 import { allLocales } from "../__generated__/locale-codes";
 import { getLocale, setLocaleFromUrl } from "../utils/localization";
@@ -23,34 +22,6 @@ export class LocalePicker extends LitElement {
   };
 
   async firstUpdated() {
-    let isFirstPolyfill = true;
-
-    // Polyfill if needed
-    // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames#browser_compatibility
-    // TODO actually test if polyfill works in older browser
-    const polyfill = async (locale: LocaleCode) => {
-      if (!shouldPolyfill(locale)) {
-        return;
-      }
-
-      if (isFirstPolyfill) {
-        await import("@formatjs/intl-getcanonicallocales/polyfill");
-        await import("@formatjs/intl-displaynames/polyfill");
-
-        isFirstPolyfill = false;
-      }
-
-      try {
-        await import("@formatjs/intl-displaynames/locale-data/" + locale);
-      } catch (e) {
-        console.debug(e);
-      }
-    };
-
-    await Promise.all(
-      allLocales.map((locale) => polyfill(locale as LocaleCode))
-    );
-
     this.localeNames = {} as LocaleNames;
     allLocales.forEach(this.setLocaleName);
   }

frontend/web-test-runner.config.mjs

@@ -57,10 +57,6 @@ export default {
                 import.meta.url
               )
             ),
-            // "@formatjs/intl-displaynames/should-polyfill": new URL(
-            //   "./src/__mocks__/@formatjs/intl-displaynames/should-polyfill.js",
-            //   import.meta.url
-            // ),
             color: fileURLToPath(
               new URL("./src/__mocks__/color.js", import.meta.url)
             ),

frontend/webpack.config.js

@@ -112,6 +112,10 @@ const main = {
       "process.env.WEBSOCKET_HOST": JSON.stringify(WEBSOCKET_HOST),
     }),
 
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 12
+    }),
+
     new HtmlWebpackPlugin({
       template: "src/index.ejs",
       templateParameters: {