breakpoint-changes-rx - npm Package Compare versions

Comparing version 3.0.2 to 3.0.3

dist/breakpoints.d.ts

@@ -7,3 +7,3 @@ import { Observable, BehaviorSubject } from 'rxjs';
 }
-export declare type BreakpointDefinitions = Record<string, BreakpointDefinition>;
+export type BreakpointDefinitions = Record<string, BreakpointDefinition>;
 export interface BreakpointState {
@@ -13,3 +13,3 @@ curr: string[];
 }
-declare type BreakpointMinMaxDetector = (val: string) => boolean;
+type BreakpointMinMaxDetector = (val: string) => boolean;
 export interface BreakpointParseConfig {
@@ -21,7 +21,7 @@ regex?: RegExp;
 }
-declare type GetCurrentBreakpointsFnc = () => string[];
-declare type IncludesBreakpointsFnc = (bps: string[]) => boolean;
-declare type IncludesBreakpointFnc = (bp: string) => boolean;
-declare type BreakpointsChangeFnc = (bp: string) => Observable<boolean>;
-declare type BreakpointsInRangeFnc = (range: string[]) => Observable<boolean>;
+type GetCurrentBreakpointsFnc = () => string[];
+type IncludesBreakpointsFnc = (bps: string[]) => boolean;
+type IncludesBreakpointFnc = (bp: string) => boolean;
+type BreakpointsChangeFnc = (bp: string) => Observable<boolean>;
+type BreakpointsInRangeFnc = (range: string[]) => Observable<boolean>;
 interface BreakpointFncs {
@@ -28,0 +28,0 @@ breakpointsChanges$: Observable<BreakpointState>;

dist/breakpoints.js

@@ -13,3 +13,2 @@ import { Observable, merge, BehaviorSubject, } from 'rxjs';
     const parseConfig = Object.assign(Object.assign({}, defaultParseConfig), config);
-    // eslint-disable-next-line unicorn/no-array-reduce
     return Object.entries(object).reduce((obj, [key, value]) => {
@@ -39,3 +38,3 @@ const breakpointMatch = key.match(parseConfig.regex);
             // eslint-disable-next-line sonarjs/no-nested-template-literals
-            .map(([str, val]) => `(${str}-width: ${typeof val !== 'string' ? `${String(val)}px` : val})`)
+            .map(([str, val]) => `(${str}-width: ${typeof val === 'string' ? val : `${String(val)}px`})`)
             .join(' and '));
@@ -73,7 +72,2 @@ // set the current breakpoints
     breakpointsChanges$.subscribe(breakpointsChangesBehavior$);
-    /**
-     * Returns the current breakpoint names.
-     *
-     * @returns the current breakpoint names
-     */
     // TODO: check array.includes(getCurrentBreakpoints()[0]))
@@ -94,17 +88,3 @@ const getCurrentBreakpoints = () => {
     const includesBreakpoint = (bp) => includesBreakpoints([bp]);
-    /**
-     * Create an observable emitting values for entering or leaving a breakpoint.
-     *
-     * @param bp the breakpoint name
-     *
-     * @returns an Observerable containing entering/leaving the breakpoint
-     */
     const breakpointsChange = (bp) => breakpointsChanges$.pipe(filter(({ curr, prev }) => [curr, prev].some((b) => breakpointListContainsBreakpoint(b, bp))), filter(({ curr, prev }) => curr.includes(bp) !== prev.includes(bp)), map(({ curr }) => curr.includes(bp)));
-    /**
-     * Create an observable emitting values for entering or leaving a breakpoint range
-     *
-     * @param range  an array containing a range of breakpoints
-     *
-     * @returns an Oberservable containing entering/leaving the breakpoint range
-     */
     const breakpointsInRange = (range) => {
@@ -117,6 +97,36 @@ const isInRange = (bpl) => breakpointListContainsBreakpoints(bpl, range);
         breakpointsChangesBehavior$,
+        /**
+         * Returns the current breakpoint names.
+         *
+         * @returns the current breakpoint names
+         */
         getCurrentBreakpoints,
+        /**
+         * Returns true if the current breakpoints contain breakpoints which are part of the given array.
+         *
+         * @param bps an array of breakpoint names
+         */
         includesBreakpoints,
+        /**
+         * Returns `true` if the given breakpoint is part of the current active breakpoints.
+         *
+         * @param bp the breakpoint
+         * @returns `true` if the breakpoint is included in current breakpoints
+         */
         includesBreakpoint,
+        /**
+         * Create an observable emitting values for entering or leaving a breakpoint.
+         *
+         * @param bp the breakpoint name
+         *
+         * @returns an Observerable containing entering/leaving the breakpoint
+         */
         breakpointsChange,
+        /**
+         * Create an observable emitting values for entering or leaving a breakpoint range
+         *
+         * @param range  an array containing a range of breakpoints
+         *
+         * @returns an Oberservable containing entering/leaving the breakpoint range
+         */
         breakpointsInRange,
@@ -123,0 +133,0 @@ };

package.json

 {
   "name": "breakpoint-changes-rx",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "repository": {
@@ -43,19 +43,21 @@ "type": "git",
   "devDependencies": {
-    "@commitlint/cli": "17.0.3",
-    "@commitlint/config-conventional": "17.0.3",
-    "@jenssimon/eslint-config-base": "6.0.0",
-    "@jenssimon/eslint-config-typescript": "3.5.1",
-    "@types/jest": "28.1.6",
-    "commitizen": "4.2.5",
+    "@commitlint/cli": "17.4.4",
+    "@commitlint/config-conventional": "17.4.4",
+    "@jenssimon/eslint-config-base": "6.6.12",
+    "@jenssimon/eslint-config-typescript": "3.6.28",
+    "@types/jest": "29.4.0",
+    "commitizen": "4.3.0",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "8.21.0",
-    "husky": "8.0.1",
-    "jest": "28.1.3",
-    "jest-environment-jsdom": "28.1.3",
+    "eslint": "8.35.0",
+    "husky": "8.0.3",
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
+    "lint-staged": "13.1.2",
     "npm-run-all": "4.1.5",
     "pinst": "3.0.0",
-    "rxjs": "7.5.6",
-    "semantic-release": "19.0.3",
-    "ts-jest": "28.0.7",
-    "typescript": "4.7.4"
+    "rxjs": "7.8.0",
+    "semantic-release": "20.1.1",
+    "ts-jest": "29.0.5",
+    "ts-node": "10.9.1",
+    "typescript": "4.9.5"
   },
@@ -90,3 +92,3 @@ "peerDependencies": {
   },
-  "packageManager": "yarn@3.2.2",
+  "packageManager": "yarn@3.4.1",
   "config": {
@@ -96,3 +98,11 @@ "commitizen": {
     }
+  },
+  "lint-staged": {
+    "**/*.{js,ts}": "eslint"
+  },
+  "release": {
+    "branches": [
+      "main"
+    ]
   }
 }

README.md

@@ -5,17 +5,27 @@ [![NPM version][npm-image]][npm-url] [![Downloads][npm-downloads-image]][npm-url] [![star this repo][gh-stars-image]][gh-url] [![fork this repo][gh-forks-image]][gh-url] [![Build Status][gh-status-image]][gh-url] [![Coverage Status][coveralls-image]][coveralls-url]
 
-> Detect and handle breakpoint changes using RxJS Observables
+> Detect and handle viewport changes. Using RxJS Observables
 
-This package helps to detect current breakpoints and breakpoint changes. It initializes with a breakpoint configuration and provides Observables and useful functions.
-Multiple breakpoints at the same time are supported.
+You have a responsive web site and want to handle viewport state with ease?
 
-> ⚠️️️️⚠️⚠️ WARNING: Version 3.x drops support for CommonJS and AMD. Target is ES2017 ⚠️⚠️⚠️
->
-> Version 3.0.0 only ships as ES module. Also the target version of this package is ES2017. If you need to support older browsers you need to transpile to a prior ES version.
+Here we are. Handing viewport state with the help of RxJS.
 
-> ⚠️️️️⚠️⚠️ WARNING: Version 2.x and beyond ⚠️⚠️⚠️
->
-> Version 2.0.0 removed the usage of the deprecated [MediaQueryList.addListener](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener).
-> Instead it uses [MediaQueryList.onchange](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange). See compatibility table before using it.
-> If needed I will continue provide changes to version 1.x which is using the deprecated function.
+```typescript
+import breakpoints, { parseBreakpoints } from 'breakpoint-changes-rx';
+import style from './style.scss';
 
+const breakpointDefinitions = parseBreakpoints(style);
+
+const bps = breakpoints(breakpointDefinitions);
+
+console.log('current breakpoints: %o', bps.getCurrentBreakpoints());
+```
+
+## What are the current viewports?
+
+```typescript
+console.log(
+  breakpoints.getCurrentBreakpoints(), // [ "md", "lg" } ]
+);
+```
+
 ## Install
@@ -32,2 +42,3 @@
 - [breakpoint-changes-rx](#breakpoint-changes-rx)
+  - [What are the current viewports?](#what-are-the-current-viewports)
   - [Install](#install)
@@ -47,4 +58,2 @@ - [`breakpoints(breakpointDefinitions)`](#breakpointsbreakpointdefinitions)
 
-> ℹ️ [`window.matchMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and [MediaQueryList.onchange](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange) are used so only browsers supporting this features can be used.
-
 For details about the breakpointDefinitions see [Configuration](#Configuration) section
@@ -195,3 +204,3 @@
 
-MIT © 2022 [Jens Simon](https://github.com/jenssimon)
+MIT © 2023 [Jens Simon](https://github.com/jenssimon)
 
@@ -207,3 +216,3 @@ [npm-url]: https://www.npmjs.com/package/breakpoint-changes-rx
 
-[coveralls-url]: https://coveralls.io/github/jenssimon/breakpoint-changes-rx?branch=master
-[coveralls-image]: https://coveralls.io/repos/github/jenssimon/breakpoint-changes-rx/badge.svg?branch=master
+[coveralls-url]: https://coveralls.io/github/jenssimon/breakpoint-changes-rx?branch=main
+[coveralls-image]: https://coveralls.io/repos/github/jenssimon/breakpoint-changes-rx/badge.svg?branch=main

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

Lines of code

165

increased by6.45%

Number of lines in readme file

214

increased by4.39%

Worsened metrics

Total package byte prevSize

17968

decreased by-0.53%

Dev dependency count

19

increased by11.76%

No dependency changes