Make sure all your code is either wrapped in IIFEs, or bundled with Webpack. As Webpack bundles multiple modules in one file by wrapping each module in a function, these two things are equivalent. Just don't have any code outside of either a function or a Webpack-processed module.
Have 100% of your code use the strict mode (“use strict”).
Don’t add any polyfills that attach themselves globally. Global polyfills have to be added to the page by core modules, not by plugins. For list of polyfills that are currently included in MediaCentral | UX,
- Don’t use babel-polyfill in your plugins. Use Babel as a code transpiler, but avoid including the core-js-based polyfill that comes with it.
Global polyfills in MCUX/NUX
As UI plugins should not be modifying any global variables outside of their
any globally-installed polyfills should be added only by the core UI team (Jedi Pirates). Here is a list of
Since MCUX 2.8:
Promise URLSearchParams fetch Object.assign String.prototype.startsWith String.prototype.endsWith String.prototype.includes
Since MCUX 2.10:
Object.values Object.entries Array.prototype.includes
Can I use...?
Thanks to the fact that MediaCentral's browser support is very limited, quite a lot of features are already available to its plugins natively, with no polyfills needed. Our lowest-supported browser at the moment of writing this (2.8) is the QtWebKit component that’s being built into desktop applications like ProTools and MediaComposer. To check if a certain browser feature is available natively, you can test your code in the QtWeb 3.8.5 browser (www.qtweb.net). QtWeb 3.8.5 has the same version of Qt (4.8) as the desktop apps that we need to support. So if a feature works in QtWeb 3.8.5, then go ahead and use it.
Adding CSS and image resources to static plugins
The recommended way to include CSS and image resources in your static plugins is to add them as files (so that they are
accessible by an URL like
/plugins/com.avid.SomeName/css/style.css), and then import them into the page using an API
function call like this one:
window.AV.modules.importStylesheets('com.avid.central.AssetLocationsUI', [ 'css/asset-list-view.css', 'css/locations.css' ]);
Within the CSS file, simply use a relative path to your images. If you need to programmatically get a path to your
/plugins/ folder path:
// this call will return '/plugins/com.avid.SomeName/images/icon.svg' window.AV.modules.resolvePluginPath('com.avid.SomeName', 'images/icon.svg');
Paths that start with a dot and slash (like
./css/style.css) are also acceptable.
In future, we plan to introduce a possibility to call these API functions without the need to access
window.AV global variable.
Avoid using ExtJS wherever possible
Remove all usages of ExtJS utility functions that are listed at the
Don't use ExtJS-based classes (
Ext.extend, etc) for things that are not going to be thrown away when ExtJS gets
removed from your project. Use ES6 classes instead.