Closed alexanderniebuhr closed 3 years ago
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?
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>
@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>
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?
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 ;)
@alexanderniebuhr Matching already extracted strings is somewhat unexpected 😞
Can you share a few examples in a separate issue, please?
I will open any findings in a new issue. Nevermind about the extracted strings, can't reproduce it anymore.
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