Odoo web client default framework is based on a combination of jQuery and BackboneJS. Now, jQuery is old but it is not necessary worse. Technologies serve its purpose as long as it works and meet requirements. However, there is cases when non-product requirements need to be considered such as when your development team is heavily invested on, say ReactJs, and productivity can be greatly improved when the familiar toolset is available. Needless to say, productivity means cost saving. Thus, this post quickly looks into necessary steps to integrate Babel transpiler with Odoo’s asset bundling.
The first step is to let QWeb module knows that it should use our custom asset bundler clas. The below code inherit QWeb model to create
AssetBundleJsx instead of the default class.
class IrQweb(models.AbstractModel): """ Add ``raise_on_code`` option for qweb. When this option is activated then all directives are prohibited. """ _inherit = 'ir.qweb' def _get_asset_bundle(self, bundle_name, files, env=None, css=True, js=True): return assetsbundle.AssetsBundleJsx(bundle_name, files, env=env, css=css, js=js)
AssetsBundleJsx is our custom class that looks for jsx assets and pre-process them with Babel before bundling. Since there is no readily available Python binding for Babel, we will make do with a subprocess call to babel command.
# install babel command line npm install -g @babel/core @babel/cli @babel/preset-react
The snippet below for