vooks - npm Package Compare versions

Comparing version 0.0.8 to 0.1.0

es/use-breakpoint.d.ts

 import { ComputedRef } from 'vue';
-import { Breakpoint } from './use-breakpoints';
-export default function useBreakpoint(): ComputedRef<Breakpoint>;
+import { BreakpointOptions, ExtractBreakpoint } from './use-breakpoints';
+export default function useBreakpoint<T extends BreakpointOptions>(screens?: T): ComputedRef<ExtractBreakpoint<BreakpointOptions> | undefined>;

es/use-breakpoint.js

 import { computed } from 'vue';
 import useBreakpoints from './use-breakpoints';
-export default function useBreakpoint() {
-    const breakpointsRef = useBreakpoints();
+export default function useBreakpoint(screens) {
+    const breakpointsRef = useBreakpoints(screens);
     return computed(() => {
@@ -6,0 +6,0 @@ const { value } = breakpointsRef;

es/use-breakpoints.d.ts

 import { ComputedRef } from 'vue';
-export declare type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
-export default function useBreakpoints(): ComputedRef<Breakpoint[]>;
+export interface BreakpointOptions extends Record<string, number> {
+}
+export declare type ExtractBreakpoint<T> = keyof T;
+export declare type ExtractBreakpointStatus<T> = {
+    [k in keyof T]: boolean;
+};
+export declare type BreakpointHandler = {
+    [k in string]: mqlHandler;
+};
+export declare type ExtractMediaQueries<T> = {
+    [key in keyof T]: string;
+};
+declare type mqlHandler = (e: MediaQueryListEvent) => void;
+export default function useBreakpoints<T extends BreakpointOptions>(screens?: T): ComputedRef<Array<ExtractBreakpoint<T>>>;
+export {};

es/use-breakpoints.js

 /* eslint-disable @typescript-eslint/consistent-type-assertions */
 import { ref, computed, onBeforeUnmount } from 'vue';
-const breakpoints = ['xs', 's', 'm', 'l', 'xl'];
-const breakpointStatusRef = ref({});
-const mediaQueries = {
-    xs: '(min-width: 0px)',
-    s: '(min-width: 600px)',
-    m: '(min-width: 1024px)',
-    l: '(min-width: 1440px)',
-    xl: '(min-width: 1920px)'
+const defaultBreakpointOptions = {
+    // mobile
+    // 0 ~ 640 doesn't mean it should display well in all the range,
+    // but means you should treat it like a mobile phone.)
+    xs: 0,
+    s: 640,
+    m: 1024,
+    l: 1280,
+    xl: 1536,
+    xxl: 1920 // normal desktop display
 };
-const handlerMap = Object.fromEntries(breakpoints.map(k => {
-    return [
-        k,
-        (e) => {
-            breakpointStatusRef.value[k] = e.matches;
+function createMediaQuery(screenWidth) {
+    return `(min-width: ${screenWidth}px)`;
+}
+const mqlMap = {};
+export default function useBreakpoints(screens = defaultBreakpointOptions) {
+    const breakpointStatusRef = ref({});
+    const breakpoints = Object.keys(screens);
+    const updateBreakpoints = (e, breakpointName) => {
+        if (e.matches)
+            breakpointStatusRef.value[breakpointName] = true;
+        else
+            breakpointStatusRef.value[breakpointName] = false;
+    };
+    breakpoints.forEach(key => {
+        const breakpointValue = screens[key];
+        let mql;
+        let cbs;
+        if (mqlMap[breakpointValue] === undefined) {
+            mql = window.matchMedia(createMediaQuery(breakpointValue));
+            mql.addEventListener('change', (e) => {
+                cbs.forEach(cb => {
+                    cb(e, key);
+                });
+            });
+            cbs = new Set();
+            mqlMap[breakpointValue] = {
+                mql,
+                cbs
+            };
         }
-    ];
-}));
-const mqlMap = {};
-function init() {
-    breakpointStatusRef.value = Object.entries(mediaQueries).reduce((breakpointStatus, [key, value]) => {
-        const mql = window.matchMedia(value);
-        mqlMap[key] = mql;
-        breakpointStatus[key] = mql.matches;
-        mql.addEventListener('change', handlerMap[key]);
-        return breakpointStatus;
-    }, 
-    // eslint-disable-next-line @typescript-eslint/prefer-reduce-type-parameter
-    {});
-}
-function clear() {
-    breakpoints.forEach((key) => {
-        var _a;
-        (_a = mqlMap[key]) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', handlerMap[key]);
-        mqlMap[key] = undefined;
+        else {
+            mql = mqlMap[breakpointValue].mql;
+            cbs = mqlMap[breakpointValue].cbs;
+        }
+        cbs.add(updateBreakpoints);
+        if (mql.matches) {
+            cbs.forEach(cb => {
+                cb(mql, key);
+            });
+        }
     });
-}
-let usedCount = 0;
-export default function useBreakpoints() {
-    if (usedCount === 0) {
-        usedCount++;
-        init();
-    }
     onBeforeUnmount(() => {
-        usedCount--;
-        if (usedCount === 0) {
-            clear();
-        }
+        breakpoints.forEach(breakpoint => {
+            const { cbs } = mqlMap[screens[breakpoint]];
+            if (cbs.has(updateBreakpoints)) {
+                cbs.delete(updateBreakpoints);
+            }
+        });
     });
     return computed(() => {
         const { value } = breakpointStatusRef;
-        return breakpoints.filter(key => value[key]);
+        return breakpoints.filter((key) => value[key]);
     });
 }

lib/use-breakpoint.d.ts

 import { ComputedRef } from 'vue';
-import { Breakpoint } from './use-breakpoints';
-export default function useBreakpoint(): ComputedRef<Breakpoint>;
+import { BreakpointOptions, ExtractBreakpoint } from './use-breakpoints';
+export default function useBreakpoint<T extends BreakpointOptions>(screens?: T): ComputedRef<ExtractBreakpoint<BreakpointOptions> | undefined>;

lib/use-breakpoint.js

@@ -5,4 +5,4 @@ "use strict";
 const use_breakpoints_1 = require("./use-breakpoints");
-function useBreakpoint() {
-    const breakpointsRef = use_breakpoints_1.default();
+function useBreakpoint(screens) {
+    const breakpointsRef = use_breakpoints_1.default(screens);
     return vue_1.computed(() => {
@@ -9,0 +9,0 @@ const { value } = breakpointsRef;

lib/use-breakpoints.d.ts

 import { ComputedRef } from 'vue';
-export declare type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
-export default function useBreakpoints(): ComputedRef<Breakpoint[]>;
+export interface BreakpointOptions extends Record<string, number> {
+}
+export declare type ExtractBreakpoint<T> = keyof T;
+export declare type ExtractBreakpointStatus<T> = {
+    [k in keyof T]: boolean;
+};
+export declare type BreakpointHandler = {
+    [k in string]: mqlHandler;
+};
+export declare type ExtractMediaQueries<T> = {
+    [key in keyof T]: string;
+};
+declare type mqlHandler = (e: MediaQueryListEvent) => void;
+export default function useBreakpoints<T extends BreakpointOptions>(screens?: T): ComputedRef<Array<ExtractBreakpoint<T>>>;
+export {};

lib/use-breakpoints.js

@@ -5,55 +5,67 @@ "use strict";
 const vue_1 = require("vue");
-const breakpoints = ['xs', 's', 'm', 'l', 'xl'];
-const breakpointStatusRef = vue_1.ref({});
-const mediaQueries = {
-    xs: '(min-width: 0px)',
-    s: '(min-width: 600px)',
-    m: '(min-width: 1024px)',
-    l: '(min-width: 1440px)',
-    xl: '(min-width: 1920px)'
+const defaultBreakpointOptions = {
+    // mobile
+    // 0 ~ 640 doesn't mean it should display well in all the range,
+    // but means you should treat it like a mobile phone.)
+    xs: 0,
+    s: 640,
+    m: 1024,
+    l: 1280,
+    xl: 1536,
+    xxl: 1920 // normal desktop display
 };
-const handlerMap = Object.fromEntries(breakpoints.map(k => {
-    return [
-        k,
-        (e) => {
-            breakpointStatusRef.value[k] = e.matches;
+function createMediaQuery(screenWidth) {
+    return `(min-width: ${screenWidth}px)`;
+}
+const mqlMap = {};
+function useBreakpoints(screens = defaultBreakpointOptions) {
+    const breakpointStatusRef = vue_1.ref({});
+    const breakpoints = Object.keys(screens);
+    const updateBreakpoints = (e, breakpointName) => {
+        if (e.matches)
+            breakpointStatusRef.value[breakpointName] = true;
+        else
+            breakpointStatusRef.value[breakpointName] = false;
+    };
+    breakpoints.forEach(key => {
+        const breakpointValue = screens[key];
+        let mql;
+        let cbs;
+        if (mqlMap[breakpointValue] === undefined) {
+            mql = window.matchMedia(createMediaQuery(breakpointValue));
+            mql.addEventListener('change', (e) => {
+                cbs.forEach(cb => {
+                    cb(e, key);
+                });
+            });
+            cbs = new Set();
+            mqlMap[breakpointValue] = {
+                mql,
+                cbs
+            };
         }
-    ];
-}));
-const mqlMap = {};
-function init() {
-    breakpointStatusRef.value = Object.entries(mediaQueries).reduce((breakpointStatus, [key, value]) => {
-        const mql = window.matchMedia(value);
-        mqlMap[key] = mql;
-        breakpointStatus[key] = mql.matches;
-        mql.addEventListener('change', handlerMap[key]);
-        return breakpointStatus;
-    }, 
-    // eslint-disable-next-line @typescript-eslint/prefer-reduce-type-parameter
-    {});
-}
-function clear() {
-    breakpoints.forEach((key) => {
-        var _a;
-        (_a = mqlMap[key]) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', handlerMap[key]);
-        mqlMap[key] = undefined;
+        else {
+            mql = mqlMap[breakpointValue].mql;
+            cbs = mqlMap[breakpointValue].cbs;
+        }
+        cbs.add(updateBreakpoints);
+        if (mql.matches) {
+            cbs.forEach(cb => {
+                cb(mql, key);
+            });
+        }
     });
-}
-let usedCount = 0;
-function useBreakpoints() {
-    if (usedCount === 0) {
-        usedCount++;
-        init();
-    }
     vue_1.onBeforeUnmount(() => {
-        usedCount--;
-        if (usedCount === 0) {
-            clear();
-        }
+        breakpoints.forEach(breakpoint => {
+            const { cbs } = mqlMap[screens[breakpoint]];
+            if (cbs.has(updateBreakpoints)) {
+                cbs.delete(updateBreakpoints);
+            }
+        });
     });
     return vue_1.computed(() => {
         const { value } = breakpointStatusRef;
-        return breakpoints.filter(key => value[key]);
+        return breakpoints.filter((key) => value[key]);
     });
 }
 exports.default = useBreakpoints;

package.json

 {
   "name": "vooks",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "",
@@ -8,3 +8,4 @@ "main": "lib/index.js",
   "scripts": {
-    "test": "jest --forceExit",
+    "dev": "vite",
+    "test": "jest",
     "lint": "eslint src/**/*",
@@ -22,9 +23,12 @@ "docs": "vitepress dev docs",
   "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-typescript": "^7.10.4",
-    "@types/jest": "^26.0.14",
+    "@babel/core": "^7.13.8",
+    "@babel/preset-env": "^7.13.8",
+    "@babel/preset-typescript": "^7.13.0",
+    "@types/jest": "^26.0.20",
     "@typescript-eslint/eslint-plugin": "^4.4.0",
-    "babel-jest": "^26.5.2",
+    "babel-jest": "^26.6.3",
     "eslint": "^7.10.0",
@@ -36,11 +40,12 @@ "eslint-config-standard-with-typescript": "^19.0.1",
     "eslint-plugin-standard": "^4.0.1",
-    "jest": "^26.5.2",
-    "typescript": "^4.0.3",
-    "vitepress": "^0.9.0"
+    "jest": "^26.6.3",
+    "typescript": "^4.2.2",
+    "vite": "^2.0.4",
+    "vitepress": "^0.12.2",
+    "vue": "^3.0.0"
   },
   "dependencies": {
-    "evtd": "^0.1.0",
-    "vue": "^3.0.0"
+    "evtd": "^0.1.0"
   },
   "sideEffects": false
 }

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

41571

increased by5.35%

Lines of code

1098

increased by4.77%

Worsened metrics

Dev dependency count

17

increased by13.33%

Dependency changes

• - Removedvue@^3.0.0