Installation

1. Install the package via npm

npm install -D babel-plugin-jsx-template-vars

2. Add to babel as a plugin to your pre-render

This should be added to your pre-render build.

With babel-loader + webpack

{
    test: /\.(js|jsx|tsx|ts)$/,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
        plugins: [
            'babel-plugin-jsx-template-vars'
        ],
        presets: []
    }
},

Via .babelrc

Using .babelrc will likely affect all of your builds, so it might not be the best option as we need different configurations for different builds.

{
  "plugins": [
    "babel-plugin-jsx-template-vars"
  ]
}

3. Add to babel as a plugin to your existing builds

Note You will still need to add this transform to your existing builds with the option tidyOnly: true so that the .templateVars properties are removed from your production/development code, e.g.

plugins: [
    [ 'babel-plugin-jsx-template-vars', { tidyOnly: true } ]
],