vue-screen - npm Package Compare versions

Comparing version 2.0.2-alpha.3 to 2.0.3-alpha.3

dist/index.d.ts

 import { useScreen } from './useScreen';
 import { useGrid } from './useGrid';
+import { plugin } from './plugin';
 import grids from './grids';
 export { useScreen, useGrid, grids, };
-declare const _default: {
-    install: (app: import("vue").App<any>, options: import("./types").VueScreenConfig) => void;
-};
-export default _default;
+export default plugin;

dist/plugin.d.ts

@@ -1,3 +0,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import { VueScreenConfig } from './types/config';
 export declare const install: (app: App, options: VueScreenConfig) => void;
+export declare const plugin: Plugin;

dist/types/grid.d.ts

@@ -16,1 +16,6 @@ import { GridTypeTailwindName, Tailwind, GridTypeBootstrapName, Bootstrap, GridTypeBulmaName, Bulma, GridTypeFoundationName, Foundation, GridTypeMaterializeName, Materialize, GridTypeSemanticUiName, SemanticUi } from '../grids';
 export declare type GridDefinition = GridDefinitionLiteral | GridDefinitionCustomObject;
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $grid: Readonly<Record<keyof Custom, boolean> & BaseObject<Custom>>;
+    }
+}

dist/types/screen.d.ts

@@ -16,1 +16,6 @@ export interface ScreenObject {
 }
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $screen: Readonly<ScreenObject>;
+    }
+}

dist/vue-screen.cjs.js

@@ -59,14 +59,16 @@ 'use strict';
     if (inBrowser) {
-        window.addEventListener('resize', debounce(updateWindowProperties, debounceDelay));
+        var resizeListener_1 = debounce(updateWindowProperties, debounceDelay);
+        window.addEventListener('resize', resizeListener_1);
         updateWindowProperties();
-        var query = window.matchMedia('(orientation: portrait)');
-        if ('addEventListener' in query) {
-            query.addEventListener('change', updateOrientationPropperties);
+        var query_1 = window.matchMedia('(orientation: portrait)');
+        if ('addEventListener' in query_1) {
+            query_1.addEventListener('change', updateOrientationPropperties);
         }
         else {
+            // https://github.com/reegodev/vue-screen/issues/30
             // query.addListener is not deprecated for iOS 12
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            query.addListener(updateOrientationPropperties);
+            query_1.addListener(updateOrientationPropperties);
         }
-        updateOrientationPropperties(query);
+        updateOrientationPropperties(query_1);
         // This does not react to resize events.
@@ -76,2 +78,18 @@ // You always need to reload the browser to add/remove touch support,
         screen.touch = 'ontouchstart' in window;
+        // Do not leak memory by keeping event listeners active.
+        // This appears to work as expected, using useScreen() inside components
+        // triggers this hook when they are destroyed.
+        // If useScreen() is used outside a component, this hook is never executed.
+        vue.onUnmounted(function () {
+            window.removeEventListener('resize', resizeListener_1);
+            if ('removeEventListener' in query_1) {
+                query_1.removeEventListener('change', updateOrientationPropperties);
+            }
+            else {
+                // https://github.com/reegodev/vue-screen/issues/30
+                // query.removeListener is not deprecated for iOS 12
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                query_1.removeListener(updateOrientationPropperties);
+            }
+        });
     }
@@ -172,2 +190,3 @@ return screen;
         else {
+            // https://github.com/reegodev/vue-screen/issues/30
             // query.addListener is not deprecated for iOS 12
@@ -179,2 +198,17 @@ // eslint-disable-next-line @typescript-eslint/no-explicit-any
         object.breakpoint = getCurrentBreakpoint(object);
+        // Do not leak memory by keeping event listeners active.
+        // This appears to work as expected, using useGrid() inside components
+        // triggers this hook when they are destroyed.
+        // If useGrid() is used outside a component, this hook is never executed.
+        vue.onUnmounted(function () {
+            if ('removeEventListener' in query) {
+                query.removeEventListener('change', onChange);
+            }
+            else {
+                // https://github.com/reegodev/vue-screen/issues/30
+                // query.removeListener is not deprecated for iOS 12
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                query.removeListener(onChange);
+            }
+        });
     });
