Added jsx-self babel transform plugin

This commit is contained in:
jim
2016-06-20 16:22:59 -07:00
parent b2390cca02
commit 7d0c4ecf17
9 changed files with 111 additions and 3 deletions

View File

@@ -0,0 +1,4 @@
node_modules
*.log
src
test

View File

@@ -0,0 +1,49 @@
# babel-plugin-transform-react-jsx-self
Adds `__self` prop to JSX elements, which React will use to generate some runtime warnings. All React users
should enable this transform in dev mode.
## Example
###In
```
<sometag />
```
###Out
```
<sometag __self={this} />
```
## Installation
```sh
$ npm install babel-plugin-transform-react-jsx-self
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["transform-react-jsx-self"]
}
```
### Via CLI
```sh
$ babel --plugins transform-react-jsx-self script.js
```
### Via Node API
```javascript
require("babel-core").transform("code", {
plugins: ["transform-react-jsx-self"]
});
```

View File

@@ -0,0 +1,18 @@
{
"name": "babel-plugin-transform-react-jsx-self",
"version": "6.9.0",
"description": "Add a __self prop to all JSX Elements",
"repository": "https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-self",
"license": "MIT",
"main": "lib/index.js",
"keywords": [
"babel-plugin"
],
"dependencies": {
"babel-runtime": "^6.9.0",
"babel-plugin-syntax-jsx": "^6.8.0"
},
"devDependencies": {
"babel-helper-plugin-test-runner": "^6.8.0"
}
}

View File

@@ -0,0 +1,30 @@
/**
* This adds {fileName, lineNumber} annotations to React component definitions
* and to jsx tag literals.
*
*
* == JSX Literals ==
*
* <sometag />
*
* becomes:
*
* <sometag __self={this} />
*/
const TRACE_ID = "__self";
export default function ({ types: t }) {
let visitor = {
JSXOpeningElement(node) {
const id = t.jSXIdentifier(TRACE_ID);
const trace = t.identifier("this");
node.container.openingElement.attributes.push(t.jSXAttribute(id, t.jSXExpressionContainer(trace)));
}
};
return {
visitor
};
}

View File

@@ -0,0 +1 @@
var x = <sometag />

View File

@@ -0,0 +1 @@
var x = <sometag __self={this} />;

View File

@@ -0,0 +1,3 @@
{
"plugins": ["syntax-jsx", "transform-react-jsx-self"]
}

View File

@@ -0,0 +1 @@
require("babel-helper-plugin-test-runner")(__dirname);