migrate to ESLint flat config, convert to ESM

.github/workflows/pre-merge.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: "20"
-          cache: "yarn"
+          cache: yarn
 
       - name: Check lock for duplications
         run: yarn dedupe --check
@@ -32,7 +32,6 @@ jobs:
 
       - name: Run Lint
         run: yarn ci:lint
-        working-directory: website
 
   build:
     runs-on: ubuntu-latest
@@ -47,7 +46,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: "20"
-          cache: "yarn"
+          cache: yarn
 
       - name: Install dependencies
         run: yarn install --immutable
@@ -56,4 +55,4 @@ jobs:
         run: yarn build
         working-directory: website
         env:
-          NODE_OPTIONS: "--max_old_space_size=8192"
+          NODE_OPTIONS: --max_old_space_size=8192

.gitignore

@@ -19,10 +19,9 @@ node_modules
 
 *.tsbuildinfo
 
-scripts/lint-examples/out/
-
-sync-api-docs/generatedComponentApiDocs.js
-sync-api-docs/extracted.json
+packages/lint-examples/out/
+packages/sync-api-docs/generatedComponentApiDocs.js
+packages/sync-api-docs/extracted.json
 
 website/.docusaurus
 website/.cache-loader
@@ -36,7 +35,3 @@ website/build/
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
-
-
-# Generated file(s) for llms
-llms.txt

.prettierrc.json

