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

@@ -2,7 +2,7 @@ name: Playwright Tests
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
     types: [opened, synchronize, reopened, edited]
 
@@ -15,35 +15,35 @@ jobs:
       API_BASE_URL: ${{ secrets.API_BASE_URL }}
       working-directory: ./frontend
     steps:
-    - name: Checkout
+      - name: Checkout
-      uses: actions/checkout@v3
+        uses: actions/checkout@v3
-    - name: Setup Node
+      - name: Setup Node
-      uses: actions/setup-node@v3
+        uses: actions/setup-node@v3
-      with:
+        with:
-        node-version: '16'
+          node-version: '16'
-        cache: 'yarn'
+          cache: 'yarn'
-        cache-dependency-path: frontend/yarn.lock
+          cache-dependency-path: frontend/yarn.lock
-    - name: Install dependencies
+      - name: Install dependencies
-      working-directory: frontend
+        working-directory: frontend
-      run: yarn install --frozen-lockfile
+        run: yarn install --frozen-lockfile
-    - name: Install Playwright Browsers
+      - 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
+        working-directory: ./frontend
-    - name: Create env file
+      - name: Create env file
-      run: |
+        run: |
-        cd frontend
+          cd frontend
-        touch .env
+          touch .env
-        echo DEV_PASSWORD="${{ secrets.DEV_PASSWORD }}" >> .env
+          echo DEV_PASSWORD="${{ secrets.DEV_PASSWORD }}" >> .env
-        echo API_BASE_URL=${{ secrets.API_BASE_URL }} >> .env
+          echo API_BASE_URL=${{ secrets.API_BASE_URL }} >> .env
-        cat .env
+          cat .env
-    - name: Build frontend
+      - name: Build frontend
-      run: cd frontend && yarn build
+        run: cd frontend && yarn build
-      id: build-frontend
+        id: build-frontend
-    - name: Run Playwright tests
+      - name: Run Playwright tests
-      run: cd frontend && yarn playwright test
+        run: cd frontend && yarn playwright test
-    - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v2
-      if: always()
+        if: always()
-      with:
+        with:
-        name: playwright-report
+          name: playwright-report
-        path: frontend/playwright-report/
+          path: frontend/playwright-report/
-        retention-days: 30
+          retention-days: 30

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: {