From 509d6ea90661f591a5a6f5526d48abdffc44127b Mon Sep 17 00:00:00 2001 From: Jakub Romanczyk Date: Fri, 8 Nov 2024 12:19:50 +0100 Subject: [PATCH 01/11] chore: upgrade dev-middleware to 0.76.1 --- packages/dev-server/package.json | 2 +- packages/dev-server/src/createServer.ts | 3 +- pnpm-lock.yaml | 53 +------------------------ 3 files changed, 5 insertions(+), 53 deletions(-) diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json index 8011bbc19..fd3f528b3 100644 --- a/packages/dev-server/package.json +++ b/packages/dev-server/package.json @@ -33,7 +33,7 @@ "@babel/code-frame": "^7.16.7", "@fastify/middie": "^8.3.0", "@fastify/sensible": "^5.5.0", - "@react-native/dev-middleware": "^0.73.8", + "@react-native/dev-middleware": "^0.76.1", "fastify": "^4.24.3", "fastify-favicon": "^4.3.0", "fastify-plugin": "^4.5.1", diff --git a/packages/dev-server/src/createServer.ts b/packages/dev-server/src/createServer.ts index d8a7da8df..fba7612c0 100644 --- a/packages/dev-server/src/createServer.ts +++ b/packages/dev-server/src/createServer.ts @@ -71,7 +71,8 @@ export async function createServer(config: Server.Config) { serverBaseUrl: `http://${config.options.host}:${config.options.port}`, logger: instance.log, unstable_experiments: { - enableNewDebugger: config.experiments?.experimentalDebugger, + // @ts-expect-error removed in 0.76, keep this for backkwards compatibility + enableNewDebugger: true, }, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8a1146e92..3149566ec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -327,8 +327,8 @@ importers: specifier: ^5.5.0 version: 5.6.0 '@react-native/dev-middleware': - specifier: ^0.73.8 - version: 0.73.8 + specifier: ^0.76.1 + version: 0.76.1 fastify: specifier: ^4.24.3 version: 4.28.1 @@ -2097,18 +2097,10 @@ packages: '@react-native-community/cli-server-api': optional: true - '@react-native/debugger-frontend@0.73.3': - resolution: {integrity: sha512-RgEKnWuoo54dh7gQhV7kvzKhXZEhpF9LlMdZolyhGxHsBqZ2gXdibfDlfcARFFifPIiaZ3lXuOVVa4ei+uPgTw==} - engines: {node: '>=18'} - '@react-native/debugger-frontend@0.76.1': resolution: {integrity: sha512-0gExx7GR8o2ctGfjIZ9+x54iFbg0eP6+kMYzRA6AcgmFAmMGLADMmjtObCN0CqGeZyWtdVVqcv5mAwRwmMlNWA==} engines: {node: '>=18'} - '@react-native/dev-middleware@0.73.8': - resolution: {integrity: sha512-oph4NamCIxkMfUL/fYtSsE+JbGOnrlawfQ0kKtDQ5xbOjPKotKoXqrs1eGwozNKv7FfQ393stk1by9a6DyASSg==} - engines: {node: '>=18'} - '@react-native/dev-middleware@0.76.1': resolution: {integrity: sha512-htaFSN2dwI0CinsMxjRuvIVdSDN6d6TDPeOJczM1bdAYalZX1M58knTKs5LJDComW5tleOCAg5lS5tIeFlM9+Q==} engines: {node: '>=18'} @@ -3338,9 +3330,6 @@ packages: chromium-edge-launcher@0.2.0: resolution: {integrity: sha512-JfJjUnq25y9yg4FABRRVPmBGWPZZi+AQXT4mxupb67766/0UlhG8PAZCz6xzEMXTbW3CsSoE8PcCWA49n35mKg==} - chromium-edge-launcher@1.0.0: - resolution: {integrity: sha512-pgtgjNKZ7i5U++1g1PWv75umkHvhVTDOQIZ+sjeUX9483S7Y6MUvO0lrd7ShGlQlFHMN4SwKTCq/X8hWrbv2KA==} - ci-info@2.0.0: resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==} @@ -6855,10 +6844,6 @@ packages: resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==} engines: {node: '>=6'} - temp-dir@2.0.0: - resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==} - engines: {node: '>=8'} - temp@0.8.4: resolution: {integrity: sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==} engines: {node: '>=6.0.0'} @@ -9576,29 +9561,8 @@ snapshots: - supports-color - utf-8-validate - '@react-native/debugger-frontend@0.73.3': {} - '@react-native/debugger-frontend@0.76.1': {} - '@react-native/dev-middleware@0.73.8': - dependencies: - '@isaacs/ttlcache': 1.4.1 - '@react-native/debugger-frontend': 0.73.3 - chrome-launcher: 0.15.2 - chromium-edge-launcher: 1.0.0 - connect: 3.7.0 - debug: 2.6.9 - node-fetch: 2.7.0 - open: 7.4.2 - serve-static: 1.16.2 - temp-dir: 2.0.0 - ws: 6.2.3 - transitivePeerDependencies: - - bufferutil - - encoding - - supports-color - - utf-8-validate - '@react-native/dev-middleware@0.76.1': dependencies: '@isaacs/ttlcache': 1.4.1 @@ -11066,17 +11030,6 @@ snapshots: transitivePeerDependencies: - supports-color - chromium-edge-launcher@1.0.0: - dependencies: - '@types/node': 18.19.41 - escape-string-regexp: 4.0.0 - is-wsl: 2.2.0 - lighthouse-logger: 1.4.2 - mkdirp: 1.0.4 - rimraf: 3.0.2 - transitivePeerDependencies: - - supports-color - ci-info@2.0.0: {} ci-info@3.9.0: {} @@ -15535,8 +15488,6 @@ snapshots: inherits: 2.0.4 readable-stream: 3.6.2 - temp-dir@2.0.0: {} - temp@0.8.4: dependencies: rimraf: 2.6.3 From b9bda5547775fc6ae644a7ce14269ef6025871dd Mon Sep 17 00:00:00 2001 From: Jakub Romanczyk Date: Fri, 8 Nov 2024 12:22:49 +0100 Subject: [PATCH 02/11] feat: enable new debugger by default --- packages/dev-server/src/types.ts | 6 ------ packages/repack/src/commands/options.ts | 5 ----- packages/repack/src/commands/rspack/start.ts | 3 --- packages/repack/src/commands/types.ts | 1 - packages/repack/src/commands/webpack/start.ts | 3 --- 5 files changed, 18 deletions(-) diff --git a/packages/dev-server/src/types.ts b/packages/dev-server/src/types.ts index feb7b7b0e..23bba6906 100644 --- a/packages/dev-server/src/types.ts +++ b/packages/dev-server/src/types.ts @@ -21,16 +21,10 @@ export namespace Server { /** Development server options to configure e.g: `port`, `host` etc. */ options: Options; - experiments?: Experiments; - /** Function to create a delegate, which implements crucial functionalities. */ delegate: (context: DelegateContext) => Delegate; } - export interface Experiments { - experimentalDebugger?: boolean; - } - /** Development server options. */ export interface Options { /** Root directory of the project. */ diff --git a/packages/repack/src/commands/options.ts b/packages/repack/src/commands/options.ts index 7fb2c5d26..a0219d96b 100644 --- a/packages/repack/src/commands/options.ts +++ b/packages/repack/src/commands/options.ts @@ -27,11 +27,6 @@ export const startCommandOptions = [ name: '--no-interactive', description: 'Disables interactive mode', }, - { - name: '--experimental-debugger', - description: - '[Experimental] Enable the new debugger experience. Connection reliability and some basic features are unstable in this release.', - }, // noop, but kept for compatibility { name: '--reset-cache, --resetCache', diff --git a/packages/repack/src/commands/rspack/start.ts b/packages/repack/src/commands/rspack/start.ts index 7f1cda3c6..22bd99f39 100644 --- a/packages/repack/src/commands/rspack/start.ts +++ b/packages/repack/src/commands/rspack/start.ts @@ -95,9 +95,6 @@ export async function start( : undefined, logRequests: showHttpRequests, }, - experiments: { - experimentalDebugger: args.experimentalDebugger, - }, delegate: (ctx) => { if (args.interactive) { setupInteractions( diff --git a/packages/repack/src/commands/types.ts b/packages/repack/src/commands/types.ts index 5cae84e1b..7b800dd04 100644 --- a/packages/repack/src/commands/types.ts +++ b/packages/repack/src/commands/types.ts @@ -21,7 +21,6 @@ export interface StartArguments { key?: string; cert?: string; interactive?: boolean; - experimentalDebugger?: boolean; json?: boolean; logFile?: string; logRequests?: boolean; diff --git a/packages/repack/src/commands/webpack/start.ts b/packages/repack/src/commands/webpack/start.ts index 6612f46d1..2b5a6ef6f 100644 --- a/packages/repack/src/commands/webpack/start.ts +++ b/packages/repack/src/commands/webpack/start.ts @@ -93,9 +93,6 @@ export async function start(_: string[], config: Config, args: StartArguments) { : undefined, logRequests: showHttpRequests, }, - experiments: { - experimentalDebugger: args.experimentalDebugger, - }, delegate: (ctx): Server.Delegate => { if (args.interactive) { setupInteractions( From 6642b223bae7e044a4fc75e3c938de5b183993dc Mon Sep 17 00:00:00 2001 From: Jakub Romanczyk Date: Fri, 8 Nov 2024 13:07:11 +0100 Subject: [PATCH 03/11] chore: remove launch-js-devtools endpoint --- packages/dev-server/package.json | 1 - .../src/plugins/devtools/devtoolsPlugin.ts | 35 +------------------ pnpm-lock.yaml | 3 -- 3 files changed, 1 insertion(+), 38 deletions(-) diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json index fd3f528b3..b2df171b5 100644 --- a/packages/dev-server/package.json +++ b/packages/dev-server/package.json @@ -37,7 +37,6 @@ "fastify": "^4.24.3", "fastify-favicon": "^4.3.0", "fastify-plugin": "^4.5.1", - "open": "^8.4.0", "pretty-format": "^28.1.0", "source-map": "^0.7.4", "ws": "^8.7.0" diff --git a/packages/dev-server/src/plugins/devtools/devtoolsPlugin.ts b/packages/dev-server/src/plugins/devtools/devtoolsPlugin.ts index 61ea9e193..8b9971171 100644 --- a/packages/dev-server/src/plugins/devtools/devtoolsPlugin.ts +++ b/packages/dev-server/src/plugins/devtools/devtoolsPlugin.ts @@ -1,12 +1,7 @@ import type { FastifyInstance } from 'fastify'; import fastifyPlugin from 'fastify-plugin'; -import open from 'open'; -import type { Server } from '../../types'; -async function devtoolsPlugin( - instance: FastifyInstance, - { options }: { options: Server.Options } -) { +async function devtoolsPlugin(instance: FastifyInstance) { instance.route({ method: ['GET', 'POST', 'PUT'], url: '/reload', @@ -15,34 +10,6 @@ async function devtoolsPlugin( reply.send('OK'); }, }); - - instance.route({ - method: ['GET', 'POST', 'PUT'], - url: '/launch-js-devtools', - handler: async (request, reply) => { - const customDebugger = process.env.REACT_DEBUGGER; - if (customDebugger) { - // NOOP for now - } else if (!instance.wss.debuggerServer.isDebuggerConnected()) { - const url = `${options.https ? 'https' : 'http'}://${ - options.host || 'localhost' - }:${options.port}/debugger-ui`; - try { - request.log.info({ msg: 'Opening debugger UI', url }); - await open(url); - } catch (error) { - if (error) { - request.log.error({ - msg: 'Cannot open debugger UI', - url, - error, - }); - } - } - } - reply.send('OK'); - }, - }); } export default fastifyPlugin(devtoolsPlugin, { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3149566ec..a3061781f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -338,9 +338,6 @@ importers: fastify-plugin: specifier: ^4.5.1 version: 4.5.1 - open: - specifier: ^8.4.0 - version: 8.4.2 pretty-format: specifier: ^28.1.0 version: 28.1.3 From e57c4b436aff1629095837226814ecd2b4a3fe53 Mon Sep 17 00:00:00 2001 From: Jakub Romanczyk Date: Fri, 8 Nov 2024 13:08:28 +0100 Subject: [PATCH 04/11] chore: remove debugger-ui package from rnc cli --- packages/dev-server/package.json | 5 ----- packages/dev-server/src/createServer.ts | 7 +------ pnpm-lock.yaml | 3 --- 3 files changed, 1 insertion(+), 14 deletions(-) diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json index b2df171b5..4d48bcc32 100644 --- a/packages/dev-server/package.json +++ b/packages/dev-server/package.json @@ -44,7 +44,6 @@ "devDependencies": { "@babel/cli": "^7.23.9", "@babel/core": "^7.23.9", - "@react-native-community/cli-debugger-ui": ">=11.3.1", "@react-native-community/cli-server-api": ">=11.3.1", "@types/babel__code-frame": "^7.0.3", "@types/node": "18", @@ -53,13 +52,9 @@ "typescript": "^5.5.3" }, "peerDependencies": { - "@react-native-community/cli-debugger-ui": ">=11.3.1", "@react-native-community/cli-server-api": ">=11.3.1" }, "peerDependenciesMeta": { - "@react-native-community/cli-debugger-ui": { - "optional": true - }, "@react-native-community/cli-server-api": { "optional": true } diff --git a/packages/dev-server/src/createServer.ts b/packages/dev-server/src/createServer.ts index fba7612c0..8be833da5 100644 --- a/packages/dev-server/src/createServer.ts +++ b/packages/dev-server/src/createServer.ts @@ -1,7 +1,6 @@ import { Writable } from 'node:stream'; import middie from '@fastify/middie'; import fastifySensible from '@fastify/sensible'; -import { debuggerUIMiddleware } from '@react-native-community/cli-debugger-ui'; import { openStackFrameInEditorMiddleware, openURLMiddleware, @@ -95,14 +94,10 @@ export async function createServer(config: Server.Config) { delegate, }); - // TODO: devtoolsPlugin and the following deprecated remote debugger middlewares should be removed after - // the new (experimental) debugger is stable AND the remote debugger is finally removed from the React Native core. - // When that happens remember to remove @react-native-community/cli-server-api & @react-native-community/cli-debugger-ui - // from the dependencies. await instance.register(devtoolsPlugin, { options: config.options, }); - instance.use('/debugger-ui', debuggerUIMiddleware()); + instance.use('/open-url', openURLMiddleware); instance.use( '/open-stack-frame', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a3061781f..79005b18a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -354,9 +354,6 @@ importers: '@babel/core': specifier: ^7.23.9 version: 7.25.2 - '@react-native-community/cli-debugger-ui': - specifier: '>=11.3.1' - version: 15.0.1 '@react-native-community/cli-server-api': specifier: '>=11.3.1' version: 15.0.1 From 6c71c23760e546ae13b3ed63f966d57feeb496b2 Mon Sep 17 00:00:00 2001 From: Jakub Romanczyk Date: Fri, 8 Nov 2024 13:09:57 +0100 Subject: [PATCH 05/11] chore: bump cli-server-api to 15.0.1 --- packages/dev-server/package.json | 2 +- pnpm-lock.yaml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json index 4d48bcc32..ea5cce56f 100644 --- a/packages/dev-server/package.json +++ b/packages/dev-server/package.json @@ -44,7 +44,7 @@ "devDependencies": { "@babel/cli": "^7.23.9", "@babel/core": "^7.23.9", - "@react-native-community/cli-server-api": ">=11.3.1", + "@react-native-community/cli-server-api": "15.0.1", "@types/babel__code-frame": "^7.0.3", "@types/node": "18", "@types/ws": "^8.5.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 79005b18a..ae5fb5020 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -355,7 +355,7 @@ importers: specifier: ^7.23.9 version: 7.25.2 '@react-native-community/cli-server-api': - specifier: '>=11.3.1' + specifier: 15.0.1 version: 15.0.1 '@types/babel__code-frame': specifier: ^7.0.3 From bdd885a58cb7935677503b6296dbb5f7f7ae9e87 Mon Sep 17 00:00:00 2001 From: Jakub Romanczyk Date: Fri, 8 Nov 2024 13:11:08 +0100 Subject: [PATCH 06/11] chore: remove deprecated remote debugger from tester-app --- apps/tester-app/src/App.tsx | 4 --- .../DeprecatedRemoteDebuggerContainer.tsx | 33 ------------------- .../NativeDevSettings.d.ts | 6 ---- 3 files changed, 43 deletions(-) delete mode 100644 apps/tester-app/src/deprecatedRemoteDebugger/DeprecatedRemoteDebuggerContainer.tsx delete mode 100644 apps/tester-app/src/deprecatedRemoteDebugger/NativeDevSettings.d.ts diff --git a/apps/tester-app/src/App.tsx b/apps/tester-app/src/App.tsx index fd2c7e091..d273f56a4 100644 --- a/apps/tester-app/src/App.tsx +++ b/apps/tester-app/src/App.tsx @@ -6,7 +6,6 @@ import { SectionContainer } from './ui/SectionContainer'; import { AssetsTestContainer } from './assetsTest/AssetsTestContainer'; import { AsyncContainer } from './asyncChunks/AsyncContainer'; -import DeprecatedRemoteDebuggerContainer from './deprecatedRemoteDebugger/DeprecatedRemoteDebuggerContainer'; import { MiniAppsContainer } from './miniapp/MiniAppsContainer'; import { RemoteContainer } from './remoteChunks/RemoteContainer'; @@ -28,9 +27,6 @@ const App = () => {
-
- -
); diff --git a/apps/tester-app/src/deprecatedRemoteDebugger/DeprecatedRemoteDebuggerContainer.tsx b/apps/tester-app/src/deprecatedRemoteDebugger/DeprecatedRemoteDebuggerContainer.tsx deleted file mode 100644 index 77ac47d0d..000000000 --- a/apps/tester-app/src/deprecatedRemoteDebugger/DeprecatedRemoteDebuggerContainer.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Button } from '../ui/Button'; - -let enableDebugger: () => void; -let disableDebugger: () => void; - -if (__DEV__) { - const { - default: NativeDevSettings, - } = require('react-native/Libraries/NativeModules/specs/NativeDevSettings'); - enableDebugger = () => { - NativeDevSettings.setIsDebuggingRemotely(true); - }; - disableDebugger = () => { - NativeDevSettings.setIsDebuggingRemotely(false); - }; -} - -export default function DeprecatedRemoteDebuggerContainer() { - return ( - <> -