feat(react-jsx-source): add columnNumber property (#11139)

* feat(react-jsx-source): add column property This will be useful to tools that consume the injected `__source` prop, allowing precise source locations to be displayed. * Rename column -> columnNumber, make 1-based
babel · Mar 16, 2020 · 1971b7e · 1971b7e
1 parent 740260b
commit 1971b7e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/packages/babel-plugin-transform-react-jsx-source/src/index.js b/packages/babel-plugin-transform-react-jsx-source/src/index.js
@@ -1,7 +1,7 @@
 /**
- * This adds {fileName, lineNumber} annotations to React component definitions
- * and to jsx tag literals.
+ * This adds {fileName, lineNumber, columnNumber} annotations to JSX tags.
  *
+ * NOTE: lineNumber and columnNumber are both 1-based.
  *
  * == JSX Literals ==
  *
@@ -10,7 +10,7 @@
  * becomes:
  *
  * var __jsxFileName = 'this/file.js';
- * <sometag __source={{fileName: __jsxFileName, lineNumber: 10}}/>
+ * <sometag __source={{fileName: __jsxFileName, lineNumber: 10, columnNumber: 1}}/>
  */
 import { declare } from "@babel/helper-plugin-utils";
 import { types as t } from "@babel/core";
@@ -21,9 +21,13 @@ const FILE_NAME_VAR = "_jsxFileName";
 export default declare(api => {
   api.assertVersion(7);
 
-  function makeTrace(fileNameIdentifier, lineNumber) {
+  function makeTrace(fileNameIdentifier, lineNumber, column0Based) {
     const fileLineLiteral =
       lineNumber != null ? t.numericLiteral(lineNumber) : t.nullLiteral();
+    const fileColumnLiteral =
+      column0Based != null
+        ? t.numericLiteral(column0Based + 1)
+        : t.nullLiteral();
     const fileNameProperty = t.objectProperty(
       t.identifier("fileName"),
       fileNameIdentifier,
@@ -32,7 +36,15 @@ export default declare(api => {
       t.identifier("lineNumber"),
       fileLineLiteral,
     );
-    return t.objectExpression([fileNameProperty, lineNumberProperty]);
+    const columnNumberProperty = t.objectProperty(
+      t.identifier("columnNumber"),
+      fileColumnLiteral,
+    );
+    return t.objectExpression([
+      fileNameProperty,
+      lineNumberProperty,
+      columnNumberProperty,
+    ]);
   }
 
   const visitor = {
@@ -69,7 +81,11 @@ export default declare(api => {
         state.fileNameIdentifier = fileNameIdentifier;
       }
 
-      const trace = makeTrace(state.fileNameIdentifier, location.start.line);
+      const trace = makeTrace(
+        state.fileNameIdentifier,
+        location.start.line,
+        location.start.column,
+      );
       attributes.push(t.jsxAttribute(id, t.jsxExpressionContainer(trace)));
     },
   };

diff --git a/...s/babel-plugin-transform-react-jsx-source/test/fixtures/react-source/basic-sample/exec.js b/...s/babel-plugin-transform-react-jsx-source/test/fixtures/react-source/basic-sample/exec.js
@@ -7,7 +7,8 @@ var expected = multiline([
   'var _jsxFileName = "/fake/path/mock.js";',
   'var x = <sometag __source={{',
   '  fileName: _jsxFileName,',
-  '  lineNumber: 1',
+  '  lineNumber: 1,',
+  '  columnNumber: 9',
   '}} />;',
 ]);
 

diff --git a/packages/babel-preset-react/test/fixtures/preset-options/development-windows/exec.js b/packages/babel-preset-react/test/fixtures/preset-options/development-windows/exec.js
@@ -9,7 +9,8 @@ const expected = multiline([
   '  bar: "baz",',
   '  __source: {',
   '    fileName: _jsxFileName,',
-  '    lineNumber: 1',
+  '    lineNumber: 1,',
+  '    columnNumber: 1',
   '  },',
   '  __self: this',
   '});',

diff --git a/packages/babel-preset-react/test/fixtures/preset-options/development/exec.js b/packages/babel-preset-react/test/fixtures/preset-options/development/exec.js
@@ -9,7 +9,8 @@ const expected = multiline([
   '  bar: "baz",',
   '  __source: {',
   '    fileName: _jsxFileName,',
-  '    lineNumber: 1',
+  '    lineNumber: 1,',
+  '    columnNumber: 1',
   '  },',
   '  __self: this',
   '});',