Move all metro logic and commands into a metro package - #1447

Merged
grabbou merged 19 commits into
react-native-community:masterfrom
afoxman:cli-bundle-api
Oct 4, 2021
Merged

Move all metro logic and commands into a metro package#1447
grabbou merged 19 commits into
react-native-community:masterfrom
afoxman:cli-bundle-api

Conversation

@afoxman

@afoxmanafoxman commented Jul 15, 2021

Copy link
Copy Markdown
Contributor

Summary:

I am working on a project where I need to do Metro bundling using the Metro APIs. The CLI has really useful Metro config and Metro bundling logic that I want to use, but it's tied up and not accessible.

This PR move the Metro configuration and bundling logic into separate packages, making them available for my project and to other external users.

Test Plan:

Code is moving, with minimal changes, including tests. Verify that the build passes and that all tests pass.

Manually verify that bundling works on a sample app. Diffed bundles using existing release of CLI vs this PR. Bundle size and md5 hashes were identical.

@afoxmanafoxman mentioned this pull request Jul 15, 2021
Closed
@grabbou

grabbou commented Jul 15, 2021•
edited
Loading

Copy link
Copy Markdown
Member

I love this! It's something I wanted to do for a really really long time!

Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.

The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.

CC: @tido64

@afoxmanafoxman changed the title Move bundle and metro config logic into separate packagesMove all metro logic and commands into a metro packageJul 16, 2021
afoxman
afoxman commented Jul 16, 2021
View reviewed changes
Comment threadpackages/cli/src/tools/config/resolveNodeModuleDir.ts
@afoxman

afoxman commented Jul 16, 2021

Copy link
Copy Markdown
ContributorAuthor

I love this! It's something I wanted to do for a really really long time!

Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.

The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.

CC: @tido64

Happy to help! This turned into a big PR, so you have a lot of reading to do :). The metro package now has all metro commands (start, bundle, and ramBundle) as well as the metro config/asset code.

I had to move a few "tools" from cli to cli-tools, so I could use them in metro. That made things a bit complicated and added to the PR.

@grabbou

grabbou commented Jul 16, 2021

Copy link
Copy Markdown
Member

No worries, that's something I've been waiting for quite some time to see, so I am more than happy to review it!

@grabbou

grabbou commented Jul 16, 2021

Copy link
Copy Markdown
Member

In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.

@afoxman

afoxman commented Jul 16, 2021

Copy link
Copy Markdown
ContributorAuthor

In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.

That sounds good. We should sync up on what you have in mind, and how I can help. Sent you a friend request on Discord to work out the details in DMs.

@afoxman

afoxman commented Sep 3, 2021

Copy link
Copy Markdown
ContributorAuthor

@thymikee@grabbou Hi folks - checking in to see when you might merge this, or if you'd like any further changes?

@thymikee

thymikee commented Sep 13, 2021

Copy link
Copy Markdown
Member

I'm sure @grabbou will prioritize this the next time he works on this lib

@grabbou

grabbou commented Sep 13, 2021

Copy link
Copy Markdown
Member

Yes, I am working on this this week. Will be reviewed on Wednesday.

@grabbou

grabbou commented Sep 16, 2021

Copy link
Copy Markdown
Member

Update: I am still in progress with this one, expected update tomorrow

grabbou
grabbou requested changes Sep 20, 2021
View reviewed changes

@grabbougrabbou 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.

Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.

TL;DR:

  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)

I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!

Comment threadpackages/metro/src/bundle/buildBundle.ts Outdated
Comment threadpackages/metro/src/config/index.ts Outdated
Comment threadpackages/metro/src/index.ts Outdated
Comment threadpackages/metro/src/start/index.ts Outdated
Comment threadpackages/cli/package.json Outdated
@afoxman

afoxman commented Sep 22, 2021•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.

TL;DR:

  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)

I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!

I think I've addressed all these points in my latest push. Use default exports. And all public API exports are now explicit, and only what @react-native-community/cli needs to consume (the command objects) and what I need to consume in @rnx-kit/* packages.

@afoxman

afoxman commented Sep 22, 2021•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

Looks like an e2e test failed.

I can't log into circleci to find out details. It wants too much access to my Microsoft github account, so I can't sign in.

When I run 'yarn test' and 'yarn test:ci:e2e' (the command circleci runs), I get success. If I broke something, I'll need help diagnosing.

In the meantime, I tried merging the upstream master, to kick off another build to see if it fails with the latest commits.

grabbou
grabbou reviewed Sep 27, 2021
View reviewed changes
Comment threadpackages/cli/src/commands/index.ts Outdated
startCommand as start,
bundleCommand as bundle,
ramBundleCommand as ramBundle,
} from '@react-native-community/cli-plugin-metro';

@grabbougrabbouSep 27, 2021

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.

In the future, we can remove this when this plugin becomes direct React Native dependency.

Here's a snippet:
https://github.com/facebook/react-native/blob/main/react-native.config.js#L16

I believe it should simply say metro.commands, but this is to be decided on the planning meeting.

@grabbou

grabbou commented Sep 27, 2021

Copy link
Copy Markdown
Member

I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.

Please let me know if you're happy with how it looks and whether the public API satisfies your use case.

