wip

Author: antfu

src/createApp.ts

@@ -0,0 +1,56 @@
+import Vue from 'vue'
+import { VueConstructor } from 'vue/types/umd'
+import { currentVue } from './runtimeContext'
+import { warn } from './utils'
+
+export interface App {
+  config: VueConstructor['config']
+  use: VueConstructor['use']
+  mixin: VueConstructor['mixin']
+  component: VueConstructor['component']
+  directive: VueConstructor['directive']
+  mount: Vue['$mount']
+  unmount: Vue['$destroy']
+}
+
+export function createApp(rootComponent: any, rootProps: any = undefined): App {
+  const V = currentVue!
+
+  let mountedVM: Vue | undefined
+
+  return {
+    config: V.config,
+    use: V.use.bind(V),
+    mixin: V.mixin.bind(V),
+    component: V.component.bind(V),
+    directive: V.directive.bind(V),
+    mount: (el, hydrating) => {
+      if (!mountedVM) {
+        mountedVM = new V({
+          propsData: rootProps,
+          render: (h) => h(rootComponent),
+        })
+        mountedVM.$mount(el, hydrating)
+        return mountedVM
+      } else {
+        if (__DEV__) {
+          warn(
+            `App has already been mounted.\n` +
+              `If you want to remount the same app, move your app creation logic ` +
+              `into a factory function and create fresh app instances for each ` +
+              `mount - e.g. \`const createMyApp = () => createApp(App)\``
+          )
+        }
+        return mountedVM
+      }
+    },
+    unmount: () => {
+      if (mountedVM) {
+        mountedVM.$destroy()
+        mountedVM = undefined
+      } else if (__DEV__) {
+        warn(`Cannot unmount an app that is not mounted.`)
+      }
+    },
+  }
+}

src/index.ts

@@ -14,6 +14,7 @@ const VueCompositionAPI = {
 }
 
 export default VueCompositionAPI
+export { createApp } from './createApp'
 export { nextTick } from './nextTick'
 export { createElement as h } from './createElement'
 export { getCurrentInstance } from './runtimeContext'

test/createApp.spec.js

@@ -0,0 +1,44 @@
+const { createApp, defineComponent } = require('../src')
+const { nextTick } = require('process')
+
+describe('setup', () => {
+  beforeEach(() => {
+    warn = jest.spyOn(global.console, 'error').mockImplementation(() => null)
+  })
+  afterEach(() => {
+    warn.mockRestore()
+  })
+
+  it('should work', async () => {
+    const app = createApp({
+      setup() {
+        return {
+          a: ref(1),
+        }
+      },
+      template: '<p>{{a}}</p>',
+    })
+    const vm = app.mount()
+
+    await nextTick()
+    expect(vm.$el.textContent).toBe('1')
+  })
+
+  it('should work with rootProps', async () => {
+    const app = createApp(
+      defineComponent({
+        props: {
+          msg: String,
+        },
+        template: '<p>{{msg}}</p>',
+      }),
+      {
+        msg: 'foobar',
+      }
+    )
+    const vm = app.mount()
+
+    await nextTick()
+    expect(vm.$el.textContent).toBe('foobar')
+  })
+})