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

Comparing version 2.0.1 to 2.0.2

dist/useWindowInfo/index.js

@@ -8,4 +8,4 @@ "use strict";
 var WindowInfoContext_1 = __importDefault(require("../WindowInfoContext"));
-var useWindowInfo = function () { return react_1.useContext(WindowInfoContext_1.default); };
+var useWindowInfo = function () { return (0, react_1.useContext)(WindowInfoContext_1.default); };
 exports.default = useWindowInfo;
 //# sourceMappingURL=index.js.map

dist/WindowInfo/index.d.ts

@@ -1,3 +0,7 @@
-/// <reference types="react" />
-declare const WindowInfo: React.FC;
+import React from 'react';
+import { IWindowInfoContext } from '../WindowInfoContext';
+export declare type ChildFunction = (context: IWindowInfoContext) => React.ReactNode;
+declare const WindowInfo: React.FC<{
+    children?: React.ReactNode | ChildFunction;
+}>;
 export default WindowInfo;

dist/WindowInfo/index.js

 "use strict";
+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) {
@@ -6,10 +29,12 @@ 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 = useWindowInfo_1.default();
+    var windowInfo = (0, useWindowInfo_1.default)();
     if (children) {
-        if (typeof children === 'function')
-            return children(windowInfo);
-        return children;
+        if (typeof children === 'function') {
+            return (react_1.default.createElement(react_1.Fragment, null, children(windowInfo)));
+        }
+        return (react_1.default.createElement(react_1.Fragment, null, children));
     }
@@ -16,0 +41,0 @@ return null;

dist/WindowInfoContext/index.d.ts

 /// <reference types="react" />
 import { Breakpoints } from '../types';
 export interface IWindowInfoContext {
-    width: number;
-    height: number;
+    width?: number;
+    height?: number;
     '--vw': string;
     '--vh': string;
-    breakpoints: Breakpoints;
+    breakpoints?: Breakpoints;
     eventsFired: number;
@@ -10,0 +10,0 @@ }

dist/WindowInfoContext/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var WindowInfoContext = react_1.createContext({});
+var WindowInfoContext = (0, react_1.createContext)({});
 exports.default = WindowInfoContext;
 //# sourceMappingURL=index.js.map

dist/WindowInfoProvider/index.d.ts

@@ -5,3 +5,4 @@ import React from 'react';
     breakpoints: Breakpoints;
+    children?: React.ReactNode;
 }>;
 export default WindowInfoProvider;

dist/WindowInfoProvider/index.js

@@ -15,3 +15,7 @@ "use strict";
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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) {
@@ -39,10 +43,14 @@ if (k2 === undefined) k2 = k;
 var WindowInfoContext_1 = __importDefault(require("../WindowInfoContext"));
-var reducer = function (state, payload) {
-    var breakpoints = payload.breakpoints, animationRef = payload.animationRef;
-    animationRef.current = undefined;
+var reducer = function (state, action) {
+    var _a = action.payload, breakpoints = _a.breakpoints, animationRef = _a.animationRef;
+    animationRef.current = null;
     var prevEventsFired = state.eventsFired;
-    var _a = document.documentElement, style = _a.style, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+    var _b = document.documentElement, style = _b.style, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
     var windowWidth = window.innerWidth, windowHeight = window.innerHeight;
-    var viewportWidth = clientWidth / 100 + "px";
-    var viewportHeight = clientHeight / 100 + "px";
+    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)));
+    }, {}) : undefined;
     var newState = {
@@ -53,6 +61,3 @@ width: windowWidth,
         '--vh': viewportHeight,
-        breakpoints: Object.keys(breakpoints).reduce(function (matchMediaBreakpoints, key) {
-            var _a;
-            return (__assign(__assign({}, matchMediaBreakpoints), (_a = {}, _a[key] = window.matchMedia(breakpoints[key]).matches, _a)));
-        }, {}),
+        breakpoints: watchedBreakpoints,
         eventsFired: prevEventsFired + 1,
@@ -70,4 +75,4 @@ };
     var breakpoints = props.breakpoints, children = props.children;
