Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

Changing domT to a default translation function for browser

Browse Source
This commit is contained in:
Jarosław Sadziński
2022-10-19 20:44:56 +02:00
parent 2586b595a5
commit 2f29df1b17
6 changed files with 58 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import {getGristConfig} from 'app/common/urlUtils';
import {DomContents} from 'grainjs';
import {G} from 'grainjs/dist/cjs/lib/browserGlobals';
import i18next from 'i18next';
import {G} from 'grainjs/dist/cjs/lib/browserGlobals';
export async function setupLocale() {
const now = Date.now();
@@ -72,8 +72,8 @@ export async function setupLocale() {
/**
* Resolves the translation of the given key using the given options.
*/
export function t(key: string, args?: any, instance = i18next): string {
if (!instance.exists(key, args)) {
export function tString(key: string, args?: any, instance = i18next): string {
if (!instance.exists(key, args || undefined)) {
const error = new Error(`Missing translation for key: ${key} and language: ${i18next.language}`);
reportError(error);
}
@@ -84,15 +84,15 @@ export function t(key: string, args?: any, instance = i18next): string {
/**
* Resolves the translation of the given key and substitutes. Supports dom elements interpolation.
*/
export function domT(key: string, args?: any, instance = i18next): DomContents {
if (!instance.exists(key)) {
export function t(key: string, args?: any, instance = i18next): DomContents {
if (!instance.exists(key, args || undefined)) {
const error = new Error(`Missing translation for key: ${key} and language: ${i18next.language}`);
reportError(error);
}
// If there are any DomElements in args, handle it with missingInterpolationHandler.
const domElements = Object.entries(args).filter(([_, value]) => isLikeDomContents(value));
const domElements = !args ? [] : Object.entries(args).filter(([_, value]) => isLikeDomContents(value));
if (!args || !domElements.length) {
return t(key, args);
return instance.t(key, args || undefined) as string;
} else {
// Make a copy of the arguments, and remove any dom elements from it. It will instruct
// i18next library to use `missingInterpolationHandler` handler.
@@ -104,9 +104,9 @@ export function t(key: string, args?: any, instance = i18next): string {
const result: string = instance.t(key, {...copy, missingInterpolationHandler});
// Now replace all markers with dom elements passed as arguments.
const parts = result.split(new RegExp(`(${DOM_MARKER}\\w+)`));
const parts = result.split(/(\[\[\[[^\]]+?\]\]\])/);
for (let i = 1; i < parts.length; i += 2) { // Every second element is our dom element.
const propName = parts[i].replace(DOM_MARKER, "");
const propName = parts[i].substring(3, parts[i].length - 3);
const domElement = args[propName] ?? `{{${propName}}}`; // If the prop is not there, simulate default behavior.
parts[i] = domElement;
}
@@ -121,9 +121,8 @@ export function hasTranslation(key: string) {
return i18next.exists(key);
}
const DOM_MARKER = '__domKey_';
function missingInterpolationHandler(key: string, value: any) {
return `${DOM_MARKER}${value[1]}`;
return `[[[${value[1]}]]]`;
}
/**

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

@@ -3,7 +3,7 @@ import {icon} from 'app/client/ui2018/icons';
import {dom, DomElementArg, Observable, styled} from "grainjs";
import {t} from 'app/client/lib/localization';
const translate = (x: string, args?: any): string => t(`AddNewButton.${x}`, args);
const translate = (x: string, args?: any) => t(`AddNewButton.${x}`, args);
export function addNewButton(isOpen: Observable<boolean> | boolean = true, ...args: DomElementArg[]) {
return cssAddNewButton(

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

@@ -34,7 +34,7 @@ import {localStorageBoolObs} from 'app/client/lib/localStorageObs';
import {bigBasicButton} from 'app/client/ui2018/buttons';
import sortBy = require('lodash/sortBy');
const translate = (x: string, args?: any): string => t(`DocMenu.${x}`, args);
const translate = (x: string, args?: any) => t(`DocMenu.${x}`, args);
const testId = makeTestId('test-dm-');

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

@@ -1,4 +1,4 @@
import {domT, t} from 'app/client/lib/localization';
import {t} from 'app/client/lib/localization';
import {getLoginOrSignupUrl, urlState} from 'app/client/models/gristUrlState';
import {HomeModel} from 'app/client/models/HomeModel';
import {productPill} from 'app/client/ui/AppHeader';
@@ -14,7 +14,7 @@ import {FullUser} from 'app/common/LoginSessionAPI';
import * as roles from 'app/common/roles';
import {Computed, dom, DomContents, styled} from 'grainjs';
const translate = (x: string, args?: any): string => t(`HomeIntro.${x}`, args);
const translate = (x: string, args?: any) => t(`HomeIntro.${x}`, args);
export function buildHomeIntro(homeModel: HomeModel): DomContents {
const isViewer = homeModel.app.currentOrg?.access === roles.VIEWER;
@@ -103,7 +103,7 @@ function makePersonalIntro(homeModel: HomeModel, user: FullUser) {
css.docListHeader(`Welcome to Grist, ${user.name}!`, testId('welcome-title')),
cssIntroLine('Get started by creating your first Grist document.'),
(shouldHideUiElement('helpCenter') ? null :
cssIntroLine(domT('HomeIntro.VisitHelpCenter', { link: helpCenterLink() }),
cssIntroLine(t('HomeIntro.VisitHelpCenter', { link: helpCenterLink() }),
testId('welcome-text'))
),
makeCreateButtons(homeModel),
@@ -116,7 +116,7 @@ function makeAnonIntro(homeModel: HomeModel) {
css.docListHeader(translate('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 : domT('HomeIntro.VisitHelpCenter', { link: helpCenterLink() })),
(shouldHideUiElement('helpCenter') ? null : t('HomeIntro.VisitHelpCenter', { link: helpCenterLink() })),
testId('welcome-text')),
makeCreateButtons(homeModel),
];