{"id":15235698,"url":"https://github.com/re-js/babel-plugin-jsx-wrapper","last_synced_at":"2025-04-10T10:21:43.492Z","repository":{"id":44338410,"uuid":"322172846","full_name":"re-js/babel-plugin-jsx-wrapper","owner":"re-js","description":"Babel plugin to automatic decorate jsx for Remini and Mobx","archived":false,"fork":false,"pushed_at":"2022-08-01T07:38:54.000Z","size":112,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T04:58:55.901Z","etag":null,"topics":["automatic","babel","babel-plugin","jsx","mobx","observe","observer","preact","react","remini"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/re-js.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}},"created_at":"2020-12-17T03:47:42.000Z","updated_at":"2024-06-25T16:48:56.000Z","dependencies_parsed_at":"2022-09-19T03:41:48.517Z","dependency_job_id":null,"html_url":"https://github.com/re-js/babel-plugin-jsx-wrapper","commit_stats":null,"previous_names":["betula/babel-plugin-realar"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/re-js%2Fbabel-plugin-jsx-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/re-js%2Fbabel-plugin-jsx-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/re-js%2Fbabel-plugin-jsx-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/re-js%2Fbabel-plugin-jsx-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/re-js","download_url":"https://codeload.github.com/re-js/babel-plugin-jsx-wrapper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248199079,"owners_count":21063641,"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":["automatic","babel","babel-plugin","jsx","mobx","observe","observer","preact","react","remini"],"created_at":"2024-09-29T08:05:22.295Z","updated_at":"2025-04-10T10:21:43.457Z","avatar_url":"https://github.com/re-js.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-jsx-wrapper\n\n[![npm version](https://img.shields.io/npm/v/babel-plugin-jsx-wrapper?style=flat-square)](https://www.npmjs.com/package/babel-plugin-jsx-wrapper) [![code coverage](https://img.shields.io/coveralls/github/betula/babel-plugin-jsx-wrapper?style=flat-square)](https://coveralls.io/github/betula/babel-plugin-jsx-wrapper)\n\nAutomatic decorate jsx arrow functions for smartify and purify your code :+1:\n\nThat plugin for babel wraps all not wrapped arrow functions (that contains JSX and defined in file global scope) to decorator function with easy configuring [Remini](https://github.com/betula/remini), [Mobx](https://github.com/mobxjs/mobx), and [Realar](https://github.com/betula/realar) (_but possible for configure to custom one_). Less code more effectiveness!\n\n### Remini\n\n```javascript\nimport { box, read, update } from 'remini';\n/* import { component } from 'remini/react'; */\n\nconst $value = box(0);\nconst next = () =\u003e update($value, (v) =\u003e v + 1);\n\n// const App = component(() =\u003e {\nconst App = () =\u003e (\n  \u003c\u003e\n    Ticker: {read($value)}\n    \u003cbr /\u003e\n    \u003cbutton onClick={next}\u003eNext\u003c/button\u003e\n  \u003c/\u003e\n);\n```\n\n[See wrapped version on CodeSandbox](https://codesandbox.io/s/remini-automatic-jsx-observe-example-nxqdqr?file=/src/App.tsx).\n\nYou are no need more to wrap (decorate) JSX components to `component` function! It will be automatic.\n\n```javascript\n// .babelrc.js\nmodule.exports = {\n  \"plugins\": [\n    [\"jsx-wrapper\", {\n      \"decorator\": \"remini-react\" // \"remini-preact\", \"realar\", \"mobx-react\", \"mobx-react-lite\", or some custom\n    }]\n  ]\n};\n```\n\n### Mobx\n\n```javascript\nimport { makeAutoObservable } from 'mobx';\n/* import { observer } from 'mobx-react-lite'; */\n\nclass Ticker {\n  value = 0;\n  next = () =\u003e this.value += 1;\n\n  constructor() {\n    makeAutoObservable(this);\n  }\n}\n\nconst ticker = new Ticker();\n\n// const App = observer(() =\u003e (\nconst App = () =\u003e (\n  \u003c\u003e\n    Ticker: {ticker.value}\n    \u003cbr /\u003e\n    \u003cbutton onClick={ticker.next}\u003eNext\u003c/button\u003e\n  \u003c/\u003e\n);\n```\n\n[See wrapped version on CodeSandbox](https://codesandbox.io/s/babel-plugin-jsx-wrapper-mobx-example-q7en9).\n\n```javascript\n// .babelrc.js\nmodule.exports = {\n  \"plugins\": [\n    [\"jsx-wrapper\", {\n      \"decorator\": \"mobx-react-lite\" // \"mobx-react\", \"remini-react\", \"remini-preact\", \"realar\", or some custom\n    }]\n  ]\n};\n```\n\n### Options\n\n**decorator** - function name that using to wrapping jsx arrow function component. (_For example: \"require('mobx-preact').observer\"_) Or name of presetted vendor: \"remini-react\", \"remini-preact\", \"realar\", \"mobx-react\", and \"mobx-react-lite\".\n\n**ucfirst** - boolean flag. Wrap only if first letter of the function name is uppercased. `true` by default.\n\n**root** - string that provide root path for \"exclude\" and \"include\" options.\n\n**exclude** - array of [matcher](https://www.npmjs.com/package/matcher) patterns that needs to exclude.\n\n**include** - array of [matcher](https://www.npmjs.com/package/matcher) patterns that need to include, other ones will be excluded.\n\n```javascript\n// .babelrc.js\nmodule.exports = {\n  \"plugins\": [\n    [\"jsx-wrapper\", {\n      \"include\": [\n        \"src/components/*\",\n        \"src/pages/*\"\n      ],\n      // \"exclude\": [\"node_modules/*\"]\n    }]\n  ]\n};\n```\n\n### Install\n\n```bash\nnpm i --save-dev babel-plugin-jsx-wrapper\n# or\nyarn add babel-plugin-jsx-wrapper\n```\n\nAnd update your babel config:\n\n```javascript\n// .babelrc\n{\n  \"plugins\": [\n    [\"jsx-wrapper\", {\n      \"decorator\": \"remini-react\"\n    }]\n  ]\n}\n```\n\nEnjoy and happy coding!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fre-js%2Fbabel-plugin-jsx-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fre-js%2Fbabel-plugin-jsx-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fre-js%2Fbabel-plugin-jsx-wrapper/lists"}