Support localisation messages with parameters (#1294)

.changeset/tidy-flowers-talk.md

@@ -0,0 +1,6 @@
+---
+'@keystatic/core': patch
+'@keystar/ui': patch
+---
+
+Updates to localisation build tooling

.eslintignore

@@ -54,4 +54,10 @@ coverage
 .contentlayer
 
 **/*.json
-**/*.md
+**/*.md
+
+l10n.js
+l10n.d.ts
+packages/keystatic/src/app/l10n/index.js
+packages/keystatic/src/app/l10n/index.d.ts
+

.gitignore

@@ -58,3 +58,8 @@ coverage
 
 # VSCode settings
 .vscode/settings.json
+
+l10n.js
+l10n.d.ts
+packages/keystatic/src/app/l10n/index.js
+packages/keystatic/src/app/l10n/index.d.ts

.prettierignore

@@ -58,3 +58,8 @@ coverage
 
 pnpm-lock.yaml
 packages/keystatic/src/form/fields/document/DocumentEditor/prism.js
+
+l10n.js
+l10n.d.ts
+packages/keystatic/src/app/l10n/index.js
+packages/keystatic/src/app/l10n/index.d.ts

design-system/pkg/build-l10n.mts

@@ -0,0 +1,41 @@
+import path from 'node:path';
+import fs from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import { compileString } from '@internationalized/string-compiler';
+
+const src = path.resolve(fileURLToPath(import.meta.url), '../src');
+
+for (const file of await fs.readdir(src)) {
+  const filePath = path.resolve(src, file, 'l10n.json');
+  let l10nFileContents;
+  try {
+    l10nFileContents = await fs.readFile(filePath, 'utf-8');
+  } catch (err) {
+    if ((err as any).code === 'ENOENT' || (err as any).code === 'ENOTDIR') {
+      continue;
+    }
+    throw err;
+  }
+  const l10n: Record<string, Record<string, string>> = JSON.parse(
+    l10nFileContents
+  );
+  let out = 'const localizedMessages = {\n';
+  for (const [lang, translations] of Object.entries(l10n)) {
+    out += `  ${JSON.stringify(lang)}: {\n`;
+    for (const [key, value] of Object.entries(translations)) {
+      out += `    ${JSON.stringify(key)}: ${compileString(value)},\n`;
+    }
+    out += '  },\n';
+  }
+  out += '};\n';
+  out += 'export default localizedMessages;\n';
+  const withoutExtension = filePath.replace(/\.json$/, '');
+  await fs.writeFile(withoutExtension + '.js', out);
+  await fs.writeFile(
+    withoutExtension + '.d.ts',
+    `declare const localizedMessages: Record<string, Record<string, import('@internationalized/string').LocalizedString>>;
+export default localizedMessages;
+`
+  );
+  console.log(`Wrote ${withoutExtension}`);
+}

design-system/pkg/package.json

@@ -1473,6 +1473,7 @@
     "@emotion/css": "^11.9.0",
     "@floating-ui/react": "^0.24.0",
     "@internationalized/date": "^3.5.5",
+    "@internationalized/string": "^3.2.3",
     "@react-aria/actiongroup": "^3.7.8",
     "@react-aria/breadcrumbs": "^3.5.16",
     "@react-aria/button": "^3.9.8",
@@ -1555,6 +1556,7 @@
     "facepaint": "^1.2.1"
   },
   "devDependencies": {
+    "@internationalized/string-compiler": "^3.2.4",
     "@jest/globals": "^29.7.0",
     "@keystar/ui": "workspace:^",
     "@keystar/ui-storybook": "workspace:^",

design-system/pkg/src/action-bar/ActionBar.tsx

@@ -27,7 +27,7 @@ import {
 import { Text } from '@keystar/ui/typography';
 import { useProviderProps } from '@keystar/ui/core';
 
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 import { ActionBarProps } from './types';
 import { actionbarClassList } from './class-list';
 

design-system/pkg/src/button/Button.tsx

@@ -11,7 +11,7 @@ import { FocusRing } from '@keystar/ui/style';
 import { Text } from '@keystar/ui/typography';
 import { isReactText } from '@keystar/ui/utils';
 
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 import {
   ButtonElementProps,
   ButtonProps,

design-system/pkg/src/combobox/Combobox.tsx

@@ -42,7 +42,7 @@ import {
 import { Text } from '@keystar/ui/typography';
 
 import { comboboxClassList } from './class-list';
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 import { MobileCombobox } from './MobileCombobox';
 import { ComboboxProps } from './types';
 

design-system/pkg/src/combobox/MobileCombobox.tsx

@@ -45,7 +45,7 @@ import {
 import { TextFieldPrimitive } from '@keystar/ui/text-field';
 import { Text } from '@keystar/ui/typography';
 
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 import { ComboboxProps } from './types';
 import { comboboxClassList } from './class-list';
 

design-system/pkg/src/contextual-help/ContextualHelp.tsx

@@ -15,7 +15,7 @@ import { infoIcon } from '@keystar/ui/icon/icons/infoIcon';
 import { ClearSlots } from '@keystar/ui/slots';
 import { classNames, css, tokenSchema } from '@keystar/ui/style';
 
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 import { ContextualHelpProps } from './types';
 
 /** Contextual help shows a user extra information about an adjacent component. */

design-system/pkg/src/dialog/Dialog.tsx

@@ -27,7 +27,7 @@ import {
 } from '@keystar/ui/style';
 import { useHasChild } from '@keystar/ui/utils';
 
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 import { DialogContext, DialogContextValue } from './context';
 import { DialogProps, DialogSize, DialogType } from './types';
 

design-system/pkg/src/drag-and-drop/DropZone.tsx

@@ -27,7 +27,7 @@ import { WithRenderProps } from '@keystar/ui/types';
 import { useRenderProps } from '@keystar/ui/utils';
 import { forwardRefWithAs } from '@keystar/ui/utils/ts';
 
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 import { SlotProvider } from '../slots';
 
 export type DropZoneProps = Omit<

design-system/pkg/src/field/FieldLabel.tsx

@@ -5,7 +5,7 @@ import { css, tokenSchema } from '@keystar/ui/style';
 import { useTextStyles } from '@keystar/ui/typography';
 import { forwardRefWithAs } from '@keystar/ui/utils/ts';
 
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 
 export type A11yLabelProps = {
   /**

design-system/pkg/src/list-view/ListView.tsx

@@ -33,7 +33,7 @@ import {
 
 import { listViewClassList } from './class-list';
 import { ListViewProvider, useListViewContext } from './context';
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 import { DragPreview as DragPreviewElement } from './DragPreview';
 import { InsertionIndicator } from './InsertionIndicator';
 import { ListViewItem } from './ListViewItem';

design-system/pkg/src/listbox/ListBoxBase.tsx

@@ -11,7 +11,7 @@ import { useProvider } from '@keystar/ui/core';
 import { ProgressCircle } from '@keystar/ui/progress';
 import { useStyleProps } from '@keystar/ui/style';
 
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 import { ListBoxContext } from './context';
 import { ListBoxLayout } from './ListBoxLayout';
 import { ListBoxOption } from './ListBoxOption';

design-system/pkg/src/menu/ActionMenu.tsx

@@ -2,7 +2,7 @@ import { useLocalizedStringFormatter } from '@react-aria/i18n';
 import { filterDOMProps } from '@react-aria/utils';
 import { ForwardedRef, forwardRef, ReactElement, Ref } from 'react';
 
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 import { Menu } from './Menu';
 import { MenuTrigger } from './MenuTrigger';
 import { ActionMenuProps } from './types';

design-system/pkg/src/picker/Picker.tsx

@@ -30,7 +30,7 @@ import {
 import { Text } from '@keystar/ui/typography';
 import { isReactText } from '@keystar/ui/utils';
 
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 import { PickerProps } from './types';
 
 function Picker<T extends object>(

design-system/pkg/src/table/Resizer.tsx

@@ -18,7 +18,7 @@ import React, {
 import ReactDOM from 'react-dom';
 
 import { useTableContext, useVirtualizerContext } from './context';
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 import {
   columnResizerClassname,
   columnResizerPlaceholderClassname,

design-system/pkg/src/table/TableView.tsx

@@ -101,7 +101,7 @@ import {
 } from './context';
 import { DragPreview as KeystarDragPreview } from './DragPreview';
 import { InsertionIndicator } from './InsertionIndicator';
-import localizedMessages from './l10n.json';
+import localizedMessages from './l10n';
 import { Resizer, ResizeStateContext, useResizeStateContext } from './Resizer';
 import {
   SortIndicator,

design-system/pkg/src/toast/Toast.tsx

@@ -19,7 +19,7 @@ import {
 import { Text } from '@keystar/ui/typography';
 import { isReactText } from '@keystar/ui/utils';
 
-import intlMessages from './l10n.json';
+import intlMessages from './l10n';
 import { ToastProps } from './types';
 
 const ICONS = {

package.json

@@ -27,7 +27,7 @@
     "eslint": "eslint .",
     "format": "prettier --write",
     "fresh": "npm run clean && pnpm install",
-    "postinstall": "preconstruct dev && manypkg check && cd packages/keystatic && pnpm run setup",
+    "postinstall": "preconstruct dev && manypkg check && tsx design-system/pkg/build-l10n.mts && cd packages/keystatic && pnpm run setup",
     "lint": "eslint --fix",
     "prettier": "prettier **/*.{ts,tsx}",
     "release": "pnpm build:packages && changeset publish",
@@ -75,6 +75,7 @@
     "prettier-plugin-packagejson": "^2.2.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tsx": "^4.8.2",
     "typescript": "^5.5.3"
   },
   "manypkg": {

packages/keystatic/package.json

@@ -116,7 +116,7 @@
     "@emotion/css": "^11.9.0",
     "@emotion/weak-memoize": "^0.3.0",
     "@floating-ui/react": "^0.24.0",
-    "@internationalized/string": "^3.1.1",
+    "@internationalized/string": "^3.2.3",
     "@keystar/ui": "workspace:^",
     "@markdoc/markdoc": "^0.4.0",
     "@react-aria/focus": "^3.18.1",
@@ -185,6 +185,7 @@
     "yjs": "^13.6.11"
   },
   "devDependencies": {
+    "@internationalized/string-compiler": "^3.2.4",
     "@jest/expect": "^29.7.0",
     "@jest/globals": "^29.7.0",
     "@testing-library/user-event": "^14.4.3",

packages/keystatic/scripts/l10n.cts

@@ -1,5 +1,6 @@
 import fs from 'fs/promises';
 import path from 'path';
+import { compileString } from '@internationalized/string-compiler';
 
 const localesDir = path.join(__dirname, '../src/app/l10n');
 (async () => {
@@ -38,8 +39,22 @@ const localesDir = path.join(__dirname, '../src/app/l10n');
       }
     )
   );
+  let out = 'const strings = {\n';
+  for (const [lang, translations] of Object.entries(locales)) {
+    out += `  ${JSON.stringify(lang)}: {\n`;
+    for (const [key, value] of Object.entries(translations)) {
+      out += `    ${JSON.stringify(key)}: ${compileString(value)},\n`;
+    }
+    out += '  },\n';
+  }
+  out += '};\n';
+  out += 'export default strings;\n';
+
+  await fs.writeFile(path.join(localesDir, 'index.js'), out);
   await fs.writeFile(
-    path.join(localesDir, 'index.json'),
-    JSON.stringify(locales, null, 2) + '\n' // carriage return to make prettier happy
+    path.join(localesDir, 'index.d.ts'),
+    `declare const l10nMessages: Record<string, Record<string, import('@internationalized/string').LocalizedString>>;
+export default l10nMessages;
+`
   );
 })();

packages/keystatic/src/app/CollectionPage.tsx

@@ -40,7 +40,7 @@ import { Heading, Text } from '@keystar/ui/typography';
 
 import { Config } from '../config';
 import { sortBy } from './collection-sort';
-import l10nMessages from './l10n/index.json';
+import l10nMessages from './l10n';
 import { useRouter } from './router';
 import { EmptyState } from './shell/empty-state';
 import {

packages/keystatic/src/app/ItemPage.tsx

@@ -52,7 +52,7 @@ import {
 } from './branch-selection';
 import { FormForEntry, containerWidthForEntryLayout } from './entry-form';
 import { ForkRepoDialog } from './fork-repo';
-import l10nMessages from './l10n/index.json';
+import l10nMessages from './l10n';
 import { NotFoundBoundary, notFound } from './not-found';
 import { getDataFileExtension, getPathPrefix } from './path-utils';
 import { useRouter } from './router';

packages/keystatic/src/app/branch-selection.tsx

@@ -16,7 +16,7 @@ import { css, tokenSchema } from '@keystar/ui/style';
 import { TextField } from '@keystar/ui/text-field';
 import { Heading, Text } from '@keystar/ui/typography';
 
-import l10nMessages from './l10n/index.json';
+import l10nMessages from './l10n';
 import { useRouter } from './router';
 import {
   Ref_base,

packages/keystatic/src/app/create-item.tsx

@@ -19,7 +19,7 @@ import { clientSideValidateProp } from '../form/errors';
 import { useEventCallback } from '../form/fields/document/DocumentEditor/ui-utils';
 
 import { CreateBranchDuringUpdateDialog } from './ItemPage';
-import l10nMessages from './l10n/index.json';
+import l10nMessages from './l10n';
 import { useBaseCommit, useCurrentBranch } from './shell/data';
 import { PageRoot, PageHeader, PageBody } from './shell/page';
 import { ForkRepoDialog } from './fork-repo';

packages/keystatic/src/app/dashboard/DashboardPage.tsx

@@ -8,7 +8,7 @@ import { Heading } from '@keystar/ui/typography';
 
 import { Config } from '../../config';
 
-import l10nMessages from '../l10n/index.json';
+import l10nMessages from '../l10n';
 import { useCloudInfo } from '../shell/data';
 import { PageBody, PageHeader, PageRoot } from '../shell/page';
 import { useViewer } from '../shell/viewer-data';

packages/keystatic/src/app/fork-repo.tsx

@@ -4,7 +4,7 @@ import { Dialog } from '@keystar/ui/dialog';
 import { Content } from '@keystar/ui/slots';
 import { Heading, Text } from '@keystar/ui/typography';
 import { useContext, useEffect, useState } from 'react';
-import l10nMessages from './l10n/index.json';
+import l10nMessages from './l10n';
 import { GitHubConfig } from '../config';
 import { getAuth } from './auth';
 import { useClient } from 'urql';

packages/keystatic/src/app/shell/i18n.tsx

@@ -1,6 +1,6 @@
 import { useLocalizedStringFormatter } from '@react-aria/i18n';
 
-import l10nMessages from '../l10n/index.json';
+import l10nMessages from '../l10n';
 
 export function useLocalizedString() {
   let stringFormatter = useLocalizedStringFormatter(l10nMessages);

packages/keystatic/src/app/shell/sidebar/components.tsx

@@ -35,7 +35,7 @@ import { Text } from '@keystar/ui/typography';
 
 import { CreateBranchDialog } from '../../branch-selection';
 import { useRouter } from '../../router';
-import l10nMessages from '../../l10n/index.json';
+import l10nMessages from '../../l10n';
 import {
   KEYSTATIC_CLOUD_API_URL,
   KEYSTATIC_CLOUD_HEADERS,

packages/keystatic/src/app/shell/sidebar/index.tsx

@@ -29,7 +29,7 @@ import {
 import { Text } from '@keystar/ui/typography';
 import { usePrevious } from '@keystar/ui/utils';
 
-import l10nMessages from '../../l10n/index.json';
+import l10nMessages from '../../l10n';
 import { useRouter } from '../../router';
 import { ItemOrGroup, useNavItems } from '../../useNavItems';
 import { isLocalConfig } from '../../utils';

packages/keystatic/src/app/useNavItems.tsx

@@ -2,7 +2,7 @@ import { useLocalizedStringFormatter } from '@react-aria/i18n';
 
 import { Config, NAVIGATION_DIVIDER_KEY } from '../config';
 
-import l10nMessages from './l10n/index.json';
+import l10nMessages from './l10n';
 import { useAppState, useConfig } from './shell/context';
 import { useChanged } from './shell/data';
 

packages/keystatic/src/form/fields/array/ui.tsx

@@ -13,7 +13,7 @@ import { useLocalizedStringFormatter } from '@react-aria/i18n';
 import { useField } from '@react-aria/label';
 import { useId, Key, useMemo, useState } from 'react';
 
-import l10nMessages from '../../../app/l10n/index.json';
+import l10nMessages from '../../../app/l10n';
 import { getSlugFromState } from '../../../app/utils';
 import { pluralize } from '../../../app/pluralize';