Support for TypeScript .tsx files

[matzeeable]

Feature Request

• Yes, I reviewed the contribution guidelines.

Describe your use case and the problem you are facing

When using wp i18n make-pot within a source folder containing only .tsx TypeScript files, no gettext translations are extracted. Using the command on the compiled source files .js and .map files it works correctly - but slow.

Describe the solution you'd like

I have worked a long time on a real and complete boilerplate plugin https://github.com/matzeeable/wp-reactjs-starter. It also supports generation of .pot and .json files for frontend. But it is completely written in TypeScript for frontend. So, is there a way to extract the gettext functions from .tsx files?

Would it be enough to add those extensions to this call:

i18n-command/src/MakePotCommand.php

Lines 572 to 580 in af81433

	JsCodeExtractor::fromDirectory(
	$this->source,
	$translations,
	[
	'include' => $this->include,
	'exclude' => $this->exclude,
	'extensions' => [ 'js', 'jsx' ],
	]
	);

Reference: devowlio/wp-react-starter#18

[swissspidy]

Would it be enough to add those extensions to this call:

No, because we don't have a parser that supports TypeScript. We currently use Peast, which supports JavaScript and JSX only.

If we'd want to support TypeScript, we need to be able to parse it.

Perhaps you can ask the Peast developer whether it's on their roadmap?

[matzeeable]

Thanks for your fast response. Ok I will further look into this soon. On the other hand I think parsing TypeScript can be a very huge and time-intensive programming task. Perhaps there is a more simpler way doing this, e. g. transforming TSX to plain JS temporarely with the ts-loader within WebPack, i18n' it and then bundle it together. Close... :-)

[vanduc1102]

currently, I use the result of yarn build --> main.js ( without minimized ) to generate pot content,
so you have to run yarn build then wp i18n make-pot
it is working fine, only small issue that comments for messages are referring to main.js , for my project, it is acceptable.

[tyrann0us]

@swissspidy

Perhaps you can ask the Peast developer whether it's on their roadmap?

Done in mck89/peast#28 (comment).

[tyrann0us]

Hi @swissspidy, admittedly, I don’t know anything about language parsers and ASTs.
However, from a quick Google search it looks like https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/typescript-estree is a npm-based TypeScript parser. Could it be an option to use this library for TypeScript files? I know that using an npm library in a PHP could be problematic or even impossible, but maybe it’s an option.

Thanks!

BTW, I asked in the issue linked above if the package could act as a source for TS support in Peast. That would require much less work in WP-CLI of course.

[johnhooks]

My friend @erikyo has been working on a different solution, using tree-sitter to analyze the source files. This has the advantage of using a large well developed parser, which is intended to create a similar syntax tree for different programming languages. This has made it rather trivial to support JS, JSX, TS, TSX, and PHP in a single tree traversal function. I’m sure there is missing functionality compared to this project and the Gutenberg Babel plugin, though I think the power of using tree-sitter makes @wp-blocks/make-pot worth the investment in an alternative pot file generator.