feat: support autolinking in monorepos - #768

Merged
thymikee merged 44 commits into
masterfrom
fix/paths
Oct 11, 2019
Merged

feat: support autolinking in monorepos#768
thymikee merged 44 commits into
masterfrom
fix/paths

Conversation

@grabbou

@grabbougrabbou commented Oct 3, 2019

Copy link
Copy Markdown
Member

Fixes#537
Fixes#717
Fixes#657 (path to .bin no longer hardcoded)
Fixes#633

The problem:

There are various issues complaining about weak or broken support for mono repositories, in regards to auto-linking. The workarounds are temporary and error-prone, being executed on top of a confusing resolution system.

Surprisingly, we already have quite a good support for mono-repo in the CLI. For example, we check for a package in node_modules up the directory tree. We also do that for resolving the configuration file.

In this PR, I am reworking some of the fundamental assumptions about the paths within auto-linking in order to make it support various project structures without any extra work.

Automatic mono repository support for automatic linking 😂

Summary:

Please look at the structure that I am working on. I believe this is the most common mono repo:

- /node_modules
- /react-native
- /react-native-firebase
- /packages
- /mobile
- /node_modules
- /react-native-webview
- /ios

This structure is based on the @brunolemos repository that he provided for reproduction purposes.

Please keep in mind the following two design decisions:

My main assumption is that all configuration relative to the project you are working on (metro configuration, CLI configuration) should be placed inside packages/mobile. I think scoping is better and is going to support multiple apps that co-exist within a single codebase.

Dependencies can live at different levels in the project hierarchy (hence I had to remove hardcoded root, which wouldn't make this work). This is important when there are multiple React Native apps living next to each other when a package cannot be hoisted.

Test:

When running pod install on iOS and Android, both react-native-webview and react-native-firebase are linked properly with their relative paths.

Status:

  • iOS
  • Android

Let me know if this structure is similar to what you are running and what you'd expect.

Changes

  • feat: deprecate root in auto-linking and introduce automatic detection of the project location
  • refactor: refactor PackageManager to not rely on a setProjectRoot being called in different places
  • refactor: limit dependency on an implicit process.cwd() being set by few functions
  • feat: introduce detachedFunction (internally) that runs without configuration (useful for init and other commands that don't need project context)

Comment threadpackages/platform-ios/native_modules.rb Outdated
Comment threadpackages/platform-ios/native_modules.rb
@tbergquist-godaddy

Copy link
Copy Markdown

I remember looking into brunolemos repository, but if I understand correctly, this setup works because of the react-native.config.js in the root pointing to the android project path?

And this would only work with one react-native app in your monorepo right? What if I want to have more react-native apps in the same monreopo?

@grabbou

Copy link
Copy Markdown
MemberAuthor

Speaking to @thymikee, we have decided to pursue using yarn and npx again and checking which versions are supported. Using them lets us make even fewer assumptions about the paths, which is making it better for monorepo.

Will resume later.

Comment threadpackages/platform-ios/native_modules.rb

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks too simple to be true :D so far I didn't find anything suspicious, but we need to test it thoroughly

Comment threadpackages/platform-ios/native_modules.rb
Comment threadpackages/platform-ios/native_modules.rb
We do not need root anymore. However, we still accept one argument (config) for testing purposes. Without this check, users that pass custom root would accidentially break their projects as CLI would take it as a config value.
@grabbougrabbou changed the title WIP: Support autolinking in monorepoSupport autolinking in monorepoOct 8, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

Added Android support. Feedback is welcome :)

@Titozzz

Copy link
Copy Markdown
Contributor

Great job :)

Comment threaddocs/autolinking.md
podspec_dir_path = Pathname.new(File.dirname(podspec_path))
project_root = Pathname.new(config_root)

relative_path = podspec_dir_path.relative_path_from project_root

@thymikeethymikeeOct 10, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we don't have custom root, I think instead of using project_root we need to use cwd, because that's we look for – a relative path from cwd (ios dir) to our native module (in node_modules or custom path). This fixes the Slider repo example for me:

Suggested change
relative_path=podspec_dir_path.relative_path_fromproject_root
relative_path=podspec_dir_path.relative_path_fromDir.pwd

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

projet_root is project_root = Pathname.new(config["project"]["ios"]["sourceDir"]) few lines earlier - so that's exactly the location of ios folder.

PWD might be not a good idea, see: #657 when running from root folder with --ios-directory flag

@Salakar

Salakar commented Oct 10, 2019

Copy link
Copy Markdown
Member

