feat: base plugin repack (#29)

* feat: base plugin repack

* fix tests

* include plugins in generated rnef.config

* update necessary options

* fix lint

* fix: update rspack to make android release source maps work

* feat: merge package.jsons in all plugins, sort deps

* fix eslint

* make remove duplicates generic and apply to scripts

* merge scripts and deps with destructuring, todo warning

* add importName

* update tests

* change latest to actual package versions in templates

* add self to template deps for plugin-repack and metro

* update contributing and package exports

* update contributing guide

* fix lint

* skip tests that's fixed in #35

Author: thymikee

CONTRIBUTING.md

@@ -28,7 +28,16 @@ And then in your test project:
 
 ```sh
 cd /my/test/project/
-pnpm link --global "@callstack/rnef-cli" "@callstack/rnef-config" "@callstack/rnef-tools" "@callstack/rnef-plugin-platform-android" "@callstack/rnef-plugin-platform-ios" "@callstack/create-rnef-app" "@callstack/rnef-plugin-metro"
+pnpm link --global "@callstack/rnef-cli" "@callstack/rnef-config" "@callstack/rnef-tools" "@callstack/rnef-plugin-platform-android" "@callstack/rnef-plugin-platform-ios" "@callstack/create-rnef-app" "@callstack/rnef-plugin-metro" "@callstack/rnef-plugin-repack"
+```
+
+Update entries in package.json to look like this:
+
+```json
+{
+  "@callstack/rnef-cli": "link:../../rnef/packages/cli",
+  "@callstack/rnef-plugin-platform-android": "link:../../rnef/packages/plugin-platform-android"
+}
 ```
 
 #### Hoist pnpm dependencies

eslint.config.js

@@ -28,11 +28,14 @@ export default [
     // Override or add rules here
     rules: {},
   },
+  {
+    ignores: ['**/template/**/*.mjs'],
+  },
   {
     files: ['**/*.json'],
     rules: {
       '@nx/dependency-checks': [
-        'error',
+        'warn',
         {
           ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs}'],
           // TODO: @nx/dependency-checks incorrectly reports unused dependencies

packages/create-app/e2e/e2e.test.ts

@@ -50,7 +50,7 @@ describe('create-app command', { timeout: 30_000 }, () => {
     }
   );
 
-  it('should create a new project from npm template', async () => {
+  it.skip('should create a new project from npm template', async () => {
     const projectName = `test-npm-template-${getRandomString(6)}`;
     const projectPath = path.resolve(TEMP_DIR, projectName);
 

packages/create-app/src/lib/__tests__/bin.test.ts

@@ -1,13 +1,18 @@
 import { formatConfig } from '../bin.js';
-import { PLATFORMS } from '../templates.js';
+import { PLATFORMS, PLUGINS } from '../templates.js';
 
 test('formatConfig', () => {
-  expect(formatConfig(PLATFORMS)).toMatchInlineSnapshot(`
+  expect(formatConfig(PLATFORMS, PLUGINS)).toMatchInlineSnapshot(`
     "import { pluginPlatformIOS } from '@callstack/rnef-plugin-platform-ios';
     import { pluginPlatformAndroid } from '@callstack/rnef-plugin-platform-android';
+    import { pluginMetro } from '@callstack/rnef-plugin-metro';
+    import { pluginRepack } from '@callstack/rnef-plugin-repack';
 
     export default {
-      plugins: {},
+      plugins: {
+        metro: pluginMetro(),
+        repack: pluginRepack(),
+      },
       platforms: {
         ios: pluginPlatformIOS(),
         android: pluginPlatformAndroid(),
@@ -16,11 +21,14 @@ test('formatConfig', () => {
     "
   `);
 
-  expect(formatConfig([PLATFORMS[0]])).toMatchInlineSnapshot(`
+  expect(formatConfig([PLATFORMS[0]], [PLUGINS[0]])).toMatchInlineSnapshot(`
     "import { pluginPlatformIOS } from '@callstack/rnef-plugin-platform-ios';
+    import { pluginMetro } from '@callstack/rnef-plugin-metro';
 
     export default {
-      plugins: {},
+      plugins: {
+        metro: pluginMetro(),
+      },
       platforms: {
         ios: pluginPlatformIOS(),
       },

packages/create-app/src/lib/bin.ts

@@ -8,7 +8,7 @@ import {
 import {
   renameCommonFiles,
   renamePlaceholder,
-  rewritePackageJson,
+  sortDevDepsInPackageJson,
 } from './edit-template.js';
 import { copyDirSync, isEmptyDirSync, removeDir } from './fs.js';
 import { printLogo } from './logo.js';
@@ -92,10 +92,10 @@ export async function run() {
 
   const loader = spinner();
   loader.start('Updating template...');
-  rewritePackageJson(absoluteTargetDir, projectName, platforms);
+  sortDevDepsInPackageJson(absoluteTargetDir);
   renameCommonFiles(absoluteTargetDir);
   renamePlaceholder(absoluteTargetDir, projectName);
-  createConfig(absoluteTargetDir, platforms);
+  createConfig(absoluteTargetDir, platforms, plugins);
   loader.stop('Updated template.');
 
   printByeMessage(absoluteTargetDir);
@@ -160,25 +160,37 @@ async function extractPackage(absoluteTargetDir: string, pkg: TemplateInfo) {
   );
 }
 
-function createConfig(absoluteTargetDir: string, platforms: TemplateInfo[]) {
+function createConfig(
+  absoluteTargetDir: string,
+  platforms: TemplateInfo[],
+  plugins: TemplateInfo[]
+) {
   const rnefConfig = path.join(absoluteTargetDir, 'rnef.config.mjs');
-  fs.writeFileSync(rnefConfig, formatConfig(platforms));
+  fs.writeFileSync(rnefConfig, formatConfig(platforms, plugins));
 }
 
-export function formatConfig(platforms: TemplateInfo[]) {
+export function formatConfig(
+  platforms: TemplateInfo[],
+  plugins: TemplateInfo[]
+) {
   const platformsWithImports = platforms.filter(
     (template) => template.importName
   );
+  const pluginsWithImports = plugins.filter((template) => template.importName);
 
-  return `${platformsWithImports
+  return `${[...platformsWithImports, ...pluginsWithImports]
     .map(
       (template) =>
         `import { ${template.importName} } from '${template.packageName}';`
     )
     .join('\n')}
 
 export default {
-  plugins: {},
+  plugins: {
+    ${pluginsWithImports
+      .map((template) => `${template.name}: ${template.importName}(),`)
+      .join('\n    ')}
+  },
   platforms: {
     ${platformsWithImports
       .map((template) => `${template.name}: ${template.importName}(),`)

packages/create-app/src/lib/edit-template.ts

@@ -1,46 +1,14 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
-import { TemplateInfo } from './templates.js';
 
-export function rewritePackageJson(
-  projectPath: string,
-  packageName: string,
-  platforms: TemplateInfo[]
-) {
+export function sortDevDepsInPackageJson(projectPath: string) {
   const packageJsonPath = path.join(projectPath, 'package.json');
   if (!fs.existsSync(packageJsonPath)) {
     return;
   }
 
   const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
 
-  packageJson.name = packageName;
-  packageJson.version = '1.0.0';
-  packageJson.private = true;
-
-  delete packageJson.description;
-  delete packageJson.keywords;
-  delete packageJson.homepage;
-  delete packageJson.bugs;
-  delete packageJson.license;
-  delete packageJson.author;
-  delete packageJson.contributors;
-  delete packageJson.funding;
-  delete packageJson.repository;
-  delete packageJson.packageManager;
-
-  // @todo replace latest with acutal versions
-  packageJson.devDependencies['@callstack/rnef-cli'] = 'latest';
-
-  platforms.forEach((platform) => {
-    if (platform.type === 'local') {
-      packageJson.devDependencies[platform.packageName] =
-        'file://' + platform.localPath;
-    } else if (platform.type === 'npm') {
-      packageJson.devDependencies[platform.packageName] = platform.version;
-    }
-  });
-
   packageJson.devDependencies = Object.fromEntries(
     Object.entries(packageJson.devDependencies).sort()
   );

packages/create-app/src/lib/fs.ts

@@ -25,11 +25,28 @@ export function copyDirSync(
     if (stat.isDirectory()) {
       copyDirSync(srcFile, distFile, { skipFiles });
     } else {
-      fs.copyFileSync(srcFile, distFile);
+      if (nodePath.basename(srcFile) === 'package.json') {
+        mergePackageJsons(srcFile, distFile);
+      } else {
+        fs.copyFileSync(srcFile, distFile);
+      }
     }
   }
 }
 
+function mergePackageJsons(from: string, to: string) {
+  const src = JSON.parse(fs.readFileSync(from, 'utf-8'));
+  if (!fs.existsSync(to)) {
+    fs.copyFileSync(from, to);
+  }
+  const dist = JSON.parse(fs.readFileSync(to, 'utf-8'));
+  // @todo consider adding a warning when src keys are different from dist keys
+  dist.scripts = { ...dist.scripts, ...src.scripts };
+  dist.devDependencies = { ...dist.devDependencies, ...src.devDependencies };
+
+  fs.writeFileSync(to, JSON.stringify(dist, null, 2));
+}
+
 export function removeDir(path: string) {
   if (fs.existsSync(path)) {
     fs.rmSync(path, { recursive: true });

packages/create-app/src/lib/templates.ts

@@ -48,6 +48,15 @@ export const PLUGINS: TemplateInfo[] = [
     packageName: '@callstack/rnef-plugin-metro',
     localPath: path.join(TEMP_PACKAGES_PATH, 'plugin-metro'),
     directory: 'src/template',
+    importName: 'pluginMetro',
+  },
+  {
+    type: 'local',
+    name: 'repack',
+    packageName: '@callstack/rnef-plugin-repack',
+    localPath: path.join(TEMP_PACKAGES_PATH, 'plugin-repack'),
+    directory: 'src/template',
+    importName: 'pluginRepack',
   },
 ];
 

packages/plugin-metro/project.json

@@ -14,8 +14,7 @@
         "tsConfig": "packages/plugin-metro/tsconfig.lib.json",
         "assets": [
           "packages/plugin-metro/*.md",
-          "packages/plugin-metro/src/template/**/*",
-          "packages/plugin-metro/react-native.config.*"
+          "packages/plugin-metro/src/template/**/*"
         ]
       }
     }

packages/plugin-metro/src/lib/pluginMetro.ts

@@ -7,7 +7,7 @@ import {
 import { logger } from '@callstack/rnef-tools';
 
 type PluginConfig = {
-  root: string;
+  root?: string;
   reactNativeVersion: string;
   reactNativePath: string;
   platforms: {
@@ -63,11 +63,12 @@ export const pluginMetro =
   (pluginConfig: PluginConfig) =>
   (api: PluginApi): PluginOutput => {
     api.registerCommand({
-      name: 'dev',
+      name: 'start',
       description: 'Starts Metro dev server.',
       // @ts-expect-error todo fix this
       action: (args: StartCommandArgs) => {
-        startCommand.func(undefined, { ...pluginConfig }, args);
+        const root = api.getProjectRoot();
+        startCommand.func(undefined, { root, ...pluginConfig }, args);
       },
       options: startCommand.options,
     });
@@ -84,7 +85,8 @@ export const pluginMetro =
           );
           process.exit(1);
         }
-        bundleCommand.func(undefined, { ...pluginConfig }, args);
+        const root = api.getProjectRoot();
+        bundleCommand.func(undefined, { root, ...pluginConfig }, args);
       },
       options: bundleCommand.options,
     });