{"id":15413001,"url":"https://github.com/ascorbic/babel-jsx-utils","last_synced_at":"2025-07-25T04:33:53.440Z","repository":{"id":137069422,"uuid":"296589151","full_name":"ascorbic/babel-jsx-utils","owner":"ascorbic","description":"Utilities for working with Babel and JSX","archived":false,"fork":false,"pushed_at":"2020-09-18T11:12:34.000Z","size":121,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-23T14:38:21.511Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ascorbic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2020-09-18T10:27:52.000Z","updated_at":"2021-04-13T20:57:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"6de79d1f-e843-43ce-9b3a-f97337eaf1be","html_url":"https://github.com/ascorbic/babel-jsx-utils","commit_stats":{"total_commits":3,"total_committers":1,"mean_commits":3.0,"dds":0.0,"last_synced_commit":"22e5c1b71f2e9e3073b020828d4c88edf36eed77"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascorbic%2Fbabel-jsx-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascorbic%2Fbabel-jsx-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascorbic%2Fbabel-jsx-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascorbic%2Fbabel-jsx-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ascorbic","download_url":"https://codeload.github.com/ascorbic/babel-jsx-utils/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239964549,"owners_count":19725952,"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":[],"created_at":"2024-10-01T16:55:00.189Z","updated_at":"2025-02-21T06:11:38.995Z","avatar_url":"https://github.com/ascorbic.png","language":"TypeScript","readme":"# babel-jsx-utils\n\nThis 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.\n\nFor example:\n\n```jsx\n// OK\nexport function Logo() {\n    const src = \"trex.png\";\n\n    return \u003cimg src={src} alt=\"T-Rex\" /\u003e;\n}\n```\n\n```jsx\n// Not OK\nexport function Logo({ src }) {\n    return \u003cimg src={src} alt=\"T-Rex\" /\u003e;\n}\n```\n\nIt can handle expressions, but not function calls:\n\n```jsx\n// OK\nexport function Logo() {\n    const width = 100 * 2;\n\n    return \u003cimg src={\"trex.png\"} width={width} alt=\"T-Rex\" /\u003e;\n}\n```\n\n```jsx\n// Not OK\nexport function Logo() {\n    function double(value) {\n        return value * 2;\n    }\n\n    const width = double(100);\n\n    return \u003cimg src={\"trex.png\"} width={width} alt=\"T-Rex\" /\u003e;\n}\n```\n\n## Installation\n\nInstall:\n\n```shell\nyarn install babel-jsx-utils\n```\nor\n\n```shell\nnpm install babel-jsx-utils\n```\n\n## Usage\n\n```js\nimport { parse, traverse } from \"@babel/core\";\n\nconst ast = parse(`\u003cFoo bar=\"hello\" /\u003e`, {\n    filename: \"foo.js\",\n    presets: [\"@babel/preset-react\"],\n});\n\ntraverse(ast, {\n    JSXOpeningElement(nodePath) {\n        const values = getAttributeValues(nodePath);\n        // values = { bar: \"Hello\" }\n    },\n});\n```\n\nFor more examples, see the tests\n\n## API\n\n```typescript\n/**\n * Get all attribute values of a JSX element. This only includes values that can be\n * statically-analysed. Pass the `onError` callback to be notified if an attribute cannot be resolved.\n *\n * @param nodePath The NodePath of the JSX opening element\n * @param onError Called with the attribute name if it is present but cannot be resolved\n * @param include If present, only these props are evaluated. Does not apply to spread attributes.\n */\nexport declare function getAttributeValues(\n    nodePath:\n        | CoreNodePath\u003cJSXOpeningElement\u003e\n        | TraverseNodePath\u003cJSXOpeningElement\u003e,\n    onError?: (attributeName: string) =\u003e void,\n    include?: Set\u003cstring\u003e\n): Record\u003cstring, any\u003e;\n/**\n * Attempt to get the value of a JSX attribute. Returns an object with the\n * properties `confident`, which is false if the value cannot be resolved\n * in the current scope, and `value` which is the value if it can be.\n *\n * If the attribute is empty, then the returned value is `true`, e.g.\n * `\u003cImage eager /\u003e` would return `true` for the `eager` attribute.\n *\n * @param nodePath The NodePath of the JSXAttribute\n */\nexport declare function getAttributeValue\u003cT = unknown\u003e(\n    nodePath: CoreNodePath\u003cJSXAttribute\u003e | TraverseNodePath\u003cJSXAttribute\u003e\n): {\n    confident: boolean;\n    value: T | true;\n};\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fascorbic%2Fbabel-jsx-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fascorbic%2Fbabel-jsx-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fascorbic%2Fbabel-jsx-utils/lists"}