tachybase_todo/docs/en-US/welcome/release/v10-changelog.md
jack zhang d76e8fb87f
refactor: upgrade umi, react and react-router-dom (#1921)
* refactor: update umi version 3.x to version 4.x

* refactor: update react-router-dom version to 6.x

* refactor(react-router-dom): change Layout Component `props.children` to `<Outlet />`

* refactor(react-router-dom): change <Route /> props and <RouteSwitch /> correct

* refactor(react-router-dom): replace `<Redirect />` to `<Navigate replace />`

* refactor(react-router-dom): replace `useHistory` to `useNavigate`

* refactor(react-router-dom): replace `useRouteMatch` to `useParams`

* refactor(react-router-dom & dumi): fix <RouteSwitch /> & umi document bug

* refactor(react-router-dom): `useRoutes` Optimize `<RouteSwitch />` code

* refactor(react-router-dom): update `Route` types and docs

* refactor(react-router-dom): optimize RouteSwitch code

* refactor(react-router-dom): `useLocation` no generics type

* refactor(react-router-dom): add `less v3.9.0` to `resolutions` to solve the error of `gulp-less`

* refactor(react-router-dom): fix `<RouteSwitch />`  `props.routes` as an array is not handled

* chore: upgrade `dumi` and refactor docs

* fix: completed code review, add `targets` to solve browser compatibility & removed `chainWebpack`

* refactor(dumi): upgraded dumi under `packages/core/client`

* refactor(dumi): delete `packages/core/dumi-theme-nocobase`

* refactor(dumi): degrade `react`  & replace `dumi-theme-antd` to `dumi-theme-nocobase`

* refactor(dumi): solve conflicts between multiple dumi applications

* fix: login page error in react 17

* refactor(dumi): remove less resolutions

* refactor(dumi): umi add `msfu: true` config

* fix: merge bug

* fix: self code review

* fix: code reivew and test bug

* refactor: upgrade react to 18

* refactor: degrade react types to 17

* chore: fix ci error

* fix: support routerBase & fix workflow page params

* fix(doc): menu externel link

* fix: build error

* fix: delete

* fix: vitest error

* fix: react-router new code replace

* fix: vitest markdown error

* fix: title is none when refresh

* fix: merge error

* fix: sidebar width is wrong

* fix: useProps error

* fix: side-menu-width

* fix: menu selectId is wrong & useProps is string

* fix: menu selected first default & side menu hide when change

* fix: test error & v0.10 change log

* fix: new compnent doc modify

* fix: set umi `fastRefresh=false`

* refactor: application v2

* fix: improve code

* fix: bug

* fix: page = 0 error

* fix: workflow navigate error

* feat: plugin manager

* fix: afterAdd

* feat: update docs

* feat: update docs

* fix: page tab change not work

* fix: login redirect query param doesn't work

* fix: bug and doc

* feat: update docs

* fix: ci error

* fix: merge main

* feat: update docs

* feat: update docs

* feat: update docs

* chore(versions): 😊 publish v0.10.0-alpha.1

* fix: translations

* chore: backend node test max old space size

* docs: add useSearchParams

---------

Co-authored-by: chenos <chenlinxh@gmail.com>
Co-authored-by: ChengLei Shao <chareice@live.com>
2023-06-20 11:48:02 +08:00

5.9 KiB

v0.10: Update instructions

New features in the second quarter

  • Association field component improvements, support for multiple component switching
    • Select
    • Record picker
    • Sub-form/Sub-details
    • Sub-table
    • File manager
    • Title(read only)
  • Quick creation of relational data, supports two quick creation modes
    • Add in drop-down menu to quickly create a new record based on the title field
    • Add in pop-up window to configure complex add forms
  • Duplicate action, supports two modes
    • Direct duplicate
    • Copy into the form and continue to fill in
  • Form data templates
  • Filter data scope support variables
  • List block
  • Grid card block
  • Mobile client plugin
  • User authentication plugin, support for different authentication methods
    • Email/Password
    • SMS
    • OIDC
    • SAML
  • Workflow nodes
    • Manual node upgrade, support for adding and editing from existing collections
    • Loop node
    • Aggregate node
  • File manager
    • Provide file collection template
    • Provide file manager component

Upgrading applications

Upgrading for Docker compose

No change, upgrade reference Upgrading for Docker compose

Upgrading for Git source code

v0.10 has a major upgrade of dependencies, so to prevent errors when upgrading the source code, you need to delete the following directories before upgrading

### Remove .umi-related cache
yarn rimraf -rf "./**/{.umi,.umi-production}"
# Delete compiled files
yarn rimraf -rf "./packages/*/*/{lib,esm,es,dist,node_modules}"
# Remove dependencies
yarn rimraf -rf node_modules

See Upgrading for Git source code for more details

Upgrading for create-nocobase-app

It is recommended that yarn create re-download the new version and modify the .env configuration, for more details refer to major version upgrade guide

Upcoming deprecated and potentially incompatible changes

Sub-table field component

Not compatible with new version, block fields need to be removed and reassigned (UI reassignment only)

Attachment upload api changes

In addition to the built-in attachments table, users can also custom file collection, the upload api for attachments has been changed from /api/attachments:upload to /api/<file-collection>:create, upload is deprecated, still compatible with v0.10 but will be Removed.

signin/signup api changes

The nocobase kernel provides a more powerful auth module with the following changes to the user login, registration, verification, and logout apis:

/api/users:signin -> /api/auth:signIn
/api/users:signup -> /api/auth:signUp
/api/users:signout -> /api/auth:signOut
/api/users:check -> /api/auth:check

Note: The above users interface, which is deprecated, is still compatible with v0.10, but will be removed in the next major release.

Adjustments to date field filtering

If date related filtering was previously configured in the data range, it needs to be deleted and reconfigured.

Third-party plugin upgrade guide

Dependencies upgrade

dependencies mainly including

  • react upgrade to v18
  • react-dom upgrade to v18
  • react-router upgrade to v6.11
  • umi upgrade to v4
  • dumi upgrade to v2

The package.json dependencies should be changed to the latest version, e.g:

{
  "devDependencies": {
+   "react": "^18".
+   "react-dom": "^18".
+   "react-router-dom": "^6.11.2".
-   "react": "^17".
-   "react-dom": "^17".
-   "react-router-dom": "^5".
  }
}

Code changes

Because react-router has been upgraded, the related code also needs to be changed, the main changes include

Layout Component

Layout component needs to use <Outlet /> instead of props.children.

import React from 'react';
+ import { Outlet } from 'react-router-dom';

export default function Layout(props) {
  return (
    <div>
-      { props.children }
+      <Outlet />
    </div>
  );
}

if you use React.cloneElement to render the route component, you need to change it like this:

import React from 'react';
+ import { Outlet } from 'react-router-dom';

export default function RouteComponent(props) {
  return (
    <div>
-      { React.cloneElement(props.children, { someProp: 'p1' }) }
+      <Outlet context={{ someProp: 'p1' }} />
    </div>
  );
}

Change the route component to get the value from useOutletContext

import React from 'react';
+ import { useOutletContext } from 'react-router-dom';

- export function Comp(props){
+ export function Comp() {
+   const props = useOutletContext();
  return props.someProp;
}

Redirect

<Redirect> is changed to <Navigate replace />.

- <Redirect to="about" />
+ <Navigate to="about" replace />

useHistory

useNavigate is changed to useHistory.

- import { useHistory } from 'react-router-dom';
+ import { useNavigate} from 'react-router-dom';

- const history = useHistory();
+ const navigate = useNavigate();

- history.push('/about')
+ navigate('/about')

- history.replace('/about')
+ navigate('/about', { replace: true })

useLocation

useLocation<type>() is changed to useLocation.

- const location= useLocation<type>();
+ const location= useLocation();

const { query } = useLocation() is changed to useSearchParams()

- const location = useLocation();
- const query = location.query;
- const name = query.name;
+ const [searchParams, setSearchParams] = useSearchParams();
+ searchParams.get('name');

path

All of the following are valid route paths in v6:

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

The following RegExp-style route paths are not valid in v6:

/tweets/:id(\d+)
/files/*/cat.jpg
/files-*

For more api changes, please refer to react-router@6