fix: update examples

Author: kazupon

examples/backend/README.md

@@ -33,7 +33,7 @@ npm run preview # start preview
 ### i18n resource pre-compilation
 
 ```sh
-npm run generate # i18n resources pre-compilation 
+npm run generate # i18n resources pre-compilation
 npm run preview  # start preview
 ```
 

examples/backend/db/message.d.ts

@@ -1,3 +1,3 @@
-import en from './en.json'
+import en from './en.json' with { type: 'json' }
 
 export type ResourceSchema = typeof en

examples/backend/package.json

@@ -2,31 +2,31 @@
   "name": "backend",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
-    "generate": "npx --no-install jiti ./scripts/generate.ts",
+    "generate": "pnpx tsx ./scripts/generate.ts",
     "build": "vite build",
     "check": "vue-tsc --noEmit",
-    "serve": "npx --no-install jiti ./scripts/server.ts",
+    "serve": "pnpx tsx ./scripts/server.ts",
     "preview": "vite preview"
   },
   "dependencies": {
     "vue": "^3.3.4",
     "vue-i18n": "11.1.12"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.2.3",
-    "vite": "^4.5.2",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "^7.1.7",
     "typescript": "^5.0.2",
-    "vue-tsc": "^1.8.5",
+    "vue-tsc": "^3.0.7",
     "h3": "^1.8.0",
     "@types/express": "^4.17.13",
     "@types/body-parser": "^1.19.2",
     "express": "^4.19.2",
     "body-parser": "^1.20.3",
-    "jiti": "^1.19.3",
     "ofetch": "^1.1.1",
     "@intlify/unplugin-vue-i18n": "^11.0.1",
-    "@intlify/bundle-utils": "^10.0.1"
+    "@intlify/bundle-utils": "^11.0.1"
   }
 }

examples/backend/scripts/generate.ts

@@ -9,7 +9,7 @@ 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 filename = path.join(import.meta.dirname, `../public/${locale}.js`)
   const ret = generateJSON(JSON.stringify(message), {
     type: 'plain',
     filename,
@@ -24,7 +24,7 @@ async function compile(locale: string, message: ResourceSchema) {
   return { ...ret, filename }
 }
 
-;(async (locales: readonly Locale[]) => {
+async function main(locales: readonly Locale[]) {
   // start vite server
   const vite = await createServer({ root: process.cwd() })
   await vite.listen(3000)
@@ -48,4 +48,6 @@ async function compile(locale: string, message: ResourceSchema) {
   })
 
   process.exit(0)
-})(locales)
+}
+
+await main(locales as readonly Locale[])

examples/backend/scripts/server.ts

@@ -7,7 +7,7 @@ router.get(
   '/api/resources/:locale',
   eventHandler(async event => {
     const locale = event.context.params?.locale ?? 'en'
-    const data = await import(`../db/${locale}.json`)
+    const { default: data } = await import(`../db/${locale}.json`, { with: { type: 'json' } })
     setHeaders(event, {
       'Access-Control-Allow-Origin': '*'
     })

examples/backend/src/main.ts

@@ -1,8 +1,8 @@
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
 import App from './App.vue'
-import { load } from './locales'
 import { locales } from './constants'
+import { load } from './locales'
 
 import type { ResourceSchema } from '../db/message'
 import type { Locales } from './constants'

examples/backend/tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

examples/backend/tsconfig.json

@@ -1,15 +1,7 @@
 {
-  "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"]
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
 }

examples/backend/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/backend/vite.config.ts

@@ -1,16 +1,16 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 import vueI18n from '@intlify/unplugin-vue-i18n/vite'
+import vue from '@vitejs/plugin-vue'
 import bodyParser from 'body-parser'
+import { defineConfig } from 'vite'
 
 /**
  * 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 { Plugin } from 'vite'
 import type { ResourceSchema } from './db/message'
 
 function serialize(res: ServerResponse, locales: ResourceSchema): void {
@@ -43,11 +43,5 @@ export default defineConfig({
   build: {
     target: 'esnext'
   },
-  plugins: [
-    backend(),
-    vue(),
-    vueI18n({
-      jitCompilation: true
-    })
-  ]
+  plugins: [backend(), vue(), vueI18n()]
 })