Merge branch 'master' of github.com:jarda-svoboda/sveltekit-i18n

sveltekit-i18n · Jul 12, 2023 · 867326e · 867326e
2 parents 3277ec9 + b2952a7
commit 867326e
Show file tree

Hide file tree

Showing 23 changed files with 249 additions and 0 deletions.
diff --git a/examples/locale-param/.gitignore b/examples/locale-param/.gitignore
@@ -0,0 +1,8 @@
+.DS_Store
+node_modules
+build
+.svelte-kit
+package
+.env
+.env.*
+!.env.example
diff --git a/examples/locale-param/README.md b/examples/locale-param/README.md
@@ -0,0 +1,7 @@
+[![Netlify Status](https://api.netlify.com/api/v1/badges/c5bbe5c2-c9b9-4175-aa68-fd4aec778589/deploy-status)](https://app.netlify.com/sites/multi-page-example/deploys)
+
+# Multi-page app
+In this app, translations are loaded dynamically according to user navigation and `$locale` change. It has built-in mechanism to prevent duplicit (server and client) translation load on app enter. It's useful, when you are fetching your translations from remote API, or using other data-expensive solution.
+
+## Preview
+You can view this demo live on [Netlify](https://multi-page-example.netlify.app).
diff --git a/examples/locale-param/jsconfig.json b/examples/locale-param/jsconfig.json
@@ -0,0 +1,3 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json"
+}
diff --git a/examples/locale-param/netlify.toml b/examples/locale-param/netlify.toml
@@ -0,0 +1,5 @@
+[build]
+    command = "cd ../../ && npm run build && npm run build --workspace locale-param"
+    publish = "build"
+[functions]
+  node_bundler = "esbuild"
diff --git a/examples/locale-param/package.json b/examples/locale-param/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "locale-param",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "package": "svelte-kit package",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-netlify": "^2.0.7",
+    "@sveltejs/kit": "^1.22.1",
+    "svelte": "^4.0.5",
+    "vite": "^4.4.2"
+  },
+  "type": "module",
+  "dependencies": {
+    "sveltekit-i18n": "file:../../"
+  }
+}
diff --git a/examples/locale-param/src/app.html b/examples/locale-param/src/app.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="description" content="" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+</head>
+
+<body>
+	<div>%sveltekit.body%</div>
+</body>
+
+</html>
diff --git a/examples/locale-param/src/lib/translations/cs/about.json b/examples/locale-param/src/lib/translations/cs/about.json
@@ -0,0 +1,4 @@
+{
+  "title": "O této aplikaci",
+  "text": "<p>Toto je <a href=\"https://kit.svelte.dev\">SvelteKit</a> aplikace. Můžete si vytvořit svou vlastní vložením následujícího příkazu do příkazové řádky:</p><pre>npm init svelte@next</pre> <p> Tato stránka je čistě statické HTML, bez nutnosti klientské interakce. Díky tomu není potřeba načítat žádný JavaScript. Zkuste zobrazit drojový kód stránky, nebo otevřete vývojářské nástroje a znovu načtěte stránku.</p>"
+}
diff --git a/examples/locale-param/src/lib/translations/cs/home.json b/examples/locale-param/src/lib/translations/cs/home.json
@@ -0,0 +1,4 @@
+{
+  "title": "Vítejte ve SvelteKit",
+  "text": "Dokumentace je k přečtení na <a href=\"{{link}}\">kit.svelte.dev</a>"
+}
diff --git a/examples/locale-param/src/lib/translations/cs/menu.json b/examples/locale-param/src/lib/translations/cs/menu.json
@@ -0,0 +1,5 @@
+{
+  "home": "Domů",
+  "about": "O nás",
+  "notification": "{{count:gt; 0:Máte {{count}} {{count:gte; 1:novou zprávu; 2:nové zprávy; 5:nových zpráv}}!; default:Nemáte žádné zprávy...}}"
+}
diff --git a/examples/locale-param/src/lib/translations/en/about.json b/examples/locale-param/src/lib/translations/en/about.json
@@ -0,0 +1,4 @@
+{
+  "title": "About this app",
+  "text": "<p>This is a <a href=\"https://kit.svelte.dev\">SvelteKit</a> app. You can make your own by typing the following into your command line and following the prompts:</p><pre>npm init svelte@next</pre> <p> The page you're looking at is purely static HTML, with no client-side interactivity needed. Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening the devtools network panel and reloading. </p>"
+}
diff --git a/examples/locale-param/src/lib/translations/en/home.json b/examples/locale-param/src/lib/translations/en/home.json
@@ -0,0 +1,4 @@
+{
+  "title": "Welcome to SvelteKit",
+  "text": "Visit <a href=\"{{link}}\">kit.svelte.dev</a> to read the documentation"
+}
diff --git a/examples/locale-param/src/lib/translations/en/menu.json b/examples/locale-param/src/lib/translations/en/menu.json
@@ -0,0 +1,5 @@
+{
+  "home": "Home",
+  "about": "About",
+  "notification": "You have {{count:gt; 0:{{count}} new {{count; 1:message; default:messages}}!; default:no messages...}}"
+}
diff --git a/examples/locale-param/src/lib/translations/index.js b/examples/locale-param/src/lib/translations/index.js
@@ -0,0 +1,56 @@
+import i18n from 'sveltekit-i18n';
+import { dev } from '$app/environment';
+import lang from './lang.json';
+
+export const defaultLocale = 'en';
+
+/** @type {import('sveltekit-i18n').Config} */
+export const config = {
+  log: {
+    level: dev ? 'warn' : 'error',
+  },
+  translations: {
+    en: { lang },
+    cs: { lang },
+  },
+  loaders: [
+    {
+      locale: 'en',
+      key: 'menu',
+      loader: async () => (await import('./en/menu.json')).default,
+    },
+    {
+      locale: 'en',
+      key: 'about',
+      routes: ['/about'],
+      loader: async () => (await import('./en/about.json')).default,
+    },
+    {
+      locale: 'en',
+      key: 'home',
+      routes: ['/'],
+      loader: async () => (await import('./en/home.json')).default,
+    },
+    {
+      locale: 'cs',
+      key: 'menu',
+      loader: async () => (await import('./cs/menu.json')).default,
+    },
+    {
+      locale: 'cs',
+      key: 'about',
+      routes: ['/about'],
+      loader: async () => (await import('./cs/about.json')).default,
+    },
+    {
+      locale: 'cs',
+      key: 'home',
+      routes: ['/'],
+      loader: async () => (await import('./cs/home.json')).default,
+    },
+  ],
+};
+
+export const { t, loading, locales, locale, translations, loadTranslations, addTranslations, setLocale, setRoute } = new i18n(config);
+
+loading.subscribe(($loading) => $loading && console.log('Loading translations...'));
diff --git a/examples/locale-param/src/lib/translations/lang.json b/examples/locale-param/src/lib/translations/lang.json
@@ -0,0 +1,4 @@
+{
+  "en": "English",
+  "cs": "Česky"
+}
diff --git a/examples/locale-param/src/routes/+layout.js b/examples/locale-param/src/routes/+layout.js
@@ -0,0 +1,14 @@
+import { addTranslations, setLocale, setRoute } from '$lib/translations';
+
+/** @type {import('@sveltejs/kit').Load} */
+export const load = async ({ data }) => {
+  const { i18n, translations } = data;
+  const { locale, route } = i18n;
+
+  addTranslations(translations);
+
+  await setRoute(route);
+  await setLocale(locale);
+
+  return i18n;
+};
diff --git a/examples/locale-param/src/routes/+layout.server.js b/examples/locale-param/src/routes/+layout.server.js
@@ -0,0 +1,17 @@
+import { loadTranslations, translations, defaultLocale } from '$lib/translations';
+
+/** @type {import('@sveltejs/kit').ServerLoad} */
+export const load = async ({ url, cookies }) => {
+  const { pathname, searchParams } = url;
+
+  const initLocale = searchParams.get('lang') || cookies.get('locale') || defaultLocale;
+
+  cookies.set('locale', initLocale);
+
+  await loadTranslations(initLocale, pathname); // keep this just before the `return`
+
+  return {
+    i18n: { locale: initLocale, route: pathname },
+    translations: translations.get(),
+  };
+};
diff --git a/examples/locale-param/src/routes/+layout.svelte b/examples/locale-param/src/routes/+layout.svelte
@@ -0,0 +1,26 @@
+<script>
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import { t, locale, locales } from '$lib/translations';
+
+  $: count = 2;
+</script>
+
+<a href="/">{$t('menu.home')}</a>
+<a href="/about">{$t('menu.about')}</a>
+<br/>
+<br/>
+{$t('menu.notification', { count })}<br />
+<button on:click="{() => {if (count) count -= 1;}}">–</button>
+<button on:click="{() => {count += 1;}}">+</button>
+<hr />
+<slot />
+<br />
+<br />
+<br />
+<br />
+<select on:change="{({ currentTarget }) => goto(new URL(`?lang=${currentTarget.value}`, `${$page.url.href}`))}" >
+  {#each $locales as value}
+    <option value="{value}" selected={value === $locale}>{$t(`lang.${value}`)}</option>
+  {/each}
+</select>
diff --git a/examples/locale-param/src/routes/+page.svelte b/examples/locale-param/src/routes/+page.svelte
@@ -0,0 +1,8 @@
+<script>
+  import { t } from '$lib/translations';
+
+  const link = 'https://kit.svelte.dev';
+</script>
+
+<h1>{$t('home.title')}</h1>
+<p>{@html $t('home.text', { link })}</p>
diff --git a/examples/locale-param/src/routes/about/+page.svelte b/examples/locale-param/src/routes/about/+page.svelte
@@ -0,0 +1,6 @@
+<script>
+  import { t } from '$lib/translations';
+</script>
+
+<h1>{$t('about.title')}</h1>
+<p>{@html $t('about.text')}</p>
diff --git a/examples/locale-param/static/favicon.png b/examples/locale-param/static/favicon.png
diff --git a/examples/locale-param/svelte.config.js b/examples/locale-param/svelte.config.js
@@ -0,0 +1,10 @@
+import adapter from '@sveltejs/adapter-netlify';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  kit: {
+    adapter: adapter(),
+  },
+};
+
+export default config;
diff --git a/examples/locale-param/vite.config.js b/examples/locale-param/vite.config.js
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+});
diff --git a/package-lock.json b/package-lock.json