Merge pull request #3236 from alibaba/release-next

.eslintrc.js

@@ -38,4 +38,7 @@ module.exports = {
       files: ['**/*.ts', '**/*.tsx'],
     },
   ],
+  env: {
+    "jest": true
+  }
 };

.github/workflows/ci.yml

@@ -4,21 +4,20 @@ on: [push]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
-
     strategy:
       matrix:
         node-version: [10.x]
-
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm run setup
-    - run: npm run lint
-    - run: npm run dependency:check
-      env:
-        CI: true
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm run setup
+      - run: npm run dependency:check
+      - run: npm run lint
+      - run: npm run test
+      - run: npm run coverage
+        env:
+          CI: true

.gitignore

@@ -19,3 +19,6 @@ examples/*/.ice
 docs/.vuepress/dist/
 
 build
+coverage
+
+.idea

codecov.yml

@@ -0,0 +1,16 @@
+
+comment:
+  layout: "reach, diff, flags, files"
+  behavior: default
+  require_changes: false
+  require_base: no
+  require_head: yes
+  branches:
+    - "master"
+
+coverage:
+  status:
+    project:
+      default:
+        threshold: 90%
+    patch: off

docs/guide/basic/build.md

@@ -412,6 +412,19 @@ icejs 中一般不允许修改该配置。
 }
 ```
 
+### disableRuntime
+
+- 类型：`boolean`
+- 默认值：`false`
+
+禁用运行时的能力，如需关闭配置为 `true` 即可。
+
+```json
+{
+  "disableRuntime": true
+}
+```
+
 ## 根据环境区分工程配置
 
 参考 [区分不同环境](/docs/guide/basic/mode.md)。

docs/guide/basic/request.md

@@ -139,7 +139,7 @@ import userService from '@/services/user';
 
 export default function HomePage() {
   // 调用 service
-  const { data, error, isLoading, request } = useRequest(userService.getUser);
+  const { data, error, loading, request } = useRequest(userService.getUser);
 
   useEffect(() => {
     // 触发数据请求
@@ -253,67 +253,89 @@ Response Schema：
 
 ### useRequest
 
-* 可以用在 Function Component，使用 useRequest 可以极大的简化对请求状态（error/loading）的管理。
-* 可以接收一个 `Object` 或者是 `(...args)=> any` 作为参数。
+用在函数式组件中，使用 useRequest 可以极大的简化对请求状态的管理。
 
-#### 传入对象作为参数
+#### API
 
 ```ts
-const { data, loading, error, request } = useRequest(options: RequestConfig);
+const {
+  // 请求返回的数据，默认为 undefined
+  data,
+  // 请求抛出的异常，默认为 undefined
+  error,
+  // 请求状态
+  loading,
+  // 手动触发请求，参数会传递给 service
+  request,
+  // 当次执行请求的参数数组
+  params,
+  // 取消当前请求，如果有轮询，停止
+  cancel,
+  // 使用上一次的 params，重新执行请求
+  refresh,
+  // 直接修改 data	
+  mutate,
+  // 默认情况下，新请求会覆盖旧请求。如果设置了 fetchKey，则可以实现多个请求并行，fetches 存储了多个请求的状态
+  fetches
+} = useRequest(service, {
+  // 默认为 true 即需要手动执行请求
+  manual,
+   // 初始化的 data	
+  initialData,
+  // 请求成功时触发，参数为 data 和 params
+  onSuccess,
+  // 请求报错时触发，参数为 error 和 params
+  onError,
+  // 格式化请求结果	
+  formatResult,
+  // 请求唯一标识
+  cacheKey,
+  // 设置显示 loading 的延迟时间，避免闪烁
+  loadingDelay,
+  // 默认参数	
+  defaultParams,
+  // 轮询间隔，单位为毫秒	
+  pollingInterval
+  // 在页面隐藏时，是否继续轮询，默认为 true，即不会停止轮询
+  pollingWhenHidden,
+  // 根据 params，获取当前请求的 key
+  fetchKey,
+  // 在屏幕重新获取焦点或重新显示时，是否重新发起请求。默认为 false，即不会重新发起请求
+  refreshOnWindowFocus,
+  // 屏幕重新聚焦，如果每次都重新发起请求，不是很好，我们需要有一个时间间隔，在当前时间间隔内，不会重新发起请求，需要配置 refreshOnWindowFocus 使用
+  focusTimespan,
+  // 防抖间隔, 单位为毫秒，设置后，请求进入防抖模式
+  debounceInterval,
+  // 节流间隔, 单位为毫秒，设置后，请求进入节流模式。	
+  throttleInterval,
+  // 只有当 ready 为 true 时，才会发起请求	
+  ready,
+  // 在 manual = false 时，refreshDeps 变化，会触发请求重新执行	
+  refreshDeps
+});
 ```
 
-使用示例：
-
-```ts
-import { useRequest } from 'ice';
-
-export default function HomePage() {
-  const { data, error, isLoading, request } = useRequest({
-    url: '/api/getRepo',
-    params: {
-      id: 123
-    }
-  });
-
-  useEffect(() => {
-    request();
-  }, []);
-
-
-  return (
-    <>Home</>
-  );
-}
-```
-
-#### 传入函数作为参数
+#### 常用使用方式
 
 ```ts
-const { data, loading, error, request } = useRequest((...args: any[]) => any);
+// 用法 1：传入字符串
+const { data, error, loading } = useRequest('/api/repo');
+
+// 用法 2：传入配置对象
+const { data, error, loading } = useRequest({
+  url: '/api/repo',
+  method: 'get',
+});
+
+// 用法 3：传入 service 函数
+const { data, error, loading, request } = useRequest((id) => ({
+  url: '/api/repo',
+  method: 'get',
+  data: { id },
+});
 ```
 
-使用示例：
-
-```ts
-// src/pages/Home/index.tsx
-import { useRequest } from 'ice';
-import services from '@/services';
-
-export default function HomePage() {
-  const { data, error, isLoading, request } = useRequest(services.getRepo);
-
-  useEffect(() => {
-    // 动态传入参数
-    const id = 123;
-    request(id);
-  }, []);
-
-
-  return (
-    <>Home</>
-  );
-}
-```
+更多使用方式详见 [ahooks/useRequest](https://ahooks.js.org/zh-CN/hooks/async)
 
 ### 请求配置
 
@@ -378,7 +400,6 @@ const appConfig = {
     {
       baseURL: '/api',
       // ...RequestConfig 其他参数
-
     },
     {
       // 配置 request 实例名称，如果不配默认使用内置的 request 实例

examples/basic-request/src/pages/Home/index.tsx

@@ -6,16 +6,16 @@ const BuiltInRequestDemo1 = () => {
   console.clear();
 
   async function fetchUser1() {
-    const data = await request({url: '/user' });
+    const data = await request({ url: '/user' });
     console.log('直接调用 request：', data);
   }
 
   async function fetchUser2() {
-    const data = await request({url: '/user', withFullResponse: true });
+    const data = await request({ url: '/user', withFullResponse: true });
     console.log('调用 request + withFullResponse：', data);
   }
 
-  const { request: fetchUser3, ...rest } = useRequest({url: '/user'});
+  const { request: fetchUser3, ...rest } = useRequest({ url: '/user' });
   console.log('直接调用 useRequest：', {...rest});
 
   return (
@@ -45,7 +45,7 @@ const BuiltInRequestDemo3 = () => {
     console.log('多实例 + 直接调用 request：', data);
   }
 
-  const { request: fetchUser2, ...rest } = useRequest({url: '/user', instanceName: 'request2'});
+  const { request: fetchUser2, ...rest } = useRequest({ url: '/user', instanceName: 'request2' });
   console.log('多实例 + 调用 useRequest：', {...rest});
 
   return (

examples/icestark-child/src/app.ts → examples/icestark-child/src/app.tsx

@@ -1,9 +1,13 @@
+import React from 'react';
 import { createApp, IAppConfig } from 'ice';
 
 const appConfig: IAppConfig = {
   app: {
     rootId: 'ice-container'
   },
+  router: {
+    fallback: <div>加载中...</div>
+  },
   logger: {
     level: 'warn'
   },

examples/icestark-layout/src/app.tsx

@@ -14,6 +14,7 @@ const appConfig: IAppConfig = {
   },
   router: {
     type: 'browser',
+    fallback: <div>加载中...</div>
   },
   icestark: {
     type: 'framework',

examples/simple/README.md

@@ -0,0 +1,3 @@
+# simple example
+
+https://github.com/ice-lab/icejs/tree/master/examples

examples/simple/build.json

@@ -0,0 +1,5 @@
+{
+  "entry": "src/index.tsx",
+  "disableRuntime": true,
+  "plugins": []
+}

examples/simple/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "example-simple",
+  "dependencies": {
+    "ice.js": "^1.0.0",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.20",
+    "@types/react-dom": "^16.9.5"
+  },
+  "scripts": {
+    "start": "icejs start",
+    "build": "icejs build"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  }
+}

examples/simple/sandbox.config.json

@@ -0,0 +1,6 @@
+{
+  "template": "node",
+  "container": {
+    "port": 3333
+  }
+}

examples/simple/src/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const App = () => {
+  return <h2>Hello World</h2>;
+};
+
+ReactDOM.render(<App />, document.querySelector('#ice-container'));

examples/simple/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true
+  }
+}

jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  'coverageDirectory': './coverage/',
+  'testEnvironment': 'node',
+  'collectCoverage': true,
+  'coveragePathIgnorePatterns': [
+    '<rootDir>/node_modules/'
+  ],
+  'roots': [
+    '<rootDir>/packages'
+  ],
+  'testPathIgnorePatterns': [
+    '/node_modules/',
+    '/lib/',
+    'icejs/bin/'
+  ],
+  'preset': 'ts-jest'
+};

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.2",
+  "version": "1.5.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": [