example: back-end integration and i18n resources compilation (#891)

kazupon · web-flow · commit 8af598203b60 · 2022-01-21T19:23:58.000+09:00
diff --git a/examples/backend/.gitignore b/examples/backend/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/backend/README.md b/examples/backend/README.md
@@ -0,0 +1,8 @@
+# Backend integration & i18n resource compilation
+
+This is an example of back-end integration, and i18n resources compilation
+
+- `vite.config.ts`: define the plugin that is simulated as the back-end
+- `db`: simulate the loading of resources from the database
+- `scripts/generate.ts`: compile the i18n resources
+- `src/locales.ts`: define the i18n resources load function for development and production
diff --git a/examples/backend/db/en.json b/examples/backend/db/en.json
@@ -0,0 +1,3 @@
+{
+  "hello": "hello!"
+}
diff --git a/examples/backend/db/ja.json b/examples/backend/db/ja.json
@@ -0,0 +1,3 @@
+{
+  "hello": "こんにちは!"
+}
diff --git a/examples/backend/db/message.d.ts b/examples/backend/db/message.d.ts
@@ -0,0 +1,3 @@
+import en from './en.json'
+
+export type ResourceSchema = typeof en
diff --git a/examples/backend/index.html b/examples/backend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/backend/package.json b/examples/backend/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "backend",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "generate": "npx jiti ./scripts/generate.ts",
+    "build": "vite build",
+    "check": "vue-tsc --noEmit",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "next",
+    "vue-i18n": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.13",
+    "@types/body-parser": "^1.19.2",
+    "express": "^4.17.1",
+    "body-parser": "^1.19.1",
+    "jiti": "^1.12.9",
+    "ohmyfetch": "^0.4.15",
+    "@vitejs/plugin-vue": "^2.0.0",
+    "@intlify/vite-plugin-vue-i18n": "next",
+    "@intlify/bundle-utils": "latest",
+    "typescript": "^4.5.4",
+    "vite": "^2.7.2",
+    "vue-tsc": "^0.29.8"
+  }
+}
diff --git a/examples/backend/public/favicon.ico b/examples/backend/public/favicon.ico
diff --git a/examples/backend/scripts/generate.ts b/examples/backend/scripts/generate.ts
@@ -0,0 +1,53 @@
+import { promises as fs } from 'fs'
+import path from 'path'
+import { createServer } from 'vite'
+import { $fetch } from 'ohmyfetch'
+import { generateJSON } from '@intlify/bundle-utils'
+import { locales } from '../src/constants'
+
+import type { Locale } from 'vue-i18n'
+import type { ResourceSchema } from '../db/message'
+
+async function compile(locale: string, message: ResourceSchema) {
+  const filename = path.join(__dirname, `../public/${locale}.js`)
+  const ret = generateJSON(JSON.stringify(message), {
+    type: 'plain',
+    filename,
+    env: 'production',
+    onError(msg) {
+      console.error('compile error', msg)
+    },
+    onWarn(msg) {
+      console.warn('compile waring', msg)
+    }
+  })
+  return { ...ret, filename }
+}
+
+;(async (locales: readonly Locale[]) => {
+  // start vite server
+  const vite = await createServer({ root: process.cwd() })
+  await vite.listen(3000)
+  vite.printUrls()
+
+  // compile reousrces
+  for (const locale of locales) {
+    const resource = await $fetch<ResourceSchema>(
+      `http://localhost:3000/api/resources/${locale}`
+    )
+    const { code, map, filename } = await compile(locale, resource)
+    await fs.writeFile(filename, code)
+  }
+
+  process.on('uncaughtException', err => {
+    console.error(`uncaught exception: ${err}\n`)
+    process.exit(1)
+  })
+
+  process.on('unhandledRejection', (reason, p) => {
+    console.error('unhandled rejection at:', p, 'reason:', reason)
+    process.exit(1)
+  })
+
+  process.exit(0)
+})(locales)
diff --git a/examples/backend/src/App.vue b/examples/backend/src/App.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <h1>{{ t('hello') }}</h1>
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/examples/backend/src/assets/logo.png b/examples/backend/src/assets/logo.png
diff --git a/examples/backend/src/constants.ts b/examples/backend/src/constants.ts
@@ -0,0 +1,3 @@
+// define locales
+export const locales = ['en', 'ja'] as const
+export type Locales = typeof locales[number]
diff --git a/examples/backend/src/env.d.ts b/examples/backend/src/env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/backend/src/locales.ts b/examples/backend/src/locales.ts
@@ -0,0 +1,21 @@
+import type { Locale, LocaleMessages } from 'vue-i18n'
+import type { ResourceSchema } from '../db/message'
+
+const _default = (r: any) => r.default || r
+
+export async function load<Locales>(locales: readonly Locale[]) {
+  const messages: Record<string, any> = {}
+  for (const locale of locales) {
+    // prettier-ignore
+    if (import.meta.env.DEV) { // for development
+      // load from back-end server
+      const resource = await (await fetch(`/api/resources/${locale}`)).json()
+      messages[locale] = resource
+    } else { // for production
+      // load from assets
+      const resource = _default(await import(`../public/${locale}.js`))
+      messages[locale] = resource
+    }
+  }
+  return messages as LocaleMessages<ResourceSchema, Locales>
+}
diff --git a/examples/backend/src/main.ts b/examples/backend/src/main.ts
@@ -0,0 +1,24 @@
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+import App from './App.vue'
+import { load } from './locales'
+import { locales } from './constants'
+
+import type { ResourceSchema } from '../db/message'
+import type { Locales } from './constants'
+
+// load resources
+const messages = await load<Locales>(locales)
+
+// create i18n instance
+const i18n = createI18n<[ResourceSchema], Locales, false>({
+  legacy: false,
+  locale: 'en',
+  messages
+})
+
+// setup vue
+const app = createApp(App)
+// @ts-ignore: this example cannot do type inference on monorepo
+app.use(i18n)
+app.mount('#app')
diff --git a/examples/backend/tsconfig.json b/examples/backend/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/examples/backend/vite.config.ts b/examples/backend/vite.config.ts
@@ -0,0 +1,51 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueI18n from '@intlify/vite-plugin-vue-i18n'
+import bodyParser from 'body-parser'
+
+/**
+ * These imports simulate the loading of resources from the database
+ */
+import en from './db/en.json' // english resources
+import ja from './db/ja.json' // japanese resources
+
+import type { Plugin } from 'vite'
+import type { ServerResponse } from 'http'
+import type { ResourceSchema } from './db/message'
+
+function serialize(res: ServerResponse, locales: ResourceSchema): void {
+  res.setHeader('Content-Type', 'application/json')
+  res.write(JSON.stringify(locales))
+}
+
+/**
+ * This plugin is simulated back-end server
+ */
+const backend = (): Plugin => ({
+  name: 'backend',
+  configureServer(server) {
+    server.middlewares.use(bodyParser.json())
+    // `/api/resources/en` endpoint returns the response as `en` resources
+    server.middlewares.use('/api/resources/en', (req, res) => {
+      serialize(res, en)
+      res.end()
+    })
+    // `/api/resources/ja` endpoint returns the response as `ja` resources
+    server.middlewares.use('/api/resources/ja', (req, res) => {
+      serialize(res, ja)
+      res.end()
+    })
+  }
+})
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    target: 'esnext'
+  },
+  plugins: [
+    backend(),
+    vue(),
+    vueI18n({ compositionOnly: true, fullInstall: false })
+  ]
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "hello": "こんにちは!"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import en from './en.json'`
	`2`	`+`
	`3`	`+export type ResourceSchema = typeof en`