@faceless-ui/window-info - npm Package Compare versions

Comparing version 2.2.0-rc.0 to 3.0.0-beta.0

dist/index.d.ts

@@ -1,5 +0,5 @@
-export { default as useWindowInfo } from './useWindowInfo';
-export { default as WindowInfo } from './WindowInfo';
-export { default as WindowInfoContext } from './WindowInfoProvider/context';
-export { default as WindowInfoProvider } from './WindowInfoProvider';
-export { default as withWindowInfo } from './withWindowInfo';
+export { default as useWindowInfo } from './useWindowInfo/index.js';
+export { default as WindowInfo } from './WindowInfo/index.js';
+export { default as WindowInfoContext } from './WindowInfoProvider/context.js';
+export { default as WindowInfoProvider } from './WindowInfoProvider/index.js';
+export { default as withWindowInfo } from './withWindowInfo/index.js';

dist/index.js

@@ -1,17 +0,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withWindowInfo = exports.WindowInfoProvider = exports.WindowInfoContext = exports.WindowInfo = exports.useWindowInfo = void 0;
-var useWindowInfo_1 = require("./useWindowInfo");
-Object.defineProperty(exports, "useWindowInfo", { enumerable: true, get: function () { return __importDefault(useWindowInfo_1).default; } });
-var WindowInfo_1 = require("./WindowInfo");
-Object.defineProperty(exports, "WindowInfo", { enumerable: true, get: function () { return __importDefault(WindowInfo_1).default; } });
-var context_1 = require("./WindowInfoProvider/context");
-Object.defineProperty(exports, "WindowInfoContext", { enumerable: true, get: function () { return __importDefault(context_1).default; } });
-var WindowInfoProvider_1 = require("./WindowInfoProvider");
-Object.defineProperty(exports, "WindowInfoProvider", { enumerable: true, get: function () { return __importDefault(WindowInfoProvider_1).default; } });
-var withWindowInfo_1 = require("./withWindowInfo");
-Object.defineProperty(exports, "withWindowInfo", { enumerable: true, get: function () { return __importDefault(withWindowInfo_1).default; } });
+export { default as useWindowInfo } from './useWindowInfo/index.js';
+export { default as WindowInfo } from './WindowInfo/index.js';
+export { default as WindowInfoContext } from './WindowInfoProvider/context.js';
+export { default as WindowInfoProvider } from './WindowInfoProvider/index.js';
+export { default as withWindowInfo } from './withWindowInfo/index.js';
 //# sourceMappingURL=index.js.map

dist/types.d.ts

@@ -1,3 +0,3 @@
-export { WindowInfoProviderProps, Breakpoints } from './WindowInfoProvider';
-export { WindowInfoProps } from './WindowInfo';
-export { IWindowInfoContext } from './WindowInfoProvider/context';
+export type { WindowInfoProviderProps, Breakpoints } from './WindowInfoProvider/index.js';
+export type { WindowInfoProps } from './WindowInfo/index.js';
+export type { IWindowInfoContext } from './WindowInfoProvider/context.js';

dist/types.js

@@ -1,3 +0,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};
 //# sourceMappingURL=types.js.map

dist/useWindowInfo/index.d.ts

@@ -1,3 +0,3 @@
-import { IWindowInfoContext } from '../WindowInfoProvider/context';
+import { IWindowInfoContext } from '../WindowInfoProvider/context.js';
 declare const useWindowInfo: () => IWindowInfoContext;
 export default useWindowInfo;

dist/useWindowInfo/index.js

@@ -1,11 +0,6 @@
-"use strict";
 'use client';
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-var context_1 = __importDefault(require("../WindowInfoProvider/context"));
-var useWindowInfo = function () { return (0, react_1.useContext)(context_1.default); };
-exports.default = useWindowInfo;
+import { useContext } from 'react';
+import WindowInfoContext from '../WindowInfoProvider/context.js';
+const useWindowInfo = () => useContext(WindowInfoContext);
+export default useWindowInfo;
 //# sourceMappingURL=index.js.map

dist/WindowInfo/index.d.ts

 import React from 'react';
