From 2b0d5ff8b3f59027037c7ec025463f9e1dc05931 Mon Sep 17 00:00:00 2001 From: Ilya Kreymer Date: Mon, 3 Apr 2023 21:27:44 -0700 Subject: [PATCH] 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 --- .github/workflows/ui-tests-playwright.yml | 66 +++++++++++------------ frontend/package.json | 4 +- frontend/src/components/locale-picker.ts | 29 ---------- frontend/web-test-runner.config.mjs | 4 -- frontend/webpack.config.js | 4 ++ 5 files changed, 38 insertions(+), 69 deletions(-) diff --git a/.github/workflows/ui-tests-playwright.yml b/.github/workflows/ui-tests-playwright.yml index 51032142..ef368b48 100644 --- a/.github/workflows/ui-tests-playwright.yml +++ b/.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 - uses: actions/checkout@v3 - - name: Setup Node - uses: actions/setup-node@v3 - with: - node-version: '16' - cache: 'yarn' - cache-dependency-path: frontend/yarn.lock - - name: Install dependencies - working-directory: frontend - run: yarn install --frozen-lockfile - - name: Install Playwright Browsers - run: yarn add playwright && yarn playwright install --with-deps - working-directory: ./frontend - - name: Create env file - run: | - cd frontend - touch .env - echo DEV_PASSWORD="${{ secrets.DEV_PASSWORD }}" >> .env - echo API_BASE_URL=${{ secrets.API_BASE_URL }} >> .env - cat .env - - name: Build frontend - run: cd frontend && yarn build - id: build-frontend - - name: Run Playwright tests - run: cd frontend && yarn playwright test - - uses: actions/upload-artifact@v2 - if: always() - with: - name: playwright-report - path: frontend/playwright-report/ - retention-days: 30 + - name: Checkout + uses: actions/checkout@v3 + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version: '16' + cache: 'yarn' + cache-dependency-path: frontend/yarn.lock + - name: Install dependencies + working-directory: frontend + run: yarn install --frozen-lockfile + - name: Install Playwright Browsers + run: yarn add playwright@1.32.1 && yarn playwright install --with-deps + working-directory: ./frontend + - name: Create env file + run: | + cd frontend + touch .env + echo DEV_PASSWORD="${{ secrets.DEV_PASSWORD }}" >> .env + echo API_BASE_URL=${{ secrets.API_BASE_URL }} >> .env + cat .env + - name: Build frontend + run: cd frontend && yarn build + id: build-frontend + - name: Run Playwright tests + run: cd frontend && yarn playwright test + - uses: actions/upload-artifact@v2 + if: always() + with: + name: playwright-report + path: frontend/playwright-report/ + retention-days: 30 diff --git a/frontend/package.json b/frontend/package.json index 99e5f912..5a2d9ecc 100644 --- a/frontend/package.json +++ b/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" } } diff --git a/frontend/src/components/locale-picker.ts b/frontend/src/components/locale-picker.ts index 1563810a..233a3951 100644 --- a/frontend/src/components/locale-picker.ts +++ b/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); } diff --git a/frontend/web-test-runner.config.mjs b/frontend/web-test-runner.config.mjs index eacc7fac..782410de 100644 --- a/frontend/web-test-runner.config.mjs +++ b/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) ), diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index 265811f8..03466df0 100644 --- a/frontend/webpack.config.js +++ b/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: {