feat: add a template for turbo module (experimental)

Author: satya164

packages/create-react-native-library/src/index.ts

@@ -18,18 +18,26 @@ const JS_FILES = path.resolve(__dirname, '../templates/js-library');
 const EXPO_FILES = path.resolve(__dirname, '../templates/expo-library');
 const CPP_FILES = path.resolve(__dirname, '../templates/cpp-library');
 const EXAMPLE_FILES = path.resolve(__dirname, '../templates/example');
+const EXAMPLE_TURBO_FILES = path.resolve(
+  __dirname,
+  '../templates/example-turbo'
+);
 const NATIVE_COMMON_FILES = path.resolve(
   __dirname,
   '../templates/native-common'
 );
 
 const NATIVE_FILES = {
-  module: path.resolve(__dirname, '../templates/native-library'),
+  module_legacy: path.resolve(__dirname, '../templates/native-library-legacy'),
+  module_turbo: path.resolve(__dirname, '../templates/native-library-turbo'),
+  module_mixed: path.resolve(__dirname, '../templates/native-library-mixed'),
   view: path.resolve(__dirname, '../templates/native-view-library'),
 };
 
 const JAVA_FILES = {
-  module: path.resolve(__dirname, '../templates/java-library'),
+  module_legacy: path.resolve(__dirname, '../templates/java-library-legacy'),
+  module_turbo: path.resolve(__dirname, '../templates/java-library-turbo'),
+  module_mixed: path.resolve(__dirname, '../templates/java-library-mixed'),
   view: path.resolve(__dirname, '../templates/java-view-library'),
 };
 
@@ -71,9 +79,8 @@ type Answers = {
     | 'java-swift'
     | 'kotlin-objc'
     | 'kotlin-swift'
-    | 'cpp'
-    | 'js';
-  type?: 'module' | 'view';
+    | 'cpp';
+  type?: 'module-legacy' | 'module-turbo' | 'module-mixed' | 'view' | 'library';
   example?: 'expo' | 'native';
 };
 
@@ -228,8 +235,38 @@ async function create(argv: yargs.Arguments<any>) {
       },
       validate: (input) => /^https?:\/\//.test(input) || 'Must be a valid URL',
     },
