chore: Enable .js TypeScript checks in repo (#6483)

## Summary

Currently .js files weren't type checked. This PR adds type-checking for
them alongside with necessary JSDoc comments.

Requires:
- #6486
- #6487
- #6485

## Test plan

🚀

.eslintrc.js

@@ -1,3 +1,4 @@
+/** @type {import('eslint').ESLint.ConfigData} */
 module.exports = {
   root: true,
   overrides: [
@@ -8,6 +9,7 @@ module.exports = {
         project: true,
         tsconfigRootDir: __dirname,
       },
+      plugins: ['tsdoc'],
       extends: ['plugin:@typescript-eslint/recommended-type-checked'],
       rules: {
         '@typescript-eslint/no-unsafe-call': 'off',
@@ -39,6 +41,15 @@ module.exports = {
         '@typescript-eslint/no-non-null-assertion': 'off',
         '@typescript-eslint/no-duplicate-type-constituents': 'error',
         '@typescript-eslint/no-shadow': 'error',
+        'tsdoc/syntax': 'error',
+      },
+    },
+    {
+      files: ['*.js', '*.jsx'],
+      plugins: ['jsdoc'],
+      extends: ['plugin:jsdoc/recommended'],
+      rules: {
+        'jsdoc/tag-lines': 'off',
       },
     },
   ],
@@ -51,14 +62,7 @@ module.exports = {
     'plugin:import/typescript',
     'plugin:react-hooks/recommended',
   ],
-  plugins: [
-    'react',
-    'react-native',
-    'import',
-    'jest',
-    '@typescript-eslint',
-    'tsdoc',
-  ],
+  plugins: ['react', 'react-native', 'import', 'jest', '@typescript-eslint'],
   env: {
     'react-native/react-native': true,
     'jest/globals': true,
@@ -81,7 +85,6 @@ module.exports = {
     'no-use-before-define': 'off',
     eqeqeq: 'error',
     'no-unreachable': 'error',
-    'tsdoc/syntax': 'error',
     'jest/no-disabled-tests': 'warn',
     'jest/no-focused-tests': 'error',
     'jest/no-identical-title': 'error',

.lintstagedrc-common.js

@@ -1,3 +1,4 @@
+/** @type {import('lint-staged').Config} */
 module.exports = {
   '*.(js|ts|tsx)': ['yarn eslint', 'yarn prettier --write'],
 };

apps/common-app/.eslintrc.js

@@ -1,3 +1,4 @@
+/** @type {import('eslint').ESLint.ConfigData} */
 module.exports = {
   root: true,
   extends: ['@react-native', 'prettier', '../../.eslintrc.js'],

apps/common-app/.lintstagedrc.js

@@ -1,5 +1,7 @@
+/** @type {import('lint-staged').Config} */
 const commonConfig = require('../../.lintstagedrc-common.js');
 
+/** @type {import('lint-staged').Config} */
 module.exports = {
   ...commonConfig,
 };

apps/common-app/babel.config.js

@@ -1,3 +1,4 @@
+/** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
   plugins: ['react-native-reanimated/plugin'],

apps/fabric-example/babel.config.js

@@ -1,3 +1,4 @@
+/** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
   plugins: [

apps/fabric-example/metro.config.js

@@ -7,6 +7,11 @@ const path = require('path');
 
 const root = path.resolve(__dirname, '../..');
 
+/**
+ * Metro configuration https://reactnative.dev/docs/metro
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
 const config = {
   watchFolders: [root],
 };

apps/fabric-example/react-native.config.js

@@ -1,3 +1,4 @@
+/** @type {import('@react-native-community/cli-types').Config} */
 module.exports = {
   project: {
     ios: {},

apps/macos-example/babel.config.js

@@ -1,3 +1,4 @@
+/** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
   plugins: [

apps/macos-example/metro.config.js

@@ -4,6 +4,7 @@ const {
 } = require('react-native-reanimated/metro-config');
 
 const path = require('path');
+// @ts-expect-error
 const exclusionList = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
 const pack = require('../../packages/react-native-reanimated/package.json');
@@ -12,6 +13,11 @@ const root = path.resolve(__dirname, '../..');
 
 const modules = [...Object.keys(pack.peerDependencies), 'react-native-macos'];
 
+/**
+ * Metro configuration https://reactnative.dev/docs/metro
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
 const config = {
   projectRoot: __dirname,
   watchFolders: [root],
@@ -27,6 +33,7 @@ const config = {
     ),
 
     extraNodeModules: modules.reduce((acc, name) => {
+      // @ts-expect-error
       acc[name] = path.join(__dirname, 'node_modules', name);
       return acc;
     }, {}),

apps/next-example/babel.config.js

@@ -1,3 +1,4 @@
+/** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: ['next/babel'],
   plugins: [

apps/next-example/pages/_document.js

@@ -34,6 +34,7 @@ body {
 export default class MyDocument extends Document {
   static async getInitialProps({ renderPage }) {
     AppRegistry.registerComponent('main', () => Main);
+    // @ts-expect-error
     const { getStyleElement } = AppRegistry.getApplication('main');
     const page = await renderPage();
     const styles = [

apps/next-example/pages/index.js

@@ -29,14 +29,17 @@ export default function App() {
         Next example
       </Text>
 
+      {/* @ts-expect-error */}
       <Text style={styles.link} accessibilityRole="link" href={`/ssg`}>
         SSG
       </Text>
 
+      {/* @ts-expect-error */}
       <Text style={styles.link} accessibilityRole="link" href={`/ssr`}>
         SSR
       </Text>
 
+      {/* @ts-expect-error */}
       <Text style={styles.link} accessibilityRole="link" href={`/test`}>
         e2e test page
       </Text>

apps/next-example/pages/noreanimated.js

@@ -6,6 +6,7 @@ export default function App() {
       <Text accessibilityRole="header" style={styles.text}>
         Reanimated Page
       </Text>
+      {/* @ts-expect-error */}
       <Text style={styles.link} accessibilityRole="link" href="/">
         Go Back
       </Text>

apps/next-example/pages/reanimated.js

@@ -7,6 +7,7 @@ export default function App() {
       <Animated.Text accessibilityRole="header" style={styles.text}>
         Reanimated Page
       </Animated.Text>
+      {/* @ts-expect-error */}
       <Animated.Text style={styles.link} accessibilityRole="link" href="/">
         Go Back
       </Animated.Text>

apps/next-example/tsconfig.json

@@ -4,7 +4,8 @@
     "module": "esnext",
     "incremental": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "noImplicitAny": false
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"]
 }

apps/paper-example/babel.config.js

@@ -1,3 +1,4 @@
+/** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
   plugins: [

apps/paper-example/metro.config.js

@@ -7,6 +7,11 @@ const path = require('path');
 
 const root = path.resolve(__dirname, '../..');
 
+/**
+ * Metro configuration https://reactnative.dev/docs/metro
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
 const config = {
   watchFolders: [root],
 };

apps/paper-example/react-native.config.js

@@ -1,3 +1,4 @@
+/** @type {import('@react-native-community/cli-types').Config} */
 module.exports = {
   project: {
     ios: {},

apps/tvos-example/babel.config.js

@@ -1,3 +1,4 @@
+/** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
   plugins: [

apps/tvos-example/jest.config.js

@@ -1,3 +1,4 @@
+/** @type {import('jest').Config} */
 module.exports = {
   preset: 'react-native',
 };

apps/tvos-example/metro.config.js

@@ -4,13 +4,15 @@ const {
 } = require('react-native-reanimated/metro-config');
 
 const path = require('path');
+// @ts-expect-error
 const exclusionList = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
 
 const root = path.resolve(__dirname, '../..');
 
 const modules = ['react-native'];
 
+/** @type {import('metro-config').MetroConfig} */
 const config = {
   projectRoot: __dirname,
   watchFolders: [root],
@@ -26,6 +28,7 @@ const config = {
     ),
 
     extraNodeModules: modules.reduce((acc, name) => {
+      // @ts-expect-error
       acc[name] = path.join(__dirname, 'node_modules', name);
       return acc;
     }, {}),

apps/tvos-example/react-native.config.js

@@ -1,3 +1,4 @@
+/** @type {import('@react-native-community/cli-types').Config} */
 module.exports = {
   dependencies: {
     // Required for Expo CLI to be used with platforms (such as Apple TV) that are not supported in Expo SDK

apps/web-example/babel.config.js

@@ -1,6 +1,7 @@
 const stylexPlugin = require('@stylexjs/babel-plugin');
 const rsdPlugin = require('react-strict-dom/babel');
 
+/** @type {import('@babel/core').ConfigFunction} */
 module.exports = function (api) {
   const plugins = [
     rsdPlugin,
@@ -22,6 +23,7 @@ module.exports = function (api) {
   if (disableBabelPlugin) {
     console.log('Starting Web example without Babel plugin.');
   } else {
+    // @ts-expect-error
     plugins.push('react-native-reanimated/plugin');
   }
 

apps/web-example/metro.config.js

@@ -16,18 +16,21 @@ const config = getDefaultConfig(projectRoot);
 // 1. Watch all files within the monorepo
 config.watchFolders = [monorepoRoot];
 // 2. Let Metro know where to resolve packages and in what order
+// @ts-expect-error
 config.resolver.nodeModulesPaths = [
   path.resolve(projectRoot, 'node_modules'),
   path.resolve(monorepoRoot, 'node_modules'),
 ];
 
 const modulesToBlock = ['@react-native'];
 
+// @ts-expect-error
 config.resolver.blacklistRE = exclusionList(
   modulesToBlock.map(
     (m) =>
       new RegExp(`^${escape(path.join(monorepoRoot, 'node_modules', m))}\\/.*$`)
   )
 );
 
+// @ts-expect-error
 module.exports = wrapWithReanimatedMetroConfig(config);

package.json

@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "eslint": "^8.57.0",
+    "eslint-plugin-jsdoc": "^50.2.2",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "prettier": "^3.3.3",

packages/eslint-plugin-reanimated/.eslintrc.js

@@ -1,3 +1,4 @@
+/** @type {import('eslint').ESLint.ConfigData} */
 module.exports = {
   extends: ['../../.eslintrc.js'],
   ignorePatterns: ['index.js', 'types', 'public'],

packages/eslint-plugin-reanimated/babel.config.js

@@ -1,3 +1,4 @@
+/** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: [
     [

packages/eslint-plugin-reanimated/jest.config.js

@@ -1,3 +1,4 @@
+/** @type {import('jest').Config} */
 module.exports = {
   preset: 'react-native',
   modulePathIgnorePatterns: ['lib'],

packages/react-native-reanimated/.eslintrc.js

@@ -1,3 +1,4 @@
+/** @type {import('eslint').ESLint.ConfigData} */
 module.exports = {
   extends: ['../../.eslintrc.js'],
   overrides: [

packages/react-native-reanimated/.lintstagedrc.js

@@ -1,5 +1,6 @@
 const commonConfig = require('../../.lintstagedrc-common.js');
 
+/** @type {import('lint-staged').Config} */
 module.exports = {
   ...commonConfig,
 };

packages/react-native-reanimated/babel.config.js

@@ -1,3 +1,4 @@
+/** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: [
     [

packages/react-native-reanimated/jest.config.js

@@ -1,3 +1,4 @@
+/** @type {import('jest').Config} */
 module.exports = {
   preset: 'react-native',
   modulePathIgnorePatterns: ['lib'],

packages/react-native-reanimated/metro-config/index.js

@@ -10,6 +10,10 @@ const COLLAPSED_STACK_REGEX = new RegExp(
     .join('|')
 );
 
+/**
+ * @param {import('metro-config').MetroConfig} config
+ * @returns {import('metro-config').MetroConfig}
+ */
 function wrapWithReanimatedMetroConfig(config) {
   return {
     ...config,

packages/react-native-reanimated/mock.js

@@ -1,4 +1,5 @@
 const Reanimated = require('./src/mock');
+// @ts-expect-error
 const Animated = Reanimated.default;
 
 module.exports = {

packages/react-native-reanimated/plugin/.lintstagedrc.js

@@ -1,5 +1,6 @@
 const commonConfig = require('../../../.lintstagedrc-common.js');
 
+/** @type {import('lint-staged').Config} */
 module.exports = {
   ...commonConfig,
 };

packages/react-native-reanimated/plugin/babel.config.js

@@ -1,6 +1,7 @@
 // This file is needed for manual tests of the plugin.
 const reanimatedPlugin = require('./index.js');
 
+/** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   plugins: [reanimatedPlugin],
 };

packages/react-native-reanimated/plugin/plugin-unit-test.babel.config.js

@@ -1,5 +1,6 @@
 // This file is supposed to mimic the babel.config.js that the user would have
 // in their project by creating a new app from template.
+/** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
 };

packages/react-native-reanimated/plugin/tsconfig.json

@@ -11,6 +11,7 @@
     "outDir": "lib",
     "rootDir": "src",
     "declaration": false,
+    "noEmit": false,
   },
   "include": ["src"]
 }

packages/react-native-reanimated/src/__mocks__/ReanimatedEventEmitter.js

@@ -3,6 +3,7 @@ const NOOP = () => {
   // noop
 };
 
+// ts-prune-ignore-next Is this even used?
 export default {
   addListener: NOOP,
   removeAllListeners: NOOP,

packages/react-native-reanimated/src/__mocks__/ReanimatedModule.native.js

@@ -3,6 +3,7 @@ const NOOP = () => {
   // noop
 };
 
+// ts-prune-ignore-next Is this even used?
 export default {
   configureProps: NOOP,
   connectNodes: NOOP,

prettier.config.js

@@ -1,3 +1,4 @@
+/** @type {import('prettier').Config} */
 module.exports = {
   plugins: ['prettier-plugin-jsdoc'],
   bracketSameLine: true,