Expose unstable_InspectorProxy and unstable_Device from dev-middleware - #41370

Closed
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field
Closed

Expose unstable_InspectorProxy and unstable_Device from dev-middleware#41370
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field

Conversation

@gabrieldonadel

@gabrieldonadelgabrieldonadel commented Nov 8, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently, both metro-inspector-proxy(#39045) and @react-native-community/cli-plugin-metro(#38795) were moved to this repo and in the process of moving these packages, the exports field inside package.json was added, only exporting the index.js file.

The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the index.js file, e.g. Importing the InspectorProxy class from @react-native/dev-middleware/dist/inspector-proxy/InspectorProxy. Normally this wouldn't be a problem and we would just import from dist/ but due to the exports field, attempting to import from any other file not specified on this field will result in a ERR_PACKAGE_PATH_NOT_EXPORTED error.

As a short-term fix, we should create unstable_-prefixed exports of individual features Expo currently depends on.

Changelog:

[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from @react-native/dev-middleware

Test Plan:

N / A

@facebook-github-botfacebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Nov 8, 2023
@motiz88

motiz88 commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

Hey @gabrieldonadel, let's talk about alternatives to this PR. Generally speaking, strengthening the encapsulation of these packages was an intentional change to allow us to iterate faster, and removing exports would undo that.

Expo CLI should have a plan for moving off its dependencies on the internals of these packages, unless we make them intentionally public. Short term, we can be pragmatic here and create unstable_-prefixed exports of individual features Expo currently depends on, but you should expect them to be removed or otherwise break in a future release.

You mentioned InspectorProxy specifically. Note that we're actively working on this class and considering it an implementation detail of @react-native/dev-middleware. It's my understanding that in the long term, Expo CLI will use @react-native/dev-middleware directly and not depend on customising InspectorProxy. (cc @byCedric, @huntie)

Can you elaborate on other specific use cases for deep imports from these packages, and the plan for moving away from them?

@EvanBacon

Copy link
Copy Markdown
Contributor

For all dev tools packages (minus CLIs), I'd prefer if we could reach the internals as the iteration cycles would cause us potentially weeks/months of delay to get changes out to users, which would cause us to either delay react native upgrades or need to fork more code away from the community packages.

Since debugging is fairly stable in Expo CLI at the moment and we're currently in the middle of the react-native upgrade process, we could update this PR to expose all of the internal APIs we're using, either through the main export or package exports.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middleware and community-cli-pluginRemove package.json exports field from dev-middlewareNov 8, 2023
@byCedric

byCedric commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

I can speak for the use case of customizing the InspectorProxy and Device classes. We currently extend these two classes to add functionality, mainly in two categories:

  • Add new functionality, like the Network inspector.
  • Add workarounds/fixes to avoid hard crashes with Hermes.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

For the workaround / fixes, we need Hermes to stop crashing apps on any CDP message. Even when the CDP message content is malformed. E.g. Runtime.callFunctionOn could cause a crash when injecting a JS script using features not available in Hermes (see expo/vscode-expo#231 and expo/expo#25270 for the latest example, and all other Vscode... handlers to make vscode CDP messages not crash the app)

I think the best path forward on our end would be to keep extending these classes until the newer Hermes CDP backend is in place, and we migrated or upstreamed the network inspector.

For now, I think having access to the Device and InspectorProxy class, and it's initialization is the in-between step. If we could use createDevMiddleware with our own InspectorProxy class, we can switch to this in-between step and start consuming the @react-native/dev-middleware package. I believe this requirement around the InspectorProxy class was also what @huntie and I have discussed earlier, but correct me if I'm wrong 😄

@gabrieldonadel

Copy link
Copy Markdown
CollaboratorAuthor

Regarding @react-native/community-cli-plugin we will no longer need to change it as we were only using the saveAssets function and Evan just opened a PR updating the CLI to no longer use it expo/expo#25278

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from 4e11575 to 324def9CompareNovember 9, 2023 13:39
@github-actions

github-actionsBot commented Nov 9, 2023

Copy link
Copy Markdown
Warnings
⚠️

packages/dev-middleware/src/createDevMiddleware.js#L12 - packages/dev-middleware/src/createDevMiddleware.js line 12 – Requires should be sorted alphabetically (lint/sort-imports)

Generated by 🚫 dangerJS against 3c25924

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from ac137df to 2061b6dCompareNovember 9, 2023 13:59
@motiz88

Copy link
Copy Markdown
Contributor

@byCedric's updates to this PR (exposing unstable_Device, unstable_InspectorProxy as top-level exports, adding an unstable config option to replace the InspectorProxy implementation) make perfect sense to me for React Native 0.73. I've asked @blakef to help with landing this and getting it picked into the next 0.73 RC.

For 0.74 onwards, can we be proactive about moving away from these unstable mechanisms, and addressing the underlying problems in a sustainable way? Specifically:

we need Hermes to stop crashing apps on any CDP message

If this is a bug in Hermes's CDP handler, let's just fix it (cc @dannysu) and put unit tests around it - this doesn't have to be blocked on shipping the entire new CDP stack, and doesn't warrant keeping around a monkey-patched version of InspectorProxy.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

Let's derisk this. Adding a native network inspector inside RN is still an important goal for us, but it's likely the new CDP stack will ship without it at first. In that world, continuing to use a monkey-patched InspectorProxy is a reliability risk. Can we minimally port Expo's existing network inspector to a supported, tested API in InspectorProxy and stop relying on monkey-patching? (Note that InspectorProxy has an actual test suite now.) Even if that API is itself unstable_ and we still have the goal of migrating to a fully native solution.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middlewareExpose unstable_InspectorProxy and unstable_Device from dev-middlewareNov 9, 2023
@blakefblakef self-assigned this Nov 9, 2023
@facebook-github-bot

Copy link
Copy Markdown
Contributor

@blakef has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@github-actions

Copy link
Copy Markdown

This pull request was successfully merged by @gabrieldonadel in 1a61afd.

When will my fix make it into a release? | Upcoming Releases

@github-actionsgithub-actionsBot added the Merged This PR has been merged. label Nov 10, 2023
@gabrieldonadel
gabrieldonadel deleted the @gabrieldonadel/remove-exports-field branch November 10, 2023 13:14
lunaleaps pushed a commit that referenced this pull request Nov 17, 2023
#41370)
Summary:
Recently, both `metro-inspector-proxy`(#39045) and `react-native-community/cli-plugin-metro`(#38795) were moved to this repo and in the process of moving these packages, the `exports` field inside package.json was added, only exporting the `index.js` file.
The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the `index.js` file, e.g. Importing the InspectorProxy class from `react-native/dev-middleware/dist/inspector-proxy/InspectorProxy`. Normally this wouldn't be a problem and we would just import from `dist/` but due to the `exports` field, attempting to import from any other file not specified on this field will result in a `ERR_PACKAGE_PATH_NOT_EXPORTED` error.
As a short-term fix, we should create `unstable_`-prefixed exports of individual features Expo currently depends on.
## Changelog:
[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from `react-native/dev-middleware`
Pull Request resolved: #41370
Test Plan: N / A
Reviewed By: robhogan
Differential Revision: D51163134
Pulled By: blakef
fbshipit-source-id: e67adaedc4fc64131e4c9dd8383c9877b8202283
gabrieldonadel added a commit to expo/expo that referenced this pull request Nov 18, 2023
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> #25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
onizam95 pushed a commit to onizam95/expo-av-drm that referenced this pull request Jan 15, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
DavidAmyot pushed a commit to Villeco-inc/expo-router that referenced this pull request Oct 16, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo/expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.p: ExpoPartner: ExpoPartnerPick RequestShared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

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

Expose unstable_InspectorProxy and unstable_Device from dev-middleware - #41370

Closed
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field
Closed

Expose unstable_InspectorProxy and unstable_Device from dev-middleware#41370
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field

Conversation

@gabrieldonadel

@gabrieldonadelgabrieldonadel commented Nov 8, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently, both metro-inspector-proxy(#39045) and @react-native-community/cli-plugin-metro(#38795) were moved to this repo and in the process of moving these packages, the exports field inside package.json was added, only exporting the index.js file.

The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the index.js file, e.g. Importing the InspectorProxy class from @react-native/dev-middleware/dist/inspector-proxy/InspectorProxy. Normally this wouldn't be a problem and we would just import from dist/ but due to the exports field, attempting to import from any other file not specified on this field will result in a ERR_PACKAGE_PATH_NOT_EXPORTED error.

As a short-term fix, we should create unstable_-prefixed exports of individual features Expo currently depends on.

Changelog:

[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from @react-native/dev-middleware

Test Plan:

N / A

@facebook-github-botfacebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Nov 8, 2023
@motiz88

motiz88 commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

Hey @gabrieldonadel, let's talk about alternatives to this PR. Generally speaking, strengthening the encapsulation of these packages was an intentional change to allow us to iterate faster, and removing exports would undo that.

Expo CLI should have a plan for moving off its dependencies on the internals of these packages, unless we make them intentionally public. Short term, we can be pragmatic here and create unstable_-prefixed exports of individual features Expo currently depends on, but you should expect them to be removed or otherwise break in a future release.

You mentioned InspectorProxy specifically. Note that we're actively working on this class and considering it an implementation detail of @react-native/dev-middleware. It's my understanding that in the long term, Expo CLI will use @react-native/dev-middleware directly and not depend on customising InspectorProxy. (cc @byCedric, @huntie)

Can you elaborate on other specific use cases for deep imports from these packages, and the plan for moving away from them?

@EvanBacon

Copy link
Copy Markdown
Contributor

For all dev tools packages (minus CLIs), I'd prefer if we could reach the internals as the iteration cycles would cause us potentially weeks/months of delay to get changes out to users, which would cause us to either delay react native upgrades or need to fork more code away from the community packages.

Since debugging is fairly stable in Expo CLI at the moment and we're currently in the middle of the react-native upgrade process, we could update this PR to expose all of the internal APIs we're using, either through the main export or package exports.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middleware and community-cli-pluginRemove package.json exports field from dev-middlewareNov 8, 2023
@byCedric

byCedric commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

I can speak for the use case of customizing the InspectorProxy and Device classes. We currently extend these two classes to add functionality, mainly in two categories:

  • Add new functionality, like the Network inspector.
  • Add workarounds/fixes to avoid hard crashes with Hermes.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

For the workaround / fixes, we need Hermes to stop crashing apps on any CDP message. Even when the CDP message content is malformed. E.g. Runtime.callFunctionOn could cause a crash when injecting a JS script using features not available in Hermes (see expo/vscode-expo#231 and expo/expo#25270 for the latest example, and all other Vscode... handlers to make vscode CDP messages not crash the app)

I think the best path forward on our end would be to keep extending these classes until the newer Hermes CDP backend is in place, and we migrated or upstreamed the network inspector.

For now, I think having access to the Device and InspectorProxy class, and it's initialization is the in-between step. If we could use createDevMiddleware with our own InspectorProxy class, we can switch to this in-between step and start consuming the @react-native/dev-middleware package. I believe this requirement around the InspectorProxy class was also what @huntie and I have discussed earlier, but correct me if I'm wrong 😄

@gabrieldonadel

Copy link
Copy Markdown
CollaboratorAuthor

Regarding @react-native/community-cli-plugin we will no longer need to change it as we were only using the saveAssets function and Evan just opened a PR updating the CLI to no longer use it expo/expo#25278

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from 4e11575 to 324def9CompareNovember 9, 2023 13:39
@github-actions

github-actionsBot commented Nov 9, 2023

Copy link
Copy Markdown
Warnings
⚠️

packages/dev-middleware/src/createDevMiddleware.js#L12 - packages/dev-middleware/src/createDevMiddleware.js line 12 – Requires should be sorted alphabetically (lint/sort-imports)

Generated by 🚫 dangerJS against 3c25924

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from ac137df to 2061b6dCompareNovember 9, 2023 13:59
@motiz88

Copy link
Copy Markdown
Contributor

@byCedric's updates to this PR (exposing unstable_Device, unstable_InspectorProxy as top-level exports, adding an unstable config option to replace the InspectorProxy implementation) make perfect sense to me for React Native 0.73. I've asked @blakef to help with landing this and getting it picked into the next 0.73 RC.

For 0.74 onwards, can we be proactive about moving away from these unstable mechanisms, and addressing the underlying problems in a sustainable way? Specifically:

we need Hermes to stop crashing apps on any CDP message

If this is a bug in Hermes's CDP handler, let's just fix it (cc @dannysu) and put unit tests around it - this doesn't have to be blocked on shipping the entire new CDP stack, and doesn't warrant keeping around a monkey-patched version of InspectorProxy.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

Let's derisk this. Adding a native network inspector inside RN is still an important goal for us, but it's likely the new CDP stack will ship without it at first. In that world, continuing to use a monkey-patched InspectorProxy is a reliability risk. Can we minimally port Expo's existing network inspector to a supported, tested API in InspectorProxy and stop relying on monkey-patching? (Note that InspectorProxy has an actual test suite now.) Even if that API is itself unstable_ and we still have the goal of migrating to a fully native solution.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middlewareExpose unstable_InspectorProxy and unstable_Device from dev-middlewareNov 9, 2023
@blakefblakef self-assigned this Nov 9, 2023
@facebook-github-bot

Copy link
Copy Markdown
Contributor

@blakef has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@github-actions

Copy link
Copy Markdown

This pull request was successfully merged by @gabrieldonadel in 1a61afd.

When will my fix make it into a release? | Upcoming Releases

@github-actionsgithub-actionsBot added the Merged This PR has been merged. label Nov 10, 2023
@gabrieldonadel
gabrieldonadel deleted the @gabrieldonadel/remove-exports-field branch November 10, 2023 13:14
lunaleaps pushed a commit that referenced this pull request Nov 17, 2023
#41370)
Summary:
Recently, both `metro-inspector-proxy`(#39045) and `react-native-community/cli-plugin-metro`(#38795) were moved to this repo and in the process of moving these packages, the `exports` field inside package.json was added, only exporting the `index.js` file.
The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the `index.js` file, e.g. Importing the InspectorProxy class from `react-native/dev-middleware/dist/inspector-proxy/InspectorProxy`. Normally this wouldn't be a problem and we would just import from `dist/` but due to the `exports` field, attempting to import from any other file not specified on this field will result in a `ERR_PACKAGE_PATH_NOT_EXPORTED` error.
As a short-term fix, we should create `unstable_`-prefixed exports of individual features Expo currently depends on.
## Changelog:
[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from `react-native/dev-middleware`
Pull Request resolved: #41370
Test Plan: N / A
Reviewed By: robhogan
Differential Revision: D51163134
Pulled By: blakef
fbshipit-source-id: e67adaedc4fc64131e4c9dd8383c9877b8202283
gabrieldonadel added a commit to expo/expo that referenced this pull request Nov 18, 2023
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> #25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
onizam95 pushed a commit to onizam95/expo-av-drm that referenced this pull request Jan 15, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
DavidAmyot pushed a commit to Villeco-inc/expo-router that referenced this pull request Oct 16, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo/expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.p: ExpoPartner: ExpoPartnerPick RequestShared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

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

Expose unstable_InspectorProxy and unstable_Device from dev-middleware - #41370

Closed
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field
Closed

Expose unstable_InspectorProxy and unstable_Device from dev-middleware#41370
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field

Conversation

@gabrieldonadel

@gabrieldonadelgabrieldonadel commented Nov 8, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently, both metro-inspector-proxy(#39045) and @react-native-community/cli-plugin-metro(#38795) were moved to this repo and in the process of moving these packages, the exports field inside package.json was added, only exporting the index.js file.

The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the index.js file, e.g. Importing the InspectorProxy class from @react-native/dev-middleware/dist/inspector-proxy/InspectorProxy. Normally this wouldn't be a problem and we would just import from dist/ but due to the exports field, attempting to import from any other file not specified on this field will result in a ERR_PACKAGE_PATH_NOT_EXPORTED error.

As a short-term fix, we should create unstable_-prefixed exports of individual features Expo currently depends on.

Changelog:

[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from @react-native/dev-middleware

Test Plan:

N / A

@facebook-github-botfacebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Nov 8, 2023
@motiz88

motiz88 commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

Hey @gabrieldonadel, let's talk about alternatives to this PR. Generally speaking, strengthening the encapsulation of these packages was an intentional change to allow us to iterate faster, and removing exports would undo that.

Expo CLI should have a plan for moving off its dependencies on the internals of these packages, unless we make them intentionally public. Short term, we can be pragmatic here and create unstable_-prefixed exports of individual features Expo currently depends on, but you should expect them to be removed or otherwise break in a future release.

You mentioned InspectorProxy specifically. Note that we're actively working on this class and considering it an implementation detail of @react-native/dev-middleware. It's my understanding that in the long term, Expo CLI will use @react-native/dev-middleware directly and not depend on customising InspectorProxy. (cc @byCedric, @huntie)

Can you elaborate on other specific use cases for deep imports from these packages, and the plan for moving away from them?

@EvanBacon

Copy link
Copy Markdown
Contributor

For all dev tools packages (minus CLIs), I'd prefer if we could reach the internals as the iteration cycles would cause us potentially weeks/months of delay to get changes out to users, which would cause us to either delay react native upgrades or need to fork more code away from the community packages.

Since debugging is fairly stable in Expo CLI at the moment and we're currently in the middle of the react-native upgrade process, we could update this PR to expose all of the internal APIs we're using, either through the main export or package exports.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middleware and community-cli-pluginRemove package.json exports field from dev-middlewareNov 8, 2023
@byCedric

byCedric commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

I can speak for the use case of customizing the InspectorProxy and Device classes. We currently extend these two classes to add functionality, mainly in two categories:

  • Add new functionality, like the Network inspector.
  • Add workarounds/fixes to avoid hard crashes with Hermes.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

For the workaround / fixes, we need Hermes to stop crashing apps on any CDP message. Even when the CDP message content is malformed. E.g. Runtime.callFunctionOn could cause a crash when injecting a JS script using features not available in Hermes (see expo/vscode-expo#231 and expo/expo#25270 for the latest example, and all other Vscode... handlers to make vscode CDP messages not crash the app)

I think the best path forward on our end would be to keep extending these classes until the newer Hermes CDP backend is in place, and we migrated or upstreamed the network inspector.

For now, I think having access to the Device and InspectorProxy class, and it's initialization is the in-between step. If we could use createDevMiddleware with our own InspectorProxy class, we can switch to this in-between step and start consuming the @react-native/dev-middleware package. I believe this requirement around the InspectorProxy class was also what @huntie and I have discussed earlier, but correct me if I'm wrong 😄

@gabrieldonadel

Copy link
Copy Markdown
CollaboratorAuthor

Regarding @react-native/community-cli-plugin we will no longer need to change it as we were only using the saveAssets function and Evan just opened a PR updating the CLI to no longer use it expo/expo#25278

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from 4e11575 to 324def9CompareNovember 9, 2023 13:39
@github-actions

github-actionsBot commented Nov 9, 2023

Copy link
Copy Markdown
Warnings
⚠️

packages/dev-middleware/src/createDevMiddleware.js#L12 - packages/dev-middleware/src/createDevMiddleware.js line 12 – Requires should be sorted alphabetically (lint/sort-imports)

Generated by 🚫 dangerJS against 3c25924

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from ac137df to 2061b6dCompareNovember 9, 2023 13:59
@motiz88

Copy link
Copy Markdown
Contributor

@byCedric's updates to this PR (exposing unstable_Device, unstable_InspectorProxy as top-level exports, adding an unstable config option to replace the InspectorProxy implementation) make perfect sense to me for React Native 0.73. I've asked @blakef to help with landing this and getting it picked into the next 0.73 RC.

For 0.74 onwards, can we be proactive about moving away from these unstable mechanisms, and addressing the underlying problems in a sustainable way? Specifically:

we need Hermes to stop crashing apps on any CDP message

If this is a bug in Hermes's CDP handler, let's just fix it (cc @dannysu) and put unit tests around it - this doesn't have to be blocked on shipping the entire new CDP stack, and doesn't warrant keeping around a monkey-patched version of InspectorProxy.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

Let's derisk this. Adding a native network inspector inside RN is still an important goal for us, but it's likely the new CDP stack will ship without it at first. In that world, continuing to use a monkey-patched InspectorProxy is a reliability risk. Can we minimally port Expo's existing network inspector to a supported, tested API in InspectorProxy and stop relying on monkey-patching? (Note that InspectorProxy has an actual test suite now.) Even if that API is itself unstable_ and we still have the goal of migrating to a fully native solution.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middlewareExpose unstable_InspectorProxy and unstable_Device from dev-middlewareNov 9, 2023
@blakefblakef self-assigned this Nov 9, 2023
@facebook-github-bot

Copy link
Copy Markdown
Contributor

@blakef has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@github-actions

Copy link
Copy Markdown

This pull request was successfully merged by @gabrieldonadel in 1a61afd.

When will my fix make it into a release? | Upcoming Releases

@github-actionsgithub-actionsBot added the Merged This PR has been merged. label Nov 10, 2023
@gabrieldonadel
gabrieldonadel deleted the @gabrieldonadel/remove-exports-field branch November 10, 2023 13:14
lunaleaps pushed a commit that referenced this pull request Nov 17, 2023
#41370)
Summary:
Recently, both `metro-inspector-proxy`(#39045) and `react-native-community/cli-plugin-metro`(#38795) were moved to this repo and in the process of moving these packages, the `exports` field inside package.json was added, only exporting the `index.js` file.
The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the `index.js` file, e.g. Importing the InspectorProxy class from `react-native/dev-middleware/dist/inspector-proxy/InspectorProxy`. Normally this wouldn't be a problem and we would just import from `dist/` but due to the `exports` field, attempting to import from any other file not specified on this field will result in a `ERR_PACKAGE_PATH_NOT_EXPORTED` error.
As a short-term fix, we should create `unstable_`-prefixed exports of individual features Expo currently depends on.
## Changelog:
[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from `react-native/dev-middleware`
Pull Request resolved: #41370
Test Plan: N / A
Reviewed By: robhogan
Differential Revision: D51163134
Pulled By: blakef
fbshipit-source-id: e67adaedc4fc64131e4c9dd8383c9877b8202283
gabrieldonadel added a commit to expo/expo that referenced this pull request Nov 18, 2023
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> #25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
onizam95 pushed a commit to onizam95/expo-av-drm that referenced this pull request Jan 15, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
DavidAmyot pushed a commit to Villeco-inc/expo-router that referenced this pull request Oct 16, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo/expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.p: ExpoPartner: ExpoPartnerPick RequestShared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

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

Expose unstable_InspectorProxy and unstable_Device from dev-middleware - #41370

Closed
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field
Closed

Expose unstable_InspectorProxy and unstable_Device from dev-middleware#41370
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field

Conversation

@gabrieldonadel

@gabrieldonadelgabrieldonadel commented Nov 8, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently, both metro-inspector-proxy(#39045) and @react-native-community/cli-plugin-metro(#38795) were moved to this repo and in the process of moving these packages, the exports field inside package.json was added, only exporting the index.js file.

The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the index.js file, e.g. Importing the InspectorProxy class from @react-native/dev-middleware/dist/inspector-proxy/InspectorProxy. Normally this wouldn't be a problem and we would just import from dist/ but due to the exports field, attempting to import from any other file not specified on this field will result in a ERR_PACKAGE_PATH_NOT_EXPORTED error.

As a short-term fix, we should create unstable_-prefixed exports of individual features Expo currently depends on.

Changelog:

[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from @react-native/dev-middleware

Test Plan:

N / A

@facebook-github-botfacebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Nov 8, 2023
@motiz88

motiz88 commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

Hey @gabrieldonadel, let's talk about alternatives to this PR. Generally speaking, strengthening the encapsulation of these packages was an intentional change to allow us to iterate faster, and removing exports would undo that.

Expo CLI should have a plan for moving off its dependencies on the internals of these packages, unless we make them intentionally public. Short term, we can be pragmatic here and create unstable_-prefixed exports of individual features Expo currently depends on, but you should expect them to be removed or otherwise break in a future release.

You mentioned InspectorProxy specifically. Note that we're actively working on this class and considering it an implementation detail of @react-native/dev-middleware. It's my understanding that in the long term, Expo CLI will use @react-native/dev-middleware directly and not depend on customising InspectorProxy. (cc @byCedric, @huntie)

Can you elaborate on other specific use cases for deep imports from these packages, and the plan for moving away from them?

@EvanBacon

Copy link
Copy Markdown
Contributor

For all dev tools packages (minus CLIs), I'd prefer if we could reach the internals as the iteration cycles would cause us potentially weeks/months of delay to get changes out to users, which would cause us to either delay react native upgrades or need to fork more code away from the community packages.

Since debugging is fairly stable in Expo CLI at the moment and we're currently in the middle of the react-native upgrade process, we could update this PR to expose all of the internal APIs we're using, either through the main export or package exports.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middleware and community-cli-pluginRemove package.json exports field from dev-middlewareNov 8, 2023
@byCedric

byCedric commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

I can speak for the use case of customizing the InspectorProxy and Device classes. We currently extend these two classes to add functionality, mainly in two categories:

  • Add new functionality, like the Network inspector.
  • Add workarounds/fixes to avoid hard crashes with Hermes.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

For the workaround / fixes, we need Hermes to stop crashing apps on any CDP message. Even when the CDP message content is malformed. E.g. Runtime.callFunctionOn could cause a crash when injecting a JS script using features not available in Hermes (see expo/vscode-expo#231 and expo/expo#25270 for the latest example, and all other Vscode... handlers to make vscode CDP messages not crash the app)

I think the best path forward on our end would be to keep extending these classes until the newer Hermes CDP backend is in place, and we migrated or upstreamed the network inspector.

For now, I think having access to the Device and InspectorProxy class, and it's initialization is the in-between step. If we could use createDevMiddleware with our own InspectorProxy class, we can switch to this in-between step and start consuming the @react-native/dev-middleware package. I believe this requirement around the InspectorProxy class was also what @huntie and I have discussed earlier, but correct me if I'm wrong 😄

@gabrieldonadel

Copy link
Copy Markdown
CollaboratorAuthor

Regarding @react-native/community-cli-plugin we will no longer need to change it as we were only using the saveAssets function and Evan just opened a PR updating the CLI to no longer use it expo/expo#25278

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from 4e11575 to 324def9CompareNovember 9, 2023 13:39
@github-actions

github-actionsBot commented Nov 9, 2023

Copy link
Copy Markdown
Warnings
⚠️

packages/dev-middleware/src/createDevMiddleware.js#L12 - packages/dev-middleware/src/createDevMiddleware.js line 12 – Requires should be sorted alphabetically (lint/sort-imports)

Generated by 🚫 dangerJS against 3c25924

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from ac137df to 2061b6dCompareNovember 9, 2023 13:59
@motiz88

Copy link
Copy Markdown
Contributor

@byCedric's updates to this PR (exposing unstable_Device, unstable_InspectorProxy as top-level exports, adding an unstable config option to replace the InspectorProxy implementation) make perfect sense to me for React Native 0.73. I've asked @blakef to help with landing this and getting it picked into the next 0.73 RC.

For 0.74 onwards, can we be proactive about moving away from these unstable mechanisms, and addressing the underlying problems in a sustainable way? Specifically:

we need Hermes to stop crashing apps on any CDP message

If this is a bug in Hermes's CDP handler, let's just fix it (cc @dannysu) and put unit tests around it - this doesn't have to be blocked on shipping the entire new CDP stack, and doesn't warrant keeping around a monkey-patched version of InspectorProxy.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

Let's derisk this. Adding a native network inspector inside RN is still an important goal for us, but it's likely the new CDP stack will ship without it at first. In that world, continuing to use a monkey-patched InspectorProxy is a reliability risk. Can we minimally port Expo's existing network inspector to a supported, tested API in InspectorProxy and stop relying on monkey-patching? (Note that InspectorProxy has an actual test suite now.) Even if that API is itself unstable_ and we still have the goal of migrating to a fully native solution.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middlewareExpose unstable_InspectorProxy and unstable_Device from dev-middlewareNov 9, 2023
@blakefblakef self-assigned this Nov 9, 2023
@facebook-github-bot

Copy link
Copy Markdown
Contributor

@blakef has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@github-actions

Copy link
Copy Markdown

This pull request was successfully merged by @gabrieldonadel in 1a61afd.

When will my fix make it into a release? | Upcoming Releases

@github-actionsgithub-actionsBot added the Merged This PR has been merged. label Nov 10, 2023
@gabrieldonadel
gabrieldonadel deleted the @gabrieldonadel/remove-exports-field branch November 10, 2023 13:14
lunaleaps pushed a commit that referenced this pull request Nov 17, 2023
#41370)
Summary:
Recently, both `metro-inspector-proxy`(#39045) and `react-native-community/cli-plugin-metro`(#38795) were moved to this repo and in the process of moving these packages, the `exports` field inside package.json was added, only exporting the `index.js` file.
The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the `index.js` file, e.g. Importing the InspectorProxy class from `react-native/dev-middleware/dist/inspector-proxy/InspectorProxy`. Normally this wouldn't be a problem and we would just import from `dist/` but due to the `exports` field, attempting to import from any other file not specified on this field will result in a `ERR_PACKAGE_PATH_NOT_EXPORTED` error.
As a short-term fix, we should create `unstable_`-prefixed exports of individual features Expo currently depends on.
## Changelog:
[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from `react-native/dev-middleware`
Pull Request resolved: #41370
Test Plan: N / A
Reviewed By: robhogan
Differential Revision: D51163134
Pulled By: blakef
fbshipit-source-id: e67adaedc4fc64131e4c9dd8383c9877b8202283
gabrieldonadel added a commit to expo/expo that referenced this pull request Nov 18, 2023
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> #25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
onizam95 pushed a commit to onizam95/expo-av-drm that referenced this pull request Jan 15, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
DavidAmyot pushed a commit to Villeco-inc/expo-router that referenced this pull request Oct 16, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo/expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.p: ExpoPartner: ExpoPartnerPick RequestShared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

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

Expose unstable_InspectorProxy and unstable_Device from dev-middleware - #41370

Closed
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field
Closed

Expose unstable_InspectorProxy and unstable_Device from dev-middleware#41370
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field

Conversation

@gabrieldonadel

@gabrieldonadelgabrieldonadel commented Nov 8, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently, both metro-inspector-proxy(#39045) and @react-native-community/cli-plugin-metro(#38795) were moved to this repo and in the process of moving these packages, the exports field inside package.json was added, only exporting the index.js file.

The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the index.js file, e.g. Importing the InspectorProxy class from @react-native/dev-middleware/dist/inspector-proxy/InspectorProxy. Normally this wouldn't be a problem and we would just import from dist/ but due to the exports field, attempting to import from any other file not specified on this field will result in a ERR_PACKAGE_PATH_NOT_EXPORTED error.

As a short-term fix, we should create unstable_-prefixed exports of individual features Expo currently depends on.

Changelog:

[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from @react-native/dev-middleware

Test Plan:

N / A

@facebook-github-botfacebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Nov 8, 2023
@motiz88

motiz88 commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

Hey @gabrieldonadel, let's talk about alternatives to this PR. Generally speaking, strengthening the encapsulation of these packages was an intentional change to allow us to iterate faster, and removing exports would undo that.

Expo CLI should have a plan for moving off its dependencies on the internals of these packages, unless we make them intentionally public. Short term, we can be pragmatic here and create unstable_-prefixed exports of individual features Expo currently depends on, but you should expect them to be removed or otherwise break in a future release.

You mentioned InspectorProxy specifically. Note that we're actively working on this class and considering it an implementation detail of @react-native/dev-middleware. It's my understanding that in the long term, Expo CLI will use @react-native/dev-middleware directly and not depend on customising InspectorProxy. (cc @byCedric, @huntie)

Can you elaborate on other specific use cases for deep imports from these packages, and the plan for moving away from them?

@EvanBacon

Copy link
Copy Markdown
Contributor

For all dev tools packages (minus CLIs), I'd prefer if we could reach the internals as the iteration cycles would cause us potentially weeks/months of delay to get changes out to users, which would cause us to either delay react native upgrades or need to fork more code away from the community packages.

Since debugging is fairly stable in Expo CLI at the moment and we're currently in the middle of the react-native upgrade process, we could update this PR to expose all of the internal APIs we're using, either through the main export or package exports.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middleware and community-cli-pluginRemove package.json exports field from dev-middlewareNov 8, 2023
@byCedric

byCedric commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

I can speak for the use case of customizing the InspectorProxy and Device classes. We currently extend these two classes to add functionality, mainly in two categories:

  • Add new functionality, like the Network inspector.
  • Add workarounds/fixes to avoid hard crashes with Hermes.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

For the workaround / fixes, we need Hermes to stop crashing apps on any CDP message. Even when the CDP message content is malformed. E.g. Runtime.callFunctionOn could cause a crash when injecting a JS script using features not available in Hermes (see expo/vscode-expo#231 and expo/expo#25270 for the latest example, and all other Vscode... handlers to make vscode CDP messages not crash the app)

I think the best path forward on our end would be to keep extending these classes until the newer Hermes CDP backend is in place, and we migrated or upstreamed the network inspector.

For now, I think having access to the Device and InspectorProxy class, and it's initialization is the in-between step. If we could use createDevMiddleware with our own InspectorProxy class, we can switch to this in-between step and start consuming the @react-native/dev-middleware package. I believe this requirement around the InspectorProxy class was also what @huntie and I have discussed earlier, but correct me if I'm wrong 😄

@gabrieldonadel

Copy link
Copy Markdown
CollaboratorAuthor

Regarding @react-native/community-cli-plugin we will no longer need to change it as we were only using the saveAssets function and Evan just opened a PR updating the CLI to no longer use it expo/expo#25278

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from 4e11575 to 324def9CompareNovember 9, 2023 13:39
@github-actions

github-actionsBot commented Nov 9, 2023

Copy link
Copy Markdown
Warnings
⚠️

packages/dev-middleware/src/createDevMiddleware.js#L12 - packages/dev-middleware/src/createDevMiddleware.js line 12 – Requires should be sorted alphabetically (lint/sort-imports)

Generated by 🚫 dangerJS against 3c25924

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from ac137df to 2061b6dCompareNovember 9, 2023 13:59
@motiz88

Copy link
Copy Markdown
Contributor

@byCedric's updates to this PR (exposing unstable_Device, unstable_InspectorProxy as top-level exports, adding an unstable config option to replace the InspectorProxy implementation) make perfect sense to me for React Native 0.73. I've asked @blakef to help with landing this and getting it picked into the next 0.73 RC.

For 0.74 onwards, can we be proactive about moving away from these unstable mechanisms, and addressing the underlying problems in a sustainable way? Specifically:

we need Hermes to stop crashing apps on any CDP message

If this is a bug in Hermes's CDP handler, let's just fix it (cc @dannysu) and put unit tests around it - this doesn't have to be blocked on shipping the entire new CDP stack, and doesn't warrant keeping around a monkey-patched version of InspectorProxy.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

Let's derisk this. Adding a native network inspector inside RN is still an important goal for us, but it's likely the new CDP stack will ship without it at first. In that world, continuing to use a monkey-patched InspectorProxy is a reliability risk. Can we minimally port Expo's existing network inspector to a supported, tested API in InspectorProxy and stop relying on monkey-patching? (Note that InspectorProxy has an actual test suite now.) Even if that API is itself unstable_ and we still have the goal of migrating to a fully native solution.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middlewareExpose unstable_InspectorProxy and unstable_Device from dev-middlewareNov 9, 2023
@blakefblakef self-assigned this Nov 9, 2023
@facebook-github-bot

Copy link
Copy Markdown
Contributor

@blakef has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@github-actions

Copy link
Copy Markdown

This pull request was successfully merged by @gabrieldonadel in 1a61afd.

When will my fix make it into a release? | Upcoming Releases

@github-actionsgithub-actionsBot added the Merged This PR has been merged. label Nov 10, 2023
@gabrieldonadel
gabrieldonadel deleted the @gabrieldonadel/remove-exports-field branch November 10, 2023 13:14
lunaleaps pushed a commit that referenced this pull request Nov 17, 2023
#41370)
Summary:
Recently, both `metro-inspector-proxy`(#39045) and `react-native-community/cli-plugin-metro`(#38795) were moved to this repo and in the process of moving these packages, the `exports` field inside package.json was added, only exporting the `index.js` file.
The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the `index.js` file, e.g. Importing the InspectorProxy class from `react-native/dev-middleware/dist/inspector-proxy/InspectorProxy`. Normally this wouldn't be a problem and we would just import from `dist/` but due to the `exports` field, attempting to import from any other file not specified on this field will result in a `ERR_PACKAGE_PATH_NOT_EXPORTED` error.
As a short-term fix, we should create `unstable_`-prefixed exports of individual features Expo currently depends on.
## Changelog:
[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from `react-native/dev-middleware`
Pull Request resolved: #41370
Test Plan: N / A
Reviewed By: robhogan
Differential Revision: D51163134
Pulled By: blakef
fbshipit-source-id: e67adaedc4fc64131e4c9dd8383c9877b8202283
gabrieldonadel added a commit to expo/expo that referenced this pull request Nov 18, 2023
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> #25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
onizam95 pushed a commit to onizam95/expo-av-drm that referenced this pull request Jan 15, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
DavidAmyot pushed a commit to Villeco-inc/expo-router that referenced this pull request Oct 16, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo/expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.p: ExpoPartner: ExpoPartnerPick RequestShared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

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

Expose unstable_InspectorProxy and unstable_Device from dev-middleware - #41370

Closed
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field
Closed

Expose unstable_InspectorProxy and unstable_Device from dev-middleware#41370
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field

Conversation

@gabrieldonadel

@gabrieldonadelgabrieldonadel commented Nov 8, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently, both metro-inspector-proxy(#39045) and @react-native-community/cli-plugin-metro(#38795) were moved to this repo and in the process of moving these packages, the exports field inside package.json was added, only exporting the index.js file.

The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the index.js file, e.g. Importing the InspectorProxy class from @react-native/dev-middleware/dist/inspector-proxy/InspectorProxy. Normally this wouldn't be a problem and we would just import from dist/ but due to the exports field, attempting to import from any other file not specified on this field will result in a ERR_PACKAGE_PATH_NOT_EXPORTED error.

As a short-term fix, we should create unstable_-prefixed exports of individual features Expo currently depends on.

Changelog:

[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from @react-native/dev-middleware

Test Plan:

N / A

@facebook-github-botfacebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Nov 8, 2023
@motiz88

motiz88 commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

Hey @gabrieldonadel, let's talk about alternatives to this PR. Generally speaking, strengthening the encapsulation of these packages was an intentional change to allow us to iterate faster, and removing exports would undo that.

Expo CLI should have a plan for moving off its dependencies on the internals of these packages, unless we make them intentionally public. Short term, we can be pragmatic here and create unstable_-prefixed exports of individual features Expo currently depends on, but you should expect them to be removed or otherwise break in a future release.

You mentioned InspectorProxy specifically. Note that we're actively working on this class and considering it an implementation detail of @react-native/dev-middleware. It's my understanding that in the long term, Expo CLI will use @react-native/dev-middleware directly and not depend on customising InspectorProxy. (cc @byCedric, @huntie)

Can you elaborate on other specific use cases for deep imports from these packages, and the plan for moving away from them?

@EvanBacon

Copy link
Copy Markdown
Contributor

For all dev tools packages (minus CLIs), I'd prefer if we could reach the internals as the iteration cycles would cause us potentially weeks/months of delay to get changes out to users, which would cause us to either delay react native upgrades or need to fork more code away from the community packages.

Since debugging is fairly stable in Expo CLI at the moment and we're currently in the middle of the react-native upgrade process, we could update this PR to expose all of the internal APIs we're using, either through the main export or package exports.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middleware and community-cli-pluginRemove package.json exports field from dev-middlewareNov 8, 2023
@byCedric

byCedric commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

I can speak for the use case of customizing the InspectorProxy and Device classes. We currently extend these two classes to add functionality, mainly in two categories:

  • Add new functionality, like the Network inspector.
  • Add workarounds/fixes to avoid hard crashes with Hermes.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

For the workaround / fixes, we need Hermes to stop crashing apps on any CDP message. Even when the CDP message content is malformed. E.g. Runtime.callFunctionOn could cause a crash when injecting a JS script using features not available in Hermes (see expo/vscode-expo#231 and expo/expo#25270 for the latest example, and all other Vscode... handlers to make vscode CDP messages not crash the app)

I think the best path forward on our end would be to keep extending these classes until the newer Hermes CDP backend is in place, and we migrated or upstreamed the network inspector.

For now, I think having access to the Device and InspectorProxy class, and it's initialization is the in-between step. If we could use createDevMiddleware with our own InspectorProxy class, we can switch to this in-between step and start consuming the @react-native/dev-middleware package. I believe this requirement around the InspectorProxy class was also what @huntie and I have discussed earlier, but correct me if I'm wrong 😄

@gabrieldonadel

Copy link
Copy Markdown
CollaboratorAuthor

Regarding @react-native/community-cli-plugin we will no longer need to change it as we were only using the saveAssets function and Evan just opened a PR updating the CLI to no longer use it expo/expo#25278

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from 4e11575 to 324def9CompareNovember 9, 2023 13:39
@github-actions

github-actionsBot commented Nov 9, 2023

Copy link
Copy Markdown
Warnings
⚠️

packages/dev-middleware/src/createDevMiddleware.js#L12 - packages/dev-middleware/src/createDevMiddleware.js line 12 – Requires should be sorted alphabetically (lint/sort-imports)

Generated by 🚫 dangerJS against 3c25924

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from ac137df to 2061b6dCompareNovember 9, 2023 13:59
@motiz88

Copy link
Copy Markdown
Contributor

@byCedric's updates to this PR (exposing unstable_Device, unstable_InspectorProxy as top-level exports, adding an unstable config option to replace the InspectorProxy implementation) make perfect sense to me for React Native 0.73. I've asked @blakef to help with landing this and getting it picked into the next 0.73 RC.

For 0.74 onwards, can we be proactive about moving away from these unstable mechanisms, and addressing the underlying problems in a sustainable way? Specifically:

we need Hermes to stop crashing apps on any CDP message

If this is a bug in Hermes's CDP handler, let's just fix it (cc @dannysu) and put unit tests around it - this doesn't have to be blocked on shipping the entire new CDP stack, and doesn't warrant keeping around a monkey-patched version of InspectorProxy.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

Let's derisk this. Adding a native network inspector inside RN is still an important goal for us, but it's likely the new CDP stack will ship without it at first. In that world, continuing to use a monkey-patched InspectorProxy is a reliability risk. Can we minimally port Expo's existing network inspector to a supported, tested API in InspectorProxy and stop relying on monkey-patching? (Note that InspectorProxy has an actual test suite now.) Even if that API is itself unstable_ and we still have the goal of migrating to a fully native solution.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middlewareExpose unstable_InspectorProxy and unstable_Device from dev-middlewareNov 9, 2023
@blakefblakef self-assigned this Nov 9, 2023
@facebook-github-bot

Copy link
Copy Markdown
Contributor

@blakef has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@github-actions

Copy link
Copy Markdown

This pull request was successfully merged by @gabrieldonadel in 1a61afd.

When will my fix make it into a release? | Upcoming Releases

@github-actionsgithub-actionsBot added the Merged This PR has been merged. label Nov 10, 2023
@gabrieldonadel
gabrieldonadel deleted the @gabrieldonadel/remove-exports-field branch November 10, 2023 13:14
lunaleaps pushed a commit that referenced this pull request Nov 17, 2023
#41370)
Summary:
Recently, both `metro-inspector-proxy`(#39045) and `react-native-community/cli-plugin-metro`(#38795) were moved to this repo and in the process of moving these packages, the `exports` field inside package.json was added, only exporting the `index.js` file.
The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the `index.js` file, e.g. Importing the InspectorProxy class from `react-native/dev-middleware/dist/inspector-proxy/InspectorProxy`. Normally this wouldn't be a problem and we would just import from `dist/` but due to the `exports` field, attempting to import from any other file not specified on this field will result in a `ERR_PACKAGE_PATH_NOT_EXPORTED` error.
As a short-term fix, we should create `unstable_`-prefixed exports of individual features Expo currently depends on.
## Changelog:
[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from `react-native/dev-middleware`
Pull Request resolved: #41370
Test Plan: N / A
Reviewed By: robhogan
Differential Revision: D51163134
Pulled By: blakef
fbshipit-source-id: e67adaedc4fc64131e4c9dd8383c9877b8202283
gabrieldonadel added a commit to expo/expo that referenced this pull request Nov 18, 2023
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> #25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
onizam95 pushed a commit to onizam95/expo-av-drm that referenced this pull request Jan 15, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
DavidAmyot pushed a commit to Villeco-inc/expo-router that referenced this pull request Oct 16, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo/expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.p: ExpoPartner: ExpoPartnerPick RequestShared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

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

Expose unstable_InspectorProxy and unstable_Device from dev-middleware - #41370

Closed
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field
Closed

Expose unstable_InspectorProxy and unstable_Device from dev-middleware#41370
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field

Conversation

@gabrieldonadel

@gabrieldonadelgabrieldonadel commented Nov 8, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently, both metro-inspector-proxy(#39045) and @react-native-community/cli-plugin-metro(#38795) were moved to this repo and in the process of moving these packages, the exports field inside package.json was added, only exporting the index.js file.

The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the index.js file, e.g. Importing the InspectorProxy class from @react-native/dev-middleware/dist/inspector-proxy/InspectorProxy. Normally this wouldn't be a problem and we would just import from dist/ but due to the exports field, attempting to import from any other file not specified on this field will result in a ERR_PACKAGE_PATH_NOT_EXPORTED error.

As a short-term fix, we should create unstable_-prefixed exports of individual features Expo currently depends on.

Changelog:

[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from @react-native/dev-middleware

Test Plan:

N / A

@facebook-github-botfacebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Nov 8, 2023
@motiz88

motiz88 commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

Hey @gabrieldonadel, let's talk about alternatives to this PR. Generally speaking, strengthening the encapsulation of these packages was an intentional change to allow us to iterate faster, and removing exports would undo that.

Expo CLI should have a plan for moving off its dependencies on the internals of these packages, unless we make them intentionally public. Short term, we can be pragmatic here and create unstable_-prefixed exports of individual features Expo currently depends on, but you should expect them to be removed or otherwise break in a future release.

You mentioned InspectorProxy specifically. Note that we're actively working on this class and considering it an implementation detail of @react-native/dev-middleware. It's my understanding that in the long term, Expo CLI will use @react-native/dev-middleware directly and not depend on customising InspectorProxy. (cc @byCedric, @huntie)

Can you elaborate on other specific use cases for deep imports from these packages, and the plan for moving away from them?

@EvanBacon

Copy link
Copy Markdown
Contributor

For all dev tools packages (minus CLIs), I'd prefer if we could reach the internals as the iteration cycles would cause us potentially weeks/months of delay to get changes out to users, which would cause us to either delay react native upgrades or need to fork more code away from the community packages.

Since debugging is fairly stable in Expo CLI at the moment and we're currently in the middle of the react-native upgrade process, we could update this PR to expose all of the internal APIs we're using, either through the main export or package exports.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middleware and community-cli-pluginRemove package.json exports field from dev-middlewareNov 8, 2023
@byCedric

byCedric commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

I can speak for the use case of customizing the InspectorProxy and Device classes. We currently extend these two classes to add functionality, mainly in two categories:

  • Add new functionality, like the Network inspector.
  • Add workarounds/fixes to avoid hard crashes with Hermes.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

For the workaround / fixes, we need Hermes to stop crashing apps on any CDP message. Even when the CDP message content is malformed. E.g. Runtime.callFunctionOn could cause a crash when injecting a JS script using features not available in Hermes (see expo/vscode-expo#231 and expo/expo#25270 for the latest example, and all other Vscode... handlers to make vscode CDP messages not crash the app)

I think the best path forward on our end would be to keep extending these classes until the newer Hermes CDP backend is in place, and we migrated or upstreamed the network inspector.

For now, I think having access to the Device and InspectorProxy class, and it's initialization is the in-between step. If we could use createDevMiddleware with our own InspectorProxy class, we can switch to this in-between step and start consuming the @react-native/dev-middleware package. I believe this requirement around the InspectorProxy class was also what @huntie and I have discussed earlier, but correct me if I'm wrong 😄

@gabrieldonadel

Copy link
Copy Markdown
CollaboratorAuthor

Regarding @react-native/community-cli-plugin we will no longer need to change it as we were only using the saveAssets function and Evan just opened a PR updating the CLI to no longer use it expo/expo#25278

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from 4e11575 to 324def9CompareNovember 9, 2023 13:39
@github-actions

github-actionsBot commented Nov 9, 2023

Copy link
Copy Markdown
Warnings
⚠️

packages/dev-middleware/src/createDevMiddleware.js#L12 - packages/dev-middleware/src/createDevMiddleware.js line 12 – Requires should be sorted alphabetically (lint/sort-imports)

Generated by 🚫 dangerJS against 3c25924

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from ac137df to 2061b6dCompareNovember 9, 2023 13:59
@motiz88

Copy link
Copy Markdown
Contributor

@byCedric's updates to this PR (exposing unstable_Device, unstable_InspectorProxy as top-level exports, adding an unstable config option to replace the InspectorProxy implementation) make perfect sense to me for React Native 0.73. I've asked @blakef to help with landing this and getting it picked into the next 0.73 RC.

For 0.74 onwards, can we be proactive about moving away from these unstable mechanisms, and addressing the underlying problems in a sustainable way? Specifically:

we need Hermes to stop crashing apps on any CDP message

If this is a bug in Hermes's CDP handler, let's just fix it (cc @dannysu) and put unit tests around it - this doesn't have to be blocked on shipping the entire new CDP stack, and doesn't warrant keeping around a monkey-patched version of InspectorProxy.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

Let's derisk this. Adding a native network inspector inside RN is still an important goal for us, but it's likely the new CDP stack will ship without it at first. In that world, continuing to use a monkey-patched InspectorProxy is a reliability risk. Can we minimally port Expo's existing network inspector to a supported, tested API in InspectorProxy and stop relying on monkey-patching? (Note that InspectorProxy has an actual test suite now.) Even if that API is itself unstable_ and we still have the goal of migrating to a fully native solution.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middlewareExpose unstable_InspectorProxy and unstable_Device from dev-middlewareNov 9, 2023
@blakefblakef self-assigned this Nov 9, 2023
@facebook-github-bot

Copy link
Copy Markdown
Contributor

@blakef has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@github-actions

Copy link
Copy Markdown

This pull request was successfully merged by @gabrieldonadel in 1a61afd.

When will my fix make it into a release? | Upcoming Releases

@github-actionsgithub-actionsBot added the Merged This PR has been merged. label Nov 10, 2023
@gabrieldonadel
gabrieldonadel deleted the @gabrieldonadel/remove-exports-field branch November 10, 2023 13:14
lunaleaps pushed a commit that referenced this pull request Nov 17, 2023
#41370)
Summary:
Recently, both `metro-inspector-proxy`(#39045) and `react-native-community/cli-plugin-metro`(#38795) were moved to this repo and in the process of moving these packages, the `exports` field inside package.json was added, only exporting the `index.js` file.
The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the `index.js` file, e.g. Importing the InspectorProxy class from `react-native/dev-middleware/dist/inspector-proxy/InspectorProxy`. Normally this wouldn't be a problem and we would just import from `dist/` but due to the `exports` field, attempting to import from any other file not specified on this field will result in a `ERR_PACKAGE_PATH_NOT_EXPORTED` error.
As a short-term fix, we should create `unstable_`-prefixed exports of individual features Expo currently depends on.
## Changelog:
[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from `react-native/dev-middleware`
Pull Request resolved: #41370
Test Plan: N / A
Reviewed By: robhogan
Differential Revision: D51163134
Pulled By: blakef
fbshipit-source-id: e67adaedc4fc64131e4c9dd8383c9877b8202283
gabrieldonadel added a commit to expo/expo that referenced this pull request Nov 18, 2023
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> #25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
onizam95 pushed a commit to onizam95/expo-av-drm that referenced this pull request Jan 15, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
DavidAmyot pushed a commit to Villeco-inc/expo-router that referenced this pull request Oct 16, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo/expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.p: ExpoPartner: ExpoPartnerPick RequestShared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

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

Expose unstable_InspectorProxy and unstable_Device from dev-middleware - #41370

Closed
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field
Closed

Expose unstable_InspectorProxy and unstable_Device from dev-middleware#41370
gabrieldonadel wants to merge 4 commits into
react:mainfrom
gabrieldonadel:@gabrieldonadel/remove-exports-field

Conversation

@gabrieldonadel

@gabrieldonadelgabrieldonadel commented Nov 8, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently, both metro-inspector-proxy(#39045) and @react-native-community/cli-plugin-metro(#38795) were moved to this repo and in the process of moving these packages, the exports field inside package.json was added, only exporting the index.js file.

The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the index.js file, e.g. Importing the InspectorProxy class from @react-native/dev-middleware/dist/inspector-proxy/InspectorProxy. Normally this wouldn't be a problem and we would just import from dist/ but due to the exports field, attempting to import from any other file not specified on this field will result in a ERR_PACKAGE_PATH_NOT_EXPORTED error.

As a short-term fix, we should create unstable_-prefixed exports of individual features Expo currently depends on.

Changelog:

[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from @react-native/dev-middleware

Test Plan:

N / A

@facebook-github-botfacebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Nov 8, 2023
@motiz88

motiz88 commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

Hey @gabrieldonadel, let's talk about alternatives to this PR. Generally speaking, strengthening the encapsulation of these packages was an intentional change to allow us to iterate faster, and removing exports would undo that.

Expo CLI should have a plan for moving off its dependencies on the internals of these packages, unless we make them intentionally public. Short term, we can be pragmatic here and create unstable_-prefixed exports of individual features Expo currently depends on, but you should expect them to be removed or otherwise break in a future release.

You mentioned InspectorProxy specifically. Note that we're actively working on this class and considering it an implementation detail of @react-native/dev-middleware. It's my understanding that in the long term, Expo CLI will use @react-native/dev-middleware directly and not depend on customising InspectorProxy. (cc @byCedric, @huntie)

Can you elaborate on other specific use cases for deep imports from these packages, and the plan for moving away from them?

@EvanBacon

Copy link
Copy Markdown
Contributor

For all dev tools packages (minus CLIs), I'd prefer if we could reach the internals as the iteration cycles would cause us potentially weeks/months of delay to get changes out to users, which would cause us to either delay react native upgrades or need to fork more code away from the community packages.

Since debugging is fairly stable in Expo CLI at the moment and we're currently in the middle of the react-native upgrade process, we could update this PR to expose all of the internal APIs we're using, either through the main export or package exports.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middleware and community-cli-pluginRemove package.json exports field from dev-middlewareNov 8, 2023
@byCedric

byCedric commented Nov 8, 2023

Copy link
Copy Markdown
Contributor

I can speak for the use case of customizing the InspectorProxy and Device classes. We currently extend these two classes to add functionality, mainly in two categories:

  • Add new functionality, like the Network inspector.
  • Add workarounds/fixes to avoid hard crashes with Hermes.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

For the workaround / fixes, we need Hermes to stop crashing apps on any CDP message. Even when the CDP message content is malformed. E.g. Runtime.callFunctionOn could cause a crash when injecting a JS script using features not available in Hermes (see expo/vscode-expo#231 and expo/expo#25270 for the latest example, and all other Vscode... handlers to make vscode CDP messages not crash the app)

I think the best path forward on our end would be to keep extending these classes until the newer Hermes CDP backend is in place, and we migrated or upstreamed the network inspector.

For now, I think having access to the Device and InspectorProxy class, and it's initialization is the in-between step. If we could use createDevMiddleware with our own InspectorProxy class, we can switch to this in-between step and start consuming the @react-native/dev-middleware package. I believe this requirement around the InspectorProxy class was also what @huntie and I have discussed earlier, but correct me if I'm wrong 😄

@gabrieldonadel

Copy link
Copy Markdown
CollaboratorAuthor

Regarding @react-native/community-cli-plugin we will no longer need to change it as we were only using the saveAssets function and Evan just opened a PR updating the CLI to no longer use it expo/expo#25278

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from 4e11575 to 324def9CompareNovember 9, 2023 13:39
@github-actions

github-actionsBot commented Nov 9, 2023

Copy link
Copy Markdown
Warnings
⚠️

packages/dev-middleware/src/createDevMiddleware.js#L12 - packages/dev-middleware/src/createDevMiddleware.js line 12 – Requires should be sorted alphabetically (lint/sort-imports)

Generated by 🚫 dangerJS against 3c25924

@byCedric
byCedricforce-pushed the @gabrieldonadel/remove-exports-field branch from ac137df to 2061b6dCompareNovember 9, 2023 13:59
@motiz88

Copy link
Copy Markdown
Contributor

@byCedric's updates to this PR (exposing unstable_Device, unstable_InspectorProxy as top-level exports, adding an unstable config option to replace the InspectorProxy implementation) make perfect sense to me for React Native 0.73. I've asked @blakef to help with landing this and getting it picked into the next 0.73 RC.

For 0.74 onwards, can we be proactive about moving away from these unstable mechanisms, and addressing the underlying problems in a sustainable way? Specifically:

we need Hermes to stop crashing apps on any CDP message

If this is a bug in Hermes's CDP handler, let's just fix it (cc @dannysu) and put unit tests around it - this doesn't have to be blocked on shipping the entire new CDP stack, and doesn't warrant keeping around a monkey-patched version of InspectorProxy.

For the network inspector, we can only move off our extended proxy when the new native Hermes CDP backend is ready and we re-implemented the network inspector in the new system.

Let's derisk this. Adding a native network inspector inside RN is still an important goal for us, but it's likely the new CDP stack will ship without it at first. In that world, continuing to use a monkey-patched InspectorProxy is a reliability risk. Can we minimally port Expo's existing network inspector to a supported, tested API in InspectorProxy and stop relying on monkey-patching? (Note that InspectorProxy has an actual test suite now.) Even if that API is itself unstable_ and we still have the goal of migrating to a fully native solution.

@gabrieldonadelgabrieldonadel changed the title Remove package.json exports field from dev-middlewareExpose unstable_InspectorProxy and unstable_Device from dev-middlewareNov 9, 2023
@blakefblakef self-assigned this Nov 9, 2023
@facebook-github-bot

Copy link
Copy Markdown
Contributor

@blakef has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@github-actions

Copy link
Copy Markdown

This pull request was successfully merged by @gabrieldonadel in 1a61afd.

When will my fix make it into a release? | Upcoming Releases

@github-actionsgithub-actionsBot added the Merged This PR has been merged. label Nov 10, 2023
@gabrieldonadel
gabrieldonadel deleted the @gabrieldonadel/remove-exports-field branch November 10, 2023 13:14
lunaleaps pushed a commit that referenced this pull request Nov 17, 2023
#41370)
Summary:
Recently, both `metro-inspector-proxy`(#39045) and `react-native-community/cli-plugin-metro`(#38795) were moved to this repo and in the process of moving these packages, the `exports` field inside package.json was added, only exporting the `index.js` file.
The problem is that Expo CLI (and possibly other community packages) rely on functions and classes that are not exported in the `index.js` file, e.g. Importing the InspectorProxy class from `react-native/dev-middleware/dist/inspector-proxy/InspectorProxy`. Normally this wouldn't be a problem and we would just import from `dist/` but due to the `exports` field, attempting to import from any other file not specified on this field will result in a `ERR_PACKAGE_PATH_NOT_EXPORTED` error.
As a short-term fix, we should create `unstable_`-prefixed exports of individual features Expo currently depends on.
## Changelog:
[INTERNAL] [CHANGED] - Expose unstable_InspectorProxy and unstable_Device from `react-native/dev-middleware`
Pull Request resolved: #41370
Test Plan: N / A
Reviewed By: robhogan
Differential Revision: D51163134
Pulled By: blakef
fbshipit-source-id: e67adaedc4fc64131e4c9dd8383c9877b8202283
gabrieldonadel added a commit to expo/expo that referenced this pull request Nov 18, 2023
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> #25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
onizam95 pushed a commit to onizam95/expo-av-drm that referenced this pull request Jan 15, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
DavidAmyot pushed a commit to Villeco-inc/expo-router that referenced this pull request Oct 16, 2024
# Why
upgrade react-native 0.73 for sdk 50
Closes ENG-9739
# How
- update package versions
- `react-native 0.72.5 -> 0.73.0-rc.4` - `@react-native/assets-registry 0.72.0 -> 0.73.1` - `metro-react-native-babel-preset 0.76.8 -> @react-native/babel-preset
0.73.18`
- upgrade project templates based on
[upgrade-helper](https://react-native-community.github.io/upgrade-helper/?from=0.72.5&to=0.73.0-rc.2)
- Backport folly_version bump to v2022.05.16.00
- Expo Go
- Add Agp configurator plugin in order to make sure `buildConfig` is
turned on for all the 3rd party libraries and ensure namespace is
specified for all the 3rd party libraries
- Migrate go to version catalogs - Temporarily patched @react-native/dev-middleware while
`react-native@0.73.0-rc.5` is not out (check
react/react-native#41370 for more context)
- cli - Migrate metro-inspector-proxy to @react-native/dev-middleware
- remove runInspectorProxy logic
- [gesture-handler] Temporarily patched patch before
software-mansion/react-native-gesture-handler@4efaebc
is released
- [modules][dev-menu] Update import paths for fabric
- [html-elements] Update Style types
- for other details, please check the commit histories one by one. # Next steps
Part 2 -> expo/expo#25453
- Upgrade react-native to 0.73.0 when the official release is out
- Remove all patches - Part 2
- Move AgpConfiguratorPlugin to a different file
- Migrate MainApplication / MainActivity to kotlin
# Test Plan
- bare-expo ios / android
- Expo Go
- fabric ios / android
- ci passed
# Checklist
- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
---------
Co-authored-by: Kudo Chien <kudo@expo.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.p: ExpoPartner: ExpoPartnerPick RequestShared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants

@gabrieldonadel@motiz88@EvanBacon@byCedric@facebook-github-bot@blakef