refactor: adjust createApp related API signatures

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

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')
})
})