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
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>\`)
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\\"}
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([
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\\"}
`<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\\"}
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`,
[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)
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'
}
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>