Mtlive Posts - Answer Overflow

Mtlive

•Created by Mtlive on 6/28/2024 in #support

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
    }
}

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
    }
}

8 replies

SSolidJS

•Created by Mtlive on 6/17/2024 in #support

Solid Start Nested Router

Hi Guys! How to Implement Partial Page Refresh (Nested Routing) I am developing an admin dashboard with a top navigation bar, a left-side menu, and a right-side content area. I am not sure how to simultaneously handle a standalone login page and update the right content area by clicking on the left-side menu using a single file routing approach. The login page has an independent layout, while after login, the layout is fixed and the route changes should only update the right-side content.

6 replies

Gaming

Programming