single-spa-vue - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

lib/single-spa-vue.js

@@ -1,146 +0,2 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports);
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports);
-    global.singleSpaVue = mod.exports;
-  }
-})(this, function (_exports) {
-  "use strict";
-
-  Object.defineProperty(_exports, "__esModule", {
-    value: true
-  });
-  _exports["default"] = singleSpaVue;
-
-  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-  function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-  var defaultOpts = {
-    // required opts
-    Vue: null,
-    appOptions: null,
-    template: null
-  };
-
-  function singleSpaVue(userOpts) {
-    if (_typeof(userOpts) !== 'object') {
-      throw new Error("single-spa-vue requires a configuration object");
-    }
-
-    var opts = _objectSpread({}, defaultOpts, {}, userOpts);
-
-    if (!opts.Vue) {
-      throw new Error('single-spa-vuejs must be passed opts.Vue');
-    }
-
-    if (!opts.appOptions) {
-      throw new Error('single-spa-vuejs must be passed opts.appOptions');
-    } // Just a shared object to store the mounted object state
-
-
-    var mountedInstances = {};
-    return {
-      bootstrap: bootstrap.bind(null, opts, mountedInstances),
-      mount: mount.bind(null, opts, mountedInstances),
-      unmount: unmount.bind(null, opts, mountedInstances),
-      update: update.bind(null, opts, mountedInstances)
-    };
-  }
-
-  function bootstrap(opts) {
-    if (opts.loadRootComponent) {
-      return opts.loadRootComponent().then(function (root) {
-        return opts.rootComponent = root;
-      });
-    } else {
-      return Promise.resolve();
-    }
-  }
-
-  function mount(opts, mountedInstances, props) {
-    return Promise.resolve().then(function () {
-      var appOptions = _objectSpread({}, opts.appOptions);
-
-      if (props.domElement && !appOptions.el) {
-        appOptions.el = props.domElement;
-      }
-
-      if (!appOptions.el) {
-        var htmlId = "single-spa-application:".concat(props.name);
-        appOptions.el = "#".concat(htmlId.replace(':', '\\:'), " .single-spa-container");
-        var domEl = document.getElementById(htmlId);
-
-        if (!domEl) {
-          domEl = document.createElement('div');
-          domEl.id = htmlId;
-          document.body.appendChild(domEl);
-        } // single-spa-vue@>=2 always REPLACES the `el` instead of appending to it.
-        // We want domEl to stick around and not be replaced. So we tell Vue to mount
-        // into a container div inside of the main domEl
-
-
-        if (!domEl.querySelector('.single-spa-container')) {
-          var singleSpaContainer = document.createElement('div');
-          singleSpaContainer.className = 'single-spa-container';
-          domEl.appendChild(singleSpaContainer);
-        }
-
-        mountedInstances.domEl = domEl;
-      }
-
-      if (!appOptions.render && !appOptions.template && opts.rootComponent) {
-        appOptions.render = function (h) {
-          return h(opts.rootComponent);
-        };
-      }
-
-      if (!appOptions.data) {
-        appOptions.data = {};
-      }
-
-      appOptions.data = _objectSpread({}, appOptions.data, {}, props);
-      mountedInstances.instance = new opts.Vue(appOptions);
-
-      if (mountedInstances.instance.bind) {
-        mountedInstances.instance = mountedInstances.instance.bind(mountedInstances.instance);
-      }
-
-      return mountedInstances.instance;
-    });
-  }
-
-  function update(opts, mountedInstances, props) {
-    return Promise.resolve().then(function () {
-      var data = _objectSpread({}, opts.appOptions.data || {}, {}, props);
-
-      for (var prop in data) {
-        mountedInstances.instance[prop] = data[prop];
-      }
-    });
-  }
-
-  function unmount(opts, mountedInstances) {
-    return Promise.resolve().then(function () {
-      mountedInstances.instance.$destroy();
-      mountedInstances.instance.$el.innerHTML = '';
-      delete mountedInstances.instance;
-
-      if (mountedInstances.domEl) {
-        mountedInstances.domEl.innerHTML = '';
-        delete mountedInstances.domEl;
-      }
-    });
-  }
-});
-//# sourceMappingURL=single-spa-vue.js.map
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).singleSpaVue=n()}(this,(function(){"use strict";function e(n){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(n)}function n(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function t(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function o(e){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{};o%2?t(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):t(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}var r="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};!function(e,n){e(n={exports:{}},n.exports)}((function(e,n){var t;t=r,e.exports=function(e){if(e.CSS&&e.CSS.escape)return e.CSS.escape;var n=function(e){if(0==arguments.length)throw new TypeError("`CSS.escape` requires an argument.");for(var n,t=String(e),o=t.length,r=-1,i="",a=t.charCodeAt(0);++r<o;)0!=(n=t.charCodeAt(r))?i+=n>=1&&n<=31||127==n||0==r&&n>=48&&n<=57||1==r&&n>=48&&n<=57&&45==a?"\\"+n.toString(16)+" ":0==r&&1==o&&45==n||!(n>=128||45==n||95==n||n>=48&&n<=57||n>=65&&n<=90||n>=97&&n<=122)?"\\"+t.charAt(r):t.charAt(r):i+="�";return i};return e.CSS||(e.CSS={}),e.CSS.escape=n,n}(t)}));var i={Vue:null,appOptions:null,template:null};function a(e){return e.loadRootComponent?e.loadRootComponent().then((function(n){return e.rootComponent=n})):Promise.resolve()}function u(e,n,t){return Promise.resolve().then((function(){var r=o({},e.appOptions);if(t.domElement&&!r.el&&(r.el=t.domElement),!r.el){var i="single-spa-application:".concat(t.name);r.el="#".concat(CSS.escape(i)," .single-spa-container");var a=document.getElementById(i);if(a||((a=document.createElement("div")).id=i,document.body.appendChild(a)),!a.querySelector(".single-spa-container")){var u=document.createElement("div");u.className="single-spa-container",a.appendChild(u)}n.domEl=a}return r.render||r.template||!e.rootComponent||(r.render=function(n){return n(e.rootComponent)}),r.data||(r.data={}),r.data=o({},r.data,{},t),n.instance=new e.Vue(r),n.instance.bind&&(n.instance=n.instance.bind(n.instance)),n.instance}))}function c(e,n,t){return Promise.resolve().then((function(){var r=o({},e.appOptions.data||{},{},t);for(var i in r)n.instance[i]=r[i]}))}function s(e,n){return Promise.resolve().then((function(){n.instance.$destroy(),n.instance.$el.innerHTML="",delete n.instance,n.domEl&&(n.domEl.innerHTML="",delete n.domEl)}))}return function(n){if("object"!==e(n))throw new Error("single-spa-vue requires a configuration object");var t=o({},i,{},n);if(!t.Vue)throw new Error("single-spa-vuejs must be passed opts.Vue");if(!t.appOptions)throw new Error("single-spa-vuejs must be passed opts.appOptions");var r={};return{bootstrap:a.bind(null,t,r),mount:u.bind(null,t,r),unmount:s.bind(null,t,r),update:c.bind(null,t,r)}}}));
+//# sourceMappingURL=single-spa-vue.js.map

package.json

 {
   "name": "single-spa-vue",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "a single-spa plugin for vue.js applications",
@@ -8,5 +8,12 @@ "main": "lib/single-spa-vue.js",
     "prepublishOnly": "yarn build",
-    "build": "rimraf lib && babel src --out-dir lib --source-maps --ignore '**/*.test.js'",
-    "test": "jest"
+    "build": "rimraf lib && rollup -c",
+    "test": "jest",
+    "prettier": "prettier --write './**'",
+    "lint": "eslint src"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged && concurrently -n yarn:test yarn:lint"
+    }
+  },
   "repository": {
@@ -37,11 +44,24 @@ "type": "git",
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-transform-modules-umd": "^7.2.0",
-    "@babel/preset-env": "^7.5.5",
-    "@types/jest": "^24.0.15",
-    "babel-jest": "^24.8.0",
-    "jest": "^24.8.0",
-    "rimraf": "^2.6.3"
+    "@babel/core": "^7.7.7",
+    "@babel/preset-env": "^7.7.7",
+    "@rollup/plugin-commonjs": "^11.0.1",
+    "@rollup/plugin-node-resolve": "^7.0.0",
+    "@types/jest": "^24.0.25",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^25.0.0",
+    "concurrently": "^5.0.2",
+    "css.escape": "^1.5.1",
+    "eslint": "^6.8.0",
+    "eslint-config-important-stuff": "^1.1.0",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "husky": "^4.0.6",
+    "jest": "^24.9.0",
+    "prettier": "^1.19.1",
+    "pretty-quick": "^2.0.1",
+    "rimraf": "^3.0.0",
+    "rollup": "^1.29.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-terser": "^5.1.3"
   }
 }

README.md

 # single-spa-vue
+
 [![Build Status](https://travis-ci.org/CanopyTax/single-spa-vue.svg?branch=master)](https://travis-ci.org/CanopyTax/single-spa-vue)
@@ -3,0 +4,0 @@

src/single-spa-vue.js

@@ -0,1 +1,3 @@
+import "css.escape";
+
 const defaultOpts = {
@@ -5,7 +7,7 @@ // required opts
   appOptions: null,
-  template: null,
-}
+  template: null
+};
 
 export default function singleSpaVue(userOpts) {
-  if (typeof userOpts !== 'object') {
+  if (typeof userOpts !== "object") {
     throw new Error(`single-spa-vue requires a configuration object`);
@@ -16,11 +18,11 @@ }
     ...defaultOpts,
-    ...userOpts,
+    ...userOpts
   };
 
   if (!opts.Vue) {
-    throw new Error('single-spa-vuejs must be passed opts.Vue');
+    throw new Error("single-spa-vuejs must be passed opts.Vue");
   }
 
   if (!opts.appOptions) {
-    throw new Error('single-spa-vuejs must be passed opts.appOptions');
+    throw new Error("single-spa-vuejs must be passed opts.appOptions");
   }
@@ -35,3 +37,3 @@
     unmount: unmount.bind(null, opts, mountedInstances),
-    update: update.bind(null, opts, mountedInstances),
+    update: update.bind(null, opts, mountedInstances)
   };
@@ -42,3 +44,3 @@ }
   if (opts.loadRootComponent) {
-    return opts.loadRootComponent().then(root => opts.rootComponent = root)
+    return opts.loadRootComponent().then(root => (opts.rootComponent = root));
   } else {
@@ -50,48 +52,48 @@ return Promise.resolve();
 function mount(opts, mountedInstances, props) {
-  return Promise
-    .resolve()
-    .then(() => {
-      const appOptions = {...opts.appOptions}
-      if (props.domElement && !appOptions.el) {
-        appOptions.el = props.domElement;
+  return Promise.resolve().then(() => {
+    const appOptions = { ...opts.appOptions };
+    if (props.domElement && !appOptions.el) {
+      appOptions.el = props.domElement;
+    }
+
+    if (!appOptions.el) {
+      const htmlId = `single-spa-application:${props.name}`;
+      appOptions.el = `#${CSS.escape(htmlId)} .single-spa-container`;
+      let domEl = document.getElementById(htmlId);
+      if (!domEl) {
+        domEl = document.createElement("div");
+        domEl.id = htmlId;
+        document.body.appendChild(domEl);
       }
 
-      if (!appOptions.el) {
-        const htmlId = `single-spa-application:${props.name}`
-        appOptions.el = `#${htmlId.replace(':', '\\:')} .single-spa-container`
-        let domEl = document.getElementById(htmlId)
-        if (!domEl) {
-          domEl = document.createElement('div')
-          domEl.id = htmlId
-          document.body.appendChild(domEl)
-        }
+      // single-spa-vue@>=2 always REPLACES the `el` instead of appending to it.
+      // We want domEl to stick around and not be replaced. So we tell Vue to mount
+      // into a container div inside of the main domEl
+      if (!domEl.querySelector(".single-spa-container")) {
+        const singleSpaContainer = document.createElement("div");
+        singleSpaContainer.className = "single-spa-container";
+        domEl.appendChild(singleSpaContainer);
+      }
 
-        // single-spa-vue@>=2 always REPLACES the `el` instead of appending to it.
-        // We want domEl to stick around and not be replaced. So we tell Vue to mount
-        // into a container div inside of the main domEl
-        if (!domEl.querySelector('.single-spa-container')) {
-          const singleSpaContainer = document.createElement('div')
-          singleSpaContainer.className = 'single-spa-container'
-          domEl.appendChild(singleSpaContainer)
-        }
+      mountedInstances.domEl = domEl;
+    }
 
-        mountedInstances.domEl = domEl
-      }
+    if (!appOptions.render && !appOptions.template && opts.rootComponent) {
+      appOptions.render = h => h(opts.rootComponent);
+    }
 
-      if (!appOptions.render && !appOptions.template && opts.rootComponent) {
-        appOptions.render = (h) => h(opts.rootComponent)
-      }
+    if (!appOptions.data) {
+      appOptions.data = {};
+    }
 
-      if (!appOptions.data) {
-        appOptions.data = {}
-      }
+    appOptions.data = { ...appOptions.data, ...props };
 
-      appOptions.data = {...appOptions.data, ...props}
-
-      mountedInstances.instance = new opts.Vue(appOptions);
-      if (mountedInstances.instance.bind) {
-        mountedInstances.instance = mountedInstances.instance.bind(mountedInstances.instance);
-      }
-      return mountedInstances.instance;
-    })
+    mountedInstances.instance = new opts.Vue(appOptions);
+    if (mountedInstances.instance.bind) {
+      mountedInstances.instance = mountedInstances.instance.bind(
+        mountedInstances.instance
+      );
+    }
+    return mountedInstances.instance;
+  });
 }
@@ -103,3 +105,3 @@
       ...(opts.appOptions.data || {}),
-      ...props,
+      ...props
     };
@@ -109,18 +111,16 @@ for (let prop in data) {
     }
-  })
+  });
 }
 
 function unmount(opts, mountedInstances) {
-  return Promise
-    .resolve()
-    .then(() => {
-      mountedInstances.instance.$destroy();
-      mountedInstances.instance.$el.innerHTML = '';
-      delete mountedInstances.instance;
+  return Promise.resolve().then(() => {
+    mountedInstances.instance.$destroy();
+    mountedInstances.instance.$el.innerHTML = "";
+    delete mountedInstances.instance;
 
-      if (mountedInstances.domEl) {
-        mountedInstances.domEl.innerHTML = ''
-        delete mountedInstances.domEl
-      }
-    })
+    if (mountedInstances.domEl) {
+      mountedInstances.domEl.innerHTML = "";
+      delete mountedInstances.domEl;
+    }
+  });
 }

