Merge commit 'c952494d991919dcc9963f3c6335d23553b92a89' into support/…

…en-docs

docs/docs/blog/legacy-browser.md

@@ -82,7 +82,7 @@ export default {
 
 export default {
   headScripts: [
-    'http://polyfill.alicdn.com/v3/polyfill.min.js', // or https://polyfill.io/v3/polyfill.min.js
+    'http://polyfill.alicdn.com/v3/polyfill.min.js',
   ],
   legacy: {},
 };
@@ -94,7 +94,7 @@ export default {
 | :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | CDN 引入           | 以 cdn 形式引入 **script 形式且前置的** 、目标浏览器环境缺少的 polyfill js 文件，如 [es6-shim](https://github.com/paulmillr/es6-shim) 。                                                                                                                                                                                                              |
 | 人工 core-js       | 利用 [core-js](https://github.com/zloirock/core-js) 系工具，如通过 [core-js-builder](https://github.com/zloirock/core-js/tree/master/packages/core-js-builder) 构建自己需要的 polyfill 产物，再以 **前置 script 脚本** 形式引入项目。                                                                                                                 |
-| 动态 polyfill 服务 | 使用根据当前浏览器请求 UA 动态下发所需 polyfill 的服务，比如 [polyfill.io](https://polyfill.io/v3/polyfill.min.js) ，考虑到速度，可使用国内的 [alicdn polyfill.io](http://polyfill.alicdn.com/v3/polyfill.min.js) 服务。另外，你还可以使用 [polyfill-service](https://github.com/Financial-Times/polyfill-service) 自建相同的动态 polyfill 下发服务。 |
+| 动态 polyfill 服务 | 使用根据当前浏览器请求 UA 动态下发所需 polyfill 的服务，比如 [polyfill.io (alicdn)](http://polyfill.alicdn.com/v3/polyfill.min.js) 或 [polyfill.io (CloudFlare)](https://cdnjs.cloudflare.com/polyfill/) 服务。另外，你还可以使用 [polyfill-service](https://github.com/polyfillpolyfill/polyfill-service) 自建相同的动态 polyfill 下发服务。 |
 
 注：
 

docs/docs/docs/api/runtime-config.md

@@ -88,21 +88,63 @@ export default {
    };
    ```
 
+### getInitialState
+
+- Type: `getInitialState: () => Promise<DataType extends any> | any`
+
+`getInitialState()` 的返回值将成为全局初始状态。例如：
+
+```ts
+// src/app.ts
+import { fetchInitialData } from "@/services/initial";
+
+export async function () {
+  const initialData = await fetchInitialData();
+  return initialData;
+}
+```
+
+现在，各种插件和您定义的组件都可以通过 `useModel('@@initialState')` 直接获取到这份全局的初始状态，如下所示：
+
+```tsx
+import { useModel } from "umi";
+
+export default function Page() {
+  const { initialState, loading, error, refresh, setInitialState } =
+    useModel("@@initialState");
+  return <>{initialState}</>;
+}
+```
+
+| 对象属性 | 类型 | 介绍 |
+| --- | --- | --- |
+| `initialState` | `any` | 导出的 `getInitialState()` 方法的返回值 |
+| `loading` | `boolean` | `getInitialState()` 或 `refresh()` 方法是否正在进行中。在首次获取到初始状态前，页面其他部分的渲染都会**被阻止** |
+| `error` | `Error` | 如果导出的 `getInitialState()` 方法运行时报错，报错的错误信息 |
+| `refresh` | `() => void` | 重新执行 `getInitialState` 方法，并获取新的全局初始状态 |
+| `setInitialState` | `(state: any) => void` | 手动设置 `initialState` 的值，手动设置完毕会将 `loading` 置为 `false` |
+
 ### layout
 
+- Type: `RuntimeConfig | ProLayoutProps`
+
 修改[内置布局](../max/layout-menu)的配置，比如配置退出登陆、自定义导航暴露的渲染区域等。
 
 > 注意：需要开启 [layout](../api/config#layout) 插件，才能使用它的运行时配置。
 
-```js
-export const layout = {
+```tsx
+import { RuntimeConfig } from 'umi';
+
+export const layout: RuntimeConfig = {
   logout: () => {}, // do something
 };
 ```
 
 更多具体配置参考[插件文档](../max/layout-menu#运行时配置)。
 
-### onRouteChange(\{ routes, clientRoutes, location, action, basename, isFirst \})
+### onRouteChange
+
+- type: `(args: { routes: Routes; clientRoutes: Routes; location: Location; action: Action; basename: string; isFirst: boolean }) => void`
 
 在初始加载和路由切换时做一些事情。
 
@@ -134,7 +176,9 @@ export function onRouteChange({ clientRoutes, location }) {
 }
 ```
 
-### patchRoutes(\{ routes \})
+### patchRoutes
+
+- type: `(args: { routes: Routes; routeComponents }) => void`
 
 ```ts
 export function patchRoutes({ routes, routeComponents }) {
@@ -148,7 +192,9 @@ export function patchRoutes({ routes, routeComponents }) {
 
 注：如需动态更新路由，建议使用 `patchClientRoutes()` ，否则你可能需要同时修改 `routes` 和 `routeComponents`。
 
-### patchClientRoutes(\{ routes \})
+### patchClientRoutes
+
+- type: `(args: { routes: Routes; }) => void`
 
 修改被 react-router 渲染前的树状路由表，接收内容同 [useRoutes](https://reactrouter.com/en/main/hooks/use-routes)。
 
@@ -222,7 +268,9 @@ export function render(oldRender) {
 
 Umi 内置了 `qiankun` 插件来提供微前端的能力，具体参考[插件配置](../max/micro-frontend)。
 
-### render(oldRender: `Function`)
+### render
+
+- Type: `(oldRender: Function)=>void`
 
 覆写 render。
 
@@ -244,14 +292,16 @@ export function render(oldRender) {
 
 如果你使用了 `import { request } from 'umi';` 来请求数据，那么你可以通过该配置来自定义中间件、拦截器、错误处理适配等。具体参考 [request](../max/request) 插件配置。
 
-### rootContainer(lastRootContainer, args)
+### rootContainer
+
+- Type: `(container: JSX.Element,args: { routes: Routes; plugin; history: History }) => JSX.Element;`
 
 修改交给 react-dom 渲染时的根组件。
 
 比如用于在外面包一个 Provider，
 
 ```js
-export function rootContainer(container) {
+export function rootContainer(container, args) {
   return React.createElement(ThemeProvider, null, container);
 }
 ```

docs/docs/docs/guides/env-variables.md

@@ -64,10 +64,31 @@ BAR=bar
 CONCAT=$FOO$BAR # CONCAT=foobar
 ```
 
+通过 `.env.development` / `.env.production` 来为开发和构建分别配置不同的环境变量。
+
 注意：
 
 * 不建议将 `.env.local` 加入版本管理中。
 
+### 在浏览器中使用环境变量
+
+所有通过 `.env` 环境变量文件 或 命令行注入 的环境变量均默认只在 Umi 配置文件 (Node.js 环境) 内生效，在浏览器中无法直接通过 `process.env.VAR_NAME` 方式使用，通过进一步配置 [`define`](../api/config.md#define) 来注入到浏览器环境中：
+
+```bash
+# .env
+MY_TOKEN="xxxxx"
+```
+
+<br />
+
+```ts
+// .umirc.ts
+
+  define: { 'process.env.MY_TOKEN': process.env.MY_TOKEN }
+```
+
+注：我们约定所有以 `UMI_APP_` 开头的环境变量会默认注入到浏览器中，无需配置 `define` 手动注入。
+
 ## 环境变量列表
 
 按字母顺序排列。
@@ -177,6 +198,14 @@ $ UMI_PLUGINS=./path/to/plugin1,./path/to/plugin2  umi dev
 $ UMI_PRESETS=./path/to/preset1,./path/to/preset2  umi dev
 ```
 
+### UMI_DEV_SERVER_COMPRESS
+
+默认 Umi 开发服务器自带 [compress](https://github.com/expressjs/compression) 压缩中间件，这会使开发时 SSE 数据的传输 [无法流式获取](https://github.com/umijs/umi/issues/12144) ，通过指定 `UMI_DEV_SERVER_COMPRESS=none` 来关闭 compress 压缩功能：
+
+```bash
+  UMI_DEV_SERVER_COMPRESS=none umi dev
+```
+
 ### WEBPACK_FS_CACHE_DEBUG
 
 开启 webpack 的物理缓存 debug 日志。

docs/docs/docs/guides/lint.md

@@ -31,10 +31,12 @@ $ pnpm add @umijs/lint -D
 
 然后安装 ESLint 及 Stylelint：
 
+> 目前 `@umijs/lint` 使用的 `stylelint` 版本是 v14  
+
 ```bash
-$ npm i eslint stylelint -D
+$ npm i -D eslint "stylelint@^14"
 # or
-$ pnpm add eslint stylelint -D
+$ pnpm add -D eslint "stylelint@^14"
 ```
 
 ### 启用配置

docs/docs/docs/guides/mfsu.md

@@ -40,7 +40,7 @@ mfsu: {
 }
 ```
 
-和编译时分析的方式不同，扫描分析的方式会先读取项目中的所有源代码文件，然后通过静态分析的方式获取项目的依赖。这个过程非常的快，在一个有 17 万行代码，1400 多个文件项目中，分析一次只需要 700ms 左右。如此快速的分析的代价时，收集到的依赖会缺失后面项目代码编译插入的依赖；这部分的依赖最终和项目代码一起编译打包。
+和编译时分析的方式不同，扫描分析的方式会先读取项目中的所有源代码文件，然后通过静态分析的方式获取项目的依赖。这个过程非常的快，在一个有 17 万行代码，1400 多个文件项目中，分析一次只需要 700ms 左右。如此快速的分析的代价是：收集到的依赖会缺失后面项目代码编译插入的依赖；这部分的依赖最终和项目代码一起编译打包。
 
 分析完项目依赖之后，Umi 会拿着这份依赖信息，并行的去进行项目代码的编译和依赖的编译。
 

docs/docs/docs/guides/routes.md

@@ -191,6 +191,29 @@ const TheOldPage = ()=>{
 export default withAuth(TheOldPage)
 ```
 
+### layout
+
+* Type: `boolean`
+
+通过配置 `layout: false` 可以单独关闭某一个路由的全局布局：
+
+```js
+// .umirc.ts
+
+export default {
+  routes: [
+    // 取消 login 页面的全局布局，从而自行实现整个页面
+    { path: '/login', component: '@/pages/Login', layout: false },
+  ],
+}
+```
+
+注：
+
+1. 全局布局可能来自于 `layouts/index.tsx` 约定，或插件添加的 layout（如 `@umijs/max` 自带的 layout 插件将自动添加菜单布局），当配置 `layout: false` 时，将取消所有 layout ，此时组件内容占据整个页面，多用于登录页等场景。
+
+2. `layout: false` 仅对一级路由生效，更多例子详见 [全局 layout](#全局-layout) 。
+
 ## 约定式路由
 
 除配置式路由外，Umi 也支持约定式路由。约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。

docs/docs/docs/max/antd.md

@@ -139,7 +139,17 @@ export default {
 
 ### 运行时配置
 
-在 app.ts(x) 文件中可以对 antd 进行更丰富的配置，比如配置 antd5 的预设算法和 message 最大显示数：
+在 `app.ts(x)` 运行时配置中可以修改 antd `ConfigProvider` 的值，使用此功能前，**确保你已经打开了 `antd.configProvider` 选项**，否则对 `ConfigProvider` 的修改不会生效：
+
+```ts
+// .umirc.ts
+
+  antd: {
+    configProvider: {}
+  }
+```
+
+如配置 antd 5 的主题预设算法和 `message` 弹出框最大数：
 
 ```ts
 // app.ts

examples/libs/package.json

@@ -15,7 +15,7 @@
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",
     "swiper": "^8.4.5",
-    "swr": "2.0.4",
+    "swr": "^2.2.5",
     "umi": "workspace:*"
   }
 }

examples/with-no-compress-for-sse/.umirc.ts

@@ -0,0 +1 @@
+export default {};

examples/with-no-compress-for-sse/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@example/with-no-compress-for-sse",
+  "private": true,
+  "scripts": {
+    "build": "umi build",
+    "dev": "umi dev",
+    "dev:nocompress": "cross-env UMI_DEV_SERVER_COMPRESS=none npm run dev"
+  },
+  "dependencies": {
+    "umi": "workspace:*"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3"
+  }
+}

examples/with-no-compress-for-sse/pages/index.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+
+class Event {
+  data: string;
+  timeString: string;
+
+  constructor(data: string) {
+    this.data = data;
+    this.timeString = new Date().toLocaleTimeString();
+  }
+}
+
+export default function HomePage() {
+  const [events, setEvents] = useState<Event[]>([]);
+
+  useEffect(() => {
+    console.log('开始请求');
+    const eventSource = new EventSource('/events/number');
+    let startEvent = new Event('开始请求');
+    setEvents((prev) => [...prev, startEvent]);
+    eventSource.onmessage = function (e: any) {
+      let item = new Event(e.data);
+      setEvents((prev) => [...prev, item]);
+    };
+    eventSource.onerror = (e) => {
+      console.log('EventSource failed:', e);
+      eventSource.close();
+    };
+  }, []);
+
+  return (
+    <div>
+      <h3>{`演示：当默认存在 compress 时，数据无法流式获取。`}</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>事件内容</th>
+            <th>接收时间</th>
+          </tr>
+        </thead>
+        <tbody>
+          {events.map((event, index) => (
+            <tr key={index}>
+              <td>{event.data}</td>
+              <td>{event.timeString}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

examples/with-no-compress-for-sse/plugin.ts

@@ -0,0 +1,8 @@
+import { IApi } from 'umi';
+import { sseMiddleware } from './sse-middleware';
+
+export default (api: IApi) => {
+  api.onBeforeMiddleware(({ app }) => {
+    sseMiddleware(app);
+  });
+};

examples/with-no-compress-for-sse/readme.md

@@ -0,0 +1,9 @@
+# with-no-compress-for-sse
+
+### 背景
+
+[来源](https://github.com/umijs/umi/issues/12144)，在开发环境下由于 umi dev server 内置了 `compress` 中间件，导致 SSE 流在开发时传递不符合预期。
+
+### 解决
+
+本示例演示了此问题，并通过启动时附加 `UMI_DEV_SERVER_COMPRESS=none` 来关闭 `compress` 中间件，使 SSE 在本地开发时正常运作。

examples/with-no-compress-for-sse/sse-middleware.ts

@@ -0,0 +1,29 @@
+import type { Express } from '@umijs/bundler-utils/compiled/express';
+
+export const sseMiddleware = (app: Express) => {
+  app.get('/events/number', (req, res) => {
+    console.log('new connection');
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    });
+
+    let counter = 1;
+    const intervalId = setInterval(() => {
+      if (counter === 5) {
+        clearInterval(intervalId);
+        res.end(`data: 事件${counter}\n\n`);
+        return;
+      }
+      res.write(`data: 事件${counter}\n\n`);
+
+      counter++;
+    }, 1000);
+
+    req.on('close', () => {
+      clearInterval(intervalId);
+      res.end();
+    });
+  });
+};

lerna.json

@@ -1,4 +1,4 @@
 {
-  "version": "4.1.1",
+  "version": "4.1.4",
   "workspaces": ["packages/*"]
 }

packages/ast/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/ast",
-  "version": "4.1.1",
+  "version": "4.1.4",
   "description": "@umijs/ast",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/ast#readme",
   "bugs": "https://github.com/umijs/umi/issues",