wip(ssr): ssr helper codegen

Author: yyx990803

packages/compiler-core/src/ast.ts

@@ -103,6 +103,7 @@ export interface RootNode extends Node {
   imports: ImportItem[]
   cached: number
   codegenNode?: TemplateChildNode | JSChildNode | BlockStatement | undefined
+  ssrHelpers?: symbol[]
 }
 
 export type ElementNode =

packages/compiler-core/src/codegen.ts

@@ -74,7 +74,7 @@ function createCodegenContext(
   ast: RootNode,
   {
     mode = 'function',
-    prefixIdentifiers = mode === 'module' || mode === 'cjs',
+    prefixIdentifiers = mode === 'module',
     sourceMap = false,
     filename = `template.vue.html`,
     scopeId = null,
@@ -169,7 +169,6 @@ export function generate(
   const {
     mode,
     push,
-    helper,
     prefixIdentifiers,
     indent,
     deindent,
@@ -182,58 +181,10 @@ export function generate(
   const genScopeId = !__BROWSER__ && scopeId != null && mode === 'module'
 
   // preambles
-  if (mode === 'function' || mode === 'cjs') {
-    const VueBinding = mode === 'function' ? `Vue` : `require("vue")`
-    // Generate const declaration for helpers
-    // In prefix mode, we place the const declaration at top so it's done
-    // only once; But if we not prefixing, we place the declaration inside the
-    // with block so it doesn't incur the `in` check cost for every helper access.
-    if (hasHelpers) {
-      if (prefixIdentifiers) {
-        push(
-          `const { ${ast.helpers.map(helper).join(', ')} } = ${VueBinding}\n`
-        )
-      } else {
-        // "with" mode.
-        // save Vue in a separate variable to avoid collision
-        push(`const _Vue = ${VueBinding}\n`)
-        // in "with" mode, helpers are declared inside the with block to avoid
-        // has check cost, but hoists are lifted out of the function - we need
-        // to provide the helper here.
-        if (ast.hoists.length) {
-          const staticHelpers = [CREATE_VNODE, CREATE_COMMENT, CREATE_TEXT]
-            .filter(helper => ast.helpers.includes(helper))
-            .map(s => `${helperNameMap[s]}: _${helperNameMap[s]}`)
-            .join(', ')
-          push(`const { ${staticHelpers} } = _Vue\n`)
-        }
-      }
-    }
-    genHoists(ast.hoists, context)
-    newline()
-    push(`return `)
+  if (mode === 'module') {
+    genModulePreamble(ast, context, genScopeId)
   } else {
-    // generate import statements for helpers
-    if (genScopeId) {
-      ast.helpers.push(WITH_SCOPE_ID)
-      if (ast.hoists.length) {
-        ast.helpers.push(PUSH_SCOPE_ID, POP_SCOPE_ID)
-      }
-    }
-    if (hasHelpers) {
-      push(`import { ${ast.helpers.map(helper).join(', ')} } from "vue"\n`)
-    }
-    if (ast.imports.length) {
-      genImports(ast.imports, context)
-      newline()
-    }
-    if (genScopeId) {
-      push(`const withId = ${helper(WITH_SCOPE_ID)}("${scopeId}")`)
-      newline()
-    }
-    genHoists(ast.hoists, context)
-    newline()
-    push(`export `)
+    genFunctionPreamble(ast, context)
   }
 
   // enter render function
@@ -315,6 +266,82 @@ export function generate(
   }
 }
 
+function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
+  const { mode, helper, prefixIdentifiers, push, newline } = context
+  const VueBinding = mode === 'function' ? `Vue` : `require("vue")`
+  // Generate const declaration for helpers
+  // In prefix mode, we place the const declaration at top so it's done
+  // only once; But if we not prefixing, we place the declaration inside the
+  // with block so it doesn't incur the `in` check cost for every helper access.
+  if (ast.helpers.length > 0) {
+    if (prefixIdentifiers) {
+      push(`const { ${ast.helpers.map(helper).join(', ')} } = ${VueBinding}\n`)
+    } else {
+      // "with" mode.
+      // save Vue in a separate variable to avoid collision
+      push(`const _Vue = ${VueBinding}\n`)
+      // in "with" mode, helpers are declared inside the with block to avoid
+      // has check cost, but hoists are lifted out of the function - we need
+      // to provide the helper here.
+      if (ast.hoists.length) {
+        const staticHelpers = [CREATE_VNODE, CREATE_COMMENT, CREATE_TEXT]
+          .filter(helper => ast.helpers.includes(helper))
+          .map(s => `${helperNameMap[s]}: _${helperNameMap[s]}`)
+          .join(', ')
+        push(`const { ${staticHelpers} } = _Vue\n`)
+      }
+    }
+  }
+  // generate variables for ssr helpers
+  if (!__BROWSER__ && ast.ssrHelpers && ast.ssrHelpers.length) {
+    // ssr guaruntees prefixIdentifier: true
+    push(
+      `const { ${ast.ssrHelpers
+        .map(helper)
+        .join(', ')} } = require("@vue/server-renderer")\n`
+    )
+  }
+  genHoists(ast.hoists, context)
+  newline()
+  push(`return `)
+}
+
+function genModulePreamble(
+  ast: RootNode,
+  context: CodegenContext,
+  genScopeId: boolean
+) {
+  const { push, helper, newline, scopeId } = context
+  // generate import statements for helpers
+  if (genScopeId) {
+    ast.helpers.push(WITH_SCOPE_ID)
+    if (ast.hoists.length) {
+      ast.helpers.push(PUSH_SCOPE_ID, POP_SCOPE_ID)
+    }
+  }
+  if (ast.helpers.length) {
+    push(`import { ${ast.helpers.map(helper).join(', ')} } from "vue"\n`)
+  }
+  if (!__BROWSER__ && ast.ssrHelpers && ast.ssrHelpers.length) {
+    push(
+      `import { ${ast.ssrHelpers
+        .map(helper)
+        .join(', ')} } from "@vue/server-renderer"\n`
+    )
+  }
+  if (ast.imports.length) {
+    genImports(ast.imports, context)
+    newline()
+  }
+  if (genScopeId) {
+    push(`const withId = ${helper(WITH_SCOPE_ID)}("${scopeId}")`)
+    newline()
+  }
+  genHoists(ast.hoists, context)
+  newline()
+  push(`export `)
+}
+
 function genAssets(
   assets: string[],
   type: 'component' | 'directive',

packages/compiler-core/src/index.ts

@@ -33,6 +33,7 @@ export { transformOn } from './transforms/vOn'
 
 // exported for compiler-ssr
 export { processIfBranches } from './transforms/vIf'
+export { processForNode } from './transforms/vFor'
 export {
   transformExpression,
   processExpression

packages/compiler-core/src/options.ts

@@ -23,7 +23,6 @@ export interface ParserOptions {
   // this number is based on the map above, but it should be pre-computed
   // to avoid the cost on every parse() call.
   maxCRNameLength?: number
-
   onError?: (error: CompilerError) => void
 }
 
@@ -32,6 +31,8 @@ export interface TransformOptions {
   directiveTransforms?: { [name: string]: DirectiveTransform | undefined }
   isBuiltInComponent?: (tag: string) => symbol | void
   // Transform expressions like {{ foo }} to `_ctx.foo`.
+  // If this option is false, the generated code will be wrapped in a
+  // `with (this) { ... }` block.
   // - This is force-enabled in module mode, since modules are by default strict
   //   and cannot use `with`
   // - Default: mode === 'module'
@@ -48,6 +49,7 @@ export interface TransformOptions {
   //   analysis to determine if a handler is safe to cache.
   // - Default: false
   cacheHandlers?: boolean
+  ssr?: boolean
   onError?: (error: CompilerError) => void
 }
 
@@ -61,13 +63,6 @@ export interface CodegenOptions {
   //   `require('vue')`.
   // - Default: 'function'
   mode?: 'module' | 'function' | 'cjs'
-  // Prefix suitable identifiers with _ctx.
-  // If this option is false, the generated code will be wrapped in a
-  // `with (this) { ... }` block.
-  // - This is force-enabled in module mode, since modules are by default strict
-  //   and cannot use `with`
-  // - Default: mode === 'module'
-  prefixIdentifiers?: boolean
   // Generate source map?
   // - Default: false
   sourceMap?: boolean
@@ -76,7 +71,9 @@ export interface CodegenOptions {
   filename?: string
   // SFC scoped styles ID
   scopeId?: string | null
-  // generate SSR specific code?
+  // we need to know about this to generate proper preambles
+  prefixIdentifiers?: boolean
+  // generate ssr-specific code?
   ssr?: boolean
 }
 

packages/compiler-core/src/transform.ts

@@ -115,6 +115,7 @@ function createTransformContext(
     nodeTransforms = [],
     directiveTransforms = {},
     isBuiltInComponent = NOOP,
+    ssr = false,
     onError = defaultOnError
   }: TransformOptions
 ): TransformContext {
@@ -126,6 +127,7 @@ function createTransformContext(
     nodeTransforms,
     directiveTransforms,
     isBuiltInComponent,
+    ssr,
     onError,
 
     // state
@@ -256,10 +258,19 @@ export function transform(root: RootNode, options: TransformOptions) {
   if (options.hoistStatic) {
     hoistStatic(root, context)
   }
-  finalizeRoot(root, context)
+  if (!options.ssr) {
+    createRootCodegen(root, context)
+  }
+  // finalize meta information
+  root.helpers = [...context.helpers]
+  root.components = [...context.components]
+  root.directives = [...context.directives]
+  root.imports = [...context.imports]
+  root.hoists = context.hoists
+  root.cached = context.cached
 }
 
-function finalizeRoot(root: RootNode, context: TransformContext) {
+function createRootCodegen(root: RootNode, context: TransformContext) {
   const { helper } = context
   const { children } = root
   const child = children[0]
@@ -304,13 +315,6 @@ function finalizeRoot(root: RootNode, context: TransformContext) {
   } else {
     // no children = noop. codegen will return null.
   }
-  // finalize meta information
-  root.helpers = [...context.helpers]
-  root.components = [...context.components]
-  root.directives = [...context.directives]
-  root.imports = [...context.imports]
-  root.hoists = context.hoists
-  root.cached = context.cached
 }
 
 export function traverseChildren(
@@ -359,13 +363,17 @@ export function traverseNode(
 
   switch (node.type) {
     case NodeTypes.COMMENT:
-      // inject import for the Comment symbol, which is needed for creating
-      // comment nodes with `createVNode`
-      context.helper(CREATE_COMMENT)
+      if (!context.ssr) {
+        // inject import for the Comment symbol, which is needed for creating
+        // comment nodes with `createVNode`
+        context.helper(CREATE_COMMENT)
+      }
       break
     case NodeTypes.INTERPOLATION:
       // no need to traverse, but we need to inject toString helper
-      context.helper(TO_DISPLAY_STRING)
+      if (!context.ssr) {
+        context.helper(TO_DISPLAY_STRING)
+      }
       break
 
     // for container types, further traverse downwards