https://github.com/ascorbic/babel-jsx-utils
Utilities for working with Babel and JSX
https://github.com/ascorbic/babel-jsx-utils
Last synced: 6 months ago
JSON representation
Utilities for working with Babel and JSX
- Host: GitHub
- URL: https://github.com/ascorbic/babel-jsx-utils
- Owner: ascorbic
- Created: 2020-09-18T10:27:52.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-18T11:12:34.000Z (over 5 years ago)
- Last Synced: 2025-01-23T14:38:21.511Z (about 1 year ago)
- Language: TypeScript
- Size: 118 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# babel-jsx-utils
This library allows you to resolve the actual values of attributes when parsing JSX with Babel. This is useful for things like Babel plugins. It evaluates the value in the local scope, so local variables are ok, but properties passed to the component are not.
For example:
```jsx
// OK
export function Logo() {
const src = "trex.png";
return 
;
}
```
```jsx
// Not OK
export function Logo({ src }) {
return ;
}
```
It can handle expressions, but not function calls:
```jsx
// OK
export function Logo() {
const width = 100 * 2;
return 
;
}
```
```jsx
// Not OK
export function Logo() {
function double(value) {
return value * 2;
}
const width = double(100);
return ;
}
```
## Installation
Install:
```shell
yarn install babel-jsx-utils
```
or
```shell
npm install babel-jsx-utils
```
## Usage
```js
import { parse, traverse } from "@babel/core";
const ast = parse(``, {
filename: "foo.js",
presets: ["@babel/preset-react"],
});
traverse(ast, {
JSXOpeningElement(nodePath) {
const values = getAttributeValues(nodePath);
// values = { bar: "Hello" }
},
});
```
For more examples, see the tests
## API
```typescript
/**
* Get all attribute values of a JSX element. This only includes values that can be
* statically-analysed. Pass the `onError` callback to be notified if an attribute cannot be resolved.
*
* @param nodePath The NodePath of the JSX opening element
* @param onError Called with the attribute name if it is present but cannot be resolved
* @param include If present, only these props are evaluated. Does not apply to spread attributes.
*/
export declare function getAttributeValues(
nodePath:
| CoreNodePath
| TraverseNodePath,
onError?: (attributeName: string) => void,
include?: Set
): Record;
/**
* Attempt to get the value of a JSX attribute. Returns an object with the
* properties `confident`, which is false if the value cannot be resolved
* in the current scope, and `value` which is the value if it can be.
*
* If the attribute is empty, then the returned value is `true`, e.g.
* `` would return `true` for the `eager` attribute.
*
* @param nodePath The NodePath of the JSXAttribute
*/
export declare function getAttributeValue(
nodePath: CoreNodePath | TraverseNodePath
): {
confident: boolean;
value: T | true;
};
```