## 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)