vue-resize - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0-alpha.1

build/rollup.config.base.js

@@ -46,3 +46,5 @@ import { babel } from '@rollup/plugin-babel'
   },
-  external: [],
+	external: [
+		'vue',
+	],
 }

build/rollup.config.browser.js

@@ -11,2 +11,5 @@ import base from './rollup.config.base'
     sourcemap: true,
+		globals: {
+			vue: 'Vue',
+		},
   },
@@ -13,0 +16,0 @@ })

dist/vue-resize.esm.js

@@ -0,1 +1,3 @@
+import { nextTick, pushScopeId, popScopeId, openBlock, createBlock, withScopeId } from 'vue';
+
 function getInternetExplorerVersion() {
@@ -29,4 +31,2 @@ var ua = window.navigator.userAgent;
 
-//
-
 let isIE;
@@ -61,5 +61,9 @@
 
+  emits: [
+    'notify',
+  ],
+
   mounted () {
     initCompat();
-    this.$nextTick(() => {
+    nextTick(() => {
       this._w = this.$el.offsetWidth;
@@ -86,3 +90,3 @@ this._h = this.$el.offsetHeight;
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.removeResizeHandlers();
@@ -125,133 +129,23 @@ },
 
-function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
-/* server only */
-, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-  if (typeof shadowMode !== 'boolean') {
-    createInjectorSSR = createInjector;
-    createInjector = shadowMode;
-    shadowMode = false;
-  } // Vue.extend constructor export interop.
+const _withId = /*#__PURE__*/withScopeId("data-v-b329ee4c");
 
-
-  var options = typeof script === 'function' ? script.options : script; // render functions
-
-  if (template && template.render) {
-    options.render = template.render;
-    options.staticRenderFns = template.staticRenderFns;
-    options._compiled = true; // functional template
-
-    if (isFunctionalTemplate) {
-      options.functional = true;
-    }
-  } // scopedId
-
-
-  if (scopeId) {
-    options._scopeId = scopeId;
-  }
-
-  var hook;
-
-  if (moduleIdentifier) {
-    // server build
-    hook = function hook(context) {
-      // 2.3 injection
-      context = context || // cached call
-      this.$vnode && this.$vnode.ssrContext || // stateful
-      this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
-      // 2.2 with runInNewContext: true
-
-      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-        context = __VUE_SSR_CONTEXT__;
-      } // inject component styles
-
-
-      if (style) {
-        style.call(this, createInjectorSSR(context));
-      } // register component module identifier for async chunk inference
-
-
-      if (context && context._registeredComponents) {
-        context._registeredComponents.add(moduleIdentifier);
-      }
-    }; // used by ssr in case component is cached and beforeCreate
-    // never gets called
-
-
-    options._ssrRegister = hook;
-  } else if (style) {
-    hook = shadowMode ? function (context) {
-      style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
-    } : function (context) {
-      style.call(this, createInjector(context));
-    };
-  }
-
-  if (hook) {
-    if (options.functional) {
-      // register for functional component in vue file
-      var originalRender = options.render;
-
-      options.render = function renderWithStyleInjection(h, context) {
-        hook.call(context);
-        return originalRender(h, context);
-      };
-    } else {
-      // inject component registration as beforeCreate hook
-      var existing = options.beforeCreate;
-      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-    }
-  }
-
-  return script;
-}
-
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    staticClass: "resize-observer",
-    attrs: { tabindex: "-1" }
-  })
+pushScopeId("data-v-b329ee4c");
+const _hoisted_1 = {
+  class: "resize-observer",
+  tabindex: "-1"
 };
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+popScopeId();
 
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-8859cc6c";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
+const render = /*#__PURE__*/_withId((_ctx, _cache, $props, $setup, $data, $options) => {
+  return (openBlock(), createBlock("div", _hoisted_1))
+});
 
-  
-  const __vue_component__ = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
+script.render = render;
+script.__scopeId = "data-v-b329ee4c";
+script.__file = "src/components/ResizeObserver.vue";
 
-function install(Vue) {
+function install(app) {
   // eslint-disable-next-line vue/component-definition-name-casing
-  Vue.component('resize-observer', __vue_component__);
-  Vue.component('ResizeObserver', __vue_component__);
+  app.component('resize-observer', script);
+  app.component('ResizeObserver', script);
 }
@@ -261,20 +155,8 @@
   // eslint-disable-next-line no-undef
-  version: "1.0.0",
+  version: "2.0.0-alpha.1",
   install: install
 };
 
-var GlobalVue = null;
-
-if (typeof window !== 'undefined') {
-  GlobalVue = window.Vue;
-} else if (typeof global !== 'undefined') {
-  GlobalVue = global.Vue;
-}
-
-if (GlobalVue) {
-  GlobalVue.use(plugin);
-}
-
 export default plugin;
-export { __vue_component__ as ResizeObserver, install };
+export { script as ResizeObserver, install };
 //# sourceMappingURL=vue-resize.esm.js.map

dist/vue-resize.min.js

@@ -1,2 +0,2 @@
-var VueResize=function(e){"use strict";let t;function i(){i.init||(i.init=!0,t=-1!==function(){var e=window.navigator.userAgent,t=e.indexOf("MSIE ");if(t>0)return parseInt(e.substring(t+5,e.indexOf(".",t)),10);if(e.indexOf("Trident/")>0){var i=e.indexOf("rv:");return parseInt(e.substring(i+3,e.indexOf(".",i)),10)}var n=e.indexOf("Edge/");return n>0?parseInt(e.substring(n+5,e.indexOf(".",n)),10):-1}())}function n(e,t,i,n,s,r,o,d,a,h){"boolean"!=typeof o&&(a=d,d=o,o=!1);var l,c="function"==typeof i?i.options:i;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,s&&(c.functional=!0)),n&&(c._scopeId=n),r?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,a(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},c._ssrRegister=l):t&&(l=o?function(e){t.call(this,h(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,d(e))}),l)if(c.functional){var f=c.render;c.render=function(e,t){return l.call(t),f(e,t)}}else{var u=c.beforeCreate;c.beforeCreate=u?[].concat(u,l):[l]}return i}const s={name:"ResizeObserver",props:{emitOnMount:{type:Boolean,default:!1},ignoreWidth:{type:Boolean,default:!1},ignoreHeight:{type:Boolean,default:!1}},mounted(){i(),this.$nextTick(()=>{this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.emitOnMount&&this.emitSize()});const e=document.createElement("object");this._resizeObject=e,e.setAttribute("aria-hidden","true"),e.setAttribute("tabindex",-1),e.onload=this.addResizeHandlers,e.type="text/html",t&&this.$el.appendChild(e),e.data="about:blank",t||this.$el.appendChild(e)},beforeDestroy(){this.removeResizeHandlers()},methods:{compareAndNotify(){(!this.ignoreWidth&&this._w!==this.$el.offsetWidth||!this.ignoreHeight&&this._h!==this.$el.offsetHeight)&&(this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.emitSize())},emitSize(){this.$emit("notify",{width:this._w,height:this._h})},addResizeHandlers(){this._resizeObject.contentDocument.defaultView.addEventListener("resize",this.compareAndNotify),this.compareAndNotify()},removeResizeHandlers(){this._resizeObject&&this._resizeObject.onload&&(!t&&this._resizeObject.contentDocument&&this._resizeObject.contentDocument.defaultView.removeEventListener("resize",this.compareAndNotify),this.$el.removeChild(this._resizeObject),this._resizeObject.onload=null,this._resizeObject=null)}}};var r=function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"resize-observer",attrs:{tabindex:"-1"}})};r._withStripped=!0;const o=n({render:r,staticRenderFns:[]},void 0,s,"data-v-8859cc6c",!1,void 0,!1,void 0,void 0,void 0);function d(e){e.component("resize-observer",o),e.component("ResizeObserver",o)}var a={version:"1.0.0",install:d},h=null;return"undefined"!=typeof window?h=window.Vue:"undefined"!=typeof global&&(h=global.Vue),h&&h.use(a),e.ResizeObserver=o,e.default=a,e.install=d,Object.defineProperty(e,"__esModule",{value:!0}),e}({});
+var VueResize=function(e,t){"use strict";let i;function s(){s.init||(s.init=!0,i=-1!==function(){var e=window.navigator.userAgent,t=e.indexOf("MSIE ");if(t>0)return parseInt(e.substring(t+5,e.indexOf(".",t)),10);if(e.indexOf("Trident/")>0){var i=e.indexOf("rv:");return parseInt(e.substring(i+3,e.indexOf(".",i)),10)}var s=e.indexOf("Edge/");return s>0?parseInt(e.substring(s+5,e.indexOf(".",s)),10):-1}())}var n={name:"ResizeObserver",props:{emitOnMount:{type:Boolean,default:!1},ignoreWidth:{type:Boolean,default:!1},ignoreHeight:{type:Boolean,default:!1}},emits:["notify"],mounted(){s(),t.nextTick(()=>{this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.emitOnMount&&this.emitSize()});const e=document.createElement("object");this._resizeObject=e,e.setAttribute("aria-hidden","true"),e.setAttribute("tabindex",-1),e.onload=this.addResizeHandlers,e.type="text/html",i&&this.$el.appendChild(e),e.data="about:blank",i||this.$el.appendChild(e)},beforeUnmount(){this.removeResizeHandlers()},methods:{compareAndNotify(){(!this.ignoreWidth&&this._w!==this.$el.offsetWidth||!this.ignoreHeight&&this._h!==this.$el.offsetHeight)&&(this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.emitSize())},emitSize(){this.$emit("notify",{width:this._w,height:this._h})},addResizeHandlers(){this._resizeObject.contentDocument.defaultView.addEventListener("resize",this.compareAndNotify),this.compareAndNotify()},removeResizeHandlers(){this._resizeObject&&this._resizeObject.onload&&(!i&&this._resizeObject.contentDocument&&this._resizeObject.contentDocument.defaultView.removeEventListener("resize",this.compareAndNotify),this.$el.removeChild(this._resizeObject),this._resizeObject.onload=null,this._resizeObject=null)}}};const r=t.withScopeId("data-v-b329ee4c");t.pushScopeId("data-v-b329ee4c");const o={class:"resize-observer",tabindex:"-1"};t.popScopeId();const d=r((e,i,s,n,r,d)=>(t.openBlock(),t.createBlock("div",o)));function h(e){e.component("resize-observer",n),e.component("ResizeObserver",n)}n.render=d,n.__scopeId="data-v-b329ee4c",n.__file="src/components/ResizeObserver.vue";var a={version:"2.0.0-alpha.1",install:h};return e.ResizeObserver=n,e.default=a,e.install=h,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);
 //# sourceMappingURL=vue-resize.min.js.map