afoxman
afoxman commented Sep 27, 2021
View reviewed changes
Comment threadpackages/cli-plugin-metro/src/index.ts Outdated
export {
bundleCommand,
ramBundleCommand,
buildBundleWithConfig,

@afoxmanafoxmanSep 27, 2021

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I need buildBundleWithConfig to be publicly exported.

@afoxmanafoxmanSep 27, 2021

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Added (along with CommandLineArgs type) in my latest push

@afoxman

afoxman commented Sep 27, 2021

Copy link
Copy Markdown
ContributorAuthor

I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.

Please let me know if you're happy with how it looks and whether the public API satisfies your use case.

Everything looks ok to me. One function export and a type were removed during the shuffle, so I added them back in. I need to be able to call buildBundleWithConfig(...) and so I need it as well as its input type CommandLineArgs.

@grabbou

grabbou commented Oct 4, 2021

Copy link
Copy Markdown
Member

LGTM.

@grabbou

grabbou commented Oct 4, 2021

Copy link
Copy Markdown
Member

The CI failure looks unrelated. I will move forward and merge this PR.

@grabbou
grabbou merged commit 0993f62 into react-native-community:masterOct 4, 2021
@tido64tido64 mentioned this pull request Aug 8, 2023
Closed
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@grabbougrabbougrabbou requested changes
@EsemesekEsemesekAwaiting requested review from Esemesek
@thymikeethymikeeAwaiting requested review from thymikee

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@afoxman@grabbou@thymikee
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
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;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} 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
Move all metro logic and commands into a metro package - #1447
Merged
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Oct 4, 2021
Merged
Move all metro logic and commands into a metro package#1447
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Conversation
@afoxman
@afoxmanafoxman
commented
Jul 15, 2021

Copy link


Copy Markdown

Contributor
Summary:
I am working on a project where I need to do Metro bundling using the Metro APIs. The CLI has really useful Metro config and Metro bundling logic that I want to use, but it's tied up and not accessible.
This PR move the Metro configuration and bundling logic into separate packages, making them available for my project and to other external users.
Test Plan:
Code is moving, with minimal changes, including tests. Verify that the build passes and that all tests pass.
Manually verify that bundling works on a sample app. Diffed bundles using existing release of CLI vs this PR. Bundle size and md5 hashes were identical.
@afoxmanafoxman
mentioned this pull request
Jul 15, 2021

Closed

@grabbou
grabbou
commented
Jul 15, 2021•

edited

Loading

Copy link


Copy Markdown

Member
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
@afoxmanafoxman
changed the title
Move bundle and metro config logic into separate packagesMove all metro logic and commands into a metro packageJul 16, 2021
afoxman
afoxman
commented
Jul 16, 2021
View reviewed changes
Comment threadpackages/cli/src/tools/config/resolveNodeModuleDir.ts
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
Happy to help! This turned into a big PR, so you have a lot of reading to do :). The metro package now has all metro commands (start, bundle, and ramBundle) as well as the metro config/asset code.
I had to move a few "tools" from cli to cli-tools, so I could use them in metro. That made things a bit complicated and added to the PR.
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
No worries, that's something I've been waiting for quite some time to see, so I am more than happy to review it!
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
That sounds good. We should sync up on what you have in mind, and how I can help. Sent you a friend request on Discord to work out the details in DMs.
@afoxman
afoxman
commented
Sep 3, 2021

Copy link


Copy Markdown

ContributorAuthor
@thymikee@grabbou Hi folks - checking in to see when you might merge this, or if you'd like any further changes?
@thymikee
thymikee
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
I'm sure @grabbou will prioritize this the next time he works on this lib
@grabbou
grabbou
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
Yes, I am working on this this week. Will be reviewed on Wednesday.
@grabbou
grabbou
commented
Sep 16, 2021

Copy link


Copy Markdown

Member
Update: I am still in progress with this one, expected update tomorrow
grabbou
grabbou
requested changes
Sep 20, 2021
View reviewed changes
@grabbougrabbou
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.

Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
Comment threadpackages/metro/src/bundle/buildBundle.ts
Outdated

Comment threadpackages/metro/src/config/index.ts
Outdated

Comment threadpackages/metro/src/index.ts
Outdated

Comment threadpackages/metro/src/start/index.ts
Outdated

Comment threadpackages/cli/package.json
Outdated

@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
I think I've addressed all these points in my latest push. Use default exports. And all public API exports are now explicit, and only what @react-native-community/cli needs to consume (the command objects) and what I need to consume in @rnx-kit/* packages.
@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Looks like an e2e test failed.
I can't log into circleci to find out details. It wants too much access to my Microsoft github account, so I can't sign in.
When I run 'yarn test' and 'yarn test:ci:e2e' (the command circleci runs), I get success. If I broke something, I'll need help diagnosing.
In the meantime, I tried merging the upstream master, to kick off another build to see if it fails with the latest commits.
grabbou
grabbou
reviewed
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli/src/commands/index.ts
Outdated

 startCommand as start,
 bundleCommand as bundle,
 ramBundleCommand as ramBundle,
} from '@react-native-community/cli-plugin-metro';
@grabbougrabbouSep 27, 2021

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.

In the future, we can remove this when this plugin becomes direct React Native dependency.
Here's a snippet:
https://github.com/facebook/react-native/blob/main/react-native.config.js#L16
I believe it should simply say metro.commands, but this is to be decided on the planning meeting.
@grabbou
grabbou
commented
Sep 27, 2021

Copy link


Copy Markdown

Member
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
afoxman
afoxman
commented
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli-plugin-metro/src/index.ts
Outdated

