chore: precompile translations to AST by ErikSin · Pull Request #1929 · digidem/comapeo-mobile

ErikSin · 2026-06-04T22:38:45Z

closes #1879
closes #539

Also Lazy load translations so they are not all initially loaded in memory. Uses useQuery to deal with the async nature of dynamically loading the translations.

I also had to update the tsconfig to "module": "esnext" as it was throwing an error with the dynamic imports

achou11

Functionality seems to work as intended, but think there's room to clean up the implementation.

I verified that dynamic imports are working by checking using expo atlas (see https://docs.expo.dev/guides/analyzing-bundles/).

I was trying to test changes to the system settings using an emulator but seems like useLocales() doesn't update when that occurs. Might be a dev-specific issue, as it doesn't work on dev branch either (but works with built APK). Would be good to build an apk and test that changing the language via phone settings has expected results in the app.

achou11 · 2026-06-16T16:27:34Z

Mind explaining why the changes here are necessary? It's not immediately clear to me... (aside from tests failing without the change)

jest doesn't support esm dynamic importing out of the box. So im just resolving the promise before hand in the jest environment (so it is no longer a dynamic import). We also dont need any other languages besides english in our jest tests, so i was only resolving english. But on reflection i'm just going to resolve all the languages in case we need them for future tests

achou11 · 2026-06-16T16:46:45Z

 import {StyleSheet, Text} from 'react-native';
 import {useLocales} from 'expo-localization';
+import {useQuery, keepPreviousData} from '@tanstack/react-query';
+import type {MessageFormatElement} from '@formatjs/icu-messageformat-parser';


Probably preferable to use the export from react-intl instead:

Suggested change

import type {MessageFormatElement} from '@formatjs/icu-messageformat-parser';

import type {MessageFormatElement} from 'react-intl';

achou11 · 2026-06-16T19:07:47Z

I would suggest updating this script to use the official formatjs tooling for compilation.

Implemented an example alternative script that maintains existing behavior but uses @formatjs/cli-lib: 86219bc

achou11 · 2026-06-16T19:09:29Z

 import path from 'node:path';
 import fs from 'node:fs';
 import {readFile, writeFile} from 'node:fs/promises';
+import {parse} from '@formatjs/icu-messageformat-parser';


see comment about updating this file as a whole. seeing usage of this module - which is pretty low-level and probably not meant for direct usage - raised some alarms for me.

achou11 · 2026-06-16T19:12:21Z

+  const {data: messagesToUse, isPending} = useQuery({
+    queryKey: ['messages', ...languages],
+    queryFn: async () => {
+      const results = await Promise.all(
+        // reversing languages mean the highest priority languages get merged last and overwites the lower priority languages
+        languages
+          .reverse()
+          .map(
+            tag =>
+              localeImports[tag]?.().then(m => m.default) ??
+              Promise.resolve({}),
+          ),
+      );
+      const merged: Record<string, MessageFormatElement[]> = {};
+      for (const msgs of results) {
+        Object.assign(merged, msgs);
+      }
+      return merged;
+    },
+    staleTime: Infinity,
+    // see: https://tanstack.com/query/latest/docs/react/guides/paginated-queries#better-paginated-queries-with-placeholderdata
+    placeholderData: keepPreviousData,
+  });


While this works, I think it'd be more idiomatic to use useQueries here. The main reasoning is to isolate each language with their own query to avoid unnecessary work when they change.

Implemented an example here: d7b1135 (note that it might need some adjustments...)

achou11 · 2026-06-16T19:17:02Z

 import languages from '../src/frontend/languages.json' with {type: 'json'};
-import messages from '../translations/messages.json' with {type: 'json'};
+
+const TRANSLATIONS_DIR = new URL('../translations/', import.meta.url).pathname;


Need to update this in order to be used on a non-posix OS.

Suggested change

const TRANSLATIONS_DIR = new URL('../translations/', import.meta.url).pathname;

const TRANSLATIONS_DIR = fileURLToPath(new URL('../translations/', import.meta.url));

awana-lockfile-bot · 2026-06-23T20:15:16Z

`package-lock.json` changes

Click to toggle table visibility

Name	Previous	Current
`@formatjs/cli-lib`	-	8.7.10
`@formatjs/cli-native-darwin-arm64`	-	1.1.5
`@formatjs/cli-native-linux-arm64-musl`	-	1.0.3
`@formatjs/cli-native-linux-arm64`	-	1.2.5
`@formatjs/cli-native-linux-x64-musl`	-	1.0.3
`@formatjs/cli-native-linux-x64`	-	1.1.5
`@formatjs/cli-native-win32-x64`	-	1.1.6
`@formatjs/ts-transformer`	-	4.4.13
`@types/fs-extra`	-	11.0.4
`@types/jsonfile`	-	6.1.4
`array-find-index`	-	1.0.2
`currently-unhandled`	-	0.4.1
`loud-rejection`	-	2.2.0

socket-security · 2026-06-23T20:15:55Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/@formatjs/cli-lib@8.7.10

View full report

achou11

Couple of non-blocking suggestions but otherwise changes look good

achou11 · 2026-06-24T18:09:46Z

+    if (
+      !Object.prototype.hasOwnProperty.call(
+        LANGUAGE_NAME_TRANSLATIONS,
+        languageCode,
+      )


Very subjective: this feels more readable at a glance and achieves the same thing:

Suggested change

if (

!Object.prototype.hasOwnProperty.call(

LANGUAGE_NAME_TRANSLATIONS,

languageCode,

)

if (!(languageCode in LANGUAGE_NAME_TRANSLATIONS)) {

achou11 · 2026-06-24T18:16:56Z

+ *
+ * @description The tanstack query option `placeholderData` is set to `keepPreviousData`. This means this query will only ever be `pending` on initial load
+ */
+export function useLanguageQueries(languageCodes: AvailableLanguageTag[]) {


defining a separate hook that just wraps a query hook seems unnecessary right now. especially since this only used in one place, I would recommend inlining it where it's used.

If you have a need for reusing it elsewhere, usually the recommended approach is to define a query options object and passing that into the relevant query hook in the calling component (see https://tkdodo.eu/blog/the-query-options-api).

chore: update build script

fbdb626

ErikSin changed the title ~~chore: update build script~~ chore: precompile translations to AST Jun 10, 2026

ErikSin added 5 commits June 10, 2026 11:02

Merge branch 'develop' into chore-precompile-to-ast

7527979

chore: lazy load languages

a22d5cb

chore: update query client

6304aec

chore: update tests

2ab4eb1

chore: update jest mocking of languages

aac75c5

ErikSin requested a review from achou11 June 10, 2026 22:22

achou11 requested changes Jun 16, 2026

View reviewed changes

ErikSin added 5 commits June 23, 2026 10:36

Merge branch 'develop' into chore-precompile-to-ast

f4948db

chore: update import for react intl

73838b5

chore: switch to useQueries

51c428e

chore: update build translations

3eac340

chore: non-posix os

b3b3191

ErikSin added 2 commits June 23, 2026 14:06

chore: update jest setup

ceb440a

chore: recreate query client every test so no leakage

51ca491

ErikSin requested a review from achou11 June 23, 2026 21:41

Merge branch 'develop' into chore-precompile-to-ast

4a93aa6

achou11 approved these changes Jun 24, 2026

View reviewed changes

ErikSin added 2 commits June 24, 2026 16:31

chore: more readable

fbce697

Merge branch 'develop' into chore-precompile-to-ast

473eaea

ErikSin merged commit fbb0ad9 into develop Jun 24, 2026
9 checks passed

ErikSin deleted the chore-precompile-to-ast branch June 24, 2026 23:37

	import type {MessageFormatElement} from '@formatjs/icu-messageformat-parser';
	import type {MessageFormatElement} from 'react-intl';

	const TRANSLATIONS_DIR = new URL('../translations/', import.meta.url).pathname;
	const TRANSLATIONS_DIR = fileURLToPath(new URL('../translations/', import.meta.url));

Uh oh!

Conversation

ErikSin commented Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

achou11 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ErikSin Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

achou11 Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

achou11 Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

awana-lockfile-bot Bot commented Jun 23, 2026

package-lock.json changes

Uh oh!

socket-security Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

achou11 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ErikSin commented Jun 4, 2026 •

edited

Loading

ErikSin Jun 23, 2026 •

edited

Loading

achou11 Jun 16, 2026 •

edited

Loading

achou11 Jun 16, 2026 •

edited

Loading

`package-lock.json` changes

socket-security Bot commented Jun 23, 2026 •

edited

Loading