Run Babel transpiler on React with Odoo's asset bundling
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
AssetsBundleBabel instead of the default class.
class QWeb(models.AbstractModel): """ QWeb object for rendering stuff in the website context """ _inherit = 'ir.qweb' def get_asset_bundle(self, xmlid, files, remains=None, env=None): return AssetsBundleBabel(xmlid, files, remains=remains, env=env)
AssetsBundleBabel 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-cli npm install -g babel-preset-react
The snippet below for
After the above steps, you can use jsx with your Odoo asset bundle. The complete code example can be found here. Having a Babel bundler ready, we can move on to create a React based Odoo module, which is detailed in this post. One thing to note though, this method is working for bundled asset only. In asset debug mode,