dist/vue-resize.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['vue-resize'] = {}));
-}(this, (function (exports) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['vue-resize'] = {}, global.vue));
+}(this, (function (exports, vue) { 'use strict';
 
@@ -35,4 +35,2 @@ function getInternetExplorerVersion() {
 
-  //
-
   let isIE;
@@ -67,5 +65,9 @@
 
+    emits: [
+      'notify',
+    ],
+
     mounted () {
       initCompat();
-      this.$nextTick(() => {
+      vue.nextTick(() => {
         this._w = this.$el.offsetWidth;
@@ -92,3 +94,3 @@ this._h = this.$el.offsetHeight;
 
-    beforeDestroy () {
+    beforeUnmount () {
       this.removeResizeHandlers();
@@ -131,133 +133,23 @@ },
 
-  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
-  /* server only */
-  , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-    if (typeof shadowMode !== 'boolean') {
-      createInjectorSSR = createInjector;
-      createInjector = shadowMode;
-      shadowMode = false;
-    } // Vue.extend constructor export interop.
+  const _withId = /*#__PURE__*/vue.withScopeId("data-v-b329ee4c");
 
-
-    var options = typeof script === 'function' ? script.options : script; // render functions
-
-    if (template && template.render) {
-      options.render = template.render;
-      options.staticRenderFns = template.staticRenderFns;
-      options._compiled = true; // functional template
-
-      if (isFunctionalTemplate) {
-        options.functional = true;
-      }
-    } // scopedId
-
-
-    if (scopeId) {
-      options._scopeId = scopeId;
-    }
-
-    var hook;
-
-    if (moduleIdentifier) {
-      // server build
-      hook = function hook(context) {
-        // 2.3 injection
-        context = context || // cached call
-        this.$vnode && this.$vnode.ssrContext || // stateful
-        this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
-        // 2.2 with runInNewContext: true
-
-        if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-          context = __VUE_SSR_CONTEXT__;
-        } // inject component styles
-
-
-        if (style) {
-          style.call(this, createInjectorSSR(context));
-        } // register component module identifier for async chunk inference
-
-
-        if (context && context._registeredComponents) {
-          context._registeredComponents.add(moduleIdentifier);
-        }
-      }; // used by ssr in case component is cached and beforeCreate
-      // never gets called
-
-
-      options._ssrRegister = hook;
-    } else if (style) {
-      hook = shadowMode ? function (context) {
-        style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
-      } : function (context) {
-        style.call(this, createInjector(context));
-      };
-    }
-
-    if (hook) {
-      if (options.functional) {
-        // register for functional component in vue file
-        var originalRender = options.render;
-
-        options.render = function renderWithStyleInjection(h, context) {
-          hook.call(context);
-          return originalRender(h, context);
-        };
-      } else {
-        // inject component registration as beforeCreate hook
-        var existing = options.beforeCreate;
-        options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-      }
-    }
-
-    return script;
-  }
-
-  /* script */
-  const __vue_script__ = script;
-  /* template */
-  var __vue_render__ = function() {
-    var _vm = this;
-    var _h = _vm.$createElement;
-    var _c = _vm._self._c || _h;
-    return _c("div", {
-      staticClass: "resize-observer",
-      attrs: { tabindex: "-1" }
-    })
+  vue.pushScopeId("data-v-b329ee4c");
+  const _hoisted_1 = {
+    class: "resize-observer",
+    tabindex: "-1"
   };
-  var __vue_staticRenderFns__ = [];
-  __vue_render__._withStripped = true;
+  vue.popScopeId();
 
-    /* style */
-    const __vue_inject_styles__ = undefined;
-    /* scoped */
-    const __vue_scope_id__ = "data-v-8859cc6c";
-    /* module identifier */
-    const __vue_module_identifier__ = undefined;
-    /* functional template */
-    const __vue_is_functional_template__ = false;
-    /* style inject */
-    
-    /* style inject SSR */
-    
-    /* style inject shadow dom */
-    
+  const render = /*#__PURE__*/_withId((_ctx, _cache, $props, $setup, $data, $options) => {
+    return (vue.openBlock(), vue.createBlock("div", _hoisted_1))
+  });
 
-    
-    const __vue_component__ = /*#__PURE__*/normalizeComponent(
-      { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-      __vue_inject_styles__,
-      __vue_script__,
-      __vue_scope_id__,
-      __vue_is_functional_template__,
-      __vue_module_identifier__,
-      false,
-      undefined,
-      undefined,
-      undefined
-    );
+  script.render = render;
+  script.__scopeId = "data-v-b329ee4c";
+  script.__file = "src/components/ResizeObserver.vue";
 
-  function install(Vue) {
+  function install(app) {
     // eslint-disable-next-line vue/component-definition-name-casing
-    Vue.component('resize-observer', __vue_component__);
-    Vue.component('ResizeObserver', __vue_component__);
+    app.component('resize-observer', script);
+    app.component('ResizeObserver', script);
   }
@@ -267,19 +159,7 @@
     // eslint-disable-next-line no-undef
-    version: "1.0.0",
+    version: "2.0.0-alpha.1",
     install: install
   };
 
-  var GlobalVue = null;
-
-  if (typeof window !== 'undefined') {
-    GlobalVue = window.Vue;
-  } else if (typeof global !== 'undefined') {
-    GlobalVue = global.Vue;
-  }
-
-  if (GlobalVue) {
-    GlobalVue.use(plugin);
-  }
-
-  exports.ResizeObserver = __vue_component__;
+  exports.ResizeObserver = script;
   exports.default = plugin;
@@ -286,0 +166,0 @@ exports.install = install;

package.json

 {
   "name": "vue-resize",
   "description": "Detects DOM element resizing",
-  "version": "1.0.0",
+  "version": "2.0.0-alpha.1",
   "author": {
@@ -48,2 +48,3 @@ "name": "Guillaume Chau",
     "@rollup/plugin-replace": "^2.3.1",
+    "@vue/compiler-sfc": "^3.0.2",
     "autoprefixer": "^9.7.5",
@@ -66,8 +67,7 @@ "babel-eslint": "^10.1.0",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-vue": "^5.1.6",
-    "vue": "^2.6.11",
-    "vue-template-compiler": "^2.6.11"
+    "rollup-plugin-vue": "^6.0.0",
+    "vue": "^3.0.0"
   },
   "peerDependencies": {
-    "vue": "^2.6.0"
+    "vue": "^3.0.0"
   },
@@ -74,0 +74,0 @@ "browserslist": [

README.md

@@ -8,3 +8,3 @@ # vue-resize
 
-[Demo](https://akryum.github.io/vue-resize/) - [JSFiddle](https://jsfiddle.net/Akryum/zqygwf3r/)
+[JSFiddle](https://jsfiddle.net/Akryum/zqygwf3r/)
 
@@ -40,6 +40,5 @@ <p>
 ```javascript
-import Vue from 'vue'
 import VueResize from 'vue-resize'
 
-Vue.use(VueResize)
+app.use(VueResize)
 ```
@@ -50,6 +49,5 @@
 ```javascript
-import Vue from 'vue'
 import { ResizeObserver } from 'vue-resize'
 
-Vue.component('resize-observer', ResizeObserver)
+app.component('resize-observer', ResizeObserver)
 ```
@@ -66,6 +64,4 @@
 
-The plugin should be auto-installed. If not, you can install it manually:
-
 ```javascript
-Vue.use(VueResize)
+app.use(VueResize)
 ```
@@ -76,3 +72,3 @@
 ```javascript
-Vue.component('resize-observer', VueResize.ResizeObserver)
+app.component('resize-observer', VueResize.ResizeObserver)
 ```
@@ -79,0 +75,0 @@

src/index.js

 import ResizeObserver from './components/ResizeObserver.vue'
 
 // Install the components
-export function install (Vue) {
+export function install (app) {
   // eslint-disable-next-line vue/component-definition-name-casing
-  Vue.component('resize-observer', ResizeObserver)
-  Vue.component('ResizeObserver', ResizeObserver)
+  app.component('resize-observer', ResizeObserver)
+  app.component('ResizeObserver', ResizeObserver)
 }
@@ -22,12 +22,1 @@
 export default plugin
-
-// Auto-install
-let GlobalVue = null
-if (typeof window !== 'undefined') {
-  GlobalVue = window.Vue
-} else if (typeof global !== 'undefined') {
-  GlobalVue = global.Vue
-}
-if (GlobalVue) {
-  GlobalVue.use(plugin)
-}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52153

increased by9.41%

Worsened metrics

Lines of code

438

decreased by-31.02%

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

109

decreased by-3.54%

No dependency changes