[hermes-babel] Comments are not found in const nodes when producing AST tree

[Brianzchen]

Bug Description

Take the following code

/**
 * I am a comment
 */
const Box = () => {
  return (
    <div />
  );
}

export default Box;

When I parse the code using this babel config

const config = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: { browsers: ['last 2 versions', 'safari >= 7'] },
      },
    ],
    '@babel/preset-react',
    '@babel/preset-flow',
  ],
  plugins: [
    'babel-plugin-syntax-hermes-parser',
    '@babel/plugin-transform-modules-commonjs',
  ],
};

if (process.env.NODE_ENV === 'production') {
  const ignoreGlob = [
    '*/**/*.test.js',
  ];

  if (process.env.MODE !== 'website') {
    ignoreGlob.push('*/**/*.story.js');
    ignoreGlob.push('*/**/stories/*');
  }

  config.presets[0][1].modules = false;
  config.ignore = config.ignore
    ? config.ignore.concat(ignoreGlob)
    : ignoreGlob;
}

module.exports = config;

It produces a node looking like the following with babel-plugin-syntax-hermes-parser @ 0.15.0

{
  type: 'VariableDeclaration',
  loc: {
    source: null,
    start: { line: 4, column: 0 },
    end: { line: 8, column: 1 }
  },
  kind: 'const',
  declarations: [
    {
      type: 'VariableDeclarator',
      loc: [Object],
      init: [Object],
      id: [Object],
      start: 32,
      end: 75
    }
  ],
  start: 26,
  end: 75
}

But if I remove the hermes plugin meaning it uses standard babel I get

Node {
  type: 'VariableDeclaration',
  start: 26,
  end: 75,
  loc: SourceLocation {
    start: Position { line: 4, column: 0, index: 26 },
    end: Position { line: 8, column: 1, index: 75 },
    filename: undefined,
    identifierName: undefined
  },
  declarations: [
    Node {
      type: 'VariableDeclarator',
      start: 32,
      end: 75,
      loc: [SourceLocation],
      id: [Node],
      init: [Node]
    }
  ],
  kind: 'const',
  leadingComments: [
    {
      type: 'CommentBlock',
      value: '*\n * I am a comment\n ',
      start: 0,
      end: 25,
      loc: [SourceLocation]
    }
  ]
}

There are some minor differences, but main one I need is leadingComments (could also be trailingComments) that's missing so the tool I'm using react-docgen doesn't work.

Comments are available in the root of the program but given it worked with babel would be nice to have it with hermes :(

Hermes version: 0.15.0 React Native version (if any): N/A OS version (if any): Windows WSL Platform (most likely one of arm64-v8a, armeabi-v7a, x86, x86_64): x86_64

Steps To Reproduce

Clone this repo and run the test to see the output: https://github.com/Brianzchen/hermes-no-comments

The Expected Behavior

Described above should be sufficient.

[pieterv]

Hermes parser does not support comment attachment. In general its a bad idea to rely on comments during your build process since people typically expect them to not change runtime behavior. That said we do pass through the comments in the comments array on the File node. The comment has a location position on it so you can associate a comment with your node if you really need to.

that's missing so the tool I'm using react-docgen doesn't work.

This is an interesting case, bit annoying it doesn't work but hermes-parser wasn't really designed for adapting to general purpose babel infra. That said with the latest changes i'm working on i might be able to make an option to do comment attachment via prettier (we already have this setup for hermes-transform package). The attachment will be a bit different from babel but will work as expected for the vast majority of cases. Not sure if/when ill get to this but ill leave this task open to track this.

[Brianzchen]

Thanks Pieter, I would be amazing if the output better matched the expectation of babel parser but I can understand a strive towards best practice. Seems CommentBlocks on the program and variable declaration are the same struct so I'll try write a handler to cater to my react-docgen use case.

But if you do manage to make a fix please let me know :)

[pascalduez]

I hate bumping issues but this and https://github.com/facebook/hermes/issues/1320 are preventing us to fully switch to the Hermes parser, somehow blocking us at a certain Flow version, unable to use recent syntax additions such as type guards, conditional types etc.

Naively, isn't there really a way to tell the Hermes to "keep comments"? @pieterv Or maybe do some sort of mapping in the Babel plugin.

For the Webpack chunks issue I tried any solutions I could for two days, but none is satisfactory. There's no real alternative to Webpack "magic comments' I'm aware of.