') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); fix: Drop @react-native/metro-config dep for RN 0.72 config fallback by huntie · Pull Request #1899 · react-native-community/cli · GitHub
Skip to content

fix: Drop @react-native/metro-config dep for RN 0.72 config fallback - #1899

Merged
thymikee merged 1 commit into
react-native-community:mainfrom
huntie:drop-metro-config-dep
Apr 6, 2023
Merged

fix: Drop @react-native/metro-config dep for RN 0.72 config fallback#1899
thymikee merged 1 commit into
react-native-community:mainfrom
huntie:drop-metro-config-dep

Conversation

@huntie

@huntiehuntie commented Apr 4, 2023•
edited
Loading

Copy link
Copy Markdown
Collaborator

Context

React Native Metro config → React Native repo (react/react-native#36502)

This is a follow up to #1896.

Unfortunately the most recent CLI release was auto-consumed in React Native's CI, exposing a blocker where we could not consume the (repo-)circular dependency react-native → @react-native-community/cli-plugin-metro → @react-native/metro-config — I 100% jumped the gun on this setup(!).

While this is now mitigated by the new CLI release process, and possible in practice, we're opting to remove this circular setup as it would introduce maintenance headaches while we are working across two repos.

Changelog: Internal

This is an architectural simplification targeting React Native main (0.73). However it is also worth cherry picking this commit to RN CLI 10.x (targeting RN 0.72), so that we can once again bump all local Metro dependencies here (and replicate those bumps in both 11.x and 10.x). cc @robhogan@cipolleschi

Open as #1901.

Changes

  • Drop @react-native/metro-config dependency from cli-plugin-metro.
  • Restore reproduced @react-native/metro-config default config within cli-plugin-metro (to be used in the fallback case only).
    • This is now equivalent to the original (abandoned) version of #1875.
    • Ideally, we will only keep these values in this repo for the next 1-2 versions of React Native. Once removed, we will still have the throw-descriptive-error fallback for unmigrated projects.

Note: An alternative approach for this is peerDependencies, but given the recent issues and how this might affect strict internal and open source CI, I'm opting for the absolutely bulletproof solution.

Test Plan

(Repeats test plan instructions from #1896).

New 0.72 config setup (project extends @react-native/metro-config)Fallback 0.71 config setup (project does not extend @react-native/metro-config)
imageimage

✅ Identical configs are produced
(With only path changes from yarn link)

image

@huntie
huntieforce-pushed the drop-metro-config-dep branch from 8032e95 to 19a07b6CompareApril 4, 2023 13:08
huntie
huntie commented Apr 4, 2023
View reviewed changes
Comment threadpackages/cli-plugin-metro/package.json
Comment on lines +17 to +19
"metro-react-native-babel-transformer": "0.76.0",
"metro-resolver": "0.76.0",
"metro-runtime": "0.76.0",

@huntiehuntieApr 4, 2023•
edited
Loading

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Restored (https://github.com/react-native-community/cli/pull/1875/files#diff-8218c5d0d266cb441ba7888833fc1aa54be26645ad47cf87253183504904fdd9L17-L19).

huntie
huntie commented Apr 4, 2023
View reviewed changes
Comment threadpackages/cli-plugin-metro/src/tools/getDefaultMetroConfig.ts
Comment on lines +61 to +62
getPolyfills: () =>
require(path.join(ctx.reactNativePath, 'rn-get-polyfills'))(),

@huntiehuntieApr 4, 2023•
edited
Loading

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Restored (https://github.com/react-native-community/cli/pull/1875/files#diff-3eb3e1e81b924a57b22a630c633912f2f8777b5a201992591c8a3517fb63f525L76-L77).

Deviates from @react-native/metro-config, which references the standalone package @react-native/js-polyfills (technically, this was/is the first circular dep edge case!). These are equivalent, but allows this repo to not reference the RN-hosted package (see removal in yarn.lock).

https://github.com/facebook/react-native/blob/bece6500f7d6374eab09917c9afd3bf6142f0b61/packages/metro-config/index.js#L47-L49

huntie
huntie commented Apr 4, 2023
View reviewed changes
Comment threadyarn.lock
Comment on lines -2676 to -2690
"@react-native/js-polyfills@^0.73.0":
version "0.73.0"
resolved "https://registry.yarnpkg.com/@react-native/js-polyfills/-/js-polyfills-0.73.0.tgz#d1becae77740c705392122684a55b373e610ab63"
integrity sha512-3/+q+l86xvV8xjx29On9/Dn0eWjo5MHYuuALHqyOlQIs3vLk/rQB4rn4izObiurhH3utXxqVnbOk+TB9yJo4ng==

"@react-native/metro-config@^0.73.0":
version "0.73.0"
resolved "https://registry.yarnpkg.com/@react-native/metro-config/-/metro-config-0.73.0.tgz#7601d2f4ba2252a4e359f8fda21008daf5f31eb2"
integrity sha512-b+q8Ot6nxPE2PXEua20Q0vhXYpVtVjUaTX/hv+7mL5hLzKeIWq/bIxF04GLWT93BBjGSlL0xaZ7iGIQNN75Hog==
dependencies:
"@react-native/js-polyfills" "^0.73.0"
metro-config "0.76.0"
metro-react-native-babel-transformer "0.76.0"
metro-runtime "0.76.0"

@huntiehuntieApr 4, 2023

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

All dependencies on packages published from facebook/react-native are dropped.

@huntie
huntie marked this pull request as ready for review April 6, 2023 10:03
@huntiehuntie mentioned this pull request Apr 6, 2023
Merged
@thymikee
thymikee merged commit fbd12ea into react-native-community:mainApr 6, 2023
@huntie
huntie deleted the drop-metro-config-dep branch May 25, 2023 14:13
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@robhoganrobhoganrobhogan approved these changes
@thymikeethymikeethymikee approved these changes
@adamTrzadamTrzAwaiting requested review from adamTrz

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@huntie@robhogan@thymikee