Merge pull request #6919 from Shopify/remove-react-i18n

Remove @shopify/react-i18n

Author: gonzaloriestra

packages/ui-extensions-dev-console/package.json

@@ -13,7 +13,6 @@
   },
   "dependencies": {
     "@shopify/polaris-icons": "^8.0.0",
-    "@shopify/react-i18n": "^7.5.0",
     "@shopify/ui-extensions-server-kit": "5.4.0",
     "copy-to-clipboard": "^3.3.3",
     "qrcode.react": "^4.2.0",

packages/ui-extensions-dev-console/src/App.tsx

@@ -4,7 +4,6 @@ import {Toast} from '@/foundation/Toast'
 import {Theme} from '@/foundation/Theme'
 import {ModalContainer} from '@/foundation/ModalContainer'
 import {ExtensionServerProvider, isValidSurface} from '@shopify/ui-extensions-server-kit'
-import {I18nContext, I18nManager} from '@shopify/react-i18n'
 import React from 'react'
 
 function getConnectionUrl() {
@@ -25,26 +24,16 @@ const extensionServerOptions = {
   surface: isValidSurface(surface) ? surface : undefined,
 }
 
-const i18nManager = new I18nManager({
-  locale: 'en',
-  onError(error) {
-    // eslint-disable-next-line no-console
-    console.error(error)
-  },
-})
-
 function App() {
   return (
     <ExtensionServerProvider options={extensionServerOptions}>
-      <I18nContext.Provider value={i18nManager}>
-        <Theme>
-          <Layout>
-            <Routes />
-            <Toast />
-            <ModalContainer />
-          </Layout>
-        </Theme>
-      </I18nContext.Provider>
+      <Theme>
+        <Layout>
+          <Routes />
+          <Toast />
+          <ModalContainer />
+        </Layout>
+      </Theme>
     </ExtensionServerProvider>
   )
 }

packages/ui-extensions-dev-console/src/components/Modal/components/Header/components/CloseButton/CloseButton.tsx

@@ -1,8 +1,8 @@
 import en from './translations/en.json'
 import {IconButton} from '@/components/IconButton/IconButton'
+import {useI18n} from '@/hooks/useI18n'
 import React from 'react'
 import {XIcon} from '@shopify/polaris-icons'
-import {useI18n} from '@shopify/react-i18n'
 
 interface CloseButtonProps {
   pressed?: boolean

packages/ui-extensions-dev-console/src/foundation/Layout/Layout.tsx

@@ -1,9 +1,9 @@
 import en from './translations/en.json'
 import * as styles from './Layout.module.scss'
 import {isAppPreview} from '@/utilities/app-preview'
+import {useI18n} from '@/hooks/useI18n'
 import React from 'react'
 import {WrenchIcon} from '@shopify/polaris-icons'
-import {useI18n} from '@shopify/react-i18n'
 
 interface Props {
   children: React.ReactNode

packages/ui-extensions-dev-console/src/hooks/useI18n.ts

@@ -0,0 +1,62 @@
+import React from 'react'
+
+type TranslationDictionary = Record<string, unknown>
+type Replacements = Record<string, string | number | React.ReactNode>
+
+interface I18nTranslator {
+  translate(key: string, replacements?: Replacements): React.ReactNode
+}
+
+function getNestedValue(obj: TranslationDictionary, key: string): string | undefined {
+  const result = key.split('.').reduce<unknown>((current, segment) => {
+    if (current != null && typeof current === 'object') {
+      return (current as TranslationDictionary)[segment]
+    }
+    return undefined
+  }, obj)
+  return typeof result === 'string' ? result : undefined
+}
+
+function interpolate(template: string, replacements?: Replacements): React.ReactNode {
+  if (!replacements) return template
+
+  const hasReactNodes = Object.values(replacements).some((value) => React.isValidElement(value))
+
+  if (!hasReactNodes) {
+    return template.replace(/\{(\w+)\}/g, (match, key: string) =>
+      key in replacements ? String(replacements[key]) : match,
+    )
+  }
+
+  const parts: React.ReactNode[] = []
+  const regex = /\{(\w+)\}/g
+  let lastIndex = 0
+  let match: RegExpExecArray | null
+
+  while ((match = regex.exec(template)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(template.slice(lastIndex, match.index))
+    }
+    const key = match[1]
+    parts.push(key in replacements ? replacements[key] : match[0])
+    lastIndex = regex.lastIndex
+  }
+
+  if (lastIndex < template.length) {
+    parts.push(template.slice(lastIndex))
+  }
+
+  return React.createElement(React.Fragment, null, ...parts)
+}
+
+export function useI18n({fallback}: {id: string; fallback: TranslationDictionary}): [I18nTranslator] {
+  return [
+    {
+      translate(key: string, replacements?: Replacements) {
+        const template = getNestedValue(fallback, key)
+        if (template == null) return key
+        return interpolate(template, replacements)
+      },
+    },
+  ]
+}

packages/ui-extensions-dev-console/src/sections/Extensions/Extensions.tsx

@@ -8,8 +8,8 @@ import {useApp} from './hooks/useApp'
 
 import {isEmbedded} from '@/utilities/embedded'
 import {isAppPreview} from '@/utilities/app-preview'
+import {useI18n} from '@/hooks/useI18n'
 import React from 'react'
-import {useI18n} from '@shopify/react-i18n'
 
 export function Extensions() {
   const [i18n] = useI18n({

packages/ui-extensions-dev-console/src/sections/Extensions/components/AppHomeRow/AppHomeRow.test.tsx

@@ -1,8 +1,6 @@
 import {AppHomeRow} from '.'
-import en from './translations/en.json'
 import {PreviewLink, QRCodeModal} from '..'
 import {DefaultProviders} from 'tests/DefaultProviders'
-import {mockI18n} from 'tests/mock-i18n'
 import {Button} from '@/components'
 import React from 'react'
 
@@ -19,8 +17,6 @@ vi.mock('@/components', () => ({
   Button: (props: any) => props.children,
 }))
 
-mockI18n(en)
-
 describe('<AppHomeRow/>', () => {
   const defaultState = {
     app: {url: 'mock.url', title: 'Mock App Title'},

packages/ui-extensions-dev-console/src/sections/Extensions/components/AppHomeRow/AppHomeRow.tsx

@@ -5,10 +5,9 @@ import {useApp} from '../../hooks/useApp'
 import {useExtensionServerOptions} from '../../hooks/useExtensionServerOptions.js'
 
 import {Button} from '@/components'
+import {useI18n} from '@/hooks/useI18n'
 import React, {useState} from 'react'
 
-import {useI18n} from '@shopify/react-i18n'
-
 export function AppHomeRow() {
   const [showModal, setShowModal] = useState(false)
   const [i18n] = useI18n({

packages/ui-extensions-dev-console/src/sections/Extensions/components/ExtensionRow/ExtensionRow.test.tsx

@@ -1,8 +1,6 @@
 import {ExtensionRow} from '.'
-import en from './translations/en.json'
 import {QRCodeModal} from '..'
 import {DefaultProviders} from 'tests/DefaultProviders'
-import {mockI18n} from 'tests/mock-i18n'
 import {Button} from '@/components'
 import React from 'react'
 
@@ -19,8 +17,6 @@ vi.mock('..', () => ({
   Status: () => null,
 }))
 
-mockI18n(en)
-
 describe('<ExtensionRow/>', () => {
   const legacyAdminExtension = mockExtension({type: 'product_subscription', surface: 'admin'})
   const legacyPosExtension = mockExtension({type: 'pos_ui_extension', surface: 'point_of_sale'})

packages/ui-extensions-dev-console/src/sections/Extensions/components/ExtensionRow/ExtensionRow.tsx

@@ -4,8 +4,8 @@ import * as styles from './ExtensionRow.module.scss'
 import {QRCodeModal, Row, Status} from '..'
 import {useExtension} from '../../hooks/useExtension'
 import {Button} from '@/components/Button'
+import {useI18n} from '@/hooks/useI18n'
 import React, {useState} from 'react'
-import {useI18n} from '@shopify/react-i18n'
 import {ExtensionPayload, ExtensionPoint, isUIExtension} from '@shopify/ui-extensions-server-kit'
 
 interface Props {