component re-render with translatable does not work

[jerrygzy]

Hi, I think this is a issue I came across before, but this time it is blocking the dev process.

basically I have a component which use translatable to re-render the text for different languages. please see code below.

index.nim

import happyx
import std/strformat

const DEFAULT_LANG = "en"

translatable:
    "Language":
        "ru" -> "Язык"
        "zh" -> "语言"


# Header
proc header(title: string): TagRef =
  return buildHtml:
    tHead:
      tMeta(charset = "utf-8")
      tMeta(name="viewport", content="width=device-width, initial-scale=1")
      tTitle: { title }
      # Htmx , hyperscript, extensions
      tScript(src = "https://unpkg.com/[email protected]") 
      tScript(src = "https://unpkg.com/[email protected]") 
      tScript(src = "https://unpkg.com/htmx.org/dist/ext/ws.js")
      # font-awesome, daisyUI and tailwind from CDN
      tLink( href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.css", rel="stylesheet") # find icons from https://fontawesome.com/search
      tLink( href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css", rel="stylesheet", type="text/css")
      tScript(src = "https://cdn.tailwindcss.com") 

component LanguageButton:
    name: string
    lang: string = DEFAULT_LANG
    `template`:
        tButton("_"=fmt"on click sendPostRequest('{self.lang}')" ): 
            {self.name}

component I18nWidget:  # example component which use translatable
    lang: string = DEFAULT_LANG
    `template`:
        nim:
            var acceptLanguage = self.lang.val
        tDiv(id="CurrentLang"):
                {translate "Language"}


proc mainPage*(title: string, cookies: StringTableRef): TagRef =  

    let acceptLanguage = 
        if cookies.hasKey("clientLanguage"): 
            cookies["clientLanguage"] 
        else: 
            DEFAULT_LANG

    return buildHtml:
        tHtml("data-theme" = "light"):
            {header(title)}
        tBody():
            tDiv(class="bg-base-100 drawer"):
                tInput(id="drawer", type="checkbox", class="drawer-toggle") 
                tDiv(class="drawer-content"):
                    I18nWidget(acceptLanguage)  # this one does not works
                    tDiv(id="CurrentLang"):  # this one works
                        {translate "Language"}
                    LanguageButton("English")
                    LanguageButton("Russian", "ru")
                    LanguageButton("中文", "zh")

            tScript(type="text/hyperscript"):
                """
                def sendPostRequest(l)
                    fetch '/' {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({"lang": l})
                    }
                    then call location.reload()
                    
                """

main.nim

# Import HappyX
import
  happyx
import
  index

model Language:
  lang: string


serve("127.0.0.1", 5000):
  get "/":
    echo inCookies
    {.gcsafe.}:
      return mainPage("APP_NAME", inCookies) 

  post "/[la:Language:json]":
    echo la
    outCookies.add(setCookie("clientLanguage", la.lang, secure = true, httpOnly = true))
    return "OK"

[Ethosa]

you should to reload page from javascript/hyperscript directly after sending POST request

[jerrygzy]

maybe I did not explain clearly, let me take the code in part.

component I18nWidget:  # example component which use translatable
    lang: string = DEFAULT_LANG
    `template`:
        nim:
            var acceptLanguage = self.lang.val
        tDiv(id="CurrentLang"):
                {translate "Language"}

I18nWidget(acceptLanguage)  # this one does not re-render

tDiv(id="CurrentLang"):  # this one re-render OK
    {translate "Language"}

[Ethosa]

hm 🤔
I'll test it soon