fix: web types (#8401)

Required for 
- #8371

## Summary

This PR is an ongoing effort to reduce the impact of Reanimated and
Worklets in web bundles and to simplify the logic of platform-dependent
code.

The ideal solution is to have native-only files with a `.native.ts`
extension and web only files with just `.ts` extension alongside them.
However, currently we also have `.web.ts` files, which can be
problematic in some environments. We want to transition to `.native.ts`
files gradually.

This PR does a few things:

- It edits TSConfigs alongside the repository. By default we specify
that accepted extensions are `.native.ts`, `.ios.ts`, `.android.ts`,
`.ts` (obviously also `.tsx` etc.). This means that when in IDE we click
`go to source` we'll go to a `.native` file which is the most common use
case for us. Also types for type-checking will be pulled like this.

- We add additional TSConfigs for web types. These extensions ignore
`.native` .etc. extensions and accept `.web` extensions. You can switch
to those TSConfigs for web type-checking in your IDE.

- Adding type checking scripts and CI checks for web types.

- Fixing (or ignoring) all current problems with web types - i.e.
mismatching web and native types in Reanimated.

- Amending eslint configs to properly work in this setup.

## Test plan

CI

Author: tjzel

.github/actions/reanimated-typescript-compatibility-check/action.yml

@@ -19,10 +19,15 @@ runs:
       shell: bash
       run: yarn up react-native@${{ inputs.react-native-version }}
 
-    - name: Check source types
+    - name: Check native source types
       shell: bash
       working-directory: packages/react-native-reanimated
-      run: yarn type:check:src
+      run: yarn type:check:src:native
+
+    - name: Check web source types
+      shell: bash
+      working-directory: packages/react-native-reanimated
+      run: yarn type:check:src:web
 
     - name: Check plugin types
       shell: bash

.lintstagedrc-common.js

@@ -1,4 +1,4 @@
-/** @type {import('lint-staged').Config} */
+/** @type {import('lint-staged').Configuration} */
 module.exports = {
   '*.(js|jsx|ts|tsx)': [
     'yarn eslint --flag v10_config_lookup_from_file',

apps/common-app/.lintstagedrc.js

@@ -1,7 +1,8 @@
-/** @type {import('lint-staged').Config} */
+/* eslint-disable @typescript-eslint/no-require-imports */
+/** @type {import('lint-staged').Configuration} */
 const commonConfig = require('../../.lintstagedrc-common.js');
 
-/** @type {import('lint-staged').Config} */
+/** @type {import('lint-staged').Configuration} */
 module.exports = {
   ...commonConfig,
 };

apps/common-app/eslint.config.mjs

@@ -1,17 +1,18 @@
+import { fixupPluginRules } from '@eslint/compat';
 import jsEslint from '@eslint/js';
-import tsEslint from 'typescript-eslint';
-import perfectionist from 'eslint-plugin-perfectionist';
-import reactNative from 'eslint-plugin-react-native';
-import react from 'eslint-plugin-react';
-import globals from 'globals';
 import importPlugin from 'eslint-plugin-import';
+import noRelativeImportPaths from 'eslint-plugin-no-relative-import-paths';
+import perfectionist from 'eslint-plugin-perfectionist';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import react from 'eslint-plugin-react';
+// eslint-disable-next-line import/default
 import reactHooks from 'eslint-plugin-react-hooks';
-import noRelativeImportPaths from 'eslint-plugin-no-relative-import-paths';
+// @ts-expect-error eslint-plugin-react-native has no types.
+import reactNative from 'eslint-plugin-react-native';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import unusedImports from 'eslint-plugin-unused-imports';
-import { fixupPluginRules } from '@eslint/compat';
-import { globalIgnores } from 'eslint/config';
+import globals from 'globals';
+import tsEslint from 'typescript-eslint';
 
 /** @type {import('typescript-eslint').ConfigWithExtends[]} */
 export default tsEslint.config(
@@ -21,14 +22,30 @@ export default tsEslint.config(
   eslintPluginPrettierRecommended,
   {
     languageOptions: {
+      parserOptions: {
+        parser: tsEslint.parser,
+        project: [
+          './tsconfig.json',
+          './tsconfig.web.json',
+          './../../tsconfig.json',
+        ],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  {
+    languageOptions: {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       globals: {
         React: true,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         ...reactNative.environments['react-native']['react-native'],
         ...globals.node,
       },
     },
     plugins: {
       'no-relative-import-paths': noRelativeImportPaths,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       'react-native': fixupPluginRules(reactNative),
       'simple-import-sort': simpleImportSort,
       'unused-imports': unusedImports,
@@ -267,7 +284,6 @@ export default tsEslint.config(
       'import/resolver': {
         typescript: {
           alwaysTryTypes: true,
-          project: './tsconfig.json',
         },
       },
       react: {
@@ -276,15 +292,7 @@ export default tsEslint.config(
     },
   },
   {
-    files: ['**/*.ts', '**/*.tsx'],
     extends: [tsEslint.configs.recommendedTypeChecked],
-    languageOptions: {
-      parserOptions: {
-        parser: tsEslint.parser,
-        project: './tsconfig.json',
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
     rules: {
       '@typescript-eslint/array-type': ['error', { default: 'generic' }],
       '@typescript-eslint/consistent-type-exports': 'error',
@@ -328,6 +336,5 @@ export default tsEslint.config(
       '@typescript-eslint/no-unsafe-member-access': 'error',
       'no-underscore-dangle': 'error',
     },
-  },
-  globalIgnores(['**/eslint.config.mjs'])
+  }
 );

apps/common-app/package.json

@@ -7,7 +7,9 @@
     "lint": "eslint . --flag v10_config_lookup_from_file",
     "format": "prettier --write --list-different .",
     "circular-dependency-check": "yarn madge --extensions js,jsx,ts,tsx --circular src",
-    "type:check": "tsc --noEmit",
+    "type:check": "yarn type:check:native && yarn type:check:web",
+    "type:check:native": "tsc --noEmit",
+    "type:check:web": "tsc --noEmit --project tsconfig.web.json",
     "type:check:strict": "tsc --noEmit --customConditions react-native-strict-api"
   },
   "peerDependencies": {

apps/common-app/scripts/dependencies.js

@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-require-imports */
 const path = require('path');
 
 /**

apps/common-app/src/apps/css/components/cards/ExpandableCard.tsx

@@ -50,6 +50,9 @@ export default function ExpandableCard({
           style={[styles.overlay, { height: overlayHeight }]}>
           <Animated.View style={[styles.gradient, animatedGradientStyle]}>
             <Svg height={overlayHeight} width="100%">
+              {/* TODO: Fix me */}
+              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+              {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
               <Defs>
                 <LinearGradient
                   id="vertical-gradient"

apps/common-app/src/apps/css/components/inputs/TabSelector.tsx

@@ -83,6 +83,9 @@ function TabSelector<T extends string>({
     () => (
       <View pointerEvents="none" style={StyleSheet.absoluteFill}>
         <Svg>
+          {/* TODO: Fix me */}
+          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+          {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
           <Defs>
             <LinearGradient id="tab-selector" x1="0" x2="1" y1="0" y2="0">
               <Stop

apps/common-app/src/apps/css/examples/animations/routeCards/RealWorldExamplesCard.tsx

@@ -84,10 +84,16 @@ function Rocket({ size }: RocketProps) {
   return (
     <Svg
       viewBox="0 0 180 179" // Set the fixed viewBox based on the original SVG dimensions
+      // TODO: Fix me
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801
       style={{
         height: size,
         width: size,
       }}>
+      {/* TODO: Fix me */}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
       <Defs>
         <LinearGradient id="rocket-card" x1="0" x2="1" y1="0" y2="0">
           <Stop offset="0" stopColor={colors.background2} />
@@ -131,6 +137,9 @@ type FlameProps = {
 function Flame({ height, width }: FlameProps) {
   return (
     <Svg height={height} width={width}>
+      {/* TODO: Fix me */}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801 */}
       <Defs>
         <LinearGradient id="flame-card" x1="0" x2="1" y1="0" y2="0">
           <Stop offset="0" stopColor={colors.primaryLight} />

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/svg/Circle.tsx

@@ -1,4 +1,7 @@
 import Animated, { type CSSAnimationKeyframes } from 'react-native-reanimated';
+// TODO: Fix me
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore RNSVG doesn't export types for web, see https://github.com/software-mansion/react-native-svg/pull/2801
 import { Circle, type CircleProps, Svg } from 'react-native-svg';
 
 import { ExamplesScreen } from '@/apps/css/components';