src/single-spa-vue.test.js

@@ -1,27 +0,27 @@
-import singleSpaVue from './single-spa-vue'
+import singleSpaVue from "./single-spa-vue";
 
-const domElId = `single-spa-application:test-app`
-const cssSelector = `#single-spa-application\\:test-app`
+const domElId = `single-spa-application:test-app`;
+const cssSelector = `#single-spa-application\\:test-app`;
 
-describe('single-spa-vue', () => {
-  let Vue, props, $destroy
+describe("single-spa-vue", () => {
+  let Vue, props, $destroy;
 
   beforeEach(() => {
-    Vue = jest.fn()
+    Vue = jest.fn();
 
     Vue.mockImplementation(function() {
-      this.$destroy = $destroy
-      this.$el = {innerHTML: ''}
-    })
+      this.$destroy = $destroy;
+      this.$el = { innerHTML: "" };
+    });
 
-    props = {name: 'test-app'}
+    props = { name: "test-app" };
 
-    $destroy = jest.fn()
-  })
+    $destroy = jest.fn();
+  });
 
   afterEach(() => {
     document.querySelectorAll(cssSelector).forEach(node => {
-      node.remove()
-    })
-  })
+      node.remove();
+    });
+  });
 
@@ -31,18 +31,21 @@ it(`calls new Vue() during mount and mountedInstances.instance.$destroy() on unmount`, () => {
       Vue,
-      appOptions: {
-      },
-    })
+      appOptions: {}
+    });
 