It might be good to test this on the React Native Firebase monorepo test project also (https://github.com/invertase/react-native-firebase/tree/master/tests), though I have no availability until probably end of next week 😫

@grabbou

Copy link
Copy Markdown
MemberAuthor

Will test React Native Slider and React Native Firebase before we ship it, just to be sure.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

React Native Slider isn't properly configured right now and this PR leveraged its issues. Running react-native config reveals that project.ios.sourceDir points to ios instead of example/ios.

The following configuration makes everything run smoothly:

constroot=__dirname;module.exports={project: {android: {sourceDir: './example/android',},ios: {project: './example/ios/example.xcodeproj',},},dependencies: {'react-native-slider': {
root,},},};

Note that in the future, once we add support to runAndroid and runIOS to use config (right now, they don't), it will make it easier.

For example, no --root flag will be needed to runAndroid to point it to the correct directory.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

Note: I wouldn't recommend doing React Native Slider setup in the future. Ideally, every project goes React Native Firebase way, having a separate package.json and independent package for an example project.

In that scenario, no custom configuration at all is needed. I still feel like custom root is a hack :(

@thymikee

thymikee commented Oct 11, 2019

Copy link
Copy Markdown
Member

Doesn't this configuration leak to the users if config is published?

I think it's about time to end this hack (because it clearly was one, I forgot how bad :D). The now seemingly correct approach there would be to include a real package.json with "react-native": "*" and "@react-native-community/slider": ".." and setup workspaces for less stuff to download

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

@thymikeeproject doesn't leak outside. dependencywould be read, but that would be on purpose :)

I actually just wrote this down and I am totally on board with your idea - I believe this is the best way to set it up and doesn't include this hack.

@thymikeethymikee changed the title Support autolinking in monorepofeat: support autolinking in monoreposOct 11, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

@thymikee we should have a generator for initing such a structure like React Native Firebase to work on. Once it's supported here by default, we can make it official and the only use-case supported.

@thymikee

Copy link
Copy Markdown
Member

@grabbou sounds like something that Bob could provide

@grabbou

Copy link
Copy Markdown
MemberAuthor

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

@Salakar

Copy link
Copy Markdown
Member

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

Thanks for checking!

@vomchik

vomchik commented Jan 31, 2020

Copy link
Copy Markdown

@grabbou Hi. Could you help me? Should both dependencies be added to package.json?
Currently, I'm using Lerna and run this command npx lerna booststap --hoist so all my deps hoist to root node_modules folder, but pod install can't find any react-native deps.
Maybe you have a repo with some examples.
Thanks.

@vongohren

Copy link
Copy Markdown

Yeah some examples of this would be nice, because Im still battling to no-hoist or not, to make sure that all is packaged right. Im following a couple of leads: https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417

But keep getting missing in the project on some files and even getting past that I get firebase issues: invertase/react-native-firebase#2122

So as the commentes in the medium says, is it still too early to do react native monorepo?

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

7 participants

@grabbou@tbergquist-godaddy@Titozzz@Salakar@thymikee@vomchik@vongohren
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

feat: support autolinking in monorepos - #768

Merged
thymikee merged 44 commits into
masterfrom
fix/paths
Oct 11, 2019
Merged

feat: support autolinking in monorepos#768
thymikee merged 44 commits into
masterfrom
fix/paths

Conversation

@grabbou

@grabbougrabbou commented Oct 3, 2019

Copy link
Copy Markdown
Member

Fixes#537
Fixes#717
Fixes#657 (path to .bin no longer hardcoded)
Fixes#633

The problem:

There are various issues complaining about weak or broken support for mono repositories, in regards to auto-linking. The workarounds are temporary and error-prone, being executed on top of a confusing resolution system.

Surprisingly, we already have quite a good support for mono-repo in the CLI. For example, we check for a package in node_modules up the directory tree. We also do that for resolving the configuration file.

In this PR, I am reworking some of the fundamental assumptions about the paths within auto-linking in order to make it support various project structures without any extra work.

Automatic mono repository support for automatic linking 😂

Summary:

Please look at the structure that I am working on. I believe this is the most common mono repo:

- /node_modules
- /react-native
- /react-native-firebase
- /packages
- /mobile
- /node_modules
- /react-native-webview
- /ios

This structure is based on the @brunolemos repository that he provided for reproduction purposes.

Please keep in mind the following two design decisions:

My main assumption is that all configuration relative to the project you are working on (metro configuration, CLI configuration) should be placed inside packages/mobile. I think scoping is better and is going to support multiple apps that co-exist within a single codebase.

Dependencies can live at different levels in the project hierarchy (hence I had to remove hardcoded root, which wouldn't make this work). This is important when there are multiple React Native apps living next to each other when a package cannot be hoisted.

Test:

When running pod install on iOS and Android, both react-native-webview and react-native-firebase are linked properly with their relative paths.

Status:

  • iOS
  • Android

Let me know if this structure is similar to what you are running and what you'd expect.

Changes

  • feat: deprecate root in auto-linking and introduce automatic detection of the project location
  • refactor: refactor PackageManager to not rely on a setProjectRoot being called in different places
  • refactor: limit dependency on an implicit process.cwd() being set by few functions
  • feat: introduce detachedFunction (internally) that runs without configuration (useful for init and other commands that don't need project context)

Comment threadpackages/platform-ios/native_modules.rb Outdated
Comment threadpackages/platform-ios/native_modules.rb
@tbergquist-godaddy

Copy link
Copy Markdown

I remember looking into brunolemos repository, but if I understand correctly, this setup works because of the react-native.config.js in the root pointing to the android project path?

And this would only work with one react-native app in your monorepo right? What if I want to have more react-native apps in the same monreopo?

@grabbou

Copy link
Copy Markdown
MemberAuthor

Speaking to @thymikee, we have decided to pursue using yarn and npx again and checking which versions are supported. Using them lets us make even fewer assumptions about the paths, which is making it better for monorepo.

Will resume later.

Comment threadpackages/platform-ios/native_modules.rb

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks too simple to be true :D so far I didn't find anything suspicious, but we need to test it thoroughly

Comment threadpackages/platform-ios/native_modules.rb
Comment threadpackages/platform-ios/native_modules.rb
We do not need root anymore. However, we still accept one argument (config) for testing purposes. Without this check, users that pass custom root would accidentially break their projects as CLI would take it as a config value.
@grabbougrabbou changed the title WIP: Support autolinking in monorepoSupport autolinking in monorepoOct 8, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

Added Android support. Feedback is welcome :)

@Titozzz

Copy link
Copy Markdown
Contributor

Great job :)

Comment threaddocs/autolinking.md
podspec_dir_path = Pathname.new(File.dirname(podspec_path))
project_root = Pathname.new(config_root)

relative_path = podspec_dir_path.relative_path_from project_root

@thymikeethymikeeOct 10, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we don't have custom root, I think instead of using project_root we need to use cwd, because that's we look for – a relative path from cwd (ios dir) to our native module (in node_modules or custom path). This fixes the Slider repo example for me:

Suggested change
relative_path=podspec_dir_path.relative_path_fromproject_root
relative_path=podspec_dir_path.relative_path_fromDir.pwd

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

projet_root is project_root = Pathname.new(config["project"]["ios"]["sourceDir"]) few lines earlier - so that's exactly the location of ios folder.

PWD might be not a good idea, see: #657 when running from root folder with --ios-directory flag

@Salakar

Salakar commented Oct 10, 2019

Copy link
Copy Markdown
Member

It might be good to test this on the React Native Firebase monorepo test project also (https://github.com/invertase/react-native-firebase/tree/master/tests), though I have no availability until probably end of next week 😫

@grabbou

Copy link
Copy Markdown
MemberAuthor

Will test React Native Slider and React Native Firebase before we ship it, just to be sure.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

React Native Slider isn't properly configured right now and this PR leveraged its issues. Running react-native config reveals that project.ios.sourceDir points to ios instead of example/ios.

The following configuration makes everything run smoothly:

constroot=__dirname;module.exports={project: {android: {sourceDir: './example/android',},ios: {project: './example/ios/example.xcodeproj',},},dependencies: {'react-native-slider': {
root,},},};

Note that in the future, once we add support to runAndroid and runIOS to use config (right now, they don't), it will make it easier.

For example, no --root flag will be needed to runAndroid to point it to the correct directory.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

Note: I wouldn't recommend doing React Native Slider setup in the future. Ideally, every project goes React Native Firebase way, having a separate package.json and independent package for an example project.

In that scenario, no custom configuration at all is needed. I still feel like custom root is a hack :(

@thymikee

thymikee commented Oct 11, 2019

Copy link
Copy Markdown
Member

Doesn't this configuration leak to the users if config is published?

I think it's about time to end this hack (because it clearly was one, I forgot how bad :D). The now seemingly correct approach there would be to include a real package.json with "react-native": "*" and "@react-native-community/slider": ".." and setup workspaces for less stuff to download

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

@thymikeeproject doesn't leak outside. dependencywould be read, but that would be on purpose :)

I actually just wrote this down and I am totally on board with your idea - I believe this is the best way to set it up and doesn't include this hack.

@thymikeethymikee changed the title Support autolinking in monorepofeat: support autolinking in monoreposOct 11, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

@thymikee we should have a generator for initing such a structure like React Native Firebase to work on. Once it's supported here by default, we can make it official and the only use-case supported.

@thymikee

Copy link
Copy Markdown
Member

@grabbou sounds like something that Bob could provide

@grabbou

Copy link
Copy Markdown
MemberAuthor

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

@Salakar

Copy link
Copy Markdown
Member

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

Thanks for checking!

@vomchik

vomchik commented Jan 31, 2020

Copy link
Copy Markdown

@grabbou Hi. Could you help me? Should both dependencies be added to package.json?
Currently, I'm using Lerna and run this command npx lerna booststap --hoist so all my deps hoist to root node_modules folder, but pod install can't find any react-native deps.
Maybe you have a repo with some examples.
Thanks.

@vongohren

Copy link
Copy Markdown

Yeah some examples of this would be nice, because Im still battling to no-hoist or not, to make sure that all is packaged right. Im following a couple of leads: https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417

But keep getting missing in the project on some files and even getting past that I get firebase issues: invertase/react-native-firebase#2122

So as the commentes in the medium says, is it still too early to do react native monorepo?

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

7 participants

@grabbou@tbergquist-godaddy@Titozzz@Salakar@thymikee@vomchik@vongohren
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat: support autolinking in monorepos - #768

Merged
thymikee merged 44 commits into
masterfrom
fix/paths
Oct 11, 2019
Merged

feat: support autolinking in monorepos#768
thymikee merged 44 commits into
masterfrom
fix/paths

Conversation

@grabbou

@grabbougrabbou commented Oct 3, 2019

Copy link
Copy Markdown
Member

Fixes#537
Fixes#717
Fixes#657 (path to .bin no longer hardcoded)
Fixes#633

The problem:

There are various issues complaining about weak or broken support for mono repositories, in regards to auto-linking. The workarounds are temporary and error-prone, being executed on top of a confusing resolution system.

Surprisingly, we already have quite a good support for mono-repo in the CLI. For example, we check for a package in node_modules up the directory tree. We also do that for resolving the configuration file.

In this PR, I am reworking some of the fundamental assumptions about the paths within auto-linking in order to make it support various project structures without any extra work.

Automatic mono repository support for automatic linking 😂

Summary:

Please look at the structure that I am working on. I believe this is the most common mono repo:

- /node_modules
- /react-native
- /react-native-firebase
- /packages
- /mobile
- /node_modules
- /react-native-webview
- /ios

This structure is based on the @brunolemos repository that he provided for reproduction purposes.

Please keep in mind the following two design decisions:

My main assumption is that all configuration relative to the project you are working on (metro configuration, CLI configuration) should be placed inside packages/mobile. I think scoping is better and is going to support multiple apps that co-exist within a single codebase.

Dependencies can live at different levels in the project hierarchy (hence I had to remove hardcoded root, which wouldn't make this work). This is important when there are multiple React Native apps living next to each other when a package cannot be hoisted.

Test:

When running pod install on iOS and Android, both react-native-webview and react-native-firebase are linked properly with their relative paths.

Status:

  • iOS
  • Android

Let me know if this structure is similar to what you are running and what you'd expect.

Changes

  • feat: deprecate root in auto-linking and introduce automatic detection of the project location
  • refactor: refactor PackageManager to not rely on a setProjectRoot being called in different places
  • refactor: limit dependency on an implicit process.cwd() being set by few functions
  • feat: introduce detachedFunction (internally) that runs without configuration (useful for init and other commands that don't need project context)

Comment threadpackages/platform-ios/native_modules.rb Outdated
Comment threadpackages/platform-ios/native_modules.rb
@tbergquist-godaddy

Copy link
Copy Markdown

I remember looking into brunolemos repository, but if I understand correctly, this setup works because of the react-native.config.js in the root pointing to the android project path?

And this would only work with one react-native app in your monorepo right? What if I want to have more react-native apps in the same monreopo?

@grabbou

Copy link
Copy Markdown
MemberAuthor

Speaking to @thymikee, we have decided to pursue using yarn and npx again and checking which versions are supported. Using them lets us make even fewer assumptions about the paths, which is making it better for monorepo.

Will resume later.

Comment threadpackages/platform-ios/native_modules.rb

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks too simple to be true :D so far I didn't find anything suspicious, but we need to test it thoroughly

Comment threadpackages/platform-ios/native_modules.rb
Comment threadpackages/platform-ios/native_modules.rb
We do not need root anymore. However, we still accept one argument (config) for testing purposes. Without this check, users that pass custom root would accidentially break their projects as CLI would take it as a config value.
@grabbougrabbou changed the title WIP: Support autolinking in monorepoSupport autolinking in monorepoOct 8, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

Added Android support. Feedback is welcome :)

@Titozzz

Copy link
Copy Markdown
Contributor

Great job :)

Comment threaddocs/autolinking.md
podspec_dir_path = Pathname.new(File.dirname(podspec_path))
project_root = Pathname.new(config_root)

relative_path = podspec_dir_path.relative_path_from project_root

@thymikeethymikeeOct 10, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we don't have custom root, I think instead of using project_root we need to use cwd, because that's we look for – a relative path from cwd (ios dir) to our native module (in node_modules or custom path). This fixes the Slider repo example for me:

Suggested change
relative_path=podspec_dir_path.relative_path_fromproject_root
relative_path=podspec_dir_path.relative_path_fromDir.pwd

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

projet_root is project_root = Pathname.new(config["project"]["ios"]["sourceDir"]) few lines earlier - so that's exactly the location of ios folder.

PWD might be not a good idea, see: #657 when running from root folder with --ios-directory flag

@Salakar

Salakar commented Oct 10, 2019

Copy link
Copy Markdown
Member

It might be good to test this on the React Native Firebase monorepo test project also (https://github.com/invertase/react-native-firebase/tree/master/tests), though I have no availability until probably end of next week 😫

@grabbou

Copy link
Copy Markdown
MemberAuthor

Will test React Native Slider and React Native Firebase before we ship it, just to be sure.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

React Native Slider isn't properly configured right now and this PR leveraged its issues. Running react-native config reveals that project.ios.sourceDir points to ios instead of example/ios.

The following configuration makes everything run smoothly:

constroot=__dirname;module.exports={project: {android: {sourceDir: './example/android',},ios: {project: './example/ios/example.xcodeproj',},},dependencies: {'react-native-slider': {
root,},},};

Note that in the future, once we add support to runAndroid and runIOS to use config (right now, they don't), it will make it easier.

For example, no --root flag will be needed to runAndroid to point it to the correct directory.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

Note: I wouldn't recommend doing React Native Slider setup in the future. Ideally, every project goes React Native Firebase way, having a separate package.json and independent package for an example project.

In that scenario, no custom configuration at all is needed. I still feel like custom root is a hack :(

@thymikee

thymikee commented Oct 11, 2019

Copy link
Copy Markdown
Member

Doesn't this configuration leak to the users if config is published?

I think it's about time to end this hack (because it clearly was one, I forgot how bad :D). The now seemingly correct approach there would be to include a real package.json with "react-native": "*" and "@react-native-community/slider": ".." and setup workspaces for less stuff to download

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

@thymikeeproject doesn't leak outside. dependencywould be read, but that would be on purpose :)

I actually just wrote this down and I am totally on board with your idea - I believe this is the best way to set it up and doesn't include this hack.

@thymikeethymikee changed the title Support autolinking in monorepofeat: support autolinking in monoreposOct 11, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

@thymikee we should have a generator for initing such a structure like React Native Firebase to work on. Once it's supported here by default, we can make it official and the only use-case supported.

@thymikee

Copy link
Copy Markdown
Member

@grabbou sounds like something that Bob could provide

@grabbou

Copy link
Copy Markdown
MemberAuthor

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

@Salakar

Copy link
Copy Markdown
Member

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

Thanks for checking!

@vomchik

vomchik commented Jan 31, 2020

Copy link
Copy Markdown

@grabbou Hi. Could you help me? Should both dependencies be added to package.json?
Currently, I'm using Lerna and run this command npx lerna booststap --hoist so all my deps hoist to root node_modules folder, but pod install can't find any react-native deps.
Maybe you have a repo with some examples.
Thanks.

@vongohren

Copy link
Copy Markdown

Yeah some examples of this would be nice, because Im still battling to no-hoist or not, to make sure that all is packaged right. Im following a couple of leads: https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417

But keep getting missing in the project on some files and even getting past that I get firebase issues: invertase/react-native-firebase#2122

So as the commentes in the medium says, is it still too early to do react native monorepo?

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

7 participants

@grabbou@tbergquist-godaddy@Titozzz@Salakar@thymikee@vomchik@vongohren
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat: support autolinking in monorepos - #768

Merged
thymikee merged 44 commits into
masterfrom
fix/paths
Oct 11, 2019
Merged

feat: support autolinking in monorepos#768
thymikee merged 44 commits into
masterfrom
fix/paths

Conversation

@grabbou

@grabbougrabbou commented Oct 3, 2019

Copy link
Copy Markdown
Member

Fixes#537
Fixes#717
Fixes#657 (path to .bin no longer hardcoded)
Fixes#633

The problem:

There are various issues complaining about weak or broken support for mono repositories, in regards to auto-linking. The workarounds are temporary and error-prone, being executed on top of a confusing resolution system.

Surprisingly, we already have quite a good support for mono-repo in the CLI. For example, we check for a package in node_modules up the directory tree. We also do that for resolving the configuration file.

In this PR, I am reworking some of the fundamental assumptions about the paths within auto-linking in order to make it support various project structures without any extra work.

Automatic mono repository support for automatic linking 😂

Summary:

Please look at the structure that I am working on. I believe this is the most common mono repo:

- /node_modules
- /react-native
- /react-native-firebase
- /packages
- /mobile
- /node_modules
- /react-native-webview
- /ios

This structure is based on the @brunolemos repository that he provided for reproduction purposes.

Please keep in mind the following two design decisions:

My main assumption is that all configuration relative to the project you are working on (metro configuration, CLI configuration) should be placed inside packages/mobile. I think scoping is better and is going to support multiple apps that co-exist within a single codebase.

Dependencies can live at different levels in the project hierarchy (hence I had to remove hardcoded root, which wouldn't make this work). This is important when there are multiple React Native apps living next to each other when a package cannot be hoisted.

Test:

When running pod install on iOS and Android, both react-native-webview and react-native-firebase are linked properly with their relative paths.

Status:

  • iOS
  • Android

Let me know if this structure is similar to what you are running and what you'd expect.

Changes

  • feat: deprecate root in auto-linking and introduce automatic detection of the project location
  • refactor: refactor PackageManager to not rely on a setProjectRoot being called in different places
  • refactor: limit dependency on an implicit process.cwd() being set by few functions
  • feat: introduce detachedFunction (internally) that runs without configuration (useful for init and other commands that don't need project context)

Comment threadpackages/platform-ios/native_modules.rb Outdated
Comment threadpackages/platform-ios/native_modules.rb
@tbergquist-godaddy

Copy link
Copy Markdown

I remember looking into brunolemos repository, but if I understand correctly, this setup works because of the react-native.config.js in the root pointing to the android project path?

And this would only work with one react-native app in your monorepo right? What if I want to have more react-native apps in the same monreopo?

@grabbou

Copy link
Copy Markdown
MemberAuthor

Speaking to @thymikee, we have decided to pursue using yarn and npx again and checking which versions are supported. Using them lets us make even fewer assumptions about the paths, which is making it better for monorepo.

Will resume later.

Comment threadpackages/platform-ios/native_modules.rb

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks too simple to be true :D so far I didn't find anything suspicious, but we need to test it thoroughly

Comment threadpackages/platform-ios/native_modules.rb
Comment threadpackages/platform-ios/native_modules.rb
We do not need root anymore. However, we still accept one argument (config) for testing purposes. Without this check, users that pass custom root would accidentially break their projects as CLI would take it as a config value.
@grabbougrabbou changed the title WIP: Support autolinking in monorepoSupport autolinking in monorepoOct 8, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

Added Android support. Feedback is welcome :)

@Titozzz

Copy link
Copy Markdown
Contributor

Great job :)

Comment threaddocs/autolinking.md
podspec_dir_path = Pathname.new(File.dirname(podspec_path))
project_root = Pathname.new(config_root)

relative_path = podspec_dir_path.relative_path_from project_root

@thymikeethymikeeOct 10, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we don't have custom root, I think instead of using project_root we need to use cwd, because that's we look for – a relative path from cwd (ios dir) to our native module (in node_modules or custom path). This fixes the Slider repo example for me:

Suggested change
relative_path=podspec_dir_path.relative_path_fromproject_root
relative_path=podspec_dir_path.relative_path_fromDir.pwd

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

projet_root is project_root = Pathname.new(config["project"]["ios"]["sourceDir"]) few lines earlier - so that's exactly the location of ios folder.

PWD might be not a good idea, see: #657 when running from root folder with --ios-directory flag

@Salakar

Salakar commented Oct 10, 2019

Copy link
Copy Markdown
Member

It might be good to test this on the React Native Firebase monorepo test project also (https://github.com/invertase/react-native-firebase/tree/master/tests), though I have no availability until probably end of next week 😫

@grabbou

Copy link
Copy Markdown
MemberAuthor

Will test React Native Slider and React Native Firebase before we ship it, just to be sure.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

React Native Slider isn't properly configured right now and this PR leveraged its issues. Running react-native config reveals that project.ios.sourceDir points to ios instead of example/ios.

The following configuration makes everything run smoothly:

constroot=__dirname;module.exports={project: {android: {sourceDir: './example/android',},ios: {project: './example/ios/example.xcodeproj',},},dependencies: {'react-native-slider': {
root,},},};

Note that in the future, once we add support to runAndroid and runIOS to use config (right now, they don't), it will make it easier.

For example, no --root flag will be needed to runAndroid to point it to the correct directory.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

Note: I wouldn't recommend doing React Native Slider setup in the future. Ideally, every project goes React Native Firebase way, having a separate package.json and independent package for an example project.

In that scenario, no custom configuration at all is needed. I still feel like custom root is a hack :(

@thymikee

thymikee commented Oct 11, 2019

Copy link
Copy Markdown
Member

Doesn't this configuration leak to the users if config is published?

I think it's about time to end this hack (because it clearly was one, I forgot how bad :D). The now seemingly correct approach there would be to include a real package.json with "react-native": "*" and "@react-native-community/slider": ".." and setup workspaces for less stuff to download

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

@thymikeeproject doesn't leak outside. dependencywould be read, but that would be on purpose :)

I actually just wrote this down and I am totally on board with your idea - I believe this is the best way to set it up and doesn't include this hack.

@thymikeethymikee changed the title Support autolinking in monorepofeat: support autolinking in monoreposOct 11, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

@thymikee we should have a generator for initing such a structure like React Native Firebase to work on. Once it's supported here by default, we can make it official and the only use-case supported.

@thymikee

Copy link
Copy Markdown
Member

@grabbou sounds like something that Bob could provide

@grabbou

Copy link
Copy Markdown
MemberAuthor

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

@Salakar

Copy link
Copy Markdown
Member

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

Thanks for checking!

@vomchik

vomchik commented Jan 31, 2020

Copy link
Copy Markdown

@grabbou Hi. Could you help me? Should both dependencies be added to package.json?
Currently, I'm using Lerna and run this command npx lerna booststap --hoist so all my deps hoist to root node_modules folder, but pod install can't find any react-native deps.
Maybe you have a repo with some examples.
Thanks.

@vongohren

Copy link
Copy Markdown

Yeah some examples of this would be nice, because Im still battling to no-hoist or not, to make sure that all is packaged right. Im following a couple of leads: https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417

But keep getting missing in the project on some files and even getting past that I get firebase issues: invertase/react-native-firebase#2122

So as the commentes in the medium says, is it still too early to do react native monorepo?

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

7 participants

@grabbou@tbergquist-godaddy@Titozzz@Salakar@thymikee@vomchik@vongohren
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

feat: support autolinking in monorepos - #768

Merged
thymikee merged 44 commits into
masterfrom
fix/paths
Oct 11, 2019
Merged

feat: support autolinking in monorepos#768
thymikee merged 44 commits into
masterfrom
fix/paths

Conversation

@grabbou

@grabbougrabbou commented Oct 3, 2019

Copy link
Copy Markdown
Member

Fixes#537
Fixes#717
Fixes#657 (path to .bin no longer hardcoded)
Fixes#633

The problem:

There are various issues complaining about weak or broken support for mono repositories, in regards to auto-linking. The workarounds are temporary and error-prone, being executed on top of a confusing resolution system.

Surprisingly, we already have quite a good support for mono-repo in the CLI. For example, we check for a package in node_modules up the directory tree. We also do that for resolving the configuration file.

In this PR, I am reworking some of the fundamental assumptions about the paths within auto-linking in order to make it support various project structures without any extra work.

Automatic mono repository support for automatic linking 😂

Summary:

Please look at the structure that I am working on. I believe this is the most common mono repo:

- /node_modules
- /react-native
- /react-native-firebase
- /packages
- /mobile
- /node_modules
- /react-native-webview
- /ios

This structure is based on the @brunolemos repository that he provided for reproduction purposes.

Please keep in mind the following two design decisions:

My main assumption is that all configuration relative to the project you are working on (metro configuration, CLI configuration) should be placed inside packages/mobile. I think scoping is better and is going to support multiple apps that co-exist within a single codebase.

Dependencies can live at different levels in the project hierarchy (hence I had to remove hardcoded root, which wouldn't make this work). This is important when there are multiple React Native apps living next to each other when a package cannot be hoisted.

Test:

When running pod install on iOS and Android, both react-native-webview and react-native-firebase are linked properly with their relative paths.

Status:

  • iOS
  • Android

Let me know if this structure is similar to what you are running and what you'd expect.

Changes

  • feat: deprecate root in auto-linking and introduce automatic detection of the project location
  • refactor: refactor PackageManager to not rely on a setProjectRoot being called in different places
  • refactor: limit dependency on an implicit process.cwd() being set by few functions
  • feat: introduce detachedFunction (internally) that runs without configuration (useful for init and other commands that don't need project context)

Comment threadpackages/platform-ios/native_modules.rb Outdated
Comment threadpackages/platform-ios/native_modules.rb
@tbergquist-godaddy

Copy link
Copy Markdown

I remember looking into brunolemos repository, but if I understand correctly, this setup works because of the react-native.config.js in the root pointing to the android project path?

And this would only work with one react-native app in your monorepo right? What if I want to have more react-native apps in the same monreopo?

@grabbou

Copy link
Copy Markdown
MemberAuthor

Speaking to @thymikee, we have decided to pursue using yarn and npx again and checking which versions are supported. Using them lets us make even fewer assumptions about the paths, which is making it better for monorepo.

Will resume later.

Comment threadpackages/platform-ios/native_modules.rb

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks too simple to be true :D so far I didn't find anything suspicious, but we need to test it thoroughly

Comment threadpackages/platform-ios/native_modules.rb
Comment threadpackages/platform-ios/native_modules.rb
We do not need root anymore. However, we still accept one argument (config) for testing purposes. Without this check, users that pass custom root would accidentially break their projects as CLI would take it as a config value.
@grabbougrabbou changed the title WIP: Support autolinking in monorepoSupport autolinking in monorepoOct 8, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

Added Android support. Feedback is welcome :)

@Titozzz

Copy link
Copy Markdown
Contributor

Great job :)

Comment threaddocs/autolinking.md
podspec_dir_path = Pathname.new(File.dirname(podspec_path))
project_root = Pathname.new(config_root)

relative_path = podspec_dir_path.relative_path_from project_root

@thymikeethymikeeOct 10, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we don't have custom root, I think instead of using project_root we need to use cwd, because that's we look for – a relative path from cwd (ios dir) to our native module (in node_modules or custom path). This fixes the Slider repo example for me:

Suggested change
relative_path=podspec_dir_path.relative_path_fromproject_root
relative_path=podspec_dir_path.relative_path_fromDir.pwd

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

projet_root is project_root = Pathname.new(config["project"]["ios"]["sourceDir"]) few lines earlier - so that's exactly the location of ios folder.

PWD might be not a good idea, see: #657 when running from root folder with --ios-directory flag

@Salakar

Salakar commented Oct 10, 2019

Copy link
Copy Markdown
Member

It might be good to test this on the React Native Firebase monorepo test project also (https://github.com/invertase/react-native-firebase/tree/master/tests), though I have no availability until probably end of next week 😫

@grabbou

Copy link
Copy Markdown
MemberAuthor

Will test React Native Slider and React Native Firebase before we ship it, just to be sure.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

React Native Slider isn't properly configured right now and this PR leveraged its issues. Running react-native config reveals that project.ios.sourceDir points to ios instead of example/ios.

The following configuration makes everything run smoothly:

constroot=__dirname;module.exports={project: {android: {sourceDir: './example/android',},ios: {project: './example/ios/example.xcodeproj',},},dependencies: {'react-native-slider': {
root,},},};

Note that in the future, once we add support to runAndroid and runIOS to use config (right now, they don't), it will make it easier.

For example, no --root flag will be needed to runAndroid to point it to the correct directory.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

Note: I wouldn't recommend doing React Native Slider setup in the future. Ideally, every project goes React Native Firebase way, having a separate package.json and independent package for an example project.

In that scenario, no custom configuration at all is needed. I still feel like custom root is a hack :(

@thymikee

thymikee commented Oct 11, 2019

Copy link
Copy Markdown
Member

Doesn't this configuration leak to the users if config is published?

I think it's about time to end this hack (because it clearly was one, I forgot how bad :D). The now seemingly correct approach there would be to include a real package.json with "react-native": "*" and "@react-native-community/slider": ".." and setup workspaces for less stuff to download

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

@thymikeeproject doesn't leak outside. dependencywould be read, but that would be on purpose :)

I actually just wrote this down and I am totally on board with your idea - I believe this is the best way to set it up and doesn't include this hack.

@thymikeethymikee changed the title Support autolinking in monorepofeat: support autolinking in monoreposOct 11, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

@thymikee we should have a generator for initing such a structure like React Native Firebase to work on. Once it's supported here by default, we can make it official and the only use-case supported.

@thymikee

Copy link
Copy Markdown
Member

@grabbou sounds like something that Bob could provide

@grabbou

Copy link
Copy Markdown
MemberAuthor

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

@Salakar

Copy link
Copy Markdown
Member

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

Thanks for checking!

@vomchik

vomchik commented Jan 31, 2020

Copy link
Copy Markdown

@grabbou Hi. Could you help me? Should both dependencies be added to package.json?
Currently, I'm using Lerna and run this command npx lerna booststap --hoist so all my deps hoist to root node_modules folder, but pod install can't find any react-native deps.
Maybe you have a repo with some examples.
Thanks.

@vongohren

Copy link
Copy Markdown

Yeah some examples of this would be nice, because Im still battling to no-hoist or not, to make sure that all is packaged right. Im following a couple of leads: https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417

But keep getting missing in the project on some files and even getting past that I get firebase issues: invertase/react-native-firebase#2122

So as the commentes in the medium says, is it still too early to do react native monorepo?

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

7 participants

@grabbou@tbergquist-godaddy@Titozzz@Salakar@thymikee@vomchik@vongohren
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat: support autolinking in monorepos - #768

Merged
thymikee merged 44 commits into
masterfrom
fix/paths
Oct 11, 2019
Merged

feat: support autolinking in monorepos#768
thymikee merged 44 commits into
masterfrom
fix/paths

Conversation

@grabbou

@grabbougrabbou commented Oct 3, 2019

Copy link
Copy Markdown
Member

Fixes#537
Fixes#717
Fixes#657 (path to .bin no longer hardcoded)
Fixes#633

The problem:

There are various issues complaining about weak or broken support for mono repositories, in regards to auto-linking. The workarounds are temporary and error-prone, being executed on top of a confusing resolution system.

Surprisingly, we already have quite a good support for mono-repo in the CLI. For example, we check for a package in node_modules up the directory tree. We also do that for resolving the configuration file.

In this PR, I am reworking some of the fundamental assumptions about the paths within auto-linking in order to make it support various project structures without any extra work.

Automatic mono repository support for automatic linking 😂

Summary:

Please look at the structure that I am working on. I believe this is the most common mono repo:

- /node_modules
- /react-native
- /react-native-firebase
- /packages
- /mobile
- /node_modules
- /react-native-webview
- /ios

This structure is based on the @brunolemos repository that he provided for reproduction purposes.

Please keep in mind the following two design decisions:

My main assumption is that all configuration relative to the project you are working on (metro configuration, CLI configuration) should be placed inside packages/mobile. I think scoping is better and is going to support multiple apps that co-exist within a single codebase.

Dependencies can live at different levels in the project hierarchy (hence I had to remove hardcoded root, which wouldn't make this work). This is important when there are multiple React Native apps living next to each other when a package cannot be hoisted.

Test:

When running pod install on iOS and Android, both react-native-webview and react-native-firebase are linked properly with their relative paths.

Status:

  • iOS
  • Android

Let me know if this structure is similar to what you are running and what you'd expect.

Changes

  • feat: deprecate root in auto-linking and introduce automatic detection of the project location
  • refactor: refactor PackageManager to not rely on a setProjectRoot being called in different places
  • refactor: limit dependency on an implicit process.cwd() being set by few functions
  • feat: introduce detachedFunction (internally) that runs without configuration (useful for init and other commands that don't need project context)

Comment threadpackages/platform-ios/native_modules.rb Outdated
Comment threadpackages/platform-ios/native_modules.rb
@tbergquist-godaddy

Copy link
Copy Markdown

I remember looking into brunolemos repository, but if I understand correctly, this setup works because of the react-native.config.js in the root pointing to the android project path?

And this would only work with one react-native app in your monorepo right? What if I want to have more react-native apps in the same monreopo?

@grabbou

Copy link
Copy Markdown
MemberAuthor

Speaking to @thymikee, we have decided to pursue using yarn and npx again and checking which versions are supported. Using them lets us make even fewer assumptions about the paths, which is making it better for monorepo.

Will resume later.

Comment threadpackages/platform-ios/native_modules.rb

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks too simple to be true :D so far I didn't find anything suspicious, but we need to test it thoroughly

Comment threadpackages/platform-ios/native_modules.rb
Comment threadpackages/platform-ios/native_modules.rb
We do not need root anymore. However, we still accept one argument (config) for testing purposes. Without this check, users that pass custom root would accidentially break their projects as CLI would take it as a config value.
@grabbougrabbou changed the title WIP: Support autolinking in monorepoSupport autolinking in monorepoOct 8, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

Added Android support. Feedback is welcome :)

@Titozzz

Copy link
Copy Markdown
Contributor

Great job :)

Comment threaddocs/autolinking.md
podspec_dir_path = Pathname.new(File.dirname(podspec_path))
project_root = Pathname.new(config_root)

relative_path = podspec_dir_path.relative_path_from project_root

@thymikeethymikeeOct 10, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we don't have custom root, I think instead of using project_root we need to use cwd, because that's we look for – a relative path from cwd (ios dir) to our native module (in node_modules or custom path). This fixes the Slider repo example for me:

Suggested change
relative_path=podspec_dir_path.relative_path_fromproject_root
relative_path=podspec_dir_path.relative_path_fromDir.pwd

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

projet_root is project_root = Pathname.new(config["project"]["ios"]["sourceDir"]) few lines earlier - so that's exactly the location of ios folder.

PWD might be not a good idea, see: #657 when running from root folder with --ios-directory flag

@Salakar

Salakar commented Oct 10, 2019

Copy link
Copy Markdown
Member

It might be good to test this on the React Native Firebase monorepo test project also (https://github.com/invertase/react-native-firebase/tree/master/tests), though I have no availability until probably end of next week 😫

@grabbou

Copy link
Copy Markdown
MemberAuthor

Will test React Native Slider and React Native Firebase before we ship it, just to be sure.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

React Native Slider isn't properly configured right now and this PR leveraged its issues. Running react-native config reveals that project.ios.sourceDir points to ios instead of example/ios.

The following configuration makes everything run smoothly:

constroot=__dirname;module.exports={project: {android: {sourceDir: './example/android',},ios: {project: './example/ios/example.xcodeproj',},},dependencies: {'react-native-slider': {
root,},},};

Note that in the future, once we add support to runAndroid and runIOS to use config (right now, they don't), it will make it easier.

For example, no --root flag will be needed to runAndroid to point it to the correct directory.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

Note: I wouldn't recommend doing React Native Slider setup in the future. Ideally, every project goes React Native Firebase way, having a separate package.json and independent package for an example project.

In that scenario, no custom configuration at all is needed. I still feel like custom root is a hack :(

@thymikee

thymikee commented Oct 11, 2019

Copy link
Copy Markdown
Member

Doesn't this configuration leak to the users if config is published?

I think it's about time to end this hack (because it clearly was one, I forgot how bad :D). The now seemingly correct approach there would be to include a real package.json with "react-native": "*" and "@react-native-community/slider": ".." and setup workspaces for less stuff to download

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

@thymikeeproject doesn't leak outside. dependencywould be read, but that would be on purpose :)

I actually just wrote this down and I am totally on board with your idea - I believe this is the best way to set it up and doesn't include this hack.

@thymikeethymikee changed the title Support autolinking in monorepofeat: support autolinking in monoreposOct 11, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

@thymikee we should have a generator for initing such a structure like React Native Firebase to work on. Once it's supported here by default, we can make it official and the only use-case supported.

@thymikee

Copy link
Copy Markdown
Member

@grabbou sounds like something that Bob could provide

@grabbou

Copy link
Copy Markdown
MemberAuthor

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

@Salakar

Copy link
Copy Markdown
Member

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

Thanks for checking!

@vomchik

vomchik commented Jan 31, 2020

Copy link
Copy Markdown

@grabbou Hi. Could you help me? Should both dependencies be added to package.json?
Currently, I'm using Lerna and run this command npx lerna booststap --hoist so all my deps hoist to root node_modules folder, but pod install can't find any react-native deps.
Maybe you have a repo with some examples.
Thanks.

@vongohren

Copy link
Copy Markdown

Yeah some examples of this would be nice, because Im still battling to no-hoist or not, to make sure that all is packaged right. Im following a couple of leads: https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417

But keep getting missing in the project on some files and even getting past that I get firebase issues: invertase/react-native-firebase#2122

So as the commentes in the medium says, is it still too early to do react native monorepo?

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

7 participants

@grabbou@tbergquist-godaddy@Titozzz@Salakar@thymikee@vomchik@vongohren
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat: support autolinking in monorepos - #768

Merged
thymikee merged 44 commits into
masterfrom
fix/paths
Oct 11, 2019
Merged

feat: support autolinking in monorepos#768
thymikee merged 44 commits into
masterfrom
fix/paths

Conversation

@grabbou

@grabbougrabbou commented Oct 3, 2019

Copy link
Copy Markdown
Member

Fixes#537
Fixes#717
Fixes#657 (path to .bin no longer hardcoded)
Fixes#633

The problem:

There are various issues complaining about weak or broken support for mono repositories, in regards to auto-linking. The workarounds are temporary and error-prone, being executed on top of a confusing resolution system.

Surprisingly, we already have quite a good support for mono-repo in the CLI. For example, we check for a package in node_modules up the directory tree. We also do that for resolving the configuration file.

In this PR, I am reworking some of the fundamental assumptions about the paths within auto-linking in order to make it support various project structures without any extra work.

Automatic mono repository support for automatic linking 😂

Summary:

Please look at the structure that I am working on. I believe this is the most common mono repo:

- /node_modules
- /react-native
- /react-native-firebase
- /packages
- /mobile
- /node_modules
- /react-native-webview
- /ios

This structure is based on the @brunolemos repository that he provided for reproduction purposes.

Please keep in mind the following two design decisions:

My main assumption is that all configuration relative to the project you are working on (metro configuration, CLI configuration) should be placed inside packages/mobile. I think scoping is better and is going to support multiple apps that co-exist within a single codebase.

Dependencies can live at different levels in the project hierarchy (hence I had to remove hardcoded root, which wouldn't make this work). This is important when there are multiple React Native apps living next to each other when a package cannot be hoisted.

Test:

When running pod install on iOS and Android, both react-native-webview and react-native-firebase are linked properly with their relative paths.

Status:

  • iOS
  • Android

Let me know if this structure is similar to what you are running and what you'd expect.

Changes

  • feat: deprecate root in auto-linking and introduce automatic detection of the project location
  • refactor: refactor PackageManager to not rely on a setProjectRoot being called in different places
  • refactor: limit dependency on an implicit process.cwd() being set by few functions
  • feat: introduce detachedFunction (internally) that runs without configuration (useful for init and other commands that don't need project context)

Comment threadpackages/platform-ios/native_modules.rb Outdated
Comment threadpackages/platform-ios/native_modules.rb
@tbergquist-godaddy

Copy link
Copy Markdown

I remember looking into brunolemos repository, but if I understand correctly, this setup works because of the react-native.config.js in the root pointing to the android project path?

And this would only work with one react-native app in your monorepo right? What if I want to have more react-native apps in the same monreopo?

@grabbou

Copy link
Copy Markdown
MemberAuthor

Speaking to @thymikee, we have decided to pursue using yarn and npx again and checking which versions are supported. Using them lets us make even fewer assumptions about the paths, which is making it better for monorepo.

Will resume later.

Comment threadpackages/platform-ios/native_modules.rb

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks too simple to be true :D so far I didn't find anything suspicious, but we need to test it thoroughly

Comment threadpackages/platform-ios/native_modules.rb
Comment threadpackages/platform-ios/native_modules.rb
We do not need root anymore. However, we still accept one argument (config) for testing purposes. Without this check, users that pass custom root would accidentially break their projects as CLI would take it as a config value.
@grabbougrabbou changed the title WIP: Support autolinking in monorepoSupport autolinking in monorepoOct 8, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

Added Android support. Feedback is welcome :)

@Titozzz

Copy link
Copy Markdown
Contributor

Great job :)

Comment threaddocs/autolinking.md
podspec_dir_path = Pathname.new(File.dirname(podspec_path))
project_root = Pathname.new(config_root)

relative_path = podspec_dir_path.relative_path_from project_root

@thymikeethymikeeOct 10, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we don't have custom root, I think instead of using project_root we need to use cwd, because that's we look for – a relative path from cwd (ios dir) to our native module (in node_modules or custom path). This fixes the Slider repo example for me:

Suggested change
relative_path=podspec_dir_path.relative_path_fromproject_root
relative_path=podspec_dir_path.relative_path_fromDir.pwd

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

projet_root is project_root = Pathname.new(config["project"]["ios"]["sourceDir"]) few lines earlier - so that's exactly the location of ios folder.

PWD might be not a good idea, see: #657 when running from root folder with --ios-directory flag

@Salakar

Salakar commented Oct 10, 2019

Copy link
Copy Markdown
Member

It might be good to test this on the React Native Firebase monorepo test project also (https://github.com/invertase/react-native-firebase/tree/master/tests), though I have no availability until probably end of next week 😫

@grabbou

Copy link
Copy Markdown
MemberAuthor

Will test React Native Slider and React Native Firebase before we ship it, just to be sure.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

React Native Slider isn't properly configured right now and this PR leveraged its issues. Running react-native config reveals that project.ios.sourceDir points to ios instead of example/ios.

The following configuration makes everything run smoothly:

constroot=__dirname;module.exports={project: {android: {sourceDir: './example/android',},ios: {project: './example/ios/example.xcodeproj',},},dependencies: {'react-native-slider': {
root,},},};

Note that in the future, once we add support to runAndroid and runIOS to use config (right now, they don't), it will make it easier.

For example, no --root flag will be needed to runAndroid to point it to the correct directory.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

Note: I wouldn't recommend doing React Native Slider setup in the future. Ideally, every project goes React Native Firebase way, having a separate package.json and independent package for an example project.

In that scenario, no custom configuration at all is needed. I still feel like custom root is a hack :(

@thymikee

thymikee commented Oct 11, 2019

Copy link
Copy Markdown
Member

Doesn't this configuration leak to the users if config is published?

I think it's about time to end this hack (because it clearly was one, I forgot how bad :D). The now seemingly correct approach there would be to include a real package.json with "react-native": "*" and "@react-native-community/slider": ".." and setup workspaces for less stuff to download

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

@thymikeeproject doesn't leak outside. dependencywould be read, but that would be on purpose :)

I actually just wrote this down and I am totally on board with your idea - I believe this is the best way to set it up and doesn't include this hack.

@thymikeethymikee changed the title Support autolinking in monorepofeat: support autolinking in monoreposOct 11, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

@thymikee we should have a generator for initing such a structure like React Native Firebase to work on. Once it's supported here by default, we can make it official and the only use-case supported.

@thymikee

Copy link
Copy Markdown
Member

@grabbou sounds like something that Bob could provide

@grabbou

Copy link
Copy Markdown
MemberAuthor

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

@Salakar

Copy link
Copy Markdown
Member

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

Thanks for checking!

@vomchik

vomchik commented Jan 31, 2020

Copy link
Copy Markdown

@grabbou Hi. Could you help me? Should both dependencies be added to package.json?
Currently, I'm using Lerna and run this command npx lerna booststap --hoist so all my deps hoist to root node_modules folder, but pod install can't find any react-native deps.
Maybe you have a repo with some examples.
Thanks.

@vongohren

Copy link
Copy Markdown

Yeah some examples of this would be nice, because Im still battling to no-hoist or not, to make sure that all is packaged right. Im following a couple of leads: https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417

But keep getting missing in the project on some files and even getting past that I get firebase issues: invertase/react-native-firebase#2122

So as the commentes in the medium says, is it still too early to do react native monorepo?

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

7 participants

@grabbou@tbergquist-godaddy@Titozzz@Salakar@thymikee@vomchik@vongohren
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

feat: support autolinking in monorepos - #768

Merged
thymikee merged 44 commits into
masterfrom
fix/paths
Oct 11, 2019
Merged

feat: support autolinking in monorepos#768
thymikee merged 44 commits into
masterfrom
fix/paths

Conversation

@grabbou

@grabbougrabbou commented Oct 3, 2019

Copy link
Copy Markdown
Member

Fixes#537
Fixes#717
Fixes#657 (path to .bin no longer hardcoded)
Fixes#633

The problem:

There are various issues complaining about weak or broken support for mono repositories, in regards to auto-linking. The workarounds are temporary and error-prone, being executed on top of a confusing resolution system.

Surprisingly, we already have quite a good support for mono-repo in the CLI. For example, we check for a package in node_modules up the directory tree. We also do that for resolving the configuration file.

In this PR, I am reworking some of the fundamental assumptions about the paths within auto-linking in order to make it support various project structures without any extra work.

Automatic mono repository support for automatic linking 😂

Summary:

Please look at the structure that I am working on. I believe this is the most common mono repo:

- /node_modules
- /react-native
- /react-native-firebase
- /packages
- /mobile
- /node_modules
- /react-native-webview
- /ios

This structure is based on the @brunolemos repository that he provided for reproduction purposes.

Please keep in mind the following two design decisions:

My main assumption is that all configuration relative to the project you are working on (metro configuration, CLI configuration) should be placed inside packages/mobile. I think scoping is better and is going to support multiple apps that co-exist within a single codebase.

Dependencies can live at different levels in the project hierarchy (hence I had to remove hardcoded root, which wouldn't make this work). This is important when there are multiple React Native apps living next to each other when a package cannot be hoisted.

Test:

When running pod install on iOS and Android, both react-native-webview and react-native-firebase are linked properly with their relative paths.

Status:

  • iOS
  • Android

Let me know if this structure is similar to what you are running and what you'd expect.

Changes

  • feat: deprecate root in auto-linking and introduce automatic detection of the project location
  • refactor: refactor PackageManager to not rely on a setProjectRoot being called in different places
  • refactor: limit dependency on an implicit process.cwd() being set by few functions
  • feat: introduce detachedFunction (internally) that runs without configuration (useful for init and other commands that don't need project context)

Comment threadpackages/platform-ios/native_modules.rb Outdated
Comment threadpackages/platform-ios/native_modules.rb
@tbergquist-godaddy

Copy link
Copy Markdown

I remember looking into brunolemos repository, but if I understand correctly, this setup works because of the react-native.config.js in the root pointing to the android project path?

And this would only work with one react-native app in your monorepo right? What if I want to have more react-native apps in the same monreopo?

@grabbou

Copy link
Copy Markdown
MemberAuthor

Speaking to @thymikee, we have decided to pursue using yarn and npx again and checking which versions are supported. Using them lets us make even fewer assumptions about the paths, which is making it better for monorepo.

Will resume later.

Comment threadpackages/platform-ios/native_modules.rb

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks too simple to be true :D so far I didn't find anything suspicious, but we need to test it thoroughly

Comment threadpackages/platform-ios/native_modules.rb
Comment threadpackages/platform-ios/native_modules.rb
We do not need root anymore. However, we still accept one argument (config) for testing purposes. Without this check, users that pass custom root would accidentially break their projects as CLI would take it as a config value.
@grabbougrabbou changed the title WIP: Support autolinking in monorepoSupport autolinking in monorepoOct 8, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

Added Android support. Feedback is welcome :)

@Titozzz

Copy link
Copy Markdown
Contributor

Great job :)

Comment threaddocs/autolinking.md
podspec_dir_path = Pathname.new(File.dirname(podspec_path))
project_root = Pathname.new(config_root)

relative_path = podspec_dir_path.relative_path_from project_root

@thymikeethymikeeOct 10, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we don't have custom root, I think instead of using project_root we need to use cwd, because that's we look for – a relative path from cwd (ios dir) to our native module (in node_modules or custom path). This fixes the Slider repo example for me:

Suggested change
relative_path=podspec_dir_path.relative_path_fromproject_root
relative_path=podspec_dir_path.relative_path_fromDir.pwd

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

projet_root is project_root = Pathname.new(config["project"]["ios"]["sourceDir"]) few lines earlier - so that's exactly the location of ios folder.

PWD might be not a good idea, see: #657 when running from root folder with --ios-directory flag

@Salakar

Salakar commented Oct 10, 2019

Copy link
Copy Markdown
Member

It might be good to test this on the React Native Firebase monorepo test project also (https://github.com/invertase/react-native-firebase/tree/master/tests), though I have no availability until probably end of next week 😫

@grabbou

Copy link
Copy Markdown
MemberAuthor

Will test React Native Slider and React Native Firebase before we ship it, just to be sure.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

React Native Slider isn't properly configured right now and this PR leveraged its issues. Running react-native config reveals that project.ios.sourceDir points to ios instead of example/ios.

The following configuration makes everything run smoothly:

constroot=__dirname;module.exports={project: {android: {sourceDir: './example/android',},ios: {project: './example/ios/example.xcodeproj',},},dependencies: {'react-native-slider': {
root,},},};

Note that in the future, once we add support to runAndroid and runIOS to use config (right now, they don't), it will make it easier.

For example, no --root flag will be needed to runAndroid to point it to the correct directory.

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

Note: I wouldn't recommend doing React Native Slider setup in the future. Ideally, every project goes React Native Firebase way, having a separate package.json and independent package for an example project.

In that scenario, no custom configuration at all is needed. I still feel like custom root is a hack :(

@thymikee

thymikee commented Oct 11, 2019

Copy link
Copy Markdown
Member

Doesn't this configuration leak to the users if config is published?

I think it's about time to end this hack (because it clearly was one, I forgot how bad :D). The now seemingly correct approach there would be to include a real package.json with "react-native": "*" and "@react-native-community/slider": ".." and setup workspaces for less stuff to download

@grabbou

grabbou commented Oct 11, 2019

Copy link
Copy Markdown
MemberAuthor

@thymikeeproject doesn't leak outside. dependencywould be read, but that would be on purpose :)

I actually just wrote this down and I am totally on board with your idea - I believe this is the best way to set it up and doesn't include this hack.

@thymikeethymikee changed the title Support autolinking in monorepofeat: support autolinking in monoreposOct 11, 2019
@grabbou

Copy link
Copy Markdown
MemberAuthor

@thymikee we should have a generator for initing such a structure like React Native Firebase to work on. Once it's supported here by default, we can make it official and the only use-case supported.

@thymikee

Copy link
Copy Markdown
Member

@grabbou sounds like something that Bob could provide

@grabbou

Copy link
Copy Markdown
MemberAuthor

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

@Salakar

Copy link
Copy Markdown
Member

React Native Firebase works w/o issues with this PR @Salakar. Great project set up by the way!

Thanks for checking!

@vomchik

vomchik commented Jan 31, 2020

Copy link
Copy Markdown

@grabbou Hi. Could you help me? Should both dependencies be added to package.json?
Currently, I'm using Lerna and run this command npx lerna booststap --hoist so all my deps hoist to root node_modules folder, but pod install can't find any react-native deps.
Maybe you have a repo with some examples.
Thanks.

@vongohren

Copy link
Copy Markdown

Yeah some examples of this would be nice, because Im still battling to no-hoist or not, to make sure that all is packaged right. Im following a couple of leads: https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417

But keep getting missing in the project on some files and even getting past that I get firebase issues: invertase/react-native-firebase#2122

So as the commentes in the medium says, is it still too early to do react native monorepo?

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

7 participants

@grabbou@tbergquist-godaddy@Titozzz@Salakar@thymikee@vomchik@vongohren