Add an api exposes Vue instance to allow users to do additional things (

#59) * Add an api exposes vue instance to allow users to do additional things * Add handleInstance support for Vue 2 apps
single-spa · Sep 27, 2020 · 42f257d · 42f257d
1 parent 5162f78
commit 42f257d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/single-spa-vue.js b/src/single-spa-vue.js
@@ -7,7 +7,8 @@ const defaultOpts = {
 
   // sometimes require opts
   Vue: null,
-  createApp: null
+  createApp: null,
+  handleInstance: null
 };
 
 export default function singleSpaVue(userOpts) {
@@ -121,12 +122,18 @@ function mount(opts, mountedInstances, props) {
 
     if (opts.createApp) {
       instance.vueInstance = opts.createApp(appOptions);
+      if (opts.handleInstance) {
+        opts.handleInstance(instance.vueInstance);
+      }
       instance.vueInstance.mount(appOptions.el);
     } else {
       instance.vueInstance = new opts.Vue(appOptions);
       if (instance.vueInstance.bind) {
         instance.vueInstance = instance.vueInstance.bind(instance.vueInstance);
       }
+      if (opts.handleInstance) {
+        opts.handleInstance(instance.vueInstance);
+      }
     }
 
     mountedInstances[props.name] = instance;

diff --git a/src/single-spa-vue.test.js b/src/single-spa-vue.test.js
@@ -26,20 +26,25 @@ describe("single-spa-vue", () => {
   });
 
   it(`calls new Vue() during mount and mountedInstances.instance.$destroy() on unmount`, () => {
+    const handleInstance = jest.fn();
+
     const lifecycles = new singleSpaVue({
       Vue,
-      appOptions: {}
+      appOptions: {},
+      handleInstance
     });
 
     return lifecycles
       .bootstrap(props)
       .then(() => {
         expect(Vue).not.toHaveBeenCalled();
+        expect(handleInstance).not.toHaveBeenCalled();
         expect($destroy).not.toHaveBeenCalled();
         return lifecycles.mount(props);
       })
       .then(() => {
         expect(Vue).toHaveBeenCalled();
+        expect(handleInstance).toHaveBeenCalled();
         expect($destroy).not.toHaveBeenCalled();
         return lifecycles.unmount(props);
       })
@@ -392,9 +397,12 @@ describe("single-spa-vue", () => {
 
     const props = { name: "vue3-app" };
 
+    const handleInstance = jest.fn();
+
     const lifecycles = new singleSpaVue({
       Vue,
-      appOptions: {}
+      appOptions: {},
+      handleInstance
     });
 
     await lifecycles.bootstrap(props);
@@ -403,6 +411,7 @@ describe("single-spa-vue", () => {
     expect(Vue.createApp).toHaveBeenCalled();
     // Vue 3 requires the data to be a function
     expect(typeof Vue.createApp.mock.calls[0][0].data).toBe("function");
+    expect(handleInstance).toHaveBeenCalledWith(appMock);
     expect(appMock.mount).toHaveBeenCalled();
 
     await lifecycles.unmount(props);
@@ -422,9 +431,12 @@ describe("single-spa-vue", () => {
 
     const props = { name: "vue3-app" };
 
+    const handleInstance = jest.fn();
+
     const lifecycles = new singleSpaVue({
       createApp,
-      appOptions: {}
+      appOptions: {},
+      handleInstance
     });
 
     await lifecycles.bootstrap(props);
@@ -433,6 +445,7 @@ describe("single-spa-vue", () => {
     expect(createApp).toHaveBeenCalled();
     // Vue 3 requires the data to be a function
     expect(typeof createApp.mock.calls[0][0].data).toBe("function");
+    expect(handleInstance).toHaveBeenCalledWith(appMock);
     expect(appMock.mount).toHaveBeenCalled();
 
     await lifecycles.unmount(props);