Migration guide 2.0 - ElrondNetwork/dapp-core Wiki

Migrating from dapp-core 1.x to dapp-core 2.x

Dapp-code 2.0 underwent a lot of changes to its build process, how the files are being bundled together and how they are exported.

This was the result of a great effort to dramatically reduce the library's size and footprint in an app (3x lighter, from 1MB to ~300KB), remove the style pollution caused by bootstrap and radically improve the build time.

Version 2.0 comes with the following changes:

Complete removal of bootstrap from the library

This means no more style pollution, having to match the bootstrap version and variable override.

Code splitting out of the box

We have removed the single point of entry that would load all the library's code, even if you were using a single utility function. Now you can import only what you use, no more dead code in your app's bundle.

New bundling engine

We replaced rollup and dts-cli with esbuild, a new, blazingly fast bundler that reduced the bundling time a lot and allows splitting the code into chunks and automatic treeshaking.

However, these radical changes, by their very nature, require that the apps have to consume dapp-core in slightly a different manner from now on. One of the biggest improvements in both the footprint of dapp-core and the experience of working with it (no more browser-specific code for using only the functions that are agnostic) was the splitting of a single bundle into multiple bundles that work as isolated modules.

This requires that all imports from dapp-core have to be changed to import from specific folders, instead of the default index.js.

If, until now, you could do

import {DappUI, DappProvider, useGetAccountInfo, denominate} from '@elrondnetwork/dapp-core'

Now you have to import these from their specific folders:

import {
  SignTransactionsModals
} from '@elrondnetwork/dapp-core/dist/UI'

import { DappProvider } from '@elrondnetwork/dapp-core/wrappers'
import { useGetAccountInfo } from '@elrondnetwork/dapp-core/hooks'
import { denominate } from '@elrondnetwork/dapp-core/utils'

We're working on removing the dist from the imports, so these could be cleaner. This style of imports allows us to apply a tree-shaking strategy and reduces the bundle size of your app dramatically, as you're no longer importing dead code.

A full list of exports can be found in the README