feat: add fabric template (#273)

Author: troZee

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

@@ -19,45 +19,47 @@ const COMMON_FILES = path.resolve(__dirname, '../templates/common');
 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 EXAMPLE_FILES = path.resolve(__dirname, '../templates/example-legacy');
 const NATIVE_COMMON_FILES = path.resolve(
   __dirname,
   '../templates/native-common'
 );
 
 const NATIVE_FILES = {
   module_legacy: path.resolve(__dirname, '../templates/native-library-legacy'),
-  module_turbo: path.resolve(__dirname, '../templates/native-library-turbo'),
+  module_new: path.resolve(__dirname, '../templates/native-library-new'),
   module_mixed: path.resolve(__dirname, '../templates/native-library-mixed'),
-  view: path.resolve(__dirname, '../templates/native-view-library'),
+  view_legacy: path.resolve(__dirname, '../templates/native-view-legacy'),
+  view_mixed: path.resolve(__dirname, '../templates/native-view-mixed'),
+  view_new: path.resolve(__dirname, '../templates/native-view-new'),
 };
 
 const JAVA_FILES = {
   module_legacy: path.resolve(__dirname, '../templates/java-library-legacy'),
-  module_turbo: path.resolve(__dirname, '../templates/java-library-turbo'),
+  module_new: path.resolve(__dirname, '../templates/java-library-new'),
   module_mixed: path.resolve(__dirname, '../templates/java-library-mixed'),
-  view: path.resolve(__dirname, '../templates/java-view-library'),
+  view_legacy: path.resolve(__dirname, '../templates/java-view-legacy'),
+  view_mixed: path.resolve(__dirname, '../templates/java-view-mixed'),
+  view_new: path.resolve(__dirname, '../templates/java-view-new'),
 };
 
 const OBJC_FILES = {
   module: path.resolve(__dirname, '../templates/objc-library'),
-  view: path.resolve(__dirname, '../templates/objc-view-library'),
+  view_legacy: path.resolve(__dirname, '../templates/objc-view-legacy'),
+  view_mixed: path.resolve(__dirname, '../templates/objc-view-mixed'),
+  view_new: path.resolve(__dirname, '../templates/objc-view-new'),
 };
 
 const KOTLIN_FILES = {
   module_legacy: path.resolve(__dirname, '../templates/kotlin-library-legacy'),
-  module_turbo: path.resolve(__dirname, '../templates/kotlin-library-turbo'),
+  module_new: path.resolve(__dirname, '../templates/kotlin-library-new'),
   module_mixed: path.resolve(__dirname, '../templates/kotlin-library-mixed'),
-  view: path.resolve(__dirname, '../templates/kotlin-view-library'),
+  view_legacy: path.resolve(__dirname, '../templates/kotlin-view-legacy'),
 };
 
 const SWIFT_FILES = {
-  module: path.resolve(__dirname, '../templates/swift-library'),
-  view: path.resolve(__dirname, '../templates/swift-view-library'),
+  module: path.resolve(__dirname, '../templates/swift-library-legacy'),
+  view: path.resolve(__dirname, '../templates/swift-view-legacy'),
 };
 
 type ArgName =
@@ -84,7 +86,14 @@ type Answers = {
     | 'kotlin-objc'
     | 'kotlin-swift'
     | 'cpp';
-  type?: 'module-legacy' | 'module-turbo' | 'module-mixed' | 'view' | 'library';
+  type?:
+    | 'module-legacy'
+    | 'module-new'
+    | 'module-mixed'
+    | 'view'
+    | 'view-mixed'
+    | 'view-new'
+    | 'library';
   example?: 'expo' | 'native';
 };
 
@@ -131,6 +140,8 @@ const args: Record<ArgName, yargs.Options> = {
       'module-turbo',
       'module-mixed',
       'view',
+      'view-mixed',
+      'view-new',
       'library',
     ],
   },
@@ -278,18 +289,31 @@ async function create(argv: yargs.Arguments<any>) {
         },
         {
           title: 'Turbo module (experimental)',
-          value: 'module-turbo',
+          value: 'module-new',
         },
         {
           title: 'Native module',
           value: 'module-legacy',
         },
         { title: 'Native view', value: 'view' },
