const root = document.createElement('div')
document.body.appendChild(root)
- render(h(Hello), root)
+ await render(h(Hello), root)
const node = root.children[0] as HTMLElement
const root = document.createElement('div')
document.body.appendChild(root)
- render(h(Hello), root)
+ await render(h(Hello), root)
const node = root.children[0] as HTMLElement
const root = document.createElement('div')
document.body.appendChild(root)
- render(h(Hello), root)
+ await render(h(Hello), root)
const node = root.children[0] as HTMLElement
import { withHooks, useState, h, nextTick, useEffect, Component } from '../src'
-import { renderIntsance, serialize, triggerEvent } from '@vue/runtime-test'
+import { renderInstance, serialize, triggerEvent } from '@vue/runtime-test'
describe('hooks', () => {
it('useState', async () => {
)
})
- const counter = renderIntsance(Counter)
+ const counter = await renderInstance(Counter)
expect(serialize(counter.$el)).toBe(`<div>0</div>`)
triggerEvent(counter.$el, 'click')
}
}
- const counter = renderIntsance(Counter)
+ const counter = await renderInstance(Counter)
expect(serialize(counter.$el)).toBe(`<div>0</div>`)
triggerEvent(counter.$el, 'click')
}
}
- const counter = renderIntsance(Counter)
+ const counter = await renderInstance(Counter)
expect(serialize(counter.$el)).toBe(`<div>0</div>`)
triggerEvent(counter.$el, 'click')
)
})
- const counter = renderIntsance(Counter)
+ const counter = await renderInstance(Counter)
expect(effect).toBe(0)
triggerEvent(counter.$el, 'click')
await nextTick()
ComponentPropsOptions,
ComponentWatchOptions
} from '@vue/runtime-core'
-import { createInstance, renderIntsance } from '@vue/runtime-test'
+import { createInstance, renderInstance } from '@vue/runtime-test'
describe('class inheritance', () => {
it('should merge data', () => {
}
}
- const container = renderIntsance(Container)
+ const container = await renderInstance(Container)
expect(calls).toEqual([
'base beforeCreate',
'child beforeCreate',
}
}
- const container = renderIntsance(Container)
+ const container = await renderInstance(Container)
expect(container.$el.text).toBe('foo')
container.ok = false
import { h, Component, memoize, nextTick } from '../src'
-import { renderIntsance, serialize } from '@vue/runtime-test'
+import { renderInstance, serialize } from '@vue/runtime-test'
describe('memoize', () => {
it('should work', async () => {
}
}
- const app = renderIntsance(App)
+ const app = await renderInstance(App)
expect(serialize(app.$el)).toBe(`<div>1<div>A1</div><div>B1</div></div>`)
app.count++
}
}
- const app = renderIntsance(App)
+ const app = await renderInstance(App)
expect(serialize(app.$el)).toBe(`<div>2</div>`)
app.foo++
}
const root = nodeOps.createElement('div')
- const parent = render(h(Parent), root) as Component
+ const parent = (await render(h(Parent), root)) as Component
expect(child.$parent).toBe(parent)
expect(child.$root).toBe(parent)
}
const root = nodeOps.createElement('div')
- const parent = render(h(Parent), root) as Component
+ const parent = (await render(h(Parent), root)) as Component
expect(child.$parent).toBe(parent)
expect(child.$root).toBe(parent)
resolveComponentOptionsFromClass
} from './componentOptions'
import { createRenderProxy } from './componentProxy'
-import { handleError, ErrorTypes } from './errorHandling'
+import {
+ handleError,
+ ErrorTypes,
+ callLifecycleHookWithHandle
+} from './errorHandling'
import { warn } from './warning'
import { setCurrentInstance, unsetCurrentInstance } from './experimental/hooks'
instance.$slots = currentVNode.slots || EMPTY_OBJ
if (created) {
- created.call($proxy)
+ callLifecycleHookWithHandle(created, $proxy, ErrorTypes.CREATED)
}
currentVNode = currentContextVNode = null
// beforeCreate hook is called right in the constructor
const { beforeCreate, props } = instance.$options
if (beforeCreate) {
- beforeCreate.call(proxy)
+ callLifecycleHookWithHandle(beforeCreate, proxy, ErrorTypes.BEFORE_CREATE)
}
initializeProps(instance, props, (currentVNode as VNode).data)
}
import { autorun, stop, Autorun, immutable } from '@vue/observer'
-import { queueJob } from '@vue/scheduler'
+import { queueJob, handleSchedulerError, nextTick } from '@vue/scheduler'
import { VNodeFlags, ChildrenFlags } from './flags'
import { EMPTY_OBJ, reservedPropRE, isString } from '@vue/shared'
import {
} from './componentUtils'
import { KeepAliveSymbol } from './optional/keepAlive'
import { pushWarningContext, popWarningContext, warn } from './warning'
-import { handleError, ErrorTypes } from './errorHandling'
import { resolveProps } from './componentProps'
+import {
+ handleError,
+ ErrorTypes,
+ callLifecycleHookWithHandle
+} from './errorHandling'
export interface NodeOps {
createElement: (tag: string, isSVG?: boolean) => any
forceUpdate: () => void
}
+handleSchedulerError(err => handleError(err, null, ErrorTypes.SCHEDULER))
+
// The whole mounting / patching / unmouting logic is placed inside this
// single function so that we can create multiple renderes with different
// platform definitions. This allows for use cases like creating a test
mountRef(ref, el)
}
if (data != null && data.vnodeMounted) {
- lifecycleHooks.push(() => {
+ lifecycleHooks.unshift(() => {
data.vnodeMounted(vnode)
})
}
endNode: RenderNode | null
) {
vnode.contextVNode = contextVNode
- if (__DEV__) {
- pushWarningContext(vnode)
- }
const { flags } = vnode
if (flags & VNodeFlags.COMPONENT_STATEFUL) {
mountStatefulComponent(vnode, container, isSVG, endNode)
} else {
mountFunctionalComponent(vnode, container, isSVG, endNode)
}
- if (__DEV__) {
- popWarningContext()
- }
}
function mountStatefulComponent(
// kept-alive
activateComponentInstance(vnode, container, endNode)
} else {
- queueJob(
- () => {
+ if (__JSDOM__) {
+ mountComponentInstance(vnode, container, isSVG, endNode)
+ } else {
+ queueJob(() => {
mountComponentInstance(vnode, container, isSVG, endNode)
- },
- flushHooks,
- err => {
- handleError(err, vnode.contextVNode as VNode, ErrorTypes.SCHEDULER)
- }
- )
+ }, flushHooks)
+ }
}
}
forceUpdate: null as any
})
- const handleSchedulerError = (err: Error) => {
- handleError(err, handle.current as VNode, ErrorTypes.SCHEDULER)
- }
-
const queueUpdate = (handle.forceUpdate = () => {
- queueJob(handle.runner, null, handleSchedulerError)
+ queueJob(handle.runner)
})
// we are using vnode.ref to store the functional component's update job
- queueJob(
- () => {
- handle.runner = autorun(
- () => {
- if (handle.prevTree) {
- // mounted
- const { prevTree, current } = handle
- const nextTree = (handle.prevTree = current.children = renderFunctionalRoot(
- current
- ))
- patch(
- prevTree as MountedVNode,
- nextTree,
- platformParentNode(current.el),
- current as MountedVNode,
- isSVG
- )
- current.el = nextTree.el
- } else {
- // initial mount
- const subTree = (handle.prevTree = vnode.children = renderFunctionalRoot(
- vnode
- ))
- mount(subTree, container, vnode as MountedVNode, isSVG, endNode)
- vnode.el = subTree.el as RenderNode
+ queueJob(() => {
+ handle.runner = autorun(
+ () => {
+ if (handle.prevTree) {
+ // mounted
+ const { prevTree, current } = handle
+ if (__DEV__) {
+ pushWarningContext(current)
+ }
+ const nextTree = (handle.prevTree = current.children = renderFunctionalRoot(
+ current
+ ))
+ patch(
+ prevTree as MountedVNode,
+ nextTree,
+ platformParentNode(current.el),
+ current as MountedVNode,
+ isSVG
+ )
+ current.el = nextTree.el
+ if (__DEV__) {
+ popWarningContext()
+ }
+ } else {
+ // initial mount
+ if (__DEV__) {
+ pushWarningContext(vnode)
+ }
+ const subTree = (handle.prevTree = vnode.children = renderFunctionalRoot(
+ vnode
+ ))
+ mount(subTree, container, vnode as MountedVNode, isSVG, endNode)
+ vnode.el = subTree.el as RenderNode
+ if (__DEV__) {
+ popWarningContext()
}
- },
- {
- scheduler: queueUpdate
}
- )
- },
- null,
- handleSchedulerError
- )
+ },
+ {
+ scheduler: queueUpdate
+ }
+ )
+ })
}
function mountText(
contextVNode: MountedVNode | null,
isSVG: boolean
) {
- if (__DEV__) {
- pushWarningContext(nextVNode)
- }
nextVNode.contextVNode = contextVNode
const { tag, flags } = nextVNode
if (tag !== prevVNode.tag) {
} else {
patchFunctionalComponent(prevVNode, nextVNode)
}
- if (__DEV__) {
- popWarningContext()
- }
}
function patchStatefulComponent(prevVNode: MountedVNode, nextVNode: VNode) {
isSVG: boolean,
endNode: RenderNode | null
): RenderNode {
+ if (__DEV__) {
+ pushWarningContext(vnode)
+ }
+
// a vnode may already have an instance if this is a compat call with
// new Vue()
const instance = ((__COMPAT__ && vnode.children) ||
} = instance
if (beforeMount) {
- beforeMount.call($proxy)
- }
-
- const handleSchedulerError = (err: Error) => {
- handleError(err, instance, ErrorTypes.SCHEDULER)
+ callLifecycleHookWithHandle(beforeMount, $proxy, ErrorTypes.BEFORE_MOUNT)
}
const queueUpdate = (instance.$forceUpdate = () => {
- queueJob(instance._updateHandle, flushHooks, handleSchedulerError)
+ queueJob(instance._updateHandle, flushHooks)
})
instance._updateHandle = autorun(
const { mounted } = instance.$options
if (mounted) {
lifecycleHooks.unshift(() => {
- mounted.call($proxy)
+ callLifecycleHookWithHandle(mounted, $proxy, ErrorTypes.MOUNTED)
})
}
}
}
)
+ if (__DEV__) {
+ popWarningContext()
+ }
+
return vnode.el as RenderNode
}
$options: { beforeUpdate }
} = instance
if (beforeUpdate) {
- beforeUpdate.call($proxy, prevVNode)
+ callLifecycleHookWithHandle(
+ beforeUpdate,
+ $proxy,
+ ErrorTypes.BEFORE_UPDATE,
+ prevVNode
+ )
}
const nextVNode = (instance.$vnode = renderInstanceRoot(
// invoked BEFORE the parent's. Therefore we add them to the head of the
// queue instead.
lifecycleHooks.unshift(() => {
- updated.call($proxy, nextVNode)
+ callLifecycleHookWithHandle(
+ updated,
+ $proxy,
+ ErrorTypes.UPDATED,
+ nextVNode
+ )
})
}
$options: { beforeUnmount, unmounted }
} = instance
if (beforeUnmount) {
- beforeUnmount.call($proxy)
+ callLifecycleHookWithHandle(
+ beforeUnmount,
+ $proxy,
+ ErrorTypes.BEFORE_UNMOUNT
+ )
}
if ($vnode) {
unmount($vnode)
teardownComponentInstance(instance)
instance._unmounted = true
if (unmounted) {
- unmounted.call($proxy)
+ callLifecycleHookWithHandle(unmounted, $proxy, ErrorTypes.UNMOUNTED)
}
}
container: RenderNode | null,
endNode: RenderNode | null
) {
+ if (__DEV__) {
+ pushWarningContext(vnode)
+ }
const instance = vnode.children as ComponentInstance
vnode.el = instance.$el as RenderNode
if (container != null) {
insertVNode(instance.$vnode, container, endNode)
}
+ if (__DEV__) {
+ popWarningContext()
+ }
lifecycleHooks.push(() => {
callActivatedHook(instance, true)
})
callActivatedHook($children[i], false)
}
if (activated) {
- activated.call($proxy)
+ callLifecycleHookWithHandle(activated, $proxy, ErrorTypes.ACTIVATED)
}
}
}
callDeactivateHook($children[i], false)
}
if (deactivated) {
- deactivated.call($proxy)
+ callLifecycleHookWithHandle(deactivated, $proxy, ErrorTypes.DEACTIVATED)
}
}
}
container.vnode = null
}
}
- // flushHooks()
- // return vnode && vnode.flags & VNodeFlags.COMPONENT_STATEFUL
- // ? (vnode.children as ComponentInstance).$proxy
- // : null
+ return nextTick(() => {
+ debugger
+ return vnode && vnode.flags & VNodeFlags.COMPONENT_STATEFUL
+ ? (vnode.children as ComponentInstance).$proxy
+ : null
+ })
}
return { render }
MOUNTED,
BEFORE_UPDATE,
UPDATED,
- BEFORE_DESTROY,
- DESTROYED,
+ BEFORE_UNMOUNT,
+ UNMOUNTED,
+ ACTIVATED,
+ DEACTIVATED,
ERROR_CAPTURED,
RENDER,
WATCH_CALLBACK,
[ErrorTypes.MOUNTED]: 'in mounted lifecycle hook',
[ErrorTypes.BEFORE_UPDATE]: 'in beforeUpdate lifecycle hook',
[ErrorTypes.UPDATED]: 'in updated lifecycle hook',
- [ErrorTypes.BEFORE_DESTROY]: 'in beforeDestroy lifecycle hook',
- [ErrorTypes.DESTROYED]: 'in destroyed lifecycle hook',
+ [ErrorTypes.BEFORE_UNMOUNT]: 'in beforeUnmount lifecycle hook',
+ [ErrorTypes.UNMOUNTED]: 'in unmounted lifecycle hook',
+ [ErrorTypes.ACTIVATED]: 'in activated lifecycle hook',
+ [ErrorTypes.DEACTIVATED]: 'in deactivated lifecycle hook',
[ErrorTypes.ERROR_CAPTURED]: 'in errorCaptured lifecycle hook',
[ErrorTypes.RENDER]: 'in render function',
[ErrorTypes.WATCH_CALLBACK]: 'in watcher callback',
'when flushing updates. This may be a Vue internals bug.'
}
+export function callLifecycleHookWithHandle(
+ hook: Function,
+ instanceProxy: ComponentInstance,
+ type: ErrorTypes,
+ arg?: any
+) {
+ try {
+ const res = hook.call(instanceProxy, arg)
+ if (res && typeof res.then === 'function') {
+ ;(res as Promise<any>).catch(err => {
+ handleError(err, instanceProxy._self, type)
+ })
+ }
+ } catch (err) {
+ handleError(err, instanceProxy._self, type)
+ }
+}
+
export function handleError(
err: Error,
instance: ComponentInstance | VNode | null,
type publicRender = (
node: {} | null,
container: HTMLElement
-) => Component | null
+) => Promise<Component | null>
export const render = _render as publicRender
// re-export everything from core
observable,
resetOps,
serialize,
- renderIntsance,
+ renderInstance,
triggerEvent
} from '../src'
)
}
}
- const app = renderIntsance(App)
+ const app = await renderInstance(App)
triggerEvent(app.$el, 'click')
expect(app.count).toBe(1)
await nextTick()
type publicRender = (
node: {} | null,
container: TestElement
-) => Component | null
+) => Promise<Component | null>
export const render = _render as publicRender
export function createInstance<T extends Component>(
return createComponentInstance(h(Class, props)).$proxy as any
}
-export function renderIntsance<T extends Component>(
+export function renderInstance<T extends Component>(
Class: new () => T,
props?: any
-): T {
+): Promise<T> {
return render(h(Class, props), nodeOps.createElement('div')) as any
}
-import { NodeOps } from '@vue/runtime-core'
-import { nodeOps } from '../../runtime-dom/src/nodeOps'
+import { Op, setCurrentOps } from './patchNodeOps'
+
+interface Job extends Function {
+ ops: Op[]
+ post: Function | null
+ expiration: number
+}
const enum Priorities {
NORMAL = 500
}
-const frameBudget = 1000 / 60
+type ErrorHandler = (err: Error) => any
let start: number = 0
-let currentOps: Op[]
-
const getNow = () => window.performance.now()
+const frameBudget = __JSDOM__ ? Infinity : 1000 / 60
-const evaluate = (v: any) => {
- return typeof v === 'function' ? v() : v
-}
-
-// patch nodeOps to record operations without touching the DOM
-Object.keys(nodeOps).forEach((key: keyof NodeOps) => {
- const original = nodeOps[key] as Function
- if (key === 'querySelector') {
- return
- }
- if (/create/.test(key)) {
- nodeOps[key] = (...args: any[]) => {
- let res: any
- if (currentOps) {
- return () => res || (res = original(...args))
- } else {
- return original(...args)
- }
- }
- } else {
- nodeOps[key] = (...args: any[]) => {
- if (currentOps) {
- currentOps.push([original, ...args.map(evaluate)])
- } else {
- original(...args)
- }
- }
- }
-})
-
-type Op = [Function, ...any[]]
+const patchQueue: Job[] = []
+const commitQueue: Job[] = []
+const postCommitQueue: Function[] = []
+const nextTickQueue: Function[] = []
-interface Job extends Function {
- ops: Op[]
- post: Function | null
- expiration: number
-}
+let globalHandler: ErrorHandler
+const pendingRejectors: ErrorHandler[] = []
// Microtask for batching state mutations
const p = Promise.resolve()
-export function nextTick(fn?: () => void): Promise<void> {
- return p.then(fn)
+function flushAfterMicroTask() {
+ return p.then(flush).catch(handleError)
}
// Macrotask for time slicing
return
}
start = getNow()
- flush()
+ try {
+ flush()
+ } catch (e) {
+ handleError(e)
+ }
},
false
)
-function flushAfterYield() {
+function flushAfterMacroTask() {
window.postMessage(key, `*`)
}
-const patchQueue: Job[] = []
-const commitQueue: Job[] = []
-
-function patch(job: Job) {
- // job with existing ops means it's already been patched in a low priority queue
- if (job.ops.length === 0) {
- currentOps = job.ops
- job()
- commitQueue.push(job)
- }
+export function nextTick<T>(fn?: () => T): Promise<T> {
+ return new Promise((resolve, reject) => {
+ p.then(() => {
+ if (hasPendingFlush) {
+ nextTickQueue.push(() => {
+ resolve(fn ? fn() : undefined)
+ })
+ pendingRejectors.push(reject)
+ } else {
+ resolve(fn ? fn() : undefined)
+ }
+ }).catch(reject)
+ })
}
-function commit({ ops }: Job) {
- for (let i = 0; i < ops.length; i++) {
- const [fn, ...args] = ops[i]
- fn(...args)
- }
- ops.length = 0
+function handleError(err: Error) {
+ if (globalHandler) globalHandler(err)
+ pendingRejectors.forEach(handler => {
+ handler(err)
+ })
}
-function invalidate(job: Job) {
- job.ops.length = 0
+export function handleSchedulerError(handler: ErrorHandler) {
+ globalHandler = handler
}
let hasPendingFlush = false
-export function queueJob(
- rawJob: Function,
- postJob?: Function | null,
- onError?: (reason: any) => void
-) {
+export function queueJob(rawJob: Function, postJob?: Function | null) {
const job = rawJob as Job
job.post = postJob || null
job.ops = job.ops || []
// invalidated. remove from commit queue
// and move it back to the patch queue
commitQueue.splice(commitIndex, 1)
- invalidate(job)
+ invalidateJob(job)
// With varying priorities we should insert job at correct position
// based on expiration time.
for (let i = 0; i < patchQueue.length; i++) {
if (!hasPendingFlush) {
hasPendingFlush = true
start = getNow()
- const p = nextTick(flush)
- if (onError) p.catch(onError)
+ flushAfterMicroTask()
}
}
-function flush() {
+function flush(): void {
let job
while (true) {
job = patchQueue.shift()
if (job) {
- patch(job)
+ patchJob(job)
} else {
break
}
}
if (patchQueue.length === 0) {
- const postQueue: Function[] = []
// all done, time to commit!
while ((job = commitQueue.shift())) {
- commit(job)
- if (job.post && postQueue.indexOf(job.post) < 0) {
- postQueue.push(job.post)
+ commitJob(job)
+ if (job.post && postCommitQueue.indexOf(job.post) < 0) {
+ postCommitQueue.push(job.post)
}
}
- while ((job = postQueue.shift())) {
+ // post commit hooks (updated, mounted)
+ while ((job = postCommitQueue.shift())) {
job()
}
+ // some post commit hook triggered more updates...
if (patchQueue.length > 0) {
- return flushAfterYield()
+ if (getNow() - start > frameBudget) {
+ return flushAfterMacroTask()
+ } else {
+ // not out of budget yet, flush sync
+ return flush()
+ }
}
+ // now we are really done
hasPendingFlush = false
+ pendingRejectors.length = 0
+ while ((job = nextTickQueue.shift())) {
+ job()
+ }
} else {
// got more job to do
- flushAfterYield()
+ flushAfterMacroTask()
+ }
+}
+
+function patchJob(job: Job) {
+ // job with existing ops means it's already been patched in a low priority queue
+ if (job.ops.length === 0) {
+ setCurrentOps(job.ops)
+ job()
+ commitQueue.push(job)
+ }
+}
+
+function commitJob({ ops }: Job) {
+ for (let i = 0; i < ops.length; i++) {
+ const [fn, ...args] = ops[i]
+ fn(...args)
}
+ ops.length = 0
+}
+
+function invalidateJob(job: Job) {
+ job.ops.length = 0
}
--- /dev/null
+import { NodeOps } from '@vue/runtime-core'
+import { nodeOps } from '../../runtime-dom/src/nodeOps'
+
+export type Op = [Function, ...any[]]
+
+let currentOps: Op[]
+
+export function setCurrentOps(ops: Op[]) {
+ currentOps = ops
+}
+
+const evaluate = (v: any) => {
+ return typeof v === 'function' ? v() : v
+}
+
+// patch nodeOps to record operations without touching the DOM
+Object.keys(nodeOps).forEach((key: keyof NodeOps) => {
+ const original = nodeOps[key] as Function
+ if (key === 'querySelector') {
+ return
+ }
+ if (/create/.test(key)) {
+ nodeOps[key] = (...args: any[]) => {
+ let res: any
+ if (currentOps) {
+ return () => res || (res = original(...args))
+ } else {
+ return original(...args)
+ }
+ }
+ } else {
+ nodeOps[key] = (...args: any[]) => {
+ if (currentOps) {
+ currentOps.push([original, ...args.map(evaluate)])
+ } else {
+ original(...args)
+ }
+ }
+ }
+})
projects / thirdparty / vuejs / core.git / commitdiff