-    'languages': {
+    'type': {
       type: 'select',
+      name: 'type',
+      message: 'What type of library do you want to develop?',
+      choices: [
+        ...(process.env.EXPERIMENTAL_TURBO_MODULES === '1'
+          ? [
+              {
+                title: 'Turbo module (backward compatible)',
+                value: 'module-mixed',
+              },
+              {
+                title: 'Turbo module',
+                value: 'module-turbo',
+              },
+            ]
+          : []),
+        {
+          title: 'Native module',
+          value: 'module-legacy',
+        },
+        { title: 'Native view', value: 'view' },
+        { title: 'JavaScript library', value: 'library' },
+      ],
+    },
+    'languages': {
+      type: (_, values) =>
+        values.type === 'js' ||
+        values.type === 'module-turbo' ||
+        values.type === 'module-mixed'
+          ? null
+          : 'select',
       name: 'languages',
       message: 'Which languages do you want to use?',
       choices: [
@@ -238,25 +275,10 @@ async function create(argv: yargs.Arguments<any>) {
         { title: 'Kotlin & Objective-C', value: 'kotlin-objc' },
         { title: 'Kotlin & Swift', value: 'kotlin-swift' },
         { title: 'C++ for both iOS & Android', value: 'cpp' },
-        { title: 'JavaScript only', value: 'js' },
-      ],
-    },
-    'type': {
-      type: (prev: string) =>
-        ['java-objc', 'java-swift', 'kotlin-objc', 'kotlin-swift'].includes(
-          prev
-        )
-          ? 'select'
-          : null,
-      name: 'type',
-      message: 'What type of library do you want to develop?',
-      choices: [
-        { title: 'Native module (to expose native APIs)', value: 'module' },
-        { title: 'Native view (to use as a component)', value: 'view' },
       ],
     },
     'example': {
-      type: (prev: string) => (prev === 'js' ? 'select' : null),
+      type: (_, values) => (values.type === 'js' ? 'select' : null),
       name: 'example',
       message: 'What type of example app do you want to generate?',
       choices: [
@@ -276,8 +298,8 @@ async function create(argv: yargs.Arguments<any>) {
     authorEmail,
     authorUrl,
     repoUrl,
-    languages,
-    type = 'module',
+    type = 'module-mixed',
+    languages = type === 'library' ? 'js' : 'java-objc',
     example = 'native',
   } = {
     ...argv,
@@ -321,6 +343,17 @@ async function create(argv: yargs.Arguments<any>) {
     version = FALLBACK_BOB_VERSION;
   }
 
+  const moduleType = type === 'view' ? 'view' : 'module';
+
+  const architecture =
+    type === 'module-turbo'
+      ? 'turbo'
+      : type === 'module-mixed'
+      ? 'mixed'
+      : 'legacy';
+
+  const turbomodule = architecture === 'turbo' || architecture === 'mixed';
+
   const options = {
     bob: {
       version: version || FALLBACK_BOB_VERSION,
@@ -334,11 +367,12 @@ async function create(argv: yargs.Arguments<any>) {
       package: slug.replace(/[^a-z0-9]/g, '').toLowerCase(),
       identifier: slug.replace(/[^a-z0-9]+/g, '-').replace(/^-/, ''),
       native: languages !== 'js',
+      architecture,
+      turbomodule,
       cpp: languages === 'cpp',
       kotlin: languages === 'kotlin-objc' || languages === 'kotlin-swift',
       swift: languages === 'java-swift' || languages === 'kotlin-swift',
-      module: languages !== 'js',
-      moduleType: type,
+      view: type === 'view',
     },
     author: {
       name: authorName,
@@ -396,19 +430,35 @@ async function create(argv: yargs.Arguments<any>) {
       path.join(folder, 'example')
     );
 
+    if (turbomodule) {
+      await copyDir(
+        path.join(EXAMPLE_TURBO_FILES, 'example'),
+        path.join(folder, 'example')
+      );
+    }
+
     await copyDir(NATIVE_COMMON_FILES, folder);
-    await copyDir(NATIVE_FILES[type], folder);
+
+    if (moduleType === 'module') {
+      await copyDir(NATIVE_FILES[`${moduleType}_${architecture}`], folder);
+    } else {
+      await copyDir(NATIVE_FILES[moduleType], folder);
+    }
 
     if (options.project.swift) {
-      await copyDir(SWIFT_FILES[type], folder);
+      await copyDir(SWIFT_FILES[moduleType], folder);
     } else {
-      await copyDir(OBJC_FILES[type], folder);
+      await copyDir(OBJC_FILES[moduleType], folder);
     }
 
     if (options.project.kotlin) {
-      await copyDir(KOTLIN_FILES[type], folder);
+      await copyDir(KOTLIN_FILES[moduleType], folder);
     } else {
-      await copyDir(JAVA_FILES[type], folder);
+      if (moduleType === 'module') {
+        await copyDir(JAVA_FILES[`${moduleType}_${architecture}`], folder);
+      } else {
+        await copyDir(JAVA_FILES[moduleType], folder);
+      }
     }
 
     if (options.project.cpp) {

packages/create-react-native-library/templates/common/$package.json

@@ -1,5 +1,5 @@
 {
-  "name": "<%- project.slug %>",
+  "name": "<%- project.slug -%>",
   "version": "0.1.0",
   "description": "test",
   "main": "lib/commonjs/index",
@@ -13,7 +13,7 @@
     "android",
     "ios",
     "cpp",
-    "<%- project.identifier %>.podspec",
+    "<%- project.identifier -%>.podspec",
     "!lib/typescript/example",
     "!android/build",
     "!ios/build",
@@ -28,21 +28,21 @@
     "prepare": "bob build",
     "release": "release-it",
     "example": "yarn --cwd example",
-    "pods": "cd example && pod-install --quiet",
+    "pods": "cd example && RCT_NEW_ARCH_ENABLED=<%- project.turbomodule ? 1 : 0 -%> pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods"
   },
   "keywords": [
     "react-native",
     "ios",
     "android"
   ],
-  "repository": "<%- repo %>",
-  "author": "<%- author.name %> <<%- author.email %>> (<%- author.url %>)",
+  "repository": "<%- repo -%>",
+  "author": "<%- author.name -%> <<%- author.email -%>> (<%- author.url -%>)",
   "license": "MIT",
   "bugs": {
-    "url": "<%- repo %>/issues"
+    "url": "<%- repo -%>/issues"
   },
-  "homepage": "<%- repo %>#readme",
+  "homepage": "<%- repo -%>#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -54,7 +54,7 @@
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
     "@types/react": "~17.0.21",
-    "@types/react-native": "0.67.9",
+    "@types/react-native": "0.68.0",
     "commitlint": "^17.0.2",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.5.0",
@@ -148,5 +148,16 @@
         }
       ]
     ]
+<% if (project.turbomodule) { -%>
+  },
+  "codegenConfig": {
+    "libraries": [
+      {
+        "name": "RN<%- project.name -%>Spec",
+        "type": "modules",
+        "jsSrcsDir": "src"
+      }
+    ]
+<% } -%>
   }
 }

packages/create-react-native-library/templates/common/CONTRIBUTING.md

@@ -31,13 +31,13 @@ To run the example app on iOS:
 ```sh
 yarn example ios
 ```
-<% if (!project.native) { %>
+<% if (!project.native) { -%>
 To run the example app on Web:
 
 ```sh
 yarn example web
 ```
-<% } %>
+<% } -%>
 Make sure your code passes TypeScript and ESLint. Run the following to verify:
 
 ```sh
@@ -56,11 +56,11 @@ Remember to add tests for your change if possible. Run the unit tests by:
 ```sh
 yarn test
 ```
-<% if (project.native) { %>
-To edit the Objective-C files, open `example/ios/<%- project.name %>Example.xcworkspace` in XCode and find the source files at `Pods > Development Pods > <%- project.slug %>`.
+<% if (project.native) { -%>
+To edit the Objective-C files, open `example/ios/<%- project.name -%>Example.xcworkspace` in XCode and find the source files at `Pods > Development Pods > <%- project.slug -%>`.
 
-To edit the Kotlin files, open `example/android` in Android studio and find the source files at `<%- project.package %>` under `Android`.
-<% } %>
+To edit the Kotlin files, open `example/android` in Android studio and find the source files at `<%- project.package -%>` under `Android`.
+<% } -%>
 ### Commit message convention
 
 We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:

packages/create-react-native-library/templates/common/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 <%- author.name %>
+Copyright (c) 2022 <%- author.name -%>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

packages/create-react-native-library/templates/common/README.md

@@ -1,26 +1,26 @@
-# <%- project.slug %>
+# <%- project.slug -%>
 
-<%- project.description %>
+<%- project.description -%>
 
 ## Installation
 
 ```sh
-npm install <%- project.slug %>
+npm install <%- project.slug -%>
 ```
 
 ## Usage
 
-<% if (project.moduleType === "view") { -%>
+<% if (project.view) { -%>
 ```js
-import { <%- project.name %>View } from "<%- project.slug %>";
+import { <%- project.name -%>View } from "<%- project.slug -%>";
 
 // ...
 
-<<%- project.name %>View color="tomato" />
+<<%- project.name -%>View color="tomato" />
 ```
 <% } else { -%>
 ```js
-import { multiply } from "<%- project.slug %>";
+import { multiply } from "<%- project.slug -%>";
 
 // ...
 

packages/create-react-native-library/templates/common/example/src/App.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react';
 
-<% if (project.moduleType === "view") { -%>
+<% if (project.view) { -%>
 import { StyleSheet, View } from 'react-native';
-import { <%- project.name %>View } from '<%- project.slug %>';
+import { <%- project.name -%>View } from '<%- project.slug -%>';
 <% } else { -%>
 import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from '<%- project.slug %>';
+import { multiply } from '<%- project.slug -%>';
 <% } -%>
 
-<% if (project.moduleType === "view") { -%>
+<% if (project.view) { -%>
 export default function App() {
   return (
     <View style={styles.container}>
-      <<%- project.name %>View color="#32a852" style={styles.box} />
+      <<%- project.name -%>View color="#32a852" style={styles.box} />
     </View>
   );
 }

packages/create-react-native-library/templates/common/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": "./",
     "paths": {
-      "<%- project.slug %>": ["./src/index"]
+      "<%- project.slug -%>": ["./src/index"]
     },
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,

packages/create-react-native-library/templates/cpp-library/android/CMakeLists.txt

@@ -5,7 +5,7 @@ set (CMAKE_CXX_STANDARD 11)
 
 add_library(cpp
             SHARED
-            ../cpp/<%- project.identifier %>.cpp
+            ../cpp/<%- project.identifier -%>.cpp
             cpp-adapter.cpp
 )
 

packages/create-react-native-library/templates/cpp-library/android/cpp-adapter.cpp

@@ -1,8 +1,8 @@
 #include <jni.h>
-#include "<%- project.identifier %>.h"
+#include "<%- project.identifier -%>.h"
 
 extern "C"
 JNIEXPORT jint JNICALL
-Java_com_<%- project.package %>_<%- project.name %>Module_nativeMultiply(JNIEnv *env, jclass type, jint a, jint b) {
+Java_com_<%- project.package -%>_<%- project.name -%>Module_nativeMultiply(JNIEnv *env, jclass type, jint a, jint b) {
     return example::multiply(a, b);
 }

packages/create-react-native-library/templates/cpp-library/cpp/{%- project.identifier %}.cpp

@@ -1,7 +1,7 @@
-#include "<%- project.identifier %>.h"
+#include "<%- project.identifier -%>.h"
 
 namespace example {
-	int multiply(float a, float b) {
+	int multiply(double a, double b) {
 		return a * b;
 	}
 }