-    var animationRef = react_1.useRef(null);
-    var _a = react_1.useReducer(reducer, {
+    var animationRef = (0, react_1.useRef)(null);
+    var _a = (0, react_1.useReducer)(reducer, {
         width: undefined,
@@ -77,14 +82,17 @@ height: undefined,
         '--vh': '',
-        breakpoints: undefined,
+        breakpoints: breakpoints,
         eventsFired: 0,
     }), state = _a[0], dispatch = _a[1];
-    var requestAnimation = react_1.useCallback(function () {
+    var requestAnimation = (0, react_1.useCallback)(function () {
         if (animationRef.current)
             cancelAnimationFrame(animationRef.current);
         animationRef.current = requestAnimationFrame(function () { return dispatch({
-            breakpoints: breakpoints,
-            animationRef: animationRef,
+            type: 'UPDATE',
+            payload: {
+                breakpoints: breakpoints,
+                animationRef: animationRef,
+            }
         }); });
     }, [breakpoints]);
-    var requestThrottledAnimation = react_1.useCallback(function () {
+    var requestThrottledAnimation = (0, react_1.useCallback)(function () {
         setTimeout(function () {
@@ -94,3 +102,3 @@ requestAnimation();
     }, [requestAnimation]);
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         window.addEventListener('resize', requestAnimation);
@@ -107,3 +115,3 @@ window.addEventListener('orientationchange', requestThrottledAnimation);
     // use this effect to test rAF debounce by requesting animation every 1ms, for a total 120ms
-    // results: ~23 requests will be canceled, ~17 requests will be canceled, and only ~8 will truly dispatch
+    // results: ~23 requests will be cancelled, ~17 requests will be cancelled, and only ~8 will truly dispatch
     // useEffect(() => {
@@ -113,7 +121,10 @@ //   const firstID = setInterval(requestAnimation, 1);
     // }, [requestAnimation]);
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (state.eventsFired === 0) {
             dispatch({
-                breakpoints: breakpoints,
-                animationRef: animationRef,
+                type: 'UPDATE',
+                payload: {
+                    breakpoints: breakpoints,
+                    animationRef: animationRef,
+                }
             });
@@ -120,0 +131,0 @@ }

dist/withWindowInfo/index.js

@@ -21,3 +21,3 @@ "use strict";
     var WindowInfoWrap = function (props) {
-        var windowInfoContext = useWindowInfo_1.default();
+        var windowInfoContext = (0, useWindowInfo_1.default)();
         return (react_1.default.createElement(PassedComponent, __assign({}, __assign(__assign({}, props), { windowInfo: windowInfoContext }))));
@@ -24,0 +24,0 @@ };

package.json

 {
   "name": "@faceless-ui/window-info",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "homepage:": "https://faceless-ui/docs/window-info",
   "repository": "[e-mail]:faceless-ui/window-info.git",
@@ -29,13 +30,12 @@ "description": "React utility for subscribing to window events",
   "peerDependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@trbl/eslint-config": "^2.0.3",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.22",
-    "@types/react": "^17.0.0",
-    "@trbl/utils": "^1.1.1",
-    "@typescript-eslint/eslint-plugin": "^4.22.1",
-    "@typescript-eslint/parser": "^4.22.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
     "enzyme": "^3.11.0",
@@ -53,10 +53,8 @@ "enzyme-adapter-react-16": "^1.15.2",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^4.2.1",
     "jest": "^25.1.0",
-    "lint-staged": "^10.0.6",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-hot-loader": "^4.12.19",
     "ts-loader": "^8.0.14",
-    "typescript": "^4.1.3",
+    "typescript": "^4.6.3",
     "webpack": "^4.41.4",
@@ -66,10 +64,2 @@ "webpack-cli": "^3.3.9",
   },
-  "lint-staged": {
-    "*.js": "yarn lint"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "files": [
@@ -76,0 +66,0 @@ "dist"

README.md

@@ -7,12 +7,4 @@ [![NPM](https://img.shields.io/npm/v/@faceless-ui/window-info)](https://www.npmjs.com/@faceless-ui/window-info)
 
-A utility for subscribing to window events. Useful for conditional rendering, CSS breakpoints, or any window-based triggers.
+Read the full documentation [here](https://faceless-ui.com/docs/window-info).
 
-## Highlights
-
-- #### Event Consolidation
-  One event, many effects. Attach one, single event listener to the window with [WindowInfoProvider](./src/WindowInfoProvider/README.md). Then subscribe to it from anywhere with [useWindowInfo](./useWindowInfo/README.md), [withWindowInfo](./withWindowInfo/README.md), or [WindowInfo](./WindowInfo/README.md), they all do the same thing.
-
-- #### Animation Ready
-  Piped through [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) for built-in throttling and debouncing.
-
 ## Quick Start
@@ -28,33 +20,6 @@
 
-### Composition
+## Demo
 
-```jsx
-  import React from 'react';
-  import {
-    WindowInfo,
-    WindowInfoProvider,
-    withWindowInfo,
-    useWindowInfo
-  } from '@faceless-ui/window-info';
+For working examples, spin up the [demo app](./demo/App.demo.js):
 
-  const WithWindowInfo = withWindowInfo(({ windowInfo }) => <div>{windowInfo}</div>);
-  const UseWindowInfo = () => <div>{useWindowInfo()}</div>;
-
-  const App = () => (
-    <WindowInfoProvider>
-      <WithWindowInfo />
-      <UseWindowInfo />
-      <WindowInfo>
-        {(windowInfo) => <div>{windowInfo}</div>}
-      <WindowInfo>
-    </WindowInfoProvider>
-  );
-
-  export default App;
-```
-
-For working examples, see the [demo app](./demo/App.demo.js).
-
-## Demo
-
 ```bash
@@ -67,9 +32,2 @@ $ git clone [e-mail]:faceless-ui/window-info.git
 
-## API
-
-  - [useWindowInfo](./src/useWindowInfo/README.md)
-  - [WindowInfo](./src/WindowInfo/README.md)
-  - [WindowInfoProvider](./src/WindowInfoProvider/README.md)
-  - [withWindowInfo](./src/withWindowInfo/README.md)
-
 ## Contribution
@@ -76,0 +34,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

Improved metrics

Total package byte prevSize

23948

increased by12.43%

Dev dependency count

27

decreased by-10%

Number of package files

36

increased by20%

Lines of code

332

increased by27.2%

Worsened metrics

Number of lines in readme file

37

decreased by-53.16%

No dependency changes