@@ -1,7 +1,7 @@
 {
   "overrides": [
     {
-      "files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
+      "files": ["*.js", "*.mjs", "*.cjs", "*.jsx", "*.ts", "*.tsx"],
       "options": {
         "arrowParens": "avoid",
         "bracketSpacing": false,
@@ -13,7 +13,7 @@
       }
     },
     {
-      "files": "*.md",
+      "files": ["*.md", "*.mdx"],
       "options": {
         "arrowParens": "avoid",
         "bracketSpacing": false,

docs/_getting-started-linux-android.md

@@ -18,7 +18,7 @@ Setting up your development environment can be somewhat tedious if you're new to
 
 <h4 id="android-studio">1. Install Android Studio</h4>
 
-[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
+[Download and install Android Studio](https://developer.android.com/studio). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
 
 - `Android SDK`
 - `Android SDK Platform`

docs/_getting-started-macos-android.md

@@ -57,7 +57,7 @@ Setting up your development environment can be somewhat tedious if you're new to
 
 <h4 id="android-studio">1. Install Android Studio</h4>
 
-[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
+[Download and install Android Studio](https://developer.android.com/studio). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
 
 - `Android SDK`
 - `Android SDK Platform`

docs/_getting-started-windows-android.md

@@ -34,7 +34,7 @@ Setting up your development environment can be somewhat tedious if you're new to
 
 <h4 id="android-studio">1. Install Android Studio</h4>
 
-[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
+[Download and install Android Studio](https://developer.android.com/studio). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
 
 - `Android SDK`
 - `Android SDK Platform`

docs/animated.md

@@ -18,13 +18,7 @@ The following example contains a `View` which will fade in and fade out based on
 ```SnackPlayer name=Animated%20Example
 import React, {useRef} from 'react';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-import {
-  Animated,
-  Text,
-  View,
-  StyleSheet,
-  Button,
-} from 'react-native';
+import {Animated, Text, View, StyleSheet, Button} from 'react-native';
 
 const App = () => {
   // fadeAnim will be used as the value for opacity. Initial Value: 0

docs/animations.md

@@ -622,9 +622,7 @@ export default function App() {
 
   return (
     <View style={styles.container}>
-      <View
-        style={[styles.box, {width: state.w, height: state.h}]}
-      />
+      <View style={[styles.box, {width: state.w, height: state.h}]} />
       <TouchableOpacity onPress={onPress}>
         <View style={styles.button}>
           <Text style={styles.buttonText}>Press me!</Text>

docs/i18nmanager.md

@@ -24,12 +24,13 @@ const App = () => {
   return (
     <SafeAreaProvider>
       <SafeAreaView>
-        <View style={{ position: 'absolute', left: isRTL ? undefined : 0, right: isRTL ? 0 : undefined }}>
-          {isRTL ? (
-            <Text>Back &gt;</Text>
-          ) : (
-            <Text>&lt; Back</Text>
-          )}
+        <View
+          style={{
+            position: 'absolute',
+            left: isRTL ? undefined : 0,
+            right: isRTL ? 0 : undefined,
+          }}>
+          {isRTL ? <Text>Back &gt;</Text> : <Text>&lt; Back</Text>}
         </View>
       </SafeAreaView>
     </SafeAreaProvider>
@@ -54,16 +55,19 @@ const App = () => {
         <View style={styles.container}>
           <View style={styles.forceRtl}>
             <Text>Force RTL in Development:</Text>
-            <Switch value={rtl} onValueChange={(value) => {
-              setRTL(value);
-              I18nManager.forceRTL(value);
-              Alert.alert(
-                'Reload this page',
-                'Please reload this page to change the UI direction! ' +
-                  'All examples in this app will be affected. ' +
-                  'Check them out to see what they look like in RTL layout.',
-              );
-            }} />
+            <Switch
+              value={rtl}
+              onValueChange={value => {
+                setRTL(value);
+                I18nManager.forceRTL(value);
+                Alert.alert(
+                  'Reload this page',
+                  'Please reload this page to change the UI direction! ' +
+                    'All examples in this app will be affected. ' +
+                    'Check them out to see what they look like in RTL layout.',
+                );
+              }}
+            />
           </View>
         </View>
       </SafeAreaView>

docs/integration-with-android-fragment.md

@@ -5,13 +5,13 @@ title: Integration with an Android Fragment
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
-The guide for [Integration with Existing Apps](https://reactnative.dev/docs/integration-with-existing-apps) details how to integrate a full-screen React Native app into an existing Android app as an **Activity**.
+The guide for [Integration with Existing Apps](/docs/integration-with-existing-apps) details how to integrate a full-screen React Native app into an existing Android app as an **Activity**.
 
 To use React Native components within **Fragments** in an existing app requires some additional setup.
 
 ### 1. Add React Native to your app
 
-Follow the guide for [Integration with Existing Apps](https://reactnative.dev/docs/integration-with-existing-apps) until the end to make sure you can safely run your React Native app in a full screen Activity.
+Follow the guide for [Integration with Existing Apps](/docs/integration-with-existing-apps) until the end to make sure you can safely run your React Native app in a full screen Activity.
 
 ### 2. Add a FrameLayout for the React Native Fragment
 

docs/legacy/native-modules-android.md

@@ -270,7 +270,7 @@ class MyAppPackage : ReactPackage {
 This file imports the native module you created, `CalendarModule`. It then instantiates `CalendarModule` within the `createNativeModules()` function and returns it as a list of `NativeModules` to register. If you add more native modules down the line, you can also instantiate them and add them to the list returned here.
 
 :::note
-It is worth noting that this way of registering native modules eagerly initializes all native modules when the application starts, which adds to the startup time of an application. You can use [TurboReactPackage](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/TurboReactPackage.java) as an alternative. Instead of `createNativeModules`, which return a list of instantiated native module objects, TurboReactPackage implements a `getModule(String name, ReactApplicationContext rac)` method that creates the native module object, when required. TurboReactPackage is a bit more complicated to implement at the moment. In addition to implementing a `getModule()` method, you have to implement a `getReactModuleInfoProvider()` method, which returns a list of all the native modules the package can instantiate along with a function that instantiates them, example [here](https://github.com/facebook/react-native/blob/8ac467c51b94c82d81930b4802b2978c85539925/ReactAndroid/src/main/java/com/facebook/react/CoreModulesPackage.java#L86-L165). Again, using TurboReactPackage will allow your application to have a faster startup time, but it is currently a bit cumbersome to write. So proceed with caution if you choose to use TurboReactPackages.
+It is worth noting that this way of registering native modules eagerly initializes all native modules when the application starts, which adds to the startup time of an application. You can use [TurboReactPackage](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/TurboReactPackage.kt) as an alternative. Instead of `createNativeModules`, which return a list of instantiated native module objects, TurboReactPackage implements a `getModule(String name, ReactApplicationContext rac)` method that creates the native module object, when required. TurboReactPackage is a bit more complicated to implement at the moment. In addition to implementing a `getModule()` method, you have to implement a `getReactModuleInfoProvider()` method, which returns a list of all the native modules the package can instantiate along with a function that instantiates them, example [here](https://github.com/facebook/react-native/blob/8ac467c51b94c82d81930b4802b2978c85539925/ReactAndroid/src/main/java/com/facebook/react/CoreModulesPackage.java#L86-L165). Again, using TurboReactPackage will allow your application to have a faster startup time, but it is currently a bit cumbersome to write. So proceed with caution if you choose to use TurboReactPackages.
 :::
 
 To register the `CalendarModule` package, you must add `MyAppPackage` to the list of packages returned in ReactNativeHost's `getPackages()` method. Open up your `MainApplication.java` or `MainApplication.kt` file, which can be found in the following path: `android/app/src/main/java/com/your-app-name/`.
@@ -778,7 +778,7 @@ code: String, message: String, userInfo: WritableMap, throwable: Throwable
 </TabItem>
 </Tabs>
 
-For more detail, you can find the `Promise.java` interface [here](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/Promise.java). If `userInfo` is not provided, ReactNative will set it to null. For the rest of the parameters React Native will use a default value. The `message` argument provides the error `message` shown at the top of an error call stack. Below is an example of the error message shown in JavaScript from the following reject call in Java/Kotlin.
+For more detail, you can find the `Promise.java` interface [here](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/Promise.kt). If `userInfo` is not provided, ReactNative will set it to null. For the rest of the parameters React Native will use a default value. The `message` argument provides the error `message` shown at the top of an error call stack. Below is an example of the error message shown in JavaScript from the following reject call in Java/Kotlin.
 
 Java/Kotlin reject call:
 

docs/platform.md

@@ -123,7 +123,7 @@ Returns a boolean which defines if device is a TV.
 static isVision: boolean;
 ```
 
-Returns a boolean which defines if device is an Apple Vision. _If you are using [Apple Vision Pro (Designed for iPad)](https://developer.apple.com/documentation/visionos/checking-whether-your-app-is-compatible-with-visionos) `isVision` will be `false` but `isPad` will be `true`_
+Returns a boolean which defines if device is an Apple Vision. _If you are using [Apple Vision Pro (Designed for iPad)](https://developer.apple.com/documentation/visionos/determining-whether-to-bring-your-app-to-visionos) `isVision` will be `false` but `isPad` will be `true`_
 
 | Type    |
 | ------- |

docs/transforms.md

@@ -215,12 +215,7 @@ The `transformOrigin` property sets the origin for a view's transformations. The
 
 ```SnackPlayer name=TransformOrigin%20Example
 import React, {useEffect, useRef} from 'react';
-import {
-  Animated,
-  View,
-  StyleSheet,
-  Easing,
-} from 'react-native';
+import {Animated, View, StyleSheet, Easing} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {

docs/turbo-native-modules.md

@@ -34,15 +34,15 @@ To make this work on mobile, we need to use Android and iOS APIs:
 
 ### 1. Declare Typed Specification
 
-React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.md), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
+React Native provides a tool called [Codegen](/docs/the-new-architecture/what-is-codegen), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.
 
 To create a specs file:
 
 1. Inside the root folder of your app, create a new folder called `specs`.
 2. Create a new file called `NativeLocalStorage.ts`.
 
 :::info
-You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/appendix.md) documentation.
+You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/docs/appendix) documentation.
 :::
 
 Here is an implementation of the `localStorage` specification:

eslint.config.js

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {defineConfig, globalIgnores} from 'eslint/config';
+import globals from 'globals';
+
+import eslintCss from '@eslint/css';
+import eslintJs from '@eslint/js';
+import eslintPluginYml from 'eslint-plugin-yml';
+import * as eslintPluginMdx from 'eslint-plugin-mdx';
+import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
+import eslintTs from 'typescript-eslint';
+import tsParser from '@typescript-eslint/parser';
+
+export default defineConfig([
+  globalIgnores([
+    '**/.yarn',
+    '**/node_modules',
+    'packages/lint-examples/out',
+    'website/.docusaurus',
+    'website/build',
+    'website/static',
+    'README.md',
+  ]),
+
+  eslintTs.configs.recommended,
+  ...eslintPluginYml.configs['flat/standard'],
+  eslintPluginPrettier,
+
+  {
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+        ...globals.node,
+        window: 'readonly',
+        document: 'readonly',
+        console: 'readonly',
+        MutationObserver: 'readonly',
+      },
+    },
+  },
+
+  {
+    files: ['**/*.{js,mjs,cjs}'],
+    ...eslintJs.configs.recommended,
+    rules: {
+      'no-unused-vars': 'off',
+    },
+  },
+
+  {
+    files: ['**/*.{ts,tsx,d.ts}'],
+    settings: {
+      'import/resolver': {
+        typescript: {
+          project: 'website/tsconfig.json',
+        },
+      },
+    },
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        sourceType: 'module',
+        ecmaVersion: 'es2023',
+        ecmaFeatures: {
+          jsx: true,
+          modules: true,
+        },
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+
+  {
+    // TODO(simek): figure out SCSS linting, since `@eslint/css` does not support it yet
+    // @see https://github.com/eslint/css/issues/90
+    files: ['**/*.css'],
+    ...eslintCss.configs.recommended,
+    language: 'css/css',
+    plugins: {
+      css: eslintCss,
+    },
+    rules: {
+      'css/no-invalid-properties': [
+        'error',
+        {
+          allowUnknownVariables: true,
+        },
+      ],
+    },
+  },
+
+  {
+    files: ['**/*.{md,mdx}'],
+    ...eslintPluginMdx.flat,
+    processor: eslintPluginMdx.createRemarkProcessor({
+      lintCodeBlocks: false,
+      remarkConfigPath: 'website/.remarkrc.mjs',
+    }),
+  },
+]);