Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

Split client and server translations, organize by filename

Browse Source
This commit is contained in:
Arnaud Peich 2022-10-13 11:23:55 +02:00
parent 396153b1eb
commit cc2a438fe5
10 changed files with 72 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/client/lib/localization.ts
View File

@ -15,7 +15,7 @@ export async function setupLocale() {
}
}
const ns = getGristConfig().namespaces ?? ['core'];
const ns = getGristConfig().namespaces ?? ['client'];
// Initialize localization plugin
try {
// We don't await this promise, as it is resolved synchronously due to initImmediate: false.
@ -28,13 +28,13 @@ export async function setupLocale() {
initImmediate: false,
// Read language from navigator object.
lng,
// By default we use core namespace.
defaultNS: 'core',
// By default we use client namespace.
defaultNS: 'client',
// Read namespaces that are supported by the server.
// TODO: this can be converted to a dynamic list of namespaces, for async components.
// for now just import all what server offers.
// We can fallback to core namespace for any addons.
fallbackNS: 'core',
// We can fallback to client namespace for any addons.
fallbackNS: 'client',
ns,
supportedLngs
}).catch((err: any) => {

2
app/client/ui/AddNewButton.ts
View File

@ -8,7 +8,7 @@ export function addNewButton(isOpen: Observable<boolean> | boolean = true, ...ar
cssAddNewButton.cls('-open', isOpen),
// Setting spacing as flex items allows them to shrink faster when there isn't enough space.
cssLeftMargin(),
cssAddText(t('AddNew')),
cssAddText(t('AddNewButton.AddNew')),
dom('div', {style: 'flex: 1 1 16px'}),
cssPlusButton(cssPlusIcon('Plus')),
dom('div', {style: 'flex: 0 1 16px'}),

8
app/client/ui/DocMenu.ts
View File

@ -105,10 +105,10 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
null :
css.docListHeader(
(
page === 'all' ? t('AllDocuments') :
page === 'all' ? t('DocMenu.AllDocuments') :
page === 'templates' ?
dom.domComputed(use => use(home.featuredTemplates).length > 0, (hasFeaturedTemplates) =>
hasFeaturedTemplates ? t('MoreExamplesAndTemplates') : t('ExamplesAndTemplates')
hasFeaturedTemplates ? t('DocMenu.MoreExamplesAndTemplates') : t('DocMenu.ExamplesAndTemplates')
) :
page === 'trash' ? 'Trash' :
workspace && [css.docHeaderIcon('Folder'), workspaceName(home.app, workspace)]
@ -268,7 +268,7 @@ function buildOtherSites(home: HomeModel) {
return css.otherSitesBlock(
dom.autoDispose(hideOtherSitesObs),
css.otherSitesHeader(
t('OtherSites'),
t('DocMenu.OtherSites'),
dom.domComputed(hideOtherSitesObs, (collapsed) =>
collapsed ? css.otherSitesHeaderIcon('Expand') : css.otherSitesHeaderIcon('Collapse')
),
@ -280,7 +280,7 @@ function buildOtherSites(home: HomeModel) {
const siteName = home.app.currentOrgName;
return [
dom('div',
t('OtherSitesWelcome', { siteName, context: personal ? 'personal' : '' }),
t('DocMenu.OtherSitesWelcome', { siteName, context: personal ? 'personal' : '' }),
testId('other-sites-message')
),
css.otherSitesButtons(

4
app/client/ui/HomeIntro.ts
View File

@ -110,9 +110,9 @@ function makePersonalIntro(homeModel: HomeModel, user: FullUser) {
}
function makeAnonIntro(homeModel: HomeModel) {
const signUp = cssLink({href: getLoginOrSignupUrl()}, t('SignUp'));
const signUp = cssLink({href: getLoginOrSignupUrl()}, t('HomeIntro.SignUp'));
return [
css.docListHeader(t('Welcome'), testId('welcome-title')),
css.docListHeader(t('HomeIntro.Welcome'), testId('welcome-title')),
cssIntroLine('Get started by exploring templates, or creating your first Grist document.'),
cssIntroLine(signUp, ' to save your work.',
(shouldHideUiElement('helpCenter') ? null : [' Visit our ', helpCenterLink(), ' to learn more.']),

2
app/server/lib/sendAppPage.ts
View File

@ -154,7 +154,7 @@ function configuredPageTitleSuffix() {
*/
function getPageTitle(req: express.Request, config: GristLoadConfig): string {
const maybeDoc = getDocFromConfig(config);
if (!maybeDoc) { return req.t('Loading') + "..."; }
if (!maybeDoc) { return req.t('sendAppPage.Loading') + "..."; }
return handlebars.Utils.escapeExpression(maybeDoc.name);
}

8
app/server/localization.ts
View File

@ -26,8 +26,8 @@ export function setupLocale(appRoot: string): i18n {
supportedNamespaces.add(namespace);
return lang;
}).filter((lang) => lang));
if (!supportedLngs.has('en') || !supportedNamespaces.has('core')) {
throw new Error("Missing core English language file");
if (!supportedLngs.has('en') || !supportedNamespaces.has('server')) {
throw new Error("Missing server English language file");
}
// Initialize localization filesystem plugin that will read the locale files from the localeDir.
instance.use(i18fsBackend);
@ -40,7 +40,7 @@ export function setupLocale(appRoot: string): i18n {
initImmediate: false,
preload: [...supportedLngs],
supportedLngs: [...supportedLngs],
defaultNS: 'core',
defaultNS: 'server',
ns: [...supportedNamespaces],
fallbackLng: 'en',
backend: {
@ -71,5 +71,5 @@ export function readLoadedNamespaces(instance?: i18n): readonly string[] {
if (Array.isArray(instance?.options.ns)) {
return instance.options.ns;
}
return instance?.options.ns ? [instance.options.ns as string] : ['core'];
return instance?.options.ns ? [instance.options.ns as string] : ['server'];
}

49
documentation/translations.md
View File

@ -20,37 +20,46 @@ default language _en_ (https://www.i18next.com/principles/translation-resolution
All language variants (e.g., _fr-FR_, _pl-PL_, _en-UK_) are supported if Grist can find a main
language resource file. For example, to support a _fr-FR_ language code, Grist expects to have at
least _fr.core.json_ file. The main language file will be used as a default fallback for all French
least _fr.client.json_ file. The main language file will be used as a default fallback for all French
language codes like _fr-FR_ or _fr-CA_, in case there is no resource file for a specif variant (like
`fr-CA.core.json`) or some keys are missing from the variant file.
`fr-CA.client.json`) or some keys are missing from the variant file.
Here is an example of a language resource file `en.core.json` currently used by Grist:
Here is an example of a language resource file `en.client.json` currently used by Grist:
```json
{
"Welcome": "Welcome to Grist!",
"Loading": "Loading",
"AddNew": "Add New",
"AddNewButton": {
"AddNew": "Add New"
},
"DocMenu": {
"OtherSites": "Other Sites",
"OtherSitesWelcome": "Your are on {{siteName}}. You also have access to the following sites:",
"OtherSitesWelcome_personal": "Your are on your personal site. You also have access to the following sites:",
"OtherSitesWelcome": "You are on the {{siteName}} site. You also have access to the following sites:",
"OtherSitesWelcome_personal": "You are on your personal site. You also have access to the following sites:",
"AllDocuments": "All Documents",
"ExamplesAndTemplates": "Examples and Templates",
"MoreExamplesAndTemplates": "More Examples and Templates"
},
"HomeIntro": {
"Welcome": "Welcome to Grist!",
"SignUp": "Sign up"
}
}
```
It maps a key to a translated message. It also has an example of interpolation and context features
in the `OtherSitesWelcome` resource key. More information about how to use those features can be
in the `DocMenu.OtherSitesWelcome` resource key. More information about how to use those features can be
found at https://www.i18next.com/translation-function/interpolation and
https://www.i18next.com/translation-function/context.
Both client and server code (node.js) use the same resource files. A resource file name format
follows a pattern: [language code].[product].json (i.e. `pl-Pl.core.json`, `en-US.core.json`,
`en.core.json`). Grist can be packaged as several different products, and each product can have its
Client and server code (node.js) use separate resource files. A resource file name format
follows a pattern: [language code].[product].json (e.g. `pl-Pl.client.json`, `en-US.client.json`,
`en.client.json`). Grist can be packaged as several different products, and each product can have its
own translation files that are added to the core. Products are supported by leveraging `i18next`
feature called `namespaces` https://www.i18next.com/principles/namespaces.
For now we use only two products called `client` and `server`.
Each of them is then organized by filename, in order to avoid conflicts.
## Translation instruction
### Client
@ -58,7 +67,7 @@ feature called `namespaces` https://www.i18next.com/principles/namespaces.
The entry point for all translations is a function exported from 'app/client/lib/localization'.
```ts
import { t } from 'app/client/lib/localization';
import {t} from 'app/client/lib/localization';
```
It is a wrapper around `i18next` exported method with the same interface
@ -71,7 +80,7 @@ _app/client/ui.DocMenu.ts_
```ts
css.otherSitesHeader(
t('OtherSites'),
t('DocMenu.OtherSites'),
.....
),
dom.maybe((use) => !use(hideOtherSitesObs), () => {
@ -79,7 +88,7 @@ _app/client/ui.DocMenu.ts_
const siteName = home.app.currentOrgName;
return [
dom('div',
t('OtherSitesWelcome', { siteName, context: personal ? 'personal' : '' }),
t('DocMenu.OtherSitesWelcome', { siteName, context: personal ? 'personal' : '' }),
testId('other-sites-message')
```
@ -87,9 +96,9 @@ _app/client/ui/HomeIntro.ts_
```ts
function makeAnonIntro(homeModel: HomeModel) {
const signUp = cssLink({href: getLoginOrSignupUrl()}, t('SignUp'));
const signUp = cssLink({href: getLoginOrSignupUrl()}, t('HomeIntro.SignUp'));
return [
css.docListHeader(t('Welcome'), testId('welcome-title')),
css.docListHeader(t('HomeIntro.Welcome'), testId('welcome-title')),
```
Some things are not supported at this moment and will need to be addressed in future development
@ -124,7 +133,7 @@ _app/server/lib/sendAppPage.ts_
function getPageTitle(req: express.Request, config: GristLoadConfig): string {
const maybeDoc = getDocFromConfig(config);
if (!maybeDoc) {
return req.t('Loading') + '...';
return req.t('sendAppPage.Loading') + '...';
}
return handlebars.Utils.escapeExpression(maybeDoc.name);
@ -133,8 +142,8 @@ function getPageTitle(req: express.Request, config: GristLoadConfig): string {
### Next steps
- Annotate all client code and create all resource files in `en.core.json` file. Almost all static
text is ready for translation.
- Annotate all client code and create all resource files in `en.client.json` and `en.server.json` files.
Almost all static text is ready for translation.
- Store language settings with the user profile and allow a user to change it on the Account Page.
Consider also adding a cookie-based solution that custom widgets can use, or extend the
**WidgetFrame** component so that it can pass current user language to the hosted widget page.

17
static/locales/en.client.json Normal file
View File

@ -0,0 +1,17 @@
{
"AddNewButton": {
"AddNew": "Add New"
},
"DocMenu": {
"OtherSites": "Other Sites",
"OtherSitesWelcome": "You are on the {{siteName}} site. You also have access to the following sites:",
"OtherSitesWelcome_personal": "You are on your personal site. You also have access to the following sites:",
"AllDocuments": "All Documents",
"ExamplesAndTemplates": "Examples and Templates",
"MoreExamplesAndTemplates": "More Examples and Templates"
},
"HomeIntro": {
"Welcome": "Welcome to Grist!",
"SignUp": "Sign up"
}
}

12
static/locales/en.core.json
View File

@ -1,12 +0,0 @@
{
"Welcome": "Welcome to Grist!",
"SignUp": "Sign up",
"Loading": "Loading",
"AddNew": "Add New",
"OtherSites": "Other Sites",
"OtherSitesWelcome": "You are on the {{siteName}} site. You also have access to the following sites:",
"OtherSitesWelcome_personal": "You are on your personal site. You also have access to the following sites:",
"AllDocuments": "All Documents",
"ExamplesAndTemplates": "Examples and Templates",
"MoreExamplesAndTemplates": "More Examples and Templates"
}

5
static/locales/en.server.json Normal file
View File

@ -0,0 +1,5 @@
{
"sendAppPage": {
"Loading": "Loading"
}
}