Merge pull request #34850 from overleaf/acf-ar-yarn-pnp-redux

[monorepo] yarn pnp redux

GitOrigin-RevId: fb04cab879b04ead2665b5e985a44053ceea33f3

services/web/.gitignore

@@ -22,6 +22,7 @@ cypress/screenshots/
 cypress/videos/
 cypress/downloads/
 cypress/results/
+cypress/reporter/
 
 # Ace themes for conversion
 frontend/js/features/source-editor/themes/ace/

services/web/cypress.config.ts

@@ -1,10 +1,13 @@
 import { defineConfig } from 'cypress'
 import { webpackConfig } from './cypress/support/webpack.cypress'
 
+// Cypress's Electron process uses PackherdModuleLoader which doesn't go through
+// PnP hooks. Reporter packages are materialized into /tmp/cypress-reporter by
+// scripts/materialize-cypress-reporter.js at container startup.
 let reporterOptions = {}
 if (process.env.CI) {
   reporterOptions = {
-    reporter: 'cypress-multi-reporters',
+    reporter: '/tmp/cypress-reporter/node_modules/cypress-multi-reporters',
     reporterOptions: {
       configFile: 'cypress/cypress-multi-reporters.json',
     },

services/web/package.json

@@ -3,6 +3,10 @@
   "description": "The HTTP front end for Overleaf",
   "private": true,
   "main": "app.mjs",
+  "exports": {
+    ".": "./app.mjs",
+    "./*": "./*"
+  },
   "directories": {
     "public": "./public"
   },
@@ -36,8 +40,9 @@
     "type-check:backend": "tsc -p tsconfig.backend.json --noEmit",
     "extract-translations": "i18next-scanner",
     "convert-themes": "node frontend/js/features/source-editor/themes/scripts/convert.js",
-    "cypress:open-ct": "OVERLEAF_CONFIG=$(pwd)/config/settings.webpack.js cypress open --component",
-    "cypress:run-ct": "OVERLEAF_CONFIG=$(pwd)/config/settings.webpack.js cypress run --component --browser chrome",
+    "materialize-reporter": "node ../../bin/shared/materialize-cypress-reporter.js /tmp/cypress-reporter",
+    "cypress:open-ct": "yarn run materialize-reporter && OVERLEAF_CONFIG=$(pwd)/config/settings.webpack.js cypress open --component",
+    "cypress:run-ct": "yarn run materialize-reporter && OVERLEAF_CONFIG=$(pwd)/config/settings.webpack.js cypress run --component --browser chrome",
     "cypress:docker:open-ct": "USER_UID=$(id -u) USER_GID=$(id -g) docker compose -f docker-compose.cypress.yml run --rm cypress yarn run cypress:open-ct",
     "cypress:docker:run-ct": "USER_UID=$(id -u) USER_GID=$(id -g) docker compose -f docker-compose.cypress.yml run --rm cypress yarn run cypress:run-ct --browser chrome",
     "lezer-latex:generate": "node scripts/lezer-latex/generate.mjs",
@@ -151,6 +156,7 @@
     "minimist": "^1.2.7",
     "mmmagic": "^0.5.3",
     "moment": "^2.29.4",
+    "mongodb": "6.12.0",
     "mongodb-legacy": "6.1.3",
     "mongoose": "8.22.1",
     "multer": "2.2.0",
@@ -197,6 +203,7 @@
     "@ai-sdk/react": "^3.0.172",
     "@babel/core": "^7.28.5",
     "@babel/plugin-proposal-decorators": "^7.28.0",
+    "@babel/plugin-transform-typescript": "^7.28.0",
     "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
@@ -234,6 +241,7 @@
     "@replit/codemirror-indentation-markers": "overleaf/codemirror-indentation-markers#371ce3b56f453a392eb0d3b85ab019c185c68e1f",
     "@replit/codemirror-vim": "overleaf/codemirror-vim#1bef138382d948018f3f9b8a4d7a70ab61774e4b",
     "@sentry/browser": "7.46.0",
+    "@sentry/types": "7.46.0",
     "@storybook/addon-a11y": "10.3.5",
     "@storybook/addon-designs": "^11.1.3",
     "@storybook/addon-docs": "10.3.5",
@@ -255,15 +263,19 @@
     "@types/async": "^3.2.25",
     "@types/bootstrap": "^5.2.10",
     "@types/chai": "^4.3.0",
+    "@types/chai-as-promised": "^8.0.2",
     "@types/dateformat": "^5.0.3",
     "@types/diff": "^5.2.3",
     "@types/dom-speech-recognition": "^0.0.7",
     "@types/events": "^3.0.3",
     "@types/express": "^4.17.23",
+    "@types/lodash": "^4.17.24",
+    "@types/mdast": "^4.0.4",
     "@types/minimist": "^1.2.5",
     "@types/mocha": "^9.1.0",
     "@types/mocha-each": "^2.0.4",
     "@types/node": "^24.5.2",
+    "@types/path-browserify": "^1.0.3",
     "@types/react": "^18.3.20",
     "@types/react-color": "^3.0.13",
     "@types/react-dom": "^18.3.6",
@@ -272,15 +284,19 @@
     "@types/react-syntax-highlighter": "^15.5.11",
     "@types/recurly__recurly-js": "^4.38.0",
     "@types/sanitize-html": "^2.14.0",
+    "@types/sinon": "^21.0.1",
     "@types/sinon-chai": "^3.2.12",
     "@types/utf-8-validate": "^5.0.2",
     "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.59.4",
+    "@typescript-eslint/parser": "^8.59.4",
     "@uppy/core": "^3.8.0",
     "@uppy/dashboard": "3.7.1",
     "@uppy/drag-drop": "3.0.3",
     "@uppy/file-input": "3.0.4",
     "@uppy/progress-bar": "3.0.4",
     "@uppy/react": "3.2.1",
+    "@uppy/status-bar": "^3.2.5",
     "@uppy/utils": "^5.7.0",
     "@uppy/xhr-upload": "3.6.0",
     "@vitest/coverage-istanbul": "^4.0.17",
@@ -315,6 +331,8 @@
     "core-js": "~3.46.0",
     "css-loader": "^7.1.4",
     "css-minimizer-webpack-plugin": "^8.0.0",
+    "csv-parse": "^6.2.1",
+    "csv-stringify": "^6.7.0",
     "cypress": "15.12.0",
     "cypress-multi-reporters": "^2.0.5",
     "cypress-plugin-tab": "^1.0.5",
@@ -325,9 +343,11 @@
     "downshift": "^9.0.9",
     "es6-promise": "^4.2.8",
     "escodegen": "^2.0.0",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-chai-expect": "^4.1.0",
     "eslint-plugin-chai-friendly": "^1.2.0",
+    "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-mocha": "^11.3.0",
@@ -343,6 +363,7 @@
     "fake-indexeddb": "^6.0.0",
     "fast-fuzzy": "^1.12.0",
     "fetch-mock": "^12.6.0",
+    "focus-trap": "^8.2.1",
     "formik": "^2.2.9",
     "glob": "^12.0.0",
     "globals": "^17.6.0",
@@ -418,8 +439,9 @@
     "timekeeper": "^2.2.0",
     "to-string-loader": "^1.2.0",
     "ts-loader": "^9.5.7",
+    "tslib": "^2.8.1",
     "tty-browserify": "^0.0.1",
-    "typescript": "^5.9.3",
+    "typescript": "^5.0.4",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "use-stick-to-bottom": "^1.1.1",

services/web/test/acceptance/bootstrap.js

@@ -1,3 +1,15 @@
+// Register PnP ESM loader via module.register() for synchronous ESM resolution
+// (--experimental-loader from yarn only works for async resolution)
+const { register } = require('node:module')
+const { pathToFileURL } = require('node:url')
+const path = require('node:path')
+const pnpRegister = path.resolve(__dirname, '../../.pnp.register.mjs')
+try {
+  register(pathToFileURL(pnpRegister), pathToFileURL(__filename))
+} catch {
+  // .pnp.register.mjs may not exist in non-PnP environments
+}
+
 const chai = require('chai')
 chai.should()
 chai.use(require('chai-as-promised'))

services/web/test/acceptance/src/DeleteOrphanedDocsOnlineCheckTests.mjs

@@ -119,7 +119,8 @@ describe('DeleteOrphanedDocsOnlineCheck', function () {
             // Hide verbose log messages `calling destroy for project in docstore`
             'LOG_LEVEL=error',
             // Hide deprecation warnings for calling `db.collection.count`
-            'NODE_OPTIONS=--no-deprecation',
+            // Preserve existing NODE_OPTIONS (e.g. PnP hooks) while adding --no-deprecation
+            `NODE_OPTIONS='${process.env.NODE_OPTIONS || ''} --no-deprecation'`,
           ])
           .concat(['node', 'scripts/delete_orphaned_docs_online_check.mjs'])
           .join(' ')

services/web/test/unit/src/Settings/Settings.test.mjs

@@ -10,7 +10,9 @@ function clearSettingsCache() {
   const settingsDeps = Object.keys(require.cache).filter(
     x =>
       x.includes('/@overleaf/settings') ||
+      x.includes('/@overleaf-settings-virtual') ||
       x.includes(`${monorepoPath}/libraries/settings`) ||
+      x.includes('/libraries/settings/') ||
       x.includes(`${monorepoPath}/services/web/config`)
   )
   settingsDeps.forEach(dep => delete require.cache[dep])

services/web/tsconfig.json

@@ -21,6 +21,9 @@
       "@modules/*": ["./modules/*"],
       "@overleaf/o-error": ["../../libraries/o-error"],
       "@overleaf/ranges-tracker": ["../../libraries/ranges-tracker"],
+      "@overleaf/validation-tools": ["../../libraries/validation-tools"],
+      "overleaf-editor-core": ["../../libraries/overleaf-editor-core"],
+      "overleaf-editor-core/*": ["../../libraries/overleaf-editor-core/*"],
 
       "@ol-types/*": ["./types/*"],
       "@ol-storybook/*": ["./.storybook/*"],

services/web/types/uppy-utils.d.ts

@@ -0,0 +1,11 @@
+// Ambient module declaration for @uppy/utils subpath imports.
+// Under Yarn PnP, TypeScript cannot find the ambient declarations in
+// @uppy/utils/types/index.d.ts for deep imports like
+// @uppy/utils/lib/getDroppedFiles. Re-declare the subset we use here.
+declare module '@uppy/utils/lib/getDroppedFiles' {
+  function getDroppedFiles(
+    dataTransfer: DataTransfer,
+    options?: Record<string, unknown>
+  ): Promise<File[]>
+  export default getDroppedFiles
+}

services/web/webpack.config.js

@@ -51,13 +51,11 @@ globSync(
 })
 
 function getModuleDirectory(moduleName) {
-  const entrypointPath = require.resolve(moduleName)
-  const suffix = `node_modules/${moduleName}`
-  const idx = entrypointPath.indexOf(suffix)
-  if (idx === -1) {
-    throw new Error(`could not find Node module: ${moduleName}`)
+  try {
+    return path.dirname(require.resolve(`${moduleName}/package.json`))
+  } catch (err) {
+    throw new Error(`could not find Node module: ${moduleName}`, { cause: err })
   }
-  return entrypointPath.slice(0, idx + suffix.length)
 }
 
 const mathjaxDir = getModuleDirectory('mathjax')
@@ -314,6 +312,21 @@ module.exports = {
       // Ensure all packages use the same jQuery instance (prevents duplicate
       // copies from Yarn hoisting breaking jQuery plugins like daterangepicker)
       jquery: require.resolve('jquery'),
+      // Under Yarn PnP, babel-injected core-js polyfill imports cannot be
+      // resolved from third-party packages (e.g. @uppy, pdfjs-dist) because
+      // they don't declare core-js as a dependency. Alias to the web
+      // workspace's copy so all packages can resolve it.
+      'core-js': getModuleDirectory('core-js'),
+      // writefull's tsconfig uses importHelpers: true, which emits tslib
+      // imports that must be resolvable from the web workspace.
+      tslib: getModuleDirectory('tslib'),
+      // Under PnP, packages like cypress/react that import react/react-dom
+      // can't resolve them from their own scope. Alias to web's copies.
+      react: getModuleDirectory('react'),
+      'react-dom': getModuleDirectory('react-dom'),
+      // ai-sdk packages declare zod as a peer dep but PnP can't resolve it
+      // from their scope in the Docker build.
+      zod: getModuleDirectory('zod'),
     },
     // symlinks: false, // enable this while using `npm link`
     extensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs', '.cjs', '.json'],