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

refactor: adjust createApp related API signatures

Browse Source 
BREAKING CHANGE: `createApp` API has been adjusted.

  - `createApp()` now accepts the root component, and optionally a props
  object to pass to the root component.
  - `app.mount()` now accepts a single argument (the root container)
  - `app.unmount()` no longer requires arguments.

  New behavior looks like the following:

  ``` js
  const app = createApp(RootComponent)
  app.mount('#app')
  app.unmount()
  ```
This commit is contained in:
Evan You 2020-01-23 15:05:38 -05:00
parent eacd390992
commit c07751fd36
25 changed files with 276 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

215
packages/runtime-core/__tests__/apiApp.spec.ts → packages/runtime-core/__tests__/apiCreateApp.spec.ts
View File

@ -30,18 +30,18 @@ describe('api: createApp', () => {
}
const root1 = nodeOps.createElement('div')
createApp().mount(Comp, root1)
createApp(Comp).mount(root1)
expect(serializeInner(root1)).toBe(`0`)
// mount with props
const root2 = nodeOps.createElement('div')
const app2 = createApp()
app2.mount(Comp, root2, { count: 1 })
const app2 = createApp(Comp, { count: 1 })
app2.mount(root2)
expect(serializeInner(root2)).toBe(`1`)
// remount warning
const root3 = nodeOps.createElement('div')
app2.mount(Comp, root3)
app2.mount(root3)
expect(serializeInner(root3)).toBe(``)
expect(`already been mounted`).toHaveBeenWarned()
})
@ -59,18 +59,14 @@ describe('api: createApp', () => {
}
const root = nodeOps.createElement('div')
const app = createApp()
app.mount(Comp, root)
const app = createApp(Comp)
app.mount(root)
app.unmount(root)
expect(serializeInner(root)).toBe(``)
})
test('provide', () => {
const app = createApp()
app.provide('foo', 1)
app.provide('bar', 2)
const Root = {
setup() {
// test override
@ -87,25 +83,16 @@ describe('api: createApp', () => {
}
}
const app = createApp(Root)
app.provide('foo', 1)
app.provide('bar', 2)
const root = nodeOps.createElement('div')
app.mount(Root, root)
app.mount(root)
expect(serializeInner(root)).toBe(`3,2`)
})
test('component', () => {
const app = createApp()
const FooBar = () => 'foobar!'
app.component('FooBar', FooBar)
expect(app.component('FooBar')).toBe(FooBar)
app.component('BarBaz', () => 'barbaz!')
app.component('BarBaz', () => 'barbaz!')
expect(
'Component "BarBaz" has already been registered in target app.'
).toHaveBeenWarnedTimes(1)
const Root = {
// local override
components: {
@ -122,33 +109,29 @@ describe('api: createApp', () => {
}
}
const app = createApp(Root)
const FooBar = () => 'foobar!'
app.component('FooBar', FooBar)
expect(app.component('FooBar')).toBe(FooBar)
app.component('BarBaz', () => 'barbaz!')
app.component('BarBaz', () => 'barbaz!')
expect(
'Component "BarBaz" has already been registered in target app.'
).toHaveBeenWarnedTimes(1)
const root = nodeOps.createElement('div')
app.mount(Root, root)
app.mount(root)
expect(serializeInner(root)).toBe(`<div>foobar!barbaz-local!</div>`)
})
test('directive', () => {
const app = createApp()
const spy1 = jest.fn()
const spy2 = jest.fn()
const spy3 = jest.fn()
const FooBar = { mounted: spy1 }
app.directive('FooBar', FooBar)
expect(app.directive('FooBar')).toBe(FooBar)
app.directive('BarBaz', {
mounted: spy2
})
app.directive('BarBaz', {
mounted: spy2
})
expect(
'Directive "BarBaz" has already been registered in target app.'
).toHaveBeenWarnedTimes(1)
const Root = {
// local override
directives: {
@ -165,8 +148,25 @@ describe('api: createApp', () => {
}
}
const app = createApp(Root)
const FooBar = { mounted: spy1 }
app.directive('FooBar', FooBar)
expect(app.directive('FooBar')).toBe(FooBar)
app.directive('BarBaz', {
mounted: spy2
})
app.directive('BarBaz', {
mounted: spy2
})
expect(
'Directive "BarBaz" has already been registered in target app.'
).toHaveBeenWarnedTimes(1)
const root = nodeOps.createElement('div')
app.mount(Root, root)
app.mount(root)
expect(spy1).toHaveBeenCalled()
expect(spy2).not.toHaveBeenCalled()
expect(spy3).toHaveBeenCalled()
@ -232,7 +232,7 @@ describe('api: createApp', () => {
}
}
const app = createApp()
const app = createApp(Comp)
app.mixin(mixinA)
app.mixin(mixinB)
@ -246,7 +246,7 @@ describe('api: createApp', () => {
).toHaveBeenWarnedTimes(1)
const root = nodeOps.createElement('div')
app.mount(Comp, root)
app.mount(root)
expect(serializeInner(root)).toBe(`123`)
expect(calls).toEqual([
@ -272,11 +272,6 @@ describe('api: createApp', () => {
}
const PluginD: any = undefined
const app = createApp()
app.use(PluginA)
app.use(PluginB, 1, 1)
app.use(PluginC)
const Root = {
setup() {
const foo = inject('foo')
@ -284,8 +279,14 @@ describe('api: createApp', () => {
return () => `${foo},${bar}`
}
}
const app = createApp(Root)
app.use(PluginA)
app.use(PluginB, 1, 1)
app.use(PluginC)
const root = nodeOps.createElement('div')
app.mount(Root, root)
app.mount(root)
expect(serializeInner(root)).toBe(`1,2`)
app.use(PluginA)
@ -301,18 +302,14 @@ describe('api: createApp', () => {
})
test('config.errorHandler', () => {
const app = createApp()
const error = new Error()
const count = ref(0)
const handler = (app.config.errorHandler = jest.fn(
(err, instance, info) => {
expect(err).toBe(error)
expect((instance as any).count).toBe(count.value)
expect(info).toBe(`render function`)
}
))
const handler = jest.fn((err, instance, info) => {
expect(err).toBe(error)
expect((instance as any).count).toBe(count.value)
expect(info).toBe(`render function`)
})
const Root = {
setup() {
@ -326,21 +323,19 @@ describe('api: createApp', () => {
}
}
app.mount(Root, nodeOps.createElement('div'))
const app = createApp(Root)
app.config.errorHandler = handler
app.mount(nodeOps.createElement('div'))
expect(handler).toHaveBeenCalled()
})
test('config.warnHandler', () => {
const app = createApp()
let ctx: any
const handler = (app.config.warnHandler = jest.fn(
(msg, instance, trace) => {
expect(msg).toMatch(`Component is missing template or render function`)
expect(instance).toBe(ctx.proxy)
expect(trace).toMatch(`Hello`)
}
))
const handler = jest.fn((msg, instance, trace) => {
expect(msg).toMatch(`Component is missing template or render function`)
expect(instance).toBe(ctx.proxy)
expect(trace).toMatch(`Hello`)
})
const Root = {
name: 'Hello',
@ -349,7 +344,9 @@ describe('api: createApp', () => {
}
}
app.mount(Root, nodeOps.createElement('div'))
const app = createApp(Root)
app.config.warnHandler = handler
app.mount(nodeOps.createElement('div'))
expect(handler).toHaveBeenCalledTimes(1)
})
@ -357,104 +354,82 @@ describe('api: createApp', () => {
const isNativeTag = jest.fn(tag => tag === 'div')
test('Component.name', () => {
const app = createApp()
Object.defineProperty(app.config, 'isNativeTag', {
value: isNativeTag,
writable: false
})
const Root = {
name: 'div',
setup() {
return {
count: ref(0)
}
},
render() {
return null
}
}
app.mount(Root, nodeOps.createElement('div'))
const app = createApp(Root)
Object.defineProperty(app.config, 'isNativeTag', {
value: isNativeTag,
writable: false
})
app.mount(nodeOps.createElement('div'))
expect(
`Do not use built-in or reserved HTML elements as component id: div`
).toHaveBeenWarned()
})
test('Component.components', () => {
const app = createApp()
Object.defineProperty(app.config, 'isNativeTag', {
value: isNativeTag,
writable: false
})
const Root = {
components: {
div: () => 'div'
},
setup() {
return {
count: ref(0)
}
},
render() {
return null
}
}
app.mount(Root, nodeOps.createElement('div'))
const app = createApp(Root)
Object.defineProperty(app.config, 'isNativeTag', {
value: isNativeTag,
writable: false
})
app.mount(nodeOps.createElement('div'))
expect(
`Do not use built-in or reserved HTML elements as component id: div`
).toHaveBeenWarned()
})
test('Component.directives', () => {
const app = createApp()
Object.defineProperty(app.config, 'isNativeTag', {
value: isNativeTag,
writable: false
})
const Root = {
directives: {
bind: () => {}
},
setup() {
return {
count: ref(0)
}
},
render() {
return null
}
}
app.mount(Root, nodeOps.createElement('div'))
const app = createApp(Root)
Object.defineProperty(app.config, 'isNativeTag', {
value: isNativeTag,
writable: false
})
app.mount(nodeOps.createElement('div'))
expect(
`Do not use built-in directive ids as custom directive id: bind`
).toHaveBeenWarned()
})
test('register using app.component', () => {
const app = createApp()
const app = createApp({
render() {}
})
Object.defineProperty(app.config, 'isNativeTag', {
value: isNativeTag,
writable: false
})
const Root = {
setup() {
return {
count: ref(0)
}
},
render() {
return null
}
}
app.component('div', () => 'div')
app.mount(Root, nodeOps.createElement('div'))
app.mount(nodeOps.createElement('div'))
expect(
`Do not use built-in or reserved HTML elements as component id: div`
).toHaveBeenWarned()

20
packages/runtime-core/__tests__/componentProxy.spec.ts
View File

@ -1,4 +1,4 @@
import { createApp, getCurrentInstance, nodeOps } from '@vue/runtime-test'
import { h, render, getCurrentInstance, nodeOps } from '@vue/runtime-test'
import { mockWarn } from '@vue/shared'
import { ComponentInternalInstance } from '../src/component'
@ -6,7 +6,6 @@ describe('component: proxy', () => {
mockWarn()
test('data', () => {
const app = createApp()
let instance: ComponentInternalInstance
let instanceProxy: any
const Comp = {
@ -23,14 +22,13 @@ describe('component: proxy', () => {
return null
}
}
app.mount(Comp, nodeOps.createElement('div'))
render(h(Comp), nodeOps.createElement('div'))
expect(instanceProxy.foo).toBe(1)
instanceProxy.foo = 2
expect(instance!.data.foo).toBe(2)
})
test('renderContext', () => {
const app = createApp()
let instance: ComponentInternalInstance
let instanceProxy: any
const Comp = {
@ -47,14 +45,13 @@ describe('component: proxy', () => {
return null
}
}
app.mount(Comp, nodeOps.createElement('div'))
render(h(Comp), nodeOps.createElement('div'))
expect(instanceProxy.foo).toBe(1)
instanceProxy.foo = 2
expect(instance!.renderContext.foo).toBe(2)
})
test('propsProxy', () => {
const app = createApp()
let instance: ComponentInternalInstance
let instanceProxy: any
const Comp = {
@ -72,7 +69,7 @@ describe('component: proxy', () => {
instanceProxy = this
}
}
app.mount(Comp, nodeOps.createElement('div'))
render(h(Comp), nodeOps.createElement('div'))
expect(instanceProxy.foo).toBe(1)
expect(instance!.propsProxy!.foo).toBe(1)
expect(() => (instanceProxy.foo = 2)).toThrow(TypeError)
@ -80,7 +77,6 @@ describe('component: proxy', () => {
})
test('public properties', () => {
const app = createApp()
let instance: ComponentInternalInstance
let instanceProxy: any
const Comp = {
@ -92,7 +88,7 @@ describe('component: proxy', () => {
instanceProxy = this
}
}
app.mount(Comp, nodeOps.createElement('div'))
render(h(Comp), nodeOps.createElement('div'))
expect(instanceProxy.$data).toBe(instance!.data)
expect(instanceProxy.$props).toBe(instance!.propsProxy)
expect(instanceProxy.$attrs).toBe(instance!.attrs)
@ -108,7 +104,6 @@ describe('component: proxy', () => {
})
test('sink', async () => {
const app = createApp()
let instance: ComponentInternalInstance
let instanceProxy: any
const Comp = {
@ -120,14 +115,13 @@ describe('component: proxy', () => {
instanceProxy = this
}
}
app.mount(Comp, nodeOps.createElement('div'))
render(h(Comp), nodeOps.createElement('div'))
instanceProxy.foo = 1
expect(instanceProxy.foo).toBe(1)
expect(instance!.sink.foo).toBe(1)
})
test('has check', () => {
const app = createApp()
let instanceProxy: any
const Comp = {
render() {},
@ -148,7 +142,7 @@ describe('component: proxy', () => {
instanceProxy = this
}
}
app.mount(Comp, nodeOps.createElement('div'), { msg: 'hello' })
render(h(Comp, { msg: 'hello' }), nodeOps.createElement('div'))
// props
expect('msg' in instanceProxy).toBe(true)

13
packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts
View File

@ -12,7 +12,6 @@ import { mockWarn } from '@vue/shared'
describe('resolveAssets', () => {
test('should work', () => {
const app = createApp()
const FooBar = () => null
const BarBaz = { mounted: () => null }
@ -49,8 +48,9 @@ describe('resolveAssets', () => {
}
}
const app = createApp(Root)
const root = nodeOps.createElement('div')
app.mount(Root, root)
app.mount(root)
expect(component1!).toBe(FooBar)
expect(component2!).toBe(FooBar)
expect(component3!).toBe(FooBar)
@ -78,7 +78,6 @@ describe('resolveAssets', () => {
})
test('not exist', () => {
const app = createApp()
const Root = {
setup() {
resolveComponent('foo')
@ -87,14 +86,14 @@ describe('resolveAssets', () => {
}
}
const app = createApp(Root)
const root = nodeOps.createElement('div')
app.mount(Root, root)
app.mount(root)
expect('Failed to resolve component: foo').toHaveBeenWarned()
expect('Failed to resolve directive: bar').toHaveBeenWarned()
})
test('resolve dynamic component', () => {
const app = createApp()
const dynamicComponents = {
foo: () => 'foo',
bar: () => 'bar',
@ -112,8 +111,10 @@ describe('resolveAssets', () => {
}
}
}
const app = createApp(Root)
const root = nodeOps.createElement('div')
app.mount(Root, root)
app.mount(root)
expect(foo).toBe(dynamicComponents.foo)
expect(bar).toBe(dynamicComponents.bar)
expect(baz).toBe(dynamicComponents.baz)

44
packages/runtime-core/src/apiCreateApp.ts
View File

@ -16,16 +16,11 @@ export interface App<HostElement = any> {
component(name: string, component: Component): this
directive(name: string): Directive | undefined
directive(name: string, directive: Directive): this
mount(
rootComponent:
| Component
// for compatibility with defineComponent() return types
| { new (): ComponentPublicInstance<any, any, any, any, any> },
rootContainer: HostElement | string,
rootProps?: Data
): ComponentPublicInstance
mount(rootContainer: HostElement | string): ComponentPublicInstance
unmount(rootContainer: HostElement | string): void
provide<T>(key: InjectionKey<T> | string, value: T): this
rootComponent: Component
rootContainer: HostElement | null
}
export interface AppConfig {
@ -79,16 +74,30 @@ export function createAppContext(): AppContext {
}
}
export type CreateAppFunction<HostElement> = (
rootComponent:
| Component
// for compatibility with defineComponent() return types
| { new (): ComponentPublicInstance<any, any, any, any, any> },
rootProps?: Data | null
) => App<HostElement>
export function createAppAPI<HostNode, HostElement>(
render: RootRenderFunction<HostNode, HostElement>
): () => App<HostElement> {
return function createApp(): App {
): CreateAppFunction<HostElement> {
return function createApp(
rootComponent: Component,
rootProps?: Data | null
): App {
const context = createAppContext()
const installedPlugins = new Set()
let isMounted = false
const app: App = {
rootComponent,
rootContainer: null,
get config() {
return context.config
},
@ -165,11 +174,7 @@ export function createAppAPI<HostNode, HostElement>(
return app
},
mount(
rootComponent: Component,
rootContainer: HostElement,
rootProps?: Data | null
): any {
mount(rootContainer: HostElement): any {
if (!isMounted) {
if (rootProps != null && !isObject(rootProps)) {
__DEV__ &&
@ -190,6 +195,7 @@ export function createAppAPI<HostNode, HostElement>(
render(vnode, rootContainer)
isMounted = true
app.rootContainer = rootContainer
return vnode.component!.proxy
} else if (__DEV__) {
warn(
@ -198,8 +204,12 @@ export function createAppAPI<HostNode, HostElement>(
}
},
unmount(rootContainer: HostElement) {
render(null, rootContainer)
unmount() {
if (isMounted) {
render(null, app.rootContainer!)
} else if (__DEV__) {
warn(`Cannot unmount an app that is not mounted.`)
}
},
provide(key, value) {

8
packages/runtime-core/src/index.ts
View File

@ -99,7 +99,13 @@ export { registerRuntimeCompiler } from './component'
// Types -----------------------------------------------------------------------
export { App, AppConfig, AppContext, Plugin } from './apiCreateApp'
export {
App,
AppConfig,
AppContext,
Plugin,
CreateAppFunction
} from './apiCreateApp'
export { VNode, VNodeTypes, VNodeProps } from './vnode'
export {
Component,

4
packages/runtime-core/src/renderer.ts
View File

@ -46,7 +46,7 @@ import { ShapeFlags } from './shapeFlags'
import { pushWarningContext, popWarningContext, warn } from './warning'
import { invokeDirectiveHook } from './directives'
import { ComponentPublicInstance } from './componentProxy'
import { App, createAppAPI } from './apiCreateApp'
import { createAppAPI, CreateAppFunction } from './apiCreateApp'
import {
SuspenseBoundary,
queueEffectWithSuspense,
@ -174,7 +174,7 @@ export function createRenderer<
options: RendererOptions<HostNode, HostElement>
): {
render: RootRenderFunction<HostNode, HostElement>
createApp: () => App<HostElement>
createApp: CreateAppFunction<HostElement>
} {
type HostVNode = VNode<HostNode, HostElement>
type HostVNodeChildren = VNodeChildren<HostNode, HostElement>

27
packages/runtime-dom/__tests__/directives/vModel.spec.ts
View File

@ -1,6 +1,6 @@
import {
createApp,
h,
render,
nextTick,
defineComponent,
vModelDynamic,
@ -20,10 +20,9 @@ const setValue = function(this: any, value: any) {
this.value = value
}
let app: any, root: any
let root: any
beforeEach(() => {
app = createApp()
root = document.createElement('div') as any
})
@ -44,9 +43,9 @@ describe('vModel', () => {
]
}
})
app.mount(component, root)
render(h(component), root)
const input = root.querySelector('input')
const input = root.querySelector('input')!
const data = root._vnode.component.data
input.value = 'foo'
@ -75,7 +74,7 @@ describe('vModel', () => {
]
}
})
app.mount(component, root)
render(h(component), root)
const input = root.querySelector('textarea')
const data = root._vnode.component.data
@ -136,7 +135,7 @@ describe('vModel', () => {
]
}
})
app.mount(component, root)
render(h(component), root)
const number = root.querySelector('.number')
const trim = root.querySelector('.trim')
@ -176,7 +175,7 @@ describe('vModel', () => {
]
}
})
app.mount(component, root)
render(h(component), root)
const input = root.querySelector('input')
const data = root._vnode.component.data
@ -219,7 +218,7 @@ describe('vModel', () => {
]
}
})
app.mount(component, root)
render(h(component), root)
const input = root.querySelector('input')
const data = root._vnode.component.data
@ -262,7 +261,7 @@ describe('vModel', () => {
]
}
})
app.mount(component, root)
render(h(component), root)
const input = root.querySelector('input')
const data = root._vnode.component.data
@ -314,7 +313,7 @@ describe('vModel', () => {
]
}
})
app.mount(component, root)
render(h(component), root)
const foo = root.querySelector('.foo')
const bar = root.querySelector('.bar')
@ -384,7 +383,7 @@ describe('vModel', () => {
]
}
})
app.mount(component, root)
render(h(component), root)
const foo = root.querySelector('.foo')
const bar = root.querySelector('.bar')
@ -437,7 +436,7 @@ describe('vModel', () => {
]
}
})
app.mount(component, root)
render(h(component), root)
const input = root.querySelector('select')
const foo = root.querySelector('option[value=foo]')
@ -494,7 +493,7 @@ describe('vModel', () => {
]
}
})
app.mount(component, root)
render(h(component), root)
const input = root.querySelector('select')
const foo = root.querySelector('option[value=foo]')

15
packages/runtime-dom/__tests__/directives/vShow.spec.ts
View File

@ -5,16 +5,15 @@ import {
nextTick,
VNode
} from '@vue/runtime-core'
import { createApp, vShow } from '@vue/runtime-dom'
import { render, vShow } from '@vue/runtime-dom'
const withVShow = (node: VNode, exp: any) =>
withDirectives(node, [[vShow, exp]])
let app: any, root: any
let root: any
beforeEach(() => {
app = createApp()
root = document.createElement('div') as any
root = document.createElement('div')
})
describe('runtime-dom: v-show directive', () => {
@ -27,7 +26,7 @@ describe('runtime-dom: v-show directive', () => {
return [withVShow(h('div'), this.value)]
}
})
app.mount(component, root)
render(h(component), root)
const $div = root.querySelector('div')
@ -43,7 +42,7 @@ describe('runtime-dom: v-show directive', () => {
return [withVShow(h('div'), this.value)]
}
})
app.mount(component, root)
render(h(component), root)
const $div = root.querySelector('div')
@ -59,7 +58,7 @@ describe('runtime-dom: v-show directive', () => {
return [withVShow(h('div'), this.value)]
}
})
app.mount(component, root)
render(h(component), root)
const $div = root.querySelector('div')
const data = root._vnode.component.data
@ -110,7 +109,7 @@ describe('runtime-dom: v-show directive', () => {
]
}
})
app.mount(component, root)
render(h(component), root)
const $div = root.querySelector('div')
const data = root._vnode.component.data

27
packages/runtime-dom/src/index.ts
View File

@ -1,8 +1,8 @@
import {
createRenderer,
warn,
App,
RootRenderFunction
RootRenderFunction,
CreateAppFunction
} from '@vue/runtime-core'
import { nodeOps } from './nodeOps'
import { patchProp } from './patchProp'
@ -17,8 +17,8 @@ const { render: baseRender, createApp: baseCreateApp } = createRenderer({
// use explicit type casts here to avoid import() calls in rolled-up d.ts
export const render = baseRender as RootRenderFunction<Node, Element>
export const createApp = (): App<Element> => {
const app = baseCreateApp()
export const createApp: CreateAppFunction<Element> = (...args) => {
const app = baseCreateApp(...args)
if (__DEV__) {
// Inject `isNativeTag`
@ -29,8 +29,8 @@ export const createApp = (): App<Element> => {
})
}
const { mount, unmount } = app
app.mount = (component, container, props): any => {
const { mount } = app
app.mount = (container): any => {
if (isString(container)) {
container = document.querySelector(container)!
if (!container) {
@ -39,6 +39,7 @@ export const createApp = (): App<Element> => {
return
}
}
const component = app.rootComponent
if (
__RUNTIME_COMPILE__ &&
!isFunction(component) &&
@ -49,19 +50,7 @@ export const createApp = (): App<Element> => {
}
// clear content before mounting
container.innerHTML = ''
return mount(component, container, props)
}
app.unmount = container => {
if (isString(container)) {
container = document.querySelector(container)!
if (!container) {
__DEV__ &&
warn(`Failed to unmount app: mount target selector returned null.`)
return
}
}
unmount(container)
return mount(container)
}
return app

4
packages/runtime-test/src/index.ts
View File

@ -2,7 +2,7 @@ import {
createRenderer,
VNode,
RootRenderFunction,
App
CreateAppFunction
} from '@vue/runtime-core'
import { nodeOps, TestNode, TestElement } from './nodeOps'
import { patchProp } from './patchProp'
@ -14,7 +14,7 @@ const { render: baseRender, createApp: baseCreateApp } = createRenderer({
})
export const render = baseRender as RootRenderFunction<TestNode, TestElement>
export const createApp = baseCreateApp as () => App<TestElement>
export const createApp = baseCreateApp as CreateAppFunction<TestElement>
// convenience for one-off render validations
export function renderToString(vnode: VNode) {

28
packages/vue/__tests__/index.spec.ts
View File

@ -14,7 +14,7 @@ describe('compiler + runtime integration', () => {
}
}
}
createApp().mount(App, container)
createApp(App).mount(container)
expect(container.innerHTML).toBe(`0`)
})
@ -33,7 +33,7 @@ describe('compiler + runtime integration', () => {
}
}
}
createApp().mount(App, container)
createApp(App).mount(container)
expect(container.innerHTML).toBe(`0`)
})
@ -51,7 +51,7 @@ describe('compiler + runtime integration', () => {
}
}
}
createApp().mount(App, container)
createApp(App).mount(container)
expect(container.innerHTML).toBe(`0`)
})
@ -60,7 +60,7 @@ describe('compiler + runtime integration', () => {
const App = {
template: `<div v-if>`
}
createApp().mount(App, container)
createApp(App).mount(container)
expect(
`Template compilation error: Element is missing end tag`
).toHaveBeenWarned()
@ -78,26 +78,24 @@ describe('compiler + runtime integration', () => {
})
it('should support custom element', () => {
const app = createApp()
const container = document.createElement('div')
const App = {
const app = createApp({
template: '<custom></custom>'
}
})
const container = document.createElement('div')
app.config.isCustomElement = tag => tag === 'custom'
app.mount(App, container)
app.mount(container)
expect(container.innerHTML).toBe('<custom></custom>')
})
it('should support using element innerHTML as template', () => {
const app = createApp()
const container = document.createElement('div')
container.innerHTML = '{{msg}}'
const App = {
const app = createApp({
data: {
msg: 'hello'
}
}
app.mount(App, container)
})
const container = document.createElement('div')
container.innerHTML = '{{msg}}'
app.mount(container)
expect(container.innerHTML).toBe('hello')
})
})

10
packages/vue/examples/classic/commits.html
View File

@ -24,12 +24,12 @@
<script>
const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`
const App = {
data: {
Vue.createApp({
data: () => ({
branches: ['master', 'sync'],
currentBranch: 'master',
commits: null
},
}),
created() {
this.fetchData()
@ -55,9 +55,7 @@ const App = {
return v.replace(/T|Z/g, ' ')
}
}
}
Vue.createApp().mount(App, '#demo')
}).mount('#demo')
</script>
<style>

10
packages/vue/examples/classic/grid.html
View File

@ -87,11 +87,11 @@ const DemoGrid = {
</div>
<!-- App script -->
<script>
const App = {
Vue.createApp({
components: {
DemoGrid
},
data: {
data: () => ({
searchQuery: '',
gridColumns: ['name', 'power'],
gridData: [
@ -100,10 +100,8 @@ const App = {
{ name: 'Jackie Chan', power: 7000 },
{ name: 'Jet Li', power: 8000 }
]
}
}
Vue.createApp().mount(App, '#demo')
})
}).mount('#demo')
</script>
<style>

10
packages/vue/examples/classic/markdown.html
View File

@ -10,10 +10,10 @@
<script>
const delay = window.location.hash === '#test' ? 16 : 300
const App = {
data: {
Vue.createApp({
data: () => ({
input: '# hello'
},
}),
computed: {
compiledMarkdown() {
return marked(this.input, { sanitize: true })
@ -24,9 +24,7 @@ const App = {
this.input = e.target.value
}, delay)
}
}
Vue.createApp().mount(App, '#editor')
}).mount('#editor')
</script>
<style>

11
packages/vue/examples/classic/svg.html
View File

@ -97,14 +97,15 @@ const globalStats = [
{ label: 'E', value: 100 },
{ label: 'F', value: 100 }
]
const App = {
Vue.createApp({
components: {
Polygraph
},
data: {
data: () => ({
newLabel: '',
stats: globalStats
},
}),
methods: {
add(e) {
e.preventDefault()
@ -123,9 +124,7 @@ const App = {
}
}
}
}
Vue.createApp().mount(App, '#demo')
}).mount('#demo')
</script>
<style>

10
packages/vue/examples/classic/todomvc.html
View File

@ -82,14 +82,14 @@ const filters = {
}
}
const App = {
Vue.createApp({
// app initial state
data: {
data: () => ({
todos: todoStorage.fetch(),
newTodo: '',
editedTodo: null,
visibility: 'all'
},
}),
// watch todos change for localStorage persistence
watch: {
@ -192,7 +192,5 @@ const App = {
}
}
}
}
Vue.createApp().mount(App, '#app')
}).mount('#app')
</script>

48
packages/vue/examples/classic/tree.html
View File

@ -69,43 +69,43 @@ const TreeItem = {
</ul>
<script>
const App = {
components: {
TreeItem
},
data: {
treeData: {
name: 'My Tree',
const treeData = {
name: 'My Tree',
children: [
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
}
{ name: 'wat' }
]
}
]
}
}
]
}
Vue.createApp().mount(App, '#demo')
Vue.createApp({
components: {
TreeItem
},
data: () => ({
treeData
})
}).mount('#demo')
</script>
<style>

6
packages/vue/examples/composition/commits.html
View File

@ -32,7 +32,7 @@ const truncate = v => {
const formatDate = v => v.replace(/T|Z/g, ' ')
const App = {
createApp({
setup() {
const currentBranch = ref('master')
const commits = ref(null)
@ -54,9 +54,7 @@ const App = {
formatDate
}
}
}
createApp().mount(App, '#demo')
}).mount('#demo')
</script>
<style>

10
packages/vue/examples/composition/grid.html
View File

@ -93,11 +93,11 @@ const DemoGrid = {
</div>
<!-- App script -->
<script>
const App = {
Vue.createApp({
components: {
DemoGrid
},
data: {
data: () => ({
searchQuery: '',
gridColumns: ['name', 'power'],
gridData: [
@ -106,10 +106,8 @@ const App = {
{ name: 'Jackie Chan', power: 7000 },
{ name: 'Jet Li', power: 8000 }
]
}
}
Vue.createApp().mount(App, '#demo')
})
}).mount('#demo')
</script>
<style>

6
packages/vue/examples/composition/markdown.html
View File

@ -11,7 +11,7 @@
const delay = window.location.hash === '#test' ? 16 : 300
const { ref, computed } = Vue
const App = {
Vue.createApp({
setup() {
const input = ref('# hello')
const output = computed(() => marked(input.value, { sanitize: true }))
@ -23,9 +23,7 @@ const App = {
update
}
}
}
Vue.createApp().mount(App, '#editor')
}).mount('#editor')
</script>
<style>

7
packages/vue/examples/composition/svg.html
View File

@ -100,7 +100,8 @@ const globalStats = [
{ label: 'E', value: 100 },
{ label: 'F', value: 100 }
]
const App = {
createApp({
components: {
Polygraph
},
@ -133,9 +134,7 @@ const App = {
remove
}
}
}
createApp().mount(App, '#demo')
}).mount('#demo')
</script>
<style>

6
packages/vue/examples/composition/todomvc.html
View File

@ -90,7 +90,7 @@ function pluralize (n) {
return n === 1 ? 'item' : 'items'
}
const App = {
createApp({
setup () {
const state = reactive({
todos: todoStorage.fetch(),
@ -202,7 +202,5 @@ const App = {
}
}
}
}
createApp().mount(App, '#app')
}).mount('#app')
</script>

48
packages/vue/examples/composition/tree.html
View File

@ -72,43 +72,43 @@ const TreeItem = {
</ul>
<script>
const App = {
components: {
TreeItem
},
data: {
treeData: {
name: 'My Tree',
const treeData = {
name: 'My Tree',
children: [
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
}
{ name: 'wat' }
]
}
]
}
}
]
}
Vue.createApp().mount(App, '#demo')
Vue.createApp({
components: {
TreeItem
},
data: () => ({
treeData
})
}).mount('#demo')
</script>
<style>

6
packages/vue/examples/transition/list.html
View File

@ -24,7 +24,7 @@ const Item = {
template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`
}
const App = {
Vue.createApp({
components: {
Item
},
@ -51,9 +51,7 @@ const App = {
}
}
}
}
Vue.createApp().mount(App, '#app')
}).mount('#app')
</script>
<style>

9
packages/vue/examples/transition/modal.html
View File

@ -56,13 +56,12 @@ const Modal = {
</div>
<script>
const App = {
Vue.createApp({
components: { Modal },
data: {
data: () => ({
showModal: false
}
}
Vue.createApp().mount(App, '#app')
})
}).mount('#app')
</script>
<style>