fix(compiler-ssr): import helpers from correct packages

This commit is contained in:
Evan You 2020-02-05 11:20:50 -05:00
parent c441e88469
commit 8f6b6690a2
4 changed files with 22 additions and 12 deletions

View File

@ -51,7 +51,7 @@ describe('ssr: element', () => {
test('<textarea> with dynamic v-bind', () => {
expect(compile(`<textarea v-bind="obj">fallback</textarea>`).code)
.toMatchInlineSnapshot(`
"const { _renderAttrs, _interpolate } = require(\\"vue\\")
"const { _renderAttrs, _interpolate } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
let _temp0

View File

@ -3,7 +3,7 @@ import { compile } from '../src'
describe('ssr: v-show', () => {
test('basic', () => {
expect(compile(`<div v-show="foo"/>`).code).toMatchInlineSnapshot(`
"const { _renderStyle } = require(\\"vue\\")
"const { _renderStyle } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
_push(\`<div\${_renderStyle((_ctx.foo) ? null : { display: \\"none\\" })}></div>\`)
@ -14,7 +14,7 @@ describe('ssr: v-show', () => {
test('with static style', () => {
expect(compile(`<div style="color:red" v-show="foo"/>`).code)
.toMatchInlineSnapshot(`
"const { _renderStyle } = require(\\"vue\\")
"const { _renderStyle } = require(\\"@vue/server-renderer\\")
const _hoisted_1 = {\\"color\\":\\"red\\"}
@ -30,7 +30,7 @@ describe('ssr: v-show', () => {
test('with dynamic style', () => {
expect(compile(`<div :style="{ color: 'red' }" v-show="foo"/>`).code)
.toMatchInlineSnapshot(`
"const { _renderStyle } = require(\\"vue\\")
"const { _renderStyle } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
_push(\`<div\${_renderStyle([
@ -46,7 +46,7 @@ describe('ssr: v-show', () => {
compile(`<div style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`)
.code
).toMatchInlineSnapshot(`
"const { _renderStyle } = require(\\"vue\\")
"const { _renderStyle } = require(\\"@vue/server-renderer\\")
const _hoisted_1 = {\\"color\\":\\"red\\"}
@ -66,7 +66,8 @@ describe('ssr: v-show', () => {
`<div v-bind="baz" style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
).code
).toMatchInlineSnapshot(`
"const { mergeProps, _renderAttrs } = require(\\"vue\\")
"const { mergeProps } = require(\\"vue\\")
const { _renderAttrs } = require(\\"@vue/server-renderer\\")
const _hoisted_1 = {\\"color\\":\\"red\\"}

View File

@ -10,9 +10,7 @@ export const SSR_RENDER_ATTR = Symbol(`renderAttr`)
export const SSR_RENDER_DYNAMIC_ATTR = Symbol(`renderDynamicAttr`)
export const SSR_RENDER_LIST = Symbol(`renderList`)
// Note: these are helpers imported from @vue/server-renderer
// make sure the names match!
registerRuntimeHelpers({
export const ssrHelpers = {
[SSR_INTERPOLATE]: `_interpolate`,
[SSR_RENDER_COMPONENT]: `_renderComponent`,
[SSR_RENDER_SLOT]: `_renderSlot`,
@ -22,4 +20,8 @@ registerRuntimeHelpers({
[SSR_RENDER_ATTR]: `_renderAttr`,
[SSR_RENDER_DYNAMIC_ATTR]: `_renderDynamicAttr`,
[SSR_RENDER_LIST]: `_renderList`
})
}
// Note: these are helpers imported from @vue/server-renderer
// make sure the names match!
registerRuntimeHelpers(ssrHelpers)

View File

@ -14,7 +14,7 @@ import {
CallExpression
} from '@vue/compiler-dom'
import { isString, escapeHtml, NO } from '@vue/shared'
import { SSR_INTERPOLATE } from './runtimeHelpers'
import { SSR_INTERPOLATE, ssrHelpers } from './runtimeHelpers'
import { processIf } from './transforms/ssrVIf'
import { processFor } from './transforms/ssrVFor'
@ -38,7 +38,14 @@ export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
}
ast.codegenNode = createBlockStatement(context.body)
ast.ssrHelpers = [...context.helpers]
// Finalize helpers.
// We need to separate helpers imported from 'vue' vs. '@vue/server-renderer'
ast.ssrHelpers = [
...ast.helpers.filter(h => h in ssrHelpers),
...context.helpers
]
ast.helpers = ast.helpers.filter(h => !(h in ssrHelpers))
}
export type SSRTransformContext = ReturnType<typeof createSSRTransformContext>