export {
 bundleCommand,
 ramBundleCommand,
 buildBundleWithConfig,
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

I need buildBundleWithConfig to be publicly exported.
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added (along with CommandLineArgs type) in my latest push
@afoxman
afoxman
commented
Sep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
Everything looks ok to me. One function export and a type were removed during the shuffle, so I added them back in. I need to be able to call buildBundleWithConfig(...) and so I need it as well as its input type CommandLineArgs.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
LGTM.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
The CI failure looks unrelated. I will move forward and merge this PR.
@grabbou
grabbou
merged commit 0993f62
into
react-native-community:masterOct 4, 2021
@tido64tido64
mentioned this pull request
Aug 8, 2023
 Closed

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

Reviewers

@grabbougrabbougrabbou requested changes
@EsemesekEsemesekAwaiting requested review from Esemesek
@thymikeethymikeeAwaiting requested review from thymikee

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@afoxman@grabbou@thymikee

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

Skip to content
Move all metro logic and commands into a metro package - #1447
Merged
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Oct 4, 2021
Merged
Move all metro logic and commands into a metro package#1447
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Conversation
@afoxman
@afoxmanafoxman
commented
Jul 15, 2021

Copy link


Copy Markdown

Contributor
Summary:
I am working on a project where I need to do Metro bundling using the Metro APIs. The CLI has really useful Metro config and Metro bundling logic that I want to use, but it's tied up and not accessible.
This PR move the Metro configuration and bundling logic into separate packages, making them available for my project and to other external users.
Test Plan:
Code is moving, with minimal changes, including tests. Verify that the build passes and that all tests pass.
Manually verify that bundling works on a sample app. Diffed bundles using existing release of CLI vs this PR. Bundle size and md5 hashes were identical.
@afoxmanafoxman
mentioned this pull request
Jul 15, 2021

Closed

@grabbou
grabbou
commented
Jul 15, 2021•

edited

Loading

Copy link


Copy Markdown

Member
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
@afoxmanafoxman
changed the title
Move bundle and metro config logic into separate packagesMove all metro logic and commands into a metro packageJul 16, 2021
afoxman
afoxman
commented
Jul 16, 2021
View reviewed changes
Comment threadpackages/cli/src/tools/config/resolveNodeModuleDir.ts
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
Happy to help! This turned into a big PR, so you have a lot of reading to do :). The metro package now has all metro commands (start, bundle, and ramBundle) as well as the metro config/asset code.
I had to move a few "tools" from cli to cli-tools, so I could use them in metro. That made things a bit complicated and added to the PR.
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
No worries, that's something I've been waiting for quite some time to see, so I am more than happy to review it!
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
That sounds good. We should sync up on what you have in mind, and how I can help. Sent you a friend request on Discord to work out the details in DMs.
@afoxman
afoxman
commented
Sep 3, 2021

Copy link


Copy Markdown

ContributorAuthor
@thymikee@grabbou Hi folks - checking in to see when you might merge this, or if you'd like any further changes?
@thymikee
thymikee
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
I'm sure @grabbou will prioritize this the next time he works on this lib
@grabbou
grabbou
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
Yes, I am working on this this week. Will be reviewed on Wednesday.
@grabbou
grabbou
commented
Sep 16, 2021

Copy link


Copy Markdown

Member
Update: I am still in progress with this one, expected update tomorrow
grabbou
grabbou
requested changes
Sep 20, 2021
View reviewed changes
@grabbougrabbou
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.

Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
Comment threadpackages/metro/src/bundle/buildBundle.ts
Outdated

Comment threadpackages/metro/src/config/index.ts
Outdated

Comment threadpackages/metro/src/index.ts
Outdated

Comment threadpackages/metro/src/start/index.ts
Outdated

Comment threadpackages/cli/package.json
Outdated

@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
I think I've addressed all these points in my latest push. Use default exports. And all public API exports are now explicit, and only what @react-native-community/cli needs to consume (the command objects) and what I need to consume in @rnx-kit/* packages.
@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Looks like an e2e test failed.
I can't log into circleci to find out details. It wants too much access to my Microsoft github account, so I can't sign in.
When I run 'yarn test' and 'yarn test:ci:e2e' (the command circleci runs), I get success. If I broke something, I'll need help diagnosing.
In the meantime, I tried merging the upstream master, to kick off another build to see if it fails with the latest commits.
grabbou
grabbou
reviewed
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli/src/commands/index.ts
Outdated

 startCommand as start,
 bundleCommand as bundle,
 ramBundleCommand as ramBundle,
} from '@react-native-community/cli-plugin-metro';
@grabbougrabbouSep 27, 2021

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.

In the future, we can remove this when this plugin becomes direct React Native dependency.
Here's a snippet:
https://github.com/facebook/react-native/blob/main/react-native.config.js#L16
I believe it should simply say metro.commands, but this is to be decided on the planning meeting.
@grabbou
grabbou
commented
Sep 27, 2021

Copy link


Copy Markdown

Member
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
afoxman
afoxman
commented
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli-plugin-metro/src/index.ts
Outdated

