Using additional babel plugins in polymer build

[Scott Smith]

We'd like to be able to add custom functionality to polymer build and polymer serve by configuring custom babel plugins.

For example, since polymer-cli uses babel internally, we would add a babel.config.js file to our workspace/project-root, e.g.:

module.exports = function (api) {

  api.cache(true);


  const presets = [ ];
  const plugins = [
 "@babel/plugin-proposal-optional-chaining"
 ];


  return {
    presets,
    plugins
  };
}

...and then we could serve or build our project with support for optional-chaining, etc This would allow us to do all sorts of things by writing additional babel plugins to handle stuff like minification inside template HTML strings...

Unfortunately, this doesn't currently work. polymer-build seems to load the configuration (due to its use of babel/core?), but polymer-analyze doesn't. An error is generated in the build-optimization step performed by polymer-analyze as soon as it encounters optional-chaining syntax in our source:

error: Error: Unable to get document file:///.../somefile.js: This experimental syntax requires enabling the parser plugin: 'optionalChaining' (423:6)
    at BuildAnalyzer.<anonymous> (/usr/local/share/.config/yarn/global/node_modules/polymer-build/lib/analyzer.js:342:23)
    at Generator.next (<anonymous>)
    at fulfilled (/usr/local/share/.config/yarn/global/node_modules/polymer-build/lib/analyzer.js:17:58)
    at process._tickCallback (internal/process/next_tick.js:68:7)

polymer serve also generates an error:

Error { SyntaxError: This experimental syntax requires enabling the parser plugin: 'optionalChaining' (423:6)
    at Parser.raise (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:776:15)
    at Parser.expectPlugin (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:2084:18)
    at Parser.parseSubscript (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:2792:12)
    at Parser.parseSubscripts (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:2777:19)
    at Parser.parseExprSubscripts (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:2767:17)
    at Parser.parseMaybeUnary (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:2736:21)
    at Parser.parseExprOps (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:2643:21)
    at Parser.parseMaybeConditional (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:2615:21)
    at Parser.parseMaybeAssign (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:2562:21)
    at Parser.parseExpression (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:2515:21)
  pos: 13056,
  loc: Position { line: 423, column: 6 },
  missingPlugin: [ 'optionalChaining' ] }

In both cases, I've confirmed that the babel.config.js file is being loaded. But babel is used in several different packages used by polymer-cli, so my suspicion is that in some components aren't using the part of babel that loads the configuration.

I had a look at polymer-cli, but I'm fairly new to TypeScript and NodeJS. If there's any interest in this, I'd be willing to work on it if I can get some initial help from someone involved with the project. Specifically, confirmation that the approach is correct and identification of any other known limitations that may become issues?

Cheers.