wip(compiler-ssr): v-model static types + textarea

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

@@ -0,0 +1,68 @@
+import { compile } from '../src'
+
+describe('ssr: v-model', () => {
+  test('<input> (text types)', () => {
+    expect(compile(`<input v-model="bar">`).code).toMatchInlineSnapshot(`
+      "const { _renderAttr } = require(\\"@vue/server-renderer\\")
+
+      return function ssrRender(_ctx, _push, _parent) {
+        _push(\`<input\${_renderAttr(\\"value\\", _ctx.bar)}>\`)
+      }"
+    `)
+
+    expect(compile(`<input type="email" v-model="bar">`).code)
+      .toMatchInlineSnapshot(`
+      "const { _renderAttr } = require(\\"@vue/server-renderer\\")
+
+      return function ssrRender(_ctx, _push, _parent) {
+        _push(\`<input type=\\"email\\"\${_renderAttr(\\"value\\", _ctx.bar)}>\`)
+      }"
+    `)
+  })
+
+  test('<input type="radio">', () => {
+    expect(compile(`<input type="radio" value="foo" v-model="bar">`).code)
+      .toMatchInlineSnapshot(`
+      "const { _looseEqual } = require(\\"@vue/server-renderer\\")
+
+      return function ssrRender(_ctx, _push, _parent) {
+        _push(\`<input type=\\"radio\\" value=\\"foo\\"\${(_looseEqual(_ctx.bar, \\"foo\\")) ? \\" checked\\" : \\"\\"}>\`)
+      }"
+    `)
+  })
+
+  test('<input type="checkbox"', () => {
+    expect(compile(`<input type="checkbox" v-model="bar">`).code)
+      .toMatchInlineSnapshot(`
+      "const { _looseContain } = require(\\"@vue/server-renderer\\")
+
+      return function ssrRender(_ctx, _push, _parent) {
+        _push(\`<input type=\\"checkbox\\"\${((Array.isArray(_ctx.bar))
+          ? _looseContain(_ctx.bar, null)
+          : _ctx.bar) ? \\" checked\\" : \\"\\"}>\`)
+      }"
+    `)
+
+    expect(compile(`<input type="checkbox" value="foo" v-model="bar">`).code)
+      .toMatchInlineSnapshot(`
+      "const { _looseContain } = require(\\"@vue/server-renderer\\")
+
+      return function ssrRender(_ctx, _push, _parent) {
+        _push(\`<input type=\\"checkbox\\" value=\\"foo\\"\${((Array.isArray(_ctx.bar))
+          ? _looseContain(_ctx.bar, \\"foo\\")
+          : _ctx.bar) ? \\" checked\\" : \\"\\"}>\`)
+      }"
+    `)
+  })
+
+  test('<textarea>', () => {
+    expect(compile(`<textarea v-model="foo">bar</textarea>`).code)
+      .toMatchInlineSnapshot(`
+      "const { _interpolate } = require(\\"@vue/server-renderer\\")
+
+      return function ssrRender(_ctx, _push, _parent) {
+        _push(\`<textarea>\${_interpolate(_ctx.foo)}</textarea>\`)
+      }"
+    `)
+  })
+})

packages/compiler-ssr/src/runtimeHelpers.ts