export {
 bundleCommand,
 ramBundleCommand,
 buildBundleWithConfig,
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

I need buildBundleWithConfig to be publicly exported.
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added (along with CommandLineArgs type) in my latest push
@afoxman
afoxman
commented
Sep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
Everything looks ok to me. One function export and a type were removed during the shuffle, so I added them back in. I need to be able to call buildBundleWithConfig(...) and so I need it as well as its input type CommandLineArgs.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
LGTM.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
The CI failure looks unrelated. I will move forward and merge this PR.
@grabbou
grabbou
merged commit 0993f62
into
react-native-community:masterOct 4, 2021
@tido64tido64
mentioned this pull request
Aug 8, 2023
 Closed

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

Reviewers

@grabbougrabbougrabbou requested changes
@EsemesekEsemesekAwaiting requested review from Esemesek
@thymikeethymikeeAwaiting requested review from thymikee

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@afoxman@grabbou@thymikee

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

Skip to content
Move all metro logic and commands into a metro package - #1447
Merged
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Oct 4, 2021
Merged
Move all metro logic and commands into a metro package#1447
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Conversation
@afoxman
@afoxmanafoxman
commented
Jul 15, 2021

Copy link


Copy Markdown

Contributor
Summary:
I am working on a project where I need to do Metro bundling using the Metro APIs. The CLI has really useful Metro config and Metro bundling logic that I want to use, but it's tied up and not accessible.
This PR move the Metro configuration and bundling logic into separate packages, making them available for my project and to other external users.
Test Plan:
Code is moving, with minimal changes, including tests. Verify that the build passes and that all tests pass.
Manually verify that bundling works on a sample app. Diffed bundles using existing release of CLI vs this PR. Bundle size and md5 hashes were identical.
@afoxmanafoxman
mentioned this pull request
Jul 15, 2021

Closed

@grabbou
grabbou
commented
Jul 15, 2021•

edited

Loading

Copy link


Copy Markdown

Member
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
@afoxmanafoxman
changed the title
Move bundle and metro config logic into separate packagesMove all metro logic and commands into a metro packageJul 16, 2021
afoxman
afoxman
commented
Jul 16, 2021
View reviewed changes
Comment threadpackages/cli/src/tools/config/resolveNodeModuleDir.ts
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
Happy to help! This turned into a big PR, so you have a lot of reading to do :). The metro package now has all metro commands (start, bundle, and ramBundle) as well as the metro config/asset code.
I had to move a few "tools" from cli to cli-tools, so I could use them in metro. That made things a bit complicated and added to the PR.
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
No worries, that's something I've been waiting for quite some time to see, so I am more than happy to review it!
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
That sounds good. We should sync up on what you have in mind, and how I can help. Sent you a friend request on Discord to work out the details in DMs.
@afoxman
afoxman
commented
Sep 3, 2021

Copy link


Copy Markdown

ContributorAuthor
@thymikee@grabbou Hi folks - checking in to see when you might merge this, or if you'd like any further changes?
@thymikee
thymikee
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
I'm sure @grabbou will prioritize this the next time he works on this lib
@grabbou
grabbou
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
Yes, I am working on this this week. Will be reviewed on Wednesday.
@grabbou
grabbou
commented
Sep 16, 2021

Copy link


Copy Markdown

Member
Update: I am still in progress with this one, expected update tomorrow
grabbou
grabbou
requested changes
Sep 20, 2021
View reviewed changes
@grabbougrabbou
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.

Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
Comment threadpackages/metro/src/bundle/buildBundle.ts
Outdated

Comment threadpackages/metro/src/config/index.ts
Outdated

Comment threadpackages/metro/src/index.ts
Outdated

Comment threadpackages/metro/src/start/index.ts
Outdated

Comment threadpackages/cli/package.json
Outdated

@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
I think I've addressed all these points in my latest push. Use default exports. And all public API exports are now explicit, and only what @react-native-community/cli needs to consume (the command objects) and what I need to consume in @rnx-kit/* packages.
@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Looks like an e2e test failed.
I can't log into circleci to find out details. It wants too much access to my Microsoft github account, so I can't sign in.
When I run 'yarn test' and 'yarn test:ci:e2e' (the command circleci runs), I get success. If I broke something, I'll need help diagnosing.
In the meantime, I tried merging the upstream master, to kick off another build to see if it fails with the latest commits.
grabbou
grabbou
reviewed
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli/src/commands/index.ts
Outdated

 startCommand as start,
 bundleCommand as bundle,
 ramBundleCommand as ramBundle,
} from '@react-native-community/cli-plugin-metro';
@grabbougrabbouSep 27, 2021

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.

In the future, we can remove this when this plugin becomes direct React Native dependency.
Here's a snippet:
https://github.com/facebook/react-native/blob/main/react-native.config.js#L16
I believe it should simply say metro.commands, but this is to be decided on the planning meeting.
@grabbou
grabbou
commented
Sep 27, 2021

Copy link


Copy Markdown

Member
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
afoxman
afoxman
commented
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli-plugin-metro/src/index.ts
Outdated

export {
 bundleCommand,
 ramBundleCommand,
 buildBundleWithConfig,
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

I need buildBundleWithConfig to be publicly exported.
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added (along with CommandLineArgs type) in my latest push
@afoxman
afoxman
commented
Sep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
Everything looks ok to me. One function export and a type were removed during the shuffle, so I added them back in. I need to be able to call buildBundleWithConfig(...) and so I need it as well as its input type CommandLineArgs.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
LGTM.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
The CI failure looks unrelated. I will move forward and merge this PR.
@grabbou
grabbou
merged commit 0993f62
into
react-native-community:masterOct 4, 2021
@tido64tido64
mentioned this pull request
Aug 8, 2023
 Closed

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

Reviewers

@grabbougrabbougrabbou requested changes
@EsemesekEsemesekAwaiting requested review from Esemesek
@thymikeethymikeeAwaiting requested review from thymikee

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@afoxman@grabbou@thymikee

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} 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
Move all metro logic and commands into a metro package - #1447
Merged
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Oct 4, 2021
Merged
Move all metro logic and commands into a metro package#1447
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Conversation
@afoxman
@afoxmanafoxman
commented
Jul 15, 2021

Copy link


Copy Markdown

