-
Notifications
You must be signed in to change notification settings - Fork 10
Upgrading to 0.15.0
Add dependencies to package.json:
"prop-types": "15.6.0",
"react": "16.2.0",
"react-dom": "16.2.0",
"express-http-proxy": "^1.0.7"
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.
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)
to
.use(environment.$Proxy.path + '/', proxy(environment.$Proxy.server))
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() }}/>
In app/assets/static/html/spa.html add ima-polyfill.
- https://github.com/seznam/IMA.js-examples/blob/master/hello/assets/static/html/spa.html#L42
- https://github.com/seznam/IMA.js-examples/blob/master/hello/assets/static/html/spa.html#L47
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.
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.