Merge pull request #15040 from overleaf/jpa-js-to-jsx

[web] rename all the JSX files to .jsx/.tsx

GitOrigin-RevId: 82056ae47e017523722cf258dcc83c8a925a28f7

services/web/.eslintrc

@@ -112,7 +112,7 @@
     },
     {
       // Cypress specific rules
-      "files": ["cypress/**/*.{js,ts,tsx}", "**/test/frontend/**/*.spec.{js,ts,tsx}"],
+      "files": ["cypress/**/*.{js,jsx,ts,tsx}", "**/test/frontend/**/*.spec.{js,jsx,ts,tsx}"],
       "extends": [
         "plugin:cypress/recommended"
       ]
@@ -120,7 +120,7 @@
     {
       // React component specific rules
       //
-      "files": ["**/frontend/js/**/components/**/*.{js,ts,tsx}", "**/frontend/js/**/hooks/**/*.{js,ts,tsx}"],
+      "files": ["**/frontend/js/**/components/**/*.{js,jsx,ts,tsx}", "**/frontend/js/**/hooks/**/*.{js,jsx,ts,tsx}"],
       "rules": {
         // https://astexplorer.net/
         "no-restricted-syntax": [
@@ -150,15 +150,12 @@
     },
     {
       // Frontend specific rules
-      "files": ["**/frontend/js/**/*.{js,ts,tsx}", "**/frontend/stories/**/*.{js,ts,tsx}", "**/*.stories.{js,ts,tsx}", "**/test/frontend/**/*.{js,ts,tsx}", "**/test/frontend/components/**/*.spec.{js,ts,tsx}"],
+      "files": ["**/frontend/js/**/*.{js,jsx,ts,tsx}", "**/frontend/stories/**/*.{js,jsx,ts,tsx}", "**/*.stories.{js,jsx,ts,tsx}", "**/test/frontend/**/*.{js,jsx,ts,tsx}", "**/test/frontend/components/**/*.spec.{js,jsx,ts,tsx}"],
       "env": {
         "browser": true
       },
       "parserOptions": {
-        "sourceType": "module",
-        "ecmaFeatures": {
-          "jsx": true
-        }
+        "sourceType": "module"
       },
       "plugins": [
         "jsx-a11y"
@@ -233,7 +230,12 @@
               ]
             }
           }
-        ]
+        ],
+
+        // Require .jsx or .tsx file extension when using JSX
+        "react/jsx-filename-extension": ["error", {
+          "extensions": [".jsx", ".tsx"]
+        }]
       }
     },
     // React + TypeScript-specific rules
@@ -277,13 +279,13 @@
         "**/app/**/*.{js,cjs,mjs}", "app.js", "modules/*/*.js",
         // Frontend: Prefer debugConsole over bare console
         //           Docs: https://manual.dev-overleaf.com/development/code/logging/#frontend
-        "**/frontend/**/*.{js,ts,tsx}"
+        "**/frontend/**/*.{js,jsx,ts,tsx}"
       ],
       "excludedFiles": [
         // Allow console logs in scripts
         "**/scripts/**/*.js",
         // Allow console logs in stories
-        "**/stories/**/*.{js,ts,tsx}",
+        "**/stories/**/*.{js,jsx,ts,tsx}",
         // Workers do not have access to the search params for enabling ?debug=true.
         // self.location.url is the URL of the worker script.
         "*.worker.{js,ts}"

services/web/Makefile

@@ -153,15 +153,15 @@ build_test_frontend_ct:
 	COMPOSE_PROJECT_NAME=frontend_test_ct_editor_$(BUILD_DIR_NAME) $(DOCKER_COMPOSE) build test_frontend_ct
 
 test_frontend_ct_core: export CYPRESS_RESULTS=./cypress/results/core
-test_frontend_ct_core: export CYPRESS_SPEC_PATTERN=./{test,modules/**/test}/frontend/**/*.spec.{js,ts,tsx}
-test_frontend_ct_core: export CYPRESS_EXCLUDE_SPEC_PATTERN=./test/frontend/features/source-editor/**/*.spec.{js,ts,tsx}
+test_frontend_ct_core: export CYPRESS_SPEC_PATTERN=./{test,modules/**/test}/frontend/**/*.spec.{js,jsx,ts,tsx}
+test_frontend_ct_core: export CYPRESS_EXCLUDE_SPEC_PATTERN=./test/frontend/features/source-editor/**/*.spec.{js,jsx,ts,tsx}
 test_frontend_ct_core:
 	COMPOSE_PROJECT_NAME=frontend_test_ct_$(BUILD_DIR_NAME) $(DOCKER_COMPOSE) down -v -t 0
 	COMPOSE_PROJECT_NAME=frontend_test_ct_$(BUILD_DIR_NAME) $(DOCKER_COMPOSE) run --rm test_frontend_ct
 	COMPOSE_PROJECT_NAME=frontend_test_ct_$(BUILD_DIR_NAME) $(DOCKER_COMPOSE) down -v -t 0
 
 test_frontend_ct_editor: export CYPRESS_RESULTS=./cypress/results/editor
-test_frontend_ct_editor: export CYPRESS_SPEC_PATTERN=./test/frontend/features/source-editor/**/*.spec.{js,ts,tsx}
+test_frontend_ct_editor: export CYPRESS_SPEC_PATTERN=./test/frontend/features/source-editor/**/*.spec.{js,jsx,ts,tsx}
 test_frontend_ct_editor:
 	COMPOSE_PROJECT_NAME=frontend_test_ct_editor_$(BUILD_DIR_NAME) $(DOCKER_COMPOSE) down -v -t 0
 	COMPOSE_PROJECT_NAME=frontend_test_ct_editor_$(BUILD_DIR_NAME) $(DOCKER_COMPOSE) run --rm test_frontend_ct
@@ -410,17 +410,17 @@ $(WITH_NODE_MODULES_PATH): export PATH=$(NODE_MODULES_PATH)
 lint: lint_backend
 lint_backend:
 	npx eslint \
-		'app.{js,mjs,ts,tsx}' \
-		'app/**/*.{js,mjs,ts,tsx}' \
-		'modules/*/index.{js,mjs,ts,tsx}' \
-		'modules/*/app/**/*.{js,mjs,ts,tsx}' \
+		'app.{js,jsx,mjs,ts,tsx}' \
+		'app/**/*.{js,jsx,mjs,ts,tsx}' \
+		'modules/*/index.{js,jsx,mjs,ts,tsx}' \
+		'modules/*/app/**/*.{js,jsx,mjs,ts,tsx}' \
 		--max-warnings=0
 
 lint: lint_frontend
 lint_frontend:
 	npx eslint \
-		'frontend/**/*.{js,mjs,ts,tsx}' \
-		'modules/**/frontend/**/*.{js,mjs,ts,tsx}' \
+		'frontend/**/*.{js,jsx,mjs,ts,tsx}' \
+		'modules/**/frontend/**/*.{js,jsx,mjs,ts,tsx}' \
 		--max-warnings=0
 
 lint: lint_test
@@ -428,34 +428,34 @@ lint_test: lint_test_app
 lint_test_app: lint_test_app_unit
 lint_test_app_unit:
 	npx eslint \
-		'test/unit/**/*.{js,mjs,ts,tsx}' \
+		'test/unit/**/*.{js,jsx,mjs,ts,tsx}' \
 		--max-warnings=0
 
 lint_test_app: lint_test_app_rest
 lint_test_app_rest:
 	npx eslint \
-		'test/**/*.{js,mjs,ts,tsx}' \
-		--ignore-pattern 'test/unit/**/*.{js,mjs,ts,tsx}' \
+		'test/**/*.{js,jsx,mjs,ts,tsx}' \
+		--ignore-pattern 'test/unit/**/*.{js,jsx,mjs,ts,tsx}' \
 		--max-warnings=0
 
 lint_test: lint_test_modules
 lint_test_modules:
 	npx eslint \
-		'modules/*/test/**/*.{js,mjs,ts,tsx}' \
+		'modules/*/test/**/*.{js,jsx,mjs,ts,tsx}' \
 		--max-warnings=0
 
 lint: lint_misc
 # migrations, scripts, webpack config, karma config
 lint_misc:
 	npx eslint . \
-		--ignore-pattern 'app.{js,mjs,ts,tsx}' \
-		--ignore-pattern 'app/**/*.{js,mjs,ts,tsx}' \
-		--ignore-pattern 'modules/*/app/**/*.{js,mjs,ts,tsx}' \
-		--ignore-pattern 'modules/*/index.{js,mjs,ts,tsx}' \
-		--ignore-pattern 'frontend/**/*.{js,mjs,ts,tsx}' \
-		--ignore-pattern 'modules/**/frontend/**/*.{js,mjs,ts,tsx}' \
-		--ignore-pattern 'test/**/*.{js,mjs,ts,tsx}' \
-		--ignore-pattern 'modules/*/test/**/*.{js,mjs,ts,tsx}' \
+		--ignore-pattern 'app.{js,jsx,mjs,ts,tsx}' \
+		--ignore-pattern 'app/**/*.{js,jsx,mjs,ts,tsx}' \
+		--ignore-pattern 'modules/*/app/**/*.{js,jsx,mjs,ts,tsx}' \
+		--ignore-pattern 'modules/*/index.{js,jsx,mjs,ts,tsx}' \
+		--ignore-pattern 'frontend/**/*.{js,jsx,mjs,ts,tsx}' \
+		--ignore-pattern 'modules/**/frontend/**/*.{js,jsx,mjs,ts,tsx}' \
+		--ignore-pattern 'test/**/*.{js,jsx,mjs,ts,tsx}' \
+		--ignore-pattern 'modules/*/test/**/*.{js,jsx,mjs,ts,tsx}' \
 		--max-warnings=0
 
 lint: lint_pug

services/web/cypress.config.ts

@@ -20,7 +20,7 @@ export default defineConfig({
     },
     specPattern:
       process.env.CYPRESS_SPEC_PATTERN ||
-      './{test,modules/**/test}/frontend/**/*.spec.{js,ts,tsx}',
+      './{test,modules/**/test}/frontend/**/*.spec.{js,jsx,ts,tsx}',
     excludeSpecPattern: process.env.CYPRESS_EXCLUDE_SPEC_PATTERN,
   },
   retries: {

services/web/cypress/support/webpack.cypress.ts

@@ -31,13 +31,13 @@ const buildConfig = () => {
   // add entrypoint under '/' for latex-linter worker
   addWorker(
     'latex-linter-worker',
-    '../../frontend/js/features/source-editor/languages/latex/linter/latex-linter.worker.js'
+    '../../frontend/js/features/source-editor/languages/latex/linter/latex-linter.worker'
   )
 
   // add entrypoints under '/' for pdfjs workers
   const pdfjsVersions = ['pdfjs-dist213', 'pdfjs-dist36']
   for (const name of pdfjsVersions) {
-    addWorker(name, `${name}/legacy/build/pdf.worker.js`)
+    addWorker(name, `${name}/legacy/build/pdf.worker`)
   }
 
   return webpackConfig

services/web/frontend/js/features/pdf-preview/util/pdf-js-versions.js

@@ -19,7 +19,7 @@ async function importPDFJS36() {
 
   createWorker(() => {
     PDFJS.GlobalWorkerOptions.workerPort = new Worker(
-      new URL('pdfjs-dist36/legacy/build/pdf.worker.js', import.meta.url)
+      new URL('pdfjs-dist36/legacy/build/pdf.worker', import.meta.url)
     )
   })
 
@@ -45,7 +45,7 @@ async function importPDFJS213() {
 
   createWorker(() => {
     PDFJS.GlobalWorkerOptions.workerPort = new Worker(
-      new URL('pdfjs-dist213/legacy/build/pdf.worker.js', import.meta.url)
+      new URL('pdfjs-dist213/legacy/build/pdf.worker', import.meta.url)
     )
   })