Merge branch 'master' into feat/datacenter

packages/app/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@affine/datacenter": "workspace:*",
+    "@affine/i18n": "workspace:*",
     "@blocksuite/blocks": "0.3.1-20230109032243-37ad3ba",
     "@blocksuite/editor": "0.3.1-20230109032243-37ad3ba",
     "@blocksuite/icons": "^2.0.2",
@@ -27,7 +28,6 @@
     "cmdk": "^0.1.20",
     "css-spring": "^4.1.0",
     "dayjs": "^1.11.7",
-    "i18next": "^21.9.1",
     "lit": "^2.3.1",
     "next": "13.1.0",
     "next-debug-local": "^0.1.5",
@@ -36,7 +36,6 @@
     "quill-cursors": "^4.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-i18next": "^11.18.4",
     "yjs": "^13.5.44"
   },
   "devDependencies": {

packages/app/src/components/404/index.tsx

@@ -1,5 +1,5 @@
 import { NotFoundTitle, PageContainer } from './styles';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 export const NotfoundPage = () => {
   const { t } = useTranslation();
   return (

packages/app/src/components/contact-modal/index.tsx

@@ -23,7 +23,7 @@ import {
   StyledModalFooter,
 } from './style';
 import bg from '@/components/contact-modal/bg.png';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 const linkList = [
   {
     icon: <GithubIcon />,

packages/app/src/components/editor-mode-switch/index.tsx

@@ -15,7 +15,7 @@ import { useTheme } from '@/providers/ThemeProvider';
 import { EdgelessIcon, PaperIcon } from './Icons';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { usePageHelper } from '@/hooks/use-page-helper';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 const PaperItem = ({ active }: { active?: boolean }) => {
   const {
     theme: {

packages/app/src/components/header/QuickSearchButton.tsx

@@ -3,7 +3,7 @@ import { IconButton, IconButtonProps } from '@/ui/button';
 import { Tooltip } from '@/ui/tooltip';
 import { ArrowDownIcon } from '@blocksuite/icons';
 import { useModal } from '@/providers/GlobalModalProvider';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 export const QuickSearchButton = ({
   onClick,
   ...props

packages/app/src/components/header/header-right-items/EditorOptionMenu.tsx

@@ -16,7 +16,7 @@ import { usePageHelper } from '@/hooks/use-page-helper';
 import { useConfirm } from '@/providers/ConfirmProvider';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { toast } from '@/ui/toast';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 const PopoverContent = () => {
   const { editor } = useAppState();
   const { toggleFavoritePage, toggleDeletePage } = usePageHelper();

packages/app/src/components/help-island/index.tsx

@@ -8,7 +8,7 @@ import {
 import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
 import Grow from '@mui/material/Grow';
 import { Tooltip } from '@/ui/tooltip';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 import { useModal } from '@/providers/GlobalModalProvider';
 import { useTheme } from '@/providers/ThemeProvider';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';

packages/app/src/components/import/index.tsx

@@ -6,7 +6,7 @@ import Loading from '@/components/loading';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useAppState } from '@/providers/app-state-provider';
 import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 // import { Tooltip } from '@/ui/tooltip';
 type ImportModalProps = {
   open: boolean;

packages/app/src/components/page-list/OperationCell.tsx

@@ -14,7 +14,7 @@ import {
 } from '@blocksuite/icons';
 import { toast } from '@/ui/toast';
 import { usePageHelper } from '@/hooks/use-page-helper';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id, favorite } = pageMeta;
   const { openPage } = usePageHelper();

packages/app/src/components/page-list/index.tsx

@@ -24,7 +24,7 @@ import { useAppState } from '@/providers/app-state-provider';
 import { toast } from '@/ui/toast';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useTheme } from '@/providers/ThemeProvider';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 const FavoriteTag = ({
   pageMeta: { favorite, id },
 }: {

packages/app/src/components/quick-search/Footer.tsx

@@ -4,7 +4,7 @@ import { StyledModalFooterContent } from './style';
 import { useModal } from '@/providers/GlobalModalProvider';
 import { Command } from 'cmdk';
 import { usePageHelper } from '@/hooks/use-page-helper';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 export const Footer = (props: { query: string }) => {
   const { triggerQuickSearchModal } = useModal();
   const { openPage, createPage } = usePageHelper();

packages/app/src/components/quick-search/Results.tsx

@@ -7,7 +7,7 @@ import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
 import { useSwitchToConfig } from './config';
 import { NoResultSVG } from './NoResultSVG';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 import usePageHelper from '@/hooks/use-page-helper';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 export const Results = (props: {

packages/app/src/components/quick-search/config.ts

@@ -1,5 +1,5 @@
 import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 
 export const useSwitchToConfig = (
   currentWorkspaceId: string

packages/app/src/components/shortcuts-modal/config.ts

@@ -1,4 +1,4 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 interface ShortcutTip {
   [x: string]: string;
 }
@@ -13,7 +13,7 @@ export const useMacKeyboardShortcuts = (): ShortcutTip => {
     [t('Strikethrough')]: '⌘+⇧+S',
     [t('Inline code')]: ' ⌘+E',
     [t('Code block')]: '⌘+⌥+C',
-    [t('Hyperlink(with selected text)')]: '⌘+K',
+    [t('Link')]: '⌘+K',
     [t('Quick search')]: '⌘+K',
     [t('Body text')]: '⌘+⌥+0',
     [t('Heading', { number: '1' })]: '⌘+⌥+1',
@@ -57,7 +57,7 @@ export const useWindowsKeyboardShortcuts = (): ShortcutTip => {
     [t('Strikethrough')]: 'Ctrl+Shift+S',
     [t('Inline code')]: ' Ctrl+E',
     [t('Code block')]: 'Ctrl+Alt+C',
-    [t('Hyperlink(with selected text)')]: 'Ctrl+K',
+    [t('Link')]: 'Ctrl+K',
     [t('Quick search')]: 'Ctrl+K',
     [t('Body text')]: 'Ctrl+Shift+0',
     [t('Heading', { number: '1' })]: 'Ctrl+Shift+1',

packages/app/src/components/shortcuts-modal/index.tsx

@@ -16,7 +16,7 @@ import {
 import Slide from '@mui/material/Slide';
 import { ModalCloseButton } from '@/ui/modal';
 import { getUaHelper } from '@/utils';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 type ModalProps = {
   open: boolean;
   onClose: () => void;

packages/app/src/pages/_app.tsx

@@ -20,7 +20,7 @@ import { useEffect } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { PageLoading } from '@/components/loading';
 import Head from 'next/head';
-import '@/libs/i18n';
+import '@affine/i18n';
 import TemporaryHelperProvider from '@/providers/temporary-helper-provider';
 
 const ThemeProvider = dynamic(() => import('@/providers/ThemeProvider'), {

packages/app/src/pages/workspace/[workspaceId]/all.tsx

@@ -4,7 +4,7 @@ import usePageMetaList from '@/hooks/use-page-meta-list';
 import { PageListHeader } from '@/components/header';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 const All = () => {
   const pageMetaList = usePageMetaList();
   const { t } = useTranslation();

packages/app/src/pages/workspace/[workspaceId]/favorite.tsx

@@ -4,7 +4,7 @@ import { FavouritesIcon } from '@blocksuite/icons';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 export const Favorite = () => {
   const pageMetaList = usePageMetaList();
   const { t } = useTranslation();

packages/app/src/pages/workspace/[workspaceId]/trash.tsx

@@ -4,7 +4,7 @@ import { TrashIcon } from '@blocksuite/icons';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 export const Trash = () => {
   const pageMetaList = usePageMetaList();
   const { t } = useTranslation();

packages/app/src/ui/confirm/Confirm.tsx

@@ -7,7 +7,7 @@ import {
   StyledModalWrapper,
 } from '@/ui/confirm/styles';
 import { Button } from '@/ui/button';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@affine/i18n';
 export type ConfirmProps = {
   title?: string;
   content?: string;

packages/i18n/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@affine/i18n",
+  "version": "0.1.0",
+  "description": "",
+  "main": "dist/src/index.js",
+  "type": "module",
+  "types": "dist/src/index.d.ts",
+  "exports": {
+    "./src/*": "./dist/src/*.js",
+    ".": "./dist/src/index.js"
+  },
+  "scripts": {
+    "build": "tsc --project ./tsconfig.json"
+  },
+  "keywords": [],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toeverything/AFFiNE.git"
+  },
+  "dependencies": {
+    "i18next": "^21.9.1",
+    "prettier": "^2.7.1",
+    "react-i18next": "^11.18.4"
+  },
+  "devDependencies": {
+    "@types/prettier": "^2.7.2",
+    "typescript": "^4.8.4"
+  }
+}

packages/i18n/src/index.ts

@@ -1,10 +1,6 @@
 import i18next, { Resource } from 'i18next';
-import {
-  I18nextProvider,
-  initReactI18next,
-  useTranslation,
-} from 'react-i18next';
-import { LOCALES } from './resources';
+import { initReactI18next, useTranslation } from 'react-i18next';
+import { LOCALES } from './resources/index.js';
 import type en_US from './resources/en.json';
 
 // const localStorage = {
@@ -27,7 +23,7 @@ declare module 'react-i18next' {
 
 // const STORAGE_KEY = 'i18n_lng';
 
-export { i18n, useTranslation, I18nProvider, LOCALES };
+export { i18n, useTranslation, LOCALES };
 
 const resources = LOCALES.reduce<Resource>(
   (acc, { tag, res }) => ({ ...acc, [tag]: { translation: res } }),
@@ -63,4 +59,4 @@ i18n.on('languageChanged', () => {
   //   localStorage.setItem(STORAGE_KEY, lng);
 });
 
-const I18nProvider = I18nextProvider;
+// const I18nProvider = I18nextProvider;

packages/i18n/src/resources/en.json

@@ -54,7 +54,7 @@
   "Strikethrough": "Strikethrough",
   "Inline code": "Inline code",
   "Code block": "Code block",
-  "Hyperlink(with selected text)": "Hyperlink(with selected text)",
+  "Link": "Hyperlink(with selected text)",
   "Body text": "Body text",
   "Heading": "Heading {{number}}",
   "Increase indent": "Increase indent",

packages/i18n/src/script/api.ts

@@ -0,0 +1,205 @@
+// cSpell:ignore Tolgee
+import { fetchTolgee } from './request';
+
+/**
+ * Returns all project languages
+ *
+ * See https://tolgee.io/api#operation/getAll_6
+ * @example
+ * ```ts
+ * const languages = [
+ *   {
+ *     id: 1000016008,
+ *     name: 'English',
+ *     tag: 'en',
+ *     originalName: 'English',
+ *     flagEmoji: '🇬🇧',
+ *     base: true
+ *   },
+ *   {
+ *     id: 1000016013,
+ *     name: 'Spanish',
+ *     tag: 'es',
+ *     originalName: 'español',
+ *     flagEmoji: '🇪🇸',
+ *     base: false
+ *   },
+ *   {
+ *     id: 1000016009,
+ *     name: 'Simplified Chinese',
+ *     tag: 'zh-Hans',
+ *     originalName: '简体中文',
+ *     flagEmoji: '🇨🇳',
+ *     base: false
+ *   },
+ *   {
+ *     id: 1000016012,
+ *     name: 'Traditional Chinese',
+ *     tag: 'zh-Hant',
+ *     originalName: '繁體中文',
+ *     flagEmoji: '🇭🇰',
+ *     base: false
+ *   }
+ * ]
+ * ```
+ */
+
+export const getAllProjectLanguages = async (
+  size = 1000
+): Promise<
+  {
+    id: number;
+    name: string;
+    tag: string;
+    originalName: string;
+    flagEmoji: string;
+    base: boolean;
+  }[]
+> => {
+  const url = `/languages?size=${size}`;
+  const resp = await fetchTolgee(url);
+  if (resp.status < 200 || resp.status >= 300) {
+    throw new Error(url + ' ' + resp.status + '\n' + (await resp.text()));
+  }
+  const json: {
+    _embedded: {
+      languages: {
+        id: number;
+        name: string;
+        tag: string;
+        originalName: string;
+        flagEmoji: string;
+        base: boolean;
+      }[];
+    };
+    page: unknown;
+  } = await resp.json();
+  return json._embedded.languages;
+};
+
+/**
+ * Returns translations in project
+ *
+ * See https://tolgee.io/api#operation/getTranslations_
+ */
+export const getTranslations = async (): Promise<unknown> => {
+  const url = '/translations';
+  const resp = await fetchTolgee(url);
+  if (resp.status < 200 || resp.status >= 300) {
+    throw new Error(url + ' ' + resp.status + '\n' + (await resp.text()));
+  }
+  const json = await resp.json();
+  return json;
+};
+
+/**
+ * Returns all translations for specified languages
+ *
+ * See https://tolgee.io/api#operation/getAllTranslations_1
+ */
+export const getLanguagesTranslations = async <T extends string>(
+  languages: T
+): Promise<{ [key in T]?: Record<string, string> }> => {
+  const url = `/translations/${languages}`;
+  const resp = await fetchTolgee(url);
+  if (resp.status < 200 || resp.status >= 300) {
+    throw new Error(url + ' ' + resp.status + '\n' + (await resp.text()));
+  }
+  const json = await resp.json();
+  return json;
+};
+
+export const getRemoteTranslations = async (
+  languages: string
+): Promise<Record<string, string>> => {
+  const translations = await getLanguagesTranslations(languages);
+  if (!(languages in translations)) {
+    return {};
+  }
+  // The assert is safe because we checked above
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return translations[languages]!;
+};
+
+/**
+ * Creates new key
+ *
+ * See https://tolgee.io/api#operation/create_2
+ */
+export const createsNewKey = async (
+  key: string,
+  translations: Record<string, string>
+): Promise<unknown> => {
+  const url = '/translations/keys/create';
+  const resp = await fetchTolgee(url, {
+    method: 'POST',
+    body: JSON.stringify({ name: key, translations }),
+  });
+  if (resp.status < 200 || resp.status >= 300) {
+    throw new Error(url + ' ' + resp.status + '\n' + (await resp.text()));
+  }
+  const json = await resp.json();
+  return json;
+};
+
+/**
+ * Tags a key with tag. If tag with provided name doesn't exist, it is created
+ *
+ * See https://tolgee.io/api#operation/tagKey_1
+ */
+export const addTag = async (
+  keyId: string,
+  tagName: string
+): Promise<unknown> => {
+  const url = `/keys/${keyId}/tags`;
+  const resp = await fetchTolgee(url, {
+    method: 'PUT',
+    body: JSON.stringify({ name: tagName }),
+  });
+  if (resp.status < 200 || resp.status >= 300) {
+    throw new Error(url + ' ' + resp.status + '\n' + (await resp.text()));
+  }
+  const json = await resp.json();
+  return json;
+};
+
+/**
+ * Tags a key with tag. If tag with provided name doesn't exist, it is created
+ *
+ * See https://tolgee.io/api#operation/tagKey_1
+ */
+export const removeTag = async (
+  keyId: string,
+  tagId: number
+): Promise<unknown> => {
+  const url = `/keys/${keyId}/tags/${tagId}`;
+  const resp = await fetchTolgee(url, {
+    method: 'DELETE',
+  });
+  if (resp.status < 200 || resp.status >= 300) {
+    throw new Error(url + ' ' + resp.status + '\n' + (await resp.text()));
+  }
+  const json = await resp.json();
+  return json;
+};
+
+// export const addTagByKey = async (key: string, tag: string) => {
+//   // TODO get key id by key name
+//   // const keyId =
+//   // addTag(keyId, tag);
+// };
+
+/**
+ * Exports data
+ *
+ * See https://tolgee.io/api#operation/export_1
+ */
+export const exportResources = async (): Promise<Response> => {
+  const url = `/export`;
+  const resp = await fetchTolgee(url);
+
+  if (resp.status < 200 || resp.status >= 300) {
+    throw new Error(url + ' ' + resp.status + '\n' + (await resp.text()));
+  }
+  return resp;
+};

packages/i18n/src/script/download.ts

@@ -0,0 +1,132 @@
+// cSpell:ignore Tolgee
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { format } from 'prettier';
+import { getAllProjectLanguages, getRemoteTranslations } from './api';
+import type { TranslationRes } from './utils';
+
+const RES_DIR = path.resolve(process.cwd(), 'src', 'resources');
+
+const countKeys = (obj: TranslationRes) => {
+  let count = 0;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Object.entries(obj).forEach(([_, value]) => {
+    if (typeof value === 'string') {
+      count++;
+    } else {
+      count += countKeys(value);
+    }
+  });
+  return count;
+};
+
+const getBaseTranslations = async (baseLanguage: { tag: string }) => {
+  try {
+    const baseTranslationsStr = await fs.readFile(
+      path.resolve(RES_DIR, `${baseLanguage.tag}.json`),
+      { encoding: 'utf8' }
+    );
+    const baseTranslations = JSON.parse(baseTranslationsStr);
+    return baseTranslations;
+  } catch (e) {
+    console.error('base language:', JSON.stringify(baseLanguage));
+    console.error('Failed to read base language', e);
+    const translations = await getRemoteTranslations(baseLanguage.tag);
+    await fs.writeFile(
+      path.resolve(RES_DIR, `${baseLanguage.tag}.json`),
+      JSON.stringify(translations, null, 4)
+    );
+  }
+};
+
+const main = async () => {
+  console.log('Loading project languages...');
+  const languages = await getAllProjectLanguages();
+  const baseLanguage = languages.find(language => language.base);
+  if (!baseLanguage) {
+    console.error(JSON.stringify(languages));
+    throw new Error('Could not find base language');
+  }
+  console.log(`Loading ${baseLanguage.tag} languages translations as base...`);
+
+  const baseTranslations = await getBaseTranslations(baseLanguage);
+  const baseKeyNum = countKeys(baseTranslations);
+  const languagesWithTranslations = await Promise.all(
+    languages.map(async language => {
+      console.log(`Loading ${language.tag} translations...`);
+      const translations = await getRemoteTranslations(language.tag);
+      const keyNum = countKeys(translations);
+
+      return {
+        ...language,
+        translations,
+        completeRate: keyNum / baseKeyNum,
+      };
+    })
+  );
+
+  const availableLanguages = languagesWithTranslations.filter(
+    language => language.completeRate > 0
+  );
+
+  availableLanguages
+    // skip base language
+    .filter(i => !i.base)
+    .forEach(async language => {
+      await fs.writeFile(
+        path.resolve(RES_DIR, `${language.tag}.json`),
+        JSON.stringify(
+          {
+            '// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.':
+              '',
+            ...language.translations,
+          },
+          null,
+          4
+        ) + '\n'
+      );
+    });
+
+  console.log('Generating meta data...');
+  const code = `// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+        // Run \`pnpm run download-resources\` to regenerate.
+        // To overwrite this, please overwrite ${path.basename(__filename)}
+        ${availableLanguages
+          .map(
+            language =>
+              `import ${language.tag.replaceAll('-', '_')} from './${
+                language.tag
+              }.json'`
+          )
+          .join('\n')}
+
+        export const LOCALES = [
+            ${availableLanguages
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              .map(({ translations, ...language }) =>
+                JSON.stringify({
+                  ...language,
+                  res: '__RES_PLACEHOLDER',
+                }).replace(
+                  '"__RES_PLACEHOLDER"',
+                  language.tag.replaceAll('-', '_')
+                )
+              )
+              .join(',\n')}
+        ] as const;
+        `;
+
+  await fs.writeFile(
+    path.resolve(RES_DIR, 'index.ts'),
+    format(code, {
+      parser: 'typescript',
+      singleQuote: true,
+      trailingComma: 'es5',
+      tabWidth: 4,
+      arrowParens: 'avoid',
+    })
+  );
+  console.log('Done');
+};
+
+main();

packages/i18n/src/script/request.ts

@@ -0,0 +1,55 @@
+// cSpell:ignore Tolgee
+const TOLGEE_API_KEY = process.env['TOLGEE_API_KEY'];
+const TOLGEE_API_URL = 'https://i18n.affine.pro';
+
+if (!TOLGEE_API_KEY) {
+  throw new Error(`Please set "TOLGEE_API_KEY" as environment variable!`);
+}
+
+const withTolgee = (
+  fetch: typeof globalThis.fetch
+): typeof globalThis.fetch => {
+  const baseUrl = `${TOLGEE_API_URL}/v2/projects`;
+  const headers = new Headers({
+    'X-API-Key': TOLGEE_API_KEY,
+    'Content-Type': 'application/json',
+  });
+
+  const isRequest = (input: RequestInfo | URL): input is Request => {
+    return typeof input === 'object' && !('href' in input);
+  };
+
+  return new Proxy(fetch, {
+    apply(
+      target,
+      thisArg: unknown,
+      argArray: Parameters<typeof globalThis.fetch>
+    ) {
+      if (isRequest(argArray[0])) {
+        // Request
+        if (!argArray[0].headers) {
+          argArray[0] = {
+            ...argArray[0],
+            url: `${baseUrl}${argArray[0].url}`,
+            headers,
+          };
+        }
+      } else {
+        // URL or URLLike + ?RequestInit
+        if (typeof argArray[0] === 'string') {
+          argArray[0] = `${baseUrl}${argArray[0]}`;
+        }
+        if (!argArray[1]) {
+          argArray[1] = {};
+        }
+        if (!argArray[1].headers) {
+          argArray[1].headers = headers;
+        }
+      }
+      // console.log('fetch', argArray);
+      return target.apply(thisArg, argArray);
+    },
+  });
+};
+
+export const fetchTolgee = withTolgee(globalThis.fetch);

packages/i18n/src/script/sync.ts

@@ -0,0 +1,154 @@
+// cSpell:ignore Tolgee
+import { readFile } from 'fs/promises';
+import path from 'path';
+import { createsNewKey, getRemoteTranslations } from './api';
+import type { TranslationRes } from './utils';
+
+const BASE_JSON_PATH = path.resolve(
+  process.cwd(),
+  'src',
+  'resources',
+  'en.json'
+);
+const BASE_LANGUAGES = 'en' as const;
+
+/**
+ *
+ * @example
+ * ```ts
+ * flatRes({ a: { b: 'c' } }); // { 'a.b': 'c' }
+ * ```
+ */
+const flatRes = (obj: TranslationRes) => {
+  const getEntries = (o: TranslationRes, prefix = ''): [string, string][] =>
+    Object.entries(o).flatMap<[string, string]>(([k, v]) =>
+      typeof v !== 'string'
+        ? getEntries(v, `${prefix}${k}.`)
+        : [[`${prefix}${k}`, v]]
+    );
+  return Object.fromEntries(getEntries(obj));
+};
+
+const differenceObject = (
+  newObj: Record<string, string>,
+  oldObj: Record<string, string>
+) => {
+  const add: string[] = [];
+  const remove: string[] = [];
+  const modify: string[] = [];
+  const both: string[] = [];
+
+  Object.keys(newObj).forEach(key => {
+    if (!(key in oldObj)) {
+      add.push(key);
+    } else {
+      both.push(key);
+    }
+  });
+
+  Object.keys(oldObj).forEach(key => {
+    if (!(key in newObj)) {
+      remove.push(key);
+    }
+  });
+
+  both.forEach(key => {
+    if (!(key in newObj) || !(key in oldObj)) {
+      throw new Error('Unreachable');
+    }
+    const newVal = newObj[key];
+    const oldVal = oldObj[key];
+    if (newVal !== oldVal) {
+      modify.push(key);
+    }
+  });
+  return { add, remove, modify };
+};
+
+function warnDiff(diff: { add: string[]; remove: string[]; modify: string[] }) {
+  if (diff.add.length) {
+    console.log('New keys found:', diff.add.join(', '));
+    //See https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#setting-a-notice-message
+    process.env['CI'] &&
+      console.log(
+        `::notice file=${BASE_JSON_PATH},line=1,title=New keys::${diff.add.join(
+          ', '
+        )}`
+      );
+  }
+  if (diff.remove.length) {
+    console.warn('[WARN]', 'Unused keys found:', diff.remove.join(', '));
+    process.env['CI'] &&
+      console.warn(
+        `::notice file=${BASE_JSON_PATH},line=1,title=Unused keys::${diff.remove.join(
+          ', '
+        )}`
+      );
+  }
+  if (diff.modify.length) {
+    console.warn('[WARN]', 'Inconsistent keys found:', diff.modify.join(', '));
+    process.env['CI'] &&
+      console.warn(
+        `::warning file=${BASE_JSON_PATH},line=1,title=Inconsistent keys::${diff.modify.join(
+          ', '
+        )}`
+      );
+  }
+}
+
+const main = async () => {
+  console.log('Loading local base translations...');
+  const baseLocalTranslations = JSON.parse(
+    await readFile(BASE_JSON_PATH, {
+      encoding: 'utf8',
+    })
+  );
+  const flatLocalTranslations = flatRes(baseLocalTranslations);
+  console.log(
+    `Loading local base translations success! Total ${
+      Object.keys(flatLocalTranslations).length
+    } keys`
+  );
+
+  console.log('Fetch remote base translations...');
+  const baseRemoteTranslations = await getRemoteTranslations(BASE_LANGUAGES);
+  const flatRemoteTranslations = flatRes(baseRemoteTranslations);
+  console.log(
+    `Fetch remote base translations success! Total ${
+      Object.keys(flatRemoteTranslations).length
+    } keys`
+  );
+
+  const diff = differenceObject(flatLocalTranslations, flatRemoteTranslations);
+
+  console.log(''); // new line
+  warnDiff(diff);
+  console.log(''); // new line
+
+  if (process.argv.slice(2).includes('--check')) {
+    // check mode
+    return;
+  }
+
+  diff.add.forEach(async key => {
+    const val = flatLocalTranslations[key];
+    console.log(`Creating new key: ${key} -> ${val}`);
+    await createsNewKey(key, { [BASE_LANGUAGES]: val });
+  });
+
+  // TODO remove unused tags from used keys
+
+  // diff.remove.forEach(key => {
+  //   // TODO set unused tag
+  //   // console.log(`Add ${DEPRECATED_TAG_NAME} to ${key}`);
+  //   addTagByKey(key, DEPRECATED_TAG_NAME);
+  // });
+
+  // diff.modify.forEach(key => {
+  //   // TODO warn different between local and remote base translations
+  // });
+
+  // TODO send notification
+};
+
+main();

packages/i18n/src/script/utils.ts

@@ -0,0 +1,3 @@
+export interface TranslationRes {
+  [x: string]: string | TranslationRes;
+}

packages/i18n/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": false,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "experimentalDecorators": true,
+    "declaration": true,
+    "baseUrl": ".",
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}