Contributor
Summary:
I am working on a project where I need to do Metro bundling using the Metro APIs. The CLI has really useful Metro config and Metro bundling logic that I want to use, but it's tied up and not accessible.
This PR move the Metro configuration and bundling logic into separate packages, making them available for my project and to other external users.
Test Plan:
Code is moving, with minimal changes, including tests. Verify that the build passes and that all tests pass.
Manually verify that bundling works on a sample app. Diffed bundles using existing release of CLI vs this PR. Bundle size and md5 hashes were identical.
@afoxmanafoxman
mentioned this pull request
Jul 15, 2021

Closed

@grabbou
grabbou
commented
Jul 15, 2021•

edited

Loading

Copy link


Copy Markdown

Member
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
@afoxmanafoxman
changed the title
Move bundle and metro config logic into separate packagesMove all metro logic and commands into a metro packageJul 16, 2021
afoxman
afoxman
commented
Jul 16, 2021
View reviewed changes
Comment threadpackages/cli/src/tools/config/resolveNodeModuleDir.ts
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
Happy to help! This turned into a big PR, so you have a lot of reading to do :). The metro package now has all metro commands (start, bundle, and ramBundle) as well as the metro config/asset code.
I had to move a few "tools" from cli to cli-tools, so I could use them in metro. That made things a bit complicated and added to the PR.
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
No worries, that's something I've been waiting for quite some time to see, so I am more than happy to review it!
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
That sounds good. We should sync up on what you have in mind, and how I can help. Sent you a friend request on Discord to work out the details in DMs.
@afoxman
afoxman
commented
Sep 3, 2021

Copy link


Copy Markdown

ContributorAuthor
@thymikee@grabbou Hi folks - checking in to see when you might merge this, or if you'd like any further changes?
@thymikee
thymikee
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
I'm sure @grabbou will prioritize this the next time he works on this lib
@grabbou
grabbou
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
Yes, I am working on this this week. Will be reviewed on Wednesday.
@grabbou
grabbou
commented
Sep 16, 2021

Copy link


Copy Markdown

Member
Update: I am still in progress with this one, expected update tomorrow
grabbou
grabbou
requested changes
Sep 20, 2021
View reviewed changes
@grabbougrabbou
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.

Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
Comment threadpackages/metro/src/bundle/buildBundle.ts
Outdated

Comment threadpackages/metro/src/config/index.ts
Outdated

Comment threadpackages/metro/src/index.ts
Outdated

Comment threadpackages/metro/src/start/index.ts
Outdated

Comment threadpackages/cli/package.json
Outdated

@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
I think I've addressed all these points in my latest push. Use default exports. And all public API exports are now explicit, and only what @react-native-community/cli needs to consume (the command objects) and what I need to consume in @rnx-kit/* packages.
@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Looks like an e2e test failed.
I can't log into circleci to find out details. It wants too much access to my Microsoft github account, so I can't sign in.
When I run 'yarn test' and 'yarn test:ci:e2e' (the command circleci runs), I get success. If I broke something, I'll need help diagnosing.
In the meantime, I tried merging the upstream master, to kick off another build to see if it fails with the latest commits.
grabbou
grabbou
reviewed
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli/src/commands/index.ts
Outdated

 startCommand as start,
 bundleCommand as bundle,
 ramBundleCommand as ramBundle,
} from '@react-native-community/cli-plugin-metro';
@grabbougrabbouSep 27, 2021

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.

In the future, we can remove this when this plugin becomes direct React Native dependency.
Here's a snippet:
https://github.com/facebook/react-native/blob/main/react-native.config.js#L16
I believe it should simply say metro.commands, but this is to be decided on the planning meeting.
@grabbou
grabbou
commented
Sep 27, 2021

Copy link


Copy Markdown

Member
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
afoxman
afoxman
commented
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli-plugin-metro/src/index.ts
Outdated

export {
 bundleCommand,
 ramBundleCommand,
 buildBundleWithConfig,
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

I need buildBundleWithConfig to be publicly exported.
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added (along with CommandLineArgs type) in my latest push
@afoxman
afoxman
commented
Sep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
Everything looks ok to me. One function export and a type were removed during the shuffle, so I added them back in. I need to be able to call buildBundleWithConfig(...) and so I need it as well as its input type CommandLineArgs.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
LGTM.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
The CI failure looks unrelated. I will move forward and merge this PR.
@grabbou
grabbou
merged commit 0993f62
into
react-native-community:masterOct 4, 2021
@tido64tido64
mentioned this pull request
Aug 8, 2023
 Closed

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

Reviewers

@grabbougrabbougrabbou requested changes
@EsemesekEsemesekAwaiting requested review from Esemesek
@thymikeethymikeeAwaiting requested review from thymikee

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@afoxman@grabbou@thymikee

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

Skip to content
Move all metro logic and commands into a metro package - #1447
Merged
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Oct 4, 2021
Merged
Move all metro logic and commands into a metro package#1447
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Conversation
@afoxman
@afoxmanafoxman
commented
Jul 15, 2021

Copy link


Copy Markdown

Contributor
Summary:
I am working on a project where I need to do Metro bundling using the Metro APIs. The CLI has really useful Metro config and Metro bundling logic that I want to use, but it's tied up and not accessible.
This PR move the Metro configuration and bundling logic into separate packages, making them available for my project and to other external users.
Test Plan:
Code is moving, with minimal changes, including tests. Verify that the build passes and that all tests pass.
Manually verify that bundling works on a sample app. Diffed bundles using existing release of CLI vs this PR. Bundle size and md5 hashes were identical.
@afoxmanafoxman
mentioned this pull request
Jul 15, 2021

Closed

@grabbou
grabbou
commented
Jul 15, 2021•

edited

Loading

Copy link


Copy Markdown

Member
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
@afoxmanafoxman
changed the title
Move bundle and metro config logic into separate packagesMove all metro logic and commands into a metro packageJul 16, 2021
afoxman
afoxman
commented
Jul 16, 2021
View reviewed changes
Comment threadpackages/cli/src/tools/config/resolveNodeModuleDir.ts
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
Happy to help! This turned into a big PR, so you have a lot of reading to do :). The metro package now has all metro commands (start, bundle, and ramBundle) as well as the metro config/asset code.
I had to move a few "tools" from cli to cli-tools, so I could use them in metro. That made things a bit complicated and added to the PR.
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
No worries, that's something I've been waiting for quite some time to see, so I am more than happy to review it!
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
That sounds good. We should sync up on what you have in mind, and how I can help. Sent you a friend request on Discord to work out the details in DMs.
@afoxman
afoxman
commented
Sep 3, 2021

