{"id":17242912,"url":"https://github.com/imcuttle/babel-helper-decorate-react","last_synced_at":"2025-10-24T02:31:51.070Z","repository":{"id":45113245,"uuid":"314531687","full_name":"imcuttle/babel-helper-decorate-react","owner":"imcuttle","description":"Babel Helper for custom decorator for React Component","archived":false,"fork":false,"pushed_at":"2023-02-06T13:34:07.000Z","size":1233,"stargazers_count":8,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T02:33:59.044Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imcuttle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2020-11-20T11:16:33.000Z","updated_at":"2023-01-31T14:38:47.000Z","dependencies_parsed_at":"2024-10-19T22:31:38.073Z","dependency_job_id":null,"html_url":"https://github.com/imcuttle/babel-helper-decorate-react","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fbabel-helper-decorate-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fbabel-helper-decorate-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fbabel-helper-decorate-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fbabel-helper-decorate-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imcuttle","download_url":"https://codeload.github.com/imcuttle/babel-helper-decorate-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248815540,"owners_count":21165941,"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-15T06:14:23.082Z","updated_at":"2025-10-24T02:31:46.020Z","avatar_url":"https://github.com/imcuttle.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-helper-decorate-react\n\n[![Build status](https://img.shields.io/travis/imcuttle/babel-helper-decorate-react/master.svg?style=flat-square)](https://travis-ci.org/imcuttle/babel-helper-decorate-react)\n[![Test coverage](https://img.shields.io/codecov/c/github/imcuttle/babel-helper-decorate-react.svg?style=flat-square)](https://codecov.io/github/imcuttle/babel-helper-decorate-react?branch=master)\n[![NPM version](https://img.shields.io/npm/v/babel-helper-decorate-react.svg?style=flat-square)](https://www.npmjs.com/package/babel-helper-decorate-react)\n[![NPM Downloads](https://img.shields.io/npm/dm/babel-helper-decorate-react.svg?style=flat-square\u0026maxAge=43200)](https://www.npmjs.com/package/babel-helper-decorate-react)\n[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://prettier.io/)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=flat-square)](https://conventionalcommits.org)\n\n\u003e Babel Helper for custom decorator for React Component\n\n### Input\n\n```jsx\nexport const Button = () =\u003e {\n  return \u003cbutton\u003ebutton\u003c/button\u003e\n}\n\n// decorate-enable-next-line { \"argument\": 123 }\nexport default class ButtonDefault extends React.Component {\n  // ...\n}\n\n// decorate-disable-next-line\nexport class Button2 extends React.Component {\n  // ...\n}\n```\n\n### Output\n\n```jsx\nimport hoc from '/your/hoc/path'\n\nexport const Button = hoc()(() =\u003e {\n  return \u003cbutton\u003ebutton\u003c/button\u003e\n})\n\n// decorate-enable-next-line { \"argument\": 123 }\nexport default\n@hoc({ argument: 123 })\nclass ButtonDefault extends React.Component {\n  // ...\n}\n\n// decorate-disable-next-line\nexport class Button2 extends React.Component {\n  // ...\n}\n```\n\n## Why?\n\nIt's useful for decorate react component for react component, like use mobx-react `observer`.\n\n### `babelConfig`\n\n```diff\n{\n  plugins: [\n  +  'babel-helper-decorate-react/mobx'\n  ]\n}\n```\n\n### `babel-helper-decorate-react/mobx/decorate`\n\n```js\nconst mobx = require('mobx-react')\n\nmodule.exports = () =\u003e {\n  return (Component) =\u003e {\n    return mobx.observer(Component)\n  }\n}\n```\n\n### `Input`\n\n```jsx\nexport const Button = () =\u003e {\n  return \u003cbutton\u003ebutton\u003c/button\u003e\n}\n\n/* mobx-observer-disable */\nexport const ButtonDisable = () =\u003e {\n  return \u003cbutton\u003ebutton\u003c/button\u003e\n}\n/* mobx-observer-enable */\n\nexport default class ButtonDefault extends React.Component {\n  // ...\n}\n```\n\n### Output\n\n```jsx\nimport decorate from 'babel-helper-decorate-react/mobx/decorate'\n\n// To be observer component\nexport const Button = decorate()(() =\u003e {\n  return \u003cbutton\u003ebutton\u003c/button\u003e\n})\n\nexport const ButtonDisable = () =\u003e {\n  return \u003cbutton\u003ebutton\u003c/button\u003e\n}\n\n// To be observer component\nexport default\n@decorate()\nclass ButtonDefault extends React.Component {\n  // ...\n}\n```\n\n## Installation\n\n```bash\nnpm install babel-helper-decorate-react\n# or use yarn\nyarn add babel-helper-decorate-react\n```\n\n## Usage\n\n```javascript\nimport babel from '@babel/core'\nimport createDecorateReactVisitor from 'babel-helper-decorate-react'\n\nbabel.transform(code, {\n  plugins: [\n    {\n      visitor: createDecorateReactVisitor({\n        // ...opts\n      })\n    }\n  ]\n})\n```\n\n## API\n\n### `createDecorateReactVisitor(options?)`\n\n#### `Options`\n\nextends [createDecorateVisitor#Options](#options-1)\n\n##### `detectComponentName`\n\nShould detect react component name?\n`App` is valid, `app` is invalid.\n\n- **Type:** `boolean`\n- **Default:** `true`\n\n##### `detectClassComponent`\n\nShould detect react class component?\n\n- **Type:** `boolean`\n- **Default:** `true`\n\n##### `detectFunctionComponent`\n\nShould detect react function component?\n\n- **Type:** `boolean`\n- **Default:** `true`\n\n##### `reactClassMemberTokens`\n\nThe MemberExpression or Identifier tokens for Detecting React class component\n\n- **Type:** `string[]`\n- **Default:** `['React.Profiler', 'React.Suspense', 'React.StrictMode', 'React.Fragment', 'Profiler', 'Suspense', 'StrictMode', 'Fragment']`\n\n##### `reactClassSuperTokens`\n\nThe super class tokens for Detecting React class component\n\n- **Type:** `string[]`\n- **Default:** `['React.Component', 'React.PureComponent', 'Component', 'PureComponent']`\n\n##### `reactClassCallTokens`\n\nThe CallExpression tokens for Detecting React class component\n\n- **Type:** `string[]`\n- **Default:** `['React.createRef', 'React.createFactory', 'React.createElement', 'React.cloneElement', 'createRef', 'createFactory', 'createElement', 'cloneElement']`\n\n##### `reactClassMethodsTokens`\n\nThe ClassMethod tokens for Detecting React class component\n\n- **Type:** `string[]`\n- **Default:** `['componentDidUpdate', 'componentDidCatch', 'componentDidMount', 'componentWillMount', 'componentWillReceiveProps', 'componentWillUnmount', 'componentWillUpdate', 'UNSAFE_componentWillMount', 'UNSAFE_componentWillReceiveProps', 'UNSAFE_componentWillUpdate', 'getSnapshotBeforeUpdate', 'shouldComponentUpdate', 'render']`\n\n##### `reactFunctionCallTokens`\n\nThe ClassMethod tokens for Detecting React function component\n\n- **Type:** `string[]`\n- **Default:** `['React.createRef', 'React.createFactory', 'React.createElement', 'React.cloneElement', 'createRef', 'createFactory', 'createElement', 'cloneElement', 'React.useCallback', 'React.useEffect', 'React.useMemo', 'React.useImperativeHandle', 'React.useLayoutEffect', 'React.useReducer', 'React.useContext', 'React.useState', 'React.useDebugValue', 'React.useRef', 'useCallback', 'useEffect', 'useMemo', 'useImperativeHandle', 'useLayoutEffect', 'useReducer', 'useContext', 'useState', 'useDebugValue', 'useRef']`\n\n### createDecorateVisitor\n\n#### Options\n\n##### `prefix`\n\nComment prefix for enable or disable decoration like eslint comment\n\n```js\n/* decorate-disable */\n/* decorate-enable */\n\n// decorate-disable-next-line\n// decorate-disable-line\n\n// decorate-enable-next-line\n// decorate-enable-line\n```\n\n- **Type:** `string`\n- **Default:** `'decorate'`\n\n##### `decorateLibPath`\n\nThe Path of decoration library.\n\n- **Type:** `string`\n- **Default:** `null`\n\n##### `moduleInteropPath`\n\nYou may not use it.\n\n- **Type:** `string | null`\n- **Default:** `require.resolve('module-interop')`\n\n##### `defaultEnable`\n\nThe decoration's status by default\n\nyou can use `// decorate-enable-next-line` to enable when is disabled by default\n\n- **Type:** `boolean`\n- **Default:** `true`\n\n##### `detectScopeDepth`\n\nThe visitorType matched scope depth.  \n`-1` means allow any depth.\n\n```jsx\nconst Button = () =\u003e {\n  // scope depth: 2\n  const Inner = () =\u003e \u003cbutton\u003einner\u003c/button\u003e\n\n  // scope depth: 1\n  return \u003cbutton\u003e123\u003c/button\u003e\n}\n```\n\n- **Type:** `number`\n- **Default:** `-1`\n\n##### `wrapFunctionComponentDecorateTokens`\n\nshould wrap function component decorator\n\n```jsx\n// Input\nconst Button = forwardRef(() =\u003e {\n  // scope depth: 1\n  return \u003cbutton\u003e123\u003c/button\u003e\n})\n\n// Output\nconst Button = decorate()(\n  forwardRef(() =\u003e {\n    // scope depth: 1\n    return \u003cbutton\u003e123\u003c/button\u003e\n  })\n)\n```\n\n- **Type:** `string[]`\n- **Default:** `['forwardRef', 'React.forwardRef']`\n\n## Contributing\n\n- Fork it!\n- Create your new branch:  \n  `git checkout -b feature-new` or `git checkout -b fix-which-bug`\n- Start your magic work now\n- Make sure npm test passes\n- Commit your changes:  \n  `git commit -am 'feat: some description (close #123)'` or `git commit -am 'fix: some description (fix #123)'`\n- Push to the branch: `git push`\n- Submit a pull request :)\n\n## Authors\n\nThis library is written and maintained by imcuttle, \u003ca href=\"mailto:imcuttle@163.com\"\u003eimcuttle@163.com\u003c/a\u003e.\n\n## License\n\nMIT - [imcuttle](https://github.com/imcuttle) 🐟\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Fbabel-helper-decorate-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimcuttle%2Fbabel-helper-decorate-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Fbabel-helper-decorate-react/lists"}