Skip to content

chore: recommend using '@umijs/max' instead of 'umi' for better TS su… #12999

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

chore: recommend using '@umijs/max' instead of 'umi' for better TS su… #12999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/docs/docs/max/access.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ We provide a hook for obtaining permission-related information in components, as

```js
import React from 'react';
import { useAccess } from 'umi';
import { useAccess } from '@umijs/max';

const PageA = (props) => {
const { foo } = props;
Expand Down Expand Up @@ -128,7 +128,7 @@ A complete example is as follows:

```js
import React from 'react';
import { useAccess, Access } from 'umi';
import { useAccess, Access } from '@umijs/max';

const PageA = (props) => {
const { foo } = props;
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/docs/max/access.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const layout: RunTimeLayoutConfig = () => {

```js
import React from 'react';
import { useAccess } from 'umi';
import { useAccess } from '@umijs/max';

const PageA = (props) => {
const { foo } = props;
Expand Down Expand Up @@ -126,7 +126,7 @@ export default PageA;

```js
import React from 'react';
import { useAccess, Access } from 'umi';
import { useAccess, Access } from '@umijs/max';

const PageA = (props) => {
const { foo } = props;
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/docs/max/antd.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ For example, to configure antd 5's theme preset algorithm and the maximum number

```ts
// app.ts
import { RuntimeAntdConfig } from 'umi';
import { RuntimeAntdConfig } from '@umijs/max';
import { theme } from 'antd';

export const antd: RuntimeAntdConfig = (memo) => {
Expand Down Expand Up @@ -183,7 +183,7 @@ Note: This feature depends on `ConfigProvider`, please also enable `configProvid

```tsx
import { Layout, Space, Button, version, theme, MappingAlgorithm } from 'antd';
import { useAntdConfig, useAntdConfigSetter } from 'umi';
import { useAntdConfig, useAntdConfigSetter } from ''@umijs/max'';
const { darkAlgorithm, defaultAlgorithm } = theme;

export default function Page() {
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/docs/max/antd.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ export default {

```ts
// app.ts
import { RuntimeAntdConfig } from 'umi';
import { RuntimeAntdConfig } from ''@umijs/max'';
import { theme } from 'antd';

export const antd: RuntimeAntdConfig = (memo) => {
Expand Down Expand Up @@ -181,7 +181,7 @@ export const antd: RuntimeAntdConfig = (memo) => {

```tsx
import { Layout, Space, Button, version, theme, MappingAlgorithm } from 'antd';
import { useAntdConfig, useAntdConfigSetter } from 'umi';
import { useAntdConfig, useAntdConfigSetter } from ''@umijs/max'';
const { darkAlgorithm, defaultAlgorithm } = theme;

export default function Page() {
Expand Down
8 changes: 4 additions & 4 deletions docs/docs/docs/max/data-flow.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ Now, you want to use a global Model in a certain component. Taking the user info

```tsx
// src/components/Username/index.tsx
import { useModel } from 'umi';
import { useModel } from '@umijs/max';

export default function Page() {
const { user, loading } = useModel('userModel');
Expand All @@ -167,7 +167,7 @@ The `useModel()` method can accept an optional second parameter. When a componen

```tsx
// src/components/CounterActions/index.tsx
import { useModel } from 'umi';
import { useModel } from '@umijs/max';

export default function Page() {
const { add, minus } = useModel('counterModel', (model) => ({
Expand Down Expand Up @@ -209,7 +209,7 @@ export async function getInitialState() {
Now, various plugins and your defined components can directly access this global initial state through `useModel('@@initialState')` as shown below:

```tsx
import { useModel } from 'umi';
import { useModel } from '@umijs/max';

export default function Page() {
const { initialState, loading, error, refresh, setInitialState } =
Expand Down Expand Up @@ -245,7 +245,7 @@ For specific usage, please refer to the [micro-frontend's parent-child communica

```tsx
// src/components/AdminInfo/index.tsx
import { useModel } from 'umi';
import { useModel } from '@umijs/max';

export default () => {
const { user, fetchUser } = useModel('adminModel', (model) => ({
Expand Down
8 changes: 4 additions & 4 deletions docs/docs/docs/max/data-flow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export default function Page() {

```tsx
// src/components/Username/index.tsx
import { useModel } from 'umi';
import { useModel } from '@umijs/max';

export default function Page() {
const { user, loading } = useModel('userModel');
Expand All @@ -166,7 +166,7 @@ export default function Page() {

```tsx
// src/components/CounterActions/index.tsx
import { useModel } from 'umi';
import { useModel } from '@umijs/max';

export default function Page() {
const { add, minus } = useModel('counterModel', (model) => ({
Expand Down Expand Up @@ -208,7 +208,7 @@ export async function getInitialState() {
现在，各种插件和您定义的组件都可以通过 `useModel('@@initialState')` 直接获取到这份全局的初始状态，如下所示：

```tsx
import { useModel } from 'umi';
import { useModel } from '@umijs/max';

export default function Page() {
const { initialState, loading, error, refresh, setInitialState } =
Expand Down Expand Up @@ -244,7 +244,7 @@ export default function Page() {

```tsx
// src/components/AdminInfo/index.tsx
import { useModel } from 'umi';
import { useModel } from '@umijs/max';

export default function Page() {
const { user, fetchUser } = useModel('adminModel', (model) => ({
Expand Down
6 changes: 3 additions & 3 deletions docs/docs/docs/max/dva.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ Component example is as follows:

```javascript
import React, { Component } from 'react';
import { connect } from 'umi';
import { connect } from ''@umijs/max'';

@connect(({ user }) => ({
user,
Expand All @@ -98,7 +98,7 @@ The connect method also adds `dispatch` to `this.props`, and you can call it to

```javascript
import React, { Component } from 'react';
import { connect } from 'umi';
import { connect } from ''@umijs/max'';

@connect(({ user }) => ({
user,
Expand Down Expand Up @@ -148,7 +148,7 @@ A model can define the following parts:

```jsx
import React, { Component } from 'react';
import { connect } from 'umi';
import { connect } from ''@umijs/max'';

const mapModelToProps = allModels => {
return {
Expand Down
6 changes: 3 additions & 3 deletions docs/docs/docs/max/dva.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export default {

```javascript
import React, { Component } from 'react';
import { connect } from 'umi';
import { connect } from ''@umijs/max'';

@connect(({ user }) => ({
user,
Expand All @@ -96,7 +96,7 @@ connect 方法同时也会添加 `dispatch` 到 `this.props` 上，你可以在

```javascript
import React, { Component } from 'react';
import { connect } from 'umi';
import { connect } from ''@umijs/max'';

@connect(({ user }) => ({
user,
Expand Down Expand Up @@ -146,7 +146,7 @@ dispatch 一个 action 之后会按照 action 中的 type 找到定义在 model

```jsx
import React, { Component } from 'react';
import { connect } from 'umi';
import { connect } from ''@umijs/max'';

const mapModelToProps = allModels => {
return {
Expand Down
28 changes: 14 additions & 14 deletions docs/docs/docs/max/i18n.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ You can also use `.json` files to store multilingual content:
Everything is ready, now you can use multilingual content in Umi. Leave it to our `<FormattedMessage />` component, just pass in the previous `welcome` as the value of the parameter `id`:

```tsx
import { FormattedMessage } from 'umi';
import { FormattedMessage } from ''@umijs/max'';

export default function Page() {
return (
Expand All @@ -98,7 +98,7 @@ In some cases, you need to pass multilingual content as a parameter to a certain

```tsx
import { Alert } from 'antd';
import { useIntl } from 'umi';
import { useIntl } from ''@umijs/max'';

export default function Page() {
const intl = useIntl();
Expand Down Expand Up @@ -139,7 +139,7 @@ export default {
Above, we wrote special syntax `{name}`, which allows us to dynamically assign values at runtime:

```tsx
import { FormattedMessage } from 'umi';
import { FormattedMessage } from ''@umijs/max'';

export default function Page() {
return (
Expand All @@ -153,7 +153,7 @@ export default function Page() {
If you wish to achieve this through the `intl` object, you can do so by assigning it like this:

```tsx
import { useIntl } from 'umi';
import { useIntl } from ''@umijs/max'';

export default function Page() {
const intl = useIntl();
Expand Down Expand Up @@ -187,7 +187,7 @@ The rendered result is as follows:
The preset `<SelectLang />` component can help you quickly add the feature of switching languages to your project, just write it like this:

```tsx
import { SelectLang } from 'umi';
import { SelectLang } from ''@umijs/max'';

export default function Page() {
return <SelectLang />;
Expand All @@ -197,7 +197,7 @@ export default function Page() {
In many cases, you may need to write your own language-switching component. This is where the `setLocale()` interface comes in handy:

```ts
import { setLocale } from 'umi';
import { setLocale } from ''@umijs/max'';

// Refresh the page when switching
setLocale('en-US');
Expand Down Expand Up @@ -246,7 +246,7 @@ With the following component:

```tsx
import { Button } from 'antd';
import { FormattedMessage } from 'umi';
import { FormattedMessage } from ''@umijs/max'';

export default function Page() {
return (
Expand All @@ -271,7 +271,7 @@ Especially, if you need to give a default value without completing international

```tsx
import { Button } from 'antd';
import { FormattedMessage } from 'umi';
import { FormattedMessage } from ''@umijs/max'';

export default function Page() {
return (
Expand All @@ -286,7 +286,7 @@ When using the `formatMessage()` method, you can do the same:

```tsx
import { Button } from 'antd';
import { useIntl } from 'umi';
import { useIntl } from ''@umijs/max'';

export default function Page() {
const intl = useIntl();
Expand Down Expand Up @@ -316,7 +316,7 @@ Without creating and writing separate multilingual files, you can dynamically ad
For example, if you want to dynamically introduce Traditional Chinese multilingual support, you can write code as follows:

```ts
import { addLocale } from 'umi';
import { addLocale } from ''@umijs/max'';
import zhTW from 'antd/es/locale/zh_TW';

addLocale(
Expand All @@ -336,7 +336,7 @@ addLocale(
You can get an array of all current multilingual options through the `getAllLocales()` interface, including multilingual options added through the `addLocale()` method. This interface defaults to looking for files in the `src/locales` directory that are like `zh-CN.(js|json|ts)` and returns the Key of the multilingual.

```ts
import { getAllLocales } from 'umi';
import { getAllLocales } from ''@umijs/max'';

getAllLocales();
// [en-US, zh-CN, ...]
Expand All @@ -347,7 +347,7 @@ getAllLocales();
You can get the currently selected language through the `getLocale()` interface:

```ts
import { getLocale } from 'umi';
import { getLocale } from ''@umijs/max'';

getLocale();
// zh-CN
Expand All @@ -365,7 +365,7 @@ getLocale();
```

```ts
import { useIntl } from 'umi';
import { useIntl } from ''@umijs/max'';

const intl = useIntl();
const msg = intl.formatMessage(
Expand All @@ -392,7 +392,7 @@ You can dynamically set the current language using the `setLocale()` interface t
| `realReload` | `Boolean` | Whether to refresh the page when switching, default is `true` to refresh |

```ts
import { setLocale } from 'umi';
import { setLocale } from ''@umijs/max'';

// Refresh the page when switching
setLocale('en-US');
Expand Down
Loading