Copy link


Copy Markdown

ContributorAuthor
@thymikee@grabbou Hi folks - checking in to see when you might merge this, or if you'd like any further changes?
@thymikee
thymikee
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
I'm sure @grabbou will prioritize this the next time he works on this lib
@grabbou
grabbou
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
Yes, I am working on this this week. Will be reviewed on Wednesday.
@grabbou
grabbou
commented
Sep 16, 2021

Copy link


Copy Markdown

Member
Update: I am still in progress with this one, expected update tomorrow
grabbou
grabbou
requested changes
Sep 20, 2021
View reviewed changes
@grabbougrabbou
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.

Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
Comment threadpackages/metro/src/bundle/buildBundle.ts
Outdated

Comment threadpackages/metro/src/config/index.ts
Outdated

Comment threadpackages/metro/src/index.ts
Outdated

Comment threadpackages/metro/src/start/index.ts
Outdated

Comment threadpackages/cli/package.json
Outdated

@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
I think I've addressed all these points in my latest push. Use default exports. And all public API exports are now explicit, and only what @react-native-community/cli needs to consume (the command objects) and what I need to consume in @rnx-kit/* packages.
@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Looks like an e2e test failed.
I can't log into circleci to find out details. It wants too much access to my Microsoft github account, so I can't sign in.
When I run 'yarn test' and 'yarn test:ci:e2e' (the command circleci runs), I get success. If I broke something, I'll need help diagnosing.
In the meantime, I tried merging the upstream master, to kick off another build to see if it fails with the latest commits.
grabbou
grabbou
reviewed
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli/src/commands/index.ts
Outdated

 startCommand as start,
 bundleCommand as bundle,
 ramBundleCommand as ramBundle,
} from '@react-native-community/cli-plugin-metro';
@grabbougrabbouSep 27, 2021

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.

In the future, we can remove this when this plugin becomes direct React Native dependency.
Here's a snippet:
https://github.com/facebook/react-native/blob/main/react-native.config.js#L16
I believe it should simply say metro.commands, but this is to be decided on the planning meeting.
@grabbou
grabbou
commented
Sep 27, 2021

Copy link


Copy Markdown

Member
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
afoxman
afoxman
commented
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli-plugin-metro/src/index.ts
Outdated

export {
 bundleCommand,
 ramBundleCommand,
 buildBundleWithConfig,
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

I need buildBundleWithConfig to be publicly exported.
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added (along with CommandLineArgs type) in my latest push
@afoxman
afoxman
commented
Sep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
Everything looks ok to me. One function export and a type were removed during the shuffle, so I added them back in. I need to be able to call buildBundleWithConfig(...) and so I need it as well as its input type CommandLineArgs.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
LGTM.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
The CI failure looks unrelated. I will move forward and merge this PR.
@grabbou
grabbou
merged commit 0993f62
into
react-native-community:masterOct 4, 2021
@tido64tido64
mentioned this pull request
Aug 8, 2023
 Closed

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

Reviewers

@grabbougrabbougrabbou requested changes
@EsemesekEsemesekAwaiting requested review from Esemesek
@thymikeethymikeeAwaiting requested review from thymikee

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@afoxman@grabbou@thymikee

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

Skip to content
Move all metro logic and commands into a metro package - #1447
Merged
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Oct 4, 2021
Merged
Move all metro logic and commands into a metro package#1447
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Conversation
@afoxman
@afoxmanafoxman
commented
Jul 15, 2021

Copy link


Copy Markdown

Contributor
Summary:
I am working on a project where I need to do Metro bundling using the Metro APIs. The CLI has really useful Metro config and Metro bundling logic that I want to use, but it's tied up and not accessible.
This PR move the Metro configuration and bundling logic into separate packages, making them available for my project and to other external users.
Test Plan:
Code is moving, with minimal changes, including tests. Verify that the build passes and that all tests pass.
Manually verify that bundling works on a sample app. Diffed bundles using existing release of CLI vs this PR. Bundle size and md5 hashes were identical.
@afoxmanafoxman
mentioned this pull request
Jul 15, 2021

Closed

@grabbou
grabbou
commented
Jul 15, 2021•

edited

Loading

Copy link


Copy Markdown

Member
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
@afoxmanafoxman
changed the title
Move bundle and metro config logic into separate packagesMove all metro logic and commands into a metro packageJul 16, 2021
afoxman
afoxman
commented
Jul 16, 2021
View reviewed changes
Comment threadpackages/cli/src/tools/config/resolveNodeModuleDir.ts
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
Happy to help! This turned into a big PR, so you have a lot of reading to do :). The metro package now has all metro commands (start, bundle, and ramBundle) as well as the metro config/asset code.
I had to move a few "tools" from cli to cli-tools, so I could use them in metro. That made things a bit complicated and added to the PR.
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
No worries, that's something I've been waiting for quite some time to see, so I am more than happy to review it!
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
That sounds good. We should sync up on what you have in mind, and how I can help. Sent you a friend request on Discord to work out the details in DMs.
@afoxman
afoxman
commented
Sep 3, 2021

