fix(ssr): fix ssr runtime helper import in module mode

This commit is contained in:
Evan You 2021-09-23 10:08:28 -04:00
parent 74a84ff546
commit 8e05b7f9fc
4 changed files with 23 additions and 9 deletions

View File

@ -95,6 +95,7 @@ function createCodegenContext(
optimizeImports = false, optimizeImports = false,
runtimeGlobalName = `Vue`, runtimeGlobalName = `Vue`,
runtimeModuleName = `vue`, runtimeModuleName = `vue`,
ssrRuntimeModuleName = 'vue/server-renderer',
ssr = false, ssr = false,
isTS = false, isTS = false,
inSSR = false inSSR = false
@ -109,6 +110,7 @@ function createCodegenContext(
optimizeImports, optimizeImports,
runtimeGlobalName, runtimeGlobalName,
runtimeModuleName, runtimeModuleName,
ssrRuntimeModuleName,
ssr, ssr,
isTS, isTS,
inSSR, inSSR,
@ -319,7 +321,8 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
push, push,
newline, newline,
runtimeModuleName, runtimeModuleName,
runtimeGlobalName runtimeGlobalName,
ssrRuntimeModuleName
} = context } = context
const VueBinding = const VueBinding =
!__BROWSER__ && ssr !__BROWSER__ && ssr
@ -363,7 +366,7 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
push( push(
`const { ${ast.ssrHelpers `const { ${ast.ssrHelpers
.map(aliasHelper) .map(aliasHelper)
.join(', ')} } = require("vue/server-renderer")\n` .join(', ')} } = require("${ssrRuntimeModuleName}")\n`
) )
} }
genHoists(ast.hoists, context) genHoists(ast.hoists, context)
@ -377,7 +380,13 @@ function genModulePreamble(
genScopeId: boolean, genScopeId: boolean,
inline?: boolean inline?: boolean
) { ) {
const { push, newline, optimizeImports, runtimeModuleName } = context const {
push,
newline,
optimizeImports,
runtimeModuleName,
ssrRuntimeModuleName
} = context
if (genScopeId && ast.hoists.length) { if (genScopeId && ast.hoists.length) {
ast.helpers.push(PUSH_SCOPE_ID, POP_SCOPE_ID) ast.helpers.push(PUSH_SCOPE_ID, POP_SCOPE_ID)
@ -414,7 +423,7 @@ function genModulePreamble(
push( push(
`import { ${ast.ssrHelpers `import { ${ast.ssrHelpers
.map(s => `${helperNameMap[s]} as _${helperNameMap[s]}`) .map(s => `${helperNameMap[s]} as _${helperNameMap[s]}`)
.join(', ')} } from "@vue/server-renderer"\n` .join(', ')} } from "${ssrRuntimeModuleName}"\n`
) )
} }

View File

@ -275,6 +275,11 @@ export interface CodegenOptions extends SharedTransformCodegenOptions {
* @default 'vue' * @default 'vue'
*/ */
runtimeModuleName?: string runtimeModuleName?: string
/**
* Customize where to import ssr runtime helpers from/**
* @default 'vue/server-renderer'
*/
ssrRuntimeModuleName?: string
/** /**
* Customize the global variable name of `Vue` to get helpers from * Customize the global variable name of `Vue` to get helpers from
* in function mode * in function mode

View File

@ -751,7 +751,7 @@ return (_ctx, _cache) => {
exports[`SFC compile <script setup> inlineTemplate mode ssr codegen 1`] = ` exports[`SFC compile <script setup> inlineTemplate mode ssr codegen 1`] = `
"import { useCssVars as _useCssVars, unref as _unref } from 'vue' "import { useCssVars as _useCssVars, unref as _unref } from 'vue'
import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from \\"@vue/server-renderer\\" import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from \\"vue/server-renderer\\"
import { ref } from 'vue' import { ref } from 'vue'

View File

@ -10,7 +10,7 @@ describe('ssr: scopeId', () => {
mode: 'module' mode: 'module'
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"import { ssrRenderAttrs as _ssrRenderAttrs } from \\"@vue/server-renderer\\" "import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
export function ssrRender(_ctx, _push, _parent, _attrs) { export function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`) _push(\`<div\${_ssrRenderAttrs(_attrs)} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
@ -27,7 +27,7 @@ describe('ssr: scopeId', () => {
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from \\"vue\\" "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\" import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
export function ssrRender(_ctx, _push, _parent, _attrs) { export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\") const _component_foo = _resolveComponent(\\"foo\\")
@ -56,7 +56,7 @@ describe('ssr: scopeId', () => {
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\" "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\" import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
export function ssrRender(_ctx, _push, _parent, _attrs) { export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\") const _component_foo = _resolveComponent(\\"foo\\")
@ -85,7 +85,7 @@ describe('ssr: scopeId', () => {
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\" "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"@vue/server-renderer\\" import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
export function ssrRender(_ctx, _push, _parent, _attrs) { export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\") const _component_foo = _resolveComponent(\\"foo\\")