Translations

[shannonhochkins]

I'm only pointing this out as I noticed you're scraping translations from the docker image but this isn't necessary, you can retrieve the exact same locales over a websocket without having to download anything and it will be tailored to the user's instance with everything needed available and ready.

I have my own home assistant project in react which I'm starting to make multi lingal and stumbled across your project and noticed it was multi lingal so I wanted to know how you did it

I did a deep dive into the home assistant front-end and found this: https://github.com/home-assistant/frontend/blob/f2b43ddad81149b07d56cc0a6dce43a1c33f573d/src/data/translation.ts#L92 which you have acess to via connection.sendMessagePromise. // here's what I'm doing in my project

const fetchTranslations = async (connection: Connection, config: HassConfig | null): Promise<Record<string, string>> => {
    const categories =["title", "services", "entity", "entity_component", 'device_automation', 'selector'];
    const responses = await Promise.all(
      categories.map(async (category) => {
        const response = await connection.sendMessagePromise<{ resources: Record<string, string> }>({
          type: "frontend/get_translations",
          category,
          language: config?.language,
        });
        return response.resources;
      }),
    )
    return responses.reduce<Record<string, string>>((acc, current) => ({ ...acc, ...current }), {} as Record<string, string>);
  }

Thought it might help you out by reducing some overhead :)

Only thing is you'd need to be authenticated already which is the only main difference for you

[matt8707]

Thank you for the input! Here's what I'm thinking

Scraping

• Only the translations that are used are loaded.
• Caching of selected translations.
• Translations are available before the page is rendered, resulting in less layout shift.
• Fallback to the translation key name without specifying a default.

WebSocket

• Up-to-date translations with every HA release, even if there's no new release on my side.
• Skips the scraping step entirely.
• ???

[shannonhochkins]

Scraping

• Safer to scrape to keep a version that you can ensure hasn't changed unexpectedly
• Fallback to the translation key name without specifying a default.
  • On the above point, I have a simple localize function which i use to provide a default if the key is unavailable localize('components.something.somethingelse', 'Fallback value')
• Caching of selected translations. - websockets are not cached, you could build a cache mechanism in pretty easily though and only update the cache when your main language setting changes

WebSocket

• websocket connections are NOT cached
• websockets are designed to be quick by nature, I'm not sure how long your request (even cached) takes to retrieve & download the JSON data for your translations, just as an example, to download more or less the entire translations available over websockets is taking 0.3s currently
• Direct link to homeassistant instance - A user will have different locales to another user because of integrations and settings, this means that locales could be different between users