-    return lifecycles.bootstrap(props).then(() => {
-      expect(Vue).not.toHaveBeenCalled()
-      expect($destroy).not.toHaveBeenCalled()
-      return lifecycles.mount(props)
-    }).then(() => {
-      expect(Vue).toHaveBeenCalled()
-      expect($destroy).not.toHaveBeenCalled()
-      return lifecycles.unmount(props)
-    }).then(() => {
-      expect($destroy).toHaveBeenCalled()
-    })
-  })
+    return lifecycles
+      .bootstrap(props)
+      .then(() => {
+        expect(Vue).not.toHaveBeenCalled();
+        expect($destroy).not.toHaveBeenCalled();
+        return lifecycles.mount(props);
+      })
+      .then(() => {
+        expect(Vue).toHaveBeenCalled();
+        expect($destroy).not.toHaveBeenCalled();
+        return lifecycles.unmount(props);
+      })
+      .then(() => {
+        expect($destroy).toHaveBeenCalled();
+      });
+  });
 
@@ -52,12 +55,14 @@ it(`creates a dom element container for you if you don't provide one`, () => {
       Vue,
-      appOptions: {
-      },
-    })
+      appOptions: {}
+    });
 
-    expect(document.getElementById(domElId)).toBe(null)
+    expect(document.getElementById(domElId)).toBe(null);
 
