eWizard.js documentation

Appearance

eWizard.js v5.1.0 ​

February 2021

Builders improvements ​

Font preload in OCE MPA builders ​

Optimized the speed of the First Meaningful Paint for a slide in OCE CLM:

  • Implemented preload of the fonts used on the slide.

  • Added links for all the fonts used on the slide.

    html
    <head>
  <link rel="preload" href="assets/common/media/fonts/arial.woff" as="font">
</head>

  • No more 'loading` fonts while the slide is displaying. That caused the text blinking. Now slides load faster and without blinking.

Reduced size of the OCE MPA build ​

Added the --no-common option to the OCE MPA build.

sh
oce-mpa --no-common

Use this option to reduce the size of the resulting build archive:

  • Limit the resources referenced in each slide to the resources required for that slide.

  • Reduce the build size of e-Detailers that contain media resources.

We plan to make this option active by default in the upcoming release.

Improvements in OCE single-sequence builds ​

Added the following improvements in the build.

  • Created a webpack plugin for deleting redundant CSS code:

    • Reduced the size of the resulting CSS files.

    • Increased the speed of the First Meaningful Paint for a slide.

  • Added support for uppercase in the names of the media files.

  • Added the webpack bundle analyzer option.

Configuration improvements ​

Configurable paths to blocks and components ​

Now, you can use the path field to specify the path to your blocks and components in the block.json and components.json files.

json
// common/blocks-library/blocks.json
{
  "components": [
    {
      "id": "wiz-header-1a",
      "name": "Header with social icons",
      "model": {},
      "path": "node_modules/@blocks/wiz-header-1a",
      "metadata": []
    },
     {
       "id": "wiz-header-1a",
       "name": "Header",
       "model": {},
       "path": "node_modules/master-template/common/blocks-library/wiz-header-1a",
       "metadata": []
    },
  ]
}
json
// common/components/components.json
{
  "components": [
    {
      "id": "wiz-text",
      "name": {
      "eng": "Text"
      },
      "model": {},
      "path": "node_modules/wiz-text"
    },
  ],
}

If you don't specify the path field value, eWizard.js uses the default path from .ewizard/settings.json.

json
{
  "path": {
    "blocks": "node_modules/@blocks",
  },
}

If you specify the path to your block or component in the block.json and components.json files, you don't have to specify the path to the icon in the icon field in .ewizard/settings.json.

The icon file must be in the root directory of the block or component and have the following formats: PNG, JPG, or JPEG.