Merge pull request #10 from willin/i18n

feat: i18n
willin · Dec 11, 2023 · 5178411 · 5178411
2 parents 66e31a7 + a50a15d
commit 5178411
Show file tree

Hide file tree

Showing 41 changed files with 706 additions and 33 deletions.
diff --git a/.changeset/cold-mugs-invent.md b/.changeset/cold-mugs-invent.md
@@ -0,0 +1,5 @@
+---
+"@svelte-dev/i18n": patch
+---
+
+init i18n
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
-  "conventionalCommits.scopes": ["auth", "session", "strategies"],
+  "conventionalCommits.scopes": ["auth", "i18n", "session", "strategies"],
   "cSpell.words": ["willin"]
 }
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ Read the documentation to get started with [@svelte-dev/session](packages/sessio
 | ------------------------------------------------ | -------------------------------------------- | ---------------------------------------------- |
 | [@svelte-dev/session](packages/session/)         | [Docs](https://svelte.js.cool/docs/session/) | [Changelog](packages/session/CHANGELOG.md)     |
 | [@svelte-dev/auth](packages/auth/)               | [Docs](https://svelte.js.cool/docs/auth/)    | [Changelog](packages/auth/CHANGELOG.md)        |
+| [@svelte-dev/i18n](packages/i18n/)               | [Docs](https://svelte.js.cool/docs/i18n/)    | [Changelog](packages/i18n/CHANGELOG.md)        |
 | [@svelte-dev/auth-oauth2](packages/auth-oauth2/) |                                              | [Changelog](packages/auth-oauth2/CHANGELOG.md) |
 | [@svelte-dev/auth-github](packages/auth-github/) |                                              | [Changelog](packages/auth-github/CHANGELOG.md) |
 | [@svelte-dev/auth-alipay](packages/auth-alipay/) |                                              | [Changelog](packages/auth-alipay/CHANGELOG.md) |

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -13,6 +13,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@svelte-dev/i18n": "*",
     "@svelte-dev/session": "*",
     "@svelte-dev/auth": "*",
     "@svelte-dev/auth-github": "*",

diff --git a/apps/web/src/app.d.ts b/apps/web/src/app.d.ts
@@ -9,6 +9,7 @@ declare global {
   namespace App {
     // interface Error {}
     interface Locals {
+      lang: string;
       auth: Auth;
       session: SessionStorage<{ user: any }>;
       user?:

diff --git a/apps/web/src/app.html b/apps/web/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="%lang%">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />

diff --git a/apps/web/src/hooks.server.ts b/apps/web/src/hooks.server.ts
@@ -1,6 +1,9 @@
 import { env } from '$env/dynamic/private';
+import { fallbackLng } from '$lib/i8n';
 import { handleAuth } from '@svelte-dev/auth';
 import { GitHubStrategy } from '@svelte-dev/auth-github';
+import { locale } from '@svelte-dev/i18n';
+
 // import { SSOStrategy } from '@svelte-dev/auth-sso';
 // import { AlipayStrategy } from '@svelte-dev/auth-alipay';
 
@@ -41,29 +44,40 @@ const githubStrategy = new GitHubStrategy(
   }
 );
 
-export const handle = handleAuth({
-  adapter: {
-    name: 'cookie',
-    options: {
-      chunk: true
-    }
-  },
-  session: {
-    secrets: ['s3cr3t']
-  },
-  cookie: {
-    secure: !!env.SSO_CALLBACK_URL,
-    sameSite: 'lax',
-    path: '/',
-    httpOnly: !!env.SSO_CALLBACK_URL,
-    maxAge: 604800000
+export const handle = handleAuth(
+  {
+    adapter: {
+      name: 'cookie',
+      options: {
+        chunk: true
+      }
+    },
+    session: {
+      secrets: ['s3cr3t']
+    },
+    cookie: {
+      secure: !!env.SSO_CALLBACK_URL,
+      sameSite: 'lax',
+      path: '/',
+      httpOnly: !!env.SSO_CALLBACK_URL,
+      maxAge: 604800000
+    },
+    autoRouting: true,
+    strategies: [
+      // alipayStrategy,
+      // ssoStrategy,
+      githubStrategy
+    ],
+    successRedirect: '/demo',
+    failureRedirect: '/error'
   },
-  autoRouting: true,
-  strategies: [
-    // alipayStrategy,
-    // ssoStrategy,
-    githubStrategy
-  ],
-  successRedirect: '/demo',
-  failureRedirect: '/error'
-});
+  ({ event, resolve }) => {
+    const lang = event.params.lang ?? fallbackLng;
+    event.locals.lang = lang;
+    locale.set(lang);
+
+    return resolve(event, {
+      transformPageChunk: ({ html }) => html.replace('%lang%', lang)
+    });
+  }
+);
diff --git a/apps/web/src/i18n/en.ts b/apps/web/src/i18n/en.ts
@@ -0,0 +1,7 @@
+import type { I18nDict } from '@svelte-dev/i18n';
+
+export const dict: I18nDict = {
+  site: {
+    title: 'Hello World'
+  }
+};
diff --git a/apps/web/src/i18n/zh.ts b/apps/web/src/i18n/zh.ts
@@ -0,0 +1,7 @@
+import type { I18nDict } from '@svelte-dev/i18n';
+
+export const dict: I18nDict = {
+  site: {
+    title: '你好，世界'
+  }
+};
diff --git a/apps/web/src/lib/i8n.ts b/apps/web/src/lib/i8n.ts
@@ -0,0 +1,19 @@
+import { browser } from '$app/environment';
+import { addMessages, locale } from '@svelte-dev/i18n';
+
+const translations = import.meta.glob(`../i18n/*.ts`, { eager: true });
+
+export const supportedLanguages = [];
+export const fallbackLng = 'zh';
+
+Object.entries(translations).forEach(([name, mod]) => {
+  const lang = name.replace(/.+\/(.+)\.ts/, '$1');
+  addMessages(lang, mod.dict);
+  supportedLanguages.push(lang);
+});
+
+if (browser) {
+  const path = new URL(location.href).pathname.split('/');
+  const lang = supportedLanguages.includes(path?.[1]) ? path?.[1] : fallbackLng;
+  locale.set(lang);
+}
diff --git a/apps/web/src/params/locale.ts b/apps/web/src/params/locale.ts
@@ -0,0 +1,6 @@
+import type { ParamMatcher } from '@sveltejs/kit';
+import { getLocales } from '@svelte-dev/i18n';
+
+export const match: ParamMatcher = (param) => {
+  return getLocales().includes(param);
+};
diff --git a/apps/web/src/routes/+layout.server.ts → .../routes/[[lang=locale]]/+layout.server.ts b/apps/web/src/routes/+layout.server.ts → .../routes/[[lang=locale]]/+layout.server.ts
@@ -1,4 +1,4 @@
-import type { LayoutServerLoad } from './$types.js';
+import type { LayoutServerLoad } from '../$types.js';
 
 export const load: LayoutServerLoad = ({ locals }) => {
   const { user } = locals; // locals.user set by hooks.server.ts/handle(), undefined if not logged in

diff --git a/apps/web/src/routes/+layout.svelte → ...src/routes/[[lang=locale]]/+layout.svelte b/apps/web/src/routes/+layout.svelte → ...src/routes/[[lang=locale]]/+layout.svelte
@@ -1,13 +1,19 @@
+<script>
+  import { t } from '@svelte-dev/i18n';
+</script>
+
 <main>
   <h1>@svelte-dev/auth &amp; @svelte-dev/session</h1>
   <nav>
     <a href="/">Demo</a> |
     <a href="https://github.com/willin/svelte-turbo" target="_blank">Repo</a> |
+    <a href="/docs/i18n" target="_blank">I18n</a> |
     <a href="/docs/auth" target="_blank">Auth</a> |
     <a href="/docs/session" target="_blank">Session</a>
   </nav>
   <article>
     <h2>Demo</h2>
+    <h3>{$t('site.title')}</h3>
     <slot />
   </article>
 </main>

diff --git a/apps/web/src/routes/[[lang=locale]]/+layout.ts b/apps/web/src/routes/[[lang=locale]]/+layout.ts
@@ -0,0 +1 @@
+import '$lib/i8n';
diff --git a/apps/web/src/routes/+page.svelte → ...b/src/routes/[[lang=locale]]/+page.svelte b/apps/web/src/routes/+page.svelte → ...b/src/routes/[[lang=locale]]/+page.svelte
diff --git a/apps/web/src/routes/demo/+page.server.ts → ...utes/[[lang=locale]]/demo/+page.server.ts b/apps/web/src/routes/demo/+page.server.ts → ...utes/[[lang=locale]]/demo/+page.server.ts
diff --git a/apps/web/src/routes/demo/+page.svelte → .../routes/[[lang=locale]]/demo/+page.svelte b/apps/web/src/routes/demo/+page.svelte → .../routes/[[lang=locale]]/demo/+page.svelte
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "private": true,
   "scripts": {
-    "build": "turbo run build",
-    "build:docs": "turbo run build:docs",
-    "dev": "turbo run dev",
-    "test": "turbo run test",
+    "build": "turbo run build --parallel",
+    "build:docs": "turbo run build:docs --parallel",
+    "dev": "turbo run dev --parallel",
+    "test": "turbo run test --parallel",
     "changeset:version": "changeset version",
     "changeset:release": "changeset publish",
-    "lint": "turbo run lint",
+    "lint": "turbo run lint --parallel",
     "format": "prettier --write ."
   },
   "devDependencies": {

diff --git a/packages/i18n/.eslintignore b/packages/i18n/.eslintignore
@@ -0,0 +1,16 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/static
+/dist
+/package
+.env
+.env.*
+!.env.example
+
+/static
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
diff --git a/packages/i18n/.eslintrc.cjs b/packages/i18n/.eslintrc.cjs
@@ -0,0 +1,5 @@
+/** @type { import("eslint").Linter.FlatConfig } */
+module.exports = {
+  root: true,
+  extends: ['@svelte-dev/eslint-config']
+};
diff --git a/packages/i18n/.npmrc b/packages/i18n/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/packages/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md