{"id":18911793,"url":"https://github.com/kevin940726/define-messages","last_synced_at":"2026-03-09T02:30:17.315Z","repository":{"id":82316171,"uuid":"138288943","full_name":"kevin940726/define-messages","owner":"kevin940726","description":"💬  define intl messages done right","archived":false,"fork":false,"pushed_at":"2019-05-15T05:54:14.000Z","size":54,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-31T13:45:23.364Z","etag":null,"topics":["babel-plugin","codemod","define-messages","i18n","intl","react-intl"],"latest_commit_sha":null,"homepage":"https://npm.im/define-messages","language":"JavaScript","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/kevin940726.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2018-06-22T10:20:00.000Z","updated_at":"2020-04-02T09:30:23.000Z","dependencies_parsed_at":"2023-03-12T15:25:12.315Z","dependency_job_id":null,"html_url":"https://github.com/kevin940726/define-messages","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevin940726%2Fdefine-messages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevin940726%2Fdefine-messages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevin940726%2Fdefine-messages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevin940726%2Fdefine-messages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevin940726","download_url":"https://codeload.github.com/kevin940726/define-messages/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239906997,"owners_count":19716581,"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":["babel-plugin","codemod","define-messages","i18n","intl","react-intl"],"created_at":"2024-11-08T09:51:44.473Z","updated_at":"2026-03-09T02:30:17.271Z","avatar_url":"https://github.com/kevin940726.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# define-messages\n\n💬 define intl messages done right\n\n![npm](https://img.shields.io/npm/v/define-messages.svg)\n![Travis](https://img.shields.io/travis/kevin940726/define-messages.svg) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n## Key features\n\nThis module is mainly started to fix some issues of `react-intl`'s `defineMessages`, which usage is limited and not flexible enough. `define-messages` has almost all the features of `defineMessages` from `react-intl` but more.\n\n- 📦 Babel plugin to extract the defined messages\n- 🗑️ Babel plugin to completely remove the function call to enable dead-code elimination\n- 💪 Flexible nested messages definition\n\n## Installation\n\n```sh\nyarn add define-messages\n```\n\n## Usage\n\n`defineMessages` function return the same thing as the passed in parameter and will do no effect in run-time. The magic is in the babel plugin.\n\n```js\nimport defineMessages from \"define-messages\";\n\n// simple message\nconst message = defineMessages({\n  id: \"id\",\n  defaultMessage: \"default message\"\n});\n\n// multiple messages\nconst messages = defineMessages({\n  title: {\n    id: \"title id\",\n    defaultMessage: \"title default message\"\n  },\n  description: {\n    id: \"description id\",\n    defaultMessage: \"description default message\"\n  }\n});\n\n// even nested messages\nconst groupedMessages = defineMessages({\n  animals: {\n    cat: {\n      id: \"cat id\",\n      defaultMessage: \"cat default message\"\n    }\n  }\n});\n```\n\n### babel-plugin-transform-remove\n\n```js\n// .babelrc\n\nplugins: [\"define-messages/babel/transform-remove\"];\n```\n\nEnable it in client side and to completely remove the `defineMessages()` call in the build. It can enable uglifier like `uglifyJS` to perform dead-code elimination and remove the messages inside the function so that you won't accidentally bundle lots of messages you don't use into your build files.\n\n### babel-plugin-extract\n\n```js\n// .babelrc\n\nplugins: [\"define-messages/babel/extract\"];\n```\n\nRun it with babel transform will extract the defined messages into `metadata` of the transformed code. It's practically useful when you want to manually run the script to extract all the defined messages and generate a translation json file.\n\n```js\nimport { transform } from \"@babel/core\";\n\nconst code = `\n  defineMessages({\n    title: {\n      id: \"title id\",\n      defaultMessage: \"title default message\"\n    },\n    description: {\n      id: \"description id\",\n      defaultMessage: \"description default message\"\n    }\n  });\n`;\n\nconst { metadata } = transform(code, {\n  plugins: [\"define-messages/babel/extract\"]\n});\n\nconsole.log(metadata[\"define-messages\"].messages);\n// [\n//   {\n//     id: \"title id\",\n//     defaultMessage: \"title default message\"\n//   },\n//   {\n//     id: \"description id\",\n//     defaultMessage: \"description default message\"\n//   }\n// ];\n```\n\n## Migrate from react-intl\n\n`define-messages` packaged a [codemod](https://github.com/facebook/jscodeshift) to help you migrate from `react-intl` with a single command.\n\nRun the command in your project root. All the [recast](https://github.com/benjamn/recast/blob/52a7ec3eaaa37e78436841ed8afc948033a86252/lib/options.js#L61) and [jscodeshift](https://github.com/facebook/jscodeshift#usage-cli) options are available.\n\n```sh\nnpx jscodeshift -t node_modules/define-messages/codemod/react-intl-to-define-messages.js \u003cpath\u003e [--quote=single] [--parser=flow]\n```\n\nNote that it currently only support es module import and the coding style of the transformed code is opinionated, feel free to transform it again with `eslint --fix` or `prettier --write`.\n\n## Author\n\nKai Hao\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevin940726%2Fdefine-messages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevin940726%2Fdefine-messages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevin940726%2Fdefine-messages/lists"}