feat: add react components interpolation

terai-labs · Oct 24, 2023 · 005860d · 005860d
1 parent 4c1c523
commit 005860d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/packages/react/src/core/client/setup.tsx b/packages/react/src/core/client/setup.tsx
@@ -15,9 +15,10 @@ import {
 } from '@legendapp/state/persist'
 
 // Types
+import type { Dictionaries, Locale } from '@koi18n/types'
+import type { ReactNode } from 'react'
 import type { CreateSetupOptions, GetTsProps } from '../types'
 import type { SetupReactOptions, TsReactRenderProps } from '../types'
-import type { Dictionaries, Locale } from '@koi18n/types'
 
 export type SetupClient = ReturnType<typeof createSetupClient>
 export type SetupClientOptions = SetupReactOptions & {
@@ -57,7 +58,7 @@ export function createSetupClient({ getLocale }: CreateSetupOptions) {
       }
 
       return useCallback(
-        createTs<string, TsReactRenderProps>(props =>
+        createTs<string | ReactNode, TsReactRenderProps>(props =>
           tsRender({
             ...props,
             locale,

diff --git a/packages/react/src/core/server/setup.tsx b/packages/react/src/core/server/setup.tsx
@@ -7,6 +7,7 @@ import { createTs } from '@koi18n/ts'
 import { tsRender } from '../ts-render'
 
 // Types
+import type { ReactNode } from 'react'
 import type {
   SetupReactOptions,
   TsReactRenderProps,
@@ -26,7 +27,7 @@ export function createSetupServer({ getLocale }: CreateSetupOptions) {
     const getTs = async ({ chunkId }: GetTsProps = {}) => {
       const locale = getLocale()
       const dictionary = await loader(locale, chunkId ?? locale)
-      return createTs<string, TsReactRenderProps>(props =>
+      return createTs<string | ReactNode, TsReactRenderProps>(props =>
         tsRender({
           ...props,
           locale,

diff --git a/packages/react/src/core/ts-render.ts b/packages/react/src/core/ts-render.ts
@@ -4,6 +4,7 @@ import { interpolate } from '@koi18n/formatter'
 // Types
 import type { TsReactRenderProps } from './types'
 import type { Locale, Dictionary } from '@koi18n/types'
+import { interpolateComponents } from '.'
 
 export type TsOutputProps = TsReactRenderProps & {
   locale: Locale
@@ -16,7 +17,8 @@ export function tsRender({
   rawMessage,
   variables,
   dictionary,
-  format
+  format,
+  components
 }: TsOutputProps) {
   const message = dictionary?.[id] ?? rawMessage
   const interpolatedMessage = interpolate(
@@ -28,5 +30,17 @@ export function tsRender({
     { format }
   )
 
+  if (!isEmpty(components)) {
+    return interpolateComponents({
+      message: interpolatedMessage,
+      locale,
+      components
+    })
+  }
+
   return interpolatedMessage
 }
+
+const isEmpty = (obj: TsOutputProps['components']) => {
+  return Object.keys(obj).length === 0
+}