From a5b2fe3cfc0530cfa5a0824b4ff8a017485a0fae Mon Sep 17 00:00:00 2001 From: Dmitry Verkhoturov Date: Sat, 22 Aug 2026 01:13:25 +0100 Subject: [PATCH] Consolidate the frontend toolchain onto babel, and ship one bundle (#2178) Four upgrades that were finished but never merged, the compiler collapse they enable, and the dependency sweep that follows. Direct devDependencies go from 78 to 60 and dependencies from 10 to 9. Three were doing the same job: `ts-loader` stripped types in webpack, `babel-loader` did everything else, and `@swc/jest` repeated both for the tests with its own copy of the JSX settings. Babel is the one that survives, because the `data-testid` stripper has no equivalent elsewhere. `ts-loader` ran `transpileOnly: true`, so it only stripped types, which `@babel/preset-typescript` does; `fork-ts-checker-webpack-plugin` was already what type-checks. Jest runs `babel-jest` against the same `.babelrc.js` the bundle uses, passed as `configFile` because a file-relative babel config does not reach the `node_modules` packages in `transformIgnorePatterns`, and `jest.config.mjs` is plain ESM because a `.ts` config is compiled against `tsconfig.json`, whose `verbatimModuleSyntax` rejects ESM syntax in a file the package has not declared as a module. That removes `ts-loader`, `@swc/jest` and `@swc/core`. The last was pinned to 1.2.205 from 2022 with no way forward, because newer builds emit non-configurable exports and break `jest.spyOn` across 13 suites. Babel compiles a file at a time with no type information, so it cannot tell a type-only import from a real one and keeps the module. One line, `import { boundActions } from './connected-comment'`, pulled the whole redux store into `last-comments.mjs` and doubled it. `verbatimModuleSyntax` and `@typescript-eslint/consistent-type-imports` mark them properly; the statement has to be a separate `import type`, since verbatim semantics keep an inline `import { type X }` and load the module anyway. The legacy and modern compilations produced the same bytes. Both read the same browserslist query, `defaults, not IE 11, not samsung 12` resolves to chrome 109 and up, and nothing in the source needs transforming for that set, so 28 of the 29 output pairs were byte-identical. That made the module/nomodule switch worse than redundant: it served the `.js` file to browsers with no ES module support, and those files carried `??`, `?.` and class fields, so the fallback handed its own audience a syntax error. There is now one bundle, always loaded as a module, in the five templates and in the seven `site/` documents integrators copy from. A production build emits 29 files rather than 58, in about 3 seconds rather than 17. Two of those documents did not work at all beforehand: the SPA snippet could not parse, and the subdomain example had an unterminated string. `@babel/core` 8 declares `^22.18 || >=24.11` and `size-limit` 13 declares `^22.18 || ^24 || >=26`, so 20 was below the floor of two things installed here; pnpm only warns, which is why every build passed. All seven places the frontend pins it move together. `site/` is untouched: it builds with yarn and eleventy and installs neither. `eslint --print-config` before and after gives 173 active rules on an application file against 172, and 172 on a spec file and a plain JS file against 171. What is gone is three `flowtype` rules with no Flow here, `no-new-object` and `no-new-symbol` whose upstream replacements are on, `react/forbid-foreign-prop-types` with no propTypes anywhere, and, on TS only, `no-useless-constructor`, whose typescript-eslint version is on at error. `@babel/core` is pinned to 8 across the workspace because `@jest/transform` and `istanbul-lib-instrument` depend on 7 outright; a second scoped override holds `eslint-config-preact` on 7, since its `@babel/eslint-parser` loads babel 7 syntax plugins. `fast-async` rewrote every async function into nodent promise chains, calls babel's `transform` synchronously, which babel 8 removed, and every browser in the target list runs async natively. `prefresh` blew its stack on `createContext` under babel 8 with no newer release to move to, which compiled `intl.tsx` and `store/context.tsx` into throwing stubs, so `pnpm dev:app` could not run the widget at all. `core-js` is not injected now that `useBuiltIns` is gone, `postcss-custom-properties` was reached directly although nothing declared it and resolved only through pnpm's private hoist directory, and `cssnano` ran in both postcss chains although `CssMinimizerPlugin` already uses it. `pnpm lint`, `pnpm test` and `pnpm build` now work from `frontend/` as `CLAUDE.md` and the contributing guide have always said they do; the workspace root defined none of them. --- .github/workflows/ci-frontend.yml | 8 +- .github/workflows/release.yml | 4 +- CLAUDE.md | 2 +- Dockerfile | 2 +- .../app/webassets/assets/markdown-help.html | 13 +- frontend/.husky/pre-commit | 7 +- frontend/.nvmrc | 2 +- frontend/CLAUDE.md | 70 +- frontend/apps/remark42/.babelrc.js | 35 +- frontend/apps/remark42/.eslintignore | 9 - frontend/apps/remark42/.eslintrc.js | 35 - frontend/apps/remark42/.lintstagedrc.cjs | 3 +- frontend/apps/remark42/.size-limit.js | 7 + frontend/apps/remark42/.stylelintrc.js | 24 +- frontend/apps/remark42/app/__mocks__/fetch.ts | 4 +- .../app/common/api.getLastComments.ts | 2 +- frontend/apps/remark42/app/common/api.ts | 2 +- .../app/common/constants.config.test.ts | 18 +- .../apps/remark42/app/common/constants.ts | 2 +- .../apps/remark42/app/common/fetcher.test.ts | 2 +- .../apps/remark42/app/common/intl.test.tsx | 2 +- .../apps/remark42/app/common/local-storage.ts | 10 +- .../apps/remark42/app/common/static-store.ts | 2 +- .../components/auth-panel/auth-panel.test.tsx | 5 +- .../app/components/auth-panel/auth-panel.tsx | 7 +- .../remark42/app/components/auth/auth.api.ts | 9 +- .../app/components/auth/auth.hooks.ts | 4 +- .../app/components/auth/auth.module.css | 13 +- .../app/components/auth/auth.spec.tsx | 38 +- .../remark42/app/components/auth/auth.tsx | 7 +- .../app/components/auth/auth.utils.ts | 2 +- .../auth/components/button.module.css | 14 +- .../app/components/auth/components/button.tsx | 3 +- .../app/components/auth/components/oauth.tsx | 3 +- .../components/auth/components/oauth.utils.ts | 2 +- .../comment-form__subscribe-by-email.test.tsx | 2 +- .../comment-form__subscribe-by-email.tsx | 13 +- .../comment-form__subscribe-by-rss.tsx | 3 +- ...mment-form__subscribe-by-telegram.test.tsx | 12 +- .../comment-form__subscribe-by-telegram.tsx | 10 +- .../comment-form/comment-form.module.css | 2 +- .../comment-form/comment-form.spec.tsx | 5 +- .../components/comment-form/comment-form.tsx | 5 +- .../comment-form/markdown-toolbar.tsx | 3 +- .../components/comment-form/text-expander.tsx | 5 +- .../comment/comment-actions.spec.tsx | 3 +- .../components/comment/comment-actions.tsx | 2 +- .../comment/comment-votes.module.css | 8 +- .../app/components/comment/comment.module.css | 12 +- .../app/components/comment/comment.test.tsx | 6 +- .../app/components/comment/comment.tsx | 19 +- .../components/comment/connected-comment.tsx | 6 +- .../comment/getBlockingDurations.ts | 5 +- .../app/components/comment/raw-content.css | 2 +- .../dropdown/__item/dropdown__item.tsx | 3 +- .../app/components/dropdown/dropdown.tsx | 5 +- .../icon-button/icon-button.module.css | 2 +- .../components/icon-button/icon-button.tsx | 3 +- .../remark42/app/components/icons/arrow.tsx | 3 +- .../remark42/app/components/icons/cross.tsx | 3 +- .../remark42/app/components/icons/signout.tsx | 3 +- .../app/components/icons/verification.tsx | 3 +- .../app/components/input/input.module.css | 18 +- .../components/counter/counter.module.css | 2 +- .../app/components/profile/profile.module.css | 12 +- .../app/components/root/in-view/in-view.tsx | 5 +- .../remark42/app/components/root/root.tsx | 3 +- .../app/components/select/select.module.css | 2 +- .../remark42/app/components/select/select.tsx | 3 +- .../app/components/settings/settings.tsx | 7 +- .../remark42/app/components/sort-picker.tsx | 3 +- .../app/components/spinner/spinner.module.css | 7 +- .../app/components/telegram/telegram-link.tsx | 3 +- .../app/components/textarea-autosize.tsx | 3 +- .../remark42/app/components/thread/thread.tsx | 8 +- frontend/apps/remark42/app/deleteme.ts | 3 +- frontend/apps/remark42/app/hooks/useAction.ts | 2 +- .../remark42/app/hooks/useSessionState.ts | 3 +- frontend/apps/remark42/app/hooks/useTheme.ts | 4 +- frontend/apps/remark42/app/profile.ts | 3 +- frontend/apps/remark42/app/store/actions.ts | 10 +- .../remark42/app/store/comments/actions.ts | 9 +- .../remark42/app/store/comments/getters.ts | 5 +- .../remark42/app/store/comments/reducers.ts | 26 +- .../apps/remark42/app/store/comments/types.ts | 8 +- .../apps/remark42/app/store/comments/utils.ts | 2 +- frontend/apps/remark42/app/store/index.ts | 8 +- .../remark42/app/store/post-info/actions.ts | 7 +- .../remark42/app/store/post-info/reducers.ts | 3 +- .../remark42/app/store/post-info/types.ts | 2 +- .../apps/remark42/app/store/theme/actions.ts | 4 +- .../apps/remark42/app/store/theme/reducers.ts | 5 +- .../apps/remark42/app/store/theme/types.ts | 2 +- .../apps/remark42/app/store/thread/actions.ts | 7 +- .../apps/remark42/app/store/thread/getters.ts | 2 +- .../app/store/thread/reducers.test.ts | 8 +- .../remark42/app/store/thread/reducers.ts | 3 +- .../apps/remark42/app/store/thread/types.ts | 2 +- .../apps/remark42/app/store/thread/utils.ts | 2 +- .../remark42/app/store/user/actions.test.ts | 2 +- .../apps/remark42/app/store/user/actions.ts | 6 +- .../remark42/app/store/user/reducers.test.ts | 11 +- .../apps/remark42/app/store/user/reducers.ts | 2 +- .../apps/remark42/app/store/user/types.ts | 2 +- .../remark42/app/styles/custom-properties.css | 12 +- frontend/apps/remark42/app/tests/utils.tsx | 5 +- .../apps/remark42/app/utils/actionBinder.ts | 12 +- .../apps/remark42/app/utils/create-iframe.ts | 3 +- .../apps/remark42/app/utils/errorUtils.ts | 5 +- .../remark42/app/utils/get-hidden-users.ts | 4 +- .../app/utils/isUserAnonymous.test.ts | 2 +- .../remark42/app/utils/isUserAnonymous.ts | 2 +- frontend/apps/remark42/app/utils/jwt.test.ts | 2 +- .../apps/remark42/app/utils/loadLocale.ts | 4 +- .../apps/remark42/app/utils/ttl-to-time.ts | 2 +- frontend/apps/remark42/eslint.config.mjs | 138 + frontend/apps/remark42/jest.config.mjs | 44 + frontend/apps/remark42/jest.config.ts | 49 - frontend/apps/remark42/package.json | 105 +- .../tasks/babel-plugin-remove-test-id.js | 18 + .../apps/remark42/tasks/checkTranslation.js | 1 - frontend/apps/remark42/templates/comments.ejs | 7 +- frontend/apps/remark42/templates/counter.ejs | 6 +- frontend/apps/remark42/templates/deleteme.ejs | 3 +- frontend/apps/remark42/templates/demo.ejs | 7 +- frontend/apps/remark42/templates/iframe.ejs | 5 +- .../apps/remark42/templates/last-comments.ejs | 6 +- frontend/apps/remark42/tsconfig.json | 8 +- frontend/apps/remark42/webpack.config.js | 88 +- frontend/package.json | 8 +- frontend/pnpm-lock.yaml | 7964 +++++++++-------- .../docs/configuration/frontend/_index.md | 2 +- .../docs/configuration/frontend/spa.md | 23 +- .../docs/contributing/frontend/index.md | 4 +- .../getting-started/installation/index.md | 6 +- .../manuals/integration-with-astro/index.md | 14 +- .../manuals/integration-with-gatsby/index.md | 4 +- site/content/docs/manuals/subdomain/index.md | 2 +- site/layouts/demo.html | 2 +- 139 files changed, 5027 insertions(+), 4289 deletions(-) delete mode 100644 frontend/apps/remark42/.eslintignore delete mode 100644 frontend/apps/remark42/.eslintrc.js create mode 100644 frontend/apps/remark42/eslint.config.mjs create mode 100644 frontend/apps/remark42/jest.config.mjs delete mode 100644 frontend/apps/remark42/jest.config.ts create mode 100644 frontend/apps/remark42/tasks/babel-plugin-remove-test-id.js diff --git a/.github/workflows/ci-frontend.yml b/.github/workflows/ci-frontend.yml index 6cf0662a..86940565 100644 --- a/.github/workflows/ci-frontend.yml +++ b/.github/workflows/ci-frontend.yml @@ -22,7 +22,7 @@ jobs: contents: read strategy: matrix: - node: [20] + node: [24] steps: - name: Checkout @@ -58,7 +58,7 @@ jobs: contents: read strategy: matrix: - node: [20] + node: [24] steps: - name: Checkout @@ -94,7 +94,7 @@ jobs: contents: read strategy: matrix: - node: [20] + node: [24] steps: - name: Checkout @@ -158,7 +158,7 @@ jobs: contents: read strategy: matrix: - node: [20] + node: [24] steps: - name: Checkout diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 079c3638..fd433e4a 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -45,7 +45,7 @@ jobs: - name: install node uses: actions/setup-node@v7 with: - node-version: 20 + node-version: 24 cache: "pnpm" cache-dependency-path: frontend/pnpm-lock.yaml @@ -121,7 +121,7 @@ jobs: - name: install node uses: actions/setup-node@v7 with: - node-version: 20 + node-version: 24 cache: "pnpm" cache-dependency-path: frontend/pnpm-lock.yaml diff --git a/CLAUDE.md b/CLAUDE.md index cc1d60cc..e3dd685d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -44,7 +44,7 @@ git push origin backend/vX.Y.Z GoReleaser must ignore `backend/*` tags in `.goreleaser.yml` so release notes and current-tag detection use only product tags. Docker image publishing stays separate and is handled by the existing Docker workflow. -For local artifact runs, install GoReleaser, Go 1.25, Node 20+, PNPM 10, and Perl, then use `make release`. The target runs a snapshot/no-publish GoReleaser build, leaves local artifacts and metadata in `dist/`, and cleans generated frontend embed files after GoReleaser exits. Do not run raw `goreleaser release` for local artifacts unless you also run `./scripts/cleanup-release-assets.sh` afterward. +For local artifact runs, install GoReleaser, Go 1.25, Node 24+, PNPM 10, and Perl, then use `make release`. The target runs a snapshot/no-publish GoReleaser build, leaves local artifacts and metadata in `dist/`, and cleans generated frontend embed files after GoReleaser exits. Do not run raw `goreleaser release` for local artifacts unless you also run `./scripts/cleanup-release-assets.sh` afterward. ## Milestones and Issue Labels diff --git a/Dockerfile b/Dockerfile index 4cb70223..0215ba03 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM --platform=$BUILDPLATFORM node:20-alpine AS frontend-deps +FROM --platform=$BUILDPLATFORM node:24-alpine AS frontend-deps ARG SKIP_FRONTEND_TEST ARG SKIP_FRONTEND_BUILD diff --git a/backend/app/webassets/assets/markdown-help.html b/backend/app/webassets/assets/markdown-help.html index 8672f06e..a08b8975 100644 --- a/backend/app/webassets/assets/markdown-help.html +++ b/backend/app/webassets/assets/markdown-help.html @@ -181,7 +181,7 @@ .visuallyhidden { border: 0; - clip: rect(0 0 0 0); + clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; @@ -192,7 +192,7 @@ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { - clip: auto; + clip-path: none; height: auto; margin: 0; overflow: visible; @@ -253,7 +253,7 @@ pre, blockquote { border: 1px solid #999; - page-break-inside: avoid; + break-inside: avoid; } thead { @@ -262,7 +262,7 @@ tr, img { - page-break-inside: avoid; + break-inside: avoid; } img { @@ -278,7 +278,7 @@ h2, h3 { - page-break-after: avoid; + break-after: avoid; } } @@ -366,8 +366,7 @@ |------------ | -------------| |Content from cell 1 | Content from cell 2| |Content in the first column | Content in the second column| - +