sourceMap = false,
filename = `template.vue.html`,
scopeId = null,
+ runtimeGlobalName = `Vue`,
+ runtimeModuleName = `vue`,
ssr = false
}: CodegenOptions
): CodegenContext {
sourceMap,
filename,
scopeId,
+ runtimeGlobalName,
+ runtimeModuleName,
ssr,
source: ast.loc.source,
code: ``,
}
function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
- const { ssr, helper, prefixIdentifiers, push, newline } = context
- const VueBinding = ssr ? `require("vue")` : `Vue`
+ const {
+ ssr,
+ helper,
+ prefixIdentifiers,
+ push,
+ newline,
+ runtimeModuleName,
+ runtimeGlobalName
+ } = context
+ const VueBinding = ssr
+ ? `require(${JSON.stringify(runtimeModuleName)})`
+ : runtimeGlobalName
// 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
context: CodegenContext,
genScopeId: boolean
) {
- const { push, helper, newline, scopeId } = context
+ const { push, helper, newline, scopeId, runtimeModuleName } = context
// generate import statements for helpers
if (genScopeId) {
ast.helpers.push(WITH_SCOPE_ID)
}
}
if (ast.helpers.length) {
- push(`import { ${ast.helpers.map(helper).join(', ')} } from "vue"\n`)
+ push(
+ `import { ${ast.helpers.map(helper).join(', ')} } from ${JSON.stringify(
+ runtimeModuleName
+ )}\n`
+ )
}
if (!__BROWSER__ && ast.ssrHelpers && ast.ssrHelpers.length) {
push(
scopeId?: string | null
// we need to know about this to generate proper preambles
prefixIdentifiers?: boolean
+ // for specifying where to import helpers
+ runtimeModuleName?: string
+ runtimeGlobalName?: string
// generate ssr-specific code?
ssr?: boolean
}
export function resolveComponentType(
node: ComponentNode,
- context: TransformContext
+ context: TransformContext,
+ ssr = false
) {
const { tag } = node
// 2. built-in components (Portal, Transition, KeepAlive, Suspense...)
const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag)
if (builtIn) {
- context.helper(builtIn)
+ // built-ins are simply fallthroughs / have special handling during ssr
+ // no we don't need to import their runtime equivalents
+ if (!ssr) context.helper(builtIn)
return builtIn
}
? parserOptionsMinimal
: parserOptionsStandard
+export const isBuiltInDOMComponent = (tag: string): symbol | undefined => {
+ if (isBuiltInType(tag, `Transition`)) {
+ return TRANSITION
+ } else if (isBuiltInType(tag, `TransitionGroup`)) {
+ return TRANSITION_GROUP
+ }
+}
+
export function compile(
template: string,
options: CompilerOptions = {}
show: transformShow,
...(options.directiveTransforms || {})
},
- isBuiltInComponent: tag => {
- if (isBuiltInType(tag, `Transition`)) {
- return TRANSITION
- } else if (isBuiltInType(tag, `TransitionGroup`)) {
- return TRANSITION_GROUP
- }
- }
+ isBuiltInComponent: isBuiltInDOMComponent
})
}
})
}
+export * from './runtimeHelpers'
export { transformStyle } from './transforms/transformStyle'
export { createDOMCompilerError, DOMErrorCodes } from './errors'
export * from '@vue/compiler-core'
}"
`)
})
+
+ test('built-in fallthroughs', () => {
+ // no fragment
+ expect(compile(`<transition><div/></transition>`).code)
+ .toMatchInlineSnapshot(`
+ "
+ return function ssrRender(_ctx, _push, _parent) {
+ _push(\`<div></div>\`)
+ }"
+ `)
+
+ // wrap with fragment
+ expect(compile(`<transition-group><div/></transition-group>`).code)
+ .toMatchInlineSnapshot(`
+ "
+ return function ssrRender(_ctx, _push, _parent) {
+ _push(\`<!----><div></div><!---->\`)
+ }"
+ `)
+
+ // no fragment
+ expect(compile(`<keep-alive><foo/></keep-alive>`).code)
+ .toMatchInlineSnapshot(`
+ "const { resolveComponent } = require(\\"vue\\")
+ const { _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent) {
+ const _component_foo = resolveComponent(\\"foo\\")
+
+ _ssrRenderComponent(_component_foo, null, null, _parent)
+ }"
+ `)
+
+ // wrap with fragment
+ expect(compile(`<suspense><div/></suspense>`).code)
+ .toMatchInlineSnapshot(`
+ "
+ return function ssrRender(_ctx, _push, _parent) {
+ _push(\`<!----><div></div><!---->\`)
+ }"
+ `)
+ })
})
})
trackSlotScopes,
noopDirectiveTransform,
transformBind,
- transformStyle
+ transformStyle,
+ isBuiltInDOMComponent
} from '@vue/compiler-dom'
import { ssrCodegenTransform } from './ssrCodegenTransform'
import { ssrTransformElement } from './transforms/ssrTransformElement'
cloak: noopDirectiveTransform,
once: noopDirectiveTransform,
...(options.directiveTransforms || {}) // user transforms
- }
+ },
+ isBuiltInComponent: isBuiltInDOMComponent
})
// traverse the template AST and convert into SSR codegen AST
export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
const context = createSSRTransformContext(options)
-
const isFragment =
ast.children.length > 1 && !ast.children.every(c => isText(c))
- if (isFragment) {
- context.pushStringPart(`<!---->`)
- }
- processChildren(ast.children, context)
- if (isFragment) {
- context.pushStringPart(`<!---->`)
- }
-
+ processChildren(ast.children, context, isFragment)
ast.codegenNode = createBlockStatement(context.body)
// Finalize helpers.
export function processChildren(
children: TemplateChildNode[],
- context: SSRTransformContext
+ context: SSRTransformContext,
+ asFragment = false
) {
+ if (asFragment) {
+ context.pushStringPart(`<!---->`)
+ }
const isVoidTag = context.options.isVoidTag || NO
for (let i = 0; i < children.length; i++) {
const child = children[i]
ssrProcessFor(child, context)
}
}
+ if (asFragment) {
+ context.pushStringPart(`<!---->`)
+ }
}
resolveComponentType,
buildProps,
ComponentNode,
- PORTAL,
- SUSPENSE,
SlotFnBuilder,
createFunctionExpression,
createBlockStatement,
buildSlots,
FunctionExpression,
- TemplateChildNode
+ TemplateChildNode,
+ PORTAL,
+ SUSPENSE,
+ TRANSITION_GROUP
} from '@vue/compiler-dom'
import { SSR_RENDER_COMPONENT } from '../runtimeHelpers'
import {
children: TemplateChildNode[]
}
+const componentTypeMap = new WeakMap<ComponentNode, symbol>()
+
export const ssrTransformComponent: NodeTransform = (node, context) => {
if (
node.type !== NodeTypes.ELEMENT ||
}
return function ssrPostTransformComponent() {
- const component = resolveComponentType(node, context)
-
+ const component = resolveComponentType(node, context, true /* ssr */)
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
- }
+ componentTypeMap.set(node, component)
+ return // built-in component: fallthrough
}
// note we are not passing ssr: true here because for components, v-on
node: ComponentNode,
context: SSRTransformContext
) {
- // finish up slot function expressions from the 1st pass.
- const wipEntries = wipMap.get(node) || []
- for (let i = 0; i < wipEntries.length; i++) {
- const { fn, children } = wipEntries[i]
- const childContext = createChildContext(context)
- processChildren(children, childContext)
- fn.body = createBlockStatement(childContext.body)
+ if (!node.ssrCodegenNode) {
+ // this is a built-in component that fell-through.
+ // just render its children.
+ const component = componentTypeMap.get(node)!
+
+ if (component === PORTAL) {
+ // TODO
+ return
+ }
+
+ const needFragmentWrapper =
+ component === SUSPENSE || component === TRANSITION_GROUP
+ processChildren(node.children, context, needFragmentWrapper)
+ } else {
+ // finish up slot function expressions from the 1st pass.
+ const wipEntries = wipMap.get(node) || []
+ for (let i = 0; i < wipEntries.length; i++) {
+ const { fn, children } = wipEntries[i]
+ const childContext = createChildContext(context)
+ processChildren(children, childContext)
+ fn.body = createBlockStatement(childContext.body)
+ }
+ context.pushStatement(node.ssrCodegenNode)
}
- context.pushStatement(node.ssrCodegenNode!)
}
const childContext = createChildContext(context)
const needFragmentWrapper =
node.children.length !== 1 || node.children[0].type !== NodeTypes.ELEMENT
- if (needFragmentWrapper) {
- childContext.pushStringPart(`<!---->`)
- }
- processChildren(node.children, childContext)
- if (needFragmentWrapper) {
- childContext.pushStringPart(`<!---->`)
- }
+ processChildren(node.children, childContext, needFragmentWrapper)
const renderLoop = createFunctionExpression(
createForLoopParams(node.parseResult)
)
// optimize away nested fragments when the only child is a ForNode
!(children.length === 1 && children[0].type === NodeTypes.FOR)
const childContext = createChildContext(context)
- if (needFragmentWrapper) {
- childContext.pushStringPart(`<!---->`)
- }
- processChildren(children, childContext)
- if (needFragmentWrapper) {
- childContext.pushStringPart(`<!---->`)
- }
+ processChildren(children, childContext, needFragmentWrapper)
return createBlockStatement(childContext.body)
}
projects / thirdparty / vuejs / core.git / commitdiff
