theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(compiler): support keep-alive in templates

Browse Source
This commit is contained in:
Evan You
2019-11-05 10:26:36 -05:00
parent a5f1387d78
commit 98e9b769e6
5 changed files with 136 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/compiler-core/src/ast.ts
View File

@@ -51,9 +51,7 @@ export const enum ElementTypes {
ELEMENT,
COMPONENT,
SLOT,
TEMPLATE,
PORTAL,
SUSPENSE
TEMPLATE
}
export interface Node {
@@ -105,8 +103,6 @@ export type ElementNode =
| ComponentNode
| SlotOutletNode
| TemplateNode
| PortalNode
| SuspenseNode
export interface BaseElementNode extends Node {
type: NodeTypes.ELEMENT
@@ -147,16 +143,6 @@ export interface TemplateNode extends BaseElementNode {
codegenNode: ElementCodegenNode | undefined | CacheExpression
}
export interface PortalNode extends BaseElementNode {
tagType: ElementTypes.PORTAL
codegenNode: ElementCodegenNode | undefined | CacheExpression
}
export interface SuspenseNode extends BaseElementNode {
tagType: ElementTypes.SUSPENSE
codegenNode: ElementCodegenNode | undefined | CacheExpression
}
export interface TextNode extends Node {
type: NodeTypes.TEXT
content: string

22
packages/compiler-core/src/parse.ts
View File

@@ -1,4 +1,4 @@
import { NO } from '@vue/shared'
import { NO, makeMap } from '@vue/shared'
import {
ErrorCodes,
createCompilerError,
@@ -29,6 +29,12 @@ import {
} from './ast'
import { extend } from '@vue/shared'
// Portal and Fragment are native types, not components
const isBuiltInComponent = /*#__PURE__*/ makeMap(
`suspense,keep-alive,keepalive,transition`,
true
)
export interface ParserOptions {
isVoidTag?: (tag: string) => boolean // e.g. img, br, hr
isNativeTag?: (tag: string) => boolean // e.g. loading-indicator in weex
@@ -467,15 +473,15 @@ function parseTag(
if (!context.inPre && !context.options.isCustomElement(tag)) {
if (context.options.isNativeTag) {
if (!context.options.isNativeTag(tag)) tagType = ElementTypes.COMPONENT
} else {
if (/^[A-Z]/.test(tag)) tagType = ElementTypes.COMPONENT
} else if (isBuiltInComponent(tag) || /^[A-Z]/.test(tag)) {
tagType = ElementTypes.COMPONENT
}
if (tag === 'slot') tagType = ElementTypes.SLOT
else if (tag === 'template') tagType = ElementTypes.TEMPLATE
else if (tag === 'portal' || tag === 'Portal') tagType = ElementTypes.PORTAL
else if (tag === 'suspense' || tag === 'Suspense')
tagType = ElementTypes.SUSPENSE
if (tag === 'slot') {
tagType = ElementTypes.SLOT
} else if (tag === 'template') {
tagType = ElementTypes.TEMPLATE
}
}
return {

2
packages/compiler-core/src/runtimeHelpers.ts
View File

@@ -1,6 +1,7 @@
export const FRAGMENT = Symbol(__DEV__ ? `Fragment` : ``)
export const PORTAL = Symbol(__DEV__ ? `Portal` : ``)
export const SUSPENSE = Symbol(__DEV__ ? `Suspense` : ``)
export const KEEP_ALIVE = Symbol(__DEV__ ? `KeepAlive` : ``)
export const OPEN_BLOCK = Symbol(__DEV__ ? `openBlock` : ``)
export const CREATE_BLOCK = Symbol(__DEV__ ? `createBlock` : ``)
export const CREATE_VNODE = Symbol(__DEV__ ? `createVNode` : ``)
@@ -28,6 +29,7 @@ export const helperNameMap: any = {
[FRAGMENT]: `Fragment`,
[PORTAL]: `Portal`,
[SUSPENSE]: `Suspense`,
[KEEP_ALIVE]: `KeepAlive`,
[OPEN_BLOCK]: `openBlock`,
[CREATE_BLOCK]: `createBlock`,
[CREATE_VNODE]: `createVNode`,

47
packages/compiler-core/src/transforms/transformElement.ts
View File

@@ -26,7 +26,8 @@ import {
MERGE_PROPS,
TO_HANDLERS,
PORTAL,
SUSPENSE
SUSPENSE,
KEEP_ALIVE
} from '../runtimeHelpers'
import { getInnerRange, isVSlot, toValidAssetId, findProp } from '../utils'
import { buildSlots } from './vSlot'
@@ -51,8 +52,13 @@ export const transformElement: NodeTransform = (node, context) => {
// perform the work on exit, after all child expressions have been
// processed and merged.
return () => {
const isComponent = node.tagType === ElementTypes.COMPONENT
let hasProps = node.props.length > 0
const { tag, tagType, props } = node
const isPortal = tag === 'portal' || tag === 'Portal'
const isSuspense = tag === 'suspense' || tag === 'Suspense'
const isKeepAlive = tag === 'keep-alive' || tag === 'KeepAlive'
const isComponent = tagType === ElementTypes.COMPONENT
let hasProps = props.length > 0
let patchFlag: number = 0
let runtimeDirectives: DirectiveNode[] | undefined
let dynamicPropNames: string[] | undefined
@@ -60,7 +66,7 @@ export const transformElement: NodeTransform = (node, context) => {
// handle dynamic component
const isProp = findProp(node, 'is')
if (node.tag === 'component') {
if (tag === 'component') {
if (isProp) {
// static <component is="foo" />
if (isProp.type === NodeTypes.ATTRIBUTE) {
@@ -81,22 +87,26 @@ export const transformElement: NodeTransform = (node, context) => {
}
}
if (isComponent && !dynamicComponent) {
let nodeType
if (dynamicComponent) {
nodeType = dynamicComponent
} else if (isPortal) {
nodeType = context.helper(PORTAL)
} else if (isSuspense) {
nodeType = context.helper(SUSPENSE)
} else if (isKeepAlive) {
nodeType = context.helper(KEEP_ALIVE)
} else if (isComponent) {
// user component w/ resolve
context.helper(RESOLVE_COMPONENT)
context.components.add(node.tag)
context.components.add(tag)
nodeType = toValidAssetId(tag, `component`)
} else {
// plain element
nodeType = `"${node.tag}"`
}
const args: CallExpression['arguments'] = [
dynamicComponent
? dynamicComponent
: isComponent
? toValidAssetId(node.tag, `component`)
: node.tagType === ElementTypes.PORTAL
? context.helper(PORTAL)
: node.tagType === ElementTypes.SUSPENSE
? context.helper(SUSPENSE)
: `"${node.tag}"`
]
const args: CallExpression['arguments'] = [nodeType]
// props
if (hasProps) {
const propsBuildResult = buildProps(
@@ -120,7 +130,8 @@ export const transformElement: NodeTransform = (node, context) => {
if (!hasProps) {
args.push(`null`)
}
if (isComponent || node.tagType === ElementTypes.SUSPENSE) {
// Portal should have normal children instead of slots
if (isComponent && !isPortal) {
const { slots, hasDynamicSlots } = buildSlots(node, context)
args.push(slots)
if (hasDynamicSlots) {