diff --git a/packages/babel-plugin-transform-react-jsx-source/.npmignore b/packages/babel-plugin-transform-react-jsx-source/.npmignore new file mode 100644 index 0000000000..31852902b1 --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx-source/.npmignore @@ -0,0 +1,4 @@ +node_modules +*.log +src +test diff --git a/packages/babel-plugin-transform-react-jsx-source/README.md b/packages/babel-plugin-transform-react-jsx-source/README.md new file mode 100644 index 0000000000..002c1adbd9 --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx-source/README.md @@ -0,0 +1,48 @@ +# babel-plugin-transform-react-jsx-source + +Adds source file and line number to JSX elements. + +## Example + +###In + +``` + +``` +###Out + +``` + +``` + +## Installation + +```sh +$ npm install babel-plugin-transform-react-jsx-source +``` + +## Usage + +### Via `.babelrc` (Recommended) + +**.babelrc** + +```json +{ + "plugins": ["transform-react-jsx-source"] +} +``` + +### Via CLI + +```sh +$ babel --plugins transform-react-jsx-source script.js +``` + +### Via Node API + +```javascript +require("babel-core").transform("code", { + plugins: ["transform-react-jsx-source"] +}); +``` diff --git a/packages/babel-plugin-transform-react-jsx-source/package.json b/packages/babel-plugin-transform-react-jsx-source/package.json new file mode 100644 index 0000000000..22333a54bc --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx-source/package.json @@ -0,0 +1,18 @@ +{ + "name": "babel-plugin-transform-react-jsx-source", + "version": "6.0.14", + "description": "Add a __source prop to all JSX Elements", + "repository": "https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source", + "license": "MIT", + "main": "lib/index.js", + "keywords": [ + "babel-plugin" + ], + "dependencies": { + "babel-runtime": "^5.0.0", + "babel-plugin-syntax-jsx": "^6.0.14" + }, + "devDependencies": { + "babel-helper-plugin-test-runner": "^6.0.0" + } +} diff --git a/packages/babel-plugin-transform-react-jsx-source/src/index.js b/packages/babel-plugin-transform-react-jsx-source/src/index.js new file mode 100644 index 0000000000..6a2725b994 --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx-source/src/index.js @@ -0,0 +1,56 @@ + + /** + * This adds {fileName, lineNumber} annotations to React component definitions + * and to jsx tag literals. + * + * + * == JSX Literals == + * + * + * + * becomes: + * + * + */ + + +import path from "path"; + +const TRACE_ID = "__source"; + +export default function ({ types: t }) { + function objectToAst(object) { + const properties = Object.keys(object).map((attr) => { + let value; + switch(typeof object[attr]) { + case "number": value = t.numericLiteral(object[attr]); break; + default: value = t.stringLiteral(object[attr].toString()); + } + return t.objectProperty(t.identifier(attr), value); + }); + return t.objectExpression(properties); + } + + function makeTrace(fileName, lineNumber) { + return objectToAst({ + fileName, + lineNumber, + }); + } + + let visitor = { + JSXOpeningElement(node, state) { + const id = t.jSXIdentifier(TRACE_ID); + const fileName = state.file.log.filename !== "unknown" + ? path.relative(__dirname, state.file.log.filename) + : null; + const trace = makeTrace(fileName, node.container.openingElement.loc.start.line); + + node.container.openingElement.attributes.push(t.jSXAttribute(id, t.jSXExpressionContainer(trace))); + } + }; + + return { + visitor + }; +} diff --git a/packages/babel-plugin-transform-react-jsx-source/test/fixtures/react-source/basic-sample/actual.js b/packages/babel-plugin-transform-react-jsx-source/test/fixtures/react-source/basic-sample/actual.js new file mode 100644 index 0000000000..da9210eabb --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx-source/test/fixtures/react-source/basic-sample/actual.js @@ -0,0 +1 @@ +var x = diff --git a/packages/babel-plugin-transform-react-jsx-source/test/fixtures/react-source/basic-sample/expected.js b/packages/babel-plugin-transform-react-jsx-source/test/fixtures/react-source/basic-sample/expected.js new file mode 100644 index 0000000000..9f07aedd41 --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx-source/test/fixtures/react-source/basic-sample/expected.js @@ -0,0 +1,4 @@ +var x = ; \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-jsx-source/test/fixtures/react-source/options.json b/packages/babel-plugin-transform-react-jsx-source/test/fixtures/react-source/options.json new file mode 100644 index 0000000000..7c71600278 --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx-source/test/fixtures/react-source/options.json @@ -0,0 +1,3 @@ +{ + "plugins": ["syntax-jsx", "transform-react-jsx-source"] +} diff --git a/packages/babel-plugin-transform-react-jsx-source/test/index.js b/packages/babel-plugin-transform-react-jsx-source/test/index.js new file mode 100644 index 0000000000..1f6634aabd --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx-source/test/index.js @@ -0,0 +1 @@ +require("babel-helper-plugin-test-runner")(__dirname); diff --git a/packages/babel-preset-react/index.js b/packages/babel-preset-react/index.js index 327f02e403..54489509f4 100644 --- a/packages/babel-preset-react/index.js +++ b/packages/babel-preset-react/index.js @@ -5,5 +5,12 @@ module.exports = { require("babel-plugin-syntax-flow"), require("babel-plugin-syntax-jsx"), require("babel-plugin-transform-react-display-name"), - ] + ], + env: { + development: { + plugins: [ + require("babel-plugin-transform-react-jsx-source") + ] + } + } }; diff --git a/packages/babel-preset-react/package.json b/packages/babel-preset-react/package.json index 11d4a13297..c04a9f91fd 100644 --- a/packages/babel-preset-react/package.json +++ b/packages/babel-preset-react/package.json @@ -12,6 +12,7 @@ "babel-plugin-syntax-jsx": "^6.0.14", "babel-plugin-transform-flow-strip-types": "^6.0.14", "babel-plugin-transform-react-display-name": "^6.0.14", - "babel-plugin-transform-react-jsx": "^6.0.14" + "babel-plugin-transform-react-jsx": "^6.0.14", + "babel-plugin-transform-react-jsx-source": "^6.0.14" } }