Skip to main content

Migrate from Atoti UI 5.0 to 5.1

Like the migration from Atoti UI 4 to 5, migrating from 5.0 to 5.1 includes two parts:

  • content migration
  • code migration

Content migration​

This handles migrating all the content saved using older versions of Atoti UI. This content is saved on the Content Server, and includes dashboards, widgets, filters, etc.

We provide a command-line interface to migrate it: atoti-ui-migration.

You will find all the necessary instructions in its README.

Code migration​

The minimum version of Node.js required to use @activeviam/activeui-scripts, @activeviam/content-server-initialization, and the other @activeviam/* packages running on Node.js has been bumped to 18.12.1. Upgrade your Node.js version if you have an older one.

Peer dependencies​

The following peer dependency versions are required:

  • react: ^18.0.0. Just bumping the version in your package.json should be enough.
  • antd: ^5.1.0. Follow the instructions in the link, and in particular make sure that you change the import syntax as follows:
- import Button from "antd/lib/button";
+ import { Button } from "antd";

@activeviam/activeui-sdk breaking changes​

Please refer to the "Removed" and "Changed" sections of the changelog.

ESM only​

@activeviam-scoped packages are ESM only now, as it is the official standard format to package JavaScript code. No CJS version is exposed anymore.

This should be seamless to build and run Atoti with extensions.

However, note that if you are using the Jest library for testing, you might encounter errors while running your tests. If you do, consider adapting your configuration as described in the Jest docs.

Here is an example jest.config.js file:

const extensions = ["js", "jsx", "ts", "tsx", "mjs", "json"];

const esmPackages = [
  "@activeviam/*",
  "lodash-es",
  "react-dnd",
  "dnd-core",
  "@react-dnd",
  "monaco-editor",
];

module.exports = {
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.[jt]sx?$": [
      "@swc/jest",
      {
        jsc: {
          transform: {
            react: {
              runtime: "automatic",
            },
          },
        },
      },
    ],
  },
  transformIgnorePatterns: [
    // Transpiling ESM packages to CJS because Jest doesn't support ESM fully yet.
    // See https://jestjs.io/docs/en/ecmascript-modules.
    `[/\\\\]node_modules[/\\\\](/docs/?!${esmPackages.join(
      "|",
    /)}).+\\.(${extensions.join("|")})$`,
  ],
};

Note that this transpilation relies on @swc/jest, that you can install with:

npm add -D @swc/core @swc/jest

Unrelated to the transpilation, but also note that testEnvironment: "jsdom" is used to run tests in a browser-like environment. To use it, you need to install jest-environment-jsdom:

npm add -D jest-environment-jsdom

Miscellaneous​

The @activeviam/activeui-sdk-scripts package is not published anymore. It was always meant for internal use only, but if you happen to use it, here is how you can replace it:

  • activeui-sdk-scripts build => tsc --build (the TypeScript compiler) if you are using TypeScript. You can remove the script otherwise.
  • activeui-sdk-scripts start => tsc --watch if you are using TypeScript. You can remove the script otherwise.
  • activeui-sdk-scripts test => jest (the Jest CLI). Refer to the section above if you need to adapt the Jest config.
  • activeui-sdk-scripts lint => prettier (the Prettier CLI) and eslint (the ESLint CLI).