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

Author: yyx990803

packages/compiler-ssr/__tests__/ssrElement.spec.ts

@@ -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

packages/compiler-ssr/__tests__/ssrVShow.spec.ts

@@ -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\\"}
 

packages/compiler-ssr/src/runtimeHelpers.ts

@@ -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)

packages/compiler-ssr/src/ssrCodegenTransform.ts

@@ -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>