@@ -217,10 +251,9 @@ };
 };
-
-var index = {
+var plugin = {
     install: install
 };
 
-exports.default = index;
+exports.default = plugin;
 exports.grids = grids;
 exports.useGrid = useGrid;
 exports.useScreen = useScreen;

dist/vue-screen.esm.js

@@ -1,2 +0,2 @@
-import { reactive } from 'vue';
+import { reactive, onUnmounted } from 'vue';
 
@@ -55,14 +55,16 @@ var inBrowser = typeof window !== 'undefined';
     if (inBrowser) {
-        window.addEventListener('resize', debounce(updateWindowProperties, debounceDelay));
+        var resizeListener_1 = debounce(updateWindowProperties, debounceDelay);
+        window.addEventListener('resize', resizeListener_1);
         updateWindowProperties();
-        var query = window.matchMedia('(orientation: portrait)');
-        if ('addEventListener' in query) {
-            query.addEventListener('change', updateOrientationPropperties);
+        var query_1 = window.matchMedia('(orientation: portrait)');
+        if ('addEventListener' in query_1) {
+            query_1.addEventListener('change', updateOrientationPropperties);
         }
         else {
+            // https://github.com/reegodev/vue-screen/issues/30
             // query.addListener is not deprecated for iOS 12
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            query.addListener(updateOrientationPropperties);
+            query_1.addListener(updateOrientationPropperties);
         }
-        updateOrientationPropperties(query);
+        updateOrientationPropperties(query_1);
         // This does not react to resize events.
@@ -72,2 +74,18 @@ // You always need to reload the browser to add/remove touch support,
         screen.touch = 'ontouchstart' in window;
+        // Do not leak memory by keeping event listeners active.
+        // This appears to work as expected, using useScreen() inside components
+        // triggers this hook when they are destroyed.
+        // If useScreen() is used outside a component, this hook is never executed.
+        onUnmounted(function () {
+            window.removeEventListener('resize', resizeListener_1);
+            if ('removeEventListener' in query_1) {
+                query_1.removeEventListener('change', updateOrientationPropperties);
+            }
+            else {
+                // https://github.com/reegodev/vue-screen/issues/30
+                // query.removeListener is not deprecated for iOS 12
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                query_1.removeListener(updateOrientationPropperties);
+            }
+        });
     }
@@ -168,2 +186,3 @@ return screen;
         else {
+            // https://github.com/reegodev/vue-screen/issues/30
             // query.addListener is not deprecated for iOS 12
@@ -175,2 +194,17 @@ // eslint-disable-next-line @typescript-eslint/no-explicit-any
         object.breakpoint = getCurrentBreakpoint(object);
+        // Do not leak memory by keeping event listeners active.
+        // This appears to work as expected, using useGrid() inside components
+        // triggers this hook when they are destroyed.
+        // If useGrid() is used outside a component, this hook is never executed.
+        onUnmounted(function () {
+            if ('removeEventListener' in query) {
+                query.removeEventListener('change', onChange);
+            }
+            else {
+                // https://github.com/reegodev/vue-screen/issues/30
+                // query.removeListener is not deprecated for iOS 12
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                query.removeListener(onChange);
+            }
+        });
     });
@@ -213,8 +247,7 @@ };
 };
-
-var index = {
+var plugin = {
     install: install
 };
 
-export default index;
+export default plugin;
 export { grids, useGrid, useScreen };

package.json

 {
   "name": "vue-screen",
-  "version": "2.0.2-alpha.3",
+  "version": "2.0.3-alpha.3",
   "description": "Reactive screen size and media query states for Vue. Integrates with most UI frameworks out of the box.",
@@ -5,0 +5,0 @@ "main": "dist/vue-screen.cjs.js",

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

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

25594

increased by11.71%

Lines of code

632

increased by10.68%

Worsened metrics

Number of package files

19

decreased by-17.39%

No dependency changes