@@ -9,6 +9,8 @@ export const SSR_RENDER_ATTRS = Symbol(`renderAttrs`)
 export const SSR_RENDER_ATTR = Symbol(`renderAttr`)
 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 ssrHelpers = {
   [SSR_INTERPOLATE]: `_interpolate`,
@@ -19,7 +21,9 @@ export const ssrHelpers = {
   [SSR_RENDER_ATTRS]: `_renderAttrs`,
   [SSR_RENDER_ATTR]: `_renderAttr`,
   [SSR_RENDER_DYNAMIC_ATTR]: `_renderDynamicAttr`,
-  [SSR_RENDER_LIST]: `_renderList`
+  [SSR_RENDER_LIST]: `_renderList`,
+  [SSR_LOOSE_EQUAL]: `_looseEqual`,
+  [SSR_LOOSE_CONTAIN]: `_looseContain`
 }
 
 // Note: these are helpers imported from @vue/server-renderer

packages/compiler-ssr/src/transforms/ssrVModel.ts

@@ -1,7 +1,123 @@
-import { DirectiveTransform } from '@vue/compiler-dom'
+import {
+  DirectiveTransform,
+  ElementTypes,
+  transformModel,
+  findProp,
+  NodeTypes,
+  createDOMCompilerError,
+  DOMErrorCodes,
+  Property,
+  createObjectProperty,
+  createSimpleExpression,
+  createCallExpression,
+  PlainElementNode,
+  ExpressionNode,
+  createConditionalExpression,
+  createInterpolation
+} from '@vue/compiler-dom'
+import { SSR_LOOSE_EQUAL, SSR_LOOSE_CONTAIN } from '../runtimeHelpers'
 
 export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
-  return {
-    props: []
+  const model = dir.exp!
+
+  function checkDuplicatedValue() {
+    const value = findProp(node, 'value')
+    if (value) {
+      context.onError(
+        createDOMCompilerError(
+          DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE,
+          value.loc
+        )
+      )
+    }
+  }
+
+  if (node.tagType === ElementTypes.ELEMENT) {
+    let props: Property[] = []
+    const defaultProps = [
+      // default value binding for text type inputs
+      createObjectProperty(createSimpleExpression(`value`, true), model)
+    ]
+    if (node.tag === 'input') {
+      const type = findProp(node, 'type')
+      if (type) {
+        if (type.type === NodeTypes.DIRECTIVE) {
+          // dynamic type
+          // TODO
+        } else if (type.value) {
+          // static type
+          switch (type.value.content) {
+            case 'radio':
+              props = [
+                createObjectProperty(
+                  createSimpleExpression(`checked`, true),
+                  createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
+                    model,
+                    findValueBinding(node)
+                  ])
+                )
+              ]
+              break
+            case 'checkbox':
+              const value = findValueBinding(node)
+              props = [
+                createObjectProperty(
+                  createSimpleExpression(`checked`, true),
+                  createConditionalExpression(
+                    createCallExpression(`Array.isArray`, [model]),
+                    createCallExpression(context.helper(SSR_LOOSE_CONTAIN), [
+                      model,
+                      value
+                    ]),
+                    model
+                  )
+                )
+              ]
+              break
+            case 'file':
+              context.onError(
+                createDOMCompilerError(
+                  DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT,
+                  dir.loc
+                )
+              )
+              break
+            default:
+              checkDuplicatedValue()
+              props = defaultProps
+              break
+          }
+        }
+      } else {
+        checkDuplicatedValue()
+        props = defaultProps
+      }
+    } else if (node.tag === 'textarea') {
+      checkDuplicatedValue()
+      node.children = [createInterpolation(model, model.loc)]
+    } else if (node.tag === 'select') {
+      // TODO
+    } else {
+      context.onError(
+        createDOMCompilerError(
+          DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT,
+          dir.loc
+        )
+      )
+    }
+
+    return { props }
+  } else {
+    // component v-model
+    return transformModel(dir, node, context)
   }
 }
+
+function findValueBinding(node: PlainElementNode): ExpressionNode {
+  const valueBinding = findProp(node, 'value')
+  return valueBinding
+    ? valueBinding.type === NodeTypes.DIRECTIVE
+      ? valueBinding.exp!
+      : createSimpleExpression(valueBinding.value!.content, true)
+    : createSimpleExpression(`null`, false)
+}

packages/compiler-ssr/src/transforms/ssrVShow.ts

@@ -1,16 +1,18 @@
 import {
   DirectiveTransform,
-  createCompilerError,
   DOMErrorCodes,
   createObjectProperty,
   createSimpleExpression,
   createConditionalExpression,
-  createObjectExpression
+  createObjectExpression,
+  createDOMCompilerError
 } from '@vue/compiler-dom'
 
 export const ssrTransformShow: DirectiveTransform = (dir, node, context) => {
   if (!dir.exp) {
-    context.onError(createCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION))
+    context.onError(
+      createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION)
+    )
   }
   return {
     props: [