feat: add createApp

Author: antfu

README.md

@@ -369,6 +369,27 @@ watch(() => {
 
 </details>
 
+### createApp
+
+<details>
+<summary>
+⚠️ <code>createApp()</code> is global
+</summary>
+
+In Vue 3, `createApp()` is introduced to provide context(plugin, components, etc.) isolation between app instances. Due the the design of Vue 2, in this plugin, we provide `createApp()` as a forward compatible API which is just an alias of the global.
+
+```ts
+const app1 = createApp(RootComponent1)
+app1.component('Foo', Foo) // equivlate as Vue.component('Foo', Foo)
+app1.use(VueRouter) // equivlate as Vue.use(VueRouter)
+
+const app2 = createApp(RootComponent2)
+app2.component('Bar', Bar) // equivlate as Vue.use('Bar', Bar)
+```
+
+</details>
+
+
 ### Missing APIs
 
 The following APIs introduced in Vue 3 are not available in this plugin.

src/createApp.ts

@@ -1,6 +1,6 @@
-import Vue from 'vue'
+import type Vue from 'vue'
 import { VueConstructor } from 'vue/types/umd'
-import { currentVue } from './runtimeContext'
+import { getCurrentVue } from './runtimeContext'
 import { warn } from './utils'
 
 export interface App {
@@ -14,9 +14,9 @@ export interface App {
 }
 
 export function createApp(rootComponent: any, rootProps: any = undefined): App {
-  const V = currentVue!
+  const V = getCurrentVue()!
 
-  let mountedVM: Vue | undefined
+  let mountedVM: Vue | undefined = undefined
 
   return {
     config: V.config,
@@ -26,10 +26,7 @@ export function createApp(rootComponent: any, rootProps: any = undefined): App {
     directive: V.directive.bind(V),
     mount: (el, hydrating) => {
       if (!mountedVM) {
-        mountedVM = new V({
-          propsData: rootProps,
-          render: (h) => h(rootComponent),
-        })
+        mountedVM = new V({ propsData: rootProps, ...rootComponent })
         mountedVM.$mount(el, hydrating)
         return mountedVM
       } else {

test/createApp.spec.js

@@ -1,26 +1,19 @@
-const { createApp, defineComponent } = require('../src')
-const { nextTick } = require('process')
-
-describe('setup', () => {
-  beforeEach(() => {
-    warn = jest.spyOn(global.console, 'error').mockImplementation(() => null)
-  })
-  afterEach(() => {
-    warn.mockRestore()
-  })
+const Vue = require('vue/dist/vue.common.js')
+const { createApp, defineComponent, ref, h } = require('../src')
 
+describe('createApp', () => {
   it('should work', async () => {
-    const app = createApp({
+    const vm = new Vue({
       setup() {
         return {
           a: ref(1),
         }
       },
       template: '<p>{{a}}</p>',
-    })
-    const vm = app.mount()
+    }).$mount()
 
-    await nextTick()
+    await Vue.nextTick()
+    expect(vm.a).toBe(1)
     expect(vm.$el.textContent).toBe('1')
   })
 
@@ -38,7 +31,36 @@ describe('setup', () => {
     )
     const vm = app.mount()
 
-    await nextTick()
+    await Vue.nextTick()
+    expect(vm.$el.textContent).toBe('foobar')
+  })
+
+  it('should work with components', async () => {
+    const Foo = defineComponent({
+      props: {
+        msg: {
+          type: String,
+          required: true,
+        },
+      },
+      template: '<p>{{msg}}</p>',
+    })
+
+    const app = createApp(
+      defineComponent({
+        props: {
+          msg: String,
+        },
+        template: '<Foo :msg="msg"/>',
+      }),
+      {
+        msg: 'foobar',
+      }
+    )
+    app.component('Foo', Foo)
+    const vm = app.mount()
+
+    await Vue.nextTick()
     expect(vm.$el.textContent).toBe('foobar')
   })
 })