Turbo Native Modules - Documentation ported from reactwg

docs/_turbo-native-modules-components.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import IOSContent from "./turbo-native-modules-ios.md";
+import AndroidContent from "./turbo-native-modules-android.md";
+
+export function TurboNativeModulesIOS() {
+  return <IOSContent />;
+}
+
+export function TurboNativeModulesAndroid() {
+  return <AndroidContent />;
+}

docs/appendix.md

@@ -0,0 +1,210 @@
+# Appendix
+
+## I. Terminology
+
+- **Schema** - TypeScript or Flow code that describes the API for a Turbo Native Module or Fabric Native component. Used by **Codegen** to generate boilerplate code.
+
+* **Turbo Native Modules** - Native libraries that have no “view” for the user. Examples would be persistent storage, notifications, network events. These are accessible to your JavaScript application code as functions and objects.
+* **Fabric Native Component** - Native platform views that are available to your application JavaScript code through React Components.
+
+- **Legacy Native Components** - Components which are running on the old React Native architecture.
+- **Legacy Native Modules** - Modules which are running on the old React Native architecture.
+
+## II. Codegen Typings
+
+<!-- These should all be squashed into a single table -->
+
+### Flow
+
+You may use the following table as a reference for which types are supported and what they map to in each platform:
+
+#### `string`
+
+|                   |            |
+| ----------------- | ---------- |
+| Nullable Support? | `?string`  |
+| Android (Java)    | `string`   |
+| iOS               | `NSString` |
+
+#### `boolean`
+
+|                   |            |
+| ----------------- | ---------- |
+| Nullable Support? | `?boolean` |
+| Android (Java)    | `Boolean`  |
+| iOS               | `NSNumber` |
+
+#### Object literal
+
+This is recommended over using plain `Object`, for type safety.
+
+**Example:** `{| foo: string, ... |}`
+
+|                   |                                                         |
+| ----------------- | ------------------------------------------------------- |
+| Nullable Support? | <code>?&#123;&#124; foo: string, ...&#124;&#125;</code> |
+| Android (Java)    | -                                                       |
+| iOS               | -                                                       |
+
+#### `Object`
+
+:::info
+Recommended to use [Object literal](#object-literal) instead.
+:::
+
+|                   |                          |
+| ----------------- | ------------------------ |
+| Nullable Support? | `?Object`                |
+| Android (Java)    | `ReadableMap`            |
+| iOS               | `@` (untyped dictionary) |
+
+#### `Array<*>`
+
+|                   |                                                                |
+| ----------------- | -------------------------------------------------------------- |
+| Nullable Support? | `?Array<*>`                                                    |
+| Android (Java)    | `ReadableArray`                                                |
+| iOS               | `NSArray` (or `RCTConvertVecToArray` when used inside objects) |
+
+#### `Function`
+
+|                   |             |
+| ----------------- | ----------- |
+| Nullable Support? | `?Function` |
+| Android (Java)    | -           |
+| iOS               | -           |
+
+#### `Promise<*>`
+
+|                   |                                                 |
+| ----------------- | ----------------------------------------------- |
+| Nullable Support? | `?Promise<*>`                                   |
+| Android (Java)    | `com.facebook.react.bridge.Promise`             |
+| iOS               | `RCTPromiseResolve` and `RCTPromiseRejectBlock` |
+
+#### Type Unions
+
+Type unions are only supported as callbacks.
+
+**Example:** `'SUCCESS' | 'FAIL'`
+| | |
+|---|---|
+| Nullable Support? | Only as callbacks |
+| Android (Java) | - |
+| iOS | - |
+
+#### Callbacks
+
+Callback functions are not type checked, and are generalized as `Object`s.
+
+**Example:** `() =>`
+| | |
+|---|---|
+| Nullable Support? | Yes |
+| Android (Java) | `com.facebook.react.bridge.Callback` |
+| iOS | `RCTResponseSenderBlock` |
+
+:::info
+You may also find it useful to refer to the JavaScript specifications for the core modules in React Native. These are located inside the `Libraries/` directory in the React Native repository.
+:::
+
+### TypeScript
+
+You may use the following table as a reference for which types are supported and what they map to in each platform:
+
+#### `string`
+
+|                   |                                 |
+| ----------------- | ------------------------------- |
+| Nullable Support? | <code>string &#124; null</code> |
+| Android (Java)    | `String`                        |
+| iOS               | `NSString`                      |
+
+#### `boolean`
+
+|                   |                                  |
+| ----------------- | -------------------------------- |
+| Nullable Support? | <code>boolean &#124; null</code> |
+| Android (Java)    | `Boolean`                        |
+| iOS               | `NSNumber`                       |
+
+#### `number`
+
+|                   |            |
+| ----------------- | ---------- |
+| Nullable Support? | No         |
+| Android (Java)    | `double`   |
+| iOS               | `NSNumber` |
+
+#### Object literal
+
+This is recommended over using plain `Object`, for type safety.
+
+**Example:** `{| foo: string, ... |}`
+| | |
+|---|---|
+| Nullable Support? | <code>?&#123;&#124; foo: string, ...&#124;&#125; &#124; null</code> |
+| Android (Java) | - |
+| iOS | - |
+
+#### `Object`
+
+:::info
+Recommended to use [Object literal](#object-literal-1) instead.
+:::
+
+|                   |                                 |
+| ----------------- | ------------------------------- |
+| Nullable Support? | <code>Object &#124; null</code> |
+| Android (Java)    | `ReadableMap`                   |
+| iOS               | `@` (untyped dictionary)        |
+
+#### `Array<*>`
+
+|                   |                                                                |
+| ----------------- | -------------------------------------------------------------- |
+| Nullable Support? | `Array<\*> &#124; null`                                        |
+| Android (Java)    | `ReadableArray`                                                |
+| iOS               | `NSArray` (or `RCTConvertVecToArray` when used inside objects) |
+
+#### `Function`
+
+|                   |                                   |
+| ----------------- | --------------------------------- |
+| Nullable Support? | <code>Function &#124; null</code> |
+| Android (Java)    | -                                 |
+| iOS               | -                                 |
+
+#### `Promise<*>`
+
+|                   |                                                 |
+| ----------------- | ----------------------------------------------- |
+| Nullable Support? | `Promise<\*> &#124; null`                       |
+| Android (Java)    | `com.facebook.react.bridge.Promise`             |
+| iOS               | `RCTPromiseResolve` and `RCTPromiseRejectBlock` |
+
+#### Type Unions
+
+Type unions are only supported as callbacks.
+
+**Example:** `'SUCCESS' | 'FAIL'`
+| | |
+|---|---|
+| Nullable Support? | Only as callbacks |
+| Android (Java) | - |
+| iOS | - |
+
+#### Callbacks
+
+Callback functions are not type checked, and are generalized as `Object`s.
+
+**Example:** `() =>`
+| | |
+|---|---|
+| Nullable Support? | Yes |
+| Android (Java) | `com.facebook.react.bridge.Callback` |
+| iOS | `RCTResponseSenderBlock` |
+
+:::info
+You may also find it useful to refer to the JavaScript specifications for the core modules in React Native. These are located inside the `Libraries/` directory in the React Native repository.
+:::

docs/fabric-native-modules-android.md

@@ -0,0 +1,10 @@
+---
+id: fabric-native-modules-android
+title: 'Fabric Native Modules: Android'
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::caution
+This is work-in-progress... 👷
+:::

docs/fabric-native-modules-ios.md

@@ -0,0 +1,10 @@
+---
+id: fabric-native-modules-ios
+title: 'Fabric Native Modules: iOS'
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::caution
+This is work-in-progress... 👷
+:::

docs/fabric-native-modules.md

@@ -0,0 +1,10 @@
+---
+id: fabric-native-modules-introduction
+title: 'Fabric Native Modules'
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::caution
+This is work-in-progress... 👷
+:::

docs/native-platforms.md

@@ -0,0 +1,33 @@
+---
+id: native-platform
+title: Native Platform
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Your application may need access to platform features that aren’t directly available from react-native or one of the hundreds of [third-party libraries](https://reactnative.directory/) maintained by the community. Maybe you want to reuse some existing Objective-C, Swift, Java, Kotlin or C++ code without having to reproduce it in JavaScript. Whatever your reason, React Native exposes a powerful set of API to connect your native code to your JavaScript application code.
+
+This guide introduces:
+
+- **Turbo Native Modules:** native libraries that have no “view” for the user. Examples would be persistent storage, notifications, network events. These are accessible to your user as JavaScript functions and objects.
+- **Fabric Native Component:** native platform views that are available to your application JavaScript code through React Components.
+
+:::note
+You might have previously been familiar with:
+
+- Legacy Native Modules
+- Legacy Native Components
+
+These are our deprecated native module and component API. You can still use many of these legacy libraries with the New Architecture thanks to our interop layer. You should consider alternative libraries, upgrade to versions that have 1st class support for the New Architecture or port these libraries yourself to Turbo Native Modules or Fabric Native Components.
+:::
+
+The recommended order to read these are:
+
+1. Turbo Native Modules
+   - [Introduction](turbo-native-modules.md)
+   - [Android](turbo-native-modules-android.md)
+   - [iOS](turbo-native-modules-ios.md)
+2. Fabric Native Components
+   - [Introduction](fabric-native-modules.md)
+   - [Android](fabric-native-modules-android.md)
+   - [iOS](fabric-native-modules-ios.md)

docs/the-new-architecture/codegen-cli.md

@@ -2,36 +2,38 @@
 
 Calling Gradle or manually calling a script might be hard to remember and it requires a lot of cerimony.
 
-To simplify it, we created a CLI tool that can help you running those tasks: the **Codegen** cli.
-
-```shell
-npx react-native codegen [--path path] [--platform string] [--outputPath path]
+To simplify it, we created a CLI tool that can help you running those tasks: the **Codegen** cli. This command runs [react-native-codegen](https://www.npmjs.com/package/react-native-codegen) for your project. The following options are available:
+
+```sh
+npx @react-native-community/cli codegen --help
+Usage: rnc-cli codegen [options]
+
+Options:
+  --verbose            Increase logging verbosity
+  --path <path>        Path to the React Native project root. (default: "/Users/MyUsername/projects/my-app")
+  --platform <string>  Target platform. Supported values: "android", "ios", "all". (default: "all")
+  --outputPath <path>  Path where generated artifacts will be output to.
+  -h, --help           display help for command
 ```
 
-This command runs [react-native-codegen](https://www.npmjs.com/package/react-native-codegen) for your project. The following options are available:
-
-- `--path` - Path to `package.json`. The default path is the current working directory.
-- `--platform` - Target platform. Supported values: `android`, `ios`, `all`. The default value is `all`.
-- `--outputPath` - Output path. The default value is the value defined in `codegenConfig.outputDir`.
-
 ## Examples
 
 - Read `package.json` from the current working directory, generate code based on its codegenConfig.
 
 ```shell
-npx react-native codegen
+npx @react-native-codegen/cli codegen
 ```
 
 - Read `package.json` from the current working directory, generate iOS code in the location defined in the codegenConfig.
 
 ```shell
-npx react-native codegen --platform ios
+npx @react-native-codegen/cli codegen --platform ios
 ```
 
 - Read `package.json` from `third-party/some-library`, generate Android code in `third-party/some-library/android/generated`.
 
 ```shell
-npx react-native codegen \
+npx @react-native-codegen/cli codegen \
     --path third-party/some-library \
     --platform android \
     --outputPath third-party/some-library/android/generated

docs/the-new-architecture/using-codegen.md

@@ -135,7 +135,7 @@ This structure has been generated by using the value `all` for the `codegenConfi
 The main script is the `generate-Codegen-artifacts.js` script. To invoke the script, you can run this command from the root folder of your app:
 
 ```bash
-node node_modules/react-native/scripts/generate-Codegen-artifacts.js \
+npx @react-native/codegen generate-codegen-artifacts.js \
     --path <path/to/your/app> \
     --outputPath <an/output/path> \
     --targetPlatform <android | ios>
@@ -152,7 +152,7 @@ where:
 Running the script with these arguments:
 
 ```shell
-node node_modules/react-native/scripts/generate-Codegen-artifacts.js \
+npx @react-native-codegen generate-codegen-artifacts.js \
     --path . \
     --outputPath ios/ \
     --targetPlatform ios