Phrase in-context editing integration

[bn3t]

Hi,

In order to implement the phrase in-context editing, I would need that, when typesafe-i18n in a certain mode, to have typesafe-i18n return the key and not the translation. They explain this on this page in their documentation: https://help.phrase.com/help/integrate-in-context-editor-into-any-web-framework. At this stage, it seems difficult on my side as the developer using typesafe-i18n as I don't even the translation key as a string.

Do you think there is a way to do this ? Thanks for your help.

[ivanhofer]

Hi @bn3t,
interesting use case!

You would need to wrap the translation function LL into a Proxy. I have created this example to demonstrate how this could work using the svelte adapter.

src/i18n/i18n-svelte.ts

import { derived } from 'svelte/store'
import { initI18nSvelte } from 'typesafe-i18n/svelte'
import type { Formatters, Locales, TranslationFunctions, Translations } from './i18n-types'
import { loadedFormatters, loadedLocales } from './i18n-util'

const { locale, LL, setLocale } = initI18nSvelte<Locales, Translations, TranslationFunctions, Formatters>(loadedLocales, loadedFormatters)

export { locale, LL, setLocale }

// modified adapter code

let renderKeys = false // control render mode

const createProxy = (tf: TranslationFunctions, keys: string[] = []) =>
	new Proxy(
		Object.assign(
			(...args: unknown[]) => renderKeys
				? keys.join('.') // key to render
				: (tf as unknown as (...args: unknown[]) => string)(...args), // call the original translation function
			tf),
		{
			get: (target, key: string) => createProxy(target[key], [...keys, key])
		})

const modifiedLL = derived(LL, (tf) => createProxy(tf)) // intercept translation function

export default modifiedLL

Does this help?

[bn3t]

Thank you very much. It worked perfectly.

[ivanhofer]

This version is slightly more performant:

let renderKeys = false // control render mode

const createProxy = (tf: TranslationFunctions, keys: string[] = []) =>
	new Proxy(Object.assign(() => keys.join('.'), tf), {
		get: (target, key: string) => createProxy(target[key], [...keys, key])
	})

const modifiedLL = derived(LL, (tf) => renderKeys ? createProxy(tf) : tf) // intercept translation function

[bn3t]

Thanks again, I will implement this again when I can issue a PR on this part of this code.