wip(ssr): basic components

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

@@ -1,15 +1,64 @@
-import { NodeTransform, NodeTypes, ElementTypes } from '@vue/compiler-dom'
+import {
+  NodeTransform,
+  NodeTypes,
+  ElementTypes,
+  createCallExpression,
+  resolveComponentType,
+  buildProps,
+  ComponentNode,
+  PORTAL,
+  SUSPENSE
+} from '@vue/compiler-dom'
+import { SSR_RENDER_COMPONENT } from '../runtimeHelpers'
+import { SSRTransformContext } from '../ssrCodegenTransform'
+import { isSymbol } from '@vue/shared'
 
 export const ssrTransformComponent: NodeTransform = (node, context) => {
   if (
-    node.type === NodeTypes.ELEMENT &&
-    node.tagType === ElementTypes.COMPONENT
+    node.type !== NodeTypes.ELEMENT ||
+    node.tagType !== ElementTypes.COMPONENT
   ) {
-    return function ssrPostTransformComponent() {
-      // generate a _push(_renderComponent) call
-      // dynamic component as well
-      // !check if we need to bail out for slots
-      // TODO also handle scopeID here
+    return
+  }
+
+  return function ssrPostTransformComponent() {
+    const component = resolveComponentType(node, context)
+
+    if (isSymbol(component)) {
+      // built-in compoonent
+      if (component === PORTAL) {
+        // TODO
+      } else if (component === SUSPENSE) {
+        // TODO fallthrough
+        // TODO option to use fallback content and resolve on client
+      } else {
+        // TODO fallthrough for KeepAlive & Transition
+      }
     }
+
+    // note we are not passing ssr: true here because for components, v-on
+    // handlers should still be passed
+    const { props } = buildProps(node, context)
+
+    // TODO slots
+    // TODO option for slots bail out
+    // TODO scopeId
+
+    node.ssrCodegenNode = createCallExpression(
+      context.helper(SSR_RENDER_COMPONENT),
+      [
+        component,
+        props || `null`,
+        `null`, // TODO slots
+        `_parent`
+      ]
+    )
   }
 }
+
+export function ssrProcessComponent(
+  node: ComponentNode,
+  context: SSRTransformContext
+) {
+  context.pushStatement(node.ssrCodegenNode!)
+}

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

@@ -21,7 +21,8 @@ import {
   createAssignmentExpression,
   TextNode,
   hasDynamicKeyVBind,
-  MERGE_PROPS
+  MERGE_PROPS,
+  isBindKey
 } from '@vue/compiler-dom'
 import { escapeHtml, isBooleanAttr, isSSRSafeAttrName } from '@vue/shared'
 import { createSSRCompilerError, SSRErrorCodes } from '../errors'
@@ -261,10 +262,7 @@ function isTextareaWithValue(
   return !!(
     node.tag === 'textarea' &&
     prop.name === 'bind' &&
-    prop.arg &&
-    prop.arg.type === NodeTypes.SIMPLE_EXPRESSION &&
-    prop.arg.isStatic &&
-    prop.arg.content === 'value'
+    isBindKey(prop.arg, 'value')
   )
 }