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 * This adds {fileName, lineNumber, columnNumber} annotations to JSX tags.
* and to jsx tag literals.
* *
* NOTE: lineNumber and columnNumber are both 1-based.
* *
* == JSX Literals == * == JSX Literals ==
* *
@ -10,7 +10,7 @@
* becomes: * becomes:
* *
* var __jsxFileName = 'this/file.js'; * 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 { declare } from "@babel/helper-plugin-utils";
import { types as t } from "@babel/core"; import { types as t } from "@babel/core";
@ -21,9 +21,13 @@ const FILE_NAME_VAR = "_jsxFileName";
export default declare(api => { export default declare(api => {
api.assertVersion(7); api.assertVersion(7);
function makeTrace(fileNameIdentifier, lineNumber) { function makeTrace(fileNameIdentifier, lineNumber, column0Based) {
const fileLineLiteral = const fileLineLiteral =
lineNumber != null ? t.numericLiteral(lineNumber) : t.nullLiteral(); lineNumber != null ? t.numericLiteral(lineNumber) : t.nullLiteral();
const fileColumnLiteral =
column0Based != null
? t.numericLiteral(column0Based + 1)
: t.nullLiteral();
const fileNameProperty = t.objectProperty( const fileNameProperty = t.objectProperty(
t.identifier("fileName"), t.identifier("fileName"),
fileNameIdentifier, fileNameIdentifier,
@ -32,7 +36,15 @@ export default declare(api => {
t.identifier("lineNumber"), t.identifier("lineNumber"),
fileLineLiteral, fileLineLiteral,
); );
return t.objectExpression([fileNameProperty, lineNumberProperty]); const columnNumberProperty = t.objectProperty(
t.identifier("columnNumber"),
fileColumnLiteral,
);
return t.objectExpression([
fileNameProperty,
lineNumberProperty,
columnNumberProperty,
]);
} }
const visitor = { const visitor = {
@ -69,7 +81,11 @@ export default declare(api => {
state.fileNameIdentifier = fileNameIdentifier; 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))); 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 _jsxFileName = "/fake/path/mock.js";',
'var x = <sometag __source={{', 'var x = <sometag __source={{',
' fileName: _jsxFileName,', ' 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",', ' bar: "baz",',
' __source: {', ' __source: {',
' fileName: _jsxFileName,', ' fileName: _jsxFileName,',
' lineNumber: 1', ' lineNumber: 1,',
' columnNumber: 1',
' },', ' },',
' __self: this', ' __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",', ' bar: "baz",',
' __source: {', ' __source: {',
' fileName: _jsxFileName,', ' fileName: _jsxFileName,',
' lineNumber: 1', ' lineNumber: 1,',
' columnNumber: 1',
' },', ' },',
' __self: this', ' __self: this',
'});', '});',