Support decorator syntax when parsing with babel

[43081j]

Related to #9, we need to expose babel options so the user can specify language features they want to turn on/off.

@ai is there a recommended way to pass options to a custom syntax?

maybe we just attempt to read a .babelrc file in the working directory...

temporarily, we could add:

['decorators', {decoratorsBeforeExport: false}]

to support whats currently in the decorators spec

[ai]

syntax: creator(options)?

But I think JSON config parsers will not support it.

[abdonrd]

We have this error here:

https://github.com/IBM/pwa-lit-template/compare/stylelint-14

SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): 'decorators-legacy, decorators' (26:0)

[43081j]

@abdonrd i think the fix for now is to just enable whats in the decorators proposal by default

i'll get a patch version published today, then we can figure out what to do about options in the other issue

edit:

actually, even though the current proposal says decorators come after exports, it seems typescript uses before, so ill leave it as that for now until we can pass options

[43081j]

Fixed in #15

[43081j]

Published in 0.1.2

@abdonrd would be good if you could give it another try. i think you'll bump into #14 though

[abdonrd]

@43081j thanks! It works in the CLI, but not in the VSCode extension:

Updated: https://github.com/IBM/pwa-lit-template/compare/stylelint-14

[abdonrd]

By the way, the auto fix in the CLI also works:

[iSokrat]

@43081j What's about decorators which are used in usual JS, not TS? For now, plugin reports an error for decorators which follows the latest proposal

[43081j]

i haven't had chance to look yet but i imagine we might have to somehow expose the babel options. its unlikely we can tell babel to support both decorator specs at once, so we'd have to expose the option somehow while both exist

[iSokrat]

@43081j Yep, I agree. Actually, now I'm trying to find a way how to integrate the package and it fails on the files where decorators are used. Will it be maybe possible to somehow use babel config which is used on the whole project-level (and nested configs if exist) somehow? I saw that we are using now hardcoded values, however, for example, in my app all of them are not suitable (typescript, decoratorsBeforeExport option for decorator and jsx, although, most of them are not really disturb me for now except decorators).

export const parse: Parser<Root | Document> = (
  source: string | {toString(): string},
  opts?: Pick<ProcessOptions, 'map' | 'from'>
): Root | Document => {
  const doc = new Document();
  const sourceAsString = source.toString();
  const ast = babelParse(sourceAsString, {
    sourceType: 'unambiguous',
    plugins: [
      'typescript',
      ['decorators', {decoratorsBeforeExport: true}],
      'jsx'
    ],
    ranges: true
  });

// ....

[43081j]

yep i think we should have an option to inherit the babelrc or at least have a way to pass babel options in.

if you could make an issue for that, that'd be appreciated. if not though, i will when im not mobile 👍

[iSokrat]

@43081j Created an issue https://github.com/43081j/postcss-lit/issues/44