return instance
}
+/**
+ * @internal
+ */
export function validateComponentName(
name: string,
{ isNativeTag }: AppConfig,
type GenericComponentInstance,
type LifecycleHook,
nextUid,
+ validateComponentName,
} from './component'
export { pushWarningContext, popWarningContext } from './warning'
export {
simpleSetCurrentInstance,
} from './componentCurrentInstance'
export { registerHMR, unregisterHMR } from './hmr'
+export { startMeasure, endMeasure } from './profiling'
/* eslint-disable no-restricted-globals */
-import {
- type ComponentInternalInstance,
- formatComponentName,
-} from './component'
+import { type GenericComponentInstance, formatComponentName } from './component'
import { devtoolsPerfEnd, devtoolsPerfStart } from './devtools'
let supported: boolean
let perf: Performance
+/**
+ * @internal
+ */
export function startMeasure(
- instance: ComponentInternalInstance,
+ instance: GenericComponentInstance,
type: string,
): void {
if (instance.appContext.config.performance && isSupported()) {
}
}
+/**
+ * @internal
+ */
export function endMeasure(
- instance: ComponentInternalInstance,
+ instance: GenericComponentInstance,
type: string,
): void {
if (instance.appContext.config.performance && isSupported()) {
[
// eslint-disable-next-line no-restricted-syntax
msg + args.map(a => a.toString?.() ?? JSON.stringify(a)).join(''),
- instance && instance.proxy,
+ (instance && instance.proxy) || instance,
trace
.map(
({ ctx }) =>
import { ref } from '@vue/reactivity'
import { makeRender } from './_utils'
-// import { createFor, createSelector, nextTick, renderEffect } from '../src'
+// @ts-expect-error
+import { createFor, createSelector, renderEffect } from '../src'
+import { nextTick } from '@vue/runtime-dom'
const define = makeRender()
const isSleected = createSelector(index)
return createFor(
() => list.value,
+ // @ts-expect-error
([item]) => {
const span = document.createElement('li')
renderEffect(() => {
})
return span
},
+ // @ts-expect-error
item => item.id,
)
}).render()
const { host } = define(() => {
const isSleected = createSelector(
index,
+ // @ts-expect-error
(key, value) => key === value + 1,
)
return createFor(
() => list.value,
+ // @ts-expect-error
([item]) => {
const span = document.createElement('li')
renderEffect(() => {
})
return span
},
+ // @ts-expect-error
item => item.id,
)
}).render()
import {
- type ComponentInternalInstance,
- type Plugin,
createComponent,
createTextNode,
createVaporApp,
- defineComponent,
- getCurrentInstance,
+ defineVaporComponent,
+ // @ts-expect-error
+ withDirectives,
+} from '../src'
+import {
+ type GenericComponentInstance,
+ type Plugin,
+ currentInstance,
inject,
provide,
resolveComponent,
resolveDirective,
- withDirectives,
-} from '../src'
-import { warn } from '@vue/runtime-dom'
+ warn,
+} from '@vue/runtime-dom'
import { makeRender } from './_utils'
+import type { VaporComponent } from '../src/component'
const define = makeRender()
-describe.todo('api: createVaporApp', () => {
+describe('api: createVaporApp', () => {
test('mount', () => {
- const Comp = defineComponent({
+ const Comp = defineVaporComponent({
props: {
count: { default: 0 },
},
})
test('unmount', () => {
- const Comp = defineComponent({
+ const Comp = defineVaporComponent({
props: {
count: { default: 0 },
},
},
})
- const Child = defineComponent({
+ const Child = defineVaporComponent({
setup() {
const foo = inject('foo')
const bar = inject('bar')
try {
inject('__proto__')
} catch (e: any) {}
- return createTextNode(() => [`${foo},${bar}`])
+ return createTextNode([`${foo},${bar}`])
},
})
- const { app, mount, create, host } = Root.create(null)
+ const { app, mount, create, html } = Root.create()
app.provide('foo', 1)
app.provide('bar', 2)
mount()
- expect(host.innerHTML).toBe(`3,2`)
+ expect(html()).toBe(`3,2`)
expect('[Vue warn]: injection "__proto__" not found.').toHaveBeenWarned()
const { app: app2 } = create()
test('component', () => {
const { app, mount, host } = define({
setup() {
- const FooBar = resolveComponent('foo-bar')
- const BarBaz = resolveComponent('bar-baz')
+ const FooBar = resolveComponent('foo-bar') as VaporComponent
+ const BarBaz = resolveComponent('bar-baz') as VaporComponent
return [createComponent(FooBar), createComponent(BarBaz)]
},
}).create()
expect(host.innerHTML).toBe(`foobar!barbaz!`)
})
- test('directive', () => {
+ test.todo('directive', () => {
const spy1 = vi.fn()
const spy2 = vi.fn()
test('config.errorHandler', () => {
const error = new Error()
- let instance: ComponentInternalInstance
+ let instance: GenericComponentInstance
const handler = vi.fn((err, _instance, info) => {
expect(err).toBe(error)
const { app, mount } = define({
setup() {
- instance = getCurrentInstance()!
+ instance = currentInstance!
+ return {}
},
render() {
throw error
})
test('config.warnHandler', () => {
- let instance: ComponentInternalInstance
+ let instance: GenericComponentInstance
const handler = vi.fn((msg, _instance, trace) => {
expect(msg).toMatch(`warn message`)
const { app, mount } = define({
name: 'Hello',
setup() {
- instance = getCurrentInstance()!
+ instance = currentInstance!
warn('warn message')
+ return []
},
}).create()
describe('config.isNativeTag', () => {
const isNativeTag = vi.fn(tag => tag === 'div')
- test('Component.name', () => {
- const { app, mount } = define({
- name: 'div',
- render(): any {},
- }).create()
+ // Not relevant for vapor
+ // test('Component.name', () => {
+ // const { app, mount } = define({
+ // name: 'div',
+ // render(): any {},
+ // }).create()
- Object.defineProperty(app.config, 'isNativeTag', {
- value: isNativeTag,
- writable: false,
- })
+ // Object.defineProperty(app.config, 'isNativeTag', {
+ // value: isNativeTag,
+ // writable: false,
+ // })
- mount()
- expect(
- `Do not use built-in or reserved HTML elements as component id: div`,
- ).toHaveBeenWarned()
- })
+ // mount()
+ // expect(
+ // `Do not use built-in or reserved HTML elements as component id: div`,
+ // ).toHaveBeenWarned()
+ // })
test('register using app.component', () => {
const { app, mount } = define({
})
test('with performance enabled', () => {
- const { app, mount } = define({}).create()
+ const { app, mount } = define({ setup: () => [] }).create()
app.config.performance = true
mount()
})
test('with performance disabled', () => {
- const { app, mount } = define({}).create()
+ const { app, mount } = define({ setup: () => [] }).create()
app.config.performance = false
mount()
})
test('config.globalProperty', () => {
- const { app, mount, html } = define({
- render() {
- const instance = getCurrentInstance()!
- return createTextNode([instance.appContext.config.globalProperties.msg])
+ const { app } = define({
+ setup() {
+ return []
},
}).create()
- app.config.globalProperties.msg = 'hello world'
- mount()
- expect(html()).toBe('hello world')
+ try {
+ app.config.globalProperties.msg = 'hello world'
+ } catch (e) {}
+ expect(
+ `app.config.globalProperties is not supported in vapor mode`,
+ ).toHaveBeenWarned()
})
})
import { ref, shallowRef } from '@vue/reactivity'
-import { createComponent } from '../src/component'
+import { type VaporComponentInstance, createComponent } from '../src/component'
import { setRef } from '../src/dom/templateRef'
import { makeRender } from './_utils'
-import {
- type ComponentInternalInstance,
- getCurrentInstance,
-} from '../src/component'
+import { currentInstance } from '@vue/runtime-dom'
import { defineVaporComponent } from '../src/apiDefineComponent'
const define = makeRender()
})
test('via setup context (expose empty)', () => {
- let childInstance: ComponentInternalInstance | null = null
+ let childInstance: VaporComponentInstance | null = null
const Child = defineVaporComponent({
setup(_) {
- childInstance = getCurrentInstance()
+ childInstance = currentInstance as VaporComponentInstance
+ return []
},
})
const childRef = shallowRef()
define({
setup(_, { expose }) {
expose(ref(1))
+ return []
},
}).render()
define({
setup(_, { expose }) {
expose(['focus'])
+ return []
},
}).render()
define({
setup(_, { expose }) {
expose(() => null)
+ return []
},
}).render()
import type { NodeRef } from '../../src/dom/templateRef'
import {
+ // @ts-expect-error
createFor,
+ // @ts-expect-error
createIf,
- getCurrentInstance,
insert,
- nextTick,
- reactive,
- ref,
renderEffect,
setRef,
setText,
template,
- watchEffect,
} from '../../src'
import { makeRender } from '../_utils'
+import {
+ currentInstance,
+ nextTick,
+ reactive,
+ ref,
+ watchEffect,
+} from '@vue/runtime-dom'
const define = makeRender()
const t1 = template('<i></i>')
const { render } = define({
render() {
- const instance = getCurrentInstance()!
+ const instance = currentInstance!
const n0 = t0()
const n1 = t1()
let r0: NodeRef | undefined
const t1 = template('<i></i>')
const { render } = define({
render() {
- const instance = getCurrentInstance()!
+ const instance = currentInstance!
const n0 = createIf(
() => refToggle.value,
() => {
const n1 = t0()
const n2 = createFor(
() => list,
+ // @ts-expect-error
state => {
const n1 = t1()
setRef(n1 as Element, listRefs, undefined, true)
const n1 = t0()
const n2 = createFor(
() => list,
+ // @ts-expect-error
state => {
const n1 = t1()
setRef(n1 as Element, 'listRefs', undefined, true)
const n2 = n1!.nextSibling!
const n3 = createFor(
() => list.value,
+ // @ts-expect-error
state => {
const n4 = t1()
setRef(n4 as Element, 'listRefs', undefined, true)
type CreateAppFunction,
createAppAPI,
normalizeContainer,
+ warn,
} from '@vue/runtime-dom'
import type { RawProps } from './componentProps'
if (container.nodeType === 1 /* Node.ELEMENT_NODE */) {
container.textContent = ''
}
- const instance = createComponent(app._component, app._props as RawProps)
+ const instance = createComponent(
+ app._component,
+ app._props as RawProps,
+ null,
+ false,
+ app._context,
+ )
mountComponent(instance, container)
return instance
}
) => {
if (!_createApp) _createApp = createAppAPI(mountApp, unmountApp, i => i)
const app = _createApp(comp, props)
+
+ if (__DEV__) {
+ app.config.globalProperties = new Proxy(
+ {},
+ {
+ set() {
+ warn(`app.config.globalProperties is not supported in vapor mode.`)
+ return false
+ },
+ },
+ )
+ }
+
const mount = app.mount
app.mount = (container, ...args: any[]) => {
container = normalizeContainer(container) as ParentNode
type SuspenseBoundary,
callWithErrorHandling,
currentInstance,
+ endMeasure,
nextUid,
popWarningContext,
pushWarningContext,
registerHMR,
simpleSetCurrentInstance,
+ startMeasure,
unregisterHMR,
warn,
} from '@vue/runtime-dom'
rawProps?: RawProps | null,
rawSlots?: RawSlots | null,
isSingleRoot?: boolean,
+ appContext?: GenericAppContext,
): VaporComponentInstance {
// check if we are the single root of the parent
// if yes, inject parent attrs as dynamic props source
}
}
- const instance = new VaporComponentInstance(component, rawProps, rawSlots)
- const prev = currentInstance
- simpleSetCurrentInstance(instance)
+ const instance = new VaporComponentInstance(
+ component,
+ rawProps,
+ rawSlots,
+ appContext,
+ )
- pauseTracking()
if (__DEV__) {
pushWarningContext(instance)
+ startMeasure(instance, `init`)
}
+ const prev = currentInstance
+ simpleSetCurrentInstance(instance)
+ pauseTracking()
+
const setupFn = isFunction(component) ? component : component.setup
const setupContext = (instance.setupContext =
setupFn && setupFn.length > 1 ? new SetupContext(instance) : null)
})
}
+ resetTracking()
+ simpleSetCurrentInstance(prev, instance)
+
if (__DEV__) {
popWarningContext()
+ endMeasure(instance, 'init')
}
- resetTracking()
- simpleSetCurrentInstance(prev, instance)
return instance
}
comp: VaporComponent,
rawProps?: RawProps | null,
rawSlots?: RawSlots | null,
+ appContext?: GenericAppContext,
) {
this.vapor = true
this.uid = nextUid()
this.provides = currentInstance.provides
this.ids = currentInstance.ids
} else {
- this.appContext = emptyContext
+ this.appContext = appContext || emptyContext
this.provides = Object.create(this.appContext.provides)
this.ids = ['', 0, 0]
}
parent: ParentNode,
anchor?: Node | null | 0,
): void {
+ if (__DEV__) {
+ startMeasure(instance, `mount`)
+ }
if (!instance.isMounted) {
if (instance.bm) invokeArrayFns(instance.bm)
insert(instance.block, parent, anchor)
} else {
insert(instance.block, parent, anchor)
}
+ if (__DEV__) {
+ endMeasure(instance, `mount`)
+ }
}
export function unmountComponent(
queueJob,
queuePostFlushCb,
simpleSetCurrentInstance,
+ startMeasure,
warn,
} from '@vue/runtime-dom'
import { type VaporComponentInstance, isVaporComponent } from './component'
import { invokeArrayFns } from '@vue/shared'
export function renderEffect(fn: () => void, noLifecycle = false): void {
- const instance = currentInstance as VaporComponentInstance
+ const instance = currentInstance as VaporComponentInstance | null
const scope = getCurrentScope()
if (__DEV__ && !__TEST__ && !isVaporComponent(instance)) {
warn('renderEffect called without active vapor instance.')
const renderEffectFn = noLifecycle
? fn
: () => {
+ if (__DEV__ && instance) {
+ startMeasure(instance, `renderEffect`)
+ }
const prev = currentInstance
simpleSetCurrentInstance(instance)
if (scope) scope.on()
}
if (scope) scope.off()
simpleSetCurrentInstance(prev, instance)
+ if (__DEV__ && instance) {
+ startMeasure(instance, `renderEffect`)
+ }
}
const effect = new ReactiveEffect(renderEffectFn)
projects / thirdparty / vuejs / core.git / commitdiff
