yystopf
/
inula
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat:类型系统开发

This commit is contained in:
eleliauk 2024-10-14 18:16:29 +08:00
parent 2c2c3926e7
commit f295549122
200 changed files with 9125 additions and 1595 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

85
package.json
View File

@ -9,6 +9,9 @@
"prettier": "prettier .prettierrc.js -w packages/**/*.{ts,tsx,js,jsx}",
"build:inula": "pnpm -F openinula build",
"test:inula": "pnpm -F openinula test",
"test:inula-intl": "pnpm -F inula-intl test",
"test:inula-request": "pnpm -F inula-request test",
"test:inula-router": "pnpm -F inula-router test",
"build:inula-cli": "pnpm -F inula-cli build",
"build:inula-intl": "pnpm -F inula-intl build",
"build:inula-request": "pnpm -F inula-request build",
@ -22,46 +25,48 @@
]
},
"devDependencies": {
"@babel/core": "7.16.7",
"@babel/plugin-proposal-class-properties": "7.16.7",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.16.7",
"@babel/plugin-proposal-object-rest-spread": "7.16.7",
"@babel/plugin-proposal-optional-chaining": "7.16.7",
"@babel/plugin-proposal-private-methods": "7.16.7",
"@babel/plugin-proposal-private-property-in-object": "7.16.7",
"@babel/plugin-syntax-jsx": "7.16.7",
"@babel/plugin-transform-arrow-functions": "7.16.7",
"@babel/plugin-transform-block-scoped-functions": "7.16.7",
"@babel/plugin-transform-block-scoping": "7.16.7",
"@babel/plugin-transform-classes": "7.16.7",
"@babel/plugin-transform-computed-properties": "7.16.7",
"@babel/plugin-transform-destructuring": "7.16.7",
"@babel/plugin-transform-for-of": "7.16.7",
"@babel/plugin-transform-literals": "7.16.7",
"@babel/plugin-transform-object-assign": "7.16.7",
"@babel/plugin-transform-object-super": "7.16.7",
"@babel/plugin-transform-parameters": "7.16.7",
"@babel/plugin-transform-react-jsx": "7.16.7",
"@babel/plugin-transform-react-jsx-source": "^7.16.7",
"@babel/plugin-transform-runtime": "7.16.7",
"@babel/plugin-transform-shorthand-properties": "7.16.7",
"@babel/plugin-transform-spread": "7.16.7",
"@babel/plugin-transform-template-literals": "7.16.7",
"@babel/preset-env": "7.16.7",
"@babel/preset-typescript": "7.16.7",
"@babel/runtime": "7.16.7",
"@commitlint/cli": "^18.4.4",
"@commitlint/config-conventional": "^18.4.4",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-node-resolve": "^13.3.0",
"@babel/core": "7.23.7",
"@babel/plugin-proposal-class-properties": "7.18.6",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
"@babel/plugin-proposal-object-rest-spread": "7.20.7",
"@babel/plugin-proposal-optional-chaining": "7.21.0",
"@babel/plugin-proposal-private-methods": "7.18.6",
"@babel/plugin-proposal-private-property-in-object": "7.21.11",
"@babel/plugin-syntax-jsx": "7.23.3",
"@babel/plugin-transform-arrow-functions": "7.23.3",
"@babel/plugin-transform-block-scoped-functions": "7.23.3",
"@babel/plugin-transform-block-scoping": "7.23.4",
"@babel/plugin-transform-classes": "7.23.8",
"@babel/plugin-transform-computed-properties": "7.23.3",
"@babel/plugin-transform-destructuring": "7.23.3",
"@babel/plugin-transform-for-of": "7.23.6",
"@babel/plugin-transform-literals": "7.23.3",
"@babel/plugin-transform-object-assign": "7.23.3",
"@babel/plugin-transform-object-super": "7.23.3",
"@babel/plugin-transform-parameters": "7.23.3",
"@babel/plugin-transform-react-jsx": "7.23.4",
"@babel/plugin-transform-react-jsx-source": "^7.23.3",
"@babel/plugin-transform-runtime": "7.23.7",
"@babel/plugin-transform-shorthand-properties": "7.23.3",
"@babel/plugin-transform-spread": "7.23.3",
"@babel/plugin-transform-template-literals": "7.23.3",
"@babel/preset-env": "7.23.8",
"@babel/preset-typescript": "7.23.3",
"@babel/runtime": "7.23.8",
"@commitlint/cli": "^17.8.1",
"@commitlint/config-conventional": "^17.8.1",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-replace": "^4.0.0",
"@types/jest": "^26.0.24",
"@types/jest": "^29.5.11",
"@types/node": "^17.0.18",
"@typescript-eslint/eslint-plugin": "4.8.0",
"@typescript-eslint/parser": "4.8.0",
"babel-jest": "^27.5.1",
"@typescript-eslint/eslint-plugin": "^6.18.1",
"@typescript-eslint/parser": "6.18.1",
"@babel/parser": "^7.24.7",
"magic-string": "^0.30.10",
"babel-jest": "^29.7.0",
"ejs": "^3.1.8",
"eslint": "7.13.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-jest": "^22.15.0",
"eslint-plugin-no-function-declare-after-return": "^1.0.0",
@ -72,9 +77,13 @@
"lint-staged": "^15.2.0",
"openinula": "workspace:*",
"prettier": "^3.1.1",
"rollup": "^2.75.5",
"rollup": "^2.79.1",
"rollup-plugin-dts": "^6.1.0",
"rollup-plugin-execute": "^1.1.1",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-esbuild": "^6.1.1",
"rollup-plugin-polyfill-node": "^0.13.0",
"ts-jest": "^29.1.1",
"typescript": "^4.9.5"
},
"engines": {

4
packages/create-inula/lib/generators/Simple-app/templates/vite/README.md
View File

@ -1,4 +0,0 @@
# openinula + vite
该模板提供了 `openinula` 工作在 `vite`的基础配置。
> 请注意由于Vite插件有node版本限制，请使用`node -v`命令确认node版本大于等于node v18。

49
packages/create-inula/lib/generators/Simple-app/templates/webpack/src/App.jsx
View File

@ -1,49 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import Inula from 'openinula';
import './styles.css';
class App extends Inula.Component {
render() {
return (
<div class="container">
<div class="hero">
<h1 class="hero-title animate__animated animate__bounceInDown">欢迎来到 Inula 项目!</h1>
<p class="hero-subtitle animate__animated animate__bounceInUp">你已成功创建你的第一个 Inula 项目</p>
</div>
<div class="content">
<div class="card animate__animated animate__zoomIn">
<h2>开始吧</h2>
<p>
编辑 <code>src/App.js</code> 并保存以重新加载。
</p>
</div>
<div class="card animate__animated animate__zoomIn">
<h2>了解更多</h2>
<p>
要了解 Inula，查看{' '}
<a href="https://openinula.org" target="_blank">
Inula 官网
</a>
</p>
</div>
</div>
</div>
);
}
}
export default App;

19
packages/create-inula/lib/generators/Simple-app/templates/webpack/src/index.jsx
View File

@ -1,19 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import Inula from 'openinula';
import App from './App';
Inula.render(<App />, document.getElementById('root'));

43
packages/create-inula/lib/generators/Simple-reactive-app/index.js
View File

@ -1,43 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
const BasicGenerator = require('../../BasicGenerator');
class Generator extends BasicGenerator {
prompting() {
return this.prompt([
{
type: 'list',
name: 'bundlerType',
message: 'Please select the build type',
choices: ['webpack', 'vite'],
},
]).then(props => {
this.prompts = props;
});
}
writing() {
const src = this.templatePath(this.prompts.bundlerType);
const dest = this.destinationPath();
this.writeFiles(src, dest, {
context: {
...this.prompts,
},
});
}
}
module.exports = Generator;

3
packages/create-inula/lib/generators/Simple-reactive-app/meta.json
View File

@ -1,3 +0,0 @@
{
"description": "simple reactive app template."
}

4
packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/README.md
View File

@ -1,4 +0,0 @@
# openinula + vite
该模板提供了 `openinula` 工作在 `vite`的基础配置。
> 请注意由于Vite插件有node版本限制，请使用`node -v`命令确认node版本大于等于node v18。

11
packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/index.html
View File

@ -1,11 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Inula App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>

25
packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/package.json
View File

@ -1,25 +0,0 @@
{
"name": "inula-vite-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "vite",
"build": "vite build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"openinula": "0.0.0-experimental-20231201"
},
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"@babel/preset-react": "^7.18.6",
"@vitejs/plugin-react": "^3.1.0",
"@vitejs/plugin-react-refresh": "^1.3.6",
"babel-plugin-import": "^1.13.6",
"vite": "^4.2.1"
}
}

38
packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/src/ReactiveComponent.jsx
View File

@ -1,38 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import Inula, { useComputed, useReactive, useRef } from 'openinula';
function ReactiveComponent() {
const renderCount = ++useRef(0).current;
const data = useReactive({ count: 0 });
const countText = useComputed(() => {
return `计时: ${data.count.get()}`;
});
setInterval(() => {
data.count.set(c => c + 1);
}, 1000);
return (
<div>
<div>{countText}</div>
<div>组件渲染次数:{renderCount}</div>
</div>
);
}
export default ReactiveComponent;

57
packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/src/index.css
View File

@ -1,57 +0,0 @@
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
color: #fff;
background: linear-gradient(120deg, #6a11cb 0%, #2575fc 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
text-align: center;
}
.hero-title {
font-size: 3em;
margin-bottom: 20px;
}
.hero-subtitle {
font-size: 1.5em;
margin-bottom: 50px;
}
.content {
display: flex;
justify-content: space-between;
align-items: center;
margin: 1vh;
}
.card {
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
padding: 20px;
width: 100%;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4px);
}
.card h2,
.card p {
color: #fff;
}
.card a {
color: #fff;
text-decoration: underline;
}

47
packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/src/index.jsx
View File

@ -1,47 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import Inula from 'openinula';
import ReactiveComponent from './ReactiveComponent';
import './index.css';
function App() {
return (
<div class="container">
<div class="hero">
<h1 class="hero-title animate__animated animate__bounceInDown">欢迎来到 Inula 项目!</h1>
<p class="hero-subtitle animate__animated animate__bounceInUp">你已成功创建你的第一个响应式 Inula 项目</p>
</div>
<div className="content">
<div className="card animate__animated animate__zoomIn">
<ReactiveComponent />
</div>
</div>
<div class="content">
<div class="card animate__animated animate__zoomIn">
<h2>了解更多</h2>
<p>
要了解 Inula，查看{' '}
<a href="https://openinula.net/" target="_blank">
Inula 官网
</a>
</p>
</div>
</div>
</div>
);
}
Inula.render(<App />, document.getElementById('root'));

29
packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/vite.config.js
View File

@ -1,29 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import react from '@vitejs/plugin-react';
let alias = {
react: 'openinula', // 新增
'react-dom': 'openinula', // 新增
'react/jsx-dev-runtime': 'openinula/jsx-dev-runtime',
};
export default {
plugins: [react()],
resolve: {
alias,
},
};

29
packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/package.json
View File

@ -1,29 +0,0 @@
{
"name": "inula-webpack-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"openinula": "0.0.0-experimental-20231201"
},
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"css-loader": "^6.7.3",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.2",
"url-loader": "^4.1.1",
"webpack": "^5.77.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.13.2"
}
}

49
packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/App.jsx
View File

@ -1,49 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import Inula from 'openinula';
import ReactiveComponent from './ReactiveComponent';
import './styles.css';
class App extends Inula.Component {
render() {
return (
<div class="container">
<div class="hero">
<h1 class="hero-title animate__animated animate__bounceInDown">欢迎来到 Inula 项目!</h1>
<p class="hero-subtitle animate__animated animate__bounceInUp">你已成功创建你的第一个响应式 Inula 项目</p>
</div>
<div className="content">
<div className="card animate__animated animate__zoomIn">
<ReactiveComponent />
</div>
</div>
<div class="content">
<div class="card animate__animated animate__zoomIn">
<h2>了解更多</h2>
<p>
要了解 Inula，查看{' '}
<a href="https://openinula.org" target="_blank">
Inula 官网
</a>
</p>
</div>
</div>
</div>
);
}
}
export default App;

38
packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/ReactiveComponent.jsx
View File

@ -1,38 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import Inula, { useComputed, useReactive, useRef } from 'openinula';
function ReactiveComponent() {
const renderCount = ++useRef(0).current;
const data = useReactive({ count: 0 });
const countText = useComputed(() => {
return `计时: ${data.count.get()}`;
});
setInterval(() => {
data.count.set(c => c + 1);
}, 1000);
return (
<div>
<div>{countText}</div>
<div>组件渲染次数:{renderCount}</div>
</div>
);
}
export default ReactiveComponent;

11
packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/index.html
View File

@ -1,11 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Inula App</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>

19
packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/index.jsx
View File

@ -1,19 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import Inula from 'openinula';
import App from './App';
Inula.render(<App />, document.getElementById('root'));

57
packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/styles.css
View File

@ -1,57 +0,0 @@
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
color: #fff;
background: linear-gradient(120deg, #6a11cb 0%, #2575fc 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
text-align: center;
}
.hero-title {
font-size: 3em;
margin-bottom: 20px;
}
.hero-subtitle {
font-size: 1.5em;
margin-bottom: 50px;
}
.content {
display: flex;
justify-content: space-between;
align-items: center;
margin: 1vh;
}
.card {
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
padding: 20px;
width: 100%;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4px);
}
.card h2,
.card p {
color: #fff;
}
.card a {
color: #fff;
text-decoration: underline;
}

84
packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/webpack.config.js
View File

@ -1,84 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
[
'@babel/preset-react',
{
runtime: 'automatic', // 新增
importSource: 'openinula', // 新增
},
],
],
},
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
publicPath: 'images/',
},
},
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src/index.html'),
filename: 'index.html',
}),
],
devServer: {
static: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
open: true,
},
resolve: {
extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'],
},
};

2
packages/create-inula/lib/run.js
View File

@ -32,8 +32,8 @@ const generatorType = fs
});
const runGenerator = async (templatePath, { name = '', cwd = process.cwd(), args = {} }) => {
let currentPath;
return new Promise(resolve => {
let currentPath;
if (name) {
mkdirp.sync(name);
currentPath = path.join(cwd, name);

1
packages/inula-cli/externals.d.ts vendored
View File

@ -14,4 +14,3 @@
*/
declare module 'crequire';

51
packages/inula-cli/src/builtInPlugins/command/build/build.ts
View File

@ -1,51 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import webpack from 'webpack';
import { build } from 'vite';
export default (api: any) => {
api.registerCommand({
name: 'build',
description: 'build application for production',
initialState: api.buildConfig,
fn: async function (args: any, state: any) {
switch (api.compileMode) {
case 'webpack':
if (state) {
api.applyHook({ name: 'beforeCompile', args: state });
state.forEach((s: any) => {
webpack(s.config, (err: any, stats: any) => {
if (err || stats.hasErrors()) {
api.logger.error(`Build failed.err: ${err}, stats:${stats}`);
}
});
});
} else {
api.logger.error(`Build failed. Can't find build config.`);
}
break;
case 'vite':
if (state) {
api.applyHook({ name: 'beforeCompile' });
build(state);
} else {
api.logger.error(`Build failed. Can't find build config.`);
}
break;
}
},
});
};

4
packages/inula-cli/src/builtInPlugins/command/dev/buildDev.ts
View File

@ -57,7 +57,7 @@ export default (api: API) => {
api.applyHook({ name: 'afterStartDevServer' });
});
} else {
api.logger.error('Can\'t find config');
api.logger.error("Can't find config");
}
break;
case 'vite':
@ -70,7 +70,7 @@ export default (api: API) => {
server.printUrls();
});
} else {
api.logger.error('Can\'t find config');
api.logger.error("Can't find config");
}
break;
default:

2
packages/inula-cli/src/builtInPlugins/command/generate/generate.ts
View File

@ -33,7 +33,7 @@ export default (api: API) => {
args._.shift();
}
if (args._.length === 0) {
api.logger.warn('Can\'t find any generate options.');
api.logger.warn("Can't find any generate options.");
return;
}

42
packages/inula-intl/.babelrc Normal file
View File

@ -0,0 +1,42 @@
{
"presets": [
["@babel/preset-env", {
"targets": {
"node": "current"
}
}],
"@babel/preset-typescript",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-syntax-jsx",
[
"@babel/plugin-transform-react-jsx",
{
"runtime": "automatic",
"importSource": "openinula"
}
],
["@babel/plugin-proposal-class-properties", { "loose": true }],
["@babel/plugin-proposal-private-methods", { "loose": true }],
["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
"@babel/plugin-transform-object-assign",
"@babel/plugin-transform-object-super",
["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": true }],
["@babel/plugin-transform-template-literals", { "loose": true }],
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-transform-literals",
"@babel/plugin-transform-for-of",
"@babel/plugin-transform-block-scoped-functions",
"@babel/plugin-transform-classes",
"@babel/plugin-transform-shorthand-properties",
"@babel/plugin-transform-computed-properties",
"@babel/plugin-transform-parameters",
["@babel/plugin-transform-spread", { "loose": true, "useBuiltIns": true }],
["@babel/plugin-transform-block-scoping", { "throwIfClosureRequired": false }],
["@babel/plugin-transform-destructuring", { "loose": true, "useBuiltIns": true }],
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-optional-chaining"
]
}

32
packages/inula-intl/babel.config.js
View File

@ -1,32 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
const { preset } = require('./jest.config');
module.exports = {
presets: [
[
'@babel/preset-env',
{ targets: { node: 'current' } },
],
['@babel/preset-typescript'],
[
'@babel/preset-react',
{
runtime: 'automatic',
importSource: 'openinula',
},
],
],
};

14
packages/inula-intl/build-type.js
View File

@ -7,12 +7,12 @@ function deleteFolder(filePath) {
if (fs.lstatSync(filePath).isDirectory()) {
const files = fs.readdirSync(filePath);
files.forEach(file => {
const nectFilePath = path.join(filePath, file);
const states = fs.lstatSync(nectFilePath);
const nextFilePath = path.join(filePath, file);
const states = fs.lstatSync(nextFilePath);
if (states.isDirectory()) {
deleteFolder(nectFilePath);
deleteFolder(nextFilePath);
} else {
fs.unlinkSync(nectFilePath);
fs.unlinkSync(nextFilePath);
}
});
fs.rmdirSync(filePath);
@ -31,12 +31,12 @@ export function cleanUp(folders) {
return {
name: 'clean-up',
buildEnd() {
folders.forEach(folder => deleteFolder(folder));
folders.forEach(f => deleteFolder(f));
},
};
}
function builderTypeConfig() {
function buildTypeConfig() {
return {
input: './build/@types/index.d.ts',
output: {
@ -47,4 +47,4 @@ function builderTypeConfig() {
};
}
export default [builderTypeConfig()];
export default [buildTypeConfig()];

34
packages/inula-intl/example/App.tsx
View File

@ -13,7 +13,7 @@
* See the Mulan PSL v2 for more details.
*/
import Inula, { useState } from 'openinula';
import { useState } from 'openinula';
import { IntlProvider } from '../index';
import zh from './locale/zh';
import en from './locale/en';
@ -32,23 +32,29 @@ const App = () => {
const message = locale === 'zh' ? zh : en;
return (
<IntlProvider locale={locale} messages={locale === 'zh' ? zh : en}>
<header>Inula-Intl API Test Demo</header>
<div className="container">
<Example1 />
<Example2 />
<Example3 locale={locale} setLocale={setLocale} />
</div>
<>
<IntlProvider locale={locale} messages={locale === 'zh' ? zh : en}>
<header>Inula-Intl API Test Demo</header>
<div className="container">
<Example1 />
<Example2 />
<Example3 locale={locale} setLocale={setLocale} />
</div>
<div className="container">
{/*<Example4 locale={locale} messages={message} />*/}
<Example5 />
</div>
<div className="button">
<button onClick={handleChange}>切换语言</button>
</div>
</IntlProvider>
<div className="container">
<Example4 locale={locale} messages={message} />
<Example5 />
</div>
<div className="container">
<Example6 locale={{ locale }} messages={message} />
</div>
<div className="button">
<button onClick={handleChange}>切换语言</button>
</div>
</IntlProvider>
</>
);
};

4
packages/inula-intl/example/components/Example1.tsx
View File

@ -13,16 +13,16 @@
* See the Mulan PSL v2 for more details.
*/
import Inula from 'openinula';
import { useIntl } from '../../index';
const Example1 = () => {
const { i18n } = useIntl();
const i18n = useIntl();
return (
<div className="card">
<h2>useIntl方式测试Demo</h2>
<pre>{i18n.formatMessage({ id: 'text1' })}</pre>
<pre>{i18n.$t({ id: 'text1' })}</pre>
</div>
);
};

4
packages/inula-intl/example/components/Example2.tsx
View File

@ -12,7 +12,6 @@
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import Inula from 'openinula';
import { FormattedMessage } from '../../index';
const Example2 = () => {
@ -22,6 +21,9 @@ const Example2 = () => {
<pre>
<FormattedMessage id="text2" />
</pre>
<pre>
<FormattedMessage id="text5" values={{ testComponent1: <b>123</b>, testComponent2: <b>456</b> }} />
</pre>
</div>
);
};

1
packages/inula-intl/example/components/Example3.tsx
View File

@ -13,7 +13,6 @@
* See the Mulan PSL v2 for more details.
*/
import Inula from 'openinula';
import { FormattedMessage } from '../../index';
const Example3 = props => {

1
packages/inula-intl/example/components/Example4.tsx
View File

@ -13,7 +13,6 @@
* See the Mulan PSL v2 for more details.
*/
import Inula from 'openinula';
import { createIntl } from '../../index';
const Example4 = props => {

27
packages/inula-intl/example/components/Example5.tsx
View File

@ -13,23 +13,16 @@
* See the Mulan PSL v2 for more details.
*/
import Inula, { Component } from 'openinula';
import { injectIntl } from '../../index';
class Example5 extends Component<any, any, any> {
public constructor(props: any, context) {
super(props, context);
}
render() {
const { intl } = this.props as any;
return (
<div className="card">
<h2>injectIntl方式测试Demo</h2>
<pre>{intl.formatMessage({ id: 'text4' })}</pre>
</div>
);
}
}
const Example5 = ({ intl }) => {
// 使用intl.formatMessage来获取国际化消息
console.log(intl + '------------intl-------------');
return (
<div className="card">
<h2>injectIntl方式测试Demo</h2>
<pre>{intl.formatMessage({ id: 'text4' })}</pre>
</div>
);
};
export default injectIntl(Example5);

3
packages/inula-intl/example/components/Example6.tsx
View File

@ -13,7 +13,6 @@
* See the Mulan PSL v2 for more details.
*/
import Inula from 'openinula';
import { createIntl, createIntlCache, RawIntlProvider } from '../../index';
import Example6Child from './Example6Child';
@ -21,7 +20,7 @@ const Example6 = (props: any) => {
const { locale, messages } = props;
const cache = createIntlCache();
let i18n = createIntl({ locale: locale, messages: messages }, cache);
const i18n = createIntl({ locale: locale, messages: messages }, cache);
return (
<RawIntlProvider value={i18n}>

2
packages/inula-intl/example/components/Example6Child.tsx
View File

@ -15,7 +15,7 @@
import { useIntl } from '../../index';
const Example6Child = (props: any) => {
const Example6Child = () => {
const { formatMessage } = useIntl();
return (

2
packages/inula-intl/example/index.tsx
View File

@ -12,7 +12,7 @@
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import * as Inula from 'openinula';
import Inula from 'openinula';
import App from './App';
function render() {

1
packages/inula-intl/example/locale/en.ts
View File

@ -19,4 +19,5 @@ export default {
text2: 'Welcome to the Inula-Intl component!',
text3: 'Welcome to the Inula-Intl component!',
text4: 'Welcome to the Inula-Intl component!',
text5: 'Render a component {testComponent1} {testComponent2}!',
};

1
packages/inula-intl/example/locale/zh.ts
View File

@ -18,4 +18,5 @@ export default {
text2: '欢迎使用国际化组件！',
text3: '欢迎使用国际化组件！',
text4: '欢迎使用国际化组件！',
text5: '渲染一个组件 {testComponent1} {testComponent2}!',
};

8
packages/inula-intl/index.ts
View File

@ -22,7 +22,7 @@ import I18nProvider from './src/core/components/I18nProvider';
import injectIntl, { I18nContext, InjectProvider } from './src/core/components/InjectI18n';
import useI18n from './src/core/hook/useI18n';
import createI18n from './src/core/createI18n';
import { InjectedIntl, MessageDescriptor } from './src/types/interfaces';
import { MessageDescriptor } from './src/types/interfaces';
// 函数API
export {
I18n,
@ -36,7 +36,7 @@ export {
// 组件
export {
FormattedMessage,
I18nContext,
I18nContext as IntlContext,
I18nProvider as IntlProvider,
injectIntl as injectIntl,
InjectProvider as RawIntlProvider,
@ -64,7 +64,3 @@ export function defineMessages<K extends keyof any, T = MessageDescriptor, U = R
export function defineMessage<T>(msg: T): T {
return msg;
}
export interface InjectedIntlProps {
intl: InjectedIntl;
}

4
packages/inula-intl/jest.config.js
View File

@ -13,7 +13,7 @@
* See the Mulan PSL v2 for more details.
*/
module.exports = {
export default {
coverageDirectory: 'coverage',
resetModules: true,
preset: 'ts-jest/presets/js-with-ts',
@ -30,8 +30,10 @@ module.exports = {
globals: {
'ts-jest': {
tsconfig: 'tsconfig.json',
diagnostics: false,
},
},
testPathIgnorePatterns: ['\\\\node_modules\\\\'],
testEnvironment: 'jsdom',
};

31
packages/inula-intl/package.json
View File

@ -3,13 +3,13 @@
"version": "0.0.5",
"description": "",
"main": "build/intl.umd.js",
"type": "commonjs",
"type": "module",
"types": "build/@types/index.d.ts",
"scripts": {
"demo-serve": "webpack serve --mode=development",
"build": "rollup --config rollup.config.js && npm run build-types",
"build": "rollup --config rollup.config.js && npm run build-types ",
"build-types": "tsc -p tsconfig.json && rollup -c build-type.js",
"test": "jest --config jest.config.js",
"test": "jest --no-cache --config jest.config.js",
"test-c": "jest --coverage"
},
"repository": {
@ -17,8 +17,7 @@
"url": ""
},
"files": [
"build",
"README.md"
"/build"
],
"keywords": [],
"author": "",
@ -27,35 +26,23 @@
"openinula": ">=0.1.1"
},
"devDependencies": {
"@babel/core": "7.21.3",
"@babel/preset-env": "^7.16.7",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "7.16.7",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-node-resolve": "^7.1.3",
"@rollup/plugin-typescript": "^11.0.0",
"rollup-plugin-dts": "^6.1.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@types/node": "^16.18.27",
"@types/react": "18.0.25",
"babel": "^6.23.0",
"babel-jest": "^29.5.0",
"babel-loader": "^9.1.2",
"html-webpack-plugin": "^5.5.1",
"jest": "29.3.1",
"jest-environment-jsdom": "^29.5.0",
"jsdom": "^21.1.1",
"prettier": "^2.8.7",
"rollup": "^2.0.0",
"react": "18.2.0-h3",
"react-dom": "18.2.0-h3",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-terser": "^5.3.0",
"tslib": "^2.6.1",
"ts-jest": "29.0.3",
"rollup-plugin-visualizer": "^5.10.0",
"ts-node": "10.9.1",
"typescript": "4.9.3",
"webpack": "^5.81.0",
"tslib": "^2.6.1",
"webpack": "^5.72.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.13.3"
}

4842
packages/inula-intl/report.html Normal file
View File

File diff suppressed because one or more lines are too long

74
packages/inula-intl/rollup.config.js
View File

@ -19,6 +19,7 @@ import babel from '@rollup/plugin-babel';
import nodeResolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';
import { visualizer } from 'rollup-plugin-visualizer';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
@ -29,34 +30,55 @@ const output = path.join(__dirname, '/build');
const extensions = ['.js', '.ts', '.tsx'];
export default {
input: entry,
output: [
const BuildConfig = mode => {
const prod = mode.startsWith('prod');
const outputList = [
{
file: path.resolve(output, 'intl.umd.js'),
name: 'InulaI18n',
format: 'umd',
file: path.join(output, `cjs/intl.${prod ? 'min.' : ''}js`),
sourcemap: 'true',
format: 'cjs',
globals: {
openinula: 'Inula',
},
},
{
file: path.resolve(output, 'intl.esm-browser.js'),
file: path.join(output, `umd/intl.${prod ? 'min.' : ''}js`),
name: 'InulaI18n',
sourcemap: 'true',
format: 'umd',
globals: {
openinula: 'Inula',
},
},
];
if (!prod) {
outputList.push({
file: path.join(output, 'esm/intl.js'),
sourcemap: 'true',
format: 'esm',
}
],
plugins: [
nodeResolve({
extensions,
modulesOnly: true,
}),
babel({
exclude: 'node_modules/**',
configFile: path.join(__dirname, '/babel.config.js'),
extensions,
}),
typescript({
tsconfig: 'tsconfig.json',
include: ['./**/*.ts', './**/*.tsx'],
}),
terser(),
],
external: ['openinula', 'react', 'react-dom'],
});
}
return {
input: entry,
output: outputList,
plugins: [
nodeResolve({
extensions,
modulesOnly: true,
}),
babel({
exclude: 'node_modules/**',
configFile: path.join(__dirname, '/.babelrc'),
extensions,
babelHelpers: 'runtime',
}),
typescript({
tsconfig: 'tsconfig.json',
include: ['./**/*.ts', './**/*.tsx'],
}),
terser(),
],
external: ['openinula', 'react', 'react-dom'],
};
};
export default [BuildConfig('dev'), BuildConfig('prod')];

26
packages/inula-intl/src/constants/index.ts
View File

@ -18,8 +18,13 @@
* \\x[a-fA-F0-9]{2} 匹配形如 \x0A 的十六进制转义字符。
* [nrtf'"] 匹配常见的转义字符：\n（换行符）、\r（回车符）、\t（制表符）、\f（换页符）、\'（单引号）和 \"（双引号）。
*/
export const UNICODE_REG = /\\(?:u\{[a-fA-F0-9]+}|x[a-fA-F0-9]{2}|[nrtf'"])/g;
export const UNICODE_REG: RegExp = /\\(?:u\{[a-fA-F0-9]+}|x[a-fA-F0-9]{2}|[nrtf'"])/g;
export const STICKY_FLAG: string = 'ym';
export const GLOBAL_FLAG: string = 'gm';
export const VERTICAL_LINE: string = '|';
export const UNICODE_FLAG: string = 'u';
export const STATE_GROUP_START_INDEX: number = 1;
// Inula 需要被保留静态常量
export const INULA_STATICS = {
childContextTypes: true,
@ -76,3 +81,22 @@ export const INULA_MEMO_STATICS = {
// 默认复数规则
export const DEFAULT_PLURAL_KEYS = ['zero', 'one', 'two', 'few', 'many', 'other'];
export const voidElementTags = [
'area',
'base',
'br',
'col',
'embed',
'hr',
'img',
'input',
'keygen',
'link',
'meta',
'param',
'source',
'track',
'wbr',
'menuitem',
];

49
packages/inula-intl/src/core/I18n.ts
View File

@ -18,30 +18,48 @@ import DateTimeFormatter from '../format/fomatters/DateTimeFormatter';
import NumberFormatter from '../format/fomatters/NumberFormatter';
import { getFormatMessage } from '../format/getFormatMessage';
import { I18nCache, I18nProps, MessageDescriptor, MessageOptions } from '../types/interfaces';
import { Locale, Locales, Messages, AllLocaleConfig, AllMessages, LocaleConfig, Error, Events } from '../types/types';
import {
Locale,
Locales,
Messages,
AllLocaleConfig,
AllMessages,
LocaleConfig,
Error,
Events,
InulaNode,
} from '../types/types';
import creatI18nCache from '../format/cache/cache';
import { isValidElement } from 'openinula';
export class I18n extends EventDispatcher<Events> {
public locale: Locale;
public locales: Locales;
public defaultLocale?: Locale;
public timeZone?: string;
private allMessages: AllMessages;
private readonly _localeConfig: AllLocaleConfig;
private readonly allMessages: AllMessages;
public readonly error?: Error;
public readonly onError?: Error;
public readonly cache?: I18nCache;
constructor(props: I18nProps) {
super();
this.locale = 'en';
this.defaultLocale = 'en';
this.locale = this.defaultLocale;
this.locales = this.locale || '';
this.allMessages = {};
this._localeConfig = {};
this.error = props.error;
this.onError = props.onError;
this.timeZone = '';
this.loadMessage(props.messages);
if (props.localeConfig) {
this.loadLocaleConfig(props.localeConfig);
}
if (props.messages) {
this.changeMessage(props.messages);
}
if (props.locale || props.locales) {
this.changeLanguage(props.locale!, props.locales);
@ -93,6 +111,11 @@ export class I18n extends EventDispatcher<Events> {
}
}
changeMessage(messages: AllMessages) {
this.allMessages = messages;
this.emit('change');
}
// 加载messages
loadMessage(localeOrMessages: Locale | AllMessages | undefined, messages?: Messages) {
if (messages) {
@ -118,9 +141,21 @@ export class I18n extends EventDispatcher<Events> {
formatMessage(
id: MessageDescriptor | string,
values: Record<string, unknown> | undefined = {},
{ message, context, formatOptions }: MessageOptions = {}
{ messages, context, formatOptions }: MessageOptions = {}
) {
return getFormatMessage(this, id, values, { message, context, formatOptions });
// 在多次渲染时，保证存储component不丢失
const components: { [key: string]: InulaNode } = {};
const tempValues: Record<string, unknown> = { ...values };
if (tempValues) {
Object.keys(tempValues).forEach((key, index) => {
const value = tempValues[key];
if (!isValidElement(value)) return;
// 将inula元素暂存
components[index] = value;
tempValues[key] = `<${index}/>`;
});
}
return getFormatMessage(this, id, tempValues, { messages, context, formatOptions }, components!);
}
formatDate(value: string | Date, formatOptions?: Intl.DateTimeFormatOptions): string {

19
packages/inula-intl/src/core/components/FormattedMessage.tsx
View File

@ -12,7 +12,7 @@
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import Inula, { Children, Fragment } from 'openinula';
import { Children, Fragment } from 'openinula';
import { FormattedMessageProps } from '../../types/interfaces';
import useI18n from '../hook/useI18n';
@ -22,28 +22,17 @@ import useI18n from '../hook/useI18n';
* @constructor
*/
function FormattedMessage(props: FormattedMessageProps) {
const { i18n } = useI18n();
const {
id,
values,
messages,
formatOptions,
context,
tagName: TagName = Fragment,
children,
comment,
useMemorize,
}: any = props;
const { formatMessage } = useI18n();
const { id, values, messages, formatOptions, context, tagName: TagName = Fragment, children, comment }: any = props;
const formatMessageOptions = {
comment,
messages,
context,
useMemorize,
formatOptions,
};
let formattedMessage = i18n.formatMessage(id, values, formatMessageOptions);
const formattedMessage = formatMessage(id, values, formatMessageOptions);
if (typeof children === 'function') {
const childNodes = Array.isArray(formattedMessage) ? formattedMessage : [formattedMessage];

37
packages/inula-intl/src/core/components/I18nProvider.tsx
View File

@ -12,10 +12,10 @@
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import Inula, { useRef, useState, useEffect, useMemo } from 'openinula';
import { useRef, useState, useEffect, useMemo } from 'openinula';
import { InjectProvider } from './InjectI18n';
import I18n, { createI18nInstance } from '../I18n';
import { I18nProviderProps } from '../../types/types';
import { AllMessages, I18nProviderProps, Messages } from '../../types/types';
/**
* 用于为应用程序提供国际化的格式化功能，管理程序中的语言文本信息和本地化资源信息
@ -23,28 +23,31 @@ import { I18nProviderProps } from '../../types/types';
* @constructor
*/
const I18nProvider = (props: I18nProviderProps) => {
const { locale, messages, children } = props;
const { locale, messages, children, i18n } = props;
const i18n = useMemo(() => {
return createI18nInstance({
locale: locale,
messages: messages,
});
}, [locale, messages]);
const i18nInstance =
i18n ||
useMemo(() => {
return createI18nInstance({
locale: locale,
messages: messages,
});
}, [locale, messages]);
// 使用useRef保存上次的locale值
const localeRef = useRef<string | undefined>(i18n.locale);
const [context, setContext] = useState<I18n>(i18n);
const localeRef = useRef<string | undefined>(i18nInstance.locale);
const localeMessage = useRef<string | Messages | AllMessages>(i18nInstance.messages);
const [context, setContext] = useState<I18n>(i18nInstance);
useEffect(() => {
const handleChange = () => {
if (localeRef.current !== i18n.locale) {
localeRef.current = i18n.locale;
setContext(i18n);
if (localeRef.current !== i18nInstance.locale || localeMessage.current !== i18nInstance.messages) {
localeRef.current = i18nInstance.locale;
localeMessage.current = i18nInstance.messages;
setContext(i18nInstance);
}
};
let removeListener = i18n.on('change', handleChange);
const removeListener = i18nInstance.on('change', handleChange);
// 手动触发一次 handleChange，以确保 context 的正确性
handleChange();
@ -53,7 +56,7 @@ const I18nProvider = (props: I18nProviderProps) => {
return () => {
removeListener();
};
}, [i18n]);
}, [i18nInstance]);
// 提供一个Provider组件
return <InjectProvider value={context}>{children}</InjectProvider>;

5
packages/inula-intl/src/core/components/InjectI18n.tsx
View File

@ -31,13 +31,16 @@ export const InjectProvider = Provider;
function injectI18n(Component, options?: InjectOptions): any {
const {
isUsingForwardRef = false, // 默认不使用
ensureContext = false,
} = options || {};
// 定义一个名为 WrappedI18n 的函数组件，接收传入组件的 props 和 forwardedRef，返回传入组件并注入 i18n
const WrappedI18n = props => (
<Consumer>
{context => {
isVariantI18n(context);
if (ensureContext) {
isVariantI18n(context);
}
const i18nProps = {
intl: context,

17
packages/inula-intl/src/core/createI18n.ts
View File

@ -13,20 +13,29 @@
* See the Mulan PSL v2 for more details.
*/
import { configProps, I18nCache } from '../types/interfaces';
import I18n, { createI18nInstance } from './I18n';
import { createI18nInstance } from './I18n';
import creatI18nCache from '../format/cache/cache';
import { IntlType } from '../types/types';
/**
* createI18n hook函数，用于创建国际化i8n实例，以进行相关的数据操作
*/
export const createI18n = (config: configProps, cache?: I18nCache): I18n => {
export const createI18n = (config: configProps, cache?: I18nCache): IntlType => {
const { locale, defaultLocale, messages } = config;
return createI18nInstance({
locale: locale || defaultLocale || 'zh',
const i18n = createI18nInstance({
locale: locale || defaultLocale || 'en',
messages: messages,
cache: cache ?? creatI18nCache(),
});
return {
i18n,
...config,
formatMessage: i18n.formatMessage.bind(i18n),
formatNumber: i18n.formatNumber.bind(i18n),
formatDate: i18n.formatDate.bind(i18n),
$t: i18n.formatMessage.bind(i18n),
};
};
export default createI18n;

27
packages/inula-intl/src/core/hook/useI18n.ts
View File

@ -12,7 +12,7 @@
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import Inula, { useContext } from 'openinula';
import { useContext, useMemo } from 'openinula';
import utils from '../../utils/utils';
import { I18nContext } from '../components/InjectI18n';
import I18n from '../I18n';
@ -23,15 +23,22 @@ import { IntlType } from '../../types/types';
* 使用 useI18n 钩子函数可以更方便地在函数组件中进行国际化操作
*/
function useI18n(): IntlType {
const i18nContext = useContext<I18n>(I18nContext);
utils.isVariantI18n(i18nContext);
const i18n = i18nContext;
return {
i18n: i18n,
formatMessage: i18n.formatMessage.bind(i18n),
formatNumber: i18n.formatNumber.bind(i18n),
formatDate: i18n.formatDate.bind(i18n),
};
const i18n = useContext<I18n>(I18nContext);
utils.isVariantI18n(i18n);
return useMemo(() => {
return {
i18n: i18n,
locale: i18n.locale,
messages: i18n.messages,
defaultLocale: i18n.defaultLocale,
timeZone: i18n.timeZone,
onError: i18n.onError,
formatMessage: i18n.formatMessage.bind(i18n),
formatNumber: i18n.formatNumber.bind(i18n),
formatDate: i18n.formatDate.bind(i18n),
$t: i18n.formatMessage.bind(i18n),
};
}, [i18n]);
}
export default useI18n;

17
packages/inula-intl/src/format/Translation.ts
View File

@ -16,7 +16,7 @@
import { CompiledMessage, Locale, LocaleConfig, Locales } from '../types/types';
import generateFormatters from './generateFormatters';
import { FormatOptions, I18nCache } from '../types/interfaces';
import { createIntlCache } from '../../index';
import creatI18nCache from './cache/cache';
/**
* 获取翻译结果
@ -28,12 +28,18 @@ class Translation {
private readonly localeConfig: Record<string, any>;
private readonly cache: I18nCache;
constructor(compiledMessage, locale, locales, localeConfig, cache?) {
constructor(
compiledMessage: CompiledMessage,
locale: Locale,
locales: Locales,
localeConfig: LocaleConfig,
cache?: I18nCache
) {
this.compiledMessage = compiledMessage;
this.locale = locale;
this.locales = locales;
this.localeConfig = localeConfig;
this.cache = cache ?? createIntlCache;
this.cache = cache ?? creatI18nCache();
}
/**
@ -53,7 +59,7 @@ class Translation {
const value = values[name];
const formatter = formatters[type](value, format);
let message;
let message: any;
if (typeof formatter === 'function') {
message = formatter(textFormatter); // 递归调用
} else {
@ -68,8 +74,7 @@ class Translation {
const textFormatter = createTextFormatter(this.locale, this.locales, values, formatOptions, this.localeConfig);
// 通过递归方法formatCore进行格式化处理
const result = this.formatMessage(this.compiledMessage, textFormatter);
return result; // 返回要格式化的结果
return this.formatMessage(this.compiledMessage, textFormatter); // 返回要格式化的结果
}
formatMessage(compiledMessage: CompiledMessage, textFormatter: (...args: any[]) => any) {

6
packages/inula-intl/src/format/fomatters/PluralFormatter.ts
View File

@ -17,7 +17,7 @@ import utils from '../../utils/utils';
import NumberFormatter from './NumberFormatter';
import { Locale, Locales } from '../../types/types';
import { I18nCache } from '../../types/interfaces';
import { createIntlCache } from '../../../index';
import creatI18nCache from '../cache/cache';
/**
* 复数格式化
@ -29,12 +29,12 @@ class PluralFormatter {
private readonly message: any;
private readonly cache: I18nCache;
constructor(locale, locales, value, message, cache?) {
constructor(locale: Locale, locales: Locales, value: any, message: any, cache?:I18nCache) {
this.locale = locale;
this.locales = locales;
this.value = value;
this.message = message;
this.cache = cache ?? createIntlCache();
this.cache = cache ?? creatI18nCache();
}
// 将 message中的“#”替换为指定数字value，并返回新的字符串或者字符串数组

6
packages/inula-intl/src/format/fomatters/SelectFormatter.ts
View File

@ -14,7 +14,7 @@
*/
import utils from '../../utils/utils';
import { Locale } from '../../types/types';
import {Locale, SelectPool} from '../../types/types';
import { I18nCache } from '../../types/interfaces';
/**
@ -26,12 +26,12 @@ class SelectFormatter {
private readonly locale: Locale;
private readonly cache: I18nCache;
constructor(locale, cache) {
constructor(locale: Locale, cache: I18nCache) {
this.locale = locale;
this.cache = cache;
}
getRule(value, rules) {
getRule(value: SelectPool, rules: any) {
if (this.cache.select) {
// 创建key，用于唯一标识
const cacheKey = utils.generateKey<Intl.NumberFormatOptions>(this.locale, rules);

17
packages/inula-intl/src/format/generateFormatters.ts
View File

@ -19,25 +19,23 @@ import { DatePool, Locale, Locales, SelectPool } from '../types/types';
import PluralFormatter from './fomatters/PluralFormatter';
import SelectFormatter from './fomatters/SelectFormatter';
import { FormatOptions, I18nCache, IntlMessageFormat } from '../types/interfaces';
import cache from './cache/cache';
/**
* 默认格式化接口
*/
const generateFormatters = (
locale: Locale | Locales,
locale: Locale,
locales: Locales,
localeConfig: Record<string, any> = { plurals: undefined },
formatOptions: FormatOptions = {}, // 自定义格式对象
cache: I18nCache
): IntlMessageFormat => {
locale = locales || locale;
const { plurals } = localeConfig;
/**
* 样式函数 ，根据格式获取格式样式， 如货币百分比， 返回相应的格式的对象，如果没有设定格式，则返回一个空对象
* @param formatOption
*/
const getStyleOption = formatOption => {
const getStyleOption = (formatOption: string | number) => {
if (typeof formatOption === 'string') {
return formatOptions[formatOption] || { option: formatOption };
} else {
@ -58,14 +56,14 @@ const generateFormatters = (
return pluralFormatter.replaceSymbol.bind(pluralFormatter);
},
selectordinal: (value: number, { offset = 0, ...rules }, useMemorize?) => {
selectordinal: (value: number, { offset = 0, ...rules }) => {
const message = rules[value] || rules[(plurals as any)?.(value - offset, true)] || rules.other;
const pluralFormatter = new PluralFormatter(locale, locales, value - offset, message, useMemorize);
const pluralFormatter = new PluralFormatter(locale, locales, value - offset, message, cache);
return pluralFormatter.replaceSymbol.bind(pluralFormatter);
},
// 选择规则，如果规则对象中包含与该值相对应的属性，则返回该属性的值；否则，返回 "other" 属性的值。
select: (value: SelectPool, formatRules) => {
select: (value: SelectPool, formatRules: any) => {
const selectFormatter = new SelectFormatter(locale, cache);
return selectFormatter.getRule(value, formatRules);
},
@ -75,17 +73,16 @@ const generateFormatters = (
return new NumberFormatter(locales, getStyleOption(formatOption), cache).numberFormat(value);
},
// 用于将日期格式化为字符串，接受一个日期对象和一个格式化规则。它会根据规则返回格式化后的字符串。
/**
* 用于将日期格式化为字符串，接受一个日期对象和一个格式化规则。它会根据规则返回格式化后的字符串。
* eg: { year: 'numeric', month: 'long', day: 'numeric' } 是一个用于指定DateTimeFormatter如何将日期对象转换为字符串的参数。
* \year: 'numeric' 表示年份的表示方式是数字形式（比如2023）。
* month: 'long' 表示月份的表示方式是全名（比如January）。
* day: 'numeric' 表示日期的表示方式是数字形式（比如1号）。
* @param value
* @param formatOption { year: 'numeric', month: 'long', day: 'numeric' }
* @param useMemorize
*/
dateTimeFormat: (value: DatePool, formatOption) => {
dateTimeFormat: (value: DatePool, formatOption: any) => {
return new DateTimeFormatter(locales, getStyleOption(formatOption), cache).dateTimeFormat(value, formatOption);
},

21
packages/inula-intl/src/format/getFormatMessage.ts
View File

@ -19,19 +19,21 @@ import I18n from '../core/I18n';
import { MessageDescriptor, MessageOptions } from '../types/interfaces';
import { CompiledMessage } from '../types/types';
import creatI18nCache from './cache/cache';
import { formatElements } from '../utils/formatElements';
export function getFormatMessage(
i18n: I18n,
id: MessageDescriptor | string,
values: Record<string, unknown> | undefined = {},
options: MessageOptions = {}
options: MessageOptions = {},
components: any
) {
let { message, context } = options;
let { messages, context } = options;
const { formatOptions } = options;
const cache = i18n.cache ?? creatI18nCache();
if (typeof id !== 'string') {
values = values || id.defaultValues;
message = id.message || id.defaultMessage;
messages = id.messages || id.defaultMessage;
context = id.context;
id = id.id;
}
@ -42,7 +44,7 @@ export function getFormatMessage(
const messageUnavailable = isMissingContextMessage || isMissingMessage;
// 对错误消息进行处理
const messageError = i18n.error;
const messageError = i18n.onError;
if (messageError && messageUnavailable) {
if (typeof messageError === 'function') {
return messageError(i18n.locale, id, context);
@ -53,14 +55,17 @@ export function getFormatMessage(
let compliedMessage: CompiledMessage;
if (context) {
compliedMessage = i18n.messages[context][id] || message || id;
compliedMessage = i18n.messages[context][id] || messages || id;
} else {
compliedMessage = i18n.messages[id] || message || id;
compliedMessage = i18n.messages[id] || messages || id;
}
// 对解析的messages进行parse解析，并输出解析后的Token
// 对解析的message进行parse解析，并输出解析后的Token
compliedMessage = typeof compliedMessage === 'string' ? utils.compile(compliedMessage) : compliedMessage;
const translation = new Translation(compliedMessage, i18n.locale, i18n.locales, i18n.localeConfig, cache);
return translation.translate(values, formatOptions);
const formatResult = translation.translate(values, formatOptions);
// 如果存在inula元素，则返回包含格式化的Inula元素的数组
return formatElements(formatResult, components);
}

40
packages/inula-intl/src/parser/Lexer.ts
View File

@ -16,9 +16,12 @@
import ruleUtils from '../utils/parseRuleUtils';
import { LexerInterface } from '../types/interfaces';
/**
* 词法解析器，主要根据设计的规则对message进行处理成Token
*/
class Lexer<T> implements LexerInterface<T> {
readonly startState: string;
readonly states: Record<string, any>;
readonly unionReg: Record<string, any>;
private buffer = '';
private stack: string[] = [];
private index = 0;
@ -28,19 +31,23 @@ class Lexer<T> implements LexerInterface<T> {
private state = '';
private groups: string[] = [];
private error: Record<string, any> | undefined;
private regexp;
private regexp: any;
private fast: Record<string, unknown> = {};
private queuedGroup: string | null = '';
private value = '';
constructor(unionReg: Record<string, any>, startState: string) {
this.startState = startState;
this.states = unionReg;
this.unionReg = unionReg;
this.buffer = '';
this.stack = [];
this.reset();
}
/**
* 根据新的消息重置解析器
* @param data 消息数据
*/
public reset(data?: string) {
this.buffer = data || '';
this.index = 0;
@ -57,7 +64,7 @@ class Lexer<T> implements LexerInterface<T> {
return;
}
this.state = state;
const info = this.states[state];
const info = this.unionReg[state];
this.groups = info.groups;
this.error = info.error;
this.regexp = info.regexp;
@ -73,7 +80,7 @@ class Lexer<T> implements LexerInterface<T> {
this.setState(state);
}
private getGroup(match: Record<string, any>) {
private getGroup(match: Record<string, object>) {
const groupCount = this.groups.length;
for (let i = 0; i < groupCount; i++) {
if (match[i + 1] !== undefined) {
@ -87,7 +94,9 @@ class Lexer<T> implements LexerInterface<T> {
return this.value;
}
// 迭代获取下一个 token
/**
* 迭代获取下一个 token
*/
public next() {
const index = this.index;
@ -112,7 +121,6 @@ class Lexer<T> implements LexerInterface<T> {
const regexp = this.regexp;
regexp.lastIndex = index;
const match = getMatch(regexp, buffer);
const error = this.error;
if (match == null) {
return this.getToken(error, buffer.slice(index, buffer.length), index);
@ -131,9 +139,9 @@ class Lexer<T> implements LexerInterface<T> {
}
/**
* 獲取Token
* @param group 解析模板后獲得的屬性值
* @param text 文本屬性的信息
* 获取Token
* @param group 解析模板后获得的属性值
* @param text 文本属性的信息
* @param offset 偏移量
* @private
*/
@ -187,7 +195,7 @@ class Lexer<T> implements LexerInterface<T> {
return token;
}
// 增加迭代器
// 增加迭代器，允许逐个访问集合中的元素方法
[Symbol.iterator]() {
return {
next: (): IteratorResult<T> => {
@ -198,9 +206,15 @@ class Lexer<T> implements LexerInterface<T> {
}
}
/**
* 根据正则表达式，获取匹配到message的值
* 索引为 0 的元素是完整的匹配结果。
* 索引为 1、2、3 等的元素是正则表达式中指定的捕获组的匹配结果。
*/
const getMatch = ruleUtils.checkSticky()
? // 正则表达式具有 sticky 标志
(regexp, buffer) => regexp.exec(buffer)
(regexp: any, buffer: string) => regexp.exec(buffer)
: // 正则表达式具有 global 标志,匹配的字符串长度为 0，则表示匹配失败
(regexp, buffer) => (regexp.exec(buffer)[0].length === 0 ? null : regexp.exec(buffer));
(regexp: any, buffer: string) => (regexp.exec(buffer)[0].length === 0 ? null : regexp.exec(buffer));
export default Lexer;

38
packages/inula-intl/src/parser/mappingRule.ts
View File

@ -14,40 +14,47 @@
*/
const body: Record<string, any> = {
doubleapos: { match: '\'\'', value: () => '\'' },
doubleapos: { match: "''", value: () => "'" },
quoted: {
lineBreaks: true,
match: /'[{}#](?:[^]*?[^'])?'(?!')/u,
value: src => src.slice(1, -1).replace(/''/g, '\''),
match: /'[{}#](?:[^]*?[^'])?'(?!')/u, // 用以匹配单引号、花括号{}以及井号# 如'Hello' 、{name}、{}#
value: (src: string) => src.slice(1, -1).replace(/''/g, "'"),
},
argument: {
lineBreaks: true,
// 用于匹配{name、{Hello{World，匹配{ }花括号中有任何Unicode字符，如空格、制表符等
match: /\{\s*[^\p{Pat_Syn}\p{Pat_WS}]+\s*/u,
push: 'arg',
value: src => src.substring(1).trim(),
value: (src: string) => src.substring(1).trim(),
},
octothorpe: '#',
end: { match: '}', pop: 1 },
content: { lineBreaks: true, match: /[^][^{}#']*/u },
content: {
lineBreaks: true,
match: /[^][^{}#]*/u, // 主要匹配不包含[]任何字符（除了换行符）、不包含{}、#的任何个字符
},
};
const arg: Record<string, any> = {
select: {
lineBreaks: true,
match: /,\s*(?:plural|select|selectordinal)\s*,\s*/u,
next: 'select',
value: src => src.split(',')[1].trim(),
match: /,\s*(?:plural|select|selectordinal)\s*,\s*/u, // 匹配内容包含 plural、select 或 selectordinal
next: 'select', // 继续解析下一个参数
value: (src: string) => src.split(',')[1].trim(), // 提取第二个参数，并处理收尾空格
},
'func-args': {
// 匹配是否包含其他非特殊字符的参数,匹配结果包含特殊字符，如param1, param2, param3
lineBreaks: true,
match: /,\s*[^\p{Pat_Syn}\p{Pat_WS}]+\s*,/u,
next: 'body',
value: src => src.split(',')[1].trim(),
value: (src: string) => src.split(',')[1].trim(), // 参数字符串去除逗号并去除首尾空格
},
'func-simple': {
// 匹配是否包含其他简单参数，匹配结果不包含标点符号：param1 param2 param3
lineBreaks: true,
match: /,\s*[^\p{Pat_Syn}\p{Pat_WS}]+\s*/u,
value: src => src.substring(1).trim(),
value: (src: string) => src.substring(1).trim(),
},
end: { match: '}', pop: 1 },
};
@ -55,14 +62,17 @@ const arg: Record<string, any> = {
const select: Record<string, any> = {
offset: {
lineBreaks: true,
match: /\s*offset\s*:\s*\d+\s*/u,
value: src => src.split(':')[1].trim(),
match: /\s*offset\s*:\s*\d+\s*/u, // 匹配message中是否包含偏移量offest信息
value: (src: string) => src.split(':')[1].trim(),
},
case: {
// 检查匹配该行是否包含分支信息。
lineBreaks: true,
// 设置规则匹配以左大括号 { 结尾的字符串，以等号 = 后跟数字开头的字符串，或者以非特殊符号和非空白字符开头的字符串，如 '=1 {'
match: /\s*(?:=\d+|[^\p{Pat_Syn}\p{Pat_WS}]+)\s*\{/u,
push: 'body',
value: src => src.substring(0, src.indexOf('{')).trim(),
push: 'body', // 匹配成功，则会push到body栈中
value: (src: string) => src.substring(0, src.indexOf('{')).trim(),
},
end: { match: /\s*\}/u, pop: 1 },
};

63
packages/inula-intl/src/parser/parseMappingRule.ts
View File

@ -17,12 +17,13 @@ import Lexer from './Lexer';
import { mappingRule } from './mappingRule';
import ruleUtils from '../utils/parseRuleUtils';
import { RawToken } from '../types/types';
import { STATE_GROUP_START_INDEX, GLOBAL_FLAG, STICKY_FLAG, UNICODE_FLAG, VERTICAL_LINE } from '../constants';
const defaultErrorRule = ruleUtils.getRuleOptions('error', { lineBreaks: true, shouldThrow: true });
// 解析规则并生成词法分析器所需的数据结构，以便进行词法分析操作
function parseRules(rules: Record<string, any>, hasStates: boolean): Record<string, any> {
let errorRule: Record<string, any> | null = null;
function parseRules(rules: Record<string, any>, hasStates: boolean): Record<string, object> {
let errorRule: Record<string, object> | null = null;
const fast: Record<string, unknown> = {};
let enableFast = true;
let unicodeFlag: boolean | null = null;
@ -58,7 +59,7 @@ function parseRules(rules: Record<string, any>, hasStates: boolean): Record<stri
groups.push(options);
// 检查是否所有规则都使用了 unicode 标志，或者都未使用
// 检查是否所有规则都使用了unicode，或者都未使用
unicodeFlag = checkUnicode(match, unicodeFlag, options);
const pat = ruleUtils.getRegUnion(match.map(ruleUtils.getReg));
@ -81,11 +82,11 @@ function parseRules(rules: Record<string, any>, hasStates: boolean): Record<stri
// 如果没有 fallback 规则，则使用 sticky 标志，只在当前索引位置寻找匹配项，如果不支持 sticky 标志，则使用无法被否定的空模式来模拟
const fallbackRule = errorRule && errorRule.fallback;
let flags = ruleUtils.checkSticky() && !fallbackRule ? 'ym' : 'gm';
const suffix = ruleUtils.checkSticky() || fallbackRule ? '' : '|';
let flags = ruleUtils.checkSticky() && !fallbackRule ? STICKY_FLAG : GLOBAL_FLAG;
const suffix = ruleUtils.checkSticky() || fallbackRule ? '' : VERTICAL_LINE;
if (unicodeFlag === true) {
flags += 'u';
flags += UNICODE_FLAG;
}
const combined = new RegExp(ruleUtils.getRegUnion(parts) + suffix, flags);
@ -97,18 +98,18 @@ function parseRules(rules: Record<string, any>, hasStates: boolean): Record<stri
};
}
export function checkStateGroup(group: Record<string, any>, name: string, map: Record<string, any>) {
export function checkStateGroup(group: Record<string, any>, name: string, mappingRules: Record<string, object>) {
const state = group && (group.push || group.next);
if (state && !map[state]) {
if (state && !mappingRules[state]) {
throw new Error('The state is missing.');
}
if (group && group.pop && +group.pop !== 1) {
if (group && group.pop && +group.pop !== STATE_GROUP_START_INDEX) {
throw new Error('The value of pop must be 1.');
}
}
// 将国际化解析规则注入分词器中
function parseMappingRule(mappingRule: Record<string, any>, startState?: string): Lexer<RawToken> {
function parseMappingRule(mappingRule: Record<string, object>, startState?: string): Lexer<RawToken> {
const keys = Object.getOwnPropertyNames(mappingRule);
if (!startState) {
@ -133,7 +134,7 @@ function parseMappingRule(mappingRule: Record<string, any>, startState?: string)
continue;
}
const splice = [j, 1];
const splice = [j, STATE_GROUP_START_INDEX];
if (rule.include !== key && !included[rule.include]) {
included[rule.include] = true;
const newRules = ruleMap[rule.include];
@ -174,17 +175,30 @@ function parseMappingRule(mappingRule: Record<string, any>, startState?: string)
});
});
// 将规则注入到词法解析器
return new Lexer(mappingAllRules, startState);
}
function processFast(match, fast: Record<string, unknown>, options) {
/**
* 快速匹配模式
* @param match
* @param fast
* @param options
*/
function processFast(match: Record<string, any>, fast: Record<string, unknown> = {}, options: Record<string, object>) {
while (match.length && typeof match[0] === 'string' && match[0].length === 1) {
// 获取到数组的第一个元素
const word = match.shift();
fast[word.charCodeAt(0)] = options;
}
}
function handleErrorRule(options, errorRule: Record<string, any>) {
/**
* 用以处理错误逻辑
* @param options 操作属性
* @param errorRule 错误规则
*/
function handleErrorRule(options: Record<string, object>, errorRule: Record<string, object>) {
if (!options.fallback === !errorRule.fallback) {
throw new Error('errorRule can only set one!');
} else {
@ -192,7 +206,13 @@ function handleErrorRule(options, errorRule: Record<string, any>) {
}
}
function checkUnicode(match, unicodeFlag, options) {
/**
* 用以检查message中是否包含Unicode
* @param match 匹配到的message
* @param unicodeFlag Unicode标志
* @param options 操作属性
*/
function checkUnicode(match: Record<string, any>, unicodeFlag: boolean | null, options: Record<string, any>) {
for (let j = 0; j < match.length; j++) {
const obj = match[j];
if (!ruleUtils.checkRegExp(obj)) {
@ -201,14 +221,16 @@ function checkUnicode(match, unicodeFlag, options) {
if (unicodeFlag === null) {
unicodeFlag = obj.unicode;
} else if (unicodeFlag !== obj.unicode && options.fallback === false) {
throw new Error('If the /u flag is used, all!');
} else {
if (unicodeFlag !== obj.unicode && options.fallback === false) {
throw new Error('If the /u flag is used, all!');
}
}
}
return unicodeFlag;
}
function checkStateOptions(hasStates: boolean, options) {
function checkStateOptions(hasStates: boolean, options: Record<string, any>) {
if (!hasStates) {
throw new Error('State toggle options are not allowed in stateless tokenizers!');
}
@ -217,6 +239,11 @@ function checkStateOptions(hasStates: boolean, options) {
}
}
/**
* 检查是否存在fallback属性，用以来判断快速匹配规则
* @param rules
* @param enableFast
*/
function isExistsFallback(rules: Record<string, any>, enableFast: boolean) {
for (let i = 0; i < rules.length; i++) {
if (rules[i].fallback) {
@ -226,7 +253,7 @@ function isExistsFallback(rules: Record<string, any>, enableFast: boolean) {
return enableFast;
}
function isOptionsErrorOrFallback(options, errorRule: Record<string, any> | null) {
function isOptionsErrorOrFallback(options: Record<string, object>, errorRule: Record<string, object> | null) {
if (options.error || options.fallback) {
// 只能设置一个 errorRule
if (errorRule) {

51
packages/inula-intl/src/parser/parser.ts
View File

@ -14,23 +14,13 @@
*/
import { lexer } from './parseMappingRule';
import { RawToken, Token } from '../types/types';
import { RawToken } from '../types/types';
import { DEFAULT_PLURAL_KEYS } from '../constants';
import { Content, FunctionArg, PlainArg, Select, TokenContext } from '../types/interfaces';
import Lexer from './Lexer';
const getContext = (lt: Record<string, any>): TokenContext => ({
offset: lt.offset,
line: lt.line,
col: lt.col,
text: lt.text,
lineNum: lt.lineBreaks,
});
export const checkSelectType = (value: string): boolean => {
return value === 'plural' || value === 'select' || value === 'selectordinal';
};
/**
* 语法解析器，根据Token,获得具备上下文的AST
*/
class Parser {
cardinalKeys: string[] = DEFAULT_PLURAL_KEYS;
ordinalKeys: string[] = DEFAULT_PLURAL_KEYS;
@ -39,7 +29,7 @@ class Parser {
lexer.reset(message);
}
isSelectKeyValid(token: RawToken, type: Select['type'], value: string) {
isSelectKeyValid(type: Select['type'], value: string) {
if (value[0] === '=') {
if (type === 'select') {
throw new Error('The key value of the select type is invalid.');
@ -75,7 +65,7 @@ class Parser {
break;
}
case 'case': {
this.isSelectKeyValid(token, type, token.value);
this.isSelectKeyValid(type, token.value);
select.cases.push({
key: token.value.replace(/=/g, ''),
tokens: this.parse(isPlural),
@ -94,6 +84,11 @@ class Parser {
throw new Error('The message end position is invalid.');
}
/**
* 解析获得的Token
* @param token
* @param isPlural
*/
parseToken(token: RawToken, isPlural: boolean): PlainArg | FunctionArg | Select {
const context = getContext(token);
const nextToken = lexer.next();
@ -153,7 +148,12 @@ class Parser {
}
}
// 在根级别解析时，遇到结束符号即结束解析并返回结果；而在非根级别解析时，遇到结束符号会被视为不合法的结束位置，抛出错误
/**
* 解析方法入口
* 在根级别解析时，遇到结束符号即结束解析并返回结果；而在非根级别解析时，遇到结束符号会被视为不合法的结束位置，抛出错误
* @param isPlural 标记复数
* @param isRoot 标记根节点
*/
parse(isPlural: boolean, isRoot?: boolean): Array<Content | PlainArg | FunctionArg | Select> {
const tokens: any[] = [];
let content: string | Content | null = null;
@ -201,6 +201,23 @@ class Parser {
}
}
/**
* 获得 Token 的上下文
* @param Token Token
*/
const getContext = (Token: RawToken): TokenContext => ({
offset: Token.offset,
line: Token.line,
col: Token.col,
text: Token.text,
lineNum: Token.lineBreaks,
});
// 用以检查select规则中的类型
export const checkSelectType = (value: string): boolean => {
return value === 'plural' || value === 'select' || value === 'selectordinal';
};
export default function parse(message: string): Array<Content | PlainArg | FunctionArg | Select> {
const parser = new Parser(message);
return parser.parse(false, true);

47
packages/inula-intl/src/types/interfaces.ts
View File

@ -13,15 +13,25 @@
* See the Mulan PSL v2 for more details.
*/
import { AllLocaleConfig, AllMessages, Locale, Locales, Error, DatePool, SelectPool, RawToken } from './types';
import {
AllLocaleConfig,
AllMessages,
Locale,
Locales,
Error,
DatePool,
SelectPool,
RawToken,
InulaNode,
} from './types';
import I18n from '../core/I18n';
import Lexer from '../parser/Lexer';
import { InulaElement, Key } from 'openinula';
// FormattedMessage的参数定义
export interface FormattedMessageProps extends MessageDescriptor {
values?: Record<string, unknown>;
tagName?: string;
children?(nodes: any[]): any;
}
@ -34,7 +44,7 @@ export interface MessageDescriptor extends MessageOptions {
export interface MessageOptions {
comment?: string;
message?: string;
messages?: string;
context?: string;
formatOptions?: FormatOptions;
}
@ -48,15 +58,26 @@ export interface I18nCache {
octothorpe: Record<string, any>;
}
export interface RichText {
components?: { [key: string]: InulaNode };
}
export interface InulaPortal extends InulaElement {
key: Key | null;
children: InulaNode;
}
// I18n类的传参
export interface I18nProps {
export type I18nProps = RichText & {
locale?: Locale;
locales?: Locales;
messages?: AllMessages;
defaultLocale?: string;
timeZone?: string;
localeConfig?: AllLocaleConfig;
cache?: I18nCache;
error?: Error;
}
onError?: Error;
};
// 消息格式化选项类型
export interface FormatOptions {
@ -74,16 +95,13 @@ export interface I18nContextProps {
i18n?: I18n;
}
export interface configProps {
locale?: Locale;
messages?: AllMessages;
defaultLocale?: string;
export type configProps = I18nProps & {
RenderOnLocaleChange?: boolean;
children?: any;
onWarn?: Error;
}
};
export interface IntlMessageFormat extends configProps, MessageOptions {
export interface IntlMessageFormat {
plural: (
value: number,
{
@ -204,7 +222,6 @@ export interface InjectedIntl {
formatMessage(
messageDescriptor: MessageDescriptor,
values?: Record<string, unknown>,
options?: MessageOptions,
useMemorize?: boolean
): string;
options?: MessageOptions
): string | any[];
}

27
packages/inula-intl/src/types/types.ts
View File

@ -23,16 +23,17 @@ import {
I18nContextProps,
configProps,
InjectedIntl,
InulaPortal,
} from './interfaces';
import I18n from '../core/I18n';
import { InulaElement } from 'openinula';
export type Error = string | ((message, id, context) => string);
export type Error = string | ((message: any, id: any, context: any) => string);
export type Locale = string;
export type Locales = Locale | Locale[];
export type LocaleConfig = { plurals?: (...arg: any) => any };
export type LocaleConfig = { plurals?: (...args: any[]) => any };
export type AllLocaleConfig = Record<Locale, LocaleConfig>;
@ -59,7 +60,7 @@ export type Token = Content | PlainArg | FunctionArg | Select | Octothorpe;
export type DatePool = Date | string;
export type SelectPool = string | Record<string, unknown>;
export type SelectPool = string | number;
export type RawToken = {
type: string;
@ -74,13 +75,23 @@ export type RawToken = {
export type I18nProviderProps = I18nContextProps & configProps;
export type IntlType = {
i18n: I18n;
export type IntlType = I18nContextProps & {
defaultLocale?: string | undefined;
onError?: Error | undefined;
messages?:
| string
| Record<string, string>
| Record<string, string | CompiledMessagePart[]>
| Record<string, Record<string, string> | Record<string, string | CompiledMessagePart[]>>;
locale?: string;
formatMessage: (...args: any[]) => any;
formatNumber: (...args: any[]) => any;
formatDate: (...args: any[]) => any;
$t?: (...args: any[]) => any;
};
export interface InjectedIntlProps {
export type InjectedIntlProps = {
intl: InjectedIntl;
}
};
export type InulaNode = InulaElement | string | number | Iterable<InulaNode> | InulaPortal | boolean | null | undefined;

107
packages/inula-intl/src/utils/formatElements.ts Normal file
View File

@ -0,0 +1,107 @@
/*
* Copyright (c) 2024 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import { cloneElement, createElement, Fragment, InulaElement } from 'openinula';
import { voidElementTags } from '../constants';
// 用于匹配标签的正则表达式
const tagReg = /<(\d+)>(.*?)<\/\1>|<(\d+)\/>/;
// 用于匹配换行符的正则表达式
const nlReg = /(?:\r\n|\r|\n)/g;
export function formatElements(
value: string,
elements: { [key: string]: InulaElement<any> } = {}
): string | Array<any> {
const elementKeyID = getElementIndex(0, '$Inula');
// value：This is a rich text with a custom component: <1/>
const arrays = value.replace(nlReg, '').split(tagReg);
// 若无InulaNode元素，则返回
if (arrays.length === 1) return value;
const result: any = [];
const before = arrays.shift();
if (before) {
result.push(before);
}
for (const [index, children, after] of getElements(arrays)) {
let element = elements[index];
if (!element || (voidElementTags[element.type as string] && children)) {
const errorMessage = !element
? `Index not declared as ${index} in original translation`
: `${element.type} , No child element exists. Please check.`;
console.error(errorMessage);
// 对于异常元素，通过创建<></>来代替，并继续解析现有的子元素和之后的元素，并保证在构建数组时，不会因为缺少元素而导致索引错位。
element = createElement(Fragment, {});
}
// 如果存在子元素，则进行递归处理
const formattedChildren = children ? formatElements(children, elements) : element.props.children;
// 更新element 的属性和子元素
const clonedElement = cloneElement(element, { key: elementKeyID() }, formattedChildren);
result.push(clonedElement);
if (after) {
result.push(after);
}
}
return result;
}
/**
* 从arrays数组中解析出标签元素和其子元素
* @param arrays
*/
function getElements(arrays: string[]) {
// 如果 arrays 数组为空，则返回空数组
if (!arrays.length) return [];
/**
* pairedIndex: 第一个元素表示配对标签的内容，即 <1>...</1> 形式的标签。
* children: 第二个元素表示配对标签内的子元素内容。
* unpairedIndex: 第三个元素表示自闭合标签的内容，即 <1/> 形式的标签。
* textAfter: 第四个元素表示标签之后的文本内容，即标签后紧跟着的文本。
* eg: [undefined,undefined,1,""]
*/
const [pairedIndex, children, unpairedIndex, textAfter] = arrays.splice(0, 4);
// 解析当前标签元素和它的子元素，返回一个包含标签索引、子元素和后续文本的数组
const currentElement: [number, string, string] = [
parseInt(pairedIndex || unpairedIndex), // 解析标签索引，如果是自闭合标签，则使用 unpaired
children || '',
textAfter || '',
];
// 递归调用 getElements 函数，处理剩余的 arrays 数组
const remainingElements = getElements(arrays);
// 将当前元素和递归处理后的元素数组合并并返回
return [currentElement, ...remainingElements];
}
// 对传入富文本元素的位置标志索引
function getElementIndex(count = 0, prefix = '') {
return function () {
return `${prefix}_${count++}`;
};
}

34
packages/inula-intl/src/utils/parseRuleUtils.ts
View File

@ -18,6 +18,7 @@ function getType(input: any): string {
return str.slice(8, -1).toLowerCase();
}
// 类型检查器
const createTypeChecker = (type: string) => {
return (input: any) => {
return getType(input) === type.toLowerCase();
@ -28,24 +29,25 @@ const checkObject = (input: any) => input !== null && typeof input === 'object';
const checkRegExp = createTypeChecker('RegExp');
// 使用正则表达式，如果对象存在则访问该属性，用来判断当前环境是否支持正则表达式sticky属性。
const checkSticky = () => typeof new RegExp('')?.sticky === 'boolean';
// 转义正则表达式中的特殊字符
function transferReg(s: string): string {
function transferReg(str: string): string {
// eslint-disable-next-line
return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
}
// 计算正则表达式中捕获组的数量
function getRegGroups(s: string): number {
const re = new RegExp('|' + s);
// 计算正则表达式中捕获组的数量，用以匹配（）
function getRegGroups(str: string): number {
const regExp = new RegExp('|' + str);
// eslint-disable-next-line
return re.exec('')?.length! - 1;
return regExp.exec('')?.length! - 1;
}
// 创建一个捕获组的正则表达式模式
function getRegCapture(s: string): string {
return '(' + s + ')';
function getRegCapture(str: string): string {
return '(' + str + ')';
}
// 将正则表达式合并为一个联合的正则表达式模式
@ -53,7 +55,7 @@ function getRegUnion(regexps: string[]): string {
if (!regexps.length) {
return '(?!)';
}
const source = regexps.map(s => '(?:' + s + ')').join('|');
const source = regexps.map(str => '(?:' + str + ')').join('|');
return '(?:' + source + ')';
}
@ -143,7 +145,7 @@ function getRulesByArray(array: any[]) {
return result;
}
function getRuleOptions(type, obj) {
function getRuleOptions(type: any, obj: any) {
// 如果 obj 不是一个对象，则将其转换为包含 'match' 属性的对象
if (!checkObject(obj)) {
obj = { match: obj };
@ -182,23 +184,23 @@ function getRuleOptions(type, obj) {
} else {
options.match = [];
}
options.match.sort((a, b) => {
options.match.sort((str1: string, str2: string) => {
// 根据规则的类型进行排序，确保正则表达式排在最前面，长度较长的规则排在前面
if (checkRegExp(a) && checkRegExp(b)) {
if (checkRegExp(str1) && checkRegExp(str2)) {
return 0;
} else if (checkRegExp(b)) {
} else if (checkRegExp(str2)) {
return -1;
} else if (checkRegExp(a)) {
} else if (checkRegExp(str1)) {
return +1;
} else {
return b.length - a.length;
return str2.length - str1.length;
}
});
return options;
}
function getRules(spec) {
function getRules(spec: any) {
return Array.isArray(spec) ? getRulesByArray(spec) : getRulesByObject(spec);
}

2
packages/inula-intl/src/utils/utils.ts
View File

@ -32,7 +32,7 @@ function compile(message: string): CompiledMessage {
try {
return getTokenAST(parse(message));
} catch (e) {
console.error(`Message cannot be parse due to syntax errors: ${message}`);
console.error(`Message cannot be parse due to syntax errors: ${message},cause by ${e}`);
return message;
}
}

136
packages/inula-intl/tests/core/I18n.test.ts
View File

@ -1,136 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import I18n from '../../src/core/I18n';
describe('I18n', () => {
it('load catalog and merge with existing', () => {
const i18n = new I18n({});
const messages = {
Hello: 'Hello',
};
i18n.loadMessage('en', messages);
i18n.changeLanguage('en');
expect(i18n.messages).toEqual(messages);
i18n.loadMessage('fr', { Hello: 'Salut' });
expect(i18n.messages).toEqual(messages);
});
it('should load multiple language ', function () {
const enMessages = {
Hello: 'Hello',
};
const frMessage = {
Hello: 'Salut',
};
const intl = new I18n({});
intl.loadMessage({
en: enMessages,
fr: frMessage,
});
intl.changeLanguage('en');
expect(intl.messages).toEqual(enMessages);
intl.changeLanguage('fr');
expect(intl.messages).toEqual(frMessage);
});
it('should switch active locale', () => {
const messages = {
Hello: 'Salut',
};
const i18n = new I18n({
locale: 'en',
messages: {
fr: messages,
en: {},
},
});
expect(i18n.locale).toEqual('en');
expect(i18n.messages).toEqual({});
i18n.changeLanguage('fr');
expect(i18n.locale).toEqual('fr');
expect(i18n.messages).toEqual(messages);
});
it('should switch active locale', () => {
const messages = {
Hello: 'Salut',
};
const i18n = new I18n({
locale: 'en',
messages: {
en: messages,
fr: {},
},
});
i18n.changeLanguage('en');
expect(i18n.locale).toEqual('en');
expect(i18n.messages).toEqual(messages);
i18n.changeLanguage('fr');
expect(i18n.locale).toEqual('fr');
expect(i18n.messages).toEqual({});
});
it('._ allow escaping syntax characters', () => {
const messages = {
'My \'\'name\'\' is \'{name}\'': 'Mi \'\'nombre\'\' es \'{name}\'',
};
const i18n = new I18n({
locale: 'es',
messages: { es: messages },
});
expect(i18n.formatMessage('My \'\'name\'\' is \'{name}\'')).toEqual('Mi \'nombre\' es {name}');
});
it('._ should format message from catalog', function () {
const messages = {
Hello: 'Salut',
id: 'Je m\'appelle {name}',
};
const i18n = new I18n({
locale: 'fr',
messages: { fr: messages },
});
expect(i18n.locale).toEqual('fr');
expect(i18n.formatMessage('Hello')).toEqual('Salut');
expect(i18n.formatMessage('id', { name: 'Fred' })).toEqual('Je m\'appelle Fred');
});
it('should return the formatted date and time', () => {
const i18n = new I18n({
locale: 'fr',
});
const formattedDateTime = i18n.formatDate('2023-06-06T07:53:54.465Z', {
dateStyle: 'full',
timeStyle: 'short',
});
expect(typeof formattedDateTime).toBe('string');
expect(formattedDateTime).toEqual('mardi 6 juin 2023 à 15:53');
});
it('should return the formatted number', () => {
const i18n = new I18n({
locale: 'en',
});
const formattedNumber = i18n.formatNumber(123456.789, { style: 'currency', currency: 'USD' });
expect(typeof formattedNumber).toBe('string');
expect(formattedNumber).toEqual('$123,456.79');
});
});

270
packages/inula-intl/tests/core/I18n.test.tsx Normal file
View File

@ -0,0 +1,270 @@
/*
* Copyright (c) Huawei Technologies Co., Ltd. 2023-2023. All rights reserved.
*/
import I18n from '../../src/core/I18n';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/';
// 测试组件
const IndividualCustomComponent = () => {
return <span>Custom Component</span>;
};
const CustomComponent = (props: any) => {
return <div>{props.children}</div>;
};
const CustomComponentChildren = (props: any) => {
return <div>{props.children}</div>;
};
describe('I18n', () => {
it('load catalog and merge with existing', () => {
const i18n = new I18n({});
const messages = {
Hello: 'Hello',
};
i18n.loadMessage('en', messages);
i18n.changeLanguage('en');
expect(i18n.messages).toEqual(messages);
i18n.loadMessage('fr', { Hello: 'Salut' });
expect(i18n.messages).toEqual(messages);
i18n.changeMessage({ Hello: 'Salut' });
expect(i18n.messages).toEqual({ Hello: 'Salut' });
});
it('should load multiple language ', function () {
const enMessages = {
Hello: 'Hello',
};
const frMessage = {
Hello: 'Salut',
};
const intl = new I18n({});
intl.loadMessage({
en: enMessages,
fr: frMessage,
});
intl.changeLanguage('en');
expect(intl.messages).toEqual(enMessages);
intl.changeLanguage('fr');
expect(intl.messages).toEqual(frMessage);
});
it('should switch active locale', () => {
const messages = {
Hello: 'Salut',
};
const i18n = new I18n({
locale: 'en',
messages: {
fr: messages,
en: {},
},
});
expect(i18n.locale).toEqual('en');
expect(i18n.messages).toEqual({});
i18n.changeLanguage('fr');
expect(i18n.locale).toEqual('fr');
expect(i18n.messages).toEqual(messages);
});
it('should switch active locale', () => {
const messages = {
Hello: 'Salut',
};
const i18n = new I18n({
locale: 'en',
messages: {
en: messages,
fr: {},
},
});
i18n.changeLanguage('en');
expect(i18n.locale).toEqual('en');
expect(i18n.messages).toEqual(messages);
i18n.changeLanguage('fr');
expect(i18n.locale).toEqual('fr');
expect(i18n.messages).toEqual({});
});
it('._ allow escaping syntax characters', () => {
const messages = {
"My ''name'' is '{name}'": "Mi ''nombre'' es '{name}'",
};
const i18n = new I18n({
locale: 'es',
messages: { es: messages },
});
expect(i18n.formatMessage("My ''name'' is '{name}'")).toEqual("Mi ''nombre'' es '{name}'");
});
it('._ should format message from catalog', function () {
const messages = {
Hello: 'Salut',
id: "Je m'appelle {name}",
};
const i18n = new I18n({
locale: 'fr',
messages: { fr: messages },
});
expect(i18n.locale).toEqual('fr');
expect(i18n.formatMessage('Hello')).toEqual('Salut');
expect(i18n.formatMessage('id', { name: 'Fred' })).toEqual("Je m'appelle Fred");
});
it('should return information with html element', () => {
const messages = {
id: 'hello, {name}',
};
const i18n = new I18n({
locale: 'es',
messages: { es: messages },
});
const value = '<strong>Jane</strong>';
expect(i18n.formatMessage({ id: 'id' }, { name: value })).toEqual('hello, <strong>Jane</strong>');
});
it('test demo from product', () => {
const messages = {
id: "服务商名称长度不能超过64个字符，允许输入中文、字母、数字、字符_-!@#$^.+'}{'，且不能为关键字null(不区分大小写)。",
};
const i18n = new I18n({
locale: 'zh',
messages: { zh: messages },
});
expect(i18n.formatMessage('id')).toEqual(
"服务商名称长度不能超过64个字符，允许输入中文、字母、数字、字符_-!@#$^.+'}{'，且不能为关键字null(不区分大小写)。"
);
});
it('Should return information with dom element', () => {
const messages = {
richText: 'This is a rich text with a custom component: {customComponent}',
};
const i18n = new I18n({
locale: 'es',
messages: { es: messages },
});
const values = {
customComponent: <IndividualCustomComponent />,
};
const formattedMessage = i18n.formatMessage({ id: 'richText' }, values);
// 渲染格式化后的文本内容
const { getByText } = render(<div>{formattedMessage}</div>);
// 检查文本内容中是否包含自定义组件的内容
expect(getByText('This is a rich text with a custom component')).toContain(
'This is a rich text with a custom component'
);
});
it('Should return information for nested scenes with dom elements', () => {
const messages = {
richText: 'This is a rich text with a custom component: {customComponent}',
msg: 'test',
};
const i18n = new I18n({
locale: 'es',
messages: { es: messages },
});
const values = {
customComponent: (
<CustomComponent style={{ margin: '0 4px' }} text={'123'}>
<CustomComponentChildren>{i18n.formatMessage({ id: 'msg' })}</CustomComponentChildren>
</CustomComponent>
),
};
const formattedMessage = i18n.formatMessage({ id: 'richText' }, values);
// 渲染格式化后的文本内容
const { getByText } = render(<div>{formattedMessage}</div>);
// 检查文本内容中是否包含自定义组件的内容
expect(getByText('test')).toBeTruthy();
});
it('Should return information for nested scenes with dom elements', () => {
const messages = {
richText: 'This is a rich text with a custom component: {customComponent}',
msg: 'test',
};
const i18n = new I18n({
locale: 'es',
messages: { es: messages },
});
const values = {
customComponent: (
<CustomComponent style={{ margin: '0 4px' }} text={'123'}>
{i18n.formatMessage({ id: 'msg' })}
</CustomComponent>
),
};
const formattedMessage = i18n.formatMessage({ id: 'richText' }, values);
// 渲染格式化后的文本内容
const { getByText } = render(<div>{formattedMessage}</div>);
// 检查文本内容中是否包含自定义组件的内容
expect(getByText('test')).toBeTruthy();
});
it('should be returned as value when Multiple dom elements\n', () => {
const messages = {
richText: '{today}, my name is {name}, and {age} years old!',
};
const i18n = new I18n({
locale: 'es',
messages: { es: messages },
});
const Name = () => {
return <span>tom</span>;
};
const Age = () => {
return <span>16</span>;
};
const Today = () => {
return <span>3月2日</span>;
};
const values = {
today: <Today />,
name: <Name />,
age: <Age />,
};
const formattedMessage = i18n.formatMessage({ id: 'richText' }, values);
// 渲染格式化后的文本内容
const { getByText } = render(<div>{formattedMessage}</div>);
// 检查文本内容中是否包含自定义组件的内容
expect(getByText('my name is tom, and 16 years old!')).toBeTruthy();
});
it('should return the formatted date and time', () => {
const i18n = new I18n({
locale: 'fr',
});
const formattedDateTime = i18n.formatDate('2023-06-06T07:53:54.465Z', {
dateStyle: 'full',
timeStyle: 'short',
});
expect(typeof formattedDateTime).toBe('string');
expect(formattedDateTime).toEqual('mardi 6 juin 2023 à 15:53');
});
it('should return the formatted number', () => {
const i18n = new I18n({
locale: 'en',
});
const formattedNumber = i18n.formatNumber(123456.789, { style: 'currency', currency: 'USD' });
expect(typeof formattedNumber).toBe('string');
expect(formattedNumber).toEqual('$123,456.79');
});
});

4
packages/inula-intl/tests/core/components/FormattedMessage.test.tsx
View File

@ -43,7 +43,7 @@ describe('<FormattedMessage>', () => {
);
setTimeout(() => {
expect(getByTestId('id')).toHaveTextContent(i18n.formatMessage('hello', '', {}));
expect(getByTestId('id').textContent).toEqual(i18n.formatMessage('hello', {}, {}));
}, 1000);
});
it('should format context', function () {
@ -58,6 +58,6 @@ describe('<FormattedMessage>', () => {
</span>
</I18nProvider>
);
expect(getByTestId('id')).toHaveTextContent(i18n.formatMessage('id', { name: 'fred' }, {}));
expect(getByTestId('id').textContent).toEqual(i18n.formatMessage('id', { name: 'fred' }, {}));
});
});

3
packages/inula-intl/tests/core/components/InjectI18n.test.tsx
View File

@ -42,7 +42,6 @@ describe('InjectIntl', () => {
jest.spyOn(console, 'error').mockImplementation(() => {});
const Injected = injectIntl(Wrapped);
// @ts-ignore
expect(() => render(<Injected />)).toThrow("Cannot read properties of null (reading 'i18n')");
});
@ -53,7 +52,7 @@ describe('InjectIntl', () => {
};
const { getByTestId } = mountWithProvider(<Injected {...props} />);
expect(getByTestId('test')).toHaveTextContent(
expect(JSON.stringify(getByTestId('test'))).toEqual(
'{"_events":{},"locale":"en","locales":["en"],"allMessages":{},"_localeData":{}}'
);
});

14
packages/inula-intl/tests/core/creatI18n.test.ts
View File

@ -29,6 +29,20 @@ describe('createI18n', () => {
).toBe('bar');
});
it('createIntl', function () {
const i18n = createI18n({
locale: 'en',
messages: {
test: 'test',
},
});
expect(
i18n.$t({
id: 'test',
})
).toBe('test');
});
it('should not warn when defaultRichTextElements is not used', function () {
const onWarn = jest.fn();
createI18n({

75
packages/inula-intl/tests/core/hooks/useIntl.test.tsx
View File

@ -1,75 +0,0 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import * as React from 'react';
import { render } from '@testing-library/react';
import { IntlProvider, useIntl } from '../../../index';
const FunctionComponent = ({ spy }: { spy?: Function }) => {
const { i18n } = useIntl();
spy!(i18n.locale);
return null;
};
const FC = () => {
const i18n = useIntl();
return i18n.formatNumber(10000, { style: 'currency', currency: 'USD' }) as any;
};
describe('useIntl() hooks', () => {
it('throws when <IntlProvider> is missing from ancestry', () => {
// So it doesn't spam the console
jest.spyOn(console, 'error').mockImplementation(() => {});
expect(() => render(<FunctionComponent />)).toThrow('I18n object is not found!');
});
it('hooks onto the intl context', () => {
const spy = jest.fn();
render(
<IntlProvider locale="en">
<FunctionComponent spy={spy} />
</IntlProvider>
);
expect(spy).toHaveBeenCalledWith('en');
});
it('should work when switching locale on provider', () => {
const { rerender, getByTestId } = render(
<IntlProvider locale="en">
<span data-testid="comp">
<FC />
</span>
</IntlProvider>
);
expect(getByTestId('comp')).toMatchSnapshot();
rerender(
<IntlProvider locale="es">
<span data-testid="comp">
<FC />
</span>
</IntlProvider>
);
expect(getByTestId('comp')).toMatchSnapshot();
rerender(
<IntlProvider locale="en">
<span data-testid="comp">
<FC />
</span>
</IntlProvider>
);
expect(getByTestId('comp')).toMatchSnapshot();
});
});

2
packages/inula-intl/tests/format/cache/cache.test.ts vendored
View File

@ -15,7 +15,7 @@
import creatI18nCache from '../../../src/format/cache/cache';
describe('creatI18nCache', () => {
it('should create an empty IntlCache object', () => {
it('should create an empty I18nCache object', () => {
const intlCache = creatI18nCache();
expect(intlCache).toEqual({

4
packages/inula-intl/tests/format/formatters/DateTimeFormatter.test.ts
View File

@ -61,7 +61,7 @@ describe('DateTimeFormatter', () => {
expect(spy).toHaveBeenCalledWith('en-GB', { month: 'short' });
});
it('should not memoize formatter instances when memoize is false', () => {
it('should not memoize formatter instances when cache is effective', () => {
const spy = jest.spyOn(Intl, 'DateTimeFormat');
const formatter1 = new DateTimeFormatter('en-US', { month: 'short' });
const formatter2 = new DateTimeFormatter('en-US', { month: 'short' });
@ -91,7 +91,7 @@ describe('DateTimeFormatter', () => {
expect(formatted).toEqual('January 1, 2023');
});
it('should format using memorized formatter when useMemorize is true', () => {
it('should format using memorized formatter when cache is effective', () => {
const formatter = new DateTimeFormatter('en-US', { year: 'numeric' }, creatI18nCache());
const date = new Date(2023, 0, 1);
const formatted1 = formatter.dateTimeFormat(date);

6
packages/inula-intl/tests/format/getFormatMessage.test.ts
View File

@ -24,7 +24,7 @@ describe('getFormatMessage', () => {
},
},
locale: 'en',
error: 'missingMessage',
onError: 'missingMessage',
});
it('should return the correct translation for an existing message ID', () => {
@ -32,7 +32,7 @@ describe('getFormatMessage', () => {
const values = { name: 'John' };
const expectedResult = 'Hello, John!';
const result = getFormatMessage(i18nInstance, id, values);
const result = getFormatMessage(i18nInstance, id, values, {}, {});
expect(result).toEqual(expectedResult);
});
@ -41,7 +41,7 @@ describe('getFormatMessage', () => {
const id = 'missingMessage';
const expectedResult = 'missingMessage';
const result = getFormatMessage(i18nInstance, id);
const result = getFormatMessage(i18nInstance, id, {}, {}, {});
expect(result).toEqual(expectedResult);
});

14
packages/inula-intl/tests/utils/copyStatics.test.ts
View File

@ -15,7 +15,7 @@
import copyStaticProps from '../../src/utils/copyStaticProps';
describe('copyStaticProps', () => {
test('should hoist static properties from sourceComponent to targetComponent', () => {
it('should hoist static properties from sourceComponent to targetComponent', () => {
class SourceComponent {
static staticProp = 'sourceProp';
}
@ -23,11 +23,10 @@ describe('copyStaticProps', () => {
class TargetComponent {}
copyStaticProps(TargetComponent, SourceComponent);
expect((TargetComponent as any).staticProp).toBe('sourceProp');
});
test('should hoist static properties from inherited components', () => {
it('should hoist static properties from inherited components', () => {
class SourceComponent {
static staticProp = 'sourceProp';
}
@ -37,11 +36,10 @@ describe('copyStaticProps', () => {
class TargetComponent {}
copyStaticProps(TargetComponent, InheritedComponent);
expect((TargetComponent as any).staticProp).toBe('sourceProp');
});
test('should not hoist properties if descriptor is not valid', () => {
it('should not hoist properties if descriptor is not valid', () => {
class SourceComponent {
get staticProp() {
return 'sourceProp';
@ -51,11 +49,10 @@ describe('copyStaticProps', () => {
class TargetComponent {}
copyStaticProps(TargetComponent, SourceComponent);
expect((TargetComponent as any).staticProp).toBeUndefined();
});
test('should not hoist properties if descriptor is not valid', () => {
it('should not hoist properties if descriptor is not valid', () => {
class SourceComponent {
static get staticProp() {
return 'sourceProp';
@ -65,11 +62,10 @@ describe('copyStaticProps', () => {
class TargetComponent {}
copyStaticProps(TargetComponent, SourceComponent);
expect((TargetComponent as any).staticProp).toBe('sourceProp');
});
test('copyStaticProps should not copy static properties that already exist in target or source component', () => {
it('copyStaticProps should not copy static properties that already exist in target or source component', () => {
const targetComponent = { staticProp: 'target' };
const sourceComponent = { staticProp: 'source' };
copyStaticProps(targetComponent, sourceComponent);

2
packages/inula-intl/tests/utils/eventListener.test.ts
View File

@ -43,7 +43,7 @@ describe('eventEmitter', () => {
expect(listener).not.toBeCalled();
});
it('should do nothing when even doesn\'t exist', () => {
it("should do nothing when even doesn't exist", () => {
const unknown = jest.fn();
const emitter = new EventEmitter();

4
packages/inula-intl/tsconfig.json
View File

@ -31,6 +31,7 @@
"declaration": true,
"experimentalDecorators": true,
"downlevelIteration": true,
"emitDeclarationOnly": true,
"declarationDir": "./build/@types",
// 赋值为空数组使@types/node不会起作用
"lib": [
@ -54,7 +55,8 @@
}
},
"include": [
"./index.ts"
"./index.ts",
],
"exclude": [
"node_modules",

16
packages/inula-intl/webpack.config.js
View File

@ -12,16 +12,18 @@
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { fileURLToPath } from 'url';
const isDevelopment = process.env.NODE_ENV === 'development';
const entryPath = './example/index.tsx';
module.exports = {
entry: resolve(__dirname, entryPath),
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export default {
entry: path.join(__dirname, entryPath),
output: {
path: resolve(__dirname, './build'),
path: path.join(__dirname, './build'),
filename: 'main.js',
},
module: {
@ -50,7 +52,7 @@ module.exports = {
mode: isDevelopment ? 'development' : 'production',
plugins: [
new HtmlWebpackPlugin({
template: resolve(__dirname, './example/index.html'),
template: path.join(__dirname, './example/index.html'),
}),
],
resolve: {

8
packages/inula-request/babel.config.js
View File

@ -14,11 +14,5 @@
*/
module.exports = {
presets: [
[
'@babel/preset-env',
{ targets: { node: 'current' }},
],
['@babel/preset-typescript'],
],
presets: [['@babel/preset-env', { targets: { node: 'current' } }], ['@babel/preset-typescript']],
};

10
packages/inula-request/examples/cancelRequest/cancelRequestTest.html
View File

@ -16,26 +16,24 @@
</div>
<script src="../../dist/bundle.js"></script>
<script>
import inulaRequest from "../../index";
const sendRequestButton = document.getElementById('sendRequestButton');
const cancelRequestButton = document.getElementById('cancelRequestButton');
const message = document.getElementById('message');
let controller = new AbortController;
let controller = new AbortController();
const signal = controller.signal;
sendRequestButton.addEventListener('click', function() {
setInterval(function() {
setInterval(() => {
inulaRequest.get('http://localhost:3001/data', {
signal
}).then(function(response) {
message.innerHTML = '请求成功: ' + JSON.stringify(response.data, null, 2);
}).catch(function(error) {
if (inulaRequest.isCancel(error)) {
message.innerHTML = '请求已被取消： ' + error.message;
message.innerHTML = '请求已被取消：' + error.message;
} else {
message.innerHTML = '请求出错： ' + error.message;
message.innerHTML = '请求出错：' + error.message;
}
});
}, 1000)

2
packages/inula-request/examples/request/requestTest.html
View File

@ -118,7 +118,7 @@
putResult.innerHTML = JSON.stringify(error, null, 2);
});
inulaRequest.delete('http://localhost:3001/users', {params: {id: 1}})
inulaRequest.delete('http://localhost:3001/users', {params: {id: 1, test:['{}']}})
.then(function (response) {
deleteResult.innerHTML = JSON.stringify(response.data, null, 2);
})

10
packages/inula-request/examples/server/serverTest.mjs
View File

@ -13,11 +13,11 @@
* See the Mulan PSL v2 for more details.
*/
import express from "express";
import * as fs from "fs";
import bodyParser from "body-parser";
import cors from "cors";
import * as path from "path";
import express from 'express';
import * as fs from 'fs';
import * as path from 'path';
import bodyParser from 'body-parser';
import cors from 'cors';
const app = express();
const port = 3001;

2
packages/inula-request/index.ts
View File

@ -14,7 +14,6 @@
*/
import inulaRequest from './src/inulaRequest';
import useIR from './src/core/useIR/useIR';
const {
create,
@ -60,7 +59,6 @@ export {
isIrError,
spread,
IrHeaders,
useIR,
// 兼容axios
Axios,
AxiosError,

15
packages/inula-request/package.json
View File

@ -11,7 +11,7 @@
"server": "nodemon .\\examples\\server\\serverTest.mjs"
},
"files": [
"/dist",
"dist",
"README.md",
"CHANGELOG.md"
],
@ -26,38 +26,25 @@
"author": "",
"license": "MulanPSL2",
"devDependencies": {
"@babel/core": "^7.21.8",
"@babel/preset-env": "^7.21.5",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.21.4",
"@rollup/plugin-commonjs": "^19.0.0",
"@types/jest": "^29.2.5",
"@types/react": "^17.0.34",
"@typescript-eslint/eslint-plugin": "^5.48.1",
"@typescript-eslint/parser": "^5.48.1",
"babel-jest": "^20.0.3",
"babel-loader": "^9.1.0",
"body-parser": "^1.20.2",
"core-js": "3.32.1",
"cors": "^2.8.5",
"eslint": "^8.31.0",
"express": "^4.18.2",
"html-webpack-plugin": "^5.5.3",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.4.1",
"jsdom": "^22.0.0",
"nodemon": "^2.0.22",
"prettier": "^2.6.2",
"rollup": "^3.20.2",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.34.1",
"ts-jest": "^29.0.4",
"ts-loader": "^9.4.2",
"ts-node": "^10.9.1",
"tslib": "^2.5.0",
"typescript": "^4.9.4",
"webpack": "^5.81.0",
"webpack-cli": "^5.0.2",
"webpack-dev-server": "^4.13.3"

23
packages/inula-request/rollup.config.js
View File

@ -21,16 +21,19 @@ import { babel } from '@rollup/plugin-babel';
export default {
input: './index.ts',
output: [{
file: 'dist/inulaRequest.js',
format: 'umd',
exports: 'named',
name: 'inulaRequest',
sourcemap: false,
}, {
file: 'dist/inulaRequest.esm-browser.js',
format: 'esm',
}],
output: [
{
file: 'dist/inulaRequest.js',
format: 'umd',
exports: 'named',
name: 'inulaRequest',
sourcemap: false,
},
{
file: 'dist/inulaRequest.esm-browser.js',
format: 'esm',
},
],
plugins: [
resolve(),
commonjs(),

5
packages/inula-request/src/cancel/checkCancel.ts
View File

@ -15,7 +15,10 @@
// 检查是否为用户主动请求取消场景
function checkCancel(input: any): boolean {
return input.name === 'CanceledError' || input.cancelFlag || false;
if (input) {
return input.name === 'CanceledError' || input.cancelFlag || false;
}
return false;
}
export default checkCancel;

2
packages/inula-request/src/inulaRequest.ts
View File

@ -69,6 +69,6 @@ inulaRequest.AxiosHeaders = IrHeaders;
export default inulaRequest;
// 兼容 IE 浏览器 fetch
if (utils.isIE()) {
if (typeof window !== 'undefined' && utils.isIE()) {
(window as any).fetch = fetchLike;
}

13
packages/inula-request/src/request/fetchRequest.ts
View File

@ -35,8 +35,10 @@ export const fetchRequest = (config: IrRequestConfig): Promise<IrResponse> => {
withCredentials = false,
onUploadProgress = null,
onDownloadProgress = null,
paramsSerializer,
} = config;
let { data = null, url, signal } = config;
let { signal, url, data = null } = config;
const controller = new AbortController();
if (!signal) {
@ -59,7 +61,7 @@ export const fetchRequest = (config: IrRequestConfig): Promise<IrResponse> => {
// 处理请求参数
if (params) {
const queryString = utils.objectToQueryString(utils.filterUndefinedValues(params));
const queryString = utils.objectToQueryString(utils.filterUndefinedValues(params), paramsSerializer);
if (queryString) {
url = `${url}${url!.includes('?') ? '&' : '?'}${queryString}`; // 支持用户将部分请求参数写在 url 中
}
@ -138,17 +140,18 @@ export const fetchRequest = (config: IrRequestConfig): Promise<IrResponse> => {
case 'json':
parseMethod = new Response(responseBody).text().then((text: string) => {
try {
return JSON.parse(text);
return text ? JSON.parse(text) : ''; // 如果服务端请求成功但不返回响应值，默认返回空字符串
} catch (e) {
// 显式指定返回类型 JSON解析失败报错
reject('parse error');
const error = new IrError('parse error', '', responseData.config, responseData.request, responseData);
reject(error);
}
});
break;
default:
parseMethod = new Response(responseBody).text().then((text: string) => {
try {
return JSON.parse(text);
return text ? JSON.parse(text) : '';
} catch (e) {
// 默认为 JSON 类型，若JSON校验失败则直接返回服务端数据
return text;

5
packages/inula-request/src/request/ieFetchRequest.ts
View File

@ -33,6 +33,7 @@ export const ieFetchRequest = (config: IrRequestConfig): Promise<IrResponse> =>
cancelToken = null,
withCredentials = false,
} = config;
let { url } = config;
let controller: any;
let signal;
@ -96,7 +97,6 @@ export const ieFetchRequest = (config: IrRequestConfig): Promise<IrResponse> =>
headers: response.headers,
config,
request: null,
responseURL: response.url,
};
// 根据 responseType 选择相应的解析方法
@ -123,7 +123,8 @@ export const ieFetchRequest = (config: IrRequestConfig): Promise<IrResponse> =>
return JSON.parse(text);
} catch (e) {
// 显式指定返回类型 JSON解析失败报错
reject('parse error');
const error = new IrError('parse error', '', responseData.config, responseData.request, responseData);
reject(error);
}
});
break;

2
packages/inula-request/src/request/processDownloadProgress.ts
View File

@ -35,7 +35,7 @@ function processDownloadProgress(
}
totalBytesRead += value.byteLength;
onProgress!({ loaded: totalBytesRead, total: response.headers.get('Content-Length') });
onProgress!({ loaded: totalBytesRead, total: Number(response.headers.get('Content-Length')) });
controller.enqueue(value); // 将读取到的数据块添加到新的 ReadableStream 中
read(); // 递归调用，继续读取 stream 直到结束
});

38
packages/inula-request/src/request/processUploadProgress.ts
View File

@ -16,6 +16,7 @@
import { IrProgressEvent, IrRequestConfig, IrResponse } from '../types/interfaces';
import IrError from '../core/IrError';
import CancelError from '../cancel/CancelError';
import { calculateTransRate } from '../utils/dataUtils/calculateTransRate';
function processUploadProgress(
onUploadProgress: (progressEvent: IrProgressEvent) => void | null,
@ -42,15 +43,29 @@ function processUploadProgress(
const handleUploadProgress = () => {
const xhr = new XMLHttpRequest();
let loadedBytes = 0;
const calculate = calculateTransRate(50, 250);
// 添加 progress 事件监听器
xhr.upload.addEventListener('progress', event => {
if (event.lengthComputable) {
// 可以计算上传进度
onUploadProgress!({ loaded: event.loaded, total: event.total });
} else {
onUploadProgress!({ loaded: event.loaded, total: totalBytesToUpload });
}
const loaded = event.loaded;
const total = event.lengthComputable ? event.total : undefined;
const progressBytes = loaded - loadedBytes;
const rate = calculate(progressBytes);
const inRange = total && loaded <= total;
loadedBytes = loaded;
const feedback = {
loaded,
total,
progress: total ? loaded / total : undefined,
bytes: progressBytes,
rate: rate ?? undefined,
estimated: rate && total && inRange ? (total - loaded) / rate : undefined,
event,
upload: true,
};
// 可以计算上传进度
onUploadProgress!(feedback);
});
// 添加 readystatechange 事件监听器，当 xhr.readyState 变更时执行回调函数
@ -67,7 +82,16 @@ function processUploadProgress(
parsedText = xhr.responseText;
}
} catch (e) {
reject('parse error');
const responseData = {
data: parsedText,
status: xhr.status,
statusText: xhr.statusText,
headers: xhr.getAllResponseHeaders(),
config: config,
request: xhr,
};
const error = new IrError('parse error', '', config, xhr, responseData);
reject(error);
}
const response: IrResponse = {
data: parsedText,

9
packages/inula-request/src/types/interfaces.ts
View File

@ -60,6 +60,13 @@ export interface IrRequestConfig {
transitional?: TransitionalOptions;
validateStatus?: (status: number) => boolean;
// 自定义解析请求参数
paramsSerializer?: ParamsSerializer;
}
interface ParamsSerializer {
serialize?: (params: Record<string, any>) => string;
}
export interface TransitionalOptions {
@ -116,6 +123,8 @@ export interface IrInterface {
options<T = unknown>(url: string, config?: IrRequestConfig): Promise<IrResponse<T>>;
patch<T = unknown>(url: string, data?: any, config?: IrRequestConfig): Promise<IrResponse<T>>;
postForm<T = unknown>(url: string, data: any, config: IrRequestConfig): Promise<IrResponse<T>>;
putForm<T = unknown>(url: string, data: any, config: IrRequestConfig): Promise<IrResponse<T>>;

17
packages/inula-request/src/utils/commonUtils/utils.ts
View File

@ -386,10 +386,16 @@ const convertToCamelCase = (str: string) => {
.join('');
};
function objectToQueryString(obj: Record<string, any>) {
function objectToQueryString(obj: Record<string, any>, options?: Record<string, any>) {
const serialize = options && options.serialize;
if (serialize) {
return serialize(obj);
}
return Object.keys(obj)
.map(key => {
// params 中 value 为数组时需特殊处理，如：{ key: [1, 2, 3] } -> key[]=1&key[]=2&key[]=3
// params 中 value 为数组时需特殊处理，如： { key: [1, 2, 3] } -> key[]=1&key[]=2&key[]=3
if (Array.isArray(obj[key])) {
let urlPart = '';
obj[key].forEach((value: string) => {
@ -397,6 +403,8 @@ function objectToQueryString(obj: Record<string, any>) {
return urlPart;
});
return urlPart.slice(0, -1);
} else if (utils.checkObject(obj[key])) {
return encodeURIComponent(key) + '=' + encodeURIComponent(JSON.stringify(obj[key]));
}
return encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]);
})
@ -419,7 +427,10 @@ function getNormalizedValue(value: string | any[] | boolean | null | number): st
}
function isIE(): boolean {
return /MSIE|Trident/.test(window.navigator.userAgent);
if (typeof window !== 'undefined') {
return /MSIE|Trident/.test(window.navigator.userAgent);
}
return false;
}
function getObjectByArray(arr: any[]): Record<string, any> {

66
packages/inula-request/src/utils/dataUtils/calculateTransRate.ts Normal file
View File

@ -0,0 +1,66 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
// 计算一段时间内平均传输速度
export function calculateTransRate(samplesNum: number, interval: number) {
// 采样数默认值为 10，最小时间间隔默认值为 1000
const num = samplesNum ?? 10;
const minInterval = interval ?? 1000;
// 创建存储每个样本的数据量和时间戳的数组
const bytesArr = new Array(num);
const timestampsArr = new Array(num);
// 记录当前样本索引和第一个样本索引
let currentIndex = 0;
let firstIndex = 0;
let firstTimestamp: number;
return function calculate(dataSize: number) {
const now = Date.now();
const start = timestampsArr[firstIndex];
// 检查是否是第一个样本。如果是第一个样本，则将当前时间设置为 firstTimestamp
firstTimestamp = firstTimestamp ?? now;
// 存储当前数据量和时间戳
bytesArr[currentIndex] = dataSize;
timestampsArr[currentIndex] = now;
let index = firstIndex;
let totalSize = 0;
// 计算从第一个样本到当前的所有样本的数据量总和
while (index !== currentIndex) {
totalSize += bytesArr[index++];
index = index % num;
}
currentIndex = (currentIndex + 1) % num;
// 如果当前索引和第一个索引相等，表示样本数组已满，更新第一个 index 的值。
if (currentIndex === firstIndex) {
firstIndex = (firstIndex + 1) % num;
}
if (now - firstTimestamp < minInterval) {
return;
}
const totalTime = start && now - start;
return totalTime ? Math.round(totalSize * 1000 / totalTime) : undefined;
};
}

30
packages/inula-request/tests/unitTest/utils/commonUtils/objectToQueryString.test.ts
View File

@ -52,8 +52,36 @@ describe('objectToQueryString function', () => {
key4: [1, 2, 3],
key5: { a: 'b' },
};
const expectedResult = 'key1=string&key2=42&key3=true&key4[]=1&key4[]=2&key4[]=3&key5=%5Bobject%20Object%5D';
const expectedResult = 'key1=string&key2=42&key3=true&key4[]=1&key4[]=2&key4[]=3&key5=%7B%22a%22%3A%22b%22%7D';
const result = utils.objectToQueryString(input);
expect(result).toBe(expectedResult);
});
it('should handle custom params serializer when paramsSerializer is set', () => {
const input = {
key1: 'string',
key4: [1, 2, 3],
};
const options = {
serialize: params => {
return Object.keys(params)
.filter(item => Object.prototype.hasOwnProperty.call(params, item))
.reduce((pre, currentValue) => {
if (params[currentValue]) {
if (pre) {
return `${pre}&${currentValue}=${encodeURIComponent(params[currentValue])}`;
}
return `${currentValue}=${encodeURIComponent(params[currentValue])}`;
} else {
return pre;
}
}, '');
},
};
const expectedResult = 'key1=string&key4=1%2C2%2C3';
const result = utils.objectToQueryString(input, options);
expect(result).toBe(expectedResult);
});
});

37
packages/inula-request/tests/unitTest/utils/dataUtils/calculateTransRate.test.ts Normal file
View File

@ -0,0 +1,37 @@
/*
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
*
* openInula is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
*
* http://license.coscl.org.cn/MulanPSL2
*
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/
import { calculateTransRate } from '../../../../src/utils/dataUtils/calculateTransRate';
describe('calculateTransRate', () => {
it('should return undefined when interval is undefined', () => {
const calc = calculateTransRate(10, undefined);
expect(calc(1000)).toBeUndefined();
});
it('should return correct rate when interval is 2000', () => {
const calc = calculateTransRate(10, 2000);
calc(1000);
expect(calc(1000)).toBeUndefined();
});
it('should return 5000 rate when interval is 2000', () => {
const calc = calculateTransRate(10, 2000);
calc(10000000000);
setTimeout(() => {
expect(calc(10000010000)).toBe(5000);
}, 2000);
});
});

38
packages/inula-router/package.json
View File

@ -21,49 +21,15 @@
],
"license": "MulanPSL2",
"devDependencies": {
"@babel/core": "7.21.3",
"@babel/plugin-proposal-class-properties": "7.16.7",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.16.7",
"@babel/plugin-proposal-object-rest-spread": "7.16.7",
"@babel/plugin-proposal-optional-chaining": "7.16.7",
"@babel/plugin-syntax-jsx": "7.16.7",
"@babel/plugin-transform-arrow-functions": "7.16.7",
"@babel/plugin-transform-block-scoped-functions": "7.16.7",
"@babel/plugin-transform-block-scoping": "7.16.7",
"@babel/plugin-transform-classes": "7.16.7",
"@babel/plugin-transform-computed-properties": "7.16.7",
"@babel/plugin-transform-destructuring": "7.16.7",
"@babel/plugin-transform-for-of": "7.16.7",
"@babel/plugin-transform-literals": "7.16.7",
"@babel/plugin-transform-object-assign": "7.16.7",
"@babel/plugin-transform-object-super": "7.16.7",
"@babel/plugin-transform-parameters": "7.16.7",
"@babel/plugin-transform-react-jsx": "7.16.7",
"@babel/plugin-transform-react-jsx-source": "^7.16.7",
"@babel/plugin-transform-runtime": "7.16.7",
"@babel/plugin-transform-shorthand-properties": "7.16.7",
"@babel/plugin-transform-spread": "7.16.7",
"@babel/plugin-transform-template-literals": "7.16.7",
"@babel/preset-env": "7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-node-resolve": "^15.1.0",
"@cloudsop/horizon": "^0.0.58",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.2.3",
"@types/react-redux": "7.0.0",
"jest": "29.3.1",
"jest-environment-jsdom": "^29.5.0",
"jsdom": "^21.1.1",
"prettier": "2.8.8",
"react-redux": "^3.8.1 || ^4.0.0",
"rollup": "2.79.1",
"rollup-plugin-dts": "^6.0.1",
"rollup-plugin-terser": "^5.1.3",
"redux": "4.2.1",
"ts-jest": "29.0.3",
"typescript": "4.9.3"
"redux": "4.2.1"
},
"peerDependencies": {
"openinula": ">=0.1.1"

34
packages/inula-router/src/history/__tests__/history.test.ts
View File

@ -13,7 +13,7 @@
* See the Mulan PSL v2 for more details.
*/
import { createPath } from '../utils';
import { createPath, parseRelativePath } from '../utils';
describe('createPath', () => {
describe('given only a pathname', () => {
@ -73,4 +73,36 @@ describe('createPath', () => {
expect(path).toBe('https://google.com?something=cool#section-1');
});
});
describe('parse relative path', () => {
it('from is absolute path', () => {
const url = parseRelativePath('a', '/b/');
expect(url).toBe('/b/a');
const url2 = parseRelativePath('a', '');
expect(url2).toBe('/a');
});
it('to is end with slash', () => {
const url = parseRelativePath('a/', '/b/c/');
expect(url).toBe('/b/c/a/');
const url2 = parseRelativePath('a/', '/b/c');
expect(url2).toBe('/b/a/');
});
it('to contain .. or .', () => {
const url = parseRelativePath('../a/', '/b/c/');
expect(url).toBe('/b/a/');
const url2 = parseRelativePath('../a', '/b/c');
expect(url2).toBe('/a');
const url3 = parseRelativePath('../../a', '/b/c/d/e');
expect(url3).toBe('/b/a');
});
it('to only contain ..', () => {
const url = parseRelativePath('../..', '/b/c/e/');
expect(url).toBe('/b/');
const url2 = parseRelativePath('../..', '/b/c/e');
expect(url2).toBe('/');
});
});
});

2
packages/inula-router/src/history/baseHistory.ts
View File

@ -66,7 +66,7 @@ export function getBaseHistory<S>(
Object.assign(historyProps, nextState);
}
historyProps.length = browserHistory.length;
// 避免location饮用相同时setState不触发
// 避免location引用相同时setState不触发
const location = Object.assign({}, historyProps.location);
const args = { location: location, action: historyProps.action };
transitionManager.notifyListeners(args);

Some files were not shown because too many files have changed in this diff Show More