☂️ React Native Monorepo

[cortinico]

Hey all,
I'm opening this task to keep track of the effort to implement the React Native Monorepo RFC:

• RFC: React Native as a monorepo react-native-community/discussions-and-proposals#480

In this first phase of the work, we're looking into only:

• Renaming the packages under packages/ (i.e. updating the name field) to follow the naming convention suggested in the RFC (@react-native/...)
• Updating the version to be 0.71.0
  And the necessary related infra.

At this stage we're not looking into renaming the folders of such packages.

Here the list of tasks that needs to be handled:

• Setup Verdaccio for local E2E testing of the template.
  • Done by @fortmarek Use verdaccio for the template e2e test #34577
• Bump @react-native/babel-plugin-codegen to 0.71.x
  • Done here 4f6929b
• Bump @react-native/eslint-plugin-specs to 0.71.x
  • Done here e441504
• Rename @react-native-community/eslint-config to @react-native/eslint-config and bump to 0.71.x
  • Assigned to @afoxman eslint config & plugin packages - prep for monorepo RFC #34581
• Rename @react-native-community/eslint-plugin to @react-native/eslint-plugin and bump to 0.71.x
  • Assigned to @afoxman eslint config & plugin packages - prep for monorepo RFC #34581
• Rename @react-native/polyfills to @react-native/js-polyfills and bump to 0.71.x
  • Assigned to @Titozzz chore: rename polyfills to js-polyfills (umbrella 480) #34574
• Rename @react-native/normalize-color to @react-native/normalize-colors and bump to 0.71.x
  • Assigned to @Titozzz chore: rename normalize-color to normalize-colors (umbrella 480) #34571
• Rename @react-native/assets to @react-native/assets-registry and bump to 0.71.x
  • Assigned to @fortmarek Rename assets to assets-registry #34572
• Rename react-native-codegen to @react-native/codegen. No bump needed.
  • Assigned to @shivenmian here chore: renamed react-native-codegen to @react-native/codegen #34804
• Rename react-native-gradle-plugin to @react-native/gradle-plugin. No bump needed.
  • Assigned to @rahul3002 here file to Renamed react-native-gradle-plugin to @react-native/gradle-pl… #34835
• Move ReactCommon/hermes/inspector/tools/msggen/package.json inside packages or remove it.
  • Assigned to @gabrieldonadel here chore: rename hermes-inspector-msggen to @react-native/hermes-inspector-msggen #34850

All the related PRs/Issues for this effort are labelled as Tech: Monorepo.

When doing one of those tasks, first let's make sure the CI is green first (specifically the test_js task). Once your PR is green, we're going to import it internally, and expect some turnaround time as those changes are going to require internal changes on our end as well.

Please comment below if you're willing to take the stance on any of those task and wait for a confirmation before start working on it.

[rahul3002]

i would like to work on this issue

[cortinico]

i would like to work on this issue

The item Rename react-native-gradle-plugin to @react-native/gradle-plugin. No bump needed. is up for grab @rahul3002 👍

[rahul3002]

I will grab it

[rahul3002]

hello @cortinico Im getting confused u have assigned some of task so , should I work on them are or they are working

[cortinico]

hello @cortinico Im getting confused u have assigned some of task so , should I work on them are or they are working

I've assigned it to you 👍

[cortinico]

Hey all,
Just a heads up that we merged the change that introduces Verdaccio in our OSS infra (kudos to @fortmarek here #34577).

Can I ask you all to rebase your PRs and drive them forward. You should all have a pending comments be me to follow up 👍

[gabrieldonadel]

@cortinico I would like to help with the Move ReactCommon/hermes/inspector/tools/msggen/package.json inside packages or remove it. task. Would you mind elaborating a little bit more on what's expected? In the case of moving this to the packages folder, should this be renamed to @react-native/msggen or something like that?

[rahul3002]

noo I'm working on it , kindly find other issue

[cortinico]

@cortinico I would like to help with the Move ReactCommon/hermes/inspector/tools/msggen/package.json inside packages or remove it. task. Would you mind elaborating a little bit more on what's expected? In the case of moving this to the packages folder, should this be renamed to @react-native/msggen or something like that?

@gabrieldonadel yes please, you can do so. @rahul3002 is working on another task.
What needs to be done is the following:

1. Let's rename it to @react-native/hermes-inspector-msggen
2. Let's make it private as we're not going to publish this
3. Let's move it to packages/hermes-inspector-msggen
4. There are some scripts locally that needs to keep on workign once we move the path.
   Let me know if you need further support

[hoxyq]

A quick update on this task so far, since I've flooded it with the references from my PRs.

Seems like all internal problems (from Meta internal code) are resolved, right now I am working on resolving some problems with CircleCI. I will provide more context and details when I will able fully validate the solution.

The main problem is that Yarn workspaces produce packages as a symlinks inside node_modules, which might not work as expected in some build scripts. This is also relevant for Metro, that's why I've changed absolute paths to relevant in some files. As suggested by @cortinico, I am also using Verdaccio for template app tests on CircleCI, since it depends on eslint-config and codegen packages

[kelset]

great stuff @hoxyq 👏

[hoxyq]

Hey, all changes are finally merged 🎉

How it works now

We are using Verdaccio as a local npm registry in three different places in our CI:

1. Running e2e tests
2. Building react-native package
3. Building template package

Each package, which is not marked as private, is being published to Verdaccio. This helps us to resolve the issue that all renamed packages are not yet present in npm registry. This approach should also help in release cycle when we will finally migrate to a proper monorepo structure: we might bump versions of some packages (without publishing them to npm), but they should be always available via Verdaccio.

Known problems

We use command yarn --json workspaces info to get a list of all packages that we publish, but at some point in release CI we remove workspaces from react-native's package.json, so using yarn --json workspaces info results in an error. This was shared by @cipolleschi while working on 0.71.0 release, maybe @kelset can share some details about it.

Next steps

As shared in original proposal, we will be working on setting up CI to automate versions bumping and packages publishing. We have also started a discussions around what to migrate to a separate package and how to make it happen.

[Pranav-yadav]

@cortinico looks like all tasks under this Umbrella are completed.
Any reason to still keep it open?

[kelset]

thanks for the nudge, you are correct. The monorepo work has been completed, so we can close this off.