{"id":13711156,"url":"https://github.com/clayrisser/react-ast","last_synced_at":"2025-04-06T12:08:53.304Z","repository":{"id":53870026,"uuid":"205067830","full_name":"clayrisser/react-ast","owner":"clayrisser","description":"render abstract syntax trees with react","archived":false,"fork":false,"pushed_at":"2024-01-12T10:33:48.000Z","size":37299,"stargazers_count":318,"open_issues_count":5,"forks_count":10,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-11-09T04:04:04.671Z","etag":null,"topics":["abstract","abstract-syntax-tree","ast","babel","react","react-renderer","renderer","syntax","tree"],"latest_commit_sha":null,"homepage":"https://clayrisser.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clayrisser.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-08-29T02:55:19.000Z","updated_at":"2024-10-29T11:34:03.000Z","dependencies_parsed_at":"2023-11-23T05:41:00.615Z","dependency_job_id":"dfc2738c-c7de-4463-9ecc-0de793a69e42","html_url":"https://github.com/clayrisser/react-ast","commit_stats":{"total_commits":150,"total_committers":2,"mean_commits":75.0,"dds":"0.42000000000000004","last_synced_commit":"e9cece91d4437027c2c9b9d8ab426a9b2b8b41a0"},"previous_names":["codejamninja/react-ast"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayrisser%2Freact-ast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayrisser%2Freact-ast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayrisser%2Freact-ast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clayrisser%2Freact-ast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clayrisser","download_url":"https://codeload.github.com/clayrisser/react-ast/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247478323,"owners_count":20945266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["abstract","abstract-syntax-tree","ast","babel","react","react-renderer","renderer","syntax","tree"],"created_at":"2024-08-02T23:01:05.105Z","updated_at":"2025-04-06T12:08:53.285Z","avatar_url":"https://github.com/clayrisser.png","language":"TypeScript","funding_links":["https://liberapay.com/clayrisser/donate"],"categories":["Uncategorized","TypeScript"],"sub_categories":["Uncategorized"],"readme":"# react-ast\n\n[![npm](https://img.shields.io/npm/v/react-ast.svg?style=flat-square)](https://www.npmjs.com/package/react-ast)\n[![GitHub stars](https://img.shields.io/github/stars/clayrisser/react-ast.svg?style=social\u0026label=Stars)](https://github.com/clayrisser/react-ast)\n\n\u003e render abstract syntax trees using react\n\nPlease ★ this repo if you found it useful ★ ★ ★\n\nAbstract syntax trees are difficult to work with by nature. This is a react renderer\nthat makes interacting with abstract syntax trees and rendering code a breeze.\n\nReact AST is the ultimate meta programming tool that uses react to render abstract\nsyntax trees. It can be used to build powerful unopinionated code generators and babel\nplugins that are easy to read and can scale without creating a rats nest of unreadable\ncode.\n\nYou can read a post I wrote about this project at the link below.\n\n[Render Abstract Syntax Trees with React](https://dev.to/codejamninja/render-abstract-syntax-trees-with-react-349j)\n\n## Built by BitSpur\n\nBitSpur offers premium Node and React development and support services. Get in touch at [bitspur.com](https://bitspur.com).\n\n![](assets/react-ast.png)\n\n## Features\n\n- works with babel ast\n- supports typescript\n\n## Installation\n\n```sh\nnpm install --save react-ast\n```\n\n## Dependencies\n\n- [NodeJS](https://nodejs.org)\n\n## Usage\n\n### Render Code\n\n```ts\nimport React, { FC } from \"react\";\nimport {\n  Export,\n  Expression,\n  Function,\n  Identifier,\n  Import,\n  Interface,\n  JSX,\n  ReactNode,\n  Return,\n  TypeAnnotation,\n  TypeReference,\n  Var,\n  VarKind,\n} from \"react-ast\";\n\nconst code = await render(\n  \u003c\u003e\n    \u003cImport default=\"React\" imports={[\"FC\"]} from=\"react\" /\u003e\n    \u003cExport\u003e\n      \u003cInterface name=\"HelloProps\" /\u003e\n    \u003c/Export\u003e\n    \u003cVar kind={VarKind.Const} typeAnnotation=\"FC\u003cHelloProps\u003e\" name=\"Hello\"\u003e\n      \u003cFunction\n        arrow\n        params={[\n          \u003cIdentifier\n            typeAnnotation={\n              \u003cTypeAnnotation\u003e\n                \u003cTypeReference name=\"HelloProps\" /\u003e\n              \u003c/TypeAnnotation\u003e\n            }\n          \u003e\n            props\n          \u003c/Identifier\u003e,\n        ]}\n      \u003e\n        \u003cReturn\u003e\n          \u003cJSX /\u003e\n        \u003c/Return\u003e\n      \u003c/Function\u003e\n    \u003c/Var\u003e\n    \u003cExpression properties=\"Hello.defaultProps\"\u003e{{}}\u003c/Expression\u003e\n    \u003cExport default\u003e\n      \u003cIdentifier\u003eHello\u003c/Identifier\u003e\n    \u003c/Export\u003e\n  \u003c/\u003e\n);\n\nconsole.log(code);\n```\n\nThe rendered code\n\n```ts\nimport React, { FC } from \"react\";\nexport interface HelloProps {}\n\nconst Hello: FC\u003cHelloProps\u003e = (props: HelloProps) =\u003e {\n  return \u003c\u003e\u003c/\u003e;\n};\n\nHello.defaultProps = {};\nexport default Hello;\n```\n\n### Render AST\n\nSometimes you might want to render the ast instead of\nrendering the code.\n\n```ts\nimport React from \"react\";\nimport { ClassDeclaration, renderAst } from \"react-ast\";\n\nconst ast = renderAst(\u003cClass name=\"Hello\" /\u003e);\n\nconsole.log(ast);\n```\n\nThe rendered AST\n\n```js\n{ type: 'File',\n  program:\n   { type: 'Program',\n     body: [ [Object] ],\n     directives: [],\n     sourceType: 'script',\n     interpreter: null },\n  comments: [],\n  tokens: [] }\n```\n\n## Support\n\nSubmit an [issue](https://gitlab.com/bitspur/community/react-ast/issues/new)\n\n## Development\n\nYou can validate the AST at [astexplorer.net](https://astexplorer.net/) with the following settings.\n\n| Language     | ParserSettings | Transform |\n| ------------ | -------------- | --------- |\n| `JavaScript` | `babylon7`     | `babelv7` |\n\nEnabled the following **babylon7** plugins\n\n- `jsx`\n- `typescript`\n- `asyncGenerators`\n- `classProperties`\n- `decorators`\n- `doExpressions`\n- `dynamicImport`\n- `functionBind`\n- `functionSent`\n- `numericSeparator`\n- `objectRestSpread`\n- `optionalCatchBinding`\n- `optionalChaining`\n\n## Contributing\n\nReview the [guidelines for contributing](https://github.com/clayrisser/react-ast/blob/master/CONTRIBUTING.md)\n\n## License\n\n[Apache-2.0 License](https://github.com/clayrisser/react-ast/blob/master/LICENSE)\n\n[Clay Risser](https://clayrisser.com) © 2019\n\n## Changelog\n\nReview the [changelog](https://github.com/clayrisser/react-ast/blob/master/CHANGELOG.md)\n\n## Credits\n\n- [Clay Risser](https://clayrisser.com) - Author\n\n## Support on Liberapay\n\nA ridiculous amount of coffee ☕ ☕ ☕ was consumed in the process of building this project.\n\n[Add some fuel](https://liberapay.com/clayrisser/donate) if you'd like to keep me going!\n\n[![Liberapay receiving](https://img.shields.io/liberapay/receives/clayrisser.svg?style=flat-square)](https://liberapay.com/clayrisser/donate)\n[![Liberapay patrons](https://img.shields.io/liberapay/patrons/clayrisser.svg?style=flat-square)](https://liberapay.com/clayrisser/donate)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclayrisser%2Freact-ast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclayrisser%2Freact-ast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclayrisser%2Freact-ast/lists"}