feat: add ability to generate a local module (experimental)

Author: satya164

.github/workflows/build-templates.yml

@@ -112,7 +112,8 @@ jobs:
             --author-url https://test.test \
             --repo-url https://test.test \
             --type ${{ matrix.type }} \
-            --languages ${{ matrix.language }}
+            --languages ${{ matrix.language }} \
+            --no-local
 
       - name: Cache dependencies of library
         id: library-yarn-cache

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

@@ -19,6 +19,7 @@ const BINARIES = [
 ];
 
 const COMMON_FILES = path.resolve(__dirname, '../templates/common');
+const COMMON_LOCAL_FILES = path.resolve(__dirname, '../templates/common-local');
 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');
@@ -27,6 +28,10 @@ const NATIVE_COMMON_FILES = path.resolve(
   __dirname,
   '../templates/native-common'
 );
+const NATIVE_COMMON_EXAMPLE_FILES = path.resolve(
+  __dirname,
+  '../templates/native-common-example'
+);
 
 const NATIVE_FILES = {
   module_legacy: path.resolve(__dirname, '../templates/native-library-legacy'),
@@ -82,6 +87,8 @@ type ArgName =
   | 'repo-url'
   | 'languages'
   | 'type'
+  | 'local'
+  | 'example'
   | 'react-native-version';
 
 type ProjectLanguages =
@@ -110,6 +117,7 @@ type Answers = {
   repoUrl: string;
   languages: ProjectLanguages;
   type?: ProjectType;
+  example?: boolean;
   reactNativeVersion?: string;
 };
 
@@ -246,10 +254,60 @@ const args: Record<ArgName, yargs.Options> = {
     description: 'Version of React Native to use, uses latest if not specified',
     type: 'string',
   },
+  'local': {
+    description: 'Whether to create a local library',
+    type: 'boolean',
+  },
+  'example': {
+    description: 'Whether to create a an example app',
+    type: 'boolean',
+  },
 };
 
 async function create(argv: yargs.Arguments<any>) {
-  const folder = path.join(process.cwd(), argv.name);
+  let local = false;
+  let folder = path.join(process.cwd(), argv.name);
+
+  if (typeof argv.local === 'boolean') {
+    local = argv.local;
+  } else {
+    let hasPackageJson = await fs.pathExists(
+      path.join(process.cwd(), 'package.json')
+    );
+
+    if (hasPackageJson) {
+      // If we're under a project with package.json, ask the user if they want to create a local library
+      const answers = await prompts([
+        {
+          type: 'confirm',
+          name: 'local',
+          message: `Looks like you're under a project folder. Do you want to create a local library?`,
+          initial: true,
+        },
+        {
+          type: (previous: boolean) => {
+            if (previous) {
+              return 'text';
+            }
+
+            return null;
+          },
+          name: 'folder',
+          message: `Where to create the local library?`,
+          initial: argv.name.includes('/')
+            ? argv.name
+            : `packages/${argv.name}`,
+          validate: (input) => Boolean(input) || 'Cannot be empty',
+        },
+      ]);
+
+      local = answers.local;
+
+      if (local) {
+        folder = path.join(process.cwd(), answers.folder);
+      }
+    }
+  }
 
   if (await fs.pathExists(folder)) {
     console.log(
@@ -315,22 +373,22 @@ async function create(argv: yargs.Arguments<any>) {
       validate: (input) => Boolean(input) || 'Cannot be empty',
     },
     'author-name': {
-      type: 'text',
+      type: local ? null : 'text',
       name: 'authorName',
       message: 'What is the name of package author?',
       initial: name,
       validate: (input) => Boolean(input) || 'Cannot be empty',
     },
     'author-email': {
-      type: 'text',
+      type: local ? null : 'text',
       name: 'authorEmail',
       message: 'What is the email address for the package author?',
       initial: email,
       validate: (input) =>
         /^\S+@\S+$/.test(input) || 'Must be a valid email address',
     },
     'author-url': {
-      type: 'text',
+      type: local ? null : 'text',
       name: 'authorUrl',
       message: 'What is the URL for the package author?',
       // @ts-ignore: this is supported, but types are wrong
@@ -348,7 +406,7 @@ async function create(argv: yargs.Arguments<any>) {
       validate: (input) => /^https?:\/\//.test(input) || 'Must be a valid URL',
     },
     'repo-url': {
-      type: 'text',
+      type: local ? null : 'text',
       name: 'repoUrl',
       message: 'What is the URL for the repository?',
       // @ts-ignore: this is supported, but types are wrong
@@ -438,6 +496,7 @@ async function create(argv: yargs.Arguments<any>) {
     repoUrl,
     type = 'module-mixed',
     languages = type === 'library' ? 'js' : 'java-objc',
+    example = !local,
     reactNativeVersion,
   } = {
     ...argv,
@@ -503,7 +562,7 @@ async function create(argv: yargs.Arguments<any>) {
       ? 'mixed'
       : 'legacy';
 
-  const example = type === 'library' ? 'expo' : 'native';
+  const exampleType = type === 'library' ? 'expo' : 'native';
   const project = slug.replace(/^(react-native-|@[^/]+\/)/, '');
 
   let namespace: string | undefined;
@@ -553,7 +612,7 @@ async function create(argv: yargs.Arguments<any>) {
       url: authorUrl,
     },
     repo: repoUrl,
-    example,
+    example: exampleType,
     year: new Date().getFullYear(),
   };
 
@@ -589,7 +648,7 @@ async function create(argv: yargs.Arguments<any>) {
   await fs.mkdirp(folder);
 
   if (reactNativeVersion != null) {
-    if (example === 'expo') {
+    if (exampleType === 'expo') {
       console.warn(
         `${kleur.yellow('⚠')} Ignoring --react-native-version for Expo example`
       );
@@ -602,32 +661,46 @@ async function create(argv: yargs.Arguments<any>) {
     }
   }
 
-  const spinner = ora('Generating example').start();
+  const spinner = ora().start();
 
-  await generateExampleApp({
-    type: example,
-    dest: folder,
-    slug: options.project.slug,
-    projectName: options.project.name,
-    arch,
-    reactNativeVersion,
-  });
+  if (example) {
+    spinner.text = 'Generating example app';
+
+    await generateExampleApp({
+      type: exampleType,
+      dest: folder,
+      slug: options.project.slug,
+      projectName: options.project.name,
+      arch,
+      reactNativeVersion,
+    });
+  }
 
   spinner.text = 'Copying files';
 
-  await copyDir(COMMON_FILES, folder);
+  if (local) {
+    await copyDir(COMMON_LOCAL_FILES, folder);
+  } else {
+    await copyDir(COMMON_FILES, folder);
+  }
 
   if (languages === 'js') {
     await copyDir(JS_FILES, folder);
     await copyDir(EXPO_FILES, folder);
   } else {
-    await copyDir(
-      path.join(EXAMPLE_FILES, 'example'),
-      path.join(folder, 'example')
-    );
+    if (example) {
+      await copyDir(
+        path.join(EXAMPLE_FILES, 'example'),
+        path.join(folder, 'example')
+      );
+    }
 
     await copyDir(NATIVE_COMMON_FILES, folder);
 
+    if (example) {
+      await copyDir(NATIVE_COMMON_EXAMPLE_FILES, folder);
+    }
+
     if (moduleType === 'module') {
       await copyDir(NATIVE_FILES[`${moduleType}_${arch}`], folder);
     } else {
@@ -664,44 +737,113 @@ async function create(argv: yargs.Arguments<any>) {
     }
   }
 
-  // Set `react` and `react-native` versions of root `package.json` from example `package.json`
-  const examplePackageJson = fs.readJSONSync(
-    path.join(folder, 'example', 'package.json')
-  );
-  const rootPackageJson = fs.readJSONSync(path.join(folder, 'package.json'));
-  rootPackageJson.devDependencies.react = examplePackageJson.dependencies.react;
-  rootPackageJson.devDependencies['react-native'] =
-    examplePackageJson.dependencies['react-native'];
+  if (example) {
+    // Set `react` and `react-native` versions of root `package.json` from example `package.json`
+    const examplePackageJson = await fs.readJSON(
+      path.join(folder, 'example', 'package.json')
+    );
+    const rootPackageJson = await fs.readJSON(
+      path.join(folder, 'package.json')
+    );
 
-  fs.writeJSONSync(path.join(folder, 'package.json'), rootPackageJson, {
-    spaces: 2,
-  });
+    rootPackageJson.devDependencies.react =
+      examplePackageJson.dependencies.react;
+    rootPackageJson.devDependencies['react-native'] =
+      examplePackageJson.dependencies['react-native'];
 
-  try {
-    await spawn('git', ['init'], { cwd: folder });
-    await spawn('git', ['branch', '-M', 'main'], { cwd: folder });
-    await spawn('git', ['add', '.'], { cwd: folder });
-    await spawn('git', ['commit', '-m', 'chore: initial commit'], {
-      cwd: folder,
+    await fs.writeJSON(path.join(folder, 'package.json'), rootPackageJson, {
+      spaces: 2,
     });
-  } catch (e) {
-    // Ignore error
+  }
+
+  if (!local) {
+    try {
+      await spawn('git', ['init'], { cwd: folder });
+      await spawn('git', ['branch', '-M', 'main'], { cwd: folder });
+      await spawn('git', ['add', '.'], { cwd: folder });
+      await spawn('git', ['commit', '-m', 'chore: initial commit'], {
+        cwd: folder,
+      });
+    } catch (e) {
+      // Ignore error
+    }
   }
 
   spinner.succeed(
-    `Project created successfully at ${kleur.yellow(argv.name)}!\n`
+    `Project created successfully at ${kleur.yellow(
+      path.relative(process.cwd(), folder)
+    )}!\n`
   );
 
-  const platforms = {
-    ios: { name: 'iOS', color: 'cyan' },
-    android: { name: 'Android', color: 'green' },
-    ...(example === 'expo'
-      ? ({ web: { name: 'Web', color: 'blue' } } as const)
-      : null),
-  } as const;
+  if (local) {
+    let linked;
+
+    const packageManager = (await fs.pathExists(
+      path.join(process.cwd(), 'yarn.lock')
+    ))
+      ? 'yarn'
+      : 'npm';
+
+    const packageJsonPath = path.join(process.cwd(), 'package.json');
+
+    if (await fs.pathExists(packageJsonPath)) {
+      const packageJson = await fs.readJSON(packageJsonPath);
+      const isReactNativeProject = Boolean(
+        packageJson.dependencies?.['react-native']
+      );
+
+      if (isReactNativeProject) {
+        packageJson.dependencies = packageJson.dependencies || {};
+        packageJson.dependencies[slug] =
+          packageManager === 'yarn'
+            ? `link:./${path.relative(process.cwd(), folder)}`
+            : `file:./${path.relative(process.cwd(), folder)}`;
+
+        await fs.writeJSON(packageJsonPath, packageJson, {
+          spaces: 2,
+        });
+
+        linked = true;
+      }
+    }
+
+    console.log(
+      dedent(`
+      ${kleur.magenta(
+        `${kleur.bold('Get started')} with the project`
+      )}${kleur.gray(':')}
+
+      ${
+        (linked
+          ? `- Run ${kleur.blue(
+              `${packageManager} install`
+            )} to link the library\n`
+          : `- Link the library at ${kleur.blue(
+              path.relative(process.cwd(), folder)
+            )} based on your project setup'\n`) +
+        `- Run ${kleur.blue(
+          'cd ios; pod install; cd -'
+        )} to install dependencies with CocoaPods\n` +
+        `- Run ${kleur.blue('npx react-native run-android')} or ${kleur.blue(
+          'npx react-native run-ios'
+        )} to build and run the app\n` +
+        `- Import from ${kleur.blue(slug)} and use it in your app.`
+      }
 
-  console.log(
-    dedent(`
+      ${kleur.yellow(`Good luck!`)}
+    `)
+    );
+  } else {
+    const platforms = {
+      ios: { name: 'iOS', color: 'cyan' },
+      android: { name: 'Android', color: 'green' },
+      ...(exampleType === 'expo'
+        ? ({ web: { name: 'Web', color: 'blue' } } as const)
+        : null),
+    } as const;
+
+    console.log(
+      dedent(`
       ${kleur.magenta(
         `${kleur.bold('Get started')} with the project`
       )}${kleur.gray(':')}
@@ -722,7 +864,8 @@ async function create(argv: yargs.Arguments<any>) {
         `See ${kleur.bold('CONTRIBUTING.md')} for more details. Good luck!`
       )}
     `)
-  );
+    );
+  }
 }
 // eslint-disable-next-line babel/no-unused-expressions
 yargs