') + ')', '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); } })(); })(); breaking: Remove fallback flow for Metro config defaults (0.73) by huntie · Pull Request #1972 · react-native-community/cli · GitHub
Skip to content

breaking: Remove fallback flow for Metro config defaults (0.73) - #1972

Merged
thymikee merged 1 commit into
react-native-community:mainfrom
huntie:metro-config-0.73
Jul 19, 2023
Merged

breaking: Remove fallback flow for Metro config defaults (0.73)#1972
thymikee merged 1 commit into
react-native-community:mainfrom
huntie:metro-config-0.73

Conversation

@huntie

@huntiehuntie commented Jun 16, 2023•
edited
Loading

Copy link
Copy Markdown
Collaborator

Summary

This follows up the @react-native/metro-config setup added in React Native 0.72. It removes the fallback to a replicated internal copy of Metro config defaults in cli-plugin-metro, effectively reverting #1896.

Rollout plan recap:

  • 0.72: Extending @react-native/metro-config is recommended, but falls back if users have not updated their metro.config.js, logging a warning.
  • 0.73 (this diff): Updating metro.config.js to the new format is required — log warning and (later on) fail.

Changelog: [Breaking] Remove fallback flow for Metro config defaults (React Native 0.73)

Test Plan

Using rn-tester configured with a locally yarn linked copy of RN CLI.

✅ Correct config logs no warning and builds successfully

image

✅ Incorrect config logs updated warning and fails

⬇️ FYI @cortinico@kelset, in case you have opinions for better DevX. It is marginally restrictive that we require a reference to @react-native/metro-config in the immediate metro.config.js file — perhaps if we detect this more strongly we can fail rather than warn. However I can't think of a simple way to do this — and we will have had the 0.72 release cycle for people to update their projects by this point.Addressed with more visible warning.

image

@thymikee

thymikee commented Jun 16, 2023

Copy link
Copy Markdown
Member

This ties the move of the cli-plugin-metro effort to the core with v0.73, right? Maybe we should start merging those changes to a parallel branch with the plugin removal?

@huntie

huntie commented Jun 16, 2023

Copy link
Copy Markdown
CollaboratorAuthor

@thymikee It does — I was aiming to stack a sequence of simplification changes, including this PR, here in the CLI repo first. This is to slightly reduce the surface area that we are migrating into the RN repo (and from TypeScript into Flow 🙈).

A change like this also gets better visibility in this repo for now.

@kelset

kelset commented Jun 19, 2023

Copy link
Copy Markdown
Member

added a mention here reactwg/react-native-releases#64 so that we/the 73 release crew won't forget that there's BC on this angle

@huntie
huntieforce-pushed the metro-config-0.73 branch from 7b54f4e to 054d6e6CompareJune 20, 2023 10:28
@huntie

huntie commented Jun 20, 2023•
edited
Loading

Copy link
Copy Markdown
CollaboratorAuthor

@kelset Sidenote: I'm looking to merge this change ahead of work to migrate and collapse cli-plugin-metro back into the React Native repository, with the intent being to minimise the number of files/surface area before this migration.

With some over-the-weekend reflection — the flow in this PR should probably hard-error (helpful in particular to pin down this error cause in CI) ➡️ update incoming.

For the user, it might be better if we allowed the entire metro.config.js file to be optional (but reinsertable, for standalone metro commands) (especially after react/metro#977 ships). We can look at this post-migration, since it'll be possible to refer to @react-native/metro-config in the same repo.

This was referenced Jun 26, 2023
Closed
Open
@huntie
huntieforce-pushed the metro-config-0.73 branch from 054d6e6 to cb75678CompareJune 29, 2023 15:39
@huntie

huntie commented Jun 29, 2023

Copy link
Copy Markdown
CollaboratorAuthor

Latest push

  • This check remains a warning, but is made much more visible (as lack of this config will break builds except for rare advanced usages). cc @motiz88 for wording sign off.
  • Now includes the updated check from feat: Add alternative base config check to loadMetroConfig (11.x) #1990 — on main we can safely depend on the future version of @react-native/metro-config with the new detection mechanism present.

image

✅ Ready for review

@huntie
huntie requested a review from motiz88June 29, 2023 15:39
motiz88
motiz88 reviewed Jul 6, 2023
View reviewed changes
Comment threadpackages/cli-plugin-metro/src/tools/loadMetroConfig.ts
);
From React Native 0.73, your project's Metro config should extend '@react-native/metro-config'
or it will fail to build. Please copy the template at:
https://github.com/facebook/react-native/blob/main/packages/react-native/template/metro.config.js

@motiz88motiz88Jul 6, 2023

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Wonder if this should be pinned (at least to a branch) so it remains accurate in the future.

@huntiehuntieJul 7, 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.

Yeah fair. We don't have 0.73-stable yet — and the counter-risk is pointing to a stale copy. Will keep an eye on it.

@thymikee
thymikee merged commit 1fc7eba into react-native-community:mainJul 19, 2023
@huntie
huntie deleted the metro-config-0.73 branch July 19, 2023 16:49
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@motiz88motiz88motiz88 approved these changes
@szymonrybczakszymonrybczakszymonrybczak approved these changes
@adamTrzadamTrzAwaiting requested review from adamTrz
@thymikeethymikeeAwaiting requested review from thymikeethymikee is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@huntie@thymikee@kelset@motiz88@szymonrybczak