Dynamic variable name with square brackets breaks extract command

[FelixMalfait]

We're in the process of implementing lingui on https://github.com/twentyhq/twenty. Really great experience so far, thank you!

I've encountered an issue when running the lingui extract command with dynamic variable names like here.
https://github.com/twentyhq/twenty/pull/9847/files/cf631f5abdf180b408b56c37c4f279c654d16c19#diff-dca629c9ae348f7bbcb4378298f48cb702f59e2a965c0956f2ea4d2f0ecb6301

It worked when I replaced them by their static value.

Is there a way to fix the parser to allow for these?

Thanks a lot!

[vonovak]

Hello, can you share what issue you have encountered specifically?

[FelixMalfait]

Hey sorry, I should have shared it earlier.

⠼ Cannot process file /Users/felixmalfait/Projects/twenty/packages/twenty-server/src/modules/company/standard-objects/company.workspace-entity.ts /Users/felixmalfait/Projects/twenty/packages/twenty-server/src/modules/company/standard-objects/company.workspace-entity.ts: Unexpected token (71:19)

  69 |     icon: 'IconBuildingSkyscraper',
  70 |   })
> 71 |   [NAME_FIELD_NAME]: string;
     |                    ^
  72 |
  73 |   @WorkspaceField({
  74 |     standardId: COMPANY_STANDARD_FIELD_IDS.domainName,
SyntaxError: /Users/felixmalfait/Projects/twenty/packages/twenty-server/src/modules/company/standard-objects/company.workspace-entity.ts: Unexpected token (71:19)

[timofei-iatsenko]

Most likely it's a syntax not supported by the babel version used in the extractor. Probably version bump for babel/* deps should resolve the issue.

I think what makes this syntax special is a combination of [] and decorator. Is it even a valid es syntax? For me this dynamic property access syntax belongs to the decorator itself not to the class, eq:

@myDecorator()['propertyOfDecorator']

[timofei-iatsenko]

Just checked babel repl, it seems that syntax was allowed in the 2023-11 version of decorators spec which was shipped somewhere in the 7.24.x babel version.

The lingui is defining constraint for the babel as ^7.21.0 it means it allows installing any newer version. So you should be able to install newer version without any issue (at least lingui wouldn't be the problem)

Update babel with yarn:

yarn up -r "@babel/*"

[timofei-iatsenko]

Checked your lock file, it seems you're using bebel/core@7.25.2 which should support this spec. Perhaps some additional changes to the babel parser options should be done on the lingui side. I'll investigate

[timofei-iatsenko]

@FelixMalfait try to drop the tsExperimentalDecorators: true, in here

https://github.com/twentyhq/twenty/pull/9847/files/cf631f5abdf180b408b56c37c4f279c654d16c19#diff-0ef6593f070d7367bc5653dd5e2c02dac12a85e1a76be50ec8c2bbaba1e80425R6

This option enables legacy decorators spec from typescript and disable new decorators from ecma. I check babel repl, this syntax is not supported when legacy decorators spec is used.

https://babeljs.io/repl#?browsers=last%202%20Chrome%20versions&build=&builtIns=false&corejs=3.21&spec=false&loose=false&code_lz=FAUwHgDg9gTgLgAgCYgGYEMCuAbRBjbdAZyIQDEooEBvYYBBAART1nTlgAoBKehAbQBGhALoIAvAgCMM4AF8gA&debug=false&forceAllTransforms=false&modules=false&shippedProposals=true&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Cstage-3&prettier=false&targets=&version=7.24.10&externalPlugins=&assumptions=%7B%7D

(you can play with decorators spec version on the left sidebar)

[FelixMalfait]

@timofei-iatsenko you're right I'm sorry, this does not seem to be directly linked to Lingui (not sure why it came up when running the lingui command and not in a previous build, I will investigate).

(We actually used SWC / same outcome)

https://play.swc.rs/?version=1.10.9&code=H4sIAAAAAAAAA12OPQvCQBBE%2B%2FsVg40RhGCbIPhdWtmJyBpXCebuwmYjBsl%2Fd1VsLHd482YvbSi0jAEbuvGKiyikUZIRng4Q1lYCLj8mOSrJlTUDhW6MYxGD8uN7jjLcY3n%2B9IA0xdrX2uH8U6L0dcWeg9LbZVSfu945czSK%2BWKJKYa1xJpFuy15HuauqKhpsGMD3lrKEFp%2FYjF0kjtLZn9fW7Q31SFDo1KGq4GDO1UtD2zrBUaLGVzrAAAA&config=H4sIAAAAAAAAA1WPSw7DIAwF9zkF8rrbdtE79BCIOhERP9mOVBTl7oUE0maH3xszsA5KwcwGnmotxzIkTYx0ziXhHER%2FSgKSE7IhmwRuvRWu1agd4x5tRwOiaUKpW8j3hoOLkbHjLfM22DH%2FC030iZD5ClZUh8nhVTc0Jfj4XvayfaQ%2B9tA%2F4Ad12XkxWH71TaEFh%2B0LYuVI0xQBAAA%3D

Apologies!

[andrii-bodnar]

Hi @FelixMalfait, congratulations on the successful integration of Lingui into Twenty! 🎉

Would you mind if we put Twenty's logo on the main page of the Lingui site?

[FelixMalfait]

@andrii-bodnar hey no of course feel free to add it now, we'd be proud to be part of that list!

The frontend implementation is fairly simple and can be a good example for people who want to see a real-life implementation.
The backend is very specific to our CRM model where each customer has its own metadata so probably less people can relate to this. I still need to improve a lot of stuff (for example the compiled files are still commited), I think we'll release the multilingual version publicly by end of Feb.

[FelixMalfait]

https://github.com/twentyhq/twenty?tab=readme-ov-file#stack feel free to do a PR to add a link to Lingui there along Translation.io also (Lingui and Translation.io for translation).

I can do a PR to add our logo our your website but not today, most likely tomorrow

[andrii-bodnar]

@FelixMalfait awesome, thank you! I will do both PRs :)