TyphonJS•8mo ago

lang localization in svelte template?

So far I've only managed to do this via data-tooltip, which picks up the localization string magically (presumably a FoundryVTT feature). What's the best way to use localization strings in a TJS-inspired svelte template directly? I tried this:

export const lang = game.i18n.localize;

<header> {lang("MY.langstring")} </header>

export const lang = game.i18n.localize;

<header> {lang("MY.langstring")} </header>

... but no go

21 Replies

Vauxs•8mo ago

Should work 🤔 If anything (string) => game.i18n.localize(string) Unless the string is invalid

geoidesicOP•8mo ago

Weird. Wrapping it in a closure, as you show, works. I don't understand why that's necessary.

Vauxs•8mo ago

Looking at the function its probably because game.i18n.localize accesses this variables of game.i18n And your re-definition only copies the function I.e. You are cloning the function without context as opposed to just, making a shortcut which was your intention

geoidesicOP•8mo ago

ok, so the context of this changes. Makes sense. Tx This would probably work too then:

let lang = game.i18n.localize.bind(game.i18n);

let lang = game.i18n.localize.bind(game.i18n);

Vauxs•8mo ago

Probably, see for yourself

geoidesicOP•8mo ago

Confirmed, it does.

El Saico•8mo ago

A lightbulb has gone off on my head as I remember facing the same issue, and TRL actually has a helper function to handle scoping shenanigans like this:

import { localize } from "#runtime/svelte/helper";

import { localize } from "#runtime/svelte/helper";

Vauxs•8mo ago

incredible my solution was making my own helper that just picked up whether to use format or localize based on the arguments lol

TyphonJS (Michael)•8mo ago

Thanks @El Saico for jumping in with the library answer. Docs are here. There are several handy features for Foundry in TRL, but many more extending the capabilities of Svelte as well that are handy to learn about. I should comment that the selectOptions / radioBoxes "legacy" helpers will be going away after the TRL 0.3.x / Svelte 5 release. Those existed early on for anyone transitioning from core Foundry / Handlebars helpers.

geoidesicOP•8mo ago

While we're on the topic. Localisation doesn't seem to HMR. Is there a way to make it HMR? I have added lang to the vite.config proxy:

      server: {
         port: 30001,
         open: '/game',
         proxy: {
            // Serves static files from main Foundry server.
            [`^(/${s_PACKAGE_ID}/(assets|lang|packs|style.css))`]: 'http://localhost:30000',

            // All other paths besides package ID path are served from main Foundry server.
            [`^(?!/${s_PACKAGE_ID}/)`]: 'http://localhost:30000',

            // Enable socket.io from main Foundry server.
            '/socket.io': { target: 'ws://localhost:30000', ws: true }
         }
      },

      server: {
         port: 30001,
         open: '/game',
         proxy: {
            // Serves static files from main Foundry server.
            [`^(/${s_PACKAGE_ID}/(assets|lang|packs|style.css))`]: 'http://localhost:30000',

            // All other paths besides package ID path are served from main Foundry server.
            [`^(?!/${s_PACKAGE_ID}/)`]: 'http://localhost:30000',

            // Enable socket.io from main Foundry server.
            '/socket.io': { target: 'ws://localhost:30000', ws: true }
         }
      },

TyphonJS (Michael)•8mo ago

Yes.. You have to configure Foundry for language translations updates by adding this block to your Foundry package manifest. I couldn't find Foundry documentation on this right away. --- Unfortunately I think I made a small mistake though in the main TRL runtime package.json for the last public release that does not include the HMR code in TRL to respond to the language updates from Foundry. If I recall correctly I left out some TRL source files from the sideEffects field in the TRL package.json, so if the first step above doesn't work then you might have to modify the local ly installed TRL package.json. This of course will be fixed for the 0.2.0 release of TRL / verified working. It's rather neat to be able to type new / changing content in lang files and have it immediately just show up in a running app on Foundry.

geoidesicOP•8mo ago

Looks that way, I made the manifest change you suggested but lang isn't triggering HMR.

TyphonJS (Michael)•8mo ago

You can try adding the following sideEffects field to the TRL @typhonjs-fvtt/runtime package.json: https://github.com/typhonjs-fvtt-lib/typhonjs/blob/main/package.json#L226C1-L232C5 It's not specifically HMR related. Foundry isn't doing HMR, but has a special feature through the server to signal updates. TRL responds to that signal and forces an update. That code though gets removed unless the sideEffects field in the package.json is not like above. As mentioned I'll make sure this works for the 0.2.0 release. If you add that field Vite caches packages for the dev server, so you'll have to delete the Vite cache and restart the dev server.

geoidesicOP•8mo ago

That kinda works... all I have to do is refresh the browser page to load the new lang strings, which is definitely an improvement. Tx!

Vauxs•8mo ago

the Foundry method for updating translations works fine for me, all I ever did was just add the required module.json data

TyphonJS (Michael)•8mo ago

Well.. TRL is capable of seamless language updates. As mentioned I made a small mistake in the last release for it to be enabled out the box when enabled in the Foundry package manifest. It's pretty slick. IE you can have your app up and running and change language file content and it just appears without a refresh of the browser page. This will be fixed / verified for the 0.2.0 release.

geoidesicOP•8mo ago

It would be amazing if css could also HMR in the same way. Currently it's a bit frustrating that one has to build in order to ensure your styles are accurate because foundry will pull in the built style.css file which overrides any local scss includes.

Vauxs•8mo ago

doesn't dev also build css files? If anything, you can make the after-build css blank if you are coming across the issue of priority

geoidesicOP•8mo ago

Yeah, that's a good idea 👍🏻 I've changed the dev script to remove style.css

  "scripts": {
    "dev": "rm style.css; vite",

  "scripts": {
    "dev": "rm style.css; vite",

Vauxs•8mo ago

That will make Foundry complain in the admin screen, dont delete the files your module is asking for

geoidesicOP•8mo ago

This solves that problem by blanking style.css instead of removing it.

  "scripts": {
    "dev": " > style.css; vite",

  "scripts": {
    "dev": " > style.css; vite",

Gaming

Programming

lang localization in svelte template?

Did you find this page helpful?