refactor: hydration

Author: edison1105

packages/compiler-core/src/ast.ts

@@ -163,6 +163,7 @@ export interface ComponentNode extends BaseElementNode {
     | MemoExpression // when cached by v-memo
     | undefined
   ssrCodegenNode?: CallExpression
+  anchor?: string
 }
 
 export interface SlotOutletNode extends BaseElementNode {
@@ -172,12 +173,14 @@ export interface SlotOutletNode extends BaseElementNode {
     | CacheExpression // when cached by v-once
     | undefined
   ssrCodegenNode?: CallExpression
+  anchor?: string
 }
 
 export interface TemplateNode extends BaseElementNode {
   tagType: ElementTypes.TEMPLATE
   // TemplateNode is a container type that always gets compiled away
   codegenNode: undefined
+  anchor?: string
 }
 
 export interface TextNode extends Node {
@@ -287,6 +290,7 @@ export interface IfNode extends Node {
   type: NodeTypes.IF
   branches: IfBranchNode[]
   codegenNode?: IfConditionalExpression | CacheExpression // <div v-if v-once>
+  anchor?: string
 }
 
 export interface IfBranchNode extends Node {
@@ -306,6 +310,7 @@ export interface ForNode extends Node {
   parseResult: ForParseResult
   children: TemplateChildNode[]
   codegenNode?: ForCodegenNode
+  anchor?: string
 }
 
 export interface ForParseResult {

packages/compiler-core/src/codegen.ts

@@ -136,6 +136,7 @@ export interface CodegenContext
     | 'inline'
     | 'vaporRuntimeModuleName'
     | 'expressionPlugins'
+    | 'vapor'
   > {
   source: string
   code: string

packages/compiler-core/src/options.ts

@@ -220,6 +220,11 @@ interface SharedTransformCodegenOptions {
    * @default 'template.vue.html'
    */
   filename?: string
+
+  /**
+   * Indicates vapor component
+   */
+  vapor?: boolean
 }
 
 export interface TransformOptions

packages/compiler-core/src/transform.ts

@@ -146,6 +146,7 @@ export function createTransformContext(
     slotted = true,
     ssr = false,
     inSSR = false,
+    vapor = false,
     ssrCssVars = ``,
     bindingMetadata = EMPTY_OBJ,
     inline = false,
@@ -173,6 +174,7 @@ export function createTransformContext(
     slotted,
     ssr,
     inSSR,
+    vapor,
     ssrCssVars,
     bindingMetadata,
     inline,

packages/compiler-core/src/transforms/vSlot.ts

@@ -100,6 +100,7 @@ export type SlotFnBuilder = (
   vFor: DirectiveNode | undefined,
   slotChildren: TemplateChildNode[],
   loc: SourceLocation,
+  parent: ElementNode,
 ) => FunctionExpression
 
 const buildClientSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) =>
@@ -147,7 +148,7 @@ export function buildSlots(
     slotsProperties.push(
       createObjectProperty(
         arg || createSimpleExpression('default', true),
-        buildSlotFn(exp, undefined, children, loc),
+        buildSlotFn(exp, undefined, children, loc, node),
       ),
     )
   }
@@ -200,7 +201,13 @@ export function buildSlots(
     }
 
     const vFor = findDir(slotElement, 'for')
-    const slotFunction = buildSlotFn(slotProps, vFor, slotChildren, slotLoc)
+    const slotFunction = buildSlotFn(
+      slotProps,
+      vFor,
+      slotChildren,
+      slotLoc,
+      slotElement,
+    )
 
     // check if this slot is conditional (v-if/v-for)
     let vIf: DirectiveNode | undefined
@@ -304,7 +311,7 @@ export function buildSlots(
       props: ExpressionNode | undefined,
       children: TemplateChildNode[],
     ) => {
-      const fn = buildSlotFn(props, undefined, children, loc)
+      const fn = buildSlotFn(props, undefined, children, loc, node)
       if (__COMPAT__ && context.compatConfig) {
         fn.isNonScopedSlot = true
       }

packages/compiler-sfc/src/compileScript.ts

@@ -980,6 +980,11 @@ export function compileScript(
     ctx.hasDefineExposeCall || options.inlineTemplate ? `` : `  __expose();\n`
   // wrap setup code with function.
   if (ctx.isTS) {
+    // in SSR, always use defineComponent, so __vapor flag is required
+    if (ssr && vapor) {
+      runtimeOptions += `\n  __vapor: true,`
+    }
+
     // for TS, make sure the exported type is still valid type with
     // correct props information
     // we have to use object spread for types to be merged properly

packages/compiler-sfc/src/compileTemplate.ts

@@ -253,6 +253,7 @@ function doCompileTemplate({
       slotted,
       sourceMap: true,
       ...compilerOptions,
+      vapor,
       hmr: !isProd,
       nodeTransforms: nodeTransforms.concat(
         compilerOptions.nodeTransforms || [],

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

@@ -39,7 +39,6 @@ describe('ssr: components', () => {
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent("foo"), _mergeProps({ prop: "b" }, _attrs), null), _parent)
-          _push(\`<!--dynamic-component-->\`)
         }"
       `)
 
@@ -50,7 +49,6 @@ describe('ssr: components', () => {
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: "b" }, _attrs), null), _parent)
-          _push(\`<!--dynamic-component-->\`)
         }"
       `)
   })
@@ -246,8 +244,7 @@ describe('ssr: components', () => {
                   _ssrRenderList(list, (i) => {
                     _push(\`<span\${_scopeId}></span>\`)
                   })
-                  _push(\`<!--]--><!--for--></div>\`)
-                  _push(\`<!--if-->\`)
+                  _push(\`<!--]--></div>\`)
                 } else {
                   _push(\`<!---->\`)
                 }
@@ -270,8 +267,7 @@ describe('ssr: components', () => {
                   _ssrRenderList(_ctx.list, (i) => {
                     _push(\`<span\${_scopeId}></span>\`)
                   })
-                  _push(\`<!--]--><!--for--></div>\`)
-                  _push(\`<!--if-->\`)
+                  _push(\`<!--]--></div>\`)
                 } else {
                   _push(\`<!---->\`)
                 }
@@ -365,7 +361,6 @@ describe('ssr: components', () => {
                   _push(\`\`)
                   if (false) {
                     _push(\`<div\${_scopeId}></div>\`)
-                    _push(\`<!--if-->\`)
                   } else {
                     _push(\`<!---->\`)
                   }

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

@@ -396,50 +396,4 @@ describe('ssr: element', () => {
       `)
     })
   })
-
-  describe('dynamic anchor', () => {
-    test('two consecutive components', () => {
-      expect(
-        getCompiledString(`
-        <div>
-          <div/>
-          <Comp1/>
-          <Comp2/>
-          <div/>
-        </div>
-        `),
-      ).toMatchInlineSnapshot(`
-        "\`<div><div></div>\`)
-          _push(_ssrRenderComponent(_component_Comp1, null, null, _parent))
-          _push(\`<!--[[-->\`)
-          _push(_ssrRenderComponent(_component_Comp2, null, null, _parent))
-          _push(\`<!--]]--><div></div></div>\`"
-      `)
-    })
-
-    test('multiple consecutive components', () => {
-      expect(
-        getCompiledString(`
-        <div>
-          <div/>
-          <Comp1/>
-          <Comp2/>
-          <Comp3/>
-          <Comp4/>
-          <div/>
-        </div>
-        `),
-      ).toMatchInlineSnapshot(`
-        "\`<div><div></div>\`)
-          _push(_ssrRenderComponent(_component_Comp1, null, null, _parent))
-          _push(\`<!--[[-->\`)
-          _push(_ssrRenderComponent(_component_Comp2, null, null, _parent))
-          _push(\`<!--]]--><!--[[-->\`)
-          _push(_ssrRenderComponent(_component_Comp3, null, null, _parent))
-          _push(\`<!--]]-->\`)
-          _push(_ssrRenderComponent(_component_Comp4, null, null, _parent))
-          _push(\`<div></div></div>\`"
-      `)
-    })
-  })
 })

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

@@ -29,7 +29,6 @@ describe('ssr: attrs fallthrough', () => {
         _push(\`<!--[-->\`)
         if (true) {
           _push(\`<div></div>\`)
-          _push(\`<!--if-->\`)
         } else {
           _push(\`<!---->\`)
         }