cerxes/babel
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Moti Zilberman 2020-03-16 21:59:22 +00:00 committed by GitHub
parent 740260b236
commit 1971b7e87d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/babel-plugin-transform-react-jsx-source/src/index.js
View File

@ -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)));
},
};

3
packages/babel-plugin-transform-react-jsx-source/test/fixtures/react-source/basic-sample/exec.js vendored
View File

@ -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',
'}} />;',
]);

3
packages/babel-preset-react/test/fixtures/preset-options/development-windows/exec.js vendored
View File

@ -9,7 +9,8 @@ const expected = multiline([
' bar: "baz",',
' __source: {',
' fileName: _jsxFileName,',
' lineNumber: 1',
' lineNumber: 1,',
' columnNumber: 1',
' },',
' __self: this',
'});',

3
packages/babel-preset-react/test/fixtures/preset-options/development/exec.js vendored
View File

@ -9,7 +9,8 @@ const expected = multiline([
' bar: "baz",',
' __source: {',
' fileName: _jsxFileName,',
' lineNumber: 1',
' lineNumber: 1,',
' columnNumber: 1',
' },',
' __self: this',
'});',