SolidJSS
SolidJS•2y ago•
7 replies
Mtlive

how using createRoot?

I am developing a multi-language configuration for my program. I have implemented it in the following way so that it can be called inside the component or in some modules. (If I use context, I can't use it outside the component)

However, I get such a warning in the browser console and I'm not sure if such a warning has any positive negative effect.

"menus.tsx:10
computations created outside a createRoot or render will never be disposed"


Please teach me, thank you!

import { createSignal, createRoot, createMemo } from 'solid-js'
import { en } from '~/i18n/en'
import { zh } from '~/i18n/zh'
import { vn } from '~/i18n/vn'
import * as i18n from '@solid-primitives/i18n'

export type Locale = 'en' | 'zh' | 'vn'

export type I18nDictionaries = {
    en: typeof en
    zh: typeof zh
    vn: typeof vn
}

export interface LocaleOption {
    label: string
    value: Locale
    disabled?: boolean
}

const dictionaries: I18nDictionaries = {
    zh: zh,
    en: en,
    vn: vn
}

const localeOptions: LocaleOption[] = [
    { label: 'English', value: 'en' },
    { label: '简体中文', value: 'zh' },
    { label: 'Tiếng Việt', value: 'vn' }
]

let t: i18n.ChainedTranslator<I18nDictionaries[Locale], string>

const i18nStore = createRoot(() => {
    console.log('i18n init.')
    const [locale, setLocale] = createSignal<Locale>('en')

    const dict = createMemo(() => i18n.flatten(dictionaries[locale()]))

    const translator = i18n.translator(() => dict(), i18n.resolveTemplate)

    t = i18n.chainedTranslator<I18nDictionaries[Locale], string>(
        dict(),
        translator
    )

    return { locale, setLocale }
})

export const useLocale = () => {
    return {
        t,
        locale: i18nStore.locale,
        setLocale: i18nStore.setLocale,
        localeOptions
    }
}
Was this page helpful?