{"_id":"@aliwind/rc-intl","_rev":"1-381675fdbbe04c64393ba7e317920b26","name":"@aliwind/rc-intl","dist-tags":{"latest":"1.0.0-alpha.1"},"versions":{"1.0.0-alpha.1":{"name":"@aliwind/rc-intl","version":"1.0.0-alpha.1","description":"React component for Alibaba Cloud.","main":"lib/index.js","typings":"dist/index.d.ts","module":"es/index.js","publishConfig":{"access":"public"},"keywords":["wind","wind-rc-intl","react","react component"],"author":{"name":"csr632","email":"632882184@qq.com"},"license":"MIT","engines":{"node":">=7.6.0"},"scripts":{"prepublish":"npm run clean && npm run babel && npm run babel:esm && npm run types && npm run build && npm run json","clean":"rm -rf dist lib es api-temp api-json","babel":"breezr build --engine babel","babel:esm":"breezr build --engine babel --es-module","types":"tsc -p src --emitDeclarationOnly && api-extractor run --local --verbose","build":"breezr build --engine webpack","json":"wind-api-documenter flatten-json --input-folder api-temp --output-folder api-json --output-file-name api.json","test":"breezr test:unit","storybook":"breezr start-storybook","lint":"eslint src/","format":"prettier-eslint \"src/**/*.js?(x)\" \"test/**/*.js?(x)\" --write"},"peerDependencies":{"@aliwind/component":"^0.0.1-alpha.0","prop-types":"^15.7.0","react":"^16.8.0","react-dom":"^16.8.0","styled-components":"^4.2.0"},"devDependencies":{"@types/escape-html":"^0.0.20","@types/js-cookie":"^2.2.4"},"dependencies":{"@aliwind/rc-intl-context":"^1.0.0-alpha.1","@babel/runtime":"^7.4.3","classnames":"^2.2.5","intl":"^1.2.5","intl-messageformat":"^7.3.3","js-cookie":"^2.2.1","lodash":"^4.17.15","warning":"^4.0.3"},"gitHead":"f42b92c842c22bfb9288333b6f31be6cbfa9d3da","_id":"@aliwind/rc-intl@1.0.0-alpha.1","_nodeVersion":"12.13.0","_npmVersion":"lerna/3.18.3/node@v12.13.0+x64 (darwin)","dist":{"integrity":"sha512-+ASj8Up6NFVoZFBoUSXx6mAB+4hkZBlZyaKffAw8dhOXAgZoOinsEHp4E1xP4MM/xJuBjBdKDOjAAC8rWsU5Zg==","shasum":"2eea56c8cf88edadd0dabd3012f6ca0571f10731","tarball":"https://registry.npmjs.org/@aliwind/rc-intl/-/rc-intl-1.0.0-alpha.1.tgz","fileCount":91,"unpackedSize":358808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsaCFCRA9TVsSAnZWagAAWJoQAIS/7kaihEXl6GWXLTV6\nJfWFtfuzgKIUw5ftSTOap0jc55w+K6J9ze8FXrYWwIBWO0K3KoXRUBWBLgQ9\nWkYsRUGqbNz7pV+EUBNyFsOh2I0LEsaiBkvjp63y8bhpdjJYL3CnndKA6LOO\ndIEv8VPEW70P6KGTcL/oid5+GKcu/DqbnsudPivDT8G6LCUvOVonY1sBo2w2\nNKq4euqDyOTIu9OF4lbmRQsbBYXgkgCx80DQvG01qR9U1vn4Ga2d1kN4zyy0\ntNNEDUhjrcFU1uDNMdtkquankykxf3SH4wGDS6fs0FqvDT527zODMSQQGBV/\nZgpkTzKkzPTxSJjMRX7DKuVkGS3N1Zqf37XC6C0lvyrqcEFYKPI/k/3qK9yK\nDqSzy62H3E5hAPRLLRnbR42Br0MZQlQtspRYhD22q3FUsZoWrPhOdUCgbCYB\ngIvEgpJz6dgJIu1KdbnPwNBSmWF7XHzmQ6z1+saKvcKzQITqafYxHkXXzvhV\npFl0sMxe5MeqV3BTqQgcBilSwoZwYHi/hVMYfKRmdx1S5SDhKV8s9AW6qCYP\nT6BErbCUMaYUSnxu65GNHygHMGkgbJlcl9NpOlBZGvarGbY0LMqP6KbHOiw1\nbuK6U50SOSd5MXtkBVUv3K3xIW+2DW10WHSV0jcH7q5RjIqjep0eaeCiW58V\n9qAU\r\n=weuZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6A/011yNe3yNAshSHWmyw8r31TKpJgj5J4RFoI5l+GQIgFI68lbtoW4sQJvuda2Wzhj5J7NsJWxX39OihmkovBPA="}]},"maintainers":[{"name":"csr632","email":"632882184@qq.com"},{"name":"macroxing","email":"macroxing@gmail.com"},{"name":"alibaba-cloud-wind","email":"wind@alibabacloud.com"}],"_npmUser":{"name":"csr632","email":"632882184@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rc-intl_1.0.0-alpha.1_1571922053301_0.580976490784272"},"_hasShrinkwrap":false}},"time":{"created":"2019-10-24T13:00:53.092Z","1.0.0-alpha.1":"2019-10-24T13:00:53.441Z","modified":"2022-04-04T13:28:28.972Z"},"maintainers":[{"name":"csr632","email":"632882184@qq.com"},{"name":"macroxing","email":"macroxing@gmail.com"},{"name":"alibaba-cloud-wind","email":"wind@alibabacloud.com"}],"description":"React component for Alibaba Cloud.","keywords":["wind","wind-rc-intl","react","react component"],"author":{"name":"csr632","email":"632882184@qq.com"},"license":"MIT","readme":"---\nname: rc-intl\nzhName: 国际化文案解析\ntype: biz-component\n---\n\n# @aliwind/rc-intl\n\n帮助你的项目快速应用国际化和本地化。让开发者中不在代码耦合某一种语种。\n\n## 安装\n\n```\n$ yarn add @aliwind/rc-intl\n```\n\n## 在 wind 项目中使用\n\n- 在项目入口初始化文案\n\n```js\nimport intl from '@aliwind/rc-intl'\n\n// 通过任何方式拿到当前用户的语言文案，比如由服务端将文案注入到window.messages中\nconst messages = {\n 'app.title': 'English title',\n}\n\nintl.set({ messages })\n```\n\n- 在顶层组件外部包裹一层 HOC\n\n```tsx\nimport { render } from 'react-dom'\nimport { withProvider } from '@aliwind/rc-intl'\n\nconst App = withProvider()(OriginApp)\nrender(, document.getElementById('app'))\n```\n\n- 在项目模块中使用 intl 进行国际化声明\n\n```tsx\nimport intl from '@aliwind/rc-intl'\n\nconst Title = () => {intl('app.title')}
\n\nexport default Title\n```\n\n注意到，前端开发者在编写代码的时候，不再耦合于某一语种，而是依赖于一个“文案 key”，而`文案id=>文案内容`的配置在顶层统一完成。\n\n## 基本使用\n\n[MDXInstruction:importDemo:BasicDemo](./stories/basic/index.tsx)\n\n## API\n\n### intl.set\n\n设定国际化的基本环境变量\n\n```tsx\nintl.set(data: IntlData, options: IntlOptions): void\n```\n\n#### IntlData\n\n```tsx\nIntlData = {\n messages: Object,\n locale?: String,\n}\n```\n\n- messages: 国际化需要的字典描述对象\n- locale: BCP-47 locale 字符串\n\n#### IntlOptions\n\n```tsx\nIntlOptions = {\n determineLocale?: DetermineLocale,\n}\n```\n\n- determineLocale: 确定 locale 自动获取的方式\n\n ```tsx\n DetermineLocale = {\n globalIdentifier?: String|Array,\n cookie?: String|Array,\n html?: Boolean,\n navigator?: Boolean,\n fallback?: String,\n }\n ```\n\n - globalIdentifier: 从全局变量中获取 locale，这个获取逻辑是优先级最高的，如果该值是一个字符串，将会将该字符串作为全局变量的声明引用进行 locale 取值；如果该值为一个字符串数组，则会依次将数组中的字符串作为全局变量的声明顺序进行 locale 的取值，直到取得有效的值。如果 globalIdentifier 设置的值可以获取有效的 locale，则不再执行 `cookie`，`html`，`navigator`，`fallback` 的相关获取逻辑\n - cookie: 从 cookie 中获取 locale，当 globalIdentifier 未获取到有效的值时，将执行和 cookie 相关的获取处理逻辑。如果该值是一个字符串，将会将该字符串作为 cookie 的 key 进行 locale 取值；如果该值为一个字符串数组，则会依次将数组中的字符串作为 cookie 的 key 顺序进行 locale 的取值，直到取得有效的值。如果 cookie 设置的值可以获取有效的 locale，则不再执行 `html`，`navigator`，`fallback` 的相关获取逻辑\n - html: 从 html 标签中获取语言信息(lang)，当 globalIdentifier 和 cookie 都未获取到有效的 locale 值，且 html 的值为真值(truthy value)，则尝试从 html 标签中获取 lang 属性的值，如果可以获得有效的 lang 值，则将获取到的 lang 作为 locale 的值，不再执行后续的获取逻辑\n - navigator: 从 navigator.language 获取语言信息，当前面的获取逻辑均为获取到有效的 locale 值，且 navigator 的值为真值，则尝试从浏览器对象 navigator.language 中获取语言信息，如果可以获得有效的 language 的值，并将其作为 locale 的值，不再执行后续的获取逻辑\n - fallback: 如果从上述的获取逻辑中未去到任何有效的 locale 值，则将 fallback 指定的语言信息字符串作为当前的 locale 值\n\n### intl\n\n输出字典对应 key 的信息\n\n```tsx\nintl(key: String, values?: Object, preferString?: Boolean): String|ReactElement\n```\n\n#### 初始化\n\n首先我们先准备一个字典，并使用 `intl.set` 导入字典声明\n\n**locales/messages.js**\n\n```tsx\nexport default {\n 'app.title': '国际化控制台',\n 'app.desc': '共有{count}个控制台使用了wind国际化功能',\n 'app.desc.html': '共有{count, number}个控制台使用了wind国际化功能'\n}\n```\n\n在字典定义中，变量可以用 `{` `}` 进行声明，并且在使用时进行赋值，关于更多的语法说明，可以参考\n\n- [ICU Message Syntax](https://formatjs.io/guides/message-syntax/)\n\n**initializer.js**\n\n```tsx\nimport intl from '@aliwind/rc-intl'\nimport messages from './locales/messages'\n\nintl.set({ messages })\n```\n\n在入口文件处引用初始化文件\n\n**app.js**\n\n```tsx\nimport React from 'react'\nimport { render } from 'react-dom'\nimport './initializer'\nimport App from './App'\n\nrender(, document.getElementById('app'))\n```\n\n#### 使用 intl 输出字典值\n\n在 App 中的任意模块都可以使用 intl 方法输出字典值\n\n**Title.js**\n\n```tsx\nimport intl from '@aliwind/rc-intl'\n\nconst Title = () => (\n {intl('app.title')}
\n)\n\nexport default Title\n```\n\n#### 使用模板变量\n\n**Desc.js**\n\n```tsx\nimport intl from '@aliwind/rc-intl'\n\nconst Desc = ({ count }) => (\n {intl('app.desc', { count })}\n)\n\nexport default Desc\n```\n\n#### 在变量中使用 React 组件\n\n模板变量可以传入 React 组件，来完成定制化的渲染需求，让我们对 `Desc.js` 进行一些修改，让 `count` 变量接受一个组件\n\n**Desc.js**\n\n```tsx\nimport intl from '@aliwind/rc-intl'\n\nconst Desc = ({ count }) => (\n \n {\n intl('app.desc', {\n count: {intl.number(count)}\n })\n }\n \n)\n\nexport default Desc\n```\n\n需要注意的是，如果字典中使用了 ICU 的格式化语法，如 `I have {count, number} cats` ，请不要在变量中传入组件\n\n#### 默认使用字符串作为国际化输出结果\n\n与之前的 `wind-intl` 不同，使用 `intl()` 的返回结果默认是一个字符串，你可以在诸如 `input.placeholder` 等属性中直接使用\n\n```tsx\n\n```\n\n在以下两种情况下，使用 `intl()` 会返回一个 React 组件：\n\n- 至少有一个变量值是 React 组件\n- 强制指定 `preferString` 参数为 `false`\n\n### intl.html\n\n将带有 html 标签的字典值输出成一段 html，该方法将始终返回一个 React 组件\n\n```tsx\nintl.html(key: String, value?: Object): ReactElement\n```\n\n#### 输出带有 html 标签的字典值\n\n**DescHtml.js**\n\n```tsx\nimport intl from '@aliwind/rc-intl'\n\nconst DescHtml = ({ count }) => (\n {intl.html('app.desc.html', { count })}\n)\n\nexport default DescHtml\n```\n\n### intl.date\n\n将时间日期进行本地化输出\n\n```tsx\nintl.date(date: Date, options?: DateTimePresetFormat|Intl.DateTimeFormatOptions): String\n```\n\n#### DateTimePresetFormat\n\n```tsx\nDateTimePresetFormat = String(\n 'date',\n 'time',\n 'dateTime',\n 'dateTimeWithTimeZone'\n)\n```\n\n#### Intl.DateTimeFormatOptions\n\n[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)\n\n#### 输出本地化的时间格式\n\n**CurrentDateTime.js**\n\n```tsx\nimport intl from '@aliwind/rc-intl'\n\nconst CurrentDateTime = () => (\n {intl.date(new Date())}\n)\n\nexport default CurrentDateTime\n```\n\n#### 使用预设输出本地化的时间格式\n\n`@aliwind/rc-intl` 默认提供三种时间预设：\n\n- `date` : 只输出日期\n- `time` : 只输出时间\n- `dateTime` : (default) 输出日期和时间\n- `dateTimeWithTimeZone` : 输出日期时间以及当前的时区\n\n你可以以字符串的形式指定 `intl.date()` 的第二个参数，使用对应的预设方案\n\n**CurrentDateTime.js**\n\n```tsx\nimport intl from '@aliwind/rc-intl'\n\nconst CurrentDateTime = () => (\n {intl.date(new Date(), 'date')}\n)\n\nexport default CurrentDateTime\n```\n\n### intl.number\n\n将数字进行本地化输出\n\n```tsx\nintl.number(value: Number, options?: Intl.NumberFormatOptions)\n```\n\n#### Intl.NumberFormatOptions\n\n[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat)\n\n#### 输出本地化的数字格式\n\n**Counter.js**\n\n```tsx\nimport intl from '@aliwind/rc-intl'\n\nconst Counter = ({ count }) => (\n {intl.number(count)}\n)\n\nexport default Counter\n```\n","readmeFilename":"README.mdx"}