🎉 chore: 初始化 i18n

Author: arvinxx

jest.config.base.js

@@ -18,6 +18,7 @@ module.exports = {
     '@arvinxu/user-panel': '<rootDir>/packages/user-panel/src',
     '@arvinxu/heatmap-calendar': '<rootDir>/packages/heatmap-calendar/src',
     '@arvinxu/utils': '<rootDir>/packages/utils/src',
+    '@arvinxu/i18n': '<rootDir>/packages/i18n/src',
     '@arvinxu/float-label-input': '<rootDir>/packages/float-label-input/src',
     '@arvinxu/page-loading': '<rootDir>/packages/page-loading/src',
     '@arvinxu/mindflow': '<rootDir>/packages/mindflow/src',

packages/i18n/.fatherrc.js

@@ -0,0 +1,5 @@
+const base = require('../../.fatherrc');
+
+module.exports = {
+  ...base,
+};

packages/i18n/README.md

@@ -0,0 +1,14 @@
+# @arvinxu/i18n
+
+[![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
+
+## License
+
+[MIT](../../LICENSE) ® Arvin Xu
+
+<!-- npm url -->
+
+[version-image]: http://img.shields.io/npm/v/@arvinxu/i18n.svg?color=deepgreen&label=latest
+[version-url]: http://npmjs.org/package/@arvinxu/i18n
+[download-image]: https://img.shields.io/npm/dm/@arvinxu/i18n.svg
+[download-url]: https://npmjs.org/package/@arvinxu/i18n

packages/i18n/jest.config.js

@@ -0,0 +1,14 @@
+const base = require('../../jest.config.base');
+
+const packageName = '@arvinxu/i18n';
+
+const root = '<rootDir>/packages/i18n';
+
+module.exports = {
+  ...base,
+  rootDir: '../..',
+  roots: [root],
+  name: packageName,
+  displayName: packageName,
+  collectCoverageFrom: [`${root}/src/**/*.tsx`, `${root}/src/**/*.ts`],
+};

packages/i18n/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@arvinxu/i18n",
+  "version": "1.0.0",
+  "files": [
+    "lib",
+    "es"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "homepage": "https://github.com/arvinxx/components/tree/master/packages/i18n#readme",
+  "repository": "git+https://github.com/arvinxx/components.git",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "father-build && yarn webpack",
+    "webpack": "webpack",
+    "test": "jest",
+    "test:update": "jest -u",
+    "prepublishOnly": "yarn build",
+    "cov": "jest --coverage",
+    "clean": "rm -rf es lib dist build coverage .umi"
+  }
+}

packages/i18n/src/Intl.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IntlProvider as IntlProvider_ } from 'react-intl';
+import type { IntlProviderProps } from './type';
+
+export const IntlProvider: IntlProviderProps = (props) => (
+  <IntlProvider_ {...props} />
+);

packages/i18n/src/index.ts

@@ -0,0 +1,2 @@
+export * from './Intl';
+export * from './useI18n';

packages/i18n/src/type.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, FC } from 'react';
+import type { IntlProvider } from 'react-intl';
+
+export type LocalesType = 'en-US' | 'zh-CN';
+
+export type LocaleKey = string;
+
+export type IntlProviderProps<T = Record<string, string>> = FC<
+  Omit<ComponentProps<typeof IntlProvider>, 'messages'> & {
+    messages: T;
+  }
+>;

packages/i18n/src/useI18n.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+
+import type { PrimitiveType } from 'intl-messageformat';
+import type { LocalesType, LocaleKey } from './type';
+
+/**
+ *
+ */
+export const useI18n = <T>(inputMessage: T) => {
+  const [locale, setLocale] = useState<LocalesType>('zh-CN');
+  const [messages, setMessages] = useState<T>(inputMessage);
+
+  useEffect(() => {
+    switch (locale) {
+      case 'en-US':
+        setMessages(inputMessage);
+        break;
+      case 'zh-CN':
+      default:
+        setMessages(inputMessage);
+        break;
+    }
+  }, [locale]);
+
+  const switchLocale = (l: LocalesType): void => {
+    setLocale(l);
+  };
+
+  return { locale, messages, switchLocale };
+};
+
+export const useFormatMessage = (): ((
+  id: LocaleKey,
+  values?: Record<string, PrimitiveType>,
+) => string) => {
+  const intl = useIntl();
+  return (id, values) => intl.formatMessage({ id }, values);
+};

packages/i18n/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    /* babel 输出类型 */
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "module": "ESNext",
+    /* 模块导入配置项 */
+    "esModuleInterop": true,
+    "types": ["../../types", "@types/jest"]
+  }
+}

packages/i18n/webpack.config.js

@@ -0,0 +1,11 @@
+const path = require('path');
+const config = require('../../webpack.config');
+
+module.exports = {
+  ...config,
+  output: {
+    ...config.output,
+    library: 'I18n',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};

tsconfig.json

@@ -34,6 +34,8 @@
       "@arvinxu/heatmap-calendar/*": ["./packages/heatmap-calendar/src/*"],
       "@arvinxu/utils": ["./packages/utils/src"],
       "@arvinxu/utils/*": ["./packages/utils/src/*"],
+      "@arvinxu/i18n": ["./packages/i18n/src"],
+      "@arvinxu/i18n/*": ["./packages/i18n/src/*"],
       "@arvinxu/float-label-input": ["./packages/float-label-input/src"],
       "@arvinxu/page-loading": ["./packages/page-loading/src"],
       "@arvinxu/mindflow": ["./packages/mindflow/src"],