Migration 0.15.0

In order to upgrade to IMA.js 0.15.0, start ba adding these new dependencies to package.json:

"prop-types": "15.6.0",
"react": "16.2.0",
"react-dom": "16.2.0",
"express-http-proxy": "^1.0.7"

Build

If you are overriding polyfills or shims (for example using some custom polyfills) you need to change polyfills or shims structure in gulpConfig.js . Now it has to be structure for js, es and fetch polyfills. If you are't overriding polyfills or shims, you can skip this step.

Example:

shim: {
  js: {
    name: 'shim.js',
    src: ['./node_modules/ima/polyfill/collectionEnumeration.js'],
    dest: {
    client: './build/static/js/'
    }
  },
  es: {
    name: 'shim.es.js',
    src: [],
    dest: {
    client: './build/static/js/',
    server: './build/ima/'
    }
  }


polyfill: {
  js: {
    name: 'polyfill.js',
    src: [
    './node_modules/babel-polyfill/dist/polyfill.min.js',
    './node_modules/custom-event-polyfill/custom-event-polyfill.js'
    ],
    dest: {
    client: './build/static/js/'
    }
  },
  es: {
    name: 'polyfill.es.js',
    src: ['./node_modules/custom-event-polyfill/custom-event-polyfill.js'],
    dest: {
    client: './build/static/js/'
    }
  },
  fetch: {
    name: 'fetch-polyfill.js',
    src: [
    './node_modules/core-js/client/shim.min.js',
    './node_modules/whatwg-fetch/fetch.js'
    ],
    dest: {
    client: './build/static/js/'
    }
  },
  ima: {
    name: 'ima-polyfill.js',
    src: [
    './node_modules/ima/polyfill/imaLoader.js',
    './node_modules/ima/polyfill/imaRunner.js'
    ],
    dest: {
    client: './build/static/js/'
    }
  }
  }

In build.js add new property 'es' to bundle object:

es: [
  './build/static/js/polyfill.es.js',
  './build/static/js/shim.es.js',
  './build/static/js/vendor.client.es.js',
  './build/static/js/app.client.es.js'
]

Add to your settings.js prod.$Page.$Render new property esScripts like this:

esScripts: [
  '/static/js/locale/' + config.$Language + '.js' + versionStamp,
  '/static/js/app.bundle.es.min.js' + versionStamp
]

Add to your settings.js dev.$Page.$Render new property esScripts like this:

esScripts: [
  '/static/js/polyfill.es.js' + versionStamp,
  '/static/js/shim.es.js' + versionStamp,
  '/static/js/vendor.client.es.js' + versionStamp,
  `/static/js/locale/${config.$Language}.js${versionStamp}`,
  '/static/js/app.client.es.js' + versionStamp,
  '/static/js/hot.reload.js' + versionStamp
]

Karma removed instead of that added Jest

If you are overriding gulpfile.js you need to make following changes:

remove from gulpConfig.tasks.dev task test:unit:karma:dev
remove from gulpConfig.tasks.dev and gulpConfig.tasks.build task Es6ToEs5:vendor:client:test
remove from function buildExample task Es6ToEs5:vendor:client:test

If you are overriding gulpConfig.tasks.build in gulpConfig.js you need to add bundle:es:app into bundles section.

Server

In server.js

Add at the top into import sections:

require('ima/polyfill/imaLoader.js');
require('ima/polyfill/imaRunner.js');

add proxy into middlewares imports section

let proxy = require('express-http-proxy');

change line

.use(environment.$Proxy.path + '/', proxy)

.use(environment.$Proxy.path + '/', proxy(environment.$Proxy.server))

DocumentView

In DocumentView.jsx we united sync and async scripts.

remove getSyncScripts function.
update getAsyncScripts function to

getAsyncScripts() {
  let scriptResources = `<script>
  function checkAsyncAwait () {
    try {
      new Function('(async () => ({}))()');
      return true;
    } catch (e) {
      return false;
    }
  }
  $IMA.Runner = $IMA.Runner || {};
  if (Object.values && checkAsyncAwait()) {
    $IMA.Runner.scripts = [
      ${this.utils.$Settings.$Page.$Render.esScripts
  .map(script => `'${script}'`)
  .join()}
      ];
  } else {
    $IMA.Runner.scripts = [
      ${this.utils.$Settings.$Page.$Render.scripts
  .map(script => `'${script}'`)
  .join()}
      ];
  }

  if (!window.fetch) {
    $IMA.Runner.scripts.unshift('${this.utils.$Settings.$Static
  .js}/fetch-polyfill.js');
  }

  $IMA.Runner.scripts.forEach(function(source) {
    var script = document.createElement('script');
    script.async = $IMA.$Env !== 'dev';
    script.onload = $IMA.Runner.load;
    script.src = source;

    document.getElementById('scripts').appendChild(script);
  });
  </script>`;

  return scriptResources;
}

replace

{this.utils.$Settings.$Env === 'dev' ?
  <div id='scripts'>{this.getSyncScripts()}</div>
:
  <div id='scripts' dangerouslySetInnerHTML={
    { __html: this.getAsyncScripts() }
  }/>
}

with

<div id='scripts' dangerouslySetInnerHTML={
  { __html: this.getAsyncScripts() }
}/>

SPA

In app/assets/static/html/spa.html add ima-polyfill.

Removed namespaces

If you extends some view from ns.ima.page.AbstractComponent, you need to add this import:

import AbstractComponent from 'ima/page/AbstractComponent';

and use AbstractComponent instead of ns.ima.page.AbstractComponent.

If you extends some view from ns.ima.controller.AbstractController, you need to add this import:

import AbstractController from 'ima/controller/AbstractController';

and use AbstractController instead of ns.ima.controller.AbstractController.

In settings.js import your DocumentView like this:

import DocumentView from 'app/component/document/DocumentView';

Now you need to replace your documentView namespace with React component

so for this step replace your configuration.prod.$Page.$Render.documentView to DocumentView.

Others

IMA.js is now using React 16 where is no longer supported react-addons-perf package in case you were using it.
There was added a fetchOptions property to the IMA.js' http. You can add this property into your settings.js file to the $Http.defaultRequestOptions object. The property represents the second and optional parameter of the fetch method https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch - an options object containing settings that you want to apply to the Fetch API https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API request.
There is a breaking change in the IMA.js' router. Now there is defined an order where mandatory parameters have to be before optional parameters.
There are no longer available Request and Response at the client side.

Build​

Karma removed instead of that added Jest​

Server​

DocumentView​

SPA​

Removed namespaces​

Others​