@alfalab/core-components-mq - npm Package Compare versions

Comparing version 4.0.1 to 4.1.0

Component.js

@@ -6,2 +6,3 @@ 'use strict';
 var React = require('react');
+require('@alfalab/hooks');
 var utils = require('./utils.js');
@@ -26,2 +27,3 @@ var useMatchMedia = require('./useMatchMedia.js');
     }, [matches, onMatchChange]);
+    // eslint-disable-next-line react/jsx-no-useless-fragment
     return React__default['default'].createElement(React.Fragment, null, matches && IS_BROWSER ? children : null);
@@ -28,0 +30,0 @@ };

cssm/Component.js

@@ -6,2 +6,3 @@ 'use strict';
 var React = require('react');
+require('@alfalab/hooks');
 var utils = require('./utils.js');
@@ -26,2 +27,3 @@ var useMatchMedia = require('./useMatchMedia.js');
     }, [matches, onMatchChange]);
+    // eslint-disable-next-line react/jsx-no-useless-fragment
     return React__default['default'].createElement(React.Fragment, null, matches && IS_BROWSER ? children : null);
@@ -28,0 +30,0 @@ };

cssm/index.js

@@ -6,2 +6,3 @@ 'use strict';
 require('react');
+require('@alfalab/hooks');
 require('./utils.js');
@@ -8,0 +9,0 @@ var useMatchMedia = require('./useMatchMedia.js');

cssm/useMatchMedia.d.ts

 /**
  * Хук для медиа запросов.
  * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
  */
-declare const useMatchMedia: (query: string) => boolean[];
+declare const useMatchMedia: (query: string, defaultValue?: boolean) => boolean[];
 export { useMatchMedia };

cssm/useMatchMedia.js

@@ -6,2 +6,3 @@ 'use strict';
 var React = require('react');
+var hooks = require('@alfalab/hooks');
 var utils = require('./utils.js');
@@ -12,12 +13,24 @@
  * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
  */
-var useMatchMedia = function (query) {
-    var _a = React.useState(false), matches = _a[0], setMatches = _a[1];
-    React.useEffect(function () {
+var useMatchMedia = function (query, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = false; }
+    var _a = React.useState(defaultValue), matches = _a[0], setMatches = _a[1];
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
         var mql = utils.getMatchMedia(query);
         var handleMatchChange = function () { return setMatches(mql.matches); };
-        mql.addListener(handleMatchChange);
         handleMatchChange();
+        if (mql.addListener) {
+            mql.addListener(handleMatchChange);
+        }
+        else {
+            mql.addEventListener('change', handleMatchChange);
+        }
         return function () {
-            mql.removeListener(handleMatchChange);
+            if (mql.removeListener) {
+                mql.removeListener(handleMatchChange);
+            }
+            else {
+                mql.removeEventListener('change', handleMatchChange);
+            }
             utils.releaseMatchMedia(query);
@@ -24,0 +37,0 @@ };

esm/Component.js

 import React, { useEffect, Fragment } from 'react';
+import '@alfalab/hooks';
 import { isPointerEventsSupported, isTouchSupported } from './utils.js';
@@ -17,2 +18,3 @@ import { useMatchMedia } from './useMatchMedia.js';
     }, [matches, onMatchChange]);
+    // eslint-disable-next-line react/jsx-no-useless-fragment
     return React.createElement(Fragment, null, matches && IS_BROWSER ? children : null);
@@ -19,0 +21,0 @@ };

esm/index.js

 import 'react';
+import '@alfalab/hooks';
 import './utils.js';
 export { useMatchMedia } from './useMatchMedia.js';
 export { Mq } from './Component.js';

esm/useMatchMedia.d.ts

 /**
  * Хук для медиа запросов.
  * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
  */
-declare const useMatchMedia: (query: string) => boolean[];
+declare const useMatchMedia: (query: string, defaultValue?: boolean) => boolean[];
 export { useMatchMedia };

esm/useMatchMedia.js

@@ -1,2 +0,3 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
+import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { getMatchMedia, releaseMatchMedia } from './utils.js';
@@ -7,12 +8,24 @@
  * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
  */
