feat(runtime-core): support app.unmount(container) (#601)

close #593
vuejs · Jan 16, 2020 · 04ac6c4 · 04ac6c4
1 parent 8ec69cb
commit 04ac6c4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/packages/runtime-core/__tests__/apiApp.spec.ts b/packages/runtime-core/__tests__/apiApp.spec.ts
@@ -46,6 +46,26 @@ describe('api: createApp', () => {
     expect(`already been mounted`).toHaveBeenWarned()
   })
 
+  test('unmount', () => {
+    const Comp = {
+      props: {
+        count: {
+          default: 0
+        }
+      },
+      setup(props: { count: number }) {
+        return () => props.count
+      }
+    }
+
+    const root = nodeOps.createElement('div')
+    const app = createApp()
+    app.mount(Comp, root)
+
+    app.unmount(root)
+    expect(serializeInner(root)).toBe(``)
+  })
+
   test('provide', () => {
     const app = createApp()
     app.provide('foo', 1)

diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts
@@ -24,6 +24,7 @@ export interface App<HostElement = any> {
     rootContainer: HostElement | string,
     rootProps?: Data
   ): ComponentPublicInstance
+  unmount(rootContainer: HostElement | string): void
   provide<T>(key: InjectionKey<T> | string, value: T): this
 }
 
@@ -197,6 +198,10 @@ export function createAppAPI<HostNode, HostElement>(
         }
       },
 
+      unmount(rootContainer: HostElement) {
+        render(null, rootContainer)
+      },
+
       provide(key, value) {
         if (__DEV__ && key in context.provides) {
           warn(

diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
@@ -29,7 +29,7 @@ export const createApp = (): App<Element> => {
     })
   }
 
-  const mount = app.mount
+  const { mount, unmount } = app
   app.mount = (component, container, props): any => {
     if (isString(container)) {
       container = document.querySelector(container)!
@@ -52,6 +52,18 @@ export const createApp = (): App<Element> => {
     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 app
 }