Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonambas/react-delver
📦 A design system analysis tool
https://github.com/jonambas/react-delver
design-system javascript react typescript
Last synced: 16 days ago
JSON representation
📦 A design system analysis tool
- Host: GitHub
- URL: https://github.com/jonambas/react-delver
- Owner: jonambas
- License: mit
- Created: 2022-03-12T01:44:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-17T20:29:18.000Z (19 days ago)
- Last Synced: 2024-10-20T07:12:08.559Z (17 days ago)
- Topics: design-system, javascript, react, typescript
- Language: TypeScript
- Homepage:
- Size: 708 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-delver
`react-delver` is a design system analysis tool and provides a Node API to analyze your app's JSX. Here's a [demo of a UI](https://react-delver-ui.vercel.app/) built around this API using the [react-delver-ui](https://github.com/jonambas/react-delver-ui) package.
`react-delver` will turn:
```js
function App() {
return (
);
}
```
into this:
```json
[
{
"name": "Bar",
"count": 1,
"from": "src/file.js",
"instances": [
{
"name": "Bar",
"spread": false,
"props": [{ "value": true, "name": "foo" }],
"location": {
"file": "src/file.js",
"line": 8,
"character": 6
}
}
]
},
{
"name": "Foo",
"count": 1,
"from": "src/file.js",
"instances": [
{
"name": "Foo",
"spread": false,
"props": [{ "value": "baz", "name": "bar" }],
"location": {
"file": "src/file.js",
"line": 7,
"character": 6
}
}
]
}
]
```
---
## Node API
```bash
npm i react-delver --save-dev
```
```js
const { delve } = require('react-delver');
const results = delve({ include: 'src/**/*.{jsx,tsx,js,ts}' });
```
Result Type Definitions
```ts
type Props = Array<{
value: string | boolean | number | null | undefined;
name: string;
expression: boolean;
}>;
type Instance = {
name: string;
spread: boolean;
props: Props;
from: string | undefined;
location: {
file: string;
line: number;
character: number;
};
};
type Result = {
name: string;
count: number;
from: 'indeterminate' | string | undefined;
instances: Array;
};
type Results = Array;
```
#### `options.include`
Type: `string | string[]`
Array of globs patterns for your React code to parse. See [fast-glob](https://github.com/mrmlnc/fast-glob) for more information.
The node API does not exlude any directories by default, so you may want to specify commonly ignored directories, like `'!**/node_modules'` or `'!**/dist'`.
#### `options.ignoreSubComponents`
Type: `boolean`
Default: `false`
Whether to include subcomponents or not. For example, when set to `true`, `` will be ignored.
#### `options.raw`
Type: `boolean`
Default: `false`
Whether to aggregate the results or not. When set to `true`, data will be a flat array of all component instances.
When set to `false`, data will be grouped by component name and include `count` and `from`. `count` is the total number of component instances. `from` will be either:
- `string` - all component instances were imported from the same package
- `'indeterminate'` - component instances do not share the same import path or package
- `undefined` - all component instances were not imported at all
#### `options.from`
Type: `string[]`
If included, only include components that are imported from this list of packages. For example, if you only want to include components imported from `@src/components`, use `from: ['@src/components']`.
#### `options.expressionLength`
Type: `number`
Default: `40`
Truncates JS expressions detected in props to this length.
---
### Limitations
`react-delver` uses typescript's compiler API to parse through your JSX.
- Components will only be detected when explicitly rendered with JSX, ie ``.
- Components may not accurately represent their `displayName` if they are aliased or renamed.
- Prop values that contain expressions such as variables or functions are not evaluated, but are stringified and truncated.
### License
MIT