-import { IWindowInfoContext } from '../WindowInfoProvider/context';
-export declare type ChildFunction = (context: IWindowInfoContext) => React.ReactNode;
-export declare type WindowInfoProps = {
+import { IWindowInfoContext } from '../WindowInfoProvider/context.js';
+export type ChildFunction = (context: IWindowInfoContext) => React.ReactNode;
+export type WindowInfoProps = {
     children?: React.ReactNode | ChildFunction;
@@ -6,0 +6,0 @@ };

dist/WindowInfo/index.js

@@ -1,44 +0,16 @@
-"use strict";
 'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var useWindowInfo_1 = __importDefault(require("../useWindowInfo"));
-var WindowInfo = function (props) {
-    var children = props.children;
-    var windowInfo = (0, useWindowInfo_1.default)();
+import React, { Fragment } from 'react';
+import useWindowInfo from '../useWindowInfo/index.js';
+const WindowInfo = (props) => {
+    const { children } = props;
+    const windowInfo = useWindowInfo();
     if (children) {
         if (typeof children === 'function') {
-            return (react_1.default.createElement(react_1.Fragment, null, children(windowInfo)));
+            return (React.createElement(Fragment, null, children(windowInfo)));
         }
-        return (react_1.default.createElement(react_1.Fragment, null, children));
+        return (React.createElement(Fragment, null, children));
     }
     return null;
 };
-exports.default = WindowInfo;
+export default WindowInfo;
 //# sourceMappingURL=index.js.map

dist/WindowInfoProvider/context.d.ts

 /// <reference types="react" />
-export declare type WatchedBreakpoints = {
+export type WatchedBreakpoints = {
     [key: string]: boolean;
@@ -4,0 +4,0 @@ };

dist/WindowInfoProvider/context.js

@@ -1,7 +0,5 @@
-"use strict";
 'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-var WindowInfoContext = (0, react_1.createContext)({});
-exports.default = WindowInfoContext;
+import { createContext } from 'react';
+const WindowInfoContext = createContext({});
+export default WindowInfoContext;
 //# sourceMappingURL=context.js.map

dist/WindowInfoProvider/index.d.ts

 import React from 'react';
-export declare type Breakpoints = {
+export type Breakpoints = {
     [key: string]: string;
 };
-export declare type WindowInfoProviderProps = {
+export type WindowInfoProviderProps = {
     breakpoints: Breakpoints;
@@ -7,0 +7,0 @@ children?: React.ReactNode;

dist/WindowInfoProvider/index.js

@@ -1,56 +0,14 @@
-"use strict";
 'use client';
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var context_1 = __importDefault(require("../WindowInfoProvider/context"));
-var reducer = function (state, action) {
-    var _a = action.payload, breakpoints = _a.breakpoints, animationRef = _a.animationRef;
+import React, { useCallback, useEffect, useReducer, useRef } from 'react';
+import WindowInfoContext from '../WindowInfoProvider/context.js';
+const reducer = (state, action) => {
+    const { payload: { breakpoints, animationRef, } } = action;
     animationRef.current = null;
-    var prevEventsFired = state.eventsFired;
-    var _b = document.documentElement, style = _b.style, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
-    var windowWidth = window.innerWidth, windowHeight = window.innerHeight;
-    var viewportWidth = "".concat(clientWidth / 100, "px");
-    var viewportHeight = "".concat(clientHeight / 100, "px");
-    var watchedBreakpoints = breakpoints ? Object.keys(breakpoints).reduce(function (matchMediaBreakpoints, key) {
-        var _a;
-        return (__assign(__assign({}, matchMediaBreakpoints), (_a = {}, _a[key] = window.matchMedia(breakpoints[key]).matches, _a)));
-    }, {}) : {};
-    var newState = {
+    const { eventsFired: prevEventsFired, } = state;
+    const { documentElement: { style, clientWidth, clientHeight, }, } = document;
+    const { innerWidth: windowWidth, innerHeight: windowHeight, } = window;
+    const viewportWidth = `${clientWidth / 100}px`;
+    const viewportHeight = `${clientHeight / 100}px`;
+    const watchedBreakpoints = breakpoints ? Object.keys(breakpoints).reduce((matchMediaBreakpoints, key) => (Object.assign(Object.assign({}, matchMediaBreakpoints), { [key]: window.matchMedia(breakpoints[key]).matches })), {}) : {};
+    const newState = {
         width: windowWidth,
@@ -71,6 +29,6 @@ height: windowHeight,
 };
-var WindowInfoProvider = function (props) {
-    var breakpoints = props.breakpoints, children = props.children;
-    var animationRef = (0, react_1.useRef)(null);
-    var _a = (0, react_1.useReducer)(reducer, {
+const WindowInfoProvider = (props) => {
+    const { breakpoints, children, } = props;
+    const animationRef = useRef(null);
+    const [state, dispatch] = useReducer(reducer, {
         width: undefined,
@@ -82,23 +40,23 @@ height: undefined,
         eventsFired: 0,
-    }), state = _a[0], dispatch = _a[1];
-    var requestAnimation = (0, react_1.useCallback)(function () {
+    });
+    const requestAnimation = useCallback(() => {
         if (animationRef.current)
             cancelAnimationFrame(animationRef.current);
-        animationRef.current = requestAnimationFrame(function () { return dispatch({
+        animationRef.current = requestAnimationFrame(() => dispatch({
             type: 'UPDATE',
             payload: {
-                breakpoints: breakpoints,
-                animationRef: animationRef,
+                breakpoints,
+                animationRef,
             }
-        }); });
+        }));
     }, [breakpoints]);
-    var requestThrottledAnimation = (0, react_1.useCallback)(function () {
-        setTimeout(function () {
+    const requestThrottledAnimation = useCallback(() => {
+        setTimeout(() => {
             requestAnimation();
         }, 500);
     }, [requestAnimation]);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         window.addEventListener('resize', requestAnimation);
         window.addEventListener('orientationchange', requestThrottledAnimation);
-        return function () {
+        return () => {
             window.removeEventListener('resize', requestAnimation);
@@ -117,3 +75,3 @@ window.removeEventListener('orientationchange', requestThrottledAnimation);
     // }, [requestAnimation]);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         if (state.eventsFired === 0) {
@@ -123,4 +81,4 @@ dispatch({
                 payload: {
-                    breakpoints: breakpoints,
-                    animationRef: animationRef,
+                    breakpoints,
+                    animationRef,
                 }
@@ -133,5 +91,5 @@ });
     ]);
-    return (react_1.default.createElement(context_1.default.Provider, { value: __assign({}, state) }, children && children));
+    return (React.createElement(WindowInfoContext.Provider, { value: Object.assign({}, state) }, children && children));
 };
-exports.default = WindowInfoProvider;
+export default WindowInfoProvider;
 //# sourceMappingURL=index.js.map

dist/withWindowInfo/index.js

@@ -1,28 +0,12 @@
-"use strict";
 'use client';
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
+import React from 'react';
+import useWindowInfo from '../useWindowInfo/index.js';
+const withWindowInfo = (PassedComponent) => {
+    const WindowInfoWrap = (props) => {
+        const windowInfoContext = useWindowInfo();
+        return (React.createElement(PassedComponent, Object.assign({}, props, { windowInfo: windowInfoContext })));
     };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var useWindowInfo_1 = __importDefault(require("../useWindowInfo"));
-var withWindowInfo = function (PassedComponent) {
-    var WindowInfoWrap = function (props) {
-        var windowInfoContext = (0, useWindowInfo_1.default)();
-        return (react_1.default.createElement(PassedComponent, __assign({}, __assign(__assign({}, props), { windowInfo: windowInfoContext }))));
-    };
     return WindowInfoWrap;
 };
-exports.default = withWindowInfo;
+export default withWindowInfo;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@faceless-ui/window-info",
-  "version": "2.2.0-rc.0",
+  "version": "3.0.0-beta.0",
   "main": "dist/index.js",
@@ -14,2 +14,3 @@ "types": "dist/index.d.ts",
   },
+  "type": "module",
   "bugs": {
@@ -27,5 +28,5 @@ "url": "https://github.com/faceless-ui/window-info/issues",
   "scripts": {
-    "build": "yarn lint && tsc",
-    "build-demo": "yarn lint && webpack --config webpack.demo.config.js",
-    "dev": "webpack-dev-server --hot --config webpack.development.config.js",
+    "build": "yarn lint && tsc --project tsconfig.build.json",
+    "build:demo": "yarn lint && webpack --config webpack.build-demo.config.js",
+    "dev": "webpack-dev-server --hot --config webpack.dev.config.js",
     "lint": "eslint .",
@@ -40,9 +41,8 @@ "test": "jest"
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "@types/jest": "^26.0.20",
     "@types/node": "^14.14.22",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.18.0",
-    "@typescript-eslint/parser": "^5.18.0",
-    "eslint": "^8.14.0",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.26.0",
@@ -62,7 +62,7 @@ "eslint-plugin-jest": "^26.1.5",
     "react-refresh-typescript": "^2.0.4",
-    "ts-loader": "^9.2.9",
-    "typescript": "^4.6.3",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.1"
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.4.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
@@ -69,0 +69,0 @@ "files": [

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

26

decreased by-3.7%

Is type module

Yes

Worsened metrics

Total package byte prevSize

16479

decreased by-34.7%

Number of package files

24

decreased by-38.46%

Lines of code

176

decreased by-51.38%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes