Skip to content

Commit 7dc5ba0

Browse files
authored
fix(vite-plugin-vue-i18n): support vite3 ssr (#172)
NOTE: This fix is workaround for vite3 SSR. Ideally, We hope that this fix will not be necessary once the SSR module on the vue side supports cjs/mjs. ref: vuejs/core#4814
1 parent be1ea14 commit 7dc5ba0

File tree

1 file changed

+60
-5
lines changed
  • packages/vite-plugin-vue-i18n/src

1 file changed

+60
-5
lines changed

packages/vite-plugin-vue-i18n/src/index.ts

Lines changed: 60 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import type { VitePluginVueI18nOptions } from './options'
2020
const debug = createDebug('vite-plugin-vue-i18n:index')
2121

2222
const INTLIFY_BUNDLE_IMPORT_ID = '@intlify/vite-plugin-vue-i18n/messages'
23+
const INTLIFY_FEATURE_FLAGS_ID = '@intlify-feature-flags'
24+
const INTLIFY_FEATURE_PROXY_SUFFIX = 'inject-feature-proxy'
2325

2426
const installedPkg = checkInstallPackage('@intlify/vite-plugin-vue-i18n', debug)
2527

@@ -80,6 +82,7 @@ function pluginI18n(
8082
useVueI18nImportName
8183
? 'vue-i18n'
8284
: `${installedPkg}`
85+
const runtimeModule = `${installedPkg}.runtime.mjs`
8386
const forceStringify = !!options.forceStringify
8487

8588
let isProduction = false
@@ -101,17 +104,17 @@ function pluginI18n(
101104
if (isArray(config.resolve!.alias)) {
102105
config.resolve!.alias.push({
103106
find: getAliasName(),
104-
replacement: `${installedPkg}/dist/${installedPkg}.runtime.mjs`
107+
replacement: `${installedPkg}/dist/${runtimeModule}`
105108
})
106109
} else {
107110
// eslint-disable-next-line @typescript-eslint/no-explicit-any
108111
;(config.resolve!.alias as any)[
109112
getAliasName()
110-
] = `${installedPkg}/dist/${installedPkg}.runtime.mjs`
113+
] = `${installedPkg}/dist/${runtimeModule}`
111114
}
112115
debug(`alias name: ${getAliasName()}`)
113116
debug(
114-
`set ${installedPkg} runtime only: ${installedPkg}/dist/${installedPkg}.runtime.mjs`
117+
`set ${installedPkg} runtime only: ${installedPkg}/dist/${runtimeModule}`
115118
)
116119
} else if (
117120
command === 'serve' &&
@@ -179,13 +182,65 @@ function pluginI18n(
179182
}
180183
},
181184

182-
resolveId(id: string) {
185+
async resolveId(id: string, importer: string, options) {
186+
if (options?.ssr) {
187+
if (getVirtualId(id) === INTLIFY_FEATURE_FLAGS_ID) {
188+
return {
189+
id: asVirtualId(INTLIFY_FEATURE_FLAGS_ID),
190+
moduleSideEffects: true
191+
}
192+
}
193+
194+
if (
195+
id.endsWith(runtimeModule) &&
196+
importer.toString().endsWith(INTLIFY_FEATURE_PROXY_SUFFIX)
197+
) {
198+
return null
199+
}
200+
201+
if (id.endsWith(runtimeModule)) {
202+
const resolution = await this.resolve(id, importer, {
203+
skipSelf: true,
204+
...options
205+
})
206+
if (!resolution) {
207+
return resolution
208+
}
209+
return `${resolution.id}?${INTLIFY_FEATURE_PROXY_SUFFIX}`
210+
}
211+
}
183212
if (id === INTLIFY_BUNDLE_IMPORT_ID) {
184213
return asVirtualId(id)
185214
}
186215
},
187216

188-
async load(id: string) {
217+
async load(id: string, options) {
218+
/**
219+
* NOTE:
220+
* Vue SSR with Vite3 (esm) will be worked on `@vue/server-renderer` with cjs.
221+
* This prevents the vue feature flag (`__VUE_PROD_DEVTOOLS__`)
222+
* and the vue-i18n feature flags used in `(petitle)-vue-i18n.runtime.mjs` from being set.
223+
* To work around this problem, proxy using the virutal module of vite (rollup)
224+
*/
225+
if (options?.ssr) {
226+
if (getVirtualId(id) === INTLIFY_FEATURE_FLAGS_ID) {
227+
return `import { getGlobalThis } from '@intlify/shared';
228+
getGlobalThis().__VUE_I18N_LEGACY_API__ = ${JSON.stringify(!compositionOnly)};
229+
getGlobalThis().__VUE_I18N_FULL_INSTALL__ = ${JSON.stringify(fullInstall)};
230+
getGlobalThis().__VUE_I18N_PROD_DEVTOOLS__ = false;
231+
getGlobalThis().__VUE_PROD_DEVTOOLS__ = false;
232+
`
233+
}
234+
235+
if (id.endsWith(INTLIFY_FEATURE_PROXY_SUFFIX)) {
236+
// proxy with virtual module
237+
return `
238+
import ${JSON.stringify(asVirtualId(INTLIFY_FEATURE_FLAGS_ID))};
239+
export * from ${JSON.stringify(getAliasName())};
240+
`
241+
}
242+
}
243+
189244
if (getVirtualId(id) === INTLIFY_BUNDLE_IMPORT_ID && include) {
190245
let resourcePaths = [] as string[]
191246
const includePaths = isArray(include) ? include : [include]

0 commit comments

Comments
 (0)