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

  "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:

...
<eb-page ptr @ptr:refresh="onRefresh"></eb-page>
...
    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:

<eb-page>
  <eb-navbar large largeTransparent ...></eb-navbar>
</eb-page>

4. Modify module’s build directory

4.1 {project}/src/module/{module-name}/build/front/utils.js

  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

  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: