Skip to content

Commit

Permalink
Support localisation messages with parameters
Browse files Browse the repository at this point in the history
  • Loading branch information
emmatown committed Sep 6, 2024
1 parent 336b6da commit 98d9871
Show file tree
Hide file tree
Showing 44 changed files with 156 additions and 66 deletions.
6 changes: 6 additions & 0 deletions .changeset/tidy-flowers-talk.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@keystatic/core': patch
'@keystar/ui': patch
---

Updates to localisation build tooling
8 changes: 7 additions & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -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

5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
5 changes: 5 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
41 changes: 41 additions & 0 deletions design-system/pkg/build-l10n.mts
Original file line number Diff line number Diff line change
@@ -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}`);
}
2 changes: 2 additions & 0 deletions design-system/pkg/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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:^",
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/action-bar/ActionBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/combobox/Combobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/combobox/MobileCombobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/contextual-help/ContextualHelp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/dialog/Dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/drag-and-drop/DropZone.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/field/FieldLabel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
/**
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/list-view/ListView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/listbox/ListBoxBase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/menu/ActionMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/picker/Picker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>(
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/table/Resizer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/table/TableView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion design-system/pkg/src/toast/Toast.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -69,12 +69,14 @@
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-compiler": "^0.0.0-experimental-0998c1e-20240625",
"eslint-plugin-react-hooks": "^4.6.0",
"fast-glob": "^3.2.12",
"jest": "^30.0.0-alpha.2",
"jest-environment-jsdom": "^30.0.0-alpha.2",
"prettier": "^3.0.3",
"prettier-plugin-packagejson": "^2.2.18",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tsx": "^4.8.2",
"typescript": "^5.5.3"
},
"manypkg": {
Expand Down
3 changes: 2 additions & 1 deletion packages/keystatic/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
20 changes: 18 additions & 2 deletions packages/keystatic/scripts/l10n.cts
Original file line number Diff line number Diff line change
@@ -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 () => {
Expand Down Expand Up @@ -38,8 +39,23 @@ const localesDir = path.join(__dirname, '../src/app/l10n');
}
)
);
let out =
"const strings: Record<string, Record<string, import('@internationalized/string').LocalizedString>> = {\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;
`
);
})();
2 changes: 1 addition & 1 deletion packages/keystatic/src/app/CollectionPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion packages/keystatic/src/app/ItemPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/keystatic/src/app/branch-selection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/keystatic/src/app/create-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/keystatic/src/app/dashboard/DashboardPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/keystatic/src/app/fork-repo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/keystatic/src/app/shell/i18n.tsx
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/keystatic/src/app/shell/sidebar/components.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/keystatic/src/app/shell/sidebar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/keystatic/src/app/useNavItems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
Loading

0 comments on commit 98d9871

Please sign in to comment.