[sourcemaps] Consistent cursor columns

Co-authored-by: Niklas Mischkulnig <[email protected]>

Author: eps1lon

packages/next/src/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.ts

@@ -57,7 +57,7 @@ async function getSourceFrame(
   input: any,
   fileName: any,
   compilation: any
-): Promise<{ frame: string; lineNumber: string; column: string }> {
+): Promise<{ frame: string; line1: string; column1: string }> {
   try {
     const loc =
       input.loc || input.dependencies.map((d: any) => d.loc).filter(Boolean)[0]
@@ -83,21 +83,21 @@ async function getSourceFrame(
           arguments: [],
           file: fileName,
           methodName: '',
-          lineNumber: loc.start.line,
+          line1: loc.start.line,
           // loc is 0-based but columns in stack frames are 1-based.
-          column: (loc.start.column ?? 0) + 1,
+          column1: (loc.start.column ?? 0) + 1,
         },
       })
 
       return {
         frame: result?.originalCodeFrame ?? '',
-        lineNumber: result?.originalStackFrame?.lineNumber?.toString() ?? '',
-        column: result?.originalStackFrame?.column?.toString() ?? '',
+        line1: result?.originalStackFrame?.line1?.toString() ?? '',
+        column1: result?.originalStackFrame?.column1?.toString() ?? '',
       }
     }
   } catch {}
 
-  return { frame: '', lineNumber: '', column: '' }
+  return { frame: '', line1: '', column1: '' }
 }
 
 function getFormattedFileName(
@@ -141,7 +141,7 @@ export async function getNotFoundError(
   }
 
   try {
-    const { frame, lineNumber, column } = await getSourceFrame(
+    const { frame, line1, column1 } = await getSourceFrame(
       input,
       fileName,
       compilation
@@ -181,8 +181,8 @@ export async function getNotFoundError(
     const formattedFileName = getFormattedFileName(
       fileName,
       module,
-      lineNumber,
-      column
+      line1,
+      column1
     )
 
     return new SimpleWebpackError(formattedFileName, message)

packages/next/src/next-devtools/dev-overlay/components/call-stack-frame/call-stack-frame.stories.tsx

@@ -34,16 +34,16 @@ const frame = {
     file: './app/page.tsx',
     methodName: 'MyComponent',
     arguments: [],
-    lineNumber: 10,
-    column: 5,
+    line1: 10,
+    column1: 5,
     ignored: false,
   },
   sourceStackFrame: {
     file: './app/page.tsx',
     methodName: 'MyComponent',
     arguments: [],
-    lineNumber: 10,
-    column: 5,
+    line1: 10,
+    column1: 5,
   },
   error: false as const,
   reason: null,

packages/next/src/next-devtools/dev-overlay/components/call-stack-frame/call-stack-frame.tsx

@@ -1,4 +1,3 @@
-import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
 import type { OriginalStackFrame } from '../../../shared/stack-frame'
 
 import { HotlinkedText } from '../hot-linked-text'
@@ -11,14 +10,14 @@ export const CallStackFrame: React.FC<{
 }> = function CallStackFrame({ frame }) {
   // TODO: ability to expand resolved frames
 
-  const f: StackFrame = frame.originalStackFrame ?? frame.sourceStackFrame
+  const f = frame.originalStackFrame ?? frame.sourceStackFrame
   const hasSource = Boolean(frame.originalCodeFrame)
   const open = useOpenInEditor(
     hasSource
       ? {
           file: f.file,
-          lineNumber: f.lineNumber,
-          column: f.column,
+          line1: f.line1 ?? 1,
+          column1: f.column1 ?? 1,
         }
       : undefined
   )

packages/next/src/next-devtools/dev-overlay/components/call-stack/call-stack.stories.tsx

@@ -33,16 +33,16 @@ const frame = {
     file: './app/page.tsx',
     methodName: 'MyComponent',
     arguments: [],
-    lineNumber: 10,
-    column: 5,
+    line1: 10,
+    column1: 5,
     ignored: false,
   },
   sourceStackFrame: {
     file: './app/page.tsx',
     methodName: 'MyComponent',
     arguments: [],
-    lineNumber: 10,
-    column: 5,
+    line1: 10,
+    column1: 5,
   },
   originalCodeFrame: 'export default function MyComponent() {',
   error: false as const,

packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.stories.tsx

@@ -17,8 +17,8 @@ const baseStackFrame = {
   file: './app/page.tsx',
   methodName: 'Home',
   arguments: [],
-  lineNumber: 10,
-  column: 5,
+  line1: 10,
+  column1: 5,
 }
 
 export const SimpleCodeFrame: Story = {

packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx

@@ -1,7 +1,6 @@
-import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
 import { useMemo } from 'react'
 import { HotlinkedText } from '../hot-linked-text'
-import { getFrameSource } from '../../../shared/stack-frame'
+import { getFrameSource, type StackFrame } from '../../../shared/stack-frame'
 import { useOpenInEditor } from '../../utils/use-open-in-editor'
 import { ExternalIcon } from '../../icons/external'
 import { FileIcon } from '../../icons/file'
@@ -11,7 +10,10 @@ import {
   parseLineNumberFromCodeFrameLine,
 } from './parse-code-frame'
 
-export type CodeFrameProps = { stackFrame: StackFrame; codeFrame: string }
+export type CodeFrameProps = {
+  stackFrame: StackFrame
+  codeFrame: string
+}
 
 export function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {
   const parsedLineStates = useMemo(() => {
@@ -27,8 +29,8 @@ export function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {
 
   const open = useOpenInEditor({
     file: stackFrame.file,
-    lineNumber: stackFrame.lineNumber,
-    column: stackFrame.column,
+    line1: stackFrame.line1 ?? 1,
+    column1: stackFrame.column1 ?? 1,
   })
 
   const fileExtension = stackFrame?.file?.split('.').pop()

packages/next/src/next-devtools/dev-overlay/components/code-frame/parse-code-frame.test.ts

@@ -9,8 +9,8 @@ describe('parse line numbers', () => {
     const input = {
       stackFrame: {
         file: 'app/page.tsx',
-        lineNumber: 2,
-        column: 9,
+        line1: 2,
+        column1: 9,
         methodName: 'Page',
         arguments: [],
         ignored: false,
@@ -61,8 +61,8 @@ describe('parse line numbers', () => {
     const input = {
       stackFrame: {
         file: 'app/page.tsx',
-        lineNumber: 6,
-        column: 7,
+        line1: 6,
+        column1: 7,
         methodName: 'Page',
         arguments: [],
       },

packages/next/src/next-devtools/dev-overlay/components/code-frame/parse-code-frame.ts

@@ -1,6 +1,6 @@
-import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
 import Anser, { type AnserJsonEntry } from 'next/dist/compiled/anser'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
+import type { StackFrame } from '../../../shared/stack-frame'
 
 // Strip leading spaces out of the code frame
 export function formatCodeFrame(codeFrame: string) {
@@ -77,19 +77,19 @@ export function parseLineNumberFromCodeFrameLine(
   stackFrame: StackFrame
 ) {
   let lineNumberToken: AnserJsonEntry | undefined
-  let lineNumber: string | undefined
+  let line1: string | undefined
   // parse line number from line first 2 tokens
   // e.g. ` > 1 | const foo = 'bar'` => `1`, first token is `1 |`
   // e.g. `  2 | const foo = 'bar'` => `2`. first 2 tokens are ' ' and ' 2 |'
   if (line[0]?.content === '>' || line[0]?.content === ' ') {
     lineNumberToken = line[1]
-    lineNumber = lineNumberToken?.content?.replace('|', '')?.trim()
+    line1 = lineNumberToken?.content?.replace('|', '')?.trim()
   }
 
   // When the line number is possibly undefined, it can be just the non-source code line
   // e.g. the ^ sign can also take a line, we skip rendering line number for it
   return {
-    lineNumber,
-    isErroredLine: lineNumber === stackFrame.lineNumber?.toString(),
+    lineNumber: line1,
+    isErroredLine: line1 === stackFrame.line1?.toString(),
   }
 }

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-call-stack/error-overlay-call-stack.stories.tsx

@@ -33,16 +33,16 @@ const frame = {
     file: './app/page.tsx',
     methodName: 'MyComponent',
     arguments: [],
-    lineNumber: 10,
-    column: 5,
+    line1: 10,
+    column1: 5,
     ignored: false,
   },
   sourceStackFrame: {
     file: './app/page.tsx',
     methodName: 'MyComponent',
     arguments: [],
-    lineNumber: 10,
-    column: 5,
+    line1: 10,
+    column1: 5,
   },
   originalCodeFrame: 'export default function MyComponent() {',
   error: false as const,

packages/next/src/next-devtools/dev-overlay/components/terminal/editor-link.tsx

@@ -11,8 +11,8 @@ type EditorLinkProps = {
 export function EditorLink({ file, location }: EditorLinkProps) {
   const open = useOpenInEditor({
     file,
-    lineNumber: location?.line ?? 1,
-    column: location?.column ?? 0,
+    line1: location?.line ?? 1,
+    column1: location?.column ?? 1,
   })
 
   return (