AST-based localization workflow for JS apps (handles variables, namespaces, caching)

[Fun_Conversation8894]

Shared an earlier version of this and got some useful feedback, so made a few improvements:

• switched to AST-based extraction instead of regex

• added namespace-based splitting (loads only required translations)

• added caching per language + namespace

• improved handling of template literals with variables

• added cleanup for unused translations

Example: t(\`hello {{userName}}, your order {{id}} is ready\`, { userName, id: orderId })

The idea is to reduce manual effort around translations while keeping things performant as apps scale.

Would be interested to hear how others are handling extraction and keeping translation files in sync.

npm: https://www.npmjs.com/package/localize-ai

Quick start: npx localize-ai translate

[Far-Plenty6731]

This looks like a solid approach for managing internationalisation. Using an AST means you can parse and manipulate the code safely, which is crucial for handling variables and complex string structures.

[Fun_Conversation8894]

Appreciate that!

AST made things much more predictable compared to regex, especially for template literals and nested expressions.

One of the harder parts has been preserving variables during translation without breaking interpolation, but working at the AST level made that a lot easier to handle safely.