## Introduce
The frontend of `CabloyJS v2` is based on `Framework7 v4`. Because `Framework7 v5` provides more features, but the interface specifications of some components have been adjusted. In order to embrace `Framework7 v5`, we launched `CabloyJS v3`
## Migration Guide
### 1. Modify `package.json`
`{project}/package.json`
``` javascript
"dependencies": {
"cabloy": "^3.0.0-beta.4",
"egg-born-module-a-cms": "^3.0.1",
"egg-born-module-a-wechat": "^3.0.1",
...
}
```
* Set `cabloy` to the newest version `^3.0.0-beta.4`
* Set the modules of `egg-born-module-***` to the newset version `^3.0.1`
### 2. Modify `@ptr:refresh`
`ptr:refresh` event now contains `done` method as first argument. For example:
``` javascript
...
...
onRefresh(done) {
done();
this.reload();
}
```
### 3. eb-navbar/f7-navbar
`eb-navbar/f7-navbar` adds the new props of `large largeTransparent`,which is recommended to use. For example:
``` javascript
```
### 4. Modify module's `build` directory
#### 4.1 `{project}/src/module/{module-name}/build/front/utils.js`
``` javascript
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap,
esModule: false,
},
};
```
* Add `esModule: false`
#### 4.2 `{project}/src/module/{module-name}/build/front/webpack.base.conf.js`
``` javascript
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'file-loader',
options: {
limit: 1000,
name: utils.assetsPath('img/[name].[contenthash].[ext]'),
esModule: false,
},
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'file-loader',
options: {
limit: 1000,
name: utils.assetsPath('fonts/[name].[contenthash].[ext]'),
esModule: false,
},
},
],
},
```
* Change `url-loader` to `file-loader`
* Change `[hash]` to `[contenthash]`
* Add `esModule: false`
## References
For more information on the new features and migration guide for `Framework7 v5`, please see also:
* [Migration to Framework7 v5](https://blog.framework7.io/migration-to-framework7-v5-1374257bb5a7)