-    return lifecycles.bootstrap(props).then(() => lifecycles.mount(props)).then(() => {
-      expect(document.getElementById(domElId)).toBeTruthy()
-    })
-  })
+    return lifecycles
+      .bootstrap(props)
+      .then(() => lifecycles.mount(props))
+      .then(() => {
+        expect(document.getElementById(domElId)).toBeTruthy();
+      });
+  });
 
@@ -67,42 +72,49 @@ it(`reuses the default dom element container on the second mount`, () => {
       Vue,
-      appOptions: {
-      },
-    })
+      appOptions: {}
+    });
 
-    expect(document.querySelectorAll(cssSelector).length).toBe(0)
+    expect(document.querySelectorAll(cssSelector).length).toBe(0);
 
-    let firstEl
+    let firstEl;
 
-    return lifecycles.bootstrap(props).then(() => lifecycles.mount(props)).then(() => {
-      expect(document.querySelectorAll(cssSelector).length).toBe(1)
-      firstEl = Vue.mock.calls[0].el
-      return lifecycles.unmount(props)
-    }).then(() => {
-      expect(document.querySelectorAll(cssSelector).length).toBe(1)
-      Vue.mockReset()
-      return lifecycles.mount(props)
-    }).then(() => {
-      expect(document.querySelectorAll(cssSelector).length).toBe(1)
-      let secondEl = Vue.mock.calls[0].el
-      expect(firstEl).toBe(secondEl)
-    })
-  })
+    return lifecycles
+      .bootstrap(props)
+      .then(() => lifecycles.mount(props))
+      .then(() => {
+        expect(document.querySelectorAll(cssSelector).length).toBe(1);
+        firstEl = Vue.mock.calls[0].el;
+        return lifecycles.unmount(props);
+      })
+      .then(() => {
+        expect(document.querySelectorAll(cssSelector).length).toBe(1);
+        Vue.mockReset();
+        return lifecycles.mount(props);
+      })
+      .then(() => {
+        expect(document.querySelectorAll(cssSelector).length).toBe(1);
+        let secondEl = Vue.mock.calls[0].el;
+        expect(firstEl).toBe(secondEl);
+      });
+  });
 
   it(`passes appOptions straight through to Vue`, () => {
     const appOptions = {
-      el: document.createElement('div'),
-      something: 'random',
-    }
+      el: document.createElement("div"),
+      something: "random"
+    };
     const lifecycles = new singleSpaVue({
       Vue,
-      appOptions,
-    })
+      appOptions
+    });
 
-    return lifecycles.bootstrap(props).then(() => lifecycles.mount(props)).then(() => {
-      expect(Vue).toHaveBeenCalled()
-      expect(Vue.mock.calls[0][0].el).toBeTruthy()
-      expect(Vue.mock.calls[0][0].something).toBeTruthy()
-      return lifecycles.unmount(props)
-    })
-  })
+    return lifecycles
+      .bootstrap(props)
+      .then(() => lifecycles.mount(props))
+      .then(() => {
+        expect(Vue).toHaveBeenCalled();
+        expect(Vue.mock.calls[0][0].el).toBeTruthy();
+        expect(Vue.mock.calls[0][0].something).toBeTruthy();
+        return lifecycles.unmount(props);
+      });
+  });
 
@@ -113,34 +125,40 @@ it(`implements a render function for you if you provide loadRootComponent`, () => {
       appOptions: {},
-      loadRootComponent: jest.fn(),
-    }
+      loadRootComponent: jest.fn()
+    };
 
-    opts.loadRootComponent.mockReturnValue(Promise.resolve({}))
+    opts.loadRootComponent.mockReturnValue(Promise.resolve({}));
 
-    const lifecycles = new singleSpaVue(opts)
+    const lifecycles = new singleSpaVue(opts);
 
-    return lifecycles.bootstrap(props).then(() => {
-      expect(opts.loadRootComponent).toHaveBeenCalled()
-      return lifecycles.mount(props)
-    }).then(() => {
-      expect(Vue.mock.calls[0][0].render).toBeDefined()
-      return lifecycles.unmount(props)
-    })
-  })
+    return lifecycles
+      .bootstrap(props)
+      .then(() => {
+        expect(opts.loadRootComponent).toHaveBeenCalled();
+        return lifecycles.mount(props);
+      })
+      .then(() => {
+        expect(Vue.mock.calls[0][0].render).toBeDefined();
+        return lifecycles.unmount(props);
+      });
+  });
 
   it(`adds the single-spa props as data to the root component`, () => {
-    props.someCustomThing = 'hi'
+    props.someCustomThing = "hi";
 
     const lifecycles = new singleSpaVue({
       Vue,
-      appOptions: {},
-    })
+      appOptions: {}
+    });
 
-    return lifecycles.bootstrap(props).then(() => lifecycles.mount(props)).then(() => {
-      expect(Vue).toHaveBeenCalled()
-      expect(Vue.mock.calls[0][0].data).toBeTruthy()
-      expect(Vue.mock.calls[0][0].data.name).toBe('test-app')
-      expect(Vue.mock.calls[0][0].data.someCustomThing).toBe('hi')
-      return lifecycles.unmount(props)
-    })
-  })
+    return lifecycles
+      .bootstrap(props)
+      .then(() => lifecycles.mount(props))
+      .then(() => {
+        expect(Vue).toHaveBeenCalled();
+        expect(Vue.mock.calls[0][0].data).toBeTruthy();
+        expect(Vue.mock.calls[0][0].data.name).toBe("test-app");
+        expect(Vue.mock.calls[0][0].data.someCustomThing).toBe("hi");
+        return lifecycles.unmount(props);
+      });
+  });
 
@@ -150,11 +168,16 @@ it(`mounts into the single-spa-container div if you don't provide an 'el' in appOptions`, () => {
       Vue,
-      appOptions: {},
-    })
+      appOptions: {}
+    });
 
-    return lifecycles.bootstrap(props).then(() => lifecycles.mount(props)).then(() => {
-      expect(Vue).toHaveBeenCalled()
-      expect(Vue.mock.calls[0][0].el).toBe(cssSelector + " .single-spa-container")
-      return lifecycles.unmount(props)
-    })
-  })
+    return lifecycles
+      .bootstrap(props)
+      .then(() => lifecycles.mount(props))
+      .then(() => {
+        expect(Vue).toHaveBeenCalled();
+        expect(Vue.mock.calls[0][0].el).toBe(
+          cssSelector + " .single-spa-container"
+        );
+        return lifecycles.unmount(props);
+      });
+  });
 
@@ -164,11 +187,16 @@ it(`mounts will return promise with vue instance`, () => {
       Vue,
-      appOptions: {},
-    })
-    return lifecycles.bootstrap(props).then(() => lifecycles.mount(props).then((instance) => {
-      expect(Vue).toHaveBeenCalled()
-      expect(instance instanceof Vue).toBeTruthy()
-    })).then(() => {
-      return lifecycles.unmount(props)
-    })
-  }) 
-})
+      appOptions: {}
+    });
+    return lifecycles
+      .bootstrap(props)
+      .then(() =>
+        lifecycles.mount(props).then(instance => {
+          expect(Vue).toHaveBeenCalled();
+          expect(instance instanceof Vue).toBeTruthy();
+        })
+      )
+      .then(() => {
+        return lifecycles.unmount(props);
+      });
+  });
+});

types/single-spa-vue.d.ts

 declare module "single-spa-vue" {
-  export default function singleSpaVue(opts: SingleSpaVueOpts): SingleSpaVueLifecycles;
+  export default function singleSpaVue(
+    opts: SingleSpaVueOpts
+  ): SingleSpaVueLifecycles;
 
@@ -9,3 +11,3 @@ type SingleSpaVueOpts = {
     loadRootComponent?(): Promise<any>;
-  }
+  };
 
@@ -17,5 +19,5 @@ type SingleSpaVueLifecycles = {
     update(singleSpaProps: SingleSpaProps): Promise<any>;
-  }
+  };
 
   type SingleSpaProps = object;
-}
+}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25689

increased by5.79%

Number of lines in readme file

8

increased by14.29%

Worsened metrics

Dev dependency count

21

increased by162.5%

Lines of code

301

decreased by-19.52%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes