Set up i18n package (#6991)

* build: change package scopes

* build: create packages workspace

* feat: create initial i18n package

* feat: create import locale fn

* chore: some peaks

* refactor: remove duplicated type

* chore: set up lint

* chore: dep fix

* fix: crowdin config

* fix: fix modules, eslint

* fix: fixed lint, test and build process

* chore: code review changes

* chore: fix turbo.json

* chore: fix package versions

* fix: fix build due to shiki

* chore: (unrelated) shiki js engine

---------

Co-authored-by: Claudio Wunder <[email protected]>

Author: araujogui

.github/workflows/translations-pr.yml

@@ -12,8 +12,8 @@ on:
       - 'apps/site/pages/**/*.mdx'
       - '!apps/site/pages/en/**/*.md'
       - '!apps/site/pages/en/**/*.mdx'
-      - 'apps/site/i18n/locales/*.json'
-      - '!apps/site/i18n/locales/en.json'
+      - 'packages/i18n/locales/*.json'
+      - '!packages/i18n/locales/en.json'
 
 permissions:
   actions: read

.gitignore

@@ -33,3 +33,5 @@ tsconfig.tsbuildinfo
 
 # Sentry Config File
 .sentryclirc
+
+dist/

.husky/pre-commit

@@ -1,6 +1,3 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 # lint and format staged files
 npx lint-staged
 

apps/site/.storybook/preview.tsx

@@ -1,9 +1,9 @@
+import englishLocale from '@node-core/website-i18n/locales/en.json';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import type { Preview, ReactRenderer } from '@storybook/react';
 import { NextIntlClientProvider } from 'next-intl';
 
 import { STORYBOOK_MODES, STORYBOOK_SIZES } from '@/.storybook/constants';
-import englishLocale from '@/i18n/locales/en.json';
 import { NotificationProvider } from '@/providers/notificationProvider';
 
 import '../next.fonts';

apps/site/components/Common/LanguageDropDown/index.tsx

@@ -1,11 +1,10 @@
 import { LanguageIcon } from '@heroicons/react/24/outline';
+import type { LocaleConfig } from '@node-core/website-i18n/types';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import classNames from 'classnames';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
-import type { LocaleConfig } from '@/types';
-
 import styles from './index.module.css';
 
 type SimpleLocaleConfig = Pick<LocaleConfig, 'name' | 'code'>;

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -6,12 +6,10 @@ import type { FC } from 'react';
 
 import CodeBox from '@/components/Common/CodeBox';
 import { ReleaseContext } from '@/providers/releaseProvider';
-import { getShiki, highlightToHtml } from '@/util/getHighlighter';
+import { shikiPromise, highlightToHtml } from '@/util/getHighlighter';
 import { getNodeDownloadSnippet } from '@/util/getNodeDownloadSnippet';
 
-// We cannot do top-level awaits on utilities or code that is imported by client-only components
-// hence we only declare a Promise and let it be fulfilled by the first call to the function
-const memoizedShiki = getShiki();
+const memoizedShiki = shikiPromise.then(highlightToHtml);
 
 const ReleaseCodeBox: FC = () => {
   const { platform, os, release } = useContext(ReleaseContext);
@@ -25,9 +23,7 @@ const ReleaseCodeBox: FC = () => {
     // but usually we should recommend users to download "major" versions
     // since our Download Buttons get the latest minor of a major, it does make sense
     // to request installation of a major via a package manager
-    memoizedShiki
-      .then(shiki => highlightToHtml(shiki)(updatedCode, 'bash'))
-      .then(setCode);
+    memoizedShiki.then(shiki => shiki(updatedCode, 'bash')).then(setCode);
     // Only react when the specific release number changed
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [release.versionWithPrefix, os, platform]);

apps/site/eslint.config.js

@@ -1,4 +1,3 @@
-import { fixupPluginRules } from '@eslint/compat';
 import { FlatCompat } from '@eslint/eslintrc';
 import js from '@eslint/js';
 import importX from 'eslint-plugin-import-x';
@@ -9,27 +8,16 @@ import storybook from 'eslint-plugin-storybook';
 import tseslint from 'typescript-eslint';
 
 const compat = new FlatCompat();
-const pluginToPatch = '@next/next';
 
-const compatConfig = compat
-  .config({
-    extends: [
-      // https://github.com/vercel/next.js/discussions/49337
-      'plugin:@next/eslint-plugin-next/core-web-vitals',
-
-      // https://github.com/facebook/react/issues/28313
-      'plugin:react-hooks/recommended',
-    ],
-  })
-  .map(entry => {
-    if (Object.hasOwn(entry.plugins, pluginToPatch)) {
-      entry.plugins[pluginToPatch] = fixupPluginRules(
-        entry.plugins[pluginToPatch]
-      );
-    }
+const compatConfig = compat.config({
+  extends: [
+    // https://github.com/vercel/next.js/discussions/49337
+    'plugin:@next/eslint-plugin-next/core-web-vitals',
 
-    return entry;
-  });
+    // https://github.com/facebook/react/issues/28313
+    'plugin:react-hooks/recommended',
+  ],
+});
 
 export default tseslint.config(
   {
@@ -58,6 +46,7 @@ export default tseslint.config(
       'no-relative-import-paths': noRelativeImportPaths,
     },
     rules: {
+      '@next/next/no-duplicate-head': 'off',
       '@typescript-eslint/array-type': ['error', { default: 'generic' }],
       '@typescript-eslint/consistent-type-imports': 'error',
       '@typescript-eslint/no-require-imports': 'off',

apps/site/i18n.tsx

@@ -1,3 +1,4 @@
+import { importLocale } from '@node-core/website-i18n';
 import { getRequestConfig } from 'next-intl/server';
 
 import { availableLocaleCodes } from '@/next.locales.mjs';
@@ -7,13 +8,15 @@ const loadLocaleDictionary = async (locale: string) => {
   if (locale === 'en') {
     // This enables HMR on the English Locale, so that instant refresh
     // happens while we add/change texts on the source locale
-    return import('./i18n/locales/en.json').then(f => f.default);
+    return import('@node-core/website-i18n/locales/en.json').then(
+      f => f.default
+    );
   }
 
   if (availableLocaleCodes.includes(locale)) {
     // Other languages don't really require HMR as they will never be development languages
     // so we can load them dynamically
-    return import(`./i18n/locales/${locale}.json`).then(f => f.default);
+    return importLocale(locale);
   }
 
   throw new Error(`Unsupported locale: ${locale}`);

apps/site/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/site/next.locales.mjs

@@ -1,27 +1,31 @@
 'use strict';
 
-import localeConfig from './i18n/config.json' assert { type: 'json' };
+import {
+  getAvailableLocales,
+  getAvailableLocaleCodes,
+  getDefaultLocale,
+  getAvailableLocalesMap,
+  getAllLocaleCodes,
+} from '@node-core/website-i18n';
 
 // As set of available and enabled locales for the website
 // This is used for allowing us to redirect the user to any
 // of the available locales that we have enabled on the website
-const availableLocales = localeConfig.filter(locale => locale.enabled);
+const availableLocales = getAvailableLocales();
 
 // This gives an easy way of accessing all available locale codes
-const availableLocaleCodes = availableLocales.map(locale => locale.code);
+const availableLocaleCodes = getAvailableLocaleCodes();
 
 // This provides the default locale information for the Next.js Application
 // This is marked by the unique `locale.default` property on the `en` locale
-/** @type {import('./types').LocaleConfig} */
-const defaultLocale = availableLocales.find(locale => locale.default);
+/** @type {import('@node-core/website-i18n/types').LocaleConfig} */
+const defaultLocale = getDefaultLocale();
 
 // Creates a Map of available locales for easy access
-const availableLocalesMap = Object.fromEntries(
-  localeConfig.map(locale => [locale.code, locale])
-);
+const availableLocalesMap = getAvailableLocalesMap();
 
 // Creates all supported locales
-const allLocaleCodes = localeConfig.map(locale => locale.code);
+const allLocaleCodes = getAllLocaleCodes();
 
 export {
   allLocaleCodes,