Svelte component text doesn't update

Question

I'm using Blockly + SvelteJS, now I am trying to add language support. So I have Toolbox.svelte component that looks like this:

<xml id="toolbox" bind:this={toolbox} style="display:none">
  <category name={Msg.CATEGORY_LOGIC} colour="#5b80a5">
    <block type="controls_if" />
  </category>
</xml>
<script>
  import Blockly from "blockly";
  $: Msg = Blockly.Msg;

  export let toolbox = undefined;
</script>

And also I have a script that has update locale function. It updates Blockly.Msg

import Blockly from "blockly";

import {categoryNames as categoryEN, blockNames as blockEN} from "./en_US.json";
import {categoryNames as categoryRU, blockNames as blockRU} from "./ru_RU.json";

export function applyBlocklyLocale(locale) {
    switch (locale) {
        case "en":
            for (let key in categoryEN) {
                Blockly.Msg["CATEGORY_" + key.toUpperCase()] = categoryEN[key];
            };

            for (let key in blockEN) {
                Blockly.Msg["BLOCK_" + key.toUpperCase()] = categoryEN[key];
            };
            break;
    
        case "ru":
            for (let key in categoryRU) {
                Blockly.Msg["CATEGORY_" + key.toUpperCase()] = categoryRU[key];
            };

            for (let key in blockRU) {
                Blockly.Msg["BLOCK_" + key.toUpperCase()] = categoryRU[key];
            };
            break;
    };
    Blockly.Msg = Blockly.Msg
};

But when I run this function, Blockly.Msg updates, and toolbox xml doesn't

Answer 1

This will not work:

$: Msg = Blockly.Msg;

Reactivity does not cross certain boundaries; it only works within components and via props from component to component.

You will have to do this via events or use a store instead to preserve change notifications and reactivity.