Svelte language switcher experiencing technical difficulties

Question

Svelte language switcher experiencing technical difficulties

Currently delving into Svelte 3, I embarked on a project intended to be shared on GitHub in English. However, I realized that some of my friends do not speak English. To accommodate different language preferences, I decided to create a language switcher. Here's what I came up with:

<script lang="typescript">
  var selectedLang = "en_us";
  const _lang_filename = "./lang/%.json".replace("%", selectedLang);
  import lang from _lang_filename;
</script>

<div id="_app_">
  <h1>{lang.welcome}</h1>

  <button
    on:click={() => {
      selectedLang = "pt_br";
    }}>Português (Brasil)</button
  >
  <button
    on:click={() => {
      selectedLang = "en_us";
    }}>English (United States)</button
  >
</div>

Encountering an issue with the import of the lang file, I encountered an Unexpected Token error when trying to use a variable. I attempted incorporating string.replace() within the import itself, but to no avail.

javascript typescript svelte-3

Answer 1

Answer №1

One common misunderstanding is how Svelte operates.

In contrast to other frameworks, the section between <script> and </script> is only executed once. This means that even if you click the button multiple times, the value of lang_filename will never change. To indicate to the compiler that one variable depends on another, you need to make it reactive by using $:.

let selectedLang = "en_us";
$: _lang_filename = "./lang/%.json".replace("%", selectedLang);

So now, _lang_filename will be updated whenever selectedLang changes.

(Note: Consider using template literals instead)

$: _lang_filename = `./lang/${selectedLang}.json`

After obtaining the correct filename, the next step is to load the actual file. While you can perform a dynamic import, the HTML specifications limit importing only javascript files this way.

However, you can use fetch to retrieve the file. Create a variable lang to store your language object, and a loader function to load it.

let lang = {}
function load(filename) {
  lang = await fetch(filename).then(res => res.json())
}

To ensure that Svelte reruns load whenever the filename changes, utilize reactivity:

$: load(filename)

You could pass in selectedLang here and construct the path in the load function as well.

For completeness, here is the complete script:

<script>
    let selectedLang = "en_us";
    let lang = {}

    $: loadLanguage(selectedLang)

    async function loadLanguage() {
        lang = await fetch(`./lang/${selectedLang}.json`).then(res => res.json())
    }
</script>

Keep in mind that initially, lang will be an empty object, resulting in a brief display of undefined before loading.

Answer 2

One common misunderstanding is how Svelte operates.

In contrast to other frameworks, the section between <script> and </script> is only executed once. This means that even if you click the button multiple times, the value of lang_filename will never change. To indicate to the compiler that one variable depends on another, you need to make it reactive by using $:.

let selectedLang = "en_us";
$: _lang_filename = "./lang/%.json".replace("%", selectedLang);

So now, _lang_filename will be updated whenever selectedLang changes.

(Note: Consider using template literals instead)

$: _lang_filename = `./lang/${selectedLang}.json`

After obtaining the correct filename, the next step is to load the actual file. While you can perform a dynamic import, the HTML specifications limit importing only javascript files this way.

However, you can use fetch to retrieve the file. Create a variable lang to store your language object, and a loader function to load it.

let lang = {}
function load(filename) {
  lang = await fetch(filename).then(res => res.json())
}

To ensure that Svelte reruns load whenever the filename changes, utilize reactivity:

$: load(filename)

You could pass in selectedLang here and construct the path in the load function as well.

For completeness, here is the complete script:

<script>
    let selectedLang = "en_us";
    let lang = {}

    $: loadLanguage(selectedLang)

    async function loadLanguage() {
        lang = await fetch(`./lang/${selectedLang}.json`).then(res => res.json())
    }
</script>

Keep in mind that initially, lang will be an empty object, resulting in a brief display of undefined before loading.

Svelte language switcher experiencing technical difficulties

Answer №1

Similar questions

Exploring time differences in Javascript

The dynamic Vue.js transitions and effects are like a magic

Mastering the correct way to handle the "window" object within the Node.js testing environment using JSDom

steps for repairing a scoreboard

Require that JSX elements begin on a new line if the JSX element spans multiple lines

The jQuery slider's next button is not functioning as intended

Ajax updates previous text to new text upon successfully completing the task

Using VueJS to Bind an Array of Integer Values to Checkbox Models

Applying the document height to window height ratio to create a scale ranging from 1 to 100

Is the file corrupt using node.js?

Build a custom form for the purpose of exporting an HTML file

Transforming a vertical table into a horizontal layout

Rotating camera independently from its parent in Three.js

Utilize the class or interface method's data type

Adaptively linking to the property of a deeply nested object

What is the best way to fetch the class name of an element in JSDOM?

Strategies for displaying error messages in case of zero search results

Experience the convenience of uploading photos using jQuery Dialog on your ASP.NET MVC website

Utilizing an array as a child component in conditional rendering with vue.js

Customizing Marker Images in Google Maps JavaScript API