diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts index 250c7fb6..d58c83bb 100644 --- a/packages/compiler-core/src/codegen.ts +++ b/packages/compiler-core/src/codegen.ts @@ -238,7 +238,7 @@ export function generate( for (let i = 0; i < ast.temps; i++) { push(`${i > 0 ? `, ` : ``}_temp${i}`) } - newline() + push(`\n`) } if (ast.components.length || ast.directives.length || ast.temps) { newline() diff --git a/packages/compiler-core/src/index.ts b/packages/compiler-core/src/index.ts index 07d1a405..e807b0e5 100644 --- a/packages/compiler-core/src/index.ts +++ b/packages/compiler-core/src/index.ts @@ -34,6 +34,7 @@ export { transformOn } from './transforms/vOn' export { transformBind } from './transforms/vBind' // exported for compiler-ssr +export { MERGE_PROPS } from './runtimeHelpers' export { processIfBranches } from './transforms/vIf' export { processForNode, createForLoopParams } from './transforms/vFor' export { diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts index 3d7167c0..81b38699 100644 --- a/packages/compiler-core/src/transform.ts +++ b/packages/compiler-core/src/transform.ts @@ -16,7 +16,8 @@ import { ComponentCodegenNode, createCallExpression, CacheExpression, - createCacheExpression + createCacheExpression, + TemplateLiteral } from './ast' import { isString, @@ -62,6 +63,7 @@ export type DirectiveTransform = ( export interface DirectiveTransformResult { props: Property[] needRuntime?: boolean | symbol + ssrTagParts?: TemplateLiteral['elements'] } // A structural directive transform is a technically a NodeTransform; diff --git a/packages/compiler-ssr/__tests__/ssrElement.spec.ts b/packages/compiler-ssr/__tests__/ssrElement.spec.ts index 1f08706f..9769709a 100644 --- a/packages/compiler-ssr/__tests__/ssrElement.spec.ts +++ b/packages/compiler-ssr/__tests__/ssrElement.spec.ts @@ -55,7 +55,7 @@ describe('ssr: element', () => { return function ssrRender(_ctx, _push, _parent) { let _temp0 - + _push(\`\${ diff --git a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts index 31ee50cc..a5ffed49 100644 --- a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts +++ b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts @@ -65,4 +65,73 @@ describe('ssr: v-model', () => { }" `) }) + + test('', () => { + expect(compile(``).code) + .toMatchInlineSnapshot(` + "const { _renderAttr, _renderDynamicModel } = require(\\"@vue/server-renderer\\") + + return function ssrRender(_ctx, _push, _parent) { + _push(\`\`) + }" + `) + + expect(compile(``).code) + .toMatchInlineSnapshot(` + "const { _renderAttr, _renderDynamicModel } = require(\\"@vue/server-renderer\\") + + return function ssrRender(_ctx, _push, _parent) { + _push(\`\`) + }" + `) + + expect(compile(``).code) + .toMatchInlineSnapshot(` + "const { _renderAttr, _renderDynamicModel } = require(\\"@vue/server-renderer\\") + + return function ssrRender(_ctx, _push, _parent) { + _push(\`\`) + }" + `) + }) + + test('', () => { + expect(compile(``).code) + .toMatchInlineSnapshot(` + "const { mergeProps } = require(\\"vue\\") + const { _renderAttrs, _getDynamicModelProps } = require(\\"@vue/server-renderer\\") + + return function ssrRender(_ctx, _push, _parent) { + let _temp0 + + _push(\`\`) + }" + `) + + expect(compile(``).code) + .toMatchInlineSnapshot(` + "const { mergeProps } = require(\\"vue\\") + const { _renderAttrs, _getDynamicModelProps } = require(\\"@vue/server-renderer\\") + + return function ssrRender(_ctx, _push, _parent) { + let _temp0 + + _push(\`\`) + }" + `) + }) }) diff --git a/packages/compiler-ssr/src/runtimeHelpers.ts b/packages/compiler-ssr/src/runtimeHelpers.ts index 87fd6b35..84358609 100644 --- a/packages/compiler-ssr/src/runtimeHelpers.ts +++ b/packages/compiler-ssr/src/runtimeHelpers.ts @@ -11,6 +11,8 @@ export const SSR_RENDER_DYNAMIC_ATTR = Symbol(`renderDynamicAttr`) export const SSR_RENDER_LIST = Symbol(`renderList`) export const SSR_LOOSE_EQUAL = Symbol(`looseEqual`) export const SSR_LOOSE_CONTAIN = Symbol(`looseContain`) +export const SSR_RENDER_DYNAMIC_MODEL = Symbol(`renderDynamicModel`) +export const SSR_GET_DYNAMIC_MODEL_PROPS = Symbol(`getDynamicModelProps`) export const ssrHelpers = { [SSR_INTERPOLATE]: `_interpolate`, @@ -23,7 +25,9 @@ export const ssrHelpers = { [SSR_RENDER_DYNAMIC_ATTR]: `_renderDynamicAttr`, [SSR_RENDER_LIST]: `_renderList`, [SSR_LOOSE_EQUAL]: `_looseEqual`, - [SSR_LOOSE_CONTAIN]: `_looseContain` + [SSR_LOOSE_CONTAIN]: `_looseContain`, + [SSR_RENDER_DYNAMIC_MODEL]: `_renderDynamicModel`, + [SSR_GET_DYNAMIC_MODEL_PROPS]: `_getDynamicModelProps` } // Note: these are helpers imported from @vue/server-renderer diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts index feacbd89..5345c10a 100644 --- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts +++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts @@ -20,7 +20,8 @@ import { ArrayExpression, createAssignmentExpression, TextNode, - hasDynamicKeyVBind + hasDynamicKeyVBind, + MERGE_PROPS } from '@vue/compiler-dom' import { escapeHtml, isBooleanAttr, isSSRSafeAttrName } from '@vue/shared' import { createSSRCompilerError, SSRErrorCodes } from '../errors' @@ -30,7 +31,8 @@ import { SSR_RENDER_STYLE, SSR_RENDER_DYNAMIC_ATTR, SSR_RENDER_ATTRS, - SSR_INTERPOLATE + SSR_INTERPOLATE, + SSR_GET_DYNAMIC_MODEL_PROPS } from '../runtimeHelpers' export const ssrTransformElement: NodeTransform = (node, context) => { @@ -55,6 +57,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => { context.helper(SSR_RENDER_ATTRS), [props] ) + if (node.tag === 'textarea') { //