+        {
+          title: 'Native fabric view with backward compat (experimental)',
+          value: 'view-mixed',
+        },
+        {
+          title: 'Native fabric view (experimental)',
+          value: 'view-new',
+        },
         { title: 'JavaScript library', value: 'library' },
       ],
     },
     'languages': {
-      type: (_, values) => (values.type !== 'library' ? 'select' : null),
+      type: (_, values) =>
+        values.type === 'library' ||
+        values.type === 'view-new' ||
+        values.type === 'view-mixed'
+          ? null
+          : 'select',
       name: 'languages',
       message: 'Which languages do you want to use?',
       choices: (_, values) => {
@@ -298,7 +322,7 @@ async function create(argv: yargs.Arguments<any>) {
           { title: 'Kotlin & Objective-C', value: 'kotlin-objc' },
         ];
 
-        if (values.type !== 'module-turbo' && values.type !== 'module-mixed') {
+        if (values.type !== 'module-new' && values.type !== 'module-mixed') {
           languages.push(
             { title: 'Java & Swift', value: 'java-swift' },
             { title: 'Kotlin & Swift', value: 'kotlin-swift' }
@@ -376,17 +400,14 @@ async function create(argv: yargs.Arguments<any>) {
     version = FALLBACK_BOB_VERSION;
   }
 
-  const moduleType = type === 'view' ? 'view' : 'module';
-
+  const moduleType = type.startsWith('view') ? 'view' : 'module';
   const architecture =
-    type === 'module-turbo'
-      ? 'turbo'
-      : type === 'module-mixed'
+    type === 'module-new' || type === 'view-new'
+      ? 'new'
+      : type === 'module-mixed' || type === 'view-mixed'
       ? 'mixed'
       : 'legacy';
 
-  const turbomodule = architecture === 'turbo' || architecture === 'mixed';
-
   const project = slug.replace(/^(react-native-|@[^/]+\/)/, '');
 
   let namespace: string | undefined;
@@ -424,11 +445,11 @@ async function create(argv: yargs.Arguments<any>) {
       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',
-      view: type === 'view',
+      view: moduleType === 'view',
+      module: moduleType === 'module',
     },
     author: {
       name: authorName,
@@ -500,33 +521,45 @@ 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);
 
     if (moduleType === 'module') {
       await copyDir(NATIVE_FILES[`${moduleType}_${architecture}`], folder);
     } else {
-      await copyDir(NATIVE_FILES[moduleType], folder);
+      await copyDir(NATIVE_FILES[`${moduleType}_${architecture}`], folder);
     }
 
     if (options.project.swift) {
       await copyDir(SWIFT_FILES[moduleType], folder);
     } else {
-      await copyDir(OBJC_FILES[moduleType], folder);
+      if (moduleType === 'module') {
+        await copyDir(OBJC_FILES[moduleType], folder);
+      } else {
+        await copyDir(OBJC_FILES[`view_${architecture}`], folder);
+      }
     }
 
-    const android_files = options.project.kotlin ? KOTLIN_FILES : JAVA_FILES;
-
-    if (moduleType === 'module') {
-      await copyDir(android_files[`${moduleType}_${architecture}`], folder);
+    if (options.project.kotlin) {
+      switch (`${moduleType}_${architecture}`) {
+        case 'module_legacy':
+          await copyDir(KOTLIN_FILES['module_legacy'], folder);
+          break;
+        case 'module_mixed':
+          await copyDir(KOTLIN_FILES['module_mixed'], folder);
+          break;
+        case 'module_new':
+          await copyDir(KOTLIN_FILES['module_new'], folder);
+          break;
+        case 'view_legacy':
+          await copyDir(KOTLIN_FILES['view_legacy'], folder);
+          break;
+        default:
+          console.log(
+            `Kotlin template for ${moduleType}_${architecture} has not been implemented`
+          );
+      }
     } else {
-      await copyDir(android_files[moduleType], folder);
+      await copyDir(JAVA_FILES[`${moduleType}_${architecture}`], folder);
     }
 
     if (options.project.cpp) {

packages/create-react-native-library/src/utils/generateExampleApp.ts

@@ -40,7 +40,7 @@ export default async function generateExampleApp({
   type: 'expo' | 'native';
   dest: string;
   projectName: string;
-  architecture: 'turbo' | 'mixed' | 'legacy';
+  architecture: 'new' | 'mixed' | 'legacy';
 }) {
   const directory = path.join(dest, 'example');
   const args =
@@ -97,7 +97,7 @@ export default async function generateExampleApp({
 
   // Temporary until autolinking is fixed on iOS
   // https://github.com/facebook/react-native/commit/a5622165c198ac6e7ffff5883d4f269a2c974f2e
-  if (architecture === 'turbo' || architecture === 'mixed') {
+  if (architecture === 'new' || architecture === 'mixed') {
     scripts.postinstall = 'patch-package';
 
     Object.assign(devDependencies, PACKAGES_TO_ADD_NEW_ARCH);
@@ -109,7 +109,7 @@ export default async function generateExampleApp({
   );
 
   // If the library is on new architecture, enable new arch for iOS and Android
-  if (architecture === 'turbo') {
+  if (architecture === 'new') {
     // Android
     // Change newArchEnabled=false to newArchEnabled=true in example/android/gradle.properties
     const gradleProperties = await fs.readFile(

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

@@ -61,7 +61,7 @@
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
     "@types/react": "~17.0.21",
-    "@types/react-native": "0.68.0",
+    "@types/react-native": "0.70.0",
     "commitlint": "^17.0.2",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.5.0",
@@ -70,7 +70,7 @@
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "17.0.2",
-    "react-native": "0.68.2",
+    "react-native": "0.70.0",
     "react-native-builder-bob": "^<%- bob.version %>",
     "release-it": "^15.0.0",
     "typescript": "^4.5.2"
@@ -154,11 +154,11 @@
         }
       ]
     ]
-<% if (project.turbomodule) { -%>
+<% if (project.architecture === "new") { -%>
   },
   "codegenConfig": {
-    "name": "RN<%- project.name -%>Spec",
-    "type": "modules",
+    "name": "RN<%- project.name -%><%- project.view ? 'View': '' -%>Spec",
+    "type": <%- project.view ? '"components"': '"modules"' %>,
     "jsSrcsDir": "src"
 <% } -%>
   }

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

@@ -51,7 +51,7 @@ By default, the example is configured to build with the old architecture. To run
    ```
 
 <% } -%>
-<% if (project.architecture === 'turbo' || project.architecture == 'mixed') { -%>
+<% if (project.architecture === 'new' || project.architecture == 'mixed') { -%>
 To confirm that the app is running with the new architecture, you can check the Metro logs for a message like this:
 
 ```sh

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

@@ -11,29 +11,35 @@ npm install <%- project.slug %>
 ## Usage
 
 <% if (project.view) { -%>
+
 ```js
 import { <%- project.name -%>View } from "<%- project.slug -%>";
 
 // ...
 
 <<%- project.name -%>View color="tomato" />
 ```
-<% } else if (project.architecture == 'turbo') { -%>
+
+<% } else if (project.architecture === 'new' && project.module) { -%>
+
 ```js
-import { multiply } from "<%- project.slug -%>";
+import { multiply } from '<%- project.slug -%>';
 
 // ...
 
 const result = multiply(3, 7);
 ```
+
 <% } else { -%>
+
 ```js
-import { multiply } from "<%- project.slug -%>";
+import { multiply } from '<%- project.slug -%>';
 
 // ...
 
 const result = await multiply(3, 7);
 ```
+
 <% } -%>
 
 ## Contributing

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

@@ -16,7 +16,7 @@ export default function App() {
     </View>
   );
 }
-<% } else if (project.architecture == 'turbo') { -%>
+<% } else if (project.architecture === 'new' && project.module) { -%>
 const result = multiply(3, 7);
 
 export default function App() {

packages/create-react-native-library/templates/example/example/babel.config.js renamed to packages/create-react-native-library/templates/example-legacy/example/babel.config.js

@@ -0,0 +1,10 @@
+const path = require('path');
+const pak = require('../package.json');
+
+module.exports = {
+  dependencies: {
+    [pak.name]: {
+      root: path.join(__dirname, '..'),
+    },
+  },
+};