Skip to content

Consider using a signal-like/reactive interface for translations #26

@macarie

Description

@macarie

With a nanostores-like interface:

const { locale, translations, t, useTranslations } = defineTranslationsConfig(...)

locale.listen((locale) => {
	console.log('new locale set:', locale)
})

translations.listen((translations) => {
	valibot.setGlobalMessage((issue) => t(translations.errors.generic, { input: issue.message }))
})

console.log(
	t(
		await (translations.get())
			.article
			.heading
			.publishedBy,
		{ ... }
	)
)

const Component = () => {
	const heading = useTranslations(translations, 'article.heading')
	// or like it is now
	const heading = useTranslations('article.heading')

	return <span>{t(heading.publishedBy, { name })}</span>
}

With this interface, it's possible to remove the get* functions and builders, greatly simplifying both the t package and the adapters (~> also allowing the removal of the setup parameter).

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestspikeRequires exploring potential solutionstChanges regarding the `t` package

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions