Repository: answerdev/answer
File: ui/src/i18n/init.ts (TypeScript)

Code before:
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import { initReactI18next } from 'react-i18next';

import i18next from 'i18next';
import en_US from '@i18n/en_US.yaml';
import es_ES from '@i18n/es_ES.yaml';
import pt_BR from '@i18n/pt_BR.yaml';
import pt_PT from '@i18n/pt_PT.yaml';
import de_DE from '@i18n/de_DE.yaml';
import fr_FR from '@i18n/fr_FR.yaml';
import ja_JP from '@i18n/ja_JP.yaml';
import it_IT from '@i18n/it_IT.yaml';
import ru_RU from '@i18n/ru_RU.yaml';
import zh_CN from '@i18n/zh_CN.yaml';
import zh_TW from '@i18n/zh_TW.yaml';
import ko_KR from '@i18n/ko_KR.yaml';
import vi_VN from '@i18n/vi_VN.yaml';
import sk_SK from '@i18n/sk_SK.yaml';
import fa_IR from '@i18n/fa_IR.yaml';

import { DEFAULT_LANG, LANG_RESOURCE_STORAGE_KEY } from '@/common/constants';
import Storage from '@/utils/storage';

/**
 * Prevent i18n from re-initialising when the page is refreshed and switching to `fallbackLng`.
 */
const initLng = i18next.resolvedLanguage || DEFAULT_LANG;
const initResources = {
  en_US: {
    translation: en_US.ui,
  },
  es_ES: {
    translation: es_ES.ui,
  },
  pt_BR: {
    translation: pt_BR.ui,
  },
  pt_PT: {
    translation: pt_PT.ui,
  },
  de_DE: {
    translation: de_DE.ui,
  },
  fr_FR: {

Review comment (suggestion):
This method will package all languages ​​into the system, which will affect the size of resources.

You can refer to the `ui/src/pages/Users/Settings/Interface/index.tsx` file and combine it with the methods in `ui/src/utils/localize.ts` to achieve this.

Code after:
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import { initReactI18next } from 'react-i18next';

import i18next from 'i18next';
import en_US from '@i18n/en_US.yaml';

import { DEFAULT_LANG, LANG_RESOURCE_STORAGE_KEY } from '@/common/constants';
import Storage from '@/utils/storage';

/**
 * Prevent i18n from re-initialising when the page is refreshed and switching to `fallbackLng`.
 */
const initLng = i18next.resolvedLanguage || DEFAULT_LANG;
const initResources = {
  en_US: {
    translation: en_US.ui,
  },
};

const storageLang = Storage.get(LANG_RESOURCE_STORAGE_KEY);
if (
  storageLang &&
  storageLang.resources &&
  storageLang.lng &&
  storageLang.lng !== 'en_US'
) {
  initResources[storageLang.lng] = {
    translation: storageLang.resources,
  };
}

i18next
  //  pass the i18n instance to react-i18next.
  .use(initReactI18next)
  .init({
    resources: initResources,
    lng: initLng,
    fallbackLng: DEFAULT_LANG,
    interpolation: {
      escapeValue: false,
    },
    react: {
      transSupportBasicHtmlNodes: true,
      // allow <br/> and simple html elements in translations