-var useMatchMedia = function (query) {
-    var _a = useState(false), matches = _a[0], setMatches = _a[1];
-    useEffect(function () {
+var useMatchMedia = function (query, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = false; }
+    var _a = useState(defaultValue), matches = _a[0], setMatches = _a[1];
+    useLayoutEffect_SAFE_FOR_SSR(function () {
         var mql = getMatchMedia(query);
         var handleMatchChange = function () { return setMatches(mql.matches); };
-        mql.addListener(handleMatchChange);
         handleMatchChange();
+        if (mql.addListener) {
+            mql.addListener(handleMatchChange);
+        }
+        else {
+            mql.addEventListener('change', handleMatchChange);
+        }
         return function () {
-            mql.removeListener(handleMatchChange);
+            if (mql.removeListener) {
+                mql.removeListener(handleMatchChange);
+            }
+            else {
+                mql.removeEventListener('change', handleMatchChange);
+            }
             releaseMatchMedia(query);
@@ -19,0 +32,0 @@ };

index.js

@@ -6,2 +6,3 @@ 'use strict';
 require('react');
+require('@alfalab/hooks');
 require('./utils.js');
@@ -8,0 +9,0 @@ var useMatchMedia = require('./useMatchMedia.js');

modern/Component.js

 import React, { useEffect, Fragment } from 'react';
+import '@alfalab/hooks';
 import { isPointerEventsSupported, isTouchSupported } from './utils.js';
@@ -16,2 +17,3 @@ import { useMatchMedia } from './useMatchMedia.js';
     }, [matches, onMatchChange]);
+    // eslint-disable-next-line react/jsx-no-useless-fragment
     return React.createElement(Fragment, null, matches && IS_BROWSER ? children : null);
@@ -18,0 +20,0 @@ };

modern/index.js

 import 'react';
+import '@alfalab/hooks';
 import './utils.js';
 export { useMatchMedia } from './useMatchMedia.js';
 export { Mq } from './Component.js';

modern/useMatchMedia.d.ts

 /**
  * Хук для медиа запросов.
  * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
  */
-declare const useMatchMedia: (query: string) => boolean[];
+declare const useMatchMedia: (query: string, defaultValue?: boolean) => boolean[];
 export { useMatchMedia };

modern/useMatchMedia.js

@@ -1,2 +0,3 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
+import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { getMatchMedia, releaseMatchMedia } from './utils.js';
@@ -7,12 +8,23 @@
  * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
  */
-const useMatchMedia = (query) => {
-    const [matches, setMatches] = useState(false);
-    useEffect(() => {
+const useMatchMedia = (query, defaultValue = false) => {
+    const [matches, setMatches] = useState(defaultValue);
+    useLayoutEffect_SAFE_FOR_SSR(() => {
         const mql = getMatchMedia(query);
         const handleMatchChange = () => setMatches(mql.matches);
-        mql.addListener(handleMatchChange);
         handleMatchChange();
+        if (mql.addListener) {
+            mql.addListener(handleMatchChange);
+        }
+        else {
+            mql.addEventListener('change', handleMatchChange);
+        }
         return () => {
-            mql.removeListener(handleMatchChange);
+            if (mql.removeListener) {
+                mql.removeListener(handleMatchChange);
+            }
+            else {
+                mql.removeEventListener('change', handleMatchChange);
+            }
             releaseMatchMedia(query);
@@ -19,0 +31,0 @@ };

package.json

 {
     "name": "@alfalab/core-components-mq",
-    "version": "4.0.1",
+    "version": "4.1.0",
     "description": "",
@@ -18,3 +18,6 @@ "keywords": [],
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
+    },
+    "dependencies": {
+        "@alfalab/hooks": "^1.13.0"
     }
 }

send-stats.js

@@ -58,3 +58,3 @@ const http = require('http');
         return new Promise((resolve, reject) => {
-            const req = http.request(options, res => {
+            const req = http.request(options, (res) => {
                 res.on('end', () => {
@@ -61,0 +61,0 @@ resolve();

useMatchMedia.d.ts

 /**
  * Хук для медиа запросов.
  * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
  */
-declare const useMatchMedia: (query: string) => boolean[];
+declare const useMatchMedia: (query: string, defaultValue?: boolean) => boolean[];
 export { useMatchMedia };

useMatchMedia.js

@@ -6,2 +6,3 @@ 'use strict';
 var React = require('react');
+var hooks = require('@alfalab/hooks');
 var utils = require('./utils.js');
@@ -12,12 +13,24 @@
  * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
  */
-var useMatchMedia = function (query) {
-    var _a = React.useState(false), matches = _a[0], setMatches = _a[1];
-    React.useEffect(function () {
+var useMatchMedia = function (query, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = false; }
+    var _a = React.useState(defaultValue), matches = _a[0], setMatches = _a[1];
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
         var mql = utils.getMatchMedia(query);
         var handleMatchChange = function () { return setMatches(mql.matches); };
-        mql.addListener(handleMatchChange);
         handleMatchChange();
+        if (mql.addListener) {
+            mql.addListener(handleMatchChange);
+        }
+        else {
+            mql.addEventListener('change', handleMatchChange);
+        }
         return function () {
-            mql.removeListener(handleMatchChange);
+            if (mql.removeListener) {
+                mql.removeListener(handleMatchChange);
+            }
+            else {
+                mql.removeEventListener('change', handleMatchChange);
+            }
             utils.releaseMatchMedia(query);
@@ -24,0 +37,0 @@ };

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

AI-detected potential security risk

Supply chain risk

AI has determined that this package may contain potential security issues or vulnerabilities.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29920

increased by10.46%

Lines of code

785

increased by9.33%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@alfalab/hooks@^1.13.0

• + Added@alfalab/data@1.8.0(transitive)

• + Added@alfalab/hooks@1.13.0(transitive)

• + Added@alfalab/utils@1.16.0(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addeduuid@8.3.2(transitive)