Add type safety to shared libraries localization

.gitignore

@@ -15,3 +15,9 @@ Localize/out/
 /packages/service/resources/i18n/*
 web/dev-server/resources/i18n/*
 desktop/resources/i18n/*
+/packages/common/src/ui-common/generated/*
+/packages/playground/src/ui-playground/generated/*
+/packages/react/src/ui-react/generated/*
+/packages/service/src/ui-service/generated/*
+/web/src/explorer-web/generated/*
+/desktop/src/generated/*

desktop/package.json

@@ -22,7 +22,7 @@
     "ts": "ts-node --project tsconfig.node.json --files",
     "ts:fast": "npm run ts -T",
     "start": "npm run electron:prod",
-    "clean": "rimraf build/* dll/* python/dist/* python/build/*",
+    "clean": "rimraf build/* dll/* python/dist/* python/build/* src/generated/*",
     "karma": "node --max_old_space_size=4096 node_modules/karma/bin/karma",
     "test": "npm run test-client:coverage && npm run test-app",
     "test-app": "cross-env COVERAGE=1 npm run karma -- start",
@@ -44,7 +44,7 @@
     "build-i18n": "npm run ts scripts/i18n/generate.ts",
     "build-i18n-xliff": "npm run ts scripts/i18n/create-xliff.ts",
     "build-i18n-digest": "npm run ts scripts/i18n/digest-xliff.ts",
-    "build": "npm run clean && npm run build-client && npm run build-app && npm run build-i18n && npm run build-translations",
+    "build": "npm run clean && npm run build-translations && npm run build-client && npm run build-app && npm run build-i18n",
     "build:clean": "npm run build",
     "build:package": "npm run build:prod && npm run build-python && npm run package",
     "build:prod": "cross-env NODE_ENV=production npm run build",

desktop/src/types.ts

@@ -0,0 +1,16 @@
+import "@batch/ui-common";
+import { GeneratedResourceStrings as ServiceResourceStrings } from "@batch/ui-service/lib/generated/localization/resources";
+import { GeneratedResourceStrings as ReactResourceStrings } from "@batch/ui-react/lib/generated/localization/resources";
+import { GeneratedResourceStrings as PlaygroundResourceStrings } from "@batch/ui-playground/lib/generated/localization/resources";
+import { GeneratedResourceStrings } from "./generated/localization/resources";
+
+// This code augments the LocalizedStrings interface in the common module
+// with strings the service, react, playground, and desktop modules use.
+declare module "@batch/ui-common" {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface LocalizedStrings
+        extends ServiceResourceStrings,
+            ReactResourceStrings,
+            PlaygroundResourceStrings,
+            GeneratedResourceStrings {}
+}

packages/common/package.json

@@ -14,8 +14,8 @@
   "types": "./lib/index.d.ts",
   "test": "jest",
   "scripts": {
-    "build": "npm run compile && npm run build-translations",
-    "build:clean": "run-s clean compile",
+    "build": "npm run build-translations && npm run compile",
+    "build:clean": "run-s clean build-translations compile",
     "build:test": "run-s build test",
     "build-translations": "bux build-translations --src src/ui-common --dest i18n --outputPath resources/i18n/json --packageName lib.common",
     "compile": "run-p compile:*",
@@ -25,6 +25,7 @@
     "clean:build": "bux rmrf ./build",
     "clean:esm": "bux rmrf ./lib",
     "clean:cjs": "bux rmrf ./lib-cjs",
+    "clean:generated": "bux rmrf ./src/ui-common/generated",
     "test": "jest",
     "test:coverage": "jest --collect-coverage",
     "test:all": "npm run test:coverage",

packages/common/src/ui-common/__tests__/localization.spec.ts

@@ -1,5 +1,6 @@
 import { initMockEnvironment } from "../environment";
 import { translate } from "../localization/localization-util";
+import { LocalizedStrings } from "../localization/localized-strings";
 
 describe("Localization utilities", () => {
     beforeEach(() => {
@@ -13,8 +14,8 @@ describe("Localization utilities", () => {
     });
 
     test("Throw error if string is unknown", () => {
-        expect(() => translate("Invalid")).toThrowError(
-            "Unable to translate string Invalid"
-        );
+        expect(() =>
+            translate("Invalid" as unknown as keyof LocalizedStrings)
+        ).toThrowError("Unable to translate string Invalid");
     });
 });

packages/common/src/ui-common/index.ts

@@ -48,4 +48,4 @@ export { uniqueElementId } from "./dom";
 export { autoFormat } from "./format";
 export { createForm } from "./form";
 export { copyToClipboard } from "./clipboard";
-export { translate } from "./localization";
+export { translate, LocalizedStrings } from "./localization";

packages/common/src/ui-common/localization/index.ts

@@ -1,3 +1,4 @@
 export * from "./localization-util";
 export * from "./localizer";
 export * from "./http-localizer";
+export * from "./localized-strings";

packages/common/src/ui-common/localization/localization-util.ts

@@ -1,8 +1,13 @@
 import { getEnvironment } from "../environment";
+import { LocalizedStrings } from "./localized-strings";
 import { Localizer } from "./localizer";
 
-export function translate(message: string): string {
-    return getLocalizer().translate(message);
+export function translate(
+    message: Extract<keyof LocalizedStrings, string>
+): string {
+    return getLocalizer().translate(
+        message as unknown as keyof LocalizedStrings
+    );
 }
 
 export function getLocalizer(): Localizer {

packages/common/src/ui-common/localization/localized-strings.ts

@@ -0,0 +1,6 @@
+import { GeneratedResourceStrings } from "../generated/localization/resources";
+
+// This is the base interface in the common module for all localized strings.
+// Other packages can augment this type using a module declaration.
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface LocalizedStrings extends GeneratedResourceStrings {}

packages/playground/package.json

@@ -14,8 +14,8 @@
   "types": "./lib/index.d.ts",
   "test": "jest",
   "scripts": {
-    "build": "npm run compile && npm run build-translations",
-    "build:clean": "run-s clean compile",
+    "build": "npm run build-translations && npm run compile",
+    "build:clean": "run-s clean build-translations compile",
     "build:test": "run-s build test",
     "bux": "bux",
     "build-translations": "bux build-translations --src src/ui-playground --dest i18n --outputPath resources/i18n/json --packageName lib.playground",
@@ -26,6 +26,7 @@
     "clean:build": "bux rmrf ./build",
     "clean:esm": "bux rmrf ./lib",
     "clean:cjs": "bux rmrf ./lib-cjs",
+    "clean:generated": "bux rmrf ./src/ui-playground/generated",
     "test": "jest",
     "test:coverage": "jest --collect-coverage",
     "test:all": "cross-env BE_ENABLE_A11Y_TESTING=true npm run test:coverage",

packages/playground/src/ui-playground/types.ts

@@ -0,0 +1,14 @@
+import "@batch/ui-common";
+import { GeneratedResourceStrings as ServiceResourceStrings } from "@batch/ui-service/lib/generated/localization/resources";
+import { GeneratedResourceStrings as ReactResourceStrings } from "@batch/ui-react/lib/generated/localization/resources";
+import { GeneratedResourceStrings } from "./generated/localization/resources";
+
+// This code augments the LocalizedStrings interface in the common
+// module with strings the service, react, and playground modules use.
+declare module "@batch/ui-common" {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface LocalizedStrings
+        extends ServiceResourceStrings,
+            ReactResourceStrings,
+            GeneratedResourceStrings {}
+}

packages/react/package.json

@@ -14,8 +14,8 @@
   "types": "./lib/index.d.ts",
   "test": "jest",
   "scripts": {
-    "build": "npm run compile && npm run build-translations",
-    "build:clean": "run-s clean compile",
+    "build": "npm run build-translations && npm run compile",
+    "build:clean": "run-s clean build-translations compile",
     "build:test": "run-s build test",
     "bux": "bux",
     "build-translations": "bux build-translations --src src/ui-react --dest i18n --outputPath resources/i18n/json --packageName lib.react",
@@ -26,6 +26,7 @@
     "clean:build": "bux rmrf ./build",
     "clean:esm": "bux rmrf ./lib",
     "clean:cjs": "bux rmrf ./lib-cjs",
+    "clean:generated": "bux rmrf ./src/ui-react/generated",
     "test": "jest",
     "test:coverage": "jest --collect-coverage",
     "test:all": "cross-env BE_ENABLE_A11Y_TESTING=true npm run test:coverage",

packages/react/src/ui-react/types.ts

@@ -0,0 +1,12 @@
+import "@batch/ui-common";
+import { GeneratedResourceStrings as ServiceResourceStrings } from "@batch/ui-service/lib/generated/localization/resources";
+import { GeneratedResourceStrings } from "./generated/localization/resources";
+
+// This code augments the LocalizedStrings interface in the
+// common module with strings the service and react modules use.
+declare module "@batch/ui-common" {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface LocalizedStrings
+        extends ServiceResourceStrings,
+            GeneratedResourceStrings {}
+}

packages/service/package.json

@@ -14,8 +14,8 @@
   "types": "./lib/index.d.ts",
   "test": "jest",
   "scripts": {
-    "build": "npm run compile && npm run build-translations",
-    "build:clean": "run-s clean compile",
+    "build": "npm run build-translations && npm run compile",
+    "build:clean": "run-s clean build-translations compile",
     "build:test": "run-s build test",
     "build-translations": "bux build-translations --src src/ui-service --dest i18n --outputPath resources/i18n/json --packageName lib.service",
     "compile": "run-p compile:*",
@@ -25,6 +25,7 @@
     "clean:build": "bux rmrf ./build",
     "clean:esm": "bux rmrf ./lib",
     "clean:cjs": "bux rmrf ./lib-cjs",
+    "clean:generated": "bux rmrf ./src/ui-service/generated",
     "test": "jest",
     "test:coverage": "jest --collect-coverage",
     "test:all": "npm run test:coverage",

packages/service/src/ui-service/types.ts

@@ -0,0 +1,9 @@
+import "@batch/ui-common";
+import { GeneratedResourceStrings } from "./generated/localization/resources";
+
+// This code augments the LocalizedStrings interface in
+// the common module with strings the service module uses.
+declare module "@batch/ui-common" {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface LocalizedStrings extends GeneratedResourceStrings {}
+}

util/bux/translation-functions.ts

@@ -132,6 +132,20 @@ export async function mergeAllTranslations(outputPath: string) {
     console.log(`Merged translations have been saved in ${outputPath}`);
 }
 
+// Helper function that generates the TypeScript interface from the JSON content
+function generateTypeScriptInterface(
+    cleanedContent: Record<string, unknown>
+): string {
+    let tsContent = "export interface GeneratedResourceStrings {\n";
+
+    for (const key in cleanedContent) {
+        tsContent += `    "${key}": string;\n`;
+    }
+
+    tsContent += "}\n";
+    return tsContent;
+}
+
 // Function to generate English file for a package from its YAML files
 export async function createEnglishTranslations(
     sourcePath: string,
@@ -184,6 +198,21 @@ export async function createEnglishTranslations(
     console.log(
         `Saved stripped english translations to JSON file ${resourcesJsonPath}`
     );
+
+    // Generate and save the TypeScript interface
+    const tsContent = generateTypeScriptInterface(cleanContent);
+    const resourcesTsPath = path.join(
+        sourcePath,
+        "generated/localization/resources.ts"
+    );
+
+    if (!fs.existsSync(path.dirname(resourcesTsPath))) {
+        fs.mkdirSync(path.dirname(resourcesTsPath), { recursive: true });
+    }
+
+    fs.writeFileSync(resourcesTsPath, tsContent);
+
+    console.log(`Saved generated TypeScript interface to ${resourcesTsPath}`);
 }
 
 //load-dev-translations.ts

web/package.json

@@ -30,6 +30,7 @@
     "clean:build": "bux rmrf ./build",
     "clean:esm": "bux rmrf ./lib",
     "clean:umd": "bux rmrf ./lib-umd",
+    "clean:generated": "bux rmrf ./src/explorer-web/generated",
     "test": "jest",
     "test:coverage": "jest --collect-coverage",
     "test:all": "cross-env BE_ENABLE_A11Y_TESTING=true npm run test:coverage",

web/src/explorer-web/types.ts

@@ -0,0 +1,16 @@
+import "@batch/ui-common";
+import { GeneratedResourceStrings as ServiceResourceStrings } from "@batch/ui-service/lib/generated/localization/resources";
+import { GeneratedResourceStrings as ReactResourceStrings } from "@batch/ui-react/lib/generated/localization/resources";
+import { GeneratedResourceStrings as PlaygroundResourceStrings } from "@batch/ui-playground/lib/generated/localization/resources";
+import { GeneratedResourceStrings } from "./generated/localization/resources";
+
+// This code augments the LocalizedStrings interface in the common
+// module with strings the service, react, playground, and web modules use.
+declare module "@batch/ui-common" {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface LocalizedStrings
+        extends ServiceResourceStrings,
+            ReactResourceStrings,
+            PlaygroundResourceStrings,
+            GeneratedResourceStrings {}
+}