add support for custom language mapping to hard-coded string extraction

[alexanderniebuhr]

Describe the solution you'd like: Would like to have an config option to map .svelte files to the html parser of hard-coded string extraction, it should work with no issue since they are just html files with <script> & <style> tags, which can be excluded already

[terales]

Here is an example of the generic Svelte file: https://github.com/sveltejs/template/blob/master/src/App.svelte

@alexanderniebuhr can you share a link to an internationalized Svelte project, please?

[alexanderniebuhr]

Not having a public one for now (working on one in private repo), can attach it later this week, since it is going public by then. However, a Svelte file with internationalization would look similar like

<script>
  import { _ as t } from 'svelte-i18n'
</script>

<div>
  <f-button class="bg-light-300" on:click={(e) => handle365Login(e)}>
    {$t('page.login.ms365')}
  </f-button>
  <f-button class="bg-light-300" on:click={(e) => handle365Logout(e)}>
    {$t('page.logout.ms365')}
  </f-button>
  <f-button class="bg-light-300" on:click={(e) => handle365Logout(e)}>
    Text to extract
  </f-button>
</div>

<style>

</style>

this is an example by svelte-i18n

<script>
  import { _ } from 'svelte-i18n'
</script>

<h1>{$_('page.home.title')}</h1>

<nav>
  <a>{$_('page.home.nav', { default: 'Home' })}</a>
  <a>{$_('page.about.nav', { default: 'About' })}</a>
  <a>{$_('page.contact.nav', { default: 'Contact' })}</a>
</nav>

[alexanderniebuhr]

@antfu works not for some edge cases. This file breaks with Unexpected token (1:3) I think caused by the comments <!-- <script su-router:imports:sync> -->

<!-- <script su-router:imports:sync> -->
<script>
  import { onMount } from "svelte";
  import { link, useRouter, useGuard, exists } from "@svelteuse/router";
  import { msalInstance } from "../logic/auth.js";

  // "google",
  // "google-cn",
  // "deepl",
  // "libretranslate"

  let accounts = msalInstance.getAllAccounts();
  console.log("acc", accounts);
  const guardCheck = useGuard(
    { link: "or", redirect: "/login" },
    exists(accounts[0])
  );
  if (!guardCheck) {
    $useRouter.navigate("/login");
    window.location.reload();
  }

  console.log("isAllowed", guardCheck);

  onMount(() => {
    console.log("onMount Default LAYOUT");
    async function init() {
      console.log("init");
      // // await msalInstance.handleRedirectPromise();
      // let accounts = msalInstance.getAllAccounts();
      // console.log("acc", accounts);
      // const guardCheck = useGuard({ link: "or" }, exists(accounts[0]));
      // if (!guardCheck) {
      //   $useRouter.navigate("/login");
      //   window.location.reload();
      // }
      // console.log("isAllowed", guardCheck);
    }
    init();
  });

  // async function handle365Login(event) {
  //   console.log("LOGIN EVENT");

  //   msalInstance
  //     .loginRedirect()
  //     .then((res) => {
  //       console.log(res);
  //     })
  //     .catch((e) => {
  //       console.error(e);
  //     });
  // }

  async function handle365Logout() {
    console.log("LOGOUT EVENT");
    await msalInstance.logoutRedirect();
    window.location.reload();
  }
</script>

<div class="min-h-100vh flex flex-col">
  <header class="flex flex-row place-content-center p-4">
    <div class="flex flex-row gap-2">
      <a href="/farmer1" use:link><f-button>Fendt Farmer 1</f-button></a>
      <a href="/news" use:link><f-button>Neuigkeiten</f-button></a>
      <!-- <f-button on:click={(e) => handle365Login(e)}>LOGIN</f-button> -->
      <f-button on:click={(e) => handle365Logout(e)}>Ausloggen</f-button>
    </div>
  </header>

  <main class="flex-grow grid place-content-center">
    <slot />
  </main>

  <footer class="flex flex-row place-content-center p-6">
    <div class="flex flex-col items-center gap-2">
      <span> REPGUIDE © 2021 </span>
      <div class="flex flex-row gap-2">
        <a href="/">Impressum</a><a href="/">DATENSCHUTZ</a><a href="/">AGB</a>
      </div>
    </div>
  </footer>
</div>

[terales]

Extracted into a separate issue: https://github.com/lokalise/i18n-ally/issues/623 This particular exception is trickier than the initial request.

Does everything work well with the removed commented script tag?

[alexanderniebuhr]

Yes, it does work well, expect that already extracted keys are matched as hard-coded Strings.

But minor stuff, which is expected, since it is an experimental feature ;)

[terales]

@alexanderniebuhr Matching already extracted strings is somewhat unexpected 😞

Can you share a few examples in a separate issue, please?

[alexanderniebuhr]

I will open any findings in a new issue. Nevermind about the extracted strings, can't reproduce it anymore.