Add i18n with lingui (#24)

* add intl with lingui * add translations * fixes * use local i18n instance
riccardoperra · Nov 10, 2024 · 8e86f4f · 8e86f4f
1 parent 84f2c1b
commit 8e86f4f
Show file tree

Hide file tree

Showing 17 changed files with 280 additions and 68 deletions.
diff --git a/packages/app/.gitignore b/packages/app/.gitignore
@@ -27,3 +27,7 @@ gitignore
 # System Files
 .DS_Store
 Thumbs.db
+
+# i18n
+src/locale/locales/_build/
+src/locale/locales/**/*.mjs
diff --git a/packages/app/app.config.ts b/packages/app/app.config.ts
@@ -16,11 +16,13 @@ import remarkGfm from 'remark-gfm';
 import {rehypeBlockquote} from './rehype-custom/rehypeCustomBlockquote';
 
 import {statebuilder} from 'statebuilder/compiler';
+import {lingui} from '@lingui/vite-plugin';
 
 const defaultConfig: ViteCustomizableConfig = {
   plugins: [
     viteTsConfigPaths(),
     customMdxConfig(),
+    lingui(),
     statebuilder({
       transformStores: ['eDefineAsync'],
       autoKey: true,
@@ -46,6 +48,11 @@ const defaultConfig: ViteCustomizableConfig = {
 
 export default defineConfig({
   middleware: './src/middleware.ts',
+  solid: {
+    babel: {
+      plugins: ['macros'],
+    },
+  },
   server: {
     prerender: {
       routes: ['/about', '/about/supported-workflow-features'],

diff --git a/packages/app/lingui.config.ts b/packages/app/lingui.config.ts
@@ -0,0 +1,15 @@
+import type {LinguiConfig} from '@lingui/conf';
+
+const config: LinguiConfig = {
+  locales: ['en'],
+  compileNamespace: 'es',
+  catalogs: [
+    {
+      path: '<rootDir>/src/locales/{locale}',
+      include: ['src'],
+    },
+  ],
+  format: 'po',
+};
+
+export default config;
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -11,6 +11,9 @@
     "dev": "vinxi dev",
     "build": "vinxi build",
     "start": "vinxi start",
+    "intl:build": "pnpm intl:extract && pnpm intl:compile",
+    "intl:extract": "lingui extract",
+    "intl:compile": "lingui compile",
     "version": "vinxi version"
   },
   "dependencies": {
@@ -29,6 +32,8 @@
     "@kobalte/core": "^0.13.7",
     "@kobalte/utils": "^0.9.1",
     "@lezer/highlight": "^1.2.1",
+    "@lingui/conf": "^4.14.0",
+    "@lingui/core": "^4.14.0",
     "@mdx-js/mdx": "^3.1.0",
     "@open-rpc/client-js": "^1.8.1",
     "@pipelineui/workflow-languageserver": "workspace:*",
@@ -69,7 +74,12 @@
     "node": ">=18"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@lingui/cli": "^4.14.0",
+    "@lingui/macro": "^4.14.0",
+    "@lingui/vite-plugin": "^4.14.0",
     "@types/ws": "^8.5.12",
+    "babel-plugin-macros": "^3.1.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",

diff --git a/packages/app/src/app.tsx b/packages/app/src/app.tsx
@@ -1,24 +1,33 @@
+import {setupI18n} from '@lingui/core';
 import {MetaProvider, Title} from '@solidjs/meta';
 import {Router} from '@solidjs/router';
 import {FileRoutes} from '@solidjs/start/router';
 import {Suspense} from 'solid-js';
-import './global-codeui.css';
-import './app.css';
 import {StateProvider} from 'statebuilder';
+import './app.css';
+import './global-codeui.css';
+import {I18nProvider} from './locales/i18n';
+
+const {messages: enMessages} = await import('./locales/en.po');
 
 export default function App() {
+  const i18n = setupI18n();
+  i18n.loadAndActivate({locale: 'en', messages: enMessages});
+
   return (
-    <Router
-      root={props => (
-        <MetaProvider>
-          <Title>PipelineUI</Title>
-          <Suspense>
-            <StateProvider>{props.children}</StateProvider>
-          </Suspense>
-        </MetaProvider>
-      )}
-    >
-      <FileRoutes />
-    </Router>
+    <I18nProvider value={i18n}>
+      <Router
+        root={props => (
+          <MetaProvider>
+            <Title>PipelineUI</Title>
+            <Suspense>
+              <StateProvider>{props.children}</StateProvider>
+            </Suspense>
+          </MetaProvider>
+        )}
+      >
+        <FileRoutes />
+      </Router>
+    </I18nProvider>
   );
 }
diff --git a/packages/app/src/components/Editor/Header/CurrentUser/CurrentUser.tsx b/packages/app/src/components/Editor/Header/CurrentUser/CurrentUser.tsx
@@ -11,11 +11,15 @@ import type {Models} from 'appwrite';
 import {Show} from 'solid-js';
 import {logout, signupWithGithub} from '~/lib/session';
 import {badge, currentUser} from './CurrentUser.css';
+import {useI18n} from '~/locales/i18n';
+import {msg} from '@lingui/macro';
 export interface CurrentUserBarProps {
   user: Models.User<any> | null;
 }
 
 export function EditorHeaderCurrentUser(props: CurrentUserBarProps) {
+  const {_} = useI18n();
+
   const initials = (user: Models.User<any>) => {
     if (user.name) {
       const [firstName, lastName] = user.name.split(' ');
@@ -43,7 +47,7 @@ export function EditorHeaderCurrentUser(props: CurrentUserBarProps) {
             type={'submit'}
             loading={isSignup.pending}
           >
-            Signup with Github
+            {_(msg`Signup with GitHub`)}
           </Button>
         </form>
       }
@@ -74,7 +78,7 @@ export function EditorHeaderCurrentUser(props: CurrentUserBarProps) {
                 logoutAction().then(() => window.location.reload());
               }}
             >
-              Logout
+              {_(msg`Logout`)}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

diff --git a/packages/app/src/components/Editor/Header/Header.tsx b/packages/app/src/components/Editor/Header/Header.tsx
@@ -16,6 +16,8 @@ import {EditorContext} from '../editor.context';
 import {EditorUiStore} from '../../../store/editor/ui.store';
 import * as styles from './EditorHeader.css';
 import {EditorHeaderCurrentUser} from './CurrentUser/CurrentUser';
+import {useI18n} from '~/locales/i18n';
+import {msg} from '@lingui/macro';
 
 export interface EditorHeaderProps {
   showBack: boolean;
@@ -42,6 +44,7 @@ function EditorHeaderActionButton(
 }
 
 function EditorHeaderForkButton() {
+  const {_} = useI18n();
   const [isOpen, setOpen] = createSignal(false);
   const editorStore = provideState(EditorStore);
   const editorContext = useContext(EditorContext)!;
@@ -51,13 +54,14 @@ function EditorHeaderForkButton() {
       <PopoverTrigger
         as={triggerProps => (
           <Button theme={'primary'} {...triggerProps}>
-            Fork
+            {_(msg`Fork`)}
           </Button>
         )}
       />
       <PopoverContent variant={'bordered'}>
-        Forking this source will create a new scratch remotely connected to your
-        profile, that can be modified only by you.
+        {_(
+          msg`Forking this source will create a new scratch remotely connected to your profile, that can be modified only by you`,
+        )}
         <div>
           <form
             method={'post'}
@@ -68,11 +72,11 @@ function EditorHeaderForkButton() {
             )}
           >
             <Button size={'xs'} theme={'primary'} type={'submit'}>
-              Confirm
+              {_(msg`Confirm`)}
             </Button>
           </form>
           <Button size={'xs'} theme={'secondary'}>
-            Cancel
+            {_(msg`Cancel`)}
           </Button>
         </div>
       </PopoverContent>
@@ -81,6 +85,7 @@ function EditorHeaderForkButton() {
 }
 
 export function EditorHeader(props: EditorHeaderProps) {
+  const {_} = useI18n();
   const editorUi = provideState(EditorUiStore);
   const editorStore = provideState(EditorStore);
   const user = provideState(UserStore);
@@ -92,7 +97,7 @@ export function EditorHeader(props: EditorHeaderProps) {
       <header class={styles.header}>
         <Show when={props.showBack}>
           <IconButton
-            aria-label={'Go back'}
+            aria-label={_(msg`Go back`)}
             size={'xs'}
             theme={'secondary'}
             pill
@@ -131,7 +136,7 @@ export function EditorHeader(props: EditorHeaderProps) {
                       size={'sm'}
                       loading={isUpdating.pending}
                     >
-                      Save
+                      {_(msg`Save`)}
                     </Button>
                   </form>
                 </Show>
@@ -147,21 +152,21 @@ export function EditorHeader(props: EditorHeaderProps) {
           active={editorUi.get.leftPanel === 'code'}
           onClick={() => editorUi.actions.toggleLeftPanel('code')}
         >
-          Code
+          {_(msg`Code`)}
         </EditorHeaderActionButton>
         <EditorHeaderActionButton
           active={editorUi.get.leftPanel === 'merge'}
           onClick={() => editorUi.actions.toggleLeftPanel('merge')}
         >
-          Merge view
+          {_(msg`Merge view`)}
         </EditorHeaderActionButton>
 
         <div class={styles.subHeaderRightContent}>
           <EditorHeaderActionButton
             active={editorUi.get.rightPanel === 'properties'}
             onClick={() => editorUi.actions.toggleRightPanel('properties')}
           >
-            Properties
+            {_(msg`Properties`)}
           </EditorHeaderActionButton>
         </div>
       </div>

diff --git a/packages/app/src/components/Editor/RightSidebar/RightSidebar.tsx b/packages/app/src/components/Editor/RightSidebar/RightSidebar.tsx
diff --git a/packages/app/src/components/Editor/StatusBar/StatusBar.tsx b/packages/app/src/components/Editor/StatusBar/StatusBar.tsx
@@ -1,3 +1,11 @@
+import {Icon} from '#ui/components/Icon';
+import {Button, IconButton, Tooltip} from '@codeui/kit';
+import {msg} from '@lingui/macro';
+import {provideState} from 'statebuilder';
+import {useI18n} from '~/locales/i18n';
+import {EditorStore} from '~/store/editor/editor.store';
+import {EditorUiStore} from '~/store/editor/ui.store';
+import {CanvasStore} from '../../../store/editor/canvas.store';
 import {
   diagnosticCounter,
   diagnosticCounterBar,
@@ -6,18 +14,12 @@ import {
   statusBar,
   statusBarAction,
 } from './EditorStatusBar.css';
-import {provideState} from 'statebuilder';
-import {CanvasStore} from '../../../store/editor/canvas.store';
-import {Button, IconButton, Tooltip} from '@codeui/kit';
-import {Icon} from '#ui/components/Icon';
-import {EditorStore} from '~/store/editor/editor.store';
-import {EditorUiStore} from '~/store/editor/ui.store';
-import {createEffect} from 'solid-js';
 
 export function EditorStatusBar() {
   const canvasState = provideState(CanvasStore);
   const editorUiStore = provideState(EditorUiStore);
   const editorStore = provideState(EditorStore);
+  const {_} = useI18n();
 
   const size = () => Math.floor(canvasState.get.scale * 100);
 
@@ -37,7 +39,7 @@ export function EditorStatusBar() {
         <div class={diagnosticCounterBar}>
           <Tooltip
             theme={'secondary'}
-            content={`Errors: ${errors()}, Warnings: ${warnings()}`}
+            content={_(msg`Errors: ${errors()}, Warnings: ${warnings()}`)}
           >
             <Button
               class={statusBarAction()}
@@ -66,12 +68,12 @@ export function EditorStatusBar() {
       </div>
 
       <div class={rightSide}>
-        <Tooltip theme={'secondary'} content={'Fit to screen'}>
+        <Tooltip theme={'secondary'} content={_(msg`Fit to screen`)}>
           <IconButton
             size={'xs'}
             theme={'secondary'}
             variant={'ghost'}
-            aria-label={'Fit'}
+            aria-label={_(msg`Fit to screen`)}
             onClick={() => canvasState.fitToCenter()}
           >
             <Icon name={'fit_screen'} />

diff --git a/packages/app/src/components/Home/CurrentUser/CurrentUser.tsx b/packages/app/src/components/Home/CurrentUser/CurrentUser.tsx
@@ -11,11 +11,14 @@ import type {Models} from 'appwrite';
 import {Show} from 'solid-js';
 import {logout, signupWithGithub} from '~/lib/session';
 import {badge, currentUser} from './CurrentUser.css';
+import {useI18n} from '~/locales/i18n';
+import {msg} from '@lingui/macro';
 export interface CurrentUserBarProps {
   user: Models.User<any> | null;
 }
 
 export function CurrentUserBar(props: CurrentUserBarProps) {
+  const {_} = useI18n();
   const initials = (user: Models.User<any>) => {
     if (user.name) {
       const [firstName, lastName] = user.name.split(' ');
@@ -43,7 +46,7 @@ export function CurrentUserBar(props: CurrentUserBarProps) {
             type={'submit'}
             loading={isSignup.pending}
           >
-            Signup with Github
+            {_(msg`Signup with GitHub`)}
           </Button>
         </form>
       }
@@ -76,7 +79,7 @@ export function CurrentUserBar(props: CurrentUserBarProps) {
                 logoutAction().then(() => window.location.reload());
               }}
             >
-              Logout
+              {_(msg`Logout`)}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

diff --git a/packages/app/src/components/Home/Footer/Footer.tsx b/packages/app/src/components/Home/Footer/Footer.tsx
@@ -1,25 +1,28 @@
+import {msg} from '@lingui/macro';
 import {A} from '@solidjs/router';
-import {footer, footerContent, footerLinks, footerLink} from './Footer.css';
+import {useI18n} from '~/locales/i18n';
+import {footer, footerContent, footerLink, footerLinks} from './Footer.css';
 
 export function HomeFooter() {
+  const {_} = useI18n();
   return (
     <footer class={footer}>
       <div class={footerContent}>
         <div class={footerLinks}>
           <A class={footerLink} href={'/about'}>
-            About
+            {_(msg`About`)}
           </A>
 
           <A
             class={footerLink}
             target="blank"
             href={'https://github.com/riccardoperra/pipelineui'}
           >
-            Source
+            {_(msg`Source`)}
           </A>
         </div>
         <span style={{color: '#ddd'}}>
-          Built with{' '}
+          {_(msg`Built with`)}
           <A class={footerLink} href="https://github.com/solidjs/solid">
             Solid
           </A>{' '}