Copy link


Copy Markdown

ContributorAuthor
@thymikee@grabbou Hi folks - checking in to see when you might merge this, or if you'd like any further changes?
@thymikee
thymikee
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
I'm sure @grabbou will prioritize this the next time he works on this lib
@grabbou
grabbou
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
Yes, I am working on this this week. Will be reviewed on Wednesday.
@grabbou
grabbou
commented
Sep 16, 2021

Copy link


Copy Markdown

Member
Update: I am still in progress with this one, expected update tomorrow
grabbou
grabbou
requested changes
Sep 20, 2021
View reviewed changes
@grabbougrabbou
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.

Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
Comment threadpackages/metro/src/bundle/buildBundle.ts
Outdated

Comment threadpackages/metro/src/config/index.ts
Outdated

Comment threadpackages/metro/src/index.ts
Outdated

Comment threadpackages/metro/src/start/index.ts
Outdated

Comment threadpackages/cli/package.json
Outdated

@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
I think I've addressed all these points in my latest push. Use default exports. And all public API exports are now explicit, and only what @react-native-community/cli needs to consume (the command objects) and what I need to consume in @rnx-kit/* packages.
@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Looks like an e2e test failed.
I can't log into circleci to find out details. It wants too much access to my Microsoft github account, so I can't sign in.
When I run 'yarn test' and 'yarn test:ci:e2e' (the command circleci runs), I get success. If I broke something, I'll need help diagnosing.
In the meantime, I tried merging the upstream master, to kick off another build to see if it fails with the latest commits.
grabbou
grabbou
reviewed
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli/src/commands/index.ts
Outdated

 startCommand as start,
 bundleCommand as bundle,
 ramBundleCommand as ramBundle,
} from '@react-native-community/cli-plugin-metro';
@grabbougrabbouSep 27, 2021

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.

In the future, we can remove this when this plugin becomes direct React Native dependency.
Here's a snippet:
https://github.com/facebook/react-native/blob/main/react-native.config.js#L16
I believe it should simply say metro.commands, but this is to be decided on the planning meeting.
@grabbou
grabbou
commented
Sep 27, 2021

Copy link


Copy Markdown

Member
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
afoxman
afoxman
commented
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli-plugin-metro/src/index.ts
Outdated

export {
 bundleCommand,
 ramBundleCommand,
 buildBundleWithConfig,
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

I need buildBundleWithConfig to be publicly exported.
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added (along with CommandLineArgs type) in my latest push
@afoxman
afoxman
commented
Sep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
Everything looks ok to me. One function export and a type were removed during the shuffle, so I added them back in. I need to be able to call buildBundleWithConfig(...) and so I need it as well as its input type CommandLineArgs.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
LGTM.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
The CI failure looks unrelated. I will move forward and merge this PR.
@grabbou
grabbou
merged commit 0993f62
into
react-native-community:masterOct 4, 2021
@tido64tido64
mentioned this pull request
Aug 8, 2023
 Closed

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

Reviewers

@grabbougrabbougrabbou requested changes
@EsemesekEsemesekAwaiting requested review from Esemesek
@thymikeethymikeeAwaiting requested review from thymikee

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@afoxman@grabbou@thymikee

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

Skip to content
Move all metro logic and commands into a metro package - #1447
Merged
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Oct 4, 2021
Merged
Move all metro logic and commands into a metro package#1447
grabbou merged 19 commits into
react-native-community:masterfrom 
afoxman:cli-bundle-api
Conversation
@afoxman
@afoxmanafoxman
commented
Jul 15, 2021

Copy link


Copy Markdown

Contributor
Summary:
I am working on a project where I need to do Metro bundling using the Metro APIs. The CLI has really useful Metro config and Metro bundling logic that I want to use, but it's tied up and not accessible.
This PR move the Metro configuration and bundling logic into separate packages, making them available for my project and to other external users.
Test Plan:
Code is moving, with minimal changes, including tests. Verify that the build passes and that all tests pass.
Manually verify that bundling works on a sample app. Diffed bundles using existing release of CLI vs this PR. Bundle size and md5 hashes were identical.
@afoxmanafoxman
mentioned this pull request
Jul 15, 2021

Closed

@grabbou
grabbou
commented
Jul 15, 2021•

edited

Loading

Copy link


Copy Markdown

Member
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
@afoxmanafoxman
changed the title
Move bundle and metro config logic into separate packagesMove all metro logic and commands into a metro packageJul 16, 2021
afoxman
afoxman
commented
Jul 16, 2021
View reviewed changes
Comment threadpackages/cli/src/tools/config/resolveNodeModuleDir.ts
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
I love this! It's something I wanted to do for a really really long time!
Can you do one more thing, rename metro-config to just metro and move start as well as bundle commands into that package? This will be a good first step to eventually provide an abstraction for other bundlers to plug into CLI instead of Metro.
The idea is that one should be able too completely replace Metro with e.g. Webpack or other bundler by removing @react-native-community/bundler-metro package and using a different one instead.
CC: @tido64
Happy to help! This turned into a big PR, so you have a lot of reading to do :). The metro package now has all metro commands (start, bundle, and ramBundle) as well as the metro config/asset code.
I had to move a few "tools" from cli to cli-tools, so I could use them in metro. That made things a bit complicated and added to the PR.
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
No worries, that's something I've been waiting for quite some time to see, so I am more than happy to review it!
@grabbou
grabbou
commented
Jul 16, 2021

Copy link


Copy Markdown

Member
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
@afoxman
afoxman
commented
Jul 16, 2021

Copy link


Copy Markdown

ContributorAuthor
In the future release of React Native, I would like to discuss an opportunity of moving Metro dependency to a user project, so that they can define bundler and complementary CLI plugin for it.
That sounds good. We should sync up on what you have in mind, and how I can help. Sent you a friend request on Discord to work out the details in DMs.
@afoxman
afoxman
commented
Sep 3, 2021

Copy link


Copy Markdown

ContributorAuthor
@thymikee@grabbou Hi folks - checking in to see when you might merge this, or if you'd like any further changes?
@thymikee
thymikee
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
I'm sure @grabbou will prioritize this the next time he works on this lib
@grabbou
grabbou
commented
Sep 13, 2021

Copy link


Copy Markdown

Member
Yes, I am working on this this week. Will be reviewed on Wednesday.
@grabbou
grabbou
commented
Sep 16, 2021

Copy link


Copy Markdown

Member
Update: I am still in progress with this one, expected update tomorrow
grabbou
grabbou
requested changes
Sep 20, 2021
View reviewed changes
@grabbougrabbou
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.

Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
Comment threadpackages/metro/src/bundle/buildBundle.ts
Outdated

Comment threadpackages/metro/src/config/index.ts
Outdated

Comment threadpackages/metro/src/index.ts
Outdated

Comment threadpackages/metro/src/start/index.ts
Outdated

Comment threadpackages/cli/package.json
Outdated

@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Conceptually, everything looks fine. I have left some comments, but I believe this is going to be the final round.
TL;DR:
  • Let's not export "all" (via export * from 'foo.ts') and avoid creating index.ts in folders
  • Prefer export default instead of single named exports per file (sticks consistent with the rest of the codebase, happy to revisit later in a separate PR)
  • Export explicitly the public interface via src/index.ts (instead of *)
  • Do not change current exported/private functions beyond the loadMetroConfig.ts that is subject to this PR (unless there's a need for an additional function - then, it's welcome)
I am happy to hop on a Discord/Hangouts call to discuss this in a bit more details if necessary. Thank you for working on that!
I think I've addressed all these points in my latest push. Use default exports. And all public API exports are now explicit, and only what @react-native-community/cli needs to consume (the command objects) and what I need to consume in @rnx-kit/* packages.
@afoxman
afoxman
commented
Sep 22, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Looks like an e2e test failed.
I can't log into circleci to find out details. It wants too much access to my Microsoft github account, so I can't sign in.
When I run 'yarn test' and 'yarn test:ci:e2e' (the command circleci runs), I get success. If I broke something, I'll need help diagnosing.
In the meantime, I tried merging the upstream master, to kick off another build to see if it fails with the latest commits.
grabbou
grabbou
reviewed
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli/src/commands/index.ts
Outdated

 startCommand as start,
 bundleCommand as bundle,
 ramBundleCommand as ramBundle,
} from '@react-native-community/cli-plugin-metro';
@grabbougrabbouSep 27, 2021

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.

In the future, we can remove this when this plugin becomes direct React Native dependency.
Here's a snippet:
https://github.com/facebook/react-native/blob/main/react-native.config.js#L16
I believe it should simply say metro.commands, but this is to be decided on the planning meeting.
@grabbou
grabbou
commented
Sep 27, 2021

Copy link


Copy Markdown

Member
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
afoxman
afoxman
commented
Sep 27, 2021
View reviewed changes
Comment threadpackages/cli-plugin-metro/src/index.ts
Outdated

export {
 bundleCommand,
 ramBundleCommand,
 buildBundleWithConfig,
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

I need buildBundleWithConfig to be publicly exported.
@afoxmanafoxmanSep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Added (along with CommandLineArgs type) in my latest push
@afoxman
afoxman
commented
Sep 27, 2021

Copy link


Copy Markdown

ContributorAuthor
I updated your PR with some further naming changes. The primary change was to group commands into commands folder (stays uniform with android and iOS plugins) and export them as an array. They're not supposed to be consumed as a public API, but used internally, and array is what the CLI infrastructure prefers.
Please let me know if you're happy with how it looks and whether the public API satisfies your use case.
Everything looks ok to me. One function export and a type were removed during the shuffle, so I added them back in. I need to be able to call buildBundleWithConfig(...) and so I need it as well as its input type CommandLineArgs.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
LGTM.
@grabbou
grabbou
commented
Oct 4, 2021

Copy link


Copy Markdown

Member
The CI failure looks unrelated. I will move forward and merge this PR.
@grabbou
grabbou
merged commit 0993f62
into
react-native-community:masterOct 4, 2021
@tido64tido64
mentioned this pull request
Aug 8, 2023
 Closed

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

Reviewers

@grabbougrabbougrabbou requested changes
@EsemesekEsemesekAwaiting requested review from Esemesek
@thymikeethymikeeAwaiting requested review from thymikee

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@afoxman@grabbou@thymikee