From cb6e0c41d11d0e9c41039d8cd752012463827554 Mon Sep 17 00:00:00 2001 From: Aniket Singh Rawat Date: Thu, 19 Aug 2021 08:37:10 +0530 Subject: [PATCH 1/4] fix for issue #14434 --- .../src/internal/components/CodeFrame/CodeFrame.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dev-overlay/src/internal/components/CodeFrame/CodeFrame.tsx b/packages/react-dev-overlay/src/internal/components/CodeFrame/CodeFrame.tsx index 2c4e31b6809e..27ed8e10d586 100644 --- a/packages/react-dev-overlay/src/internal/components/CodeFrame/CodeFrame.tsx +++ b/packages/react-dev-overlay/src/internal/components/CodeFrame/CodeFrame.tsx @@ -14,7 +14,7 @@ export const CodeFrame: React.FC = function CodeFrame({ const formattedFrame = React.useMemo(() => { const lines = codeFrame.split(/\r?\n/g) const prefixLength = lines - .map((line) => /^>? +\d+ +\| ( *)/.exec(stripAnsi(line))) + .map((line) => /^>? +\d+ +\| [ ]+/.exec(stripAnsi(line))===null?null:/^>? +\d+ +\| ( *)/.exec(stripAnsi(line))) .filter(Boolean) .map((v) => v!.pop()!) .reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN) From a87a359729657bbe2281804454991f49380ce0a3 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Sun, 7 Aug 2022 20:35:55 -0500 Subject: [PATCH 2/4] Add overlay whitespace test --- .../acceptance/ReactRefreshLogBox.test.ts | 30 +++++++++++++++++++ .../ReactRefreshLogBox.test.ts.snap | 12 ++++++++ 2 files changed, 42 insertions(+) diff --git a/test/development/acceptance/ReactRefreshLogBox.test.ts b/test/development/acceptance/ReactRefreshLogBox.test.ts index f730ed3b6113..45ed9991c360 100644 --- a/test/development/acceptance/ReactRefreshLogBox.test.ts +++ b/test/development/acceptance/ReactRefreshLogBox.test.ts @@ -15,6 +15,36 @@ describe('ReactRefreshLogBox', () => { }) afterAll(() => next.destroy()) + test('should strip whitespace correctly with newline', async () => { + const { session, cleanup } = await sandbox(next) + + await session.patch( + 'index.js', + ` + export default function Page() { + return ( + <> + +

index page

+ + { + throw new Error('idk') + }}> + click me + + + ) + } + ` + ) + await session.evaluate(() => document.querySelector('a').click()) + + expect(await session.hasRedbox(true)).toBe(true) + expect(await session.getRedboxSource()).toMatchSnapshot() + + await cleanup() + }) + test('logbox: can recover from a syntax error without losing state', async () => { const { session, cleanup } = await sandbox(next) diff --git a/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap b/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap index 02f775b461d1..a8d39ceb8c33 100644 --- a/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap +++ b/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap @@ -104,6 +104,18 @@ exports[`ReactRefreshLogBox render error not shown right after syntax error 1`] 9 | }" `; +exports[`ReactRefreshLogBox should strip whitespace correctly with newline 1`] = ` +"index.js (9:34) @ onClick + + 7 | + 8 | { +> 9 | throw new Error('idk') + | ^ + 10 | }}> + 11 | click me + 12 | " +`; + exports[`ReactRefreshLogBox stuck error 1`] = ` "Foo.js (4:10) @ Foo From 5eaf57129a53f1c3ca79e6a19dda3aa442424091 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Sun, 7 Aug 2022 20:39:05 -0500 Subject: [PATCH 3/4] update snapshots --- .../ReactRefreshLogBox.test.ts.snap | 12 +++++------ .../config-devtool-dev/test/index.test.js | 20 +++++++++---------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap b/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap index a8d39ceb8c33..3e7144e1ef08 100644 --- a/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap +++ b/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap @@ -108,12 +108,12 @@ exports[`ReactRefreshLogBox should strip whitespace correctly with newline 1`] = "index.js (9:34) @ onClick 7 | - 8 | { -> 9 | throw new Error('idk') - | ^ - 10 | }}> - 11 | click me - 12 | " + 8 | { +> 9 | throw new Error('idk') + | ^ + 10 | }}> + 11 | click me + 12 | " `; exports[`ReactRefreshLogBox stuck error 1`] = ` diff --git a/test/integration/config-devtool-dev/test/index.test.js b/test/integration/config-devtool-dev/test/index.test.js index 36d2b13c99ec..cdd5094e6263 100644 --- a/test/integration/config-devtool-dev/test/index.test.js +++ b/test/integration/config-devtool-dev/test/index.test.js @@ -37,16 +37,16 @@ describe('devtool set in development mode in next config', () => { // TODO: add win32 snapshot } else { expect(await getRedboxSource(browser)).toMatchInlineSnapshot(` - "pages/index.js (5:10) @ eval - - 3 | export default function Index(props) { - 4 | useEffect(() => { - > 5 | throw new Error('this should render') - | ^ - 6 | }, []) - 7 | return
Index Page
- 8 | }" - `) +"pages/index.js (5:10) @ eval + + 3 | export default function Index(props) { + 4 | useEffect(() => { +> 5 | throw new Error('this should render') + | ^ + 6 | }, []) + 7 | return
Index Page
+ 8 | }" +`) } await browser.close() From 23c5006a8b26e57da6f6c81af007d9785722c128 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Sun, 7 Aug 2022 20:46:54 -0500 Subject: [PATCH 4/4] lint-fix --- .../src/internal/components/CodeFrame/CodeFrame.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react-dev-overlay/src/internal/components/CodeFrame/CodeFrame.tsx b/packages/react-dev-overlay/src/internal/components/CodeFrame/CodeFrame.tsx index 5485953bc1f2..9d85a4377f91 100644 --- a/packages/react-dev-overlay/src/internal/components/CodeFrame/CodeFrame.tsx +++ b/packages/react-dev-overlay/src/internal/components/CodeFrame/CodeFrame.tsx @@ -14,7 +14,11 @@ export const CodeFrame: React.FC = function CodeFrame({ const formattedFrame = React.useMemo(() => { const lines = codeFrame.split(/\r?\n/g) const prefixLength = lines - .map((line) => /^>? +\d+ +\| [ ]+/.exec(stripAnsi(line))===null?null:/^>? +\d+ +\| ( *)/.exec(stripAnsi(line))) + .map((line) => + /^>? +\d+ +\| [ ]+/.exec(stripAnsi(line)) === null + ? null + : /^>? +\d+ +\| ( *)/.exec(stripAnsi(line)) + ) .filter(Boolean) .map((v